@slash-editor/react

Every hook here composes a core extension's editor.storage (subscribe/state) with the extension's own commands — none owns behavior the core doesn't already expose.

useSlashEditorCopy Anchor Link

useSlashEditor(options?: UseSlashEditorOptions): Editor | null

Extends @tiptap/react's useEditor options with two fields:

Every other option passes through to useEditor. Two defaults differ: immediatelyRender: false (so the same component renders under SSR without a hydration mismatch), and extensions are resolved once per editor instance — ProseMirror cannot swap a schema on a live document, so later changes to blockKit/extensions are ignored rather than silently half-applied.

useSlashMenuCopy Anchor Link

useSlashMenu(editor: Editor | null): SlashMenu

Exposes the slash command's ranked state plus a caret anchor:

interface SlashMenu {
  open: boolean;
  query: string;
  items: SlashItem[];
  activeIndex: number;
  activeItem: SlashItem | null;
  anchor: SlashMenuAnchor | null;
  setActiveIndex: (index: number) => void;
  select: (index?: number) => void;
  close: () => void;
}

useBubbleToolbarCopy Anchor Link

useBubbleToolbar(editor: Editor | null): BubbleToolbar

Selection-anchored formatting state — items already filtered by each item's when.

useMentionCopy Anchor Link

useMention(editor: Editor | null): MentionMenu

Same subscribe/setActiveIndex/select/close shape as useSlashMenu, plus loading while the async provider's promise for the current query is in flight. See the mentions guide.

useEmojiCopy Anchor Link

useEmoji(editor: Editor | null): EmojiMenu

Same subscribe/setActiveIndex/select/close shape as useSlashMenu; items are EmojiItems ranked for the query. See the emoji guide.

useLinkEditorCopy Anchor Link

useLinkEditor(editor: Editor | null): LinkEditor

Owns only visibility and a draft href — applying or removing the link calls the link mark's own setLink/unsetLink directly.

useCommentsCopy Anchor Link

useComments(editor: Editor | null): Comments

Reads the CommentThreadStore configured through createBlockKit({ comment: { store } }), subscribes to store changes, and exposes the selection-driven composer state. See the comments guide.

useResolvedSrcCopy Anchor Link

useResolvedSrc(src: string | null | undefined, node: Node, resolveSrc: ResolveSrc | undefined): string | null

The display URL for a media node view: src passed through the node's display-only resolveSrc option (props.extension.options.resolveSrc). Sync results return on the same render; async results yield null until they settle, a result for a superseded src is discarded, and a thrown error or rejection falls back to src. See the upload adapter guide.

usePresenceCopy Anchor Link

usePresence(provider: PresenceProvider | null): PresencePeer[]

Reads any awareness-shaped provider — the same duck-typed surface collaboration uses — into a plain array of connected peers.

Pages hooksCopy Anchor Link

usePage(store: PageStore, pageId: string | null | undefined): { page: PageMeta | undefined; status: "loading" | "ready" | "missing" }
usePageTree(store: PageStore, rootId?: string | null, options?: { defaultExpanded?: string[] }): { rows; toggle; expand; collapse }
useBreadcrumb(store: PageStore, pageId: string | null | undefined): PageMeta[]
useBacklinks(store: PageStore, pageId: string | null | undefined): { pages: PageMeta[]; loading: boolean }

Editor-independent, like usePresence: they read a PageStore directly. See the pages guide and Pages components.

useActiveItemScrollCopy Anchor Link

useActiveItemScroll(options: ActiveItemScrollOptions): void

Keeps a menu's active row scrolled into view as activeIndex changes — used by both Slash Menu and Mention Menu.

useBlockDragCopy Anchor Link

useBlockDrag(editor: Editor | null): BlockDrag

Drag/insert-handle state consumed by Block Handle.

Re-exported from @tiptap/reactCopy Anchor Link

EditorContent, EditorContext, EditorProvider, useCurrentEditor, useEditorState — unchanged, re-exported so a consumer never needs a direct @tiptap/react import for the common path.