Docs

This page isn't translated yet

Editor tiers

The root, region, fragment and slot editors and what each offers.

On this page

Systhema ships four levels of Lexical editors. They differ in which features and blocks are enabled, so you pick the right one for the context.

EditorUse caseFeatures
rootPage-level contentAll blocks, full formatting
regionSection contentMost blocks, standard formatting
fragmentCard / feature contentLimited blocks, basic formatting
slotSingle-line contentText only, minimal formatting

Each tier is a factory exported from @systhemaui/payload: rootLexicalEditor, regionLexicalEditor, fragmentLexicalEditor and slotLexicalEditor. Built-in blocks pick the tier that fits where they sit, and your own fields can use the same factories.

Feature and block matrixLink to this section

Feature / BlockROOTREGIONFRAGMENTSLOT
Toolbar & UI
Inline Toolbar✅✅✅✅
Fixed Toolbar✅✅✅❌
Hide Gutter (Admin)❌✅✅✅
Rich Text Features
Bold✅✅✅✅
Italic✅✅✅✅
Underline✅✅✅✅
Strikethrough✅✅✅✅
Paragraph✅✅✅✅
Link✅✅✅✅
Align✅✅✅❌
Indent✅✅✅❌
Unordered List✅✅✅❌
Ordered List✅✅✅❌
Checklist✅✅✅❌
Horizontal Rule✅✅✅❌
Typography
Heading (h1)✅❌❌❌
Heading (h2-h6)✅✅✅❌
Balance Text✅✅✅✅
Lead Feature✅✅✅✅
Small Feature✅✅✅✅
Label Feature✅✅✅❌
AI Assistant ¹✅✅✅✅
Blocks
Section✅❌❌❌
Feature✅❌❌❌
Posts †✅❌❌❌
Component✅❌❌❌
Gallery✅⚠️❌❌
Columns✅⚠️❌❌
Card✅⚠️❌❌
Carousel✅✅❌❌
Accordion✅✅❌❌
Stack / Nested Stack✅✅✅❌
Video✅✅✅❌
Image✅✅✅❌
YouTube✅✅✅❌
Quote✅✅✅❌
Google Map✅✅✅❌
Embed✅✅✅❌
Form ‡✅✅✅❌
Inline Blocks
Button✅✅✅✅
Chip✅✅✅✅
Icon✅✅✅✅
Avatar✅✅✅✅

⚠️ = Configurable via options (see Region editor options below)

This table is what each tier ships by default. A project can change a tier's headings, its Label feature, or its whole feature set without forking it: see Extending a tier.

Alignment renders as an inline style, not a class. Align stores its choice on the element node itself, and @payloadcms/richtext-lexical applies it one level above the per-node converters — after a converter returns its element, the framework clones it with a style={{ textAlign: … }}. Systhema's converters therefore never read node.format, and a custom converter of your own does not need to either: it only has to spread its rest props onto the element it returns, so the injected style reaches the DOM. A converter that swallows style silently drops the editor's alignment.

† Posts is a root-only, section-like block offered only when the Posts module is enabled. Like Section/Feature it is never offered inside a region/fragment/slot body.

‡ Form is offered only when the Forms module is on — the forms plugin option in withSysthema() and blocks.form in systhema.config.ts. At fragment tier its Width alignment control is hidden and the form always renders at default width: a card / accordion / rich-text body already establishes the container, so a breakout there has nothing to break out of.

¹ Registered only when the ai plugin option is enabled (see AI Assistant). A single trailing toolbar group (always last) on whichever toolbars the tier exposes — the fixed and inline toolbars for root/region/fragment, and the inline toolbar only for the slot tier, which has no fixed toolbar — with selection-based actions (proofread/rephrase/expand/summarize/simplify/translate), compose, and — outside the slot tier — layout generation with native blocks. Where the editor registers the button inline block, generation can also emit inline CTA buttons (token-driven variants read from the real ButtonBlock definition); the slot tier passes no inline blocks, so it never emits them.

Blocks using each editorLink to this section

The rich-text fields inside a block use their own tier:

BlockROOTREGIONFRAGMENTSLOT
Component✅❌❌❌
Section❌✅❌❌
Feature❌✅❌❌
Gallery❌✅❌❌
Accordion❌❌✅❌
Card❌❌✅❌
Columns❌❌✅❌
RichText❌❌✅❌
Quote❌❌❌✅

Block names become element ids for in-page anchors. The link helper smooth-scrolls a same-page hash to that id, including ids that start with a digit. For nested blocks with their own reveals, see Suppressing child reveals.

Region editor optionsLink to this section

The region editor accepts three opt-in flags (all default to false) that control whether the nestable columns, card and gallery blocks appear in its block menu. They default off to prevent circular block nesting:

  • withColumns?: boolean — enable the columns block.
  • withCard?: boolean — enable the card block.
  • withGallery?: boolean — enable the gallery block.

For example, the Section, Feature, and Gallery blocks build their region editor with columns and card enabled:

regionLexicalEditor({ withColumns: true, withCard: true })

Gallery stays off in the Section, Feature and Gallery editors, so a Gallery never nests inside one of them. The default post body adds withGallery: true, so a Gallery can sit in a post but never inside a Section, Feature or another Gallery.