Name: Typix
Author: Diyorbek Juraev

EditorRoot is the top-level component for every Typix editor. It sets up the Lexical composer, context providers, history tracking, list support, and auto-focus.

Import

import { EditorRoot } from '@typix-editor/react';

Usage

<EditorRoot>
  <EditorContent placeholder="Start typing..." />
</EditorRoot>

With change handling

<EditorRoot
  onContentChange={(json) => {
    localStorage.setItem('draft', JSON.stringify(json));
  }}
>
  <EditorContent />
</EditorRoot>

With initial content

const saved = JSON.parse(localStorage.getItem('draft'));

<EditorRoot content={saved}>
  <EditorContent />
</EditorRoot>

With custom config

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

const config = createEditorConfig({
  namespace: 'my-editor',
  theme: defaultTheme,
  extensionNodes: defaultExtensionNodes,
});

<EditorRoot config={config}>
  <EditorContent />
</EditorRoot>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Child components (toolbar, content, extensions)
`config`	`InitialConfigType`	Auto-generated	Custom Lexical config. If omitted, creates a default config.
`content`	`SerializedEditorState \| null`	`null`	Initial content to load
`onChange`	`(editorState: EditorState) => void`	—	Raw editor state change handler
`onContentChange`	`(content: SerializedEditorState) => void`	—	Serialized JSON change handler

What it sets up

EditorRoot internally composes these providers and plugins:

LexicalComposer — Core Lexical editor initialization
TypixEditorProvider — Makes useTypixEditor() available
RootContext — Floating anchor element for bubble menus
SharedHistoryContext — Shared undo/redo history
OnChangePlugin — Content change callbacks (when onChange or onContentChange is provided)
ListPlugin — List support (bullet, ordered, check)
AutoFocusPlugin — Focuses the editor on mount

EditorRoot