Options

Every field of the options prop with its type and default: block handle spacing, autosave debounce, shortcut hints and the tail click.

How they resolve

options is optional, and every field inside it is optional. A field that is missing, or holds a value of the wrong type, takes its default. A number is used only when it is finite and not negative, and a flag only when it is a boolean. An unknown key is ignored.

A change to handle, shortcutHints or appendOnTailClick takes effect at once, with no remount: the editor instance is kept and the handle is measured again. Passing a new object with the same values does nothing, because the values are compared, not the object.

Every field

Name	Type	Default	Description
handle.gap	number	12	Pixels between the block handle and the left edge of its block.
handle.centerMax	number	48	Tallest block, in pixels, that the handle is centred on when the block has no anchor. A taller block puts the handle on its first line.
handle.anchorCenterMax	number	64	Tallest marked anchor, such as a media frame, that the handle is centred on. A taller anchor keeps the handle at its top.
autosave.debounceMs	number	800	Milliseconds after the last change before a save starts. The save controller is created when a document opens or starts over, so a changed value applies from the next controller. The controller already running keeps its delay.
shortcutHints	boolean	true	false hides every shortcut hint and every aria-keyshortcuts attribute in the editor.
appendOnTailClick	boolean	true	false stops a click in the empty space below the last block from adding or focusing a paragraph. The browser handles the click.

Example

Every field together. In a real editor you would set one or two: a wider handle gap for a dense sidebar layout, or a longer debounce for a slow API.

tsx

"use client";

import { NotionLikeEditorBlock } from "@/components/blocks/notion-like-editor";

export function TunedEditor() {
  return (
    <NotionLikeEditorBlock
      documentId="notes"
      options={{
        handle: { gap: 20, centerMax: 48, anchorCenterMax: 64 },
        autosave: { debounceMs: 1500 },
        shortcutHints: false,
        appendOnTailClick: false,
      }}
    />
  );
}

Theming for width and colour, which are CSS variables rather than options
Persistence for what the autosave debounce is waiting for

How they resolve

Every field

Example

Related