Skip to main content
161

Search Lumen

Find components, APIs, guides, and recipes.

Type at least two characters to search.

GitHub
Web docs
FormsGlass surface

RichTextEditor

Frames rich text toolbar and editing compositions.

View previewAPI referenceView in Figma

FrameworksAstro · React · Elements

Registry commandlumen add RichTextEditor

InteractionEnhanced runtime

01

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

AstroSame visual contract, native framework API

v2.0 Release Notes

Draft release notes...

  • Added new rich text toolbar
  • Improved editor layout

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.
astro
---
import { Button, ButtonGroup, Icon, RichTextEditor } from '@santi020k/lumen-astro'
---

<RichTextEditor>
  <div role="toolbar" aria-label="Editor toolbar">
    <ButtonGroup>
      <Button data-ui-editor-command="bold" type="button" variant="ghost" size="icon" aria-label="Bold">
        <Icon name="bold" decorative />
      </Button>
      <Button data-ui-editor-command="italic" type="button" variant="ghost" size="icon" aria-label="Italic">
        <Icon name="italic" decorative />
      </Button>
      <Button data-ui-editor-command="underline" type="button" variant="ghost" size="icon" aria-label="Underline">
        <Icon name="underline" decorative />
      </Button>
      <Button data-ui-editor-command="strikeThrough" type="button" variant="ghost" size="icon" aria-label="Strike">
        <!-- cspell:disable-next-line -->
        <Icon name="strikethrough" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="insertUnorderedList" type="button" variant="ghost" size="icon" aria-label="Bullet List">
        <Icon name="list" decorative />
      </Button>
      <Button data-ui-editor-command="insertOrderedList" type="button" variant="ghost" size="icon" aria-label="Numbered List">
        <Icon name="list-ordered" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="justifyLeft" type="button" variant="ghost" size="icon" aria-label="Align left">
        <Icon name="align-left" decorative />
      </Button>
      <Button data-ui-editor-command="justifyCenter" type="button" variant="ghost" size="icon" aria-label="Align center">
        <Icon name="align-center" decorative />
      </Button>
      <Button data-ui-editor-command="justifyRight" type="button" variant="ghost" size="icon" aria-label="Align right">
        <Icon name="align-right" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="unlink" type="button" variant="ghost" size="icon" aria-label="Remove link">
        <Icon name="unlink" decorative />
      </Button>
      <Button data-ui-editor-command="removeFormat" type="button" variant="ghost" size="icon" aria-label="Clear formatting">
        <Icon name="remove-formatting" decorative />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button data-ui-editor-command="undo" type="button" variant="ghost" size="icon" aria-label="Undo">
        <Icon name="undo-2" decorative />
      </Button>
      <Button data-ui-editor-command="redo" type="button" variant="ghost" size="icon" aria-label="Redo">
        <Icon name="redo-2" decorative />
      </Button>
    </ButtonGroup>
  </div>
  <div
    contenteditable="true"
    data-ui-rich-text-editable
    role="textbox"
    aria-label="Release notes"
    aria-multiline="true"
    spellcheck="true"
  >
    <h2>v2.0 Release Notes</h2>
    <p>Draft release notes...</p>
    <ul>
      <li>Added new rich text toolbar</li>
      <li>Improved editor layout</li>
    </ul>
  </div>
</RichTextEditor>
Edit RichTextEditor in browser
02

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

bash@santi020k/lumen-astro
pnpm add @santi020k/lumen-astro
pnpm add @santi020k/lumen-astro
bashAstro wrapper
lumen add RichTextEditor
lumen add RichTextEditor

Glass

Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.

AstroSame visual contract, native framework API
Draft the glass release notes... the editing area stays translucent so the backdrop glows through.

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.
astro
---
import { Button, ButtonGroup, Icon, RichTextEditor } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <RichTextEditor glass>
    <div role="toolbar" aria-label="Formatting">
      <ButtonGroup>
        <Button data-ui-editor-command="bold" type="button" variant="ghost" size="icon" aria-label="Bold">
          <Icon name="bold" decorative />
        </Button>
        <Button data-ui-editor-command="italic" type="button" variant="ghost" size="icon" aria-label="Italic">
          <Icon name="italic" decorative />
        </Button>
        <Button data-ui-editor-command="underline" type="button" variant="ghost" size="icon" aria-label="Underline">
          <Icon name="underline" decorative />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button data-ui-editor-command="insertUnorderedList" type="button" variant="ghost" size="icon" aria-label="Bullet List">
          <Icon name="list" decorative />
        </Button>
      </ButtonGroup>
    </div>
    <div contenteditable="true">Draft the glass release notes... the editing area stays translucent so the backdrop glows through.</div>
  </RichTextEditor>
</div>
Edit RichTextEditor in browser

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

AttributeValuesDefaultDescription
glassboolean | "subtle" | "strong"falseApplies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
data-ui-editor-commandstring-Runs formatting, block, alignment, history, link, list, or custom commands and emits ui:editor-command.
data-ui-editor-valuestring-Supplies a value for commands such as formatBlock and createLink. Native select values are read automatically.
data-ui-rich-text-editabledata attribute-Marks the editable content surface for shortcuts, state syncing, and ui:editor-change events.
class, classNamestring""Merges custom classes with the generated ui-* root classes.
...native attributesHTML attributes-Forwards standard attributes to the root element unless the component consumes them.

Runtime events

CustomEvents dispatched by the Astro UIPrimitives runtime for this component.

EventTargetDetailWhen
ui:editor-commandRichTextEditor root ([data-ui-rich-text-editor]){ command: string, executed: boolean, value?: string }Fires after a toolbar control or keyboard shortcut runs an editor command.
ui:editor-changeRichTextEditor root ([data-ui-rich-text-editor]){ html: string, text: string }Fires after editable content changes or an editor command runs.
Web docsFull catalog