RichTextEditor

Props:
Properties
Types
Description
Required?
Default
disabled
boolean
true disables input
​
false
onBlur
Callback void
Executes the provided function when the user removes focus from the input.
​
undefined
onChange
Callback WhisperHandlerWithParam<string>
Executes the provided function when the user alters the value of the input.
​
undefined
onFocus
Callback void
Executes the provided function when the user focuses into the input.
​
undefined
tooltip
string
Text that appears when hovering over the input.
​
null
validationError
string
When not undefined, outlines the input in red and renders the provided text in red beneath the input.

​
null
value
string
The stating state value associated with the input.
​
''
Example:
This is a Loop that you can input text in RichTextEditor and it will create a Markdown Whisper with the input.
RichTextEditor input Whisper
Whisper with input of text editor
TypeScript
React
1
import { whisper } from "@oliveai/ldk"
2
import { 
3
  NewWhisper,
4
  UpdateWhisper, 
5
  Whisper, 
6
  WhisperComponentType 
7
} from "@oliveai/ldk/dist/whisper"
8
​
9
const validateInputLength = ((string: string) => {
10
  if (string.length > 100 ) {
11
​
12
    return "Text Must be Less Than 100 Characters";
13
  } else {
14
​
15
    return undefined;
16
  }
17
})
18
​
19
const richTextExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
20
​
21
  return {
22
    label: 'Rich Text Editor Example',
23
    components: [
24
      {
25
        type: WhisperComponentType.RichTextEditor,
26
        disabled: false,
27
        onBlur: (error: Error | undefined) => {
28
          if (error) {
29
            console.debug(error);
30
          }
31
          if (validationError === undefined) {
32
            whisper.create({
33
              label: "Rich Text Editor Input",
34
              components: [
35
                {
36
                  type: WhisperComponentType.Markdown,
37
                  body: value
38
                }
39
              ]
40
            })
41
          }
42
        },
43
        onChange: (error: Error, param: string, whisper: Whisper) => {
44
          if (error) {
45
            console.debug(error)
46
          }
47
            whisper.update(richTextExampleConfig(param, validateInputLength(param)))
48
        },
49
        onFocus:(error: Error | undefined) => {
50
          console.debug(error);
51
        },
52
        tooltip: "Input text: 100 characters max",
53
        validationError: validationError,
54
        value: undefined,
55
      }
56
    ]
57
  }
58
})
59
​
60
const newRichTextExampleConfig = (async () => {
61
  await whisper.create(richTextExampleConfig('', undefined) as NewWhisper);
62
})
63
​
64
newRichTextExampleConfig();
65
​
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
​
3
const validateInputLength = ((string: string) => {
4
  if (string && string.length > 100 ) {
5
​
6
    return "Text Must be Less Than 100 Characters";
7
  } else {
8
​
9
    return undefined;
10
  }
11
})
12
​
13
const RichTextExample: React.FunctionComponent<Object> = () => { 
14
  
15
  const [ validationError, setValidationError ] = React.useState<string>()
16
  const [ value, setvalue ] = React.useState('');
17
​
18
  return (
19
    <oh-whisper label='RichTextEditor Example' onClose={ () => {}}>
20
      <oh-rich-text-editor
21
        disabled={false}
22
        onBlur={(error: Error | undefined) => {
23
          if (error) {
24
            console.debug(error);
25
          }
26
          if (validationError === undefined) {
27
            ReactWhisper.renderNewWhisper(
28
              <oh-whisper label="RichTextEditor Example" onClose={() => {}}>
29
                <oh-markdown body={value}></oh-markdown>
30
              </oh-whisper>
31
            )
32
          }
33
        }}
34
        onChange={(error, param) => {
35
          if (error) {
36
            console.debug(error)
37
          }
38
          setvalue(param)
39
          setValidationError(validateInputLength(param))
40
        }}
41
        onFocus={(error: Error | undefined) => {
42
          console.debug(error);
43
        }}
44
        tooltip='Input text: 100 characters max'
45
        validationError={validationError}
46
        value=''
47
      />
48
    </oh-whisper>
49
  )
50
}
51
​
52
ReactWhisper.renderNewWhisper(<RichTextExample />);
53
​
Copied!

Whisper Components - Previous

Rating

Next - Whisper Components

Section Title

Last modified 1mo ago

Copy link

Contents

Props:

Example: