@doxi/react

React adapter for @doxi/core. Ships a thin <Editor> wrapper around the underlying EditorView, plus a useDoxivaEditor hook for imperative access.

Status: v0.10.x preview. Public API may evolve until v1.0.

Install

pnpm add @doxi/react @doxi/core react react-dom

Peer-deps: react ≥ 18 (works under 19), @doxi/core. Zero runtime deps beyond the peers.

Quickstart

import { Editor, useDoxivaEditor } from '@doxi/react'
import { defaultRenderer, defaultSchema, historyPlugin } from '@doxi/core'
import '@doxi/core/styles/base.css'
import '@doxi/core/styles/light.css'

export function App() {
  const editor = useDoxivaEditor({
    schema: defaultSchema,
    plugins: [historyPlugin().plugin],
  })

  return (
    <Editor
      editor={editor}
      renderer={defaultRenderer}
      ariaLabel="Document editor"
    />
  )
}

Imperative access

useDoxivaEditor returns a handle exposing the live EditorView:

const editor = useDoxivaEditor({ schema: defaultSchema })
// editor.view → underlying @doxi/core EditorView
// editor.dispatch(tr) → dispatch a transaction
// editor.replaceState(newState) → swap the whole state (e.g. after DOCX import)

Toolbar

@doxi/react ships a default toolbar; consumers can compose their own from the per-group builders (buildHistory, buildHeadings, buildLists, buildMarks, buildLinks, buildAlignment, buildBlocks, …). See the example app for a full reference setup.

Accessibility

<Editor> exposes an ariaLabel prop (default "Document editor") applied to the contenteditable surface alongside role="textbox" and aria-multiline="true". Localize for non-English UIs.

License

MIT