Shadcn Lexical

Building Modern Rich Text Editors with Lexical and Shadcn UI

Shadcn-Lexical is a practical demonstration and codebase for integrating the powerful Lexical text editor framework with the aesthetically pleasing Shadcn UI component library. This project serves as a companion to a blog post, guiding developers through the process of setting up a basic yet functional rich text editor in a React environment. It showcases how to combine Lexical's extensibility with Shadcn's pre-built UI elements to create a seamless editing experience.

Features:

• Basic Lexical Editor Setup: Integrates RichTextPlugin for a core editable area with placeholder support.
• Configurable Editor Nodes: Allows definition of various rich text elements like Headings, Lists, Quotes, Code, and Links.
• Toolbar Plugin System: Implements a dedicated plugin for the toolbar, enabling access to the editor instance for custom controls.
• Text Formatting Controls: Provides toolbar buttons for Bold, Italic, and Underline styles via FORMAT TEXT COMMAND.
• Dynamic Format State: Toolbar buttons automatically update their appearance to reflect the formatting of the selected text.
• Custom Underline Styling: Demonstrates theme configuration (theme.text.underline) for applying custom CSS classes to text formats.
• Undo/Redo Functionality: Incorporates HistoryPlugin and toolbar buttons for undo/redo actions, with dynamic enabling/disabling based on CAN UNDO COMMAND and CAN REDO COMMAND.
• List Management: Supports creation and removal of ordered and unordered lists using ListPlugin and specific commands like INSERT ORDERED LIST COMMAND.
• Link Integration: Utilizes LinkPlugin for creating and managing hyperlinks within the editor content.
• Markdown-style Shortcuts: Implements MarkdownShortcutPlugin to convert Markdown syntax (via TRANSFORMERS) into rich text elements on the fly.
• Block Type Selection Dropdown: Offers a UI dropdown, built with Shadcn UI's Select component, to change the current block's type (e.g., Paragraph, Heading, Quote, List).
• Dynamic Block Type Indicator: The block type dropdown accurately reflects the type of the currently selected editor block by inspecting the node hierarchy.
• Shadcn UI for Toolbar: Leverages Shadcn UI components such as Toggle, Button, Separator, and Select for building an interactive and styled toolbar.

Summary:

Shadcn-Lexical offers developers a clear example and codebase for constructing a rich text editor by combining Lexical's robust framework with the sleek design of Shadcn UI components. It covers essential features like text formatting, block-level styling, undo/redo capabilities, and Markdown shortcuts, all presented within a React application. This project is an excellent starting point for anyone looking to build a modern, customizable text editor with these popular technologies.