RichTextContainer

The RichTextContainer component provides React context to your RichTextEditor and control buttons. This allows the editor and control buttons to communicate with each other while still letting you render your own control buttons.

The RichTextEditor and all control buttons must be rendered as children of a RichTextContainer in order for bandicoot to work properly.

Basic Example

import sanitizeHTML from 'sanitize-html'
import {RichTextContainer, RichTextEditor} from 'bandicoot'

function MyEditor() {
  return (
    <RichTextContainer>
      <RichTextEditor sanitizeHTML={sanitizeHTML} />
    </RichTextContainer>
  )
}

Advanced Example

import {RichTextContainer, RichTextEditor, useDocumentExecCommand, useDocumentQueryCommandState} from 'bandicoot'

function MyEditor() {
  return (
    <RichTextContainer>
      <div className="control-buttons">
        <Bold />
        <Underline />
      </div>
      <RichTextEditor />
    </RichTextContainer>
  )
}

function Bold() {
  const {performCommand} = useDocumentExecCommand('bold')
  const {isActive} = useDocumentQueryCommandState('bold')

  return (
    <button onClick={performCommand} className={isActive ? 'active-button' : ''}>
      Bold
    </button>
  )
}

function underline() {
  const {performCommand} = useDocumentExecCommand('underline')
  const {isActive} = useDocumentQueryCommandState('underline')

  return (
    <button onClick={performCommand} className={isActive ? 'active-button' : ''}>
      Underline
    </button>
  )
}

API

Props

The RichTextContainer component does not accept any props.

Ref

The RichTextContainer does not provide any functionality via a React ref.