Building a Simple Rich Text Editor with Lexical and React

Introduction to WYSIWYG Editors

The term “What You See Is What You Get” (WYSIWYG) is commonly used in software to describe rich text editors or systems that allow editing text in a rich format. WYSIWYG editors provide immediate feedback, making it easier to work on documents.

About Lexical

Lexical is a fast, reliable, lightweight, and accessible editor engine designed to provide a great developer experience. It’s not opinionated about the appearance or styling of the editor’s UI, making it highly extensible.

Features of Lexical

• Plain text
• Rich text
• Selection
• History
• Clipboard
• List
• Table
• Code
• Link

Getting Started with Lexical

To get started, we’ll create a React project and install the necessary dependencies. We’ll then import the necessary components to create an instance of the editor.

npx create-react-app my-editor
cd my-editor
npm install lexical

import { Editor } from 'lexical';

const editor = new Editor({
  // configuration options
});

Styling the Components

We can customize the appearance of nodes by defining a theme object, which maps CSS class names to the editor. Alternatively, we can define inline styles using Tailwind CSS classes in our theme object.

const theme = {
  paragraph: 'text-lg font-sans',
  heading: 'text-2xl font-serif',
};

Building the Toolbar Component

We’ll create a floating toolbar similar to that in Dropbox Paper. The toolbar will have buttons for formatting text, such as bold and italics.

import { Button } from 'eact';

const Toolbar = () => {
  return (

  );
};

Alternatives to Lexical

There are several alternative tools to Lexical, including:

• Draft.js
• Editor.js

While they offer similar features, they have different underlying architectures and design principles.

Conclusion

By following this article, you should be able to build a simple WYSIWYG editor using Lexical and React. The Lexical framework provides a wide range of prebuilt plugins, making it easy to add different functionalities to your editor.

With its extensible design and cross-platform support, Lexical is an excellent choice for building rich text editors.