The @typix-editor/react package provides the foundation for building editors with Typix. It exports components, hooks, providers, utilities, and the TypixEditor class.

Component hierarchy

A Typix editor follows this structure:

EditorRoot
├── TypixEditorProvider (automatic)
├── SharedHistoryContext (automatic)
├── Toolbar (your component, uses useTypixEditor)
├── EditorContent
│   └── RichTextExtension (automatic)
├── EditorBubbleMenu (optional)
└── EditorCommand (optional)

EditorRoot sets up the Lexical composer and all required context providers. Everything inside it has access to the editor.

Key concepts

TypixEditor class

The TypixEditor class wraps the Lexical editor instance with a clean, fluent API. You access it via useTypixEditor().

const editor = useTypixEditor();
editor.toggleBold().toggleItalic(); // chainable

See TypixEditor API for the full reference.

Extensions

Extensions are React components (plugins) that add features to the editor. They're rendered as children of EditorRoot:

<EditorRoot>
  <EditorContent />
  <LinkExtension />
  <ShortCutsExtension />
  <MaxLengthExtension maxLength={1000} />
</EditorRoot>

Each extension may also provide custom Lexical nodes that need to be registered via createEditorConfig.

Hooks

Hooks provide reactive access to editor state:

Hook	Purpose
`useTypixEditor`	Access the TypixEditor instance
`useEditorState`	Reactive editor state (isEmpty)
`useActiveFormats`	Reactive text format state
`useRange`	Current selection range
`useMouseListener`	Mouse up/down events

Package exports

// Components
import { EditorRoot, EditorContent, EditorBubbleMenu, EditorCommand } from '@typix-editor/react';

// Hooks
import { useTypixEditor, useEditorState, useActiveFormats, useRange } from '@typix-editor/react';

// Configuration
import { createEditorConfig, defaultExtensionNodes, defaultTheme } from '@typix-editor/react';

// Editor class
import { TypixEditor } from '@typix-editor/react';

// Utilities
import { cn, sanitizeUrl, validateUrl, getSelectedNode } from '@typix-editor/react';

Core Overview