API Reference

`HybricEditor` is the main integration component for app-level editing surfaces.

`<HybricEditor />` Props

Prop	Type	Default	Description
`content`	`string \| JSONContent`	`undefined`	Initial content input. Accepts Markdown, HTML, or Tiptap JSON.
`editable`	`boolean`	`true`	Editable/read-only toggle.
`placeholder`	`string`	`"Type '/' for commands..."`	Placeholder shown for empty document.
`className`	`string`	`undefined`	Class name applied to editor root container.
`extensions`	`Extension[]`	`[]`	Additional Tiptap extensions merged with default stack.
`editorProps`	`EditorProps`	`undefined`	Native ProseMirror handlers (`handleKeyDown`, `handlePaste`, `handleDrop`, ...).
`onChange`	`(editor: Editor) => void`	`undefined`	High-frequency callback on each document update.
`onUpdate`	`({ editor, transaction }) => void`	`undefined`	Transaction-level callback for advanced integration.
`onDebouncedUpdate`	`({ editor, transaction }) => void`	`undefined`	Debounced callback for persistence. Use this for DB/network writes.
`debounceMs`	`number`	`400`	Debounce duration for `onDebouncedUpdate`.
`onExtract`	`(data: { id: string; content: JSON; text: string }) => void`	`undefined`	Triggered by context menu extract action.

Pro tip: keep the editor uncontrolled while typing. Do not force-write `content` from parent state on every keypress, especially with Chinese IME.

Callback signatures

onChange?: (editor: Editor) => void
onUpdate?: (payload: { editor: Editor; transaction: Transaction }) => void
onDebouncedUpdate?: (payload: { editor: Editor; transaction: Transaction }) => void
onExtract?: (data: { id: string; content: JSONContent; text: string }) => void

Editor instance methods

editor.chain().focus().toggleBold().run()
editor.chain().focus().setLink({ href: 'https://example.com' }).run()
editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
 
editor.getJSON()
editor.getHTML()
editor.commands.clearContent()
editor.commands.focus()

Document model (block IDs)

{
  "type": "doc",
  "content": [
    {
      "type": "heading",
      "attrs": { "id": "b1a2-3c4d", "level": 1 },
      "content": [{ "type": "text", "text": "Hello World" }]
    },
    {
      "type": "paragraph",
      "attrs": { "id": "uuid-1234" },
      "content": [{ "type": "text", "text": "This block can be referenced directly." }]
    }
  ]
}

Why this matters: block IDs enable granular patch updates, stable comment anchors, and deterministic card extraction.

Default extension surface (runtime)

StarterKit + Link + Underline + Highlight + Sub/Sup.
Task list, image, table, and mathematics support.
Unique block IDs (`@tiptap/extension-unique-id`).
Markdown-aware paste parser with footnote/task-list support.
Footnote interaction layer (reference + back reference).

See full details on the Extensions page. Extensions

Security notes

Client-side sanitization exists for HTML input, but backend sanitization is still mandatory.
Validate and whitelist URLs before persistence/rendering.

Quick integration example

import { HybricEditor } from 'hybricmark'
 
export default function EditorPage() {
  return (
    <HybricEditor
      content="# Hello"
      debounceMs={800}
      onDebouncedUpdate={({ editor }) => {
        void fetch('/api/docs/save', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(editor.getJSON()),
        })
      }}
    />
  )
}

Getting Started Overview