High-level programmatic control

A hook that provides non-reactive getter functions for reading and writing editor content without dispatching low-level actions.

Toolbar.tsx

import { useEditorAPI } from "@/hooks/useEditorAPI"

function Toolbar() {
  const api = useEditorAPI()

  const handleSave = () => {
    const html = api.getHTML()
    const md   = api.getMarkdown()
    const json = api.getJSON()
    const text = api.getPlainText()
    saveToDB({ html, md, json, text })
  }

  const handleClear = () => api.clear()

  const handleLoad = (content) => {
    api.setContent(content)
  }

  return (
    <>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleClear}>Clear</button>
    </>
  )
}

Method	Returns	Description
getJSON()	ContainerNode	Get the raw node tree as JSON
getHTML()	string	Serialize content to HTML
getMarkdown()	string	Serialize content to Markdown
getPlainText()	string	Get content as plain text
setContent(container)	void	Replace entire editor content
insertBlock(node)	void	Insert a block at the current cursor position
clear()	void	Clear all editor content

Hooks

History System