Getting Started with Lexical for React

Introduction

This tutorial will guide you through setting up a basic lexical editor using the Lexical React library. By following these steps, you'll learn how to create a simple text editor, customize its functionality with plugins, and understand key concepts for further development.

Step 1: Setting Up Your Project

• Ensure you have a React project set up. If not, create one using Create React App or your preferred method.
• Install the necessary packages:

  npm install @lexical/react
  

• Verify that your package.json includes the Lexical dependencies.

Step 2: Creating the Basic Editor Component

• Start by creating a basic editor component. Your initial code should look like this:

  import { LexicalComposer } from '@lexical/react';
  
  const editorConfig = {
    // Configuration settings go here
  };
  
  function MyEditor() {
    return (
      <LexicalComposer initialConfig={editorConfig}>
        {/* Child components go here */}
      </LexicalComposer>
    );
  }
  

• In this setup, LexicalComposer serves as the base for your editor.

Step 3: Adding Basic Functionality

• Implement the Plain Text Plugin to handle user input:

  import { PlainTextPlugin } from '@lexical/react';
  
  function MyEditor() {
    return (
      <LexicalComposer initialConfig={editorConfig}>
        <PlainTextPlugin />
      </LexicalComposer>
    );
  }
  

• This plugin manages user events and input, simplifying the setup.

Step 4: Styling the Editor

• Create a CSS class for your editor to improve its appearance:

  .editor {
    height: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    position: relative;
  }
  

• Apply this class to your editor component:

  <div className="editor">
    <PlainTextPlugin />
  </div>
  

Step 5: Positioning the Placeholder

• To position the placeholder correctly, you may need to adjust the CSS:

  .placeholder {
    position: absolute;
    top: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    color: #999;
  }
  

• Add the placeholder to your editor component.

Step 6: Adding Plugins for Extended Functionality

• To incorporate undo/redo functionality, add the History Plugin:

  import { HistoryPlugin } from '@lexical/react';
  
  function MyEditor() {
    return (
      <LexicalComposer initialConfig={editorConfig}>
        <PlainTextPlugin />
        <HistoryPlugin />
      </LexicalComposer>
    );
  }
  

Step 7: Implementing a Custom OnChange Plugin

• Create a custom OnChangePlugin to track changes made in the editor:

  import { useLexicalComposerContext } from '@lexical/react';
  
  function MyOnChangePlugin({ onChange }) {
    const [editor] = useLexicalComposerContext();
  
    useEffect(() => {
      return editor.registerUpdateListener(({ editorState }) => {
        onChange(editorState);
      });
    }, [editor, onChange]);
  
    return null; // No UI to render
  }
  

• Use this plugin in your editor and pass a handler function to capture the changes.

Conclusion

In this tutorial, you've set up a basic lexical editor using Lexical React. You learned how to install necessary packages, create a functional editor, style it, and extend its capabilities with plugins. For further development, consider exploring rich text editing features and UI enhancements. Happy coding!