Custom Slash Menu

HybricMark is context-first by default, but slash interactions can be extended through Tiptap extensions.

Integration path

Implement a custom extension/plugin for slash command detection.
Pass it through `extensions`.
Keep command rendering state in your app layer when menu complexity grows.

Example shape

import type { Extension } from '@tiptap/core'
 
const MySlashExtension: Extension = /* your extension */
 
<HybricEditor
  content={doc}
  extensions={[MySlashExtension]}
/>

Recipe: add `Insert YouTube` command

import type { Editor } from '@tiptap/core'
 
function insertYouTube(editor: Editor, url: string) {
  const embed = `https://www.youtube.com/embed/${extractVideoId(url)}`
  editor
    .chain()
    .focus()
    .insertContent({
      type: 'paragraph',
      content: [{ type: 'text', text: `YouTube: ${embed}` }],
    })
    .run()
}
 
function insertWarningBox(editor: Editor) {
  editor
    .chain()
    .focus()
    .insertContent({
      type: 'blockquote',
      content: [
        {
          type: 'paragraph',
          content: [{ type: 'text', text: 'Warning: verify this step before publishing.' }],
        },
      ],
    })
    .run()
}

In practice, bind these commands into your slash command menu source and dispatch them from command handlers.

Product-level recommendations

Group commands by intent (`format`, `insert`, `actions`).
Reuse labels and shortcuts from context menu for consistency.
Keep top commands keyboard-first for speed.

Footnotes & Math Next.js / SSR