Skip to content

Contextual UI

Beyond fixed header/footer, the editor shows contextual tools based on selection and preset.

Fixed Layout (Layout Chrome)

Determined by preset layout. Header/footer/floating menu/shortcut hints cannot be re-enabled by features alone. The table context bar also requires features.table (uiFlags.tableTools = layout.tableTools && gates.table).

ComponentbasicfullnotionNotes
Headerpreset layout
Footerpreset layout
Floating text menupreset layout
Link bubblepreset layout
Table tools❌*needs gates.table; *basic defaults table off
Keyboard shortcut hintspreset layout

* basic also shows the table context bar when :features="{ table: true }" (layout already enables tableTools).

Footer (basic / full): zoom 50–200%, page count, character count; full includes keyboard shortcut hints.

Floating Text Menu

Appears when text is selected or at the start of an empty line. Provides formatting, color, links, lists, etc. (notion / full). AI entry appears when the AI gate is enabled.

Bubbles / Context Bars

Selection typeUI
LinkLink bubble — edit URL, remove link
ImageImage context bar — alignment, preview, delete, resize
VideoVideo context bar — preview playback, delete
Table cellTable context bar — add/remove rows/cols, merge/split, header row/column, delete table (no cell background UI)

Block Menu

BlockPickerMenu triggered by slash command and drag handle (see Block Editing). Menus mount via the overlay portal and inherit .yaniv-editor z-index tokens.

Overlay Mounting

Bubble menus, BlockPicker, mention suggestions, AI popover, etc. mount inside .yaniv-editor__overlay-portal on EditorShell—not on document.body. See Z-Index & Overlays.

Mobile

When viewport ≤768px, the header automatically falls back to COMPACT layout (ToolbarNav).

Session Loading

During rebuild when sessionKey changes, a skeleton placeholder is shown to avoid chrome white-flash.