Lexkit Logo

createEditorSystem

Type-safe editor system factory

The core factory function that creates a fully typed editor system based on your extensions. Provides compile-time safety and intelligent autocomplete for your editor components.

Type SafeAuto CompleteExtensible

What It Does

createEditorSystem is the heart of LexKit's type system. It analyzes your extensions and generates a perfectly typed Provider component and useEditor hook.

Type Analysis

Analyzes your extension array and extracts command types, state queries, and configuration options at compile time.

Runtime Safety

Creates a runtime system that manages extension registration, command aggregation, and state synchronization.

Developer Experience

Provides intelligent autocomplete, compile-time error checking, and a clean API for building editor components.

Basic Usage

Get started with createEditorSystem in three simple steps.

1. Define Your Extensions

Create a const array of extensions for type safety.

Define extensions array

import { boldExtension, italicExtension, linkExtension } from '@lexkit/editor'

const extensions = [boldExtension, italicExtension, linkExtension] as const
2. Create Your Editor System

Use createEditorSystem with your extensions to generate typed components.

Create typed editor system

import { createEditorSystem } from '@lexkit/editor'

const { Provider, useEditor } = createEditorSystem<typeof extensions>()
3. Use in Your Components

Wrap your editor components with the Provider and use the hook.

Use the typed system

import { createEditorSystem } from '@lexkit/editor'
import { boldExtension, italicExtension } from '@lexkit/editor'

// Define your extensions as a const array for type safety
const extensions = [boldExtension, italicExtension] as const

// Create a typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <EditorContent />
    </Provider>
  )
}

Type Safety Benefits

createEditorSystem provides compile-time guarantees about your editor's capabilities.

Intelligent Autocomplete

Only available commands and states are suggested

// ✅ Type-safe: Only commands from your extensions are available
const { commands } = useEditor()

commands.formatText('bold')        // ✅ Available (from boldExtension)
commands.insertLink('url', 'text') // ✅ Available (if linkExtension is included)
// commands.someOtherCommand()     // ❌ TypeScript error - not available

// ✅ Type-safe state queries
const { activeStates } = useEditor()

activeStates.bold     // ✅ boolean
activeStates.italic   // ✅ boolean
activeStates.isLink   // ✅ boolean (if linkExtension is included)
// activeStates.unknown // ❌ TypeScript error - not available

Configuration

Customize your editor system with configuration options.

Provider Props
PropTypeDescription
extensionsExtension[]Required. Array of extensions to include in the editor.
configEditorConfigOptional. Configuration object with theme and other settings.
childrenReactNodeRequired. Your editor components.
Example with Configuration

Configure theme and other options

import { createEditorSystem, defaultLexKitTheme } from '@lexkit/editor'

const extensions = [boldExtension, italicExtension] as const
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

const customTheme = {
  ...defaultLexKitTheme,
  text: {
    bold: 'font-bold text-blue-600',
  },
}

function MyEditor() {
  return (
    <Provider
      extensions={extensions}
      config={{
        theme: customTheme,
        // other config options...
      }}
    >
      <EditorContent />
    </Provider>
  )
}

Advanced Usage

Take advantage of createEditorSystem's advanced features.

Multiple Editor Types

Create different editor systems for different use cases in the same app.

Different editors for different purposes

// Different editor configurations for different use cases
const basicExtensions = [boldExtension, italicExtension] as const
const richExtensions = [
  ...basicExtensions,
  linkExtension,
  listExtension,
  imageExtension
] as const

const BasicEditorSystem = createEditorSystem<typeof basicExtensions>()
const RichEditorSystem = createEditorSystem<typeof richExtensions>()

// Comment editor - basic features
function CommentEditor() {
  return (
    <BasicEditorSystem.Provider extensions={basicExtensions}>
      <BasicEditorContent />
    </BasicEditorSystem.Provider>
  )
}

// Content editor - full features
function ContentEditor() {
  return (
    <RichEditorSystem.Provider extensions={richExtensions}>
      <RichEditorContent />
    </RichEditorSystem.Provider>
  )
}
Advanced State Management

Access export/import utilities, state queries, and the raw editor instance.

Full access to editor capabilities

function AdvancedEditor() {
  const {
    commands,
    activeStates,
    stateQueries,
    editor,
    export: exportUtils,
    import: importUtils
  } = useEditor()

  // Use reactive state queries
  const handleCustomAction = async () => {
    const isLink = await stateQueries.isLink()
    if (isLink) {
      // Handle link-specific logic
    }
  }

  // Export/import functionality
  const saveContent = async () => {
    const html = await exportUtils.toHTML()
    const json = exportUtils.toJSON()
    // Save to your backend...
  }

  return (
    <div>
      <button onClick={handleCustomAction}>
        Custom Action
      </button>
      <button onClick={saveContent}>
        Save
      </button>
    </div>
  )
}

API Reference

Complete reference for the createEditorSystem API.

Provider Component
Provider<Exts>

React component that provides editor context. Wraps your editor components.

extensions: Exts

Required. Your extension array.

config?: EditorConfig

Optional. Editor configuration.

useEditor Hook
commands

All available commands from your extensions.

activeStates

Current state of all formatters and selections.

editor

Raw Lexical editor instance for advanced use.

export / import

Utilities for content serialization.

Best Practices

Tips for getting the most out of createEditorSystem.

Use Const Assertions

Always use as const with your extension arrays to enable full type inference.

Single Responsibility

Create separate editor systems for different use cases rather than one system with all possible extensions.

Type Your Props

Use typeof extensions when calling createEditorSystem to maintain type safety.

Composition Over Configuration

Build complex editors by composing simpler ones rather than configuring a single complex system.