Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance.
Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.
Basic usage:
1. Implement the Lexical with React.
import LexicalComposer from "@lexical/react/LexicalComposer"; import PlainTextPlugin from "@lexical/react/LexicalPlainTextPlugin"; import ContentEditable from "@lexical/react/LexicalContentEditable"; import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"; import OnChangePlugin from "@lexical/react/LexicalOnChangePlugin"; import TreeViewPlugin from "./plugins/TreeViewPlugin"; import EmoticonPlugin from "./plugins/EmoticonPlugin"; import MyCustomAutoFocusPlugin from "./plugins/MyCustomAutoFocusPlugin"; import editorConfig from "./editorConfig"; import onChange from "./onChange"; export default function Editor() { return ( <LexicalComposer initialConfig={editorConfig}> <div className="editor-container"> <PlainTextPlugin contentEditable={<ContentEditable className="editor-input" />} placeholder={<Placeholder />} /> <OnChangePlugin onChange={onChange} /> <HistoryPlugin /> <TreeViewPlugin /> <EmoticonPlugin /> <MyCustomAutoFocusPlugin /> </div> </LexicalComposer> ); } function Placeholder() { return <div className="editor-placeholder">Enter some plain text...</div>; }
2. Create a rich text editor.
import ExampleTheme from "./themes/ExampleTheme"; 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 AutoFocusPlugin from "@lexical/react/LexicalAutoFocusPlugin"; import TreeViewPlugin from "./plugins/TreeViewPlugin"; import ToolbarPlugin from "./plugins/ToolbarPlugin"; import { HeadingNode, QuoteNode } from "@lexical/rich-text"; import { TableCellNode, TableNode, TableRowNode } from "@lexical/table"; import { ListItemNode, ListNode } from "@lexical/list"; import { CodeHighlightNode, CodeNode } from "@lexical/code"; import { AutoLinkNode, LinkNode } from "@lexical/link"; import LinkPlugin from "@lexical/react/LexicalLinkPlugin"; import ListPlugin from "@lexical/react/LexicalListPlugin"; import LexicalMarkdownShortcutPlugin from "@lexical/react/LexicalMarkdownShortcutPlugin"; import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin"; import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin"; import AutoLinkPlugin from "./plugins/AutoLinkPlugin"; function Placeholder() { return <div className="editor-placeholder">Enter some rich text...</div>; } const editorConfig = { // The editor theme theme: ExampleTheme, // Handling of errors during update onError(error) { throw error; }, // Any custom nodes go here nodes: [ HeadingNode, ListNode, ListItemNode, QuoteNode, CodeNode, CodeHighlightNode, TableNode, TableCellNode, TableRowNode, AutoLinkNode, LinkNode ] }; export default function Editor() { return ( <LexicalComposer initialConfig={editorConfig}> <div className="editor-container"> <ToolbarPlugin /> <div className="editor-inner"> <RichTextPlugin contentEditable={<ContentEditable className="editor-input" />} placeholder={<Placeholder />} /> <HistoryPlugin /> <TreeViewPlugin /> <AutoFocusPlugin /> <CodeHighlightPlugin /> <ListPlugin /> <LinkPlugin /> <AutoLinkPlugin /> <ListMaxIndentLevelPlugin maxDepth={7} /> <LexicalMarkdownShortcutPlugin /> </div> </div> </LexicalComposer> ); }
Preview:
Download Details:
Author: facebook
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/facebook/lexical
License: MIT