[lexical-playground][ExcalidrawNode] Bug Fix: Preserve Excalidraw image dimensions after resizing

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

@@ -15,8 +15,6 @@ import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
 import {mergeRegister} from '@lexical/utils';
 import {
   $getNodeByKey,
-  $getSelection,
-  $isNodeSelection,
   CLICK_COMMAND,
   COMMAND_PRIORITY_LOW,
   KEY_BACKSPACE_COMMAND,
@@ -41,7 +39,7 @@ export default function ExcalidrawComponent({
   const [isModalOpen, setModalOpen] = useState<boolean>(
     data === '[]' && editor.isEditable(),
   );
-  const imageContainerRef = useRef<HTMLImageElement | null>(null);
+  const imageContainerRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const captionButtonRef = useRef<HTMLButtonElement | null>(null);
   const [isSelected, setSelected, clearSelection] =
@@ -50,23 +48,21 @@ export default function ExcalidrawComponent({
 
   const $onDelete = useCallback(
     (event: KeyboardEvent) => {
-      const deleteSelection = $getSelection();
-      if (isSelected && $isNodeSelection(deleteSelection)) {
+      if (isSelected) {
         event.preventDefault();
         editor.update(() => {
-          deleteSelection.getNodes().forEach((node) => {
-            if ($isExcalidrawNode(node)) {
-              node.remove();
-            }
-          });
+          const node = $getNodeByKey(nodeKey);
+          if (node) {
+            node.remove();
+          }
         });
       }
       return false;
     },
-    [editor, isSelected],
+    [editor, isSelected, nodeKey],
   );
 
-  // Set editor to readOnly if excalidraw is open to prevent unwanted changes
+  // Set editor to readOnly if Excalidraw is open to prevent unwanted changes
   useEffect(() => {
     if (isModalOpen) {
       editor.setEditable(false);
@@ -119,7 +115,7 @@ export default function ExcalidrawComponent({
     setModalOpen(false);
     return editor.update(() => {
       const node = $getNodeByKey(nodeKey);
-      if ($isExcalidrawNode(node)) {
+      if (node) {
         node.remove();
       }
     });
@@ -184,6 +180,21 @@ export default function ExcalidrawComponent({
     appState = {},
   } = useMemo(() => JSON.parse(data), [data]);
 
+  const [initialWidth, initialHeight] = useMemo(() => {
+    let nodeWidth: 'inherit' | number = 'inherit';
+    let nodeHeight: 'inherit' | number = 'inherit';
+
+    editor.getEditorState().read(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isExcalidrawNode(node)) {
+        nodeWidth = node.getWidth();
+        nodeHeight = node.getHeight();
+      }
+    });
+
+    return [nodeWidth, nodeHeight];
+  }, [editor, nodeKey]);
+
   return (
     <>
       <ExcalidrawModal
@@ -210,6 +221,8 @@ export default function ExcalidrawComponent({
             elements={elements}
             files={files}
             appState={appState}
+            width={initialWidth}
+            height={initialHeight}
           />
           {isSelected && (
             <div

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

@@ -17,6 +17,8 @@ import {useEffect, useState} from 'react';
 
 type ImageType = 'svg' | 'canvas';
 
+type Dimension = 'inherit' | number;
+
 type Props = {
   /**
    * Configures the export setting for SVG/Canvas
@@ -31,17 +33,17 @@ type Props = {
    */
   elements: NonDeleted<ExcalidrawElement>[];
   /**
-   * The Excalidraw elements to be rendered as an image
+   * The Excalidraw files associated with the elements
    */
   files: BinaryFiles;
   /**
    * The height of the image to be rendered
    */
-  height?: number | null;
+  height?: Dimension;
   /**
    * The ref object to be used to render the image
    */
-  imageContainerRef: {current: null | HTMLDivElement};
+  imageContainerRef: React.MutableRefObject<HTMLDivElement | null>;
   /**
    * The type of image to be rendered
    */
@@ -53,7 +55,7 @@ type Props = {
   /**
    * The width of the image to be rendered
    */
-  width?: number | null;
+  width?: Dimension;
 };
 
 // exportToSvg has fonts from excalidraw.com
@@ -85,6 +87,8 @@ export default function ExcalidrawImage({
   imageContainerRef,
   appState,
   rootClassName = null,
+  width = 'inherit',
+  height = 'inherit',
 }: Props): JSX.Element {
   const [Svg, setSvg] = useState<SVGElement | null>(null);
 
@@ -106,10 +110,25 @@ export default function ExcalidrawImage({
     setContent();
   }, [elements, files, appState]);
 
+  const containerStyle: React.CSSProperties = {};
+  if (width !== 'inherit') {
+    containerStyle.width = `${width}px`;
+  }
+  if (height !== 'inherit') {
+    containerStyle.height = `${height}px`;
+  }
+
   return (
     <div
-      ref={imageContainerRef}
+      ref={(node) => {
+        if (node) {
+          if (imageContainerRef) {
+            imageContainerRef.current = node;
+          }
+        }
+      }}
       className={rootClassName ?? ''}
+      style={containerStyle}
       dangerouslySetInnerHTML={{__html: Svg?.outerHTML ?? ''}}
     />
   );

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

@@ -29,8 +29,8 @@ const ExcalidrawComponent = React.lazy(() => import('./ExcalidrawComponent'));
 export type SerializedExcalidrawNode = Spread<
   {
     data: string;
-    width: Dimension;
-    height: Dimension;
+    width?: Dimension;
+    height?: Dimension;
   },
   SerializedLexicalNode
 >;
@@ -48,10 +48,7 @@ function $convertExcalidrawElement(
     !widthStr || widthStr === 'inherit' ? 'inherit' : parseInt(widthStr, 10);
 
   if (excalidrawData) {
-    const node = $createExcalidrawNode();
-    node.__data = excalidrawData;
-    node.__height = height;
-    node.__width = width;
+    const node = $createExcalidrawNode(excalidrawData, width, height);
     return {
       node,
     };
@@ -80,18 +77,19 @@ export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
   static importJSON(serializedNode: SerializedExcalidrawNode): ExcalidrawNode {
     return new ExcalidrawNode(
       serializedNode.data,
-      serializedNode.width,
-      serializedNode.height,
+      serializedNode.width ?? 'inherit',
+      serializedNode.height ?? 'inherit',
     );
   }
 
   exportJSON(): SerializedExcalidrawNode {
     return {
+      ...super.exportJSON(),
       data: this.__data,
-      height: this.__height,
+      height: this.__height === 'inherit' ? undefined : this.__height,
       type: 'excalidraw',
       version: 1,
-      width: this.__width,
+      width: this.__width === 'inherit' ? undefined : this.__width,
     };
   }
 
@@ -113,6 +111,8 @@ export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
     const theme = config.theme;
     const className = theme.image;
 
+    span.style.display = 'inline-block';
+
     span.style.width =
       this.__width === 'inherit' ? 'inherit' : `${this.__width}px`;
     span.style.height =
@@ -124,7 +124,11 @@ export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
     return span;
   }
 
-  updateDOM(): false {
+  updateDOM(prevNode: ExcalidrawNode, dom: HTMLElement): boolean {
+    dom.style.width =
+      this.__width === 'inherit' ? 'inherit' : `${this.__width}px`;
+    dom.style.height =
+      this.__height === 'inherit' ? 'inherit' : `${this.__height}px`;
     return false;
   }
 
@@ -169,11 +173,19 @@ export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
     self.__data = data;
   }
 
+  getWidth(): Dimension {
+    return this.getLatest().__width;
+  }
+
   setWidth(width: Dimension): void {
     const self = this.getWritable();
     self.__width = width;
   }
 
+  getHeight(): Dimension {
+    return this.getLatest().__height;
+  }
+
   setHeight(height: Dimension): void {
     const self = this.getWritable();
     self.__height = height;
@@ -188,12 +200,16 @@ export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
   }
 }
 
-export function $createExcalidrawNode(): ExcalidrawNode {
-  return new ExcalidrawNode();
+export function $createExcalidrawNode(
+  data: string = '[]',
+  width: Dimension = 'inherit',
+  height: Dimension = 'inherit',
+): ExcalidrawNode {
+  return new ExcalidrawNode(data, width, height);
 }
 
 export function $isExcalidrawNode(
-  node: LexicalNode | null,
+  node: LexicalNode | null | undefined,
 ): node is ExcalidrawNode {
   return node instanceof ExcalidrawNode;
 }