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

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();

React

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 />);