[lexical-playground] 3 Bug Fixes, 1 UX Improvement: All Regarding Excalidraw Node

packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import type {ExcalidrawInitialElements} from './ExcalidrawModal';
+import type {ExcalidrawInitialElements} from '../../ui/ExcalidrawModal';
 import type {NodeKey} from 'lexical';
 
 import {AppState, BinaryFiles} from '@excalidraw/excalidraw/types/types';
@@ -23,10 +23,10 @@ import {
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import * as React from 'react';
 
+import ExcalidrawModal from '../../ui/ExcalidrawModal';
 import ImageResizer from '../../ui/ImageResizer';
 import {$isExcalidrawNode} from '.';
 import ExcalidrawImage from './ExcalidrawImage';
-import ExcalidrawModal from './ExcalidrawModal';
 
 export default function ExcalidrawComponent({
   nodeKey,
@@ -195,6 +195,18 @@ export default function ExcalidrawComponent({
     return [nodeWidth, nodeHeight];
   }, [editor, nodeKey]);
 
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+    if (elements.length === 0) {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (node) {
+          node.remove();
+        }
+      });
+    }
+  }, [editor, nodeKey, elements.length]);
+
   return (
     <>
       <ExcalidrawModal
@@ -203,7 +215,7 @@ export default function ExcalidrawComponent({
         initialAppState={appState}
         isShown={isModalOpen}
         onDelete={deleteNode}
-        onClose={() => setModalOpen(false)}
+        onClose={closeModal}
         onSave={(els, aps, fls) => {
           editor.setEditable(true);
           setData(els, aps, fls);

packages/lexical-playground/src/nodes/ExcalidrawNode/index.tsx

@@ -84,7 +84,6 @@ export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
 
   exportJSON(): SerializedExcalidrawNode {
     return {
-      ...super.exportJSON(),
       data: this.__data,
       height: this.__height === 'inherit' ? undefined : this.__height,
       type: 'excalidraw',

packages/lexical-playground/src/plugins/ExcalidrawPlugin/index.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type {ExcalidrawInitialElements} from '../../ui/ExcalidrawModal';
+import type {AppState, BinaryFiles} from '@excalidraw/excalidraw/types/types';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$wrapNodeInElement} from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $insertNodes,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  LexicalCommand,
+} from 'lexical';
+import {useEffect, useState} from 'react';
+
+import {
+  $createExcalidrawNode,
+  ExcalidrawNode,
+} from '../../nodes/ExcalidrawNode';
+import ExcalidrawModal from '../../ui/ExcalidrawModal';
+
+export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void> = createCommand(
+  'INSERT_EXCALIDRAW_COMMAND',
+);
+
+export default function ExcalidrawPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  const [isModalOpen, setModalOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!editor.hasNodes([ExcalidrawNode])) {
+      throw new Error(
+        'ExcalidrawPlugin: ExcalidrawNode not registered on editor',
+      );
+    }
+
+    return editor.registerCommand(
+      INSERT_EXCALIDRAW_COMMAND,
+      () => {
+        setModalOpen(true);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+
+  const onClose = () => {
+    setModalOpen(false);
+  };
+
+  const onDelete = () => {
+    setModalOpen(false);
+  };
+
+  const onSave = (
+    elements: ExcalidrawInitialElements,
+    appState: Partial<AppState>,
+    files: BinaryFiles,
+  ) => {
+    editor.update(() => {
+      const excalidrawNode = $createExcalidrawNode();
+      excalidrawNode.setData(
+        JSON.stringify({
+          appState,
+          elements,
+          files,
+        }),
+      );
+      $insertNodes([excalidrawNode]);
+      if ($isRootOrShadowRoot(excalidrawNode.getParentOrThrow())) {
+        $wrapNodeInElement(excalidrawNode, $createParagraphNode).selectEnd();
+      }
+    });
+    setModalOpen(false);
+  };
+
+  return isModalOpen ? (
+    <ExcalidrawModal
+      initialElements={[]}
+      initialAppState={{} as AppState}
+      initialFiles={{}}
+      isShown={isModalOpen}
+      onDelete={onDelete}
+      onClose={onClose}
+      onSave={onSave}
+      closeOnClickOutside={false}
+    />
+  ) : null;
+}

packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx → packages/lexical-playground/src/ui/ExcalidrawModal.tsx

@@ -19,8 +19,8 @@ import * as React from 'react';
 import {ReactPortal, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 
-import Button from '../../ui/Button';
-import Modal from '../../ui/Modal';
+import Button from './Button';
+import Modal from './Modal';
 
 export type ExcalidrawInitialElements = ExcalidrawInitialDataState['elements'];
 
@@ -171,13 +171,7 @@ export default function ExcalidrawModal({
   };
 
   const discard = () => {
-    if (elements && elements.filter((el) => !el.isDeleted).length === 0) {
-      // delete node if the scene is clear
-      onDelete();
-    } else {
-      //Otherwise, show confirmation dialog before closing
-      setDiscardModalOpen(true);
-    }
+    setDiscardModalOpen(true);
   };
 
   function ShowDiscardDialog(): JSX.Element {