@idstory-idm/rich-text

Install

npm:

npm i @idstory-idm/rich-text

Yarn:

yarn add @idstory-idm/rich-text

Use

import React from 'react'
import {
  RichTextEditor,
  getHtmlFromEditor,
  useRichTextEditorToolbar
} from '@idstory-idm/rich-text'

function Toolbar() {
  const {
    setTextFormat,
    setHeading,
    setList,
    setBlock,
    formats,
    blockType,
    isEditable,
    canRedo,
    canUndo,
    undo,
    redo
  } = useRichTextEditorToolbar();
  
  return (
    {/* ... toolbar component code */}
  )
}

interface MyComponentProps {
  htmlValue?: string
  placeholder?: string
  readOnly?: boolean
  className?: string
  children?: React.ReactNode
  style?: React.CSSProperties
}

export function MyComponent({ children, htmlValue, placeholder, readOnly, className, style }: MyComponentProps) {
  const handleChange = (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => {
    editorState.read(() => {
      const htmlValue = getHtmlFromEditor(editor);
      console.log({ htmlValue })
    });
  }
  
  return (
    <RichTextEditor
      htmlValue={htmlValue}
      className={className}
      placeholder={placeholder}
      readOnly={readOnly}
      onChange={handleChange}
      style={style}
    >
      <Toolbar />
      {children}
    </RichTextEditor>
  )
}