Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@lexical/rich-text

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lexical/rich-text

This package contains rich text helpers for Lexical.

0.3.7
Source
npm

Version published: 2 years ago

Weekly downloads: 554K; increased by5.51%

Maintainers: 6

Weekly downloads

Created: 3 years ago

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