Untitled
unknown
plain_text
2 years ago
2.5 kB
6
Indexable
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 LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary"; 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 { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin"; import { TRANSFORMERS } from "@lexical/markdown"; 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 />} ErrorBoundary={LexicalErrorBoundary} /> <TreeViewPlugin /> </div> </div> </LexicalComposer> ); }
Editor is loading...