Plugins
Editor

Rich Text Editor

Guidelines for integrating rich text editing into Ledger UI applications.

Recommended Approach

Ledger UI does not bundle a rich text editor directly. Instead, integrate one of these libraries alongside @gtcx/ui components:

LibraryBest ForBundle Size
TipTap (opens in a new tab)Modern, extensible editor~50KB
Plate (opens in a new tab)Headless, composable~40KB
Lexical (opens in a new tab)Facebook's editor framework~30KB

Integration Pattern

Wrap your chosen editor with Ledger UI's Card and Form components for consistent styling:

import { Card, Form, Button } from '@gtcx/ui';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
 
function RichEditor({ name, label }) {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Start typing...</p>',
  });
 
  return (
    <Form.Item label={label} name={name}>
      <Card size="small" style={{ minHeight: 200 }}>
        <div className="editor-toolbar">
          <Button size="small" onClick={() => editor.chain().focus().toggleBold().run()}>
            Bold
          </Button>
          <Button size="small" onClick={() => editor.chain().focus().toggleItalic().run()}>
            Italic
          </Button>
        </div>
        <EditorContent editor={editor} />
      </Card>
    </Form.Item>
  );
}

Styling

Apply Ledger UI tokens to editor content for visual consistency:

.ProseMirror {
  font-family: var(--gtcx-font-sans);
  font-size: var(--gtcx-font-size-base);
  line-height: var(--gtcx-line-height-normal);
  color: var(--gtcx-color-text);
  padding: var(--gtcx-spacing-3);
}
 
.ProseMirror:focus {
  outline: 2px solid var(--gtcx-color-primary);
  border-radius: var(--gtcx-radius-md);
}

Accessibility

  • Ensure the editor has proper ARIA roles (role="textbox", aria-multiline="true")
  • Toolbar buttons should have aria-label descriptions
  • Support keyboard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
CalendarUpload