RichTextEditor
RichTextEditor is Input text that can be edited--such as bolded, italicized, crossed through, bulleted, numbered, or linked with markdown.
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. |
| '' |
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
import { whisper } from "@oliveai/ldk"
import {
NewWhisper,
UpdateWhisper,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const validateInputLength = ((string: string) => {
if (string.length > 100 ) {
return "Text Must be Less Than 100 Characters";
} else {
return undefined;
}
})
const richTextExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
return {
label: 'Rich Text Editor Example',
components: [
{
type: WhisperComponentType.RichTextEditor,
disabled: false,
onBlur: (error: Error | undefined) => {
if (error) {
console.debug(error);
}
if (validationError === undefined) {
whisper.create({
label: "Rich Text Editor Input",
components: [
{
type: WhisperComponentType.Markdown,
body: value
}
]
})
}
},
onChange: (error: Error, param: string, whisper: Whisper) => {
if (error) {
console.debug(error)
}
whisper.update(richTextExampleConfig(param, validateInputLength(param)))
},
onFocus:(error: Error | undefined) => {
console.debug(error);
},
tooltip: "Input text: 100 characters max",
validationError: validationError,
value: undefined,
}
]
}
})
const newRichTextExampleConfig = (async () => {
await whisper.create(richTextExampleConfig('', undefined) as NewWhisper);
})
newRichTextExampleConfig();
import { React, ReactWhisper } from "@oliveai/ldk"
const validateInputLength = ((string: string) => {
if (string && string.length > 100 ) {
return "Text Must be Less Than 100 Characters";
} else {
return undefined;
}
})
const RichTextExample: React.FunctionComponent<Object> = () => {
const [ validationError, setValidationError ] = React.useState<string>()
const [ value, setvalue ] = React.useState('');
return (
<oh-whisper label='RichTextEditor Example' onClose={ () => {}}>
<oh-rich-text-editor
disabled={false}
onBlur={(error: Error | undefined) => {
if (error) {
console.debug(error);
}
if (validationError === undefined) {
ReactWhisper.renderNewWhisper(
<oh-whisper label="RichTextEditor Example" onClose={() => {}}>
<oh-markdown body={value}></oh-markdown>
</oh-whisper>
)
}
}}
onChange={(error, param) => {
if (error) {
console.debug(error)
}
setvalue(param)
setValidationError(validateInputLength(param))
}}
onFocus={(error: Error | undefined) => {
console.debug(error);
}}
tooltip='Input text: 100 characters max'
validationError={validationError}
value=''
/>
</oh-whisper>
)
}
ReactWhisper.renderNewWhisper(<RichTextExample />);
Last modified 1yr ago