@lexical/rich-text

What is @lexical/rich-text?

@lexical/rich-text is a package that provides rich text editing capabilities using the Lexical framework. It allows developers to create feature-rich text editors with support for various text formatting options, embedded media, and more.

What are @lexical/rich-text's main functionalities?

Basic Text Formatting

This code sets up a basic rich text editor with support for text formatting, undo/redo functionality, and change tracking.

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';

const editorConfig = {
  namespace: 'MyEditor',
  theme: {},
  onError: (error) => {
    console.error(error);
  },
};

function MyEditor() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <HistoryPlugin />
      <OnChangePlugin onChange={(editorState) => {
        console.log(editorState);
      }} />
    </LexicalComposer>
  );
}

Custom Toolbar

This code demonstrates how to integrate a custom toolbar plugin into the rich text editor, allowing for additional text formatting options and controls.

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { ToolbarPlugin } from './ToolbarPlugin'; // Custom toolbar plugin

const editorConfig = {
  namespace: 'MyEditor',
  theme: {},
  onError: (error) => {
    console.error(error);
  },
};

function MyEditor() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <ToolbarPlugin />
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <HistoryPlugin />
      <OnChangePlugin onChange={(editorState) => {
        console.log(editorState);
      }} />
    </LexicalComposer>
  );
}

Embedding Media

This code shows how to add support for embedding images within the rich text editor using the ImagePlugin.

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { ImagePlugin } from '@lexical/react/LexicalImagePlugin';

const editorConfig = {
  namespace: 'MyEditor',
  theme: {},
  onError: (error) => {
    console.error(error);
  },
};

function MyEditor() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <HistoryPlugin />
      <OnChangePlugin onChange={(editorState) => {
        console.log(editorState);
      }} />
      <ImagePlugin />
    </LexicalComposer>
  );
}

Other packages similar to @lexical/rich-text

draft-js

Draft.js is a JavaScript rich text editor framework, built for React. It provides a set of tools for building rich text editors with support for various text formatting options, embedded media, and more. Compared to @lexical/rich-text, Draft.js is more mature and widely used but may have a steeper learning curve.

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of tools for creating complex text editing experiences with support for various text formatting options, embedded media, and more. Slate offers more flexibility and customization options compared to @lexical/rich-text but may require more effort to set up and configure.

quill

Quill is a powerful, free, open-source WYSIWYG editor built for the modern web. It provides a rich API for building text editors with support for various text formatting options, embedded media, and more. Quill is easier to set up and use compared to @lexical/rich-text but may offer less flexibility and customization options.

README

@lexical/rich-text

This package provides a starting point for Lexical users by registering listeners for a set of basic commands that cover simple text-editing behavior such as entering text, deleting characters, copy + paste, or changing the selection with arrow keys. It also provides default behavior for rich text features, such as headings, formatted, text and blockquotes.

You can use this package as a starting point, and then add additional command listeners to customize the functionality of your editor. If you don't want or need rich text functionality, you may want to consider using @lexical/plain-text instead.

Changelog

v0.21.0 (2024-12-01)

• Fix selected table colors (#6892) Gerard Rovira
• v0.20.2 (#6891) Sherry
• v0.20.2 Lexical GitHub Actions Bot