12 |
13 | ---
14 |
15 | ## Features
16 |
17 | - **Floating Menu** Format selected text easily
18 | - **Markdown Support** Use Markdown syntax, such as `##`
19 | - **Local Storage** Persist your content locally
20 | - **History** Undo/Redo changes with just a click
21 |
22 | Note: The feature set is far from complete. It should only show how to approach most common text editing features.
23 |
24 | ## Installation
25 |
26 | ```sh
27 | git clone https://github.com/konstantinmuenster/lexical-rich-text-react-demo.git
28 | cd lexical-rich-text-react-demo
29 | pnpm install # or npm install
30 | pnpm run dev # or npm run dev
31 | ```
32 |
33 | ## About
34 |
35 | 
36 |
37 | Konstantin Münster – [konstantin.digital](https://konstantin.digital)
38 |
39 | Distributed under the [MIT](http://showalicense.com/?fullname=Konstantin+M%C3%BCnster&year=2019#license-mit) license.
40 | See `LICENSE` for more information.
41 |
42 | [https://github.com/konstantinmuenster](https://github.com/konstantinmuenster)
43 |
--------------------------------------------------------------------------------
/src/components/Editor/plugins/OpenLink.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | import { createCommand, LexicalCommand } from "lexical";
4 | import { computePosition } from "@floating-ui/dom";
5 | import { LinkNode } from "@lexical/link";
6 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
7 |
8 | import { debounce } from "../utils/debounce";
9 | import { IconButton } from "../../IconButton";
10 |
11 | type OpenLinkMenuPosition = { x: number; y: number } | undefined;
12 |
13 | export const LINK_SELECTOR = `[data-lexical-editor] a`;
14 | export const OPEN_LINK_MENU_ID = "open-link-menu";
15 | export const TOGGLE_EDIT_LINK_MENU: LexicalCommand
89 | {link && !copied ? (
90 |
96 | {link}
97 |
98 | ) : (
99 |
100 | {copied ? "🎉 Copied!" : "No link"}
101 |
102 | )}
103 | {link ? (
104 | {
107 | navigator.clipboard.writeText(link);
108 | setCopied(true);
109 | setWidth(ref.current?.getBoundingClientRect().width);
110 | setTimeout(() => {
111 | setCopied(false);
112 | setWidth(undefined);
113 | }, 1000);
114 | }}
115 | />
116 | ) : undefined}
117 |
118 | );
119 | }
120 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.tsx:
--------------------------------------------------------------------------------
1 | import cx from "classnames";
2 |
3 | import { CodeNode } from "@lexical/code";
4 | import { AutoLinkNode, LinkNode } from "@lexical/link";
5 | import { ListItemNode, ListNode } from "@lexical/list";
6 | import { TRANSFORMERS } from "@lexical/markdown";
7 | import { HeadingNode, QuoteNode } from "@lexical/rich-text";
8 | import { LexicalComposer } from "@lexical/react/LexicalComposer";
9 | import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
10 | import { ListPlugin } from "@lexical/react/LexicalListPlugin";
11 | import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
12 | import { ContentEditable } from "@lexical/react/LexicalContentEditable";
13 | import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
14 | import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
15 | import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
16 |
17 | import { isValidUrl } from "./utils/url";
18 | import { ActionsPlugin } from "./plugins/Actions";
19 | import { AutoLinkPlugin } from "./plugins/AutoLink";
20 | import { EditLinkPlugin } from "./plugins/EditLink";
21 | import { FloatingMenuPlugin } from "./plugins/FloatingMenu";
22 | import { LocalStoragePlugin } from "./plugins/LocalStorage";
23 | import { OpenLinkPlugin } from "./plugins/OpenLink";
24 | import {
25 | EditorHistoryStateContext,
26 | useEditorHistoryState,
27 | } from "./context/EditorHistoryState";
28 |
29 | export const EDITOR_NAMESPACE = "lexical-editor";
30 |
31 | const EDITOR_NODES = [
32 | AutoLinkNode,
33 | CodeNode,
34 | HeadingNode,
35 | LinkNode,
36 | ListNode,
37 | ListItemNode,
38 | QuoteNode,
39 | ];
40 |
41 | type EditorProps = {
42 | className?: string;
43 | };
44 |
45 | export function Editor(props: EditorProps) {
46 | const content = localStorage.getItem(EDITOR_NAMESPACE);
47 |
48 | return (
49 |
56 |
57 | {
74 | console.log(error);
75 | },
76 | }}
77 | />
78 |
79 |
80 | );
81 | }
82 |
83 | type LexicalEditorProps = {
84 | config: Parameters
116 | Start writing...
117 |
118 | );
119 | };
120 |
--------------------------------------------------------------------------------
/src/components/Editor/plugins/Actions.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from "react";
2 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
3 | import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
4 | import {
5 | $getRoot,
6 | $isParagraphNode,
7 | CLEAR_EDITOR_COMMAND,
8 | REDO_COMMAND,
9 | UNDO_COMMAND,
10 | } from "lexical";
11 |
12 | import { Button } from "../../Button";
13 | import { useEditorHistoryState } from "../context/EditorHistoryState";
14 |
15 | export function ActionsPlugin() {
16 | const [editor] = useLexicalComposerContext();
17 | const { historyState } = useEditorHistoryState();
18 |
19 | const [isEditorEmpty, setIsEditorEmpty] = useState(true);
20 |
21 | const { undoStack, redoStack } = historyState ?? {};
22 | const [hasUndo, setHasUndo] = useState(undoStack?.length !== 0);
23 | const [hasRedo, setHasRedo] = useState(redoStack?.length !== 0);
24 |
25 | const MandatoryPlugins = useMemo(() => {
26 | return
66 |
74 |
93 |
94 | );
95 | }
96 |
97 | const ActionIcons = {
98 | Clear: (
99 |
114 | ),
115 | Undo: (
116 |
131 | ),
132 | Redo: (
133 |
148 | ),
149 | };
150 |
--------------------------------------------------------------------------------
/src/components/Editor/plugins/EditLink.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from "react";
2 | import { createPortal } from "react-dom";
3 |
4 | import {
5 | $getSelection,
6 | COMMAND_PRIORITY_LOW,
7 | createCommand,
8 | LexicalCommand,
9 | } from "lexical";
10 | import { TOGGLE_LINK_COMMAND } from "@lexical/link";
11 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
12 | import { computePosition } from "@floating-ui/dom";
13 |
14 | import { IconButton } from "../../IconButton";
15 |
16 | import { useClickOutside } from "../hooks/useClickOutside";
17 | import { $getSharedLinkTarget } from "../utils/$getSharedLinkTarget";
18 |
19 | type EditLinkMenuPosition = { x: number; y: number } | undefined;
20 |
21 | export const TOGGLE_EDIT_LINK_MENU: LexicalCommand
75 |
83 |
91 |
92 |
126 | setValue(e.target.value)}
130 | className="px-2 py-1 text-xs bg-transparent border-none outline-none"
131 | placeholder="Enter URL"
132 | onKeyDown={(e) => {
133 | if (e.key === "Enter") {
134 | e.preventDefault();
135 | handleSetLink();
136 | return;
137 | }
138 |
139 | if (e.key === "Escape") {
140 | e.preventDefault();
141 | resetState();
142 | return;
143 | }
144 | }}
145 | />
146 | {hasLink ? (
147 |
151 |
152 | );
153 | }
154 |
155 | /**
156 | * Renders a fake selection when the input element is focused.
157 | * This is to have some visual feedback to see where the link will be inserted.
158 | */
159 |
160 | function FakeSelection({ range }: { range: Range | undefined }) {
161 | if (!range) return null;
162 |
163 | const domRect = range.getBoundingClientRect();
164 | return createPortal(
165 | ,
174 | document.body
175 | );
176 | }
177 |
--------------------------------------------------------------------------------
/src/components/Editor/plugins/FloatingMenu.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from "react";
2 | import { createPortal } from "react-dom";
3 | import { $isLinkNode } from "@lexical/link";
4 | import { $getSelection, FORMAT_TEXT_COMMAND, LexicalEditor } from "lexical";
5 | import { computePosition } from "@floating-ui/dom";
6 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
7 |
8 | import { IconButton } from "../../IconButton";
9 |
10 | import { $isRangeSelected } from "../utils/$isRangeSelected";
11 | import { useUserInteractions } from "../hooks/useUserInteractions";
12 | import { TOGGLE_EDIT_LINK_MENU } from "./EditLink";
13 |
14 | type FloatingMenuPosition = { x: number; y: number } | undefined;
15 |
16 | type FloatingMenuProps = {
17 | editor: LexicalEditor;
18 | show: boolean;
19 | isBold: boolean;
20 | isCode: boolean;
21 | isLink: boolean;
22 | isItalic: boolean;
23 | isStrikethrough: boolean;
24 | isUnderline: boolean;
25 | };
26 |
27 | function FloatingMenu({ show, ...props }: FloatingMenuProps) {
28 | const ref = useRef
62 | {
67 | props.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
68 | }}
69 | />
70 | {
75 | props.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
76 | }}
77 | />
78 | {
83 | props.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
84 | }}
85 | />
86 | {
91 | props.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
92 | }}
93 | />
94 | {
99 | props.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
100 | }}
101 | />
102 | {
107 | props.editor.dispatchCommand(TOGGLE_EDIT_LINK_MENU, undefined);
108 | }}
109 | />
110 |
111 | );
112 | }
113 |
114 | const ANCHOR_ELEMENT = document.body;
115 |
116 | export function FloatingMenuPlugin() {
117 | const [show, setShow] = useState(false);
118 | const [isBold, setIsBold] = useState(false);
119 | const [isCode, setIsCode] = useState(false);
120 | const [isLink, setIsLink] = useState(false);
121 | const [isItalic, setIsItalic] = useState(false);
122 | const [isUnderline, setIsUnderline] = useState(false);
123 | const [isStrikethrough, setIsStrikethrough] = useState(false);
124 |
125 | const { isPointerDown, isKeyDown } = useUserInteractions();
126 | const [editor] = useLexicalComposerContext();
127 |
128 | const updateFloatingMenu = useCallback(() => {
129 | editor.getEditorState().read(() => {
130 | if (editor.isComposing() || isPointerDown || isKeyDown) return;
131 |
132 | if (editor.getRootElement() !== document.activeElement) {
133 | setShow(false);
134 | return;
135 | }
136 |
137 | const selection = $getSelection();
138 |
139 | if ($isRangeSelected(selection)) {
140 | const nodes = selection.getNodes();
141 | setIsBold(selection.hasFormat("bold"));
142 | setIsCode(selection.hasFormat("code"));
143 | setIsItalic(selection.hasFormat("italic"));
144 | setIsUnderline(selection.hasFormat("underline"));
145 | setIsStrikethrough(selection.hasFormat("strikethrough"));
146 | setIsLink(nodes.every((node) => $isLinkNode(node.getParent())));
147 | setShow(true);
148 | } else {
149 | setShow(false);
150 | }
151 | });
152 | }, [editor, isPointerDown, isKeyDown]);
153 |
154 | // Rerender the floating menu automatically on every state update.
155 | // Needed to show correct state for active formatting state.
156 | useEffect(() => {
157 | return editor.registerUpdateListener(() => {
158 | updateFloatingMenu();
159 | });
160 | }, [editor, updateFloatingMenu]);
161 |
162 | // Rerender the floating menu on relevant user interactions.
163 | // Needed to show/hide floating menu on pointer up / key up.
164 | useEffect(() => {
165 | updateFloatingMenu();
166 | }, [isPointerDown, isKeyDown, updateFloatingMenu]);
167 |
168 | return createPortal(
169 |