LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Example:

Was this helpful?

  1. Whisper Components

RichTextEditor

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

PreviousRatingNextSection Title

Last updated 3 years ago

Was this helpful?

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.

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 />);
RichTextEditor input Whisper
Whisper with input of text editor