@typix-editor/react

The core React integration package for Typix — a headless, extensible rich text editor framework built on Meta's Lexical.

Full documentation →

Installation

pnpm add @typix-editor/react
# or
npm install @typix-editor/react

Quick Start

import {
  createEditorConfig,
  defaultExtensionNodes,
  defaultTheme,
  EditorContent,
  EditorRoot,
} from "@typix-editor/react";
import "@typix-editor/react/src/styles/main.css";

const config = createEditorConfig({
  extensionNodes: defaultExtensionNodes,
  theme: defaultTheme,
});

export default function MyEditor() {
  return (
    <EditorRoot config={config}>
      <EditorContent placeholder="Start typing..." />
    </EditorRoot>
  );
}

Core Components

| Component | Description | |-----------|-------------| | EditorRoot | Main wrapper — sets up Lexical composer and context | | EditorContent | Renders the editable content area | | EditorBubbleMenu | Floating toolbar on text selection | | EditorCommand | Slash command menu system |

Hooks

| Hook | Description | |------|-------------| | useTypixEditor() | Access the TypixEditor instance with fluent API | | useBlockType() | Current block type ("h1", "paragraph", "bullet", etc.) | | useActiveFormats() | Active text formats (bold, italic, underline, etc.) | | useEditorState() | Reactive state — { isEmpty } | | useRange() | Current selection range | | useMouseListener() | Mouse up/down events on the editor |

Fluent Editor API

useTypixEditor() returns a TypixEditor instance with chainable methods:

const editor = useTypixEditor();

// Toggle inline formats
editor.toggleBold();
editor.toggleItalic();
editor.toggleUnderline();
editor.toggleStrikethrough();
editor.toggleCode();

// Block types
editor.toggleHeading({ level: 1 });
editor.toggleHeading({ level: 2 });
editor.toggleQuote();
editor.toggleBulletList();
editor.toggleOrderedList();

// Links
editor.toggleLink("https://typix.uz");

// History
editor.undo();
editor.redo();

Extensions

Install extensions separately for the features you need:

| Extension | Package | |-----------|---------| | Auto Complete | @typix-editor/extension-auto-complete | | Auto Link | @typix-editor/extension-auto-link | | Character Limit | @typix-editor/extension-character-limit | | Code Highlight (Prism) | @typix-editor/extension-code-highlight-prism | | Code Highlight (Shiki) | @typix-editor/extension-code-highlight-shiki | | Collapsible | @typix-editor/extension-collapsible | | Context Menu | @typix-editor/extension-context-menu | | Drag & Drop Paste | @typix-editor/extension-drag-drop-paste | | Draggable Block | @typix-editor/extension-draggable-block | | Floating Link | @typix-editor/extension-floating-link | | Keywords | @typix-editor/extension-keywords | | Link | @typix-editor/extension-link | | Max Length | @typix-editor/extension-max-length | | Mention | @typix-editor/extension-mention | | Keyboard Shortcuts | @typix-editor/extension-short-cuts | | Speech to Text | @typix-editor/extension-speech-to-text | | Tab Focus | @typix-editor/extension-tab-focus |

Initial Content

Pass a serialized Lexical state via createEditorConfig:

const config = createEditorConfig({
  extensionNodes: defaultExtensionNodes,
  theme: defaultTheme,
  initialState: {
    root: {
      children: [
        {
          children: [{ detail: 0, format: 0, mode: "normal", style: "", text: "Hello world", type: "text", version: 1 }],
          direction: "ltr", format: "", indent: 0,
          type: "paragraph", version: 1, textFormat: 0, textStyle: "",
        },
      ],
      direction: "ltr", format: "", indent: 0, type: "root", version: 1,
    },
  } as any,
});

License

MIT © Diyorbek Juraev

Part of the Typix editor ecosystem.