React Lexical Editor

A rich text editor library for React built on top of Lexical, Meta's extensible text editor framework.

Features

• 📝 Rich text editing (bold, italic, underline, headings, etc.)
• 🖼️ Image support with captions
• 🔗 Links with custom editing UI
• 🧰 Customizable toolbar
• 📱 Responsive design
• 🔄 History (undo/redo)
• 🔌 Extensible plugin architecture
• 📦 Lightweight and optimized bundle

Installation

# npm
npm install react-lexical-editor

# yarn
yarn add react-lexical-editor

# pnpm
pnpm add react-lexical-editor

Quick Start

import React from 'react';
import { LexicalEditor } from 'react-lexical-editor';

function MyEditor() {
  return (
    <LexicalEditor
      placeholder="Start typing..."
      onChange={(editorState, editor) => {
        console.log(JSON.stringify(editorState.toJSON()));
      }}
    />
  );
}

Documentation

LexicalEditor Props

| Prop | Type | Default | Description | | -------------------------- | --------------------------------------------------------------- | ---------------------- | ---------------------------------------- | | initialState | string | undefined | Initial editor state as JSON string | | placeholder | string | 'Enter some text...' | Placeholder text when editor is empty | | theme | Record<string, any> | {} | Override theme styles | | onChange | (editorState: EditorState, editor: LexicalEditorType) => void | undefined | Callback when content changes | | editorConfig | Partial<InitialConfigType> | {} | Additional Lexical editor configuration | | contentEditableClassName | string | '' | Class name for ContentEditable component | | children | ReactNode | undefined | Additional plugins or editor components | | className | string | '' | Class name for editor container | | readOnly | boolean | false | Set editor to read-only mode | | showToolbar | boolean | true | Show/hide the toolbar | | enableImages | boolean | true | Enable image insertion and handling | | enableLinks | boolean | true | Enable link creation and editing |

Available Plugins

ImagePlugin

The ImagePlugin allows inserting and managing images in the editor.

import { ImagePlugin } from 'react-lexical-editor';

// Used internally when enableImages={true}
<ImagePlugin captionsEnabled={true} />;

Props:

• captionsEnabled: Boolean to enable/disable image captions (default: true)

LinkPlugin

Enhanced link editing capabilities beyond the standard Lexical LinkPlugin.

import { LinkPlugin } from 'react-lexical-editor';

// Used internally when enableLinks={true}
<LinkPlugin />;

ToolbarPlugin

Provides a rich formatting toolbar for the editor.

import { ToolbarPlugin } from 'react-lexical-editor';

// Used internally when showToolbar={true} and !readOnly
<ToolbarPlugin />;

Working with Editor State

You can save and restore editor state using the onChange prop and initialState:

const [editorState, setEditorState] = useState('');

// Save state when content changes
const handleEditorChange = state => {
  setEditorState(JSON.stringify(state.toJSON()));
};

// Later, restore the state
<LexicalEditor initialState={editorState} onChange={handleEditorChange} />;

Advanced Usage

Custom Plugins

You can add custom plugins by including them as children:

import { LexicalEditor } from 'react-lexical-editor';
import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';

function MyEditorWithAutoLink() {
  const MATCHERS = [
    {
      trigger: 'https://',
      url: 'https://{text}',
    },
  ];

  return (
    <LexicalEditor>
      <AutoLinkPlugin matchers={MATCHERS} />
    </LexicalEditor>
  );
}

Custom Theming

import { LexicalEditor } from 'react-lexical-editor';

const customTheme = {
  paragraph: 'my-paragraph-class',
  heading: {
    h1: 'my-h1-class',
    h2: 'my-h2-class',
  },
  text: {
    bold: 'my-bold-class',
    italic: 'my-italic-class',
  },
};

<LexicalEditor theme={customTheme} />;

Examples

Read-Only Editor

<LexicalEditor initialState={savedContent} readOnly={true} showToolbar={false} />

Editor with Custom Configuration

<LexicalEditor
  placeholder="Write your story..."
  editorConfig={{
    namespace: 'my-custom-editor',
    onError: error => {
      console.error('Custom error handler:', error);
    },
  }}
  contentEditableClassName="my-editor-styles"
/>

API Documentation

Detailed API documentation is available in the docs directory. The documentation is generated using TypeDoc and includes:

• Complete interface definitions
• Component props and methods
• Plugin APIs
• Exported variables and constants

To generate the latest documentation:

npm run docs

Development

# Install dependencies
npm install

# Start development playground
npm run playground

# Run tests
npm test

# Build for production
npm run build

Contributing

Contributions are welcome! Please check out our contributing guidelines.

License

MIT © Zaid Omar