Skip to content

Inline Toolbar

The Inline Editor controls toolbar and extension registration via toolbar: InlineToolbarConfig.

Defaults

ts
{ undoRedo: true, textFormat: true, link: true }

All Switches

KeyRegistered extensionsDescription
undoRedoStarterKit undoRedoUndo / redo
headingStarterKit heading (levels 1–6)Heading levels
textFormatStarterKit bold / italic / strike + UnderlineText formatting
listStarterKit bulletList / orderedList + TaskList/TaskItemOrdered / unordered / task lists
alignTextAlign (heading + paragraph)Alignment
linkLink extension + link bubble (showLinkBubble)Insert link
clearFormat— (button only, no extra extension)Clear formatting
fontTextStyle + FontFamily + FontSizeFont family and size
codeBlockcodeBlockLowlightCode block

Rule: when toolbar.x !== true, the corresponding button is hidden and the extension is not registered. Gates are derived by resolveInlineGates from the registry's inlineToolbarSlugs; undoRedo / heading / clearFormat share the inline-starter capability, which carries inlineAlways: true, so the StarterKit base is always registered and only its sub-extensions are gated.

Separately, a non-empty placeholder prop registers inline-placeholder (YanivPlaceholder), which is not controlled by toolbar.

Example

vue
<YanivInlineEditor
  v-model:content="html"
  mode="edit"
  placeholder="Write a comment…"
  :toolbar="{
    undoRedo: true,
    heading: true,
    textFormat: true,
    list: true,
    align: true,
    link: true,
    clearFormat: true,
    font: false,
    codeBlock: false,
  }"
/>

Custom Slot

Use the #toolbar slot + atomic components to compose your own toolbar. See Inline Composition.

Preview

Built-in toolbar and #toolbar slot are not rendered under mode="preview".