CoreHooks
useTypixEditor
Access the TypixEditor instance for fluent editor operations
useTypixEditor returns the TypixEditor instance, providing a clean API for all editor operations.
Import
import { useTypixEditor } from '@typix-editor/react';Usage
function Toolbar() {
const editor = useTypixEditor();
return (
<div>
<button onClick={() => editor.toggleBold()}>Bold</button>
<button onClick={() => editor.toggleItalic()}>Italic</button>
<button onClick={() => editor.undo()}>Undo</button>
<button onClick={() => editor.redo()}>Redo</button>
</div>
);
}Return value
| Type | Description |
|---|---|
TypixEditor | The editor instance with fluent API methods |
See TypixEditor API for all available methods.
Requirements
Must be used inside an EditorRoot. Throws an error otherwise:
useTypixEditor must be used within EditorRoot.
Make sure your component is wrapped in <EditorRoot>.Difference from useEditorState
| Hook | Returns | Use case |
|---|---|---|
useTypixEditor | TypixEditor | High-level fluent API (formatting, content export, Lexical access via .lexical) |
useEditorState | { isEmpty: boolean } | Reactive editor state (empty check) |
Use useTypixEditor for most cases. Use useEditorState when you need the reactive isEmpty state.