Anatomy

Every editor, from the full editor to the smallest pattern, is built from the same two ingredients: extensions that give the editor behavior, and UI plugins that render controls and menus.

Regions

The editor is a vertical stack inside one framed container.

LexicalExtensionComposer
└── frame (border, rounded corners)
    ├── Toolbar                 formatting controls
    ├── Content area            the editable surface
    │   └── overlays            floating toolbar, menus, drag handles
    └── Activity bar            counts and tools

Overlays render inside the content area's relative container, because they position themselves against it. Everything else is optional: an editor can be only a content area.

Extensions and plugins

An editor is declared once with defineExtension. Its dependencies list is the set of behaviors the editor has: rich text, history, lists, links, tables, images, and so on.

const app = useMemo(
  () =>
    defineExtension({
      name: "@intentui-editor/demo",
      namespace: "intentui-editor",
      dependencies: [RichTextExtension, HistoryExtension, ListExtension /* ... */],
      theme: editorTheme,
    }),
  [],
)

The UI plugins are the JSX you place inside the composer. A plugin is usually the face of an extension: HistoryToolbarPlugin renders undo and redo buttons, and HistoryExtension provides the history they call.

Removing only the plugin hides the UI and keeps the behavior, for example keyboard shortcuts. Removing only the extension can leave a plugin that does nothing. Each pattern lists which extensions and plugins belong together.

Next steps

Read about each region: Toolbar, Content area and Activity bar.