Skip to content

Block Editing

Notion-style block editing is driven by slashCommand and dragHandle capabilities, enabled by default on the notion preset.

vue
<YanivEditor preset="notion" appearance="notion" />

You can also enable explicitly on other presets:

vue
<YanivEditor preset="full" :features="{ slashCommand: true, dragHandle: true }" />

Slash Command /

Type / at the start of a block to open the block type menu with search filtering.

The trigger condition is "the block text before the cursor is exactly / plus non-whitespace characters", so content may already follow the cursor — the line does not have to be empty. Deleting the /, moving the cursor out of that range, or making a non-collapsed selection closes the menu.

Basic Blocks

Paragraph, headings H1–H3

Lists

Ordered list, unordered list, task list

Notion Blocks

Block typeDescriptionShortcut
CalloutCallout / tip boxType > at line start
Toggle listExpandable / collapsibleChoose via /
ColumnLayoutTwo-column layoutChoose via /
EmbedExternal link bookmark cardChoose via /
Mention@ user/entityType @

Advanced Blocks

Blockquote, code block, table, image, video, formula, horizontal rule

The block menu is filtered by gates and schema (e.g., table item hidden when table gate is off).

Mention data

Both the @ menu and the block menu's "page link" item read the mentionItems prop; without it they fall back to built-in placeholder data. See Integration Props.

Drag Handle

Six-dot icon on the left of each block:

  • Click to open insert/action menu
  • Drag to reorder blocks

Markdown Input Rules

NotionMarkdownInput is registered by the notionBlocks capability, whose featureKey is slashCommand — so these rules come with slashCommand, not with the notion preset specifically:

InputResult
[] / [x] Task list (a space is required after the brackets; [x] is case-insensitive)
> Callout block (falls back to blockquote when the schema has no callout)
---Horizontal rule (no trailing space needed)

StarterKit's own rules (#, - , 1. , ```, …) work under every preset and are unaffected by this gate.

Line-Start + Button

The + to the left of a paragraph (drag-handle-plus) is provided by the dragHandle capability and opens the insert menu. It is a different thing from the floating text menu:

UIProvided byTrigger
Line-start + / six-dot handlethe dragHandle gatehovering a block
Floating text menu (FloatingMenu)preset layout (full / notion)a non-empty text selection; an empty cursor does not

See Contextual UI.

Preview Mode

Block menu and drag interactions are disabled in preview (chromePolicy.showBlockPicker=false + isEditable guards).