event.preventDefault()}
214 | onClick={() => {
215 | setIsLinkEditMode(false);
216 | }}
217 | />
218 |
219 |
event.preventDefault()}
224 | onClick={handleLinkSubmission}
225 | />
226 |
230 |
235 | {linkUrl}
236 |
237 |
event.preventDefault()}
242 | onClick={() => {
243 | setEditedLinkUrl(linkUrl);
244 | setIsLinkEditMode(true);
245 | }}
246 | />
247 |
event.preventDefault()}
252 | onClick={() => {
253 | editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
254 | }}
255 | />
256 |
257 | )}
258 |
259 | );
260 | }
261 |
262 | function useFloatingLinkEditorToolbar(
263 | editor: LexicalEditor,
264 | anchorElem: HTMLElement,
265 | isLinkEditMode: boolean,
266 | setIsLinkEditMode: Dispatch
267 | ): JSX.Element | null {
268 | const [activeEditor, setActiveEditor] = useState(editor);
269 | const [isLink, setIsLink] = useState(false);
270 |
271 | useEffect(() => {
272 | function updateToolbar() {
273 | const selection = $getSelection();
274 | if ($isRangeSelection(selection)) {
275 | const node = getSelectedNode(selection);
276 | const linkParent = $findMatchingParent(node, $isLinkNode);
277 | const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
278 | // We don't want this menu to open for auto links.
279 | if (linkParent !== null && autoLinkParent === null) {
280 | setIsLink(true);
281 | } else {
282 | setIsLink(false);
283 | }
284 | }
285 | }
286 | return mergeRegister(
287 | editor.registerUpdateListener(({ editorState }) => {
288 | editorState.read(() => {
289 | updateToolbar();
290 | });
291 | }),
292 | editor.registerCommand(
293 | SELECTION_CHANGE_COMMAND,
294 | (_payload, newEditor) => {
295 | updateToolbar();
296 | setActiveEditor(newEditor);
297 | return false;
298 | },
299 | COMMAND_PRIORITY_CRITICAL
300 | ),
301 | editor.registerCommand(
302 | CLICK_COMMAND,
303 | (payload) => {
304 | const selection = $getSelection();
305 | if ($isRangeSelection(selection)) {
306 | const node = getSelectedNode(selection);
307 | const linkNode = $findMatchingParent(node, $isLinkNode);
308 | if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
309 | window.open(linkNode.getURL(), "_blank");
310 | return true;
311 | }
312 | }
313 | return false;
314 | },
315 | COMMAND_PRIORITY_LOW
316 | )
317 | );
318 | }, [editor]);
319 |
320 | return createPortal(
321 | ,
329 | anchorElem
330 | );
331 | }
332 |
333 | export default function FloatingLinkEditorPlugin({
334 | anchorElem = document.body,
335 | isLinkEditMode,
336 | setIsLinkEditMode,
337 | }: {
338 | anchorElem?: HTMLElement;
339 | isLinkEditMode: boolean;
340 | setIsLinkEditMode: Dispatch;
341 | }): JSX.Element | null {
342 | const [editor] = useLexicalComposerContext();
343 | return useFloatingLinkEditorToolbar(
344 | editor,
345 | anchorElem,
346 | isLinkEditMode,
347 | setIsLinkEditMode
348 | );
349 | }
350 |
--------------------------------------------------------------------------------
/src/plugins/ImagesPlugin.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
9 | import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
10 | import {
11 | $createParagraphNode,
12 | $createRangeSelection,
13 | $getSelection,
14 | $insertNodes,
15 | $isNodeSelection,
16 | $isRootOrShadowRoot,
17 | $setSelection,
18 | COMMAND_PRIORITY_EDITOR,
19 | COMMAND_PRIORITY_HIGH,
20 | COMMAND_PRIORITY_LOW,
21 | createCommand,
22 | DRAGOVER_COMMAND,
23 | DRAGSTART_COMMAND,
24 | DROP_COMMAND,
25 | LexicalCommand,
26 | LexicalEditor,
27 | } from "lexical";
28 | import { useEffect, useRef, useState } from "react";
29 | import * as React from "react";
30 |
31 | import landscapeImage from "../../images/landscape.jpg";
32 | import yellowFlowerImage from "../../images/yellow-flower.jpg";
33 | import {
34 | $createImageNode,
35 | $isImageNode,
36 | ImageNode,
37 | ImagePayload,
38 | } from "../nodes/ImageNode";
39 | import Button from "../ui/Button";
40 | import { DialogActions, DialogButtonsList } from "../ui/Dialog";
41 | import FileInput from "../ui/FileInput";
42 | import TextInput from "../ui/TextInput";
43 | import { CAN_USE_DOM } from "../shared/src/canUseDOM";
44 |
45 | export type InsertImagePayload = Readonly;
46 |
47 | const getDOMSelection = (targetWindow: Window | null): Selection | null =>
48 | CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
49 |
50 | export const INSERT_IMAGE_COMMAND: LexicalCommand =
51 | createCommand("INSERT_IMAGE_COMMAND");
52 |
53 | export function InsertImageUriDialogBody({
54 | onClick,
55 | }: {
56 | onClick: (payload: InsertImagePayload) => void;
57 | }) {
58 | const [src, setSrc] = useState("");
59 | const [altText, setAltText] = useState("");
60 |
61 | const isDisabled = src === "";
62 |
63 | return (
64 | <>
65 |
72 |
79 |
80 |
87 |
88 |
89 | );
90 | }
91 |
92 | export function InsertImageUploadedDialogBody({
93 | onClick,
94 | }: {
95 | onClick: (payload: InsertImagePayload) => void;
96 | }) {
97 | const [src, setSrc] = useState("");
98 | const [altText, setAltText] = useState("");
99 |
100 | const isDisabled = src === "";
101 |
102 | const loadImage = (files: FileList | null) => {
103 | const reader = new FileReader();
104 | reader.onload = function () {
105 | if (typeof reader.result === "string") {
106 | setSrc(reader.result);
107 | }
108 | return "";
109 | };
110 | if (files !== null) {
111 | reader.readAsDataURL(files[0]);
112 | }
113 | };
114 |
115 | return (
116 | <>
117 |
123 |
130 |
131 |
138 |
139 |
140 | );
141 | }
142 |
143 | export function InsertImageDialog({
144 | activeEditor,
145 | onClose,
146 | }: {
147 | activeEditor: LexicalEditor;
148 | onClose: () => void;
149 | }): JSX.Element {
150 | const [mode, setMode] = useState(null);
151 | const hasModifier = useRef(false);
152 |
153 | useEffect(() => {
154 | hasModifier.current = false;
155 | const handler = (e: KeyboardEvent) => {
156 | hasModifier.current = e.altKey;
157 | };
158 | document.addEventListener("keydown", handler);
159 | return () => {
160 | document.removeEventListener("keydown", handler);
161 | };
162 | }, [activeEditor]);
163 |
164 | const onClick = (payload: InsertImagePayload) => {
165 | activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
166 | onClose();
167 | };
168 |
169 | return (
170 | <>
171 | {!mode && (
172 |
173 |
192 |
198 |
204 |
205 | )}
206 | {mode === "url" && }
207 | {mode === "file" && }
208 |
209 | );
210 | }
211 |
212 | export default function ImagesPlugin({
213 | captionsEnabled,
214 | }: {
215 | captionsEnabled?: boolean;
216 | }): JSX.Element | null {
217 | const [editor] = useLexicalComposerContext();
218 |
219 | useEffect(() => {
220 | if (!editor.hasNodes([ImageNode])) {
221 | throw new Error("ImagesPlugin: ImageNode not registered on editor");
222 | }
223 |
224 | return mergeRegister(
225 | editor.registerCommand(
226 | INSERT_IMAGE_COMMAND,
227 | (payload) => {
228 | const imageNode = $createImageNode(payload);
229 | $insertNodes([imageNode]);
230 | if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
231 | $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
232 | }
233 |
234 | return true;
235 | },
236 | COMMAND_PRIORITY_EDITOR
237 | ),
238 | editor.registerCommand(
239 | DRAGSTART_COMMAND,
240 | (event) => {
241 | return onDragStart(event);
242 | },
243 | COMMAND_PRIORITY_HIGH
244 | ),
245 | editor.registerCommand(
246 | DRAGOVER_COMMAND,
247 | (event) => {
248 | return onDragover(event);
249 | },
250 | COMMAND_PRIORITY_LOW
251 | ),
252 | editor.registerCommand(
253 | DROP_COMMAND,
254 | (event) => {
255 | return onDrop(event, editor);
256 | },
257 | COMMAND_PRIORITY_HIGH
258 | )
259 | );
260 | }, [captionsEnabled, editor]);
261 |
262 | return null;
263 | }
264 |
265 | const TRANSPARENT_IMAGE =
266 | "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
267 | const img = document.createElement("img");
268 | img.src = TRANSPARENT_IMAGE;
269 |
270 | function onDragStart(event: DragEvent): boolean {
271 | const node = getImageNodeInSelection();
272 | if (!node) {
273 | return false;
274 | }
275 | const dataTransfer = event.dataTransfer;
276 | if (!dataTransfer) {
277 | return false;
278 | }
279 | dataTransfer.setData("text/plain", "_");
280 | dataTransfer.setDragImage(img, 0, 0);
281 | dataTransfer.setData(
282 | "application/x-lexical-drag",
283 | JSON.stringify({
284 | data: {
285 | altText: node.__altText,
286 | caption: node.__caption,
287 | height: node.__height,
288 | key: node.getKey(),
289 | maxWidth: node.__maxWidth,
290 | showCaption: node.__showCaption,
291 | src: node.__src,
292 | width: node.__width,
293 | },
294 | type: "image",
295 | })
296 | );
297 |
298 | return true;
299 | }
300 |
301 | function onDragover(event: DragEvent): boolean {
302 | const node = getImageNodeInSelection();
303 | if (!node) {
304 | return false;
305 | }
306 | if (!canDropImage(event)) {
307 | event.preventDefault();
308 | }
309 | return true;
310 | }
311 |
312 | function onDrop(event: DragEvent, editor: LexicalEditor): boolean {
313 | const node = getImageNodeInSelection();
314 | if (!node) {
315 | return false;
316 | }
317 | const data = getDragImageData(event);
318 | if (!data) {
319 | return false;
320 | }
321 | event.preventDefault();
322 | if (canDropImage(event)) {
323 | const range = getDragSelection(event);
324 | node.remove();
325 | const rangeSelection = $createRangeSelection();
326 | if (range !== null && range !== undefined) {
327 | rangeSelection.applyDOMRange(range);
328 | }
329 | $setSelection(rangeSelection);
330 | editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
331 | }
332 | return true;
333 | }
334 |
335 | function getImageNodeInSelection(): ImageNode | null {
336 | const selection = $getSelection();
337 | if (!$isNodeSelection(selection)) {
338 | return null;
339 | }
340 | const nodes = selection.getNodes();
341 | const node = nodes[0];
342 | return $isImageNode(node) ? node : null;
343 | }
344 |
345 | function getDragImageData(event: DragEvent): null | InsertImagePayload {
346 | const dragData = event.dataTransfer?.getData("application/x-lexical-drag");
347 | if (!dragData) {
348 | return null;
349 | }
350 | const { type, data } = JSON.parse(dragData);
351 | if (type !== "image") {
352 | return null;
353 | }
354 |
355 | return data;
356 | }
357 |
358 | declare global {
359 | interface DragEvent {
360 | rangeOffset?: number;
361 | rangeParent?: Node;
362 | }
363 | }
364 |
365 | function canDropImage(event: DragEvent): boolean {
366 | const target = event.target;
367 | return !!(
368 | target &&
369 | target instanceof HTMLElement &&
370 | !target.closest("code, span.editor-image") &&
371 | target.parentElement &&
372 | target.parentElement.closest("div.ContentEditable__root")
373 | );
374 | }
375 |
376 | function getDragSelection(event: DragEvent): Range | null | undefined {
377 | let range;
378 | const target = event.target as null | Element | Document;
379 | const targetWindow =
380 | target == null
381 | ? null
382 | : target.nodeType === 9
383 | ? (target as Document).defaultView
384 | : (target as Element).ownerDocument.defaultView;
385 | const domSelection = getDOMSelection(targetWindow);
386 | if (document.caretRangeFromPoint) {
387 | range = document.caretRangeFromPoint(event.clientX, event.clientY);
388 | } else if (event.rangeParent && domSelection !== null) {
389 | domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
390 | range = domSelection.getRangeAt(0);
391 | } else {
392 | throw Error(`Cannot get the selection when dragging`);
393 | }
394 |
395 | return range;
396 | }
397 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background: #eee;
4 | font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
5 | sans-serif;
6 | font-weight: 500;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | .other h2 {
12 | font-size: 18px;
13 | color: #444;
14 | margin-bottom: 7px;
15 | }
16 |
17 | .other a {
18 | color: #777;
19 | text-decoration: underline;
20 | font-size: 14px;
21 | }
22 |
23 | .other ul {
24 | padding: 0;
25 | margin: 0;
26 | list-style-type: none;
27 | }
28 |
29 | .App {
30 | font-family: sans-serif;
31 | text-align: center;
32 | }
33 |
34 | h1 {
35 | font-size: 24px;
36 | color: #333;
37 | }
38 |
39 | .ltr {
40 | text-align: left;
41 | }
42 |
43 | .rtl {
44 | text-align: right;
45 | }
46 |
47 | .editor-container {
48 | margin: 20px auto 20px auto;
49 | border-radius: 2px;
50 | max-width: 780px;
51 | color: #000;
52 | position: relative;
53 | line-height: 20px;
54 | font-weight: 400;
55 | text-align: left;
56 | border-top-left-radius: 10px;
57 | border-top-right-radius: 10px;
58 | }
59 |
60 | .editor-inner {
61 | width: 788px;
62 | background: #fff;
63 | position: relative;
64 | }
65 |
66 | .editor-input {
67 | min-height: 150px;
68 | resize: none;
69 | font-size: 15px;
70 | caret-color: rgb(5, 5, 5);
71 | position: relative;
72 | tab-size: 1;
73 | outline: 0;
74 | padding: 15px 10px;
75 | caret-color: #444;
76 | }
77 |
78 | .editor-placeholder {
79 | color: #999;
80 | overflow: hidden;
81 | position: absolute;
82 | text-overflow: ellipsis;
83 | top: 15px;
84 | left: 10px;
85 | font-size: 15px;
86 | user-select: none;
87 | display: inline-block;
88 | pointer-events: none;
89 | }
90 |
91 | .editor-text-bold {
92 | font-weight: bold;
93 | }
94 |
95 | .editor-text-italic {
96 | font-style: italic;
97 | }
98 |
99 | .editor-text-underline {
100 | text-decoration: underline;
101 | }
102 |
103 | .editor-text-strikethrough {
104 | text-decoration: line-through;
105 | }
106 |
107 | .editor-text-underlineStrikethrough {
108 | text-decoration: underline line-through;
109 | }
110 |
111 | .editor-text-code {
112 | background-color: rgb(240, 242, 245);
113 | padding: 1px 0.25rem;
114 | font-family: Menlo, Consolas, Monaco, monospace;
115 | font-size: 94%;
116 | }
117 |
118 | .editor-link {
119 | color: rgb(33, 111, 219);
120 | text-decoration: underline;
121 | cursor: pointer;
122 | }
123 |
124 | .tree-view-output {
125 | display: block;
126 | background: #222;
127 | color: #fff;
128 | padding: 5px;
129 | font-size: 12px;
130 | white-space: pre-wrap;
131 | margin: 1px auto 10px auto;
132 | max-height: 250px;
133 | position: relative;
134 | border-bottom-left-radius: 10px;
135 | border-bottom-right-radius: 10px;
136 | overflow: auto;
137 | line-height: 14px;
138 | }
139 |
140 | .editor-code {
141 | background-color: rgb(240, 242, 245);
142 | font-family: Menlo, Consolas, Monaco, monospace;
143 | display: block;
144 | padding: 8px 8px 8px 52px;
145 | line-height: 1.53;
146 | font-size: 13px;
147 | margin: 0;
148 | margin-top: 8px;
149 | margin-bottom: 8px;
150 | tab-size: 2;
151 | /* white-space: pre; */
152 | overflow-x: auto;
153 | position: relative;
154 | }
155 |
156 | .editor-code:before {
157 | content: attr(data-gutter);
158 | position: absolute;
159 | background-color: #eee;
160 | left: 0;
161 | top: 0;
162 | border-right: 1px solid #ccc;
163 | padding: 8px;
164 | color: #777;
165 | white-space: pre-wrap;
166 | text-align: right;
167 | min-width: 25px;
168 | }
169 | .editor-code:after {
170 | content: attr(data-highlight-language);
171 | top: 0;
172 | right: 3px;
173 | padding: 3px;
174 | font-size: 10px;
175 | text-transform: uppercase;
176 | position: absolute;
177 | color: rgba(0, 0, 0, 0.5);
178 | }
179 |
180 | .editor-tokenComment {
181 | color: slategray;
182 | }
183 |
184 | .editor-tokenPunctuation {
185 | color: #999;
186 | }
187 |
188 | .editor-tokenProperty {
189 | color: #905;
190 | }
191 |
192 | .editor-tokenSelector {
193 | color: #690;
194 | }
195 |
196 | .editor-tokenOperator {
197 | color: #9a6e3a;
198 | }
199 |
200 | .editor-tokenAttr {
201 | color: #07a;
202 | }
203 |
204 | .editor-tokenVariable {
205 | color: #e90;
206 | }
207 |
208 | .editor-tokenFunction {
209 | color: #dd4a68;
210 | }
211 |
212 | .editor-paragraph {
213 | margin: 0;
214 | margin-bottom: 8px;
215 | position: relative;
216 | }
217 |
218 | .editor-paragraph:last-child {
219 | margin-bottom: 0;
220 | }
221 |
222 | .editor-heading-h1 {
223 | font-size: 24px;
224 | color: rgb(5, 5, 5);
225 | font-weight: 400;
226 | margin: 0;
227 | margin-bottom: 12px;
228 | padding: 0;
229 | }
230 |
231 | .editor-heading-h2 {
232 | font-size: 15px;
233 | color: rgb(101, 103, 107);
234 | font-weight: 700;
235 | margin: 0;
236 | margin-top: 10px;
237 | padding: 0;
238 | text-transform: uppercase;
239 | }
240 |
241 | .editor-quote {
242 | margin: 0;
243 | margin-left: 20px;
244 | font-size: 15px;
245 | color: rgb(101, 103, 107);
246 | border-left-color: rgb(206, 208, 212);
247 | border-left-width: 4px;
248 | border-left-style: solid;
249 | padding-left: 16px;
250 | }
251 |
252 | .editor-list-ol {
253 | padding: 0;
254 | margin: 0;
255 | margin-left: 16px;
256 | }
257 |
258 | .editor-list-ul {
259 | padding: 0;
260 | margin: 0;
261 | margin-left: 16px;
262 | }
263 |
264 | .editor-listitem {
265 | margin: 8px 32px 8px 32px;
266 | }
267 |
268 | .editor-nested-listitem {
269 | list-style-type: none;
270 | }
271 |
272 | pre::-webkit-scrollbar {
273 | background: transparent;
274 | width: 10px;
275 | }
276 |
277 | pre::-webkit-scrollbar-thumb {
278 | background: #999;
279 | }
280 |
281 | .debug-timetravel-panel {
282 | overflow: hidden;
283 | padding: 0 0 10px 0;
284 | margin: auto;
285 | display: flex;
286 | }
287 |
288 | .debug-timetravel-panel-slider {
289 | padding: 0;
290 | flex: 8;
291 | }
292 |
293 | .debug-timetravel-panel-button {
294 | padding: 0;
295 | border: 0;
296 | background: none;
297 | flex: 1;
298 | color: #fff;
299 | font-size: 12px;
300 | }
301 |
302 | .debug-timetravel-panel-button:hover {
303 | text-decoration: underline;
304 | }
305 |
306 | .debug-timetravel-button {
307 | border: 0;
308 | padding: 0;
309 | font-size: 12px;
310 | top: 10px;
311 | right: 15px;
312 | position: absolute;
313 | background: none;
314 | color: #fff;
315 | }
316 |
317 | .debug-timetravel-button:hover {
318 | text-decoration: underline;
319 | }
320 |
321 | .emoji {
322 | color: transparent;
323 | background-size: 16px 16px;
324 | background-position: center;
325 | background-repeat: no-repeat;
326 | vertical-align: middle;
327 | margin: 0 -1px;
328 | }
329 |
330 | .emoji-inner {
331 | padding: 0 0.15em;
332 | }
333 |
334 | .emoji-inner::selection {
335 | color: transparent;
336 | background-color: rgba(150, 150, 150, 0.4);
337 | }
338 |
339 | .emoji-inner::moz-selection {
340 | color: transparent;
341 | background-color: rgba(150, 150, 150, 0.4);
342 | }
343 |
344 | .emoji.happysmile {
345 | background-image: url(././images/emoji/1F642.png);
346 | }
347 |
348 | .toolbar {
349 | display: flex;
350 | margin-bottom: 1px;
351 | background: hsl(0, 0%, 100%);
352 | padding: 4px;
353 | width: 780px;
354 | border-top-left-radius: 10px;
355 | border-top-right-radius: 10px;
356 | vertical-align: middle;
357 | }
358 |
359 | .toolbar button.toolbar-item {
360 | border: 0;
361 | display: flex;
362 | background: none;
363 | border-radius: 10px;
364 | padding: 8px;
365 | cursor: pointer;
366 | vertical-align: middle;
367 | }
368 |
369 | .toolbar button.toolbar-item:disabled {
370 | cursor: not-allowed;
371 | }
372 |
373 | .toolbar button.toolbar-item.spaced {
374 | margin-right: 2px;
375 | }
376 |
377 | .toolbar button.toolbar-item i.format {
378 | background-size: contain;
379 | display: inline-block;
380 | height: 18px;
381 | width: 18px;
382 | margin-top: 2px;
383 | vertical-align: -0.25em;
384 | display: flex;
385 | opacity: 0.6;
386 | }
387 |
388 | .toolbar button.toolbar-item:disabled i.format {
389 | opacity: 0.2;
390 | }
391 |
392 | .toolbar button.toolbar-item.active {
393 | background-color: rgba(223, 232, 250, 0.3);
394 | }
395 |
396 | .toolbar button.toolbar-item.active i {
397 | opacity: 1;
398 | }
399 |
400 | .toolbar .toolbar-item:hover:not([disabled]) {
401 | background-color: #eee;
402 | }
403 |
404 | .toolbar .divider {
405 | width: 1px;
406 | background-color: #eee;
407 | margin: 0 4px;
408 | }
409 |
410 | .toolbar select.toolbar-item {
411 | border: 0;
412 | display: flex;
413 | background: none;
414 | border-radius: 10px;
415 | padding: 8px;
416 | vertical-align: middle;
417 | -webkit-appearance: none;
418 | -moz-appearance: none;
419 | width: 70px;
420 | font-size: 14px;
421 | color: #777;
422 | text-overflow: ellipsis;
423 | }
424 |
425 | .toolbar select.code-language {
426 | text-transform: capitalize;
427 | width: 130px;
428 | }
429 |
430 | .toolbar .toolbar-item .text {
431 | display: flex;
432 | line-height: 20px;
433 | width: 200px;
434 | vertical-align: middle;
435 | font-size: 14px;
436 | color: #777;
437 | text-overflow: ellipsis;
438 | width: 70px;
439 | overflow: hidden;
440 | height: 20px;
441 | text-align: left;
442 | }
443 |
444 | .toolbar .toolbar-item .icon {
445 | display: flex;
446 | width: 20px;
447 | height: 20px;
448 | user-select: none;
449 | margin-right: 8px;
450 | line-height: 16px;
451 | background-size: contain;
452 | }
453 |
454 | .toolbar i.chevron-down {
455 | margin-top: 3px;
456 | width: 16px;
457 | height: 16px;
458 | display: flex;
459 | user-select: none;
460 | }
461 |
462 | .toolbar i.chevron-down.inside {
463 | width: 16px;
464 | height: 16px;
465 | display: flex;
466 | margin-left: -25px;
467 | margin-top: 11px;
468 | margin-right: 10px;
469 | pointer-events: none;
470 | }
471 |
472 | i.chevron-down {
473 | background-color: transparent;
474 | background-size: contain;
475 | display: inline-block;
476 | height: 8px;
477 | width: 8px;
478 | background-image: url(./images/icons/chevron-down.svg);
479 | }
480 |
481 | #block-controls button:hover {
482 | background-color: #efefef;
483 | }
484 |
485 | #block-controls button:focus-visible {
486 | border-color: blue;
487 | }
488 |
489 | #block-controls span.block-type {
490 | background-size: contain;
491 | display: block;
492 | width: 18px;
493 | height: 18px;
494 | margin: 2px;
495 | }
496 |
497 | #block-controls span.block-type.paragraph {
498 | background-image: url(./images/icons/text-paragraph.svg);
499 | }
500 |
501 | #block-controls span.block-type.h1 {
502 | background-image: url(./images/icons/type-h1.svg);
503 | }
504 |
505 | #block-controls span.block-type.h2 {
506 | background-image: url(./images/icons/type-h2.svg);
507 | }
508 |
509 | #block-controls span.block-type.quote {
510 | background-image: url(./images/icons/chat-square-quote.svg);
511 | }
512 |
513 | #block-controls span.block-type.ul {
514 | background-image: url(./images/icons/list-ul.svg);
515 | }
516 |
517 | #block-controls span.block-type.ol {
518 | background-image: url(./images/icons/list-ol.svg);
519 | }
520 |
521 | #block-controls span.block-type.code {
522 | background-image: url(./images/icons/code.svg);
523 | }
524 |
525 | .dropdown {
526 | z-index: 5;
527 | display: block;
528 | position: absolute;
529 | box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
530 | inset 0 0 0 1px rgba(255, 255, 255, 0.5);
531 | border-radius: 8px;
532 | min-width: 100px;
533 | min-height: 40px;
534 | background-color: #fff;
535 | }
536 |
537 | .dropdown .item {
538 | margin: 0 8px 0 8px;
539 | padding: 8px;
540 | color: #050505;
541 | cursor: pointer;
542 | line-height: 16px;
543 | font-size: 15px;
544 | display: flex;
545 | align-content: center;
546 | flex-direction: row;
547 | flex-shrink: 0;
548 | justify-content: space-between;
549 | background-color: #fff;
550 | border-radius: 8px;
551 | border: 0;
552 | min-width: 268px;
553 | }
554 |
555 | .dropdown .item .active {
556 | display: flex;
557 | width: 20px;
558 | height: 20px;
559 | background-size: contain;
560 | }
561 |
562 | .dropdown .item:first-child {
563 | margin-top: 8px;
564 | }
565 |
566 | .dropdown .item:last-child {
567 | margin-bottom: 8px;
568 | }
569 |
570 | .dropdown .item:hover {
571 | background-color: #eee;
572 | }
573 |
574 | .dropdown .item .text {
575 | display: flex;
576 | line-height: 20px;
577 | flex-grow: 1;
578 | width: 200px;
579 | }
580 |
581 | .dropdown .item .icon {
582 | display: flex;
583 | width: 20px;
584 | height: 20px;
585 | user-select: none;
586 | margin-right: 12px;
587 | line-height: 16px;
588 | background-size: contain;
589 | }
590 |
591 | i.undo {
592 | background-image: url(./images/icons/arrow-counterclockwise.svg);
593 | }
594 |
595 | i.redo {
596 | background-image: url(./images/icons/arrow-clockwise.svg);
597 | }
598 |
599 | .icon.paragraph {
600 | background-image: url(./images/icons/text-paragraph.svg);
601 | }
602 |
603 | .icon.large-heading,
604 | .icon.h1 {
605 | background-image: url(./images/icons/type-h1.svg);
606 | }
607 |
608 | .icon.small-heading,
609 | .icon.h2 {
610 | background-image: url(./images/icons/type-h2.svg);
611 | }
612 |
613 | .icon.bullet-list,
614 | .icon.ul {
615 | background-image: url(./images/icons/list-ul.svg);
616 | }
617 |
618 | .icon.numbered-list,
619 | .icon.ol {
620 | background-image: url(./images/icons/list-ol.svg);
621 | }
622 |
623 | .icon.quote {
624 | background-image: url(./images/icons/chat-square-quote.svg);
625 | }
626 |
627 | .icon.code {
628 | background-image: url(./images/icons/code.svg);
629 | }
630 |
631 | i.bold {
632 | background-image: url(./images/icons/type-bold.svg);
633 | }
634 |
635 | i.italic {
636 | background-image: url(./images/icons/type-italic.svg);
637 | }
638 |
639 | i.underline {
640 | background-image: url(./images/icons/type-underline.svg);
641 | }
642 |
643 | i.strikethrough {
644 | background-image: url(./images/icons/type-strikethrough.svg);
645 | }
646 |
647 | i.code {
648 | background-image: url(./images/icons/code.svg);
649 | }
650 |
651 | i.link {
652 | background-image: url(./images/icons/link.svg);
653 | }
654 |
655 | i.left-align {
656 | background-image: url(./images/icons/text-left.svg);
657 | }
658 |
659 | i.center-align {
660 | background-image: url(./images/icons/text-center.svg);
661 | }
662 |
663 | i.right-align {
664 | background-image: url(./images/icons/text-right.svg);
665 | }
666 |
667 | i.justify-align {
668 | background-image: url(./images/icons/justify.svg);
669 | }
670 |
671 | .link-editor .button.active,
672 | .toolbar .button.active {
673 | background-color: rgb(223, 232, 250);
674 | }
675 |
676 | .link-editor .link-input {
677 | display: block;
678 | width: calc(100% - 75px);
679 | box-sizing: border-box;
680 | margin: 12px 12px;
681 | padding: 8px 12px;
682 | border-radius: 15px;
683 | background-color: #eee;
684 | font-size: 15px;
685 | color: rgb(5, 5, 5);
686 | border: 0;
687 | outline: 0;
688 | position: relative;
689 | font-family: inherit;
690 | }
691 |
692 | .link-editor .link-view {
693 | display: block;
694 | width: calc(100% - 24px);
695 | margin: 8px 12px;
696 | padding: 8px 12px;
697 | border-radius: 15px;
698 | font-size: 15px;
699 | color: rgb(5, 5, 5);
700 | border: 0;
701 | outline: 0;
702 | position: relative;
703 | font-family: inherit;
704 | }
705 |
706 | .link-editor .link-view a {
707 | display: block;
708 | word-break: break-word;
709 | width: calc(100% - 33px);
710 | }
711 |
712 | .link-editor div.link-edit {
713 | background-image: url(images/icons/pencil-fill.svg);
714 | background-size: 16px;
715 | background-position: center;
716 | background-repeat: no-repeat;
717 | width: 35px;
718 | vertical-align: -0.25em;
719 | position: absolute;
720 | right: 30px;
721 | top: 0;
722 | bottom: 0;
723 | cursor: pointer;
724 | }
725 |
726 | .link-editor div.link-trash {
727 | background-image: url(images/icons/trash.svg);
728 | background-size: 16px;
729 | background-position: center;
730 | background-repeat: no-repeat;
731 | width: 35px;
732 | vertical-align: -0.25em;
733 | position: absolute;
734 | right: 0;
735 | top: 0;
736 | bottom: 0;
737 | cursor: pointer;
738 | }
739 |
740 | .link-editor div.link-cancel {
741 | background-image: url(images/icons/close.svg);
742 | background-size: 16px;
743 | background-position: center;
744 | background-repeat: no-repeat;
745 | width: 35px;
746 | vertical-align: -0.25em;
747 | margin-right: 28px;
748 | position: absolute;
749 | right: 0;
750 | top: 0;
751 | bottom: 0;
752 | cursor: pointer;
753 | }
754 |
755 | .link-editor div.link-confirm {
756 | background-image: url(images/icons/success-alt.svg);
757 | background-size: 16px;
758 | background-position: center;
759 | background-repeat: no-repeat;
760 | width: 35px;
761 | vertical-align: -0.25em;
762 | margin-right: 2px;
763 | position: absolute;
764 | right: 0;
765 | top: 0;
766 | bottom: 0;
767 | cursor: pointer;
768 | }
769 |
770 | .link-editor .link-input a {
771 | color: rgb(33, 111, 219);
772 | text-decoration: underline;
773 | white-space: nowrap;
774 | overflow: hidden;
775 | margin-right: 30px;
776 | text-overflow: ellipsis;
777 | }
778 |
779 | .link-editor .link-input a:hover {
780 | text-decoration: underline;
781 | }
782 |
783 | .link-editor .font-size-wrapper,
784 | .link-editor .font-family-wrapper {
785 | display: flex;
786 | margin: 0 4px;
787 | }
788 |
789 | .link-editor select {
790 | padding: 6px;
791 | border: none;
792 | background-color: rgba(0, 0, 0, 0.075);
793 | border-radius: 4px;
794 | }
795 |
--------------------------------------------------------------------------------
/src/plugins/ToolbarPlugin.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from "react";
2 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
3 | import {
4 | $createParagraphNode,
5 | $getNodeByKey,
6 | $getRoot,
7 | $getSelection,
8 | $isRangeSelection,
9 | $isRootOrShadowRoot,
10 | $isTextNode,
11 | CAN_REDO_COMMAND,
12 | CAN_UNDO_COMMAND,
13 | COMMAND_PRIORITY_CRITICAL,
14 | DEPRECATED_$isGridSelection,
15 | FORMAT_ELEMENT_COMMAND,
16 | FORMAT_TEXT_COMMAND,
17 | INDENT_CONTENT_COMMAND,
18 | LexicalEditor,
19 | NodeKey,
20 | OUTDENT_CONTENT_COMMAND,
21 | REDO_COMMAND,
22 | SELECTION_CHANGE_COMMAND,
23 | UNDO_COMMAND,
24 | } from "lexical";
25 | import {
26 | $createHeadingNode,
27 | $createQuoteNode,
28 | $isHeadingNode,
29 | HeadingTagType,
30 | } from "@lexical/rich-text";
31 | import {
32 | $getSelectionStyleValueForProperty,
33 | $isParentElementRTL,
34 | $patchStyleText,
35 | $selectAll,
36 | $setBlocksType,
37 | } from "@lexical/selection";
38 | import {
39 | $isListNode,
40 | INSERT_CHECK_LIST_COMMAND,
41 | INSERT_ORDERED_LIST_COMMAND,
42 | INSERT_UNORDERED_LIST_COMMAND,
43 | ListNode,
44 | REMOVE_LIST_COMMAND,
45 | } from "@lexical/list";
46 | import {
47 | $createCodeNode,
48 | $isCodeNode,
49 | CODE_LANGUAGE_FRIENDLY_NAME_MAP,
50 | CODE_LANGUAGE_MAP,
51 | getLanguageFriendlyName,
52 | } from "@lexical/code";
53 | import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
54 | import {
55 | $findMatchingParent,
56 | $getNearestBlockElementAncestorOrThrow,
57 | $getNearestNodeOfType,
58 | mergeRegister,
59 | } from "@lexical/utils";
60 | import DropDown, { DropDownItem } from "../ui/DropDown";
61 | import { getSelectedNode } from "../utils/getSelectedNode";
62 | import { sanitizeUrl } from "../utils/url";
63 |
64 | const blockTypeToBlockName = {
65 | bullet: "Bulleted List",
66 | check: "Check List",
67 | code: "Code Block",
68 | h1: "Heading 1",
69 | h2: "Heading 2",
70 | h3: "Heading 3",
71 | h4: "Heading 4",
72 | h5: "Heading 5",
73 | h6: "Heading 6",
74 | number: "Numbered List",
75 | paragraph: "Normal",
76 | quote: "Quote",
77 | };
78 |
79 | function getCodeLanguageOptions(): [string, string][] {
80 | const options: [string, string][] = [];
81 |
82 | for (const [lang, friendlyName] of Object.entries(
83 | CODE_LANGUAGE_FRIENDLY_NAME_MAP
84 | )) {
85 | options.push([lang, friendlyName]);
86 | }
87 |
88 | return options;
89 | }
90 |
91 | const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions();
92 |
93 | const FONT_FAMILY_OPTIONS: [string, string][] = [
94 | ["Arial", "Arial"],
95 | ["Courier New", "Courier New"],
96 | ["Georgia", "Georgia"],
97 | ["Times New Roman", "Times New Roman"],
98 | ["Trebuchet MS", "Trebuchet MS"],
99 | ["Verdana", "Verdana"],
100 | ];
101 |
102 | const FONT_SIZE_OPTIONS: [string, string][] = [
103 | ["10px", "10px"],
104 | ["11px", "11px"],
105 | ["12px", "12px"],
106 | ["13px", "13px"],
107 | ["14px", "14px"],
108 | ["15px", "15px"],
109 | ["16px", "16px"],
110 | ["17px", "17px"],
111 | ["18px", "18px"],
112 | ["19px", "19px"],
113 | ["20px", "20px"],
114 | ];
115 |
116 | function dropDownActiveClass(active: boolean) {
117 | if (active) return "active dropdown-item-active";
118 | else return "";
119 | }
120 |
121 | function BlockFormatDropDown({
122 | editor,
123 | blockType,
124 | disabled = false,
125 | }: {
126 | blockType: keyof typeof blockTypeToBlockName;
127 | editor: LexicalEditor;
128 | disabled?: boolean;
129 | }): JSX.Element {
130 | const formatParagraph = () => {
131 | editor.update(() => {
132 | const selection = $getSelection();
133 | if (
134 | $isRangeSelection(selection) ||
135 | DEPRECATED_$isGridSelection(selection)
136 | ) {
137 | $setBlocksType(selection, () => $createParagraphNode());
138 | }
139 | });
140 | };
141 |
142 | const formatHeading = (headingSize: HeadingTagType) => {
143 | if (blockType !== headingSize) {
144 | editor.update(() => {
145 | const selection = $getSelection();
146 | if (
147 | $isRangeSelection(selection) ||
148 | DEPRECATED_$isGridSelection(selection)
149 | ) {
150 | $setBlocksType(selection, () => $createHeadingNode(headingSize));
151 | }
152 | });
153 | }
154 | };
155 |
156 | const formatBulletList = () => {
157 | if (blockType !== "bullet") {
158 | editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
159 | } else {
160 | editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
161 | }
162 | };
163 |
164 | const formatCheckList = () => {
165 | if (blockType !== "check") {
166 | editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
167 | } else {
168 | editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
169 | }
170 | };
171 |
172 | const formatNumberedList = () => {
173 | if (blockType !== "number") {
174 | editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
175 | } else {
176 | editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
177 | }
178 | };
179 |
180 | const formatQuote = () => {
181 | if (blockType !== "quote") {
182 | editor.update(() => {
183 | const selection = $getSelection();
184 | if (
185 | $isRangeSelection(selection) ||
186 | DEPRECATED_$isGridSelection(selection)
187 | ) {
188 | $setBlocksType(selection, () => $createQuoteNode());
189 | }
190 | });
191 | }
192 | };
193 |
194 | const formatCode = () => {
195 | if (blockType !== "code") {
196 | editor.update(() => {
197 | let selection = $getSelection();
198 |
199 | if (
200 | $isRangeSelection(selection) ||
201 | DEPRECATED_$isGridSelection(selection)
202 | ) {
203 | if (selection.isCollapsed()) {
204 | $setBlocksType(selection, () => $createCodeNode());
205 | } else {
206 | const textContent = selection.getTextContent();
207 | const codeNode = $createCodeNode();
208 | selection.insertNodes([codeNode]);
209 | selection = $getSelection();
210 | if ($isRangeSelection(selection))
211 | selection.insertRawText(textContent);
212 | }
213 | }
214 | });
215 | }
216 | };
217 |
218 | return (
219 |
226 |
230 |
231 | Normal
232 |
233 | formatHeading("h1")}
236 | >
237 |
238 | Heading 1
239 |
240 | formatHeading("h2")}
243 | >
244 |
245 | Heading 2
246 |
247 | formatHeading("h3")}
250 | >
251 |
252 | Heading 3
253 |
254 |
258 |
259 | Bullet List
260 |
261 |
265 |
266 | Numbered List
267 |
268 |
272 |
273 | Check List
274 |
275 |
279 |
280 | Quote
281 |
282 |
286 |
287 | Code Block
288 |
289 |
290 | );
291 | }
292 |
293 | function Divider(): JSX.Element {
294 | return ;
295 | }
296 |
297 | function FontDropDown({
298 | editor,
299 | value,
300 | style,
301 | disabled = false,
302 | }: {
303 | editor: LexicalEditor;
304 | value: string;
305 | style: string;
306 | disabled?: boolean;
307 | }): JSX.Element {
308 | const handleClick = useCallback(
309 | (option: string) => {
310 | editor.update(() => {
311 | const selection = $getSelection();
312 | if ($isRangeSelection(selection)) {
313 | $patchStyleText(selection, {
314 | [style]: option,
315 | });
316 | }
317 | });
318 | },
319 | [editor, style]
320 | );
321 |
322 | const buttonAriaLabel =
323 | style === "font-family"
324 | ? "Formatting options for font family"
325 | : "Formatting options for font size";
326 |
327 | return (
328 |
337 | {(style === "font-family" ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(
338 | ([option, text]) => (
339 | handleClick(option)}
344 | key={option}
345 | >
346 | {text}
347 |
348 | )
349 | )}
350 |
351 | );
352 | }
353 |
354 | export default function ToolbarPlugin(): JSX.Element {
355 | const [editor] = useLexicalComposerContext();
356 | const [activeEditor, setActiveEditor] = useState(editor);
357 | const [blockType, setBlockType] =
358 | useState("paragraph");
359 | const [selectedElementKey, setSelectedElementKey] = useState(
360 | null
361 | );
362 | const [fontSize, setFontSize] = useState("15px");
363 | const [fontColor, setFontColor] = useState("#000");
364 | const [bgColor, setBgColor] = useState("#fff");
365 | const [fontFamily, setFontFamily] = useState("Arial");
366 | const [isLink, setIsLink] = useState(false);
367 | const [isBold, setIsBold] = useState(false);
368 | const [isItalic, setIsItalic] = useState(false);
369 | const [isUnderline, setIsUnderline] = useState(false);
370 | const [isStrikethrough, setIsStrikethrough] = useState(false);
371 | const [isSubscript, setIsSubscript] = useState(false);
372 | const [isSuperscript, setIsSuperscript] = useState(false);
373 | const [isCode, setIsCode] = useState(false);
374 | const [canUndo, setCanUndo] = useState(false);
375 | const [canRedo, setCanRedo] = useState(false);
376 | // const [modal, showModal] = useModal();
377 | const [isRTL, setIsRTL] = useState(false);
378 | const [codeLanguage, setCodeLanguage] = useState("");
379 | const [isEditable, setIsEditable] = useState(() => editor.isEditable());
380 | const IS_APPLE = false;
381 |
382 | const updateToolbar = useCallback(() => {
383 | const selection = $getSelection();
384 | if ($isRangeSelection(selection)) {
385 | const anchorNode = selection.anchor.getNode();
386 | let element =
387 | anchorNode.getKey() === "root"
388 | ? anchorNode
389 | : $findMatchingParent(anchorNode, (e) => {
390 | const parent = e.getParent();
391 | return parent !== null && $isRootOrShadowRoot(parent);
392 | });
393 |
394 | if (element === null) {
395 | element = anchorNode.getTopLevelElementOrThrow();
396 | }
397 |
398 | const elementKey = element.getKey();
399 | const elementDOM = activeEditor.getElementByKey(elementKey);
400 |
401 | // Update text format
402 | setIsBold(selection.hasFormat("bold"));
403 | setIsItalic(selection.hasFormat("italic"));
404 | setIsUnderline(selection.hasFormat("underline"));
405 | setIsStrikethrough(selection.hasFormat("strikethrough"));
406 | setIsSubscript(selection.hasFormat("subscript"));
407 | setIsSuperscript(selection.hasFormat("superscript"));
408 | setIsCode(selection.hasFormat("code"));
409 | setIsRTL($isParentElementRTL(selection));
410 |
411 | // Update links
412 | const node = getSelectedNode(selection);
413 | const parent = node.getParent();
414 | if ($isLinkNode(parent) || $isLinkNode(node)) {
415 | setIsLink(true);
416 | } else {
417 | setIsLink(false);
418 | }
419 |
420 | if (elementDOM !== null) {
421 | setSelectedElementKey(elementKey);
422 | if ($isListNode(element)) {
423 | const parentList = $getNearestNodeOfType(
424 | anchorNode,
425 | ListNode
426 | );
427 | const type = parentList
428 | ? parentList.getListType()
429 | : element.getListType();
430 | setBlockType(type);
431 | } else {
432 | const type = $isHeadingNode(element)
433 | ? element.getTag()
434 | : element.getType();
435 | if (type in blockTypeToBlockName) {
436 | setBlockType(type as keyof typeof blockTypeToBlockName);
437 | }
438 | if ($isCodeNode(element)) {
439 | const language =
440 | element.getLanguage() as keyof typeof CODE_LANGUAGE_MAP;
441 | setCodeLanguage(
442 | language ? CODE_LANGUAGE_MAP[language] || language : ""
443 | );
444 | return;
445 | }
446 | }
447 | }
448 | // Handle buttons
449 | setFontSize(
450 | $getSelectionStyleValueForProperty(selection, "font-size", "15px")
451 | );
452 | setFontColor(
453 | $getSelectionStyleValueForProperty(selection, "color", "#000")
454 | );
455 | setBgColor(
456 | $getSelectionStyleValueForProperty(
457 | selection,
458 | "background-color",
459 | "#fff"
460 | )
461 | );
462 | setFontFamily(
463 | $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
464 | );
465 | }
466 | }, [activeEditor]);
467 |
468 | useEffect(() => {
469 | return editor.registerCommand(
470 | SELECTION_CHANGE_COMMAND,
471 | (_payload, newEditor) => {
472 | updateToolbar();
473 | setActiveEditor(newEditor);
474 | return false;
475 | },
476 | COMMAND_PRIORITY_CRITICAL
477 | );
478 | }, [editor, updateToolbar]);
479 |
480 | useEffect(() => {
481 | return mergeRegister(
482 | editor.registerEditableListener((editable) => {
483 | setIsEditable(editable);
484 | }),
485 | activeEditor.registerUpdateListener(({ editorState }) => {
486 | editorState.read(() => {
487 | updateToolbar();
488 | });
489 | }),
490 | activeEditor.registerCommand(
491 | CAN_UNDO_COMMAND,
492 | (payload) => {
493 | setCanUndo(payload);
494 | return false;
495 | },
496 | COMMAND_PRIORITY_CRITICAL
497 | ),
498 | activeEditor.registerCommand(
499 | CAN_REDO_COMMAND,
500 | (payload) => {
501 | setCanRedo(payload);
502 | return false;
503 | },
504 | COMMAND_PRIORITY_CRITICAL
505 | )
506 | );
507 | }, [activeEditor, editor, updateToolbar]);
508 |
509 | const onCodeLanguageSelect = useCallback(
510 | (value: string) => {
511 | activeEditor.update(() => {
512 | if (selectedElementKey !== null) {
513 | const node = $getNodeByKey(selectedElementKey);
514 | if ($isCodeNode(node)) {
515 | node.setLanguage(value);
516 | }
517 | }
518 | });
519 | },
520 | [activeEditor, selectedElementKey]
521 | );
522 |
523 | const insertLink = useCallback(() => {
524 | if (!isLink) {
525 | editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
526 | } else {
527 | editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
528 | }
529 | }, [editor, isLink]);
530 |
531 | return (
532 |
533 |
545 |
557 |
558 | {blockType in blockTypeToBlockName && activeEditor === editor && (
559 | <>
560 |
565 |
566 |
567 | )}
568 | {blockType === "code" ? (
569 | <>
570 |
576 | {CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
577 | return (
578 | onCodeLanguageSelect(value)}
583 | key={value}
584 | >
585 | {name}
586 |
587 | );
588 | })}
589 |
590 |
591 | ) : (
592 | <>
593 |
599 |
605 |
619 |
633 |
647 |
659 |
669 |
670 |
677 | {
679 | activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
680 | }}
681 | className="item"
682 | >
683 |
684 | Left Align
685 |
686 | {
688 | activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
689 | }}
690 | className="item"
691 | >
692 |
693 | Center Align
694 |
695 | {
697 | activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
698 | }}
699 | className="item"
700 | >
701 |
702 | Right Align
703 |
704 | {
706 | activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
707 | }}
708 | className="item"
709 | >
710 |
711 | Justify Align
712 |
713 |
714 |
715 |
716 | )}
717 |