Editors and workspaces

useRichTextEditor

Provides rich text editing commands, values, shortcuts, active toolbar state, and HTML/text change details.

Copy React example RichTextEditor component

Live component preview · Astro

Explore RichTextEditor

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useRichTextEditor.

v2.0 Release Notes

Draft release notes...

Added new rich text toolbar
Improved editor layout

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Button, RichTextEditor } from '@santi020k/lumen-react'
import { useRichTextEditor } from '@santi020k/lumen-react'

export function Editor() {
  const editor = useRichTextEditor()

  return (
    <RichTextEditor {...editor.rootProps}>
      <div role="toolbar" aria-label="Formatting">
        <Button {...editor.getCommandProps('bold')} aria-label="Bold" size="icon">B</Button>
        <Button {...editor.getCommandProps('italic')} aria-label="Italic" size="icon">I</Button>
        <Button {...editor.getCommandProps('insertUnorderedList')} aria-label="Bulleted list" size="sm">List</Button>
      </div>
      <div {...editor.getEditableProps()}>
        <p>Start writing...</p>
      </div>
    </RichTextEditor>
  )
}

import { Button, RichTextEditor } from '@santi020k/lumen-react'
import { useRichTextEditor } from '@santi020k/lumen-react'

export function Editor() {
  const editor = useRichTextEditor()

  return (
    <RichTextEditor {...editor.rootProps}>
      <div role="toolbar" aria-label="Formatting">
        <Button {...editor.getCommandProps('bold')} aria-label="Bold" size="icon">B</Button>
        <Button {...editor.getCommandProps('italic')} aria-label="Italic" size="icon">I</Button>
        <Button {...editor.getCommandProps('insertUnorderedList')} aria-label="Bulleted list" size="sm">List</Button>
      </div>
      <div {...editor.getEditableProps()}>
        <p>Start writing...</p>
      </div>
    </RichTextEditor>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
onChange	(detail: { html: string, text: string }) => void	-	Callback fired when editable content changes.
onCommand	(detail: { command, value?, executed }) => void	-	Callback fired when a command is executed.

Controller return values

Property	Type	Description
rootProps	LumenProps<"section">	Spread onto the editor root section.
rootRef	RefObject<HTMLElement>	Ref to the editor root.
executeCommand	(command: string, root?, value?) => boolean	Executes a rich text command with an optional value.
getCommandProps	(command, props?) => LumenProps<"button">	Returns props for a toolbar button bound to a command.
getEditableProps	(props?) => LumenProps<"div">	Returns accessible editable props with shortcuts and change handling.