RichTextEditor
RichTextEditor is Input text that can be edited--such as bolded, italicized, crossed through, bulleted, numbered, or linked with markdown.

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!
Copy link