121
GitHub
Documentation
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 in context

Preview

v2.0 Release Notes

Draft release notes...

  • Added new rich text toolbar
  • Improved editor layout
02

Copy a working example

Usage

Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.

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>
  </div>
  <div contenteditable="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>
---
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>
  </div>
  <div contenteditable="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>
03

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.

Draft the glass release notes... the editing area stays translucent so the backdrop glows through.
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>
---
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>

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-commandbold | italic | underline | insertUnorderedList | insertOrderedList | createLink | unlink | formatBlock | removeFormat-Marks toolbar controls that call document.execCommand(command) and emit ui:editor-command.
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 }Fires after a [data-ui-editor-command] control runs document.execCommand(command).