@baasix/lexical 0.0.4 → 0.0.5

package/dist/{ExcalidrawComponent-GZYLHNOY.js → ExcalidrawComponent-MA23PUNN.js}

@@ -1,7 +1,7 @@
 import {
   $isExcalidrawNode,
   ExcalidrawModal
-} from "./chunk-N22RKA5D.js";
+} from "./chunk-RIV43XYA.js";
 import {
   ImageResizer
 } from "./chunk-FJ6COZ4H.js";
@@ -20,6 +20,7 @@ import {
   isDOMNode
 } from "lexical";
 import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
 
 // src/nodes/ExcalidrawNode/ExcalidrawImage.tsx
 import { useEffect, useState } from "react";
@@ -65,6 +66,8 @@ function ExcalidrawImage({
   const containerStyle = {};
   if (width !== "inherit") {
     containerStyle.width = `${width}px`;
+  } else {
+    containerStyle.width = "100%";
   }
   if (height !== "inherit") {
     containerStyle.height = `${height}px`;
@@ -88,6 +91,65 @@ function ExcalidrawImage({
 
 // src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function parseDimension(val) {
+  const trimmed = val.trim();
+  if (!trimmed || trimmed === "inherit" || trimmed === "100%" || trimmed === "auto") {
+    return "inherit";
+  }
+  const num = parseInt(trimmed.replace(/px$/i, ""), 10);
+  return isNaN(num) || num <= 0 ? "inherit" : num;
+}
+function dimensionToString(d) {
+  return d === "inherit" ? "" : String(d);
+}
+function ExcalidrawResizeDialog({
+  width,
+  height,
+  onSave,
+  onClose
+}) {
+  const [widthVal, setWidthVal] = useState2(dimensionToString(width));
+  const [heightVal, setHeightVal] = useState2(dimensionToString(height));
+  const handleSave = () => {
+    onSave(parseDimension(widthVal), parseDimension(heightVal));
+  };
+  return /* @__PURE__ */ jsx2("div", { className: "excalidraw-resize-overlay", children: /* @__PURE__ */ jsxs("div", { className: "excalidraw-resize-dialog", children: [
+    /* @__PURE__ */ jsx2("div", { className: "excalidraw-resize-dialog__title", children: "Resize Diagram" }),
+    /* @__PURE__ */ jsxs("div", { className: "excalidraw-resize-dialog__fields", children: [
+      /* @__PURE__ */ jsxs("label", { className: "excalidraw-resize-dialog__label", children: [
+        "Width",
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            className: "excalidraw-resize-dialog__input",
+            type: "text",
+            value: widthVal,
+            onChange: (e) => setWidthVal(e.target.value),
+            placeholder: "auto (full width)"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "excalidraw-resize-dialog__label", children: [
+        "Height",
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            className: "excalidraw-resize-dialog__input",
+            type: "text",
+            value: heightVal,
+            onChange: (e) => setHeightVal(e.target.value),
+            placeholder: "auto"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "excalidraw-resize-dialog__hint", children: "Enter a number in pixels (e.g. 400) or leave empty for auto." }),
+    /* @__PURE__ */ jsxs("div", { className: "excalidraw-resize-dialog__actions", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "excalidraw-resize-dialog__btn excalidraw-resize-dialog__btn--cancel", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "excalidraw-resize-dialog__btn excalidraw-resize-dialog__btn--save", onClick: handleSave, children: "Apply" })
+    ] })
+  ] }) });
+}
 function ExcalidrawComponent({
   nodeKey,
   data,
@@ -99,6 +161,7 @@ function ExcalidrawComponent({
   const [isModalOpen, setModalOpen] = useState2(
     data === "[]" && editor.isEditable()
   );
+  const [isResizeDialogOpen, setResizeDialogOpen] = useState2(false);
   const imageContainerRef = useRef(null);
   const buttonRef = useRef(null);
   const captionButtonRef = useRef(null);
@@ -181,6 +244,19 @@ function ExcalidrawComponent({
   const openModal = useCallback(() => {
     setModalOpen(true);
   }, []);
+  const handleResizeSave = useCallback(
+    (newWidth, newHeight) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isExcalidrawNode(node)) {
+          node.setWidth(newWidth);
+          node.setHeight(newHeight);
+        }
+      });
+      setResizeDialogOpen(false);
+    },
+    [editor, nodeKey]
+  );
   const {
     elements = [],
     files = {},
@@ -220,6 +296,7 @@ function ExcalidrawComponent({
         type: "button",
         ref: buttonRef,
         className: `excalidraw-button ${isSelected ? "selected" : ""}`,
+        style: { width: width === "inherit" ? "100%" : `${width}px` },
         children: [
           /* @__PURE__ */ jsx2(
             ExcalidrawImage,
@@ -233,16 +310,28 @@ function ExcalidrawComponent({
               height
             }
           ),
-          isSelected && isEditable && /* @__PURE__ */ jsx2(
-            "div",
-            {
-              className: "image-edit-button",
-              role: "button",
-              tabIndex: 0,
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: openModal
-            }
-          ),
+          isSelected && isEditable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "image-edit-button",
+                role: "button",
+                tabIndex: 0,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: openModal
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "image-resize-button",
+                role: "button",
+                tabIndex: 0,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => setResizeDialogOpen(true)
+              }
+            )
+          ] }),
           (isSelected || isResizing) && isEditable && /* @__PURE__ */ jsx2(
             ImageResizer,
             {
@@ -258,10 +347,22 @@ function ExcalidrawComponent({
           )
         ]
       }
+    ),
+    isResizeDialogOpen && isEditable && createPortal(
+      /* @__PURE__ */ jsx2(
+        ExcalidrawResizeDialog,
+        {
+          width,
+          height,
+          onSave: handleResizeSave,
+          onClose: () => setResizeDialogOpen(false)
+        }
+      ),
+      document.body
     )
   ] });
 }
 export {
   ExcalidrawComponent as default
 };
-//# sourceMappingURL=ExcalidrawComponent-GZYLHNOY.js.map
+//# sourceMappingURL=ExcalidrawComponent-MA23PUNN.js.map

package/dist/ExcalidrawComponent-MA23PUNN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx","../src/nodes/ExcalidrawNode/ExcalidrawImage.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {ExcalidrawInitialElements} from '../../ui/ExcalidrawModal';\nimport type {AppState, BinaryFiles} from '@excalidraw/excalidraw/types';\nimport type {NodeKey} from 'lexical';\nimport type {JSX} from 'react';\n\nimport {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';\nimport {useLexicalEditable} from '@lexical/react/useLexicalEditable';\nimport {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';\nimport {mergeRegister} from '@lexical/utils';\nimport {\n  $getNodeByKey,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  isDOMNode,\n} from 'lexical';\nimport {useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport * as React from 'react';\nimport {createPortal} from 'react-dom';\n\nimport ExcalidrawModal from '../../ui/ExcalidrawModal';\nimport ImageResizer from '../../ui/ImageResizer';\nimport {$isExcalidrawNode} from '.';\nimport ExcalidrawImage from './ExcalidrawImage';\n\ntype Dimension = 'inherit' | number;\n\nfunction parseDimension(val: string): Dimension {\n  const trimmed = val.trim();\n  if (!trimmed || trimmed === 'inherit' || trimmed === '100%' || trimmed === 'auto') {\n    return 'inherit';\n  }\n  // Strip \"px\" suffix if present\n  const num = parseInt(trimmed.replace(/px$/i, ''), 10);\n  return isNaN(num) || num <= 0 ? 'inherit' : num;\n}\n\nfunction dimensionToString(d: Dimension): string {\n  return d === 'inherit' ? '' : String(d);\n}\n\nfunction ExcalidrawResizeDialog({\n  width,\n  height,\n  onSave,\n  onClose,\n}: {\n  width: Dimension;\n  height: Dimension;\n  onSave: (w: Dimension, h: Dimension) => void;\n  onClose: () => void;\n}): JSX.Element {\n  const [widthVal, setWidthVal] = useState(dimensionToString(width));\n  const [heightVal, setHeightVal] = useState(dimensionToString(height));\n\n  const handleSave = () => {\n    onSave(parseDimension(widthVal), parseDimension(heightVal));\n  };\n\n  return (\n    <div className=\"excalidraw-resize-overlay\">\n      <div className=\"excalidraw-resize-dialog\">\n        <div className=\"excalidraw-resize-dialog__title\">Resize Diagram</div>\n        <div className=\"excalidraw-resize-dialog__fields\">\n          <label className=\"excalidraw-resize-dialog__label\">\n            Width\n            <input\n              className=\"excalidraw-resize-dialog__input\"\n              type=\"text\"\n              value={widthVal}\n              onChange={(e) => setWidthVal(e.target.value)}\n              placeholder=\"auto (full width)\"\n            />\n          </label>\n          <label className=\"excalidraw-resize-dialog__label\">\n            Height\n            <input\n              className=\"excalidraw-resize-dialog__input\"\n              type=\"text\"\n              value={heightVal}\n              onChange={(e) => setHeightVal(e.target.value)}\n              placeholder=\"auto\"\n            />\n          </label>\n        </div>\n        <div className=\"excalidraw-resize-dialog__hint\">\n          Enter a number in pixels (e.g. 400) or leave empty for auto.\n        </div>\n        <div className=\"excalidraw-resize-dialog__actions\">\n          <button type=\"button\" className=\"excalidraw-resize-dialog__btn excalidraw-resize-dialog__btn--cancel\" onClick={onClose}>\n            Cancel\n          </button>\n          <button type=\"button\" className=\"excalidraw-resize-dialog__btn excalidraw-resize-dialog__btn--save\" onClick={handleSave}>\n            Apply\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function ExcalidrawComponent({\n  nodeKey,\n  data,\n  width,\n  height,\n}: {\n  data: string;\n  nodeKey: NodeKey;\n  width: 'inherit' | number;\n  height: 'inherit' | number;\n}): JSX.Element {\n  const [editor] = useLexicalComposerContext();\n  const isEditable = useLexicalEditable();\n  const [isModalOpen, setModalOpen] = useState<boolean>(\n    data === '[]' && editor.isEditable(),\n  );\n  const [isResizeDialogOpen, setResizeDialogOpen] = useState(false);\n  const imageContainerRef = useRef<HTMLDivElement | null>(null);\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const captionButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSelected, setSelected, clearSelection] =\n    useLexicalNodeSelection(nodeKey);\n  const [isResizing, setIsResizing] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (!isEditable) {\n      if (isSelected) {\n        clearSelection();\n      }\n      return;\n    }\n    return mergeRegister(\n      editor.registerCommand(\n        CLICK_COMMAND,\n        (event: MouseEvent) => {\n          const buttonElem = buttonRef.current;\n          const eventTarget = event.target;\n\n          if (isResizing) {\n            return true;\n          }\n\n          if (\n            buttonElem !== null &&\n            isDOMNode(eventTarget) &&\n            buttonElem.contains(eventTarget)\n          ) {\n            if (!event.shiftKey) {\n              clearSelection();\n            }\n            setSelected(!isSelected);\n            if (event.detail > 1) {\n              setModalOpen(true);\n            }\n            return true;\n          }\n\n          return false;\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    );\n  }, [clearSelection, editor, isSelected, isResizing, setSelected, isEditable]);\n\n  const deleteNode = useCallback(() => {\n    setModalOpen(false);\n    return editor.update(() => {\n      const node = $getNodeByKey(nodeKey);\n      if (node) {\n        node.remove();\n      }\n    });\n  }, [editor, nodeKey]);\n\n  const setData = (\n    els: ExcalidrawInitialElements,\n    aps: Partial<AppState>,\n    fls: BinaryFiles,\n  ) => {\n    return editor.update(() => {\n      const node = $getNodeByKey(nodeKey);\n      if ($isExcalidrawNode(node)) {\n        if ((els && els.length > 0) || Object.keys(fls).length > 0) {\n          node.setData(\n            JSON.stringify({\n              appState: aps,\n              elements: els,\n              files: fls,\n            }),\n          );\n        } else {\n          node.remove();\n        }\n      }\n    });\n  };\n\n  const onResizeStart = () => {\n    setIsResizing(true);\n  };\n\n  const onResizeEnd = (\n    nextWidth: 'inherit' | number,\n    nextHeight: 'inherit' | number,\n  ) => {\n    // Delay hiding the resize bars for click case\n    setTimeout(() => {\n      setIsResizing(false);\n    }, 200);\n\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey);\n\n      if ($isExcalidrawNode(node)) {\n        node.setWidth(nextWidth);\n        node.setHeight(nextHeight);\n      }\n    });\n  };\n\n  const openModal = useCallback(() => {\n    setModalOpen(true);\n  }, []);\n\n  const handleResizeSave = useCallback(\n    (newWidth: Dimension, newHeight: Dimension) => {\n      editor.update(() => {\n        const node = $getNodeByKey(nodeKey);\n        if ($isExcalidrawNode(node)) {\n          node.setWidth(newWidth);\n          node.setHeight(newHeight);\n        }\n      });\n      setResizeDialogOpen(false);\n    },\n    [editor, nodeKey],\n  );\n\n  const {\n    elements = [],\n    files = {},\n    appState = {},\n  } = useMemo(() => JSON.parse(data), [data]);\n\n  const closeModal = useCallback(() => {\n    setModalOpen(false);\n    if (elements.length === 0) {\n      editor.update(() => {\n        const node = $getNodeByKey(nodeKey);\n        if (node) {\n          node.remove();\n        }\n      });\n    }\n  }, [editor, nodeKey, elements.length]);\n\n  return (\n    <>\n      {isEditable && isModalOpen && (\n        <ExcalidrawModal\n          initialElements={elements}\n          initialFiles={files}\n          initialAppState={appState}\n          isShown={isModalOpen}\n          onDelete={deleteNode}\n          onClose={closeModal}\n          onSave={(els, aps, fls) => {\n            setData(els, aps, fls);\n            setModalOpen(false);\n          }}\n          closeOnClickOutside={false}\n        />\n      )}\n      {elements.length > 0 && (\n        <button type=\"button\"\n          ref={buttonRef}\n          className={`excalidraw-button ${isSelected ? 'selected' : ''}`}\n          style={{width: width === 'inherit' ? '100%' : `${width}px`}}>\n          <ExcalidrawImage\n            imageContainerRef={imageContainerRef}\n            className=\"image\"\n            elements={elements}\n            files={files}\n            appState={appState}\n            width={width}\n            height={height}\n          />\n          {isSelected && isEditable && (\n            <>\n              <div\n                className=\"image-edit-button\"\n                role=\"button\"\n                tabIndex={0}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={openModal}\n              />\n              <div\n                className=\"image-resize-button\"\n                role=\"button\"\n                tabIndex={0}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => setResizeDialogOpen(true)}\n              />\n            </>\n          )}\n          {(isSelected || isResizing) && isEditable && (\n            <ImageResizer\n              buttonRef={captionButtonRef}\n              showCaption={true}\n              setShowCaption={() => null}\n              imageRef={imageContainerRef}\n              editor={editor}\n              onResizeStart={onResizeStart}\n              onResizeEnd={onResizeEnd}\n              captionsEnabled={true}\n            />\n          )}\n        </button>\n      )}\n      {isResizeDialogOpen && isEditable &&\n        createPortal(\n          <ExcalidrawResizeDialog\n            width={width}\n            height={height}\n            onSave={handleResizeSave}\n            onClose={() => setResizeDialogOpen(false)}\n          />,\n          document.body,\n        )}\n    </>\n  );\n}\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n */\r\n\r\nimport type {\r\n  ExcalidrawElement,\r\n  NonDeleted,\r\n} from '@excalidraw/excalidraw/element/types';\r\nimport type {AppState, BinaryFiles} from '@excalidraw/excalidraw/types';\r\nimport type {JSX} from 'react';\r\n\r\nimport * as React from 'react';\r\nimport {useEffect, useState} from 'react';\r\n\r\ntype ImageType = 'svg' | 'canvas';\r\n\r\ntype Dimension = 'inherit' | number;\r\n\r\ntype Props = {\r\n  /**\r\n   * Configures the export setting for SVG/Canvas\r\n   */\r\n  appState: AppState;\r\n  /**\r\n   * The css class applied to image to be rendered\r\n   */\r\n  className?: string;\r\n  /**\r\n   * The Excalidraw elements to be rendered as an image\r\n   */\r\n  elements: NonDeleted<ExcalidrawElement>[];\r\n  /**\r\n   * The Excalidraw files associated with the elements\r\n   */\r\n  files: BinaryFiles;\r\n  /**\r\n   * The height of the image to be rendered\r\n   */\r\n  height?: Dimension;\r\n  /**\r\n   * The ref object to be used to render the image\r\n   */\r\n  imageContainerRef: React.RefObject<HTMLDivElement | null>;\r\n  /**\r\n   * The type of image to be rendered\r\n   */\r\n  imageType?: ImageType;\r\n  /**\r\n   * The css class applied to the root element of this component\r\n   */\r\n  rootClassName?: string | null;\r\n  /**\r\n   * The width of the image to be rendered\r\n   */\r\n  width?: Dimension;\r\n};\r\n\r\n// exportToSvg has fonts from excalidraw.com\r\n// We don't want them to be used in open source\r\nconst removeStyleFromSvg_HACK = (svg: SVGElement) => {\r\n  const styleTag = svg?.firstElementChild?.firstElementChild;\r\n\r\n  // Generated SVG is getting double-sized by height and width attributes\r\n  // We want to match the real size of the SVG element\r\n  const viewBox = svg.getAttribute('viewBox');\r\n  if (viewBox != null) {\r\n    const viewBoxDimensions = viewBox.split(' ');\r\n    svg.setAttribute('width', viewBoxDimensions[2]);\r\n    svg.setAttribute('height', viewBoxDimensions[3]);\r\n  }\r\n\r\n  if (styleTag && styleTag.tagName === 'style') {\r\n    styleTag.remove();\r\n  }\r\n};\r\n\r\n/**\r\n * @explorer-desc\r\n * A component for rendering Excalidraw elements as a static image\r\n */\r\nexport default function ExcalidrawImage({\r\n  elements,\r\n  files,\r\n  imageContainerRef,\r\n  appState,\r\n  rootClassName = null,\r\n  width = 'inherit',\r\n  height = 'inherit',\r\n}: Props): JSX.Element {\r\n  const [Svg, setSvg] = useState<SVGElement | null>(null);\r\n\r\n  useEffect(() => {\r\n    const setContent = async () => {\r\n      const {exportToSvg} = await import('@excalidraw/excalidraw');\r\n      const svg: SVGElement = await exportToSvg({\r\n        appState,\r\n        elements,\r\n        files,\r\n      });\r\n      removeStyleFromSvg_HACK(svg);\r\n\r\n      svg.setAttribute('width', '100%');\r\n      svg.setAttribute('height', '100%');\r\n      svg.setAttribute('display', 'block');\r\n\r\n      setSvg(svg);\r\n    };\r\n    setContent();\r\n  }, [elements, files, appState]);\r\n\r\n  const containerStyle: React.CSSProperties = {};\r\n  if (width !== 'inherit') {\r\n    containerStyle.width = `${width}px`;\r\n  } else {\r\n    containerStyle.width = '100%';\r\n  }\r\n  if (height !== 'inherit') {\r\n    containerStyle.height = `${height}px`;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={(node) => {\r\n        if (node) {\r\n          if (imageContainerRef) {\r\n            (imageContainerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\r\n          }\r\n        }\r\n      }}\r\n      className={rootClassName ?? ''}\r\n      style={containerStyle}\r\n      dangerouslySetInnerHTML={{__html: Svg?.outerHTML ?? ''}}\r\n    />\r\n  );\r\n}\r\n"],"mappings":"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","names":["useEffect","useState","jsx","useState","useEffect"]}

package/dist/{chunk-N22RKA5D.js → chunk-RIV43XYA.js}

@@ -262,16 +262,19 @@ function ExcalidrawModal({
 import { DecoratorNode } from "lexical";
 import * as React from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var ExcalidrawComponent2 = React.lazy(() => import("./ExcalidrawComponent-GZYLHNOY.js"));
+var ExcalidrawComponent2 = React.lazy(() => import("./ExcalidrawComponent-MA23PUNN.js"));
 function $convertExcalidrawElement(domNode) {
   const excalidrawData = domNode.getAttribute("data-lexical-excalidraw-json");
-  const styleAttributes = window.getComputedStyle(domNode);
-  const heightStr = styleAttributes.getPropertyValue("height");
-  const widthStr = styleAttributes.getPropertyValue("width");
-  const height = !heightStr || heightStr === "inherit" ? "inherit" : parseInt(heightStr, 10);
-  const width = !widthStr || widthStr === "inherit" ? "inherit" : parseInt(widthStr, 10);
+  const widthStr = domNode.style.width;
+  const heightStr = domNode.style.height;
+  const width = !widthStr || widthStr === "100%" || widthStr === "auto" || widthStr === "inherit" ? "inherit" : parseInt(widthStr, 10);
+  const height = !heightStr || heightStr === "auto" || heightStr === "inherit" ? "inherit" : parseInt(heightStr, 10);
   if (excalidrawData) {
-    const node = $createExcalidrawNode(excalidrawData, width, height);
+    const node = $createExcalidrawNode(
+      excalidrawData,
+      isNaN(width) ? "inherit" : width,
+      isNaN(height) ? "inherit" : height
+    );
     return {
       node
     };
@@ -319,9 +322,7 @@ var ExcalidrawNode = class _ExcalidrawNode extends DecoratorNode {
     const span = document.createElement("span");
     const theme = config.theme;
     const className = theme.image;
-    if (className !== void 0) {
-      span.className = className;
-    }
+    span.className = `${className ?? ""} editor-excalidraw`.trim();
     return span;
   }
   updateDOM() {
@@ -342,7 +343,7 @@ var ExcalidrawNode = class _ExcalidrawNode extends DecoratorNode {
   }
   exportDOM(editor) {
     const element = document.createElement("span");
-    element.style.display = "inline-block";
+    element.style.display = "block";
     const content = editor.getElementByKey(this.getKey());
     if (content !== null) {
       const svg = content.querySelector("svg");
@@ -350,8 +351,8 @@ var ExcalidrawNode = class _ExcalidrawNode extends DecoratorNode {
         element.innerHTML = svg.outerHTML;
       }
     }
-    element.style.width = this.__width === "inherit" ? "inherit" : `${this.__width}px`;
-    element.style.height = this.__height === "inherit" ? "inherit" : `${this.__height}px`;
+    element.style.width = this.__width === "inherit" ? "100%" : `${this.__width}px`;
+    element.style.height = this.__height === "inherit" ? "auto" : `${this.__height}px`;
     element.setAttribute("data-lexical-excalidraw-json", this.__data);
     return { element };
   }
@@ -399,4 +400,4 @@ export {
   $createExcalidrawNode,
   $isExcalidrawNode
 };
-//# sourceMappingURL=chunk-N22RKA5D.js.map
+//# sourceMappingURL=chunk-RIV43XYA.js.map

package/dist/chunk-RIV43XYA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/ExcalidrawModal.tsx","../src/ui/Modal.tsx","../src/nodes/ExcalidrawNode/index.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {\n  AppState,\n  BinaryFiles,\n  ExcalidrawImperativeAPI,\n  ExcalidrawInitialDataState,\n} from '@excalidraw/excalidraw/types';\nimport type {JSX} from 'react';\n\nimport './ExcalidrawModal.css';\n\nimport {isDOMNode} from 'lexical';\nimport * as React from 'react';\nimport {ReactPortal, lazy, Suspense, useEffect, useLayoutEffect, useRef, useState} from 'react';\nimport {createPortal} from 'react-dom';\n\nimport Button from './Button';\nimport Modal from './Modal';\n\nconst ExcalidrawComponent = lazy(() =>\n  import('@excalidraw/excalidraw').then((mod) => ({default: mod.Excalidraw})),\n);\n\nexport type ExcalidrawInitialElements = ExcalidrawInitialDataState['elements'];\n\ntype Props = {\n  closeOnClickOutside?: boolean;\n  /**\n   * The initial set of elements to draw into the scene\n   */\n  initialElements: ExcalidrawInitialElements;\n  /**\n   * The initial set of elements to draw into the scene\n   */\n  initialAppState: AppState;\n  /**\n   * The initial set of elements to draw into the scene\n   */\n  initialFiles: BinaryFiles;\n  /**\n   * Controls the visibility of the modal\n   */\n  isShown?: boolean;\n  /**\n   * Callback when closing and discarding the new changes\n   */\n  onClose: () => void;\n  /**\n   * Completely remove Excalidraw component\n   */\n  onDelete: () => void;\n  /**\n   * Callback when the save button is clicked\n   */\n  onSave: (\n    elements: ExcalidrawInitialElements,\n    appState: Partial<AppState>,\n    files: BinaryFiles,\n  ) => void;\n};\n\n/**\n * @explorer-desc\n * A component which renders a modal with Excalidraw (a painting app)\n * which can be used to export an editable image\n */\nexport default function ExcalidrawModal({\n  closeOnClickOutside = false,\n  onSave,\n  initialElements,\n  initialAppState,\n  initialFiles,\n  isShown = false,\n  onDelete,\n  onClose,\n}: Props): ReactPortal | null {\n  const excaliDrawModelRef = useRef<HTMLDivElement | null>(null);\n  const [excalidrawAPI, setExcalidrawAPI] =\n    useState<ExcalidrawImperativeAPI | null>(null);\n  const [discardModalOpen, setDiscardModalOpen] = useState(false);\n  const [elements, setElements] =\n    useState<ExcalidrawInitialElements>(initialElements);\n  const [files, setFiles] = useState<BinaryFiles>(initialFiles);\n\n  useEffect(() => {\n    excaliDrawModelRef.current?.focus();\n  }, []);\n\n  // Excalidraw registers a document-level wheel handler that calls preventDefault(),\n  // which blocks scrolling inside its own modal dialogs (Help, etc.).\n  // Watch for the modal container and stop wheel propagation so scroll works.\n  useEffect(() => {\n    const onWheel = (e: Event) => {\n      e.stopPropagation();\n    };\n\n    const observer = new MutationObserver(() => {\n      const container = document.querySelector('.excalidraw-modal-container') as HTMLElement | null;\n      if (container && !container.hasAttribute('data-wheel-fixed')) {\n        container.setAttribute('data-wheel-fixed', 'true');\n        container.addEventListener('wheel', onWheel, {passive: false});\n      }\n    });\n\n    observer.observe(document.body, {childList: true});\n\n    return () => {\n      observer.disconnect();\n      const container = document.querySelector('.excalidraw-modal-container') as HTMLElement | null;\n      if (container) {\n        container.removeEventListener('wheel', onWheel);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    let modalOverlayElement: HTMLElement | null = null;\n\n    const clickOutsideHandler = (event: MouseEvent) => {\n      const target = event.target;\n      if (\n        excaliDrawModelRef.current !== null &&\n        isDOMNode(target) &&\n        !excaliDrawModelRef.current.contains(target) &&\n        closeOnClickOutside\n      ) {\n        onDelete();\n      }\n    };\n\n    if (excaliDrawModelRef.current !== null) {\n      modalOverlayElement = excaliDrawModelRef.current?.parentElement;\n      modalOverlayElement?.addEventListener('click', clickOutsideHandler);\n    }\n\n    return () => {\n      modalOverlayElement?.removeEventListener('click', clickOutsideHandler);\n    };\n  }, [closeOnClickOutside, onDelete]);\n\n  useLayoutEffect(() => {\n    const currentModalRef = excaliDrawModelRef.current;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onDelete();\n      }\n    };\n\n    currentModalRef?.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      currentModalRef?.removeEventListener('keydown', onKeyDown);\n    };\n  }, [elements, files, onDelete]);\n\n  const save = () => {\n    if (elements?.some((el: Record<string, unknown>) => !el.isDeleted)) {\n      const appState = excalidrawAPI?.getAppState();\n      // We only need a subset of the state\n      const partialState: Partial<AppState> = {\n        exportBackground: appState?.exportBackground,\n        exportScale: appState?.exportScale,\n        exportWithDarkMode: appState?.theme === 'dark',\n        isBindingEnabled: appState?.isBindingEnabled,\n        isLoading: appState?.isLoading,\n        name: appState?.name,\n        theme: appState?.theme,\n        viewBackgroundColor: appState?.viewBackgroundColor,\n        viewModeEnabled: appState?.viewModeEnabled,\n        zenModeEnabled: appState?.zenModeEnabled,\n        zoom: appState?.zoom,\n      };\n      onSave(elements, partialState, files);\n    } else {\n      // delete node if the scene is clear\n      onDelete();\n    }\n  };\n\n  const discard = () => {\n    setDiscardModalOpen(true);\n  };\n\n  function ShowDiscardDialog(): JSX.Element {\n    return (\n      <Modal\n        title=\"Discard\"\n        onClose={() => {\n          setDiscardModalOpen(false);\n        }}\n        closeOnClickOutside={false}>\n        Are you sure you want to discard the changes?\n        <div className=\"ExcalidrawModal__discardModal\">\n          <Button\n            onClick={() => {\n              setDiscardModalOpen(false);\n              onClose();\n            }}>\n            Discard\n          </Button>{' '}\n          <Button\n            onClick={() => {\n              setDiscardModalOpen(false);\n            }}>\n            Cancel\n          </Button>\n        </div>\n      </Modal>\n    );\n  }\n\n  if (isShown === false) {\n    return null;\n  }\n\n  const onChange = (\n    els: ExcalidrawInitialElements,\n    _: AppState,\n    fls: BinaryFiles,\n  ) => {\n    setElements(els);\n    setFiles(fls);\n  };\n\n  return createPortal(\n    <div className=\"ExcalidrawModal__overlay\" role=\"dialog\">\n      <div\n        className=\"ExcalidrawModal__modal\"\n        ref={excaliDrawModelRef}\n        tabIndex={-1}>\n        <div className=\"ExcalidrawModal__row\">\n          {discardModalOpen && <ShowDiscardDialog />}\n          <Suspense fallback={<div style={{padding: 20}}>Loading Excalidraw...</div>}>\n            <ExcalidrawComponent\n              onChange={onChange}\n              excalidrawAPI={setExcalidrawAPI}\n              initialData={{\n                appState: initialAppState || {isLoading: false},\n                elements: initialElements,\n                files: initialFiles,\n              }}\n            />\n          </Suspense>\n          <div className=\"ExcalidrawModal__actions\">\n            <button type=\"button\" className=\"action-button\" onClick={discard}>\n              Discard\n            </button>\n            <button type=\"button\" className=\"action-button\" onClick={save}>\n              Save\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n */\r\n\r\nimport type {JSX} from 'react';\r\n\r\nimport './Modal.css';\r\n\r\nimport {isDOMNode} from 'lexical';\r\nimport * as React from 'react';\r\nimport {ReactNode, useEffect, useRef} from 'react';\r\nimport {createPortal} from 'react-dom';\r\n\r\nfunction PortalImpl({\r\n  onClose,\r\n  children,\r\n  title,\r\n  closeOnClickOutside,\r\n}: {\r\n  children: ReactNode;\r\n  closeOnClickOutside: boolean;\r\n  onClose: () => void;\r\n  title: string;\r\n}) {\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (modalRef.current !== null) {\r\n      modalRef.current.focus();\r\n    }\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    let modalOverlayElement: HTMLElement | null = null;\r\n    const handler = (event: KeyboardEvent) => {\r\n      if (event.key === 'Escape') {\r\n        onClose();\r\n      }\r\n    };\r\n    const clickOutsideHandler = (event: MouseEvent) => {\r\n      const target = event.target;\r\n      if (\r\n        modalRef.current !== null &&\r\n        isDOMNode(target) &&\r\n        !modalRef.current.contains(target) &&\r\n        closeOnClickOutside\r\n      ) {\r\n        onClose();\r\n      }\r\n    };\r\n    const modelElement = modalRef.current;\r\n    if (modelElement !== null) {\r\n      modalOverlayElement = modelElement.parentElement;\r\n      if (modalOverlayElement !== null) {\r\n        modalOverlayElement.addEventListener('click', clickOutsideHandler);\r\n      }\r\n    }\r\n\r\n    window.addEventListener('keydown', handler);\r\n\r\n    return () => {\r\n      window.removeEventListener('keydown', handler);\r\n      if (modalOverlayElement !== null) {\r\n        modalOverlayElement?.removeEventListener('click', clickOutsideHandler);\r\n      }\r\n    };\r\n  }, [closeOnClickOutside, onClose]);\r\n\r\n  return (\r\n    <div className=\"Modal__overlay\" role=\"dialog\">\r\n      <div className=\"Modal__modal\" tabIndex={-1} ref={modalRef}>\r\n        <h2 className=\"Modal__title\">{title}</h2>\r\n        <button\r\n          className=\"Modal__closeButton\"\r\n          aria-label=\"Close modal\"\r\n          type=\"button\"\r\n          onClick={onClose}>\r\n          X\r\n        </button>\r\n        <div className=\"Modal__content\">{children}</div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default function Modal({\r\n  onClose,\r\n  children,\r\n  title,\r\n  closeOnClickOutside = false,\r\n}: {\r\n  children: ReactNode;\r\n  closeOnClickOutside?: boolean;\r\n  onClose: () => void;\r\n  title: string;\r\n}): JSX.Element {\r\n  return createPortal(\r\n    <PortalImpl\r\n      onClose={onClose}\r\n      title={title}\r\n      closeOnClickOutside={closeOnClickOutside}>\r\n      {children}\r\n    </PortalImpl>,\r\n    document.body,\r\n  );\r\n}\r\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n */\r\n\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMConversionOutput,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  LexicalEditor,\r\n  LexicalNode,\r\n  NodeKey,\r\n  SerializedLexicalNode,\r\n  Spread,\r\n} from 'lexical';\r\nimport type {JSX} from 'react';\r\n\r\nimport {DecoratorNode} from 'lexical';\r\nimport * as React from 'react';\r\n\r\ntype Dimension = number | 'inherit';\r\n\r\nconst ExcalidrawComponent = React.lazy(() => import('./ExcalidrawComponent'));\r\n\r\nexport type SerializedExcalidrawNode = Spread<\r\n  {\r\n    data: string;\r\n    width?: Dimension;\r\n    height?: Dimension;\r\n  },\r\n  SerializedLexicalNode\r\n>;\r\n\r\nfunction $convertExcalidrawElement(\r\n  domNode: HTMLElement,\r\n): DOMConversionOutput | null {\r\n  const excalidrawData = domNode.getAttribute('data-lexical-excalidraw-json');\r\n  // Read from inline style (not getComputedStyle) because during\r\n  // $generateNodesFromDOM the element is detached and computed styles are empty.\r\n  const widthStr = domNode.style.width;\r\n  const heightStr = domNode.style.height;\r\n  const width =\r\n    !widthStr || widthStr === '100%' || widthStr === 'auto' || widthStr === 'inherit'\r\n      ? 'inherit'\r\n      : parseInt(widthStr, 10);\r\n  const height =\r\n    !heightStr || heightStr === 'auto' || heightStr === 'inherit'\r\n      ? 'inherit'\r\n      : parseInt(heightStr, 10);\r\n\r\n  if (excalidrawData) {\r\n    const node = $createExcalidrawNode(\r\n      excalidrawData,\r\n      isNaN(width as number) ? 'inherit' : width,\r\n      isNaN(height as number) ? 'inherit' : height,\r\n    );\r\n    return {\r\n      node,\r\n    };\r\n  }\r\n  return null;\r\n}\r\n\r\nexport class ExcalidrawNode extends DecoratorNode<JSX.Element> {\r\n  __data: string;\r\n  __width: Dimension;\r\n  __height: Dimension;\r\n\r\n  static getType(): string {\r\n    return 'excalidraw';\r\n  }\r\n\r\n  static clone(node: ExcalidrawNode): ExcalidrawNode {\r\n    return new ExcalidrawNode(\r\n      node.__data,\r\n      node.__width,\r\n      node.__height,\r\n      node.__key,\r\n    );\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedExcalidrawNode): ExcalidrawNode {\r\n    return new ExcalidrawNode(\r\n      serializedNode.data,\r\n      serializedNode.width ?? 'inherit',\r\n      serializedNode.height ?? 'inherit',\r\n    ).updateFromJSON(serializedNode);\r\n  }\r\n\r\n  exportJSON(): SerializedExcalidrawNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      data: this.__data,\r\n      height: this.__height === 'inherit' ? undefined : this.__height,\r\n      width: this.__width === 'inherit' ? undefined : this.__width,\r\n    };\r\n  }\r\n\r\n  constructor(\r\n    data = '[]',\r\n    width: Dimension = 'inherit',\r\n    height: Dimension = 'inherit',\r\n    key?: NodeKey,\r\n  ) {\r\n    super(key);\r\n    this.__data = data;\r\n    this.__width = width;\r\n    this.__height = height;\r\n  }\r\n\r\n  // View\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const span = document.createElement('span');\r\n    const theme = config.theme;\r\n    const className = theme.image;\r\n    span.className = `${className ?? ''} editor-excalidraw`.trim();\r\n    return span;\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false;\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap<HTMLSpanElement> | null {\r\n    return {\r\n      span: (domNode: HTMLSpanElement) => {\r\n        if (!domNode.hasAttribute('data-lexical-excalidraw-json')) {\r\n          return null;\r\n        }\r\n        return {\r\n          conversion: $convertExcalidrawElement,\r\n          priority: 1,\r\n        };\r\n      },\r\n    };\r\n  }\r\n\r\n  exportDOM(editor: LexicalEditor): DOMExportOutput {\r\n    const element = document.createElement('span');\r\n\r\n    element.style.display = 'block';\r\n\r\n    const content = editor.getElementByKey(this.getKey());\r\n    if (content !== null) {\r\n      const svg = content.querySelector('svg');\r\n      if (svg !== null) {\r\n        element.innerHTML = svg.outerHTML;\r\n      }\r\n    }\r\n\r\n    element.style.width =\r\n      this.__width === 'inherit' ? '100%' : `${this.__width}px`;\r\n    element.style.height =\r\n      this.__height === 'inherit' ? 'auto' : `${this.__height}px`;\r\n\r\n    element.setAttribute('data-lexical-excalidraw-json', this.__data);\r\n    return {element};\r\n  }\r\n\r\n  setData(data: string): void {\r\n    const self = this.getWritable();\r\n    self.__data = data;\r\n  }\r\n\r\n  getWidth(): Dimension {\r\n    return this.getLatest().__width;\r\n  }\r\n\r\n  setWidth(width: Dimension): void {\r\n    const self = this.getWritable();\r\n    self.__width = width;\r\n  }\r\n\r\n  getHeight(): Dimension {\r\n    return this.getLatest().__height;\r\n  }\r\n\r\n  setHeight(height: Dimension): void {\r\n    const self = this.getWritable();\r\n    self.__height = height;\r\n  }\r\n\r\n  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {\r\n    return (\r\n      <ExcalidrawComponent\r\n        nodeKey={this.getKey()}\r\n        data={this.__data}\r\n        width={this.__width}\r\n        height={this.__height}\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\nexport function $createExcalidrawNode(\r\n  data: string = '[]',\r\n  width: Dimension = 'inherit',\r\n  height: Dimension = 'inherit',\r\n): ExcalidrawNode {\r\n  return new ExcalidrawNode(data, width, height);\r\n}\r\n\r\nexport function $isExcalidrawNode(\r\n  node: LexicalNode | null | undefined,\r\n): node is ExcalidrawNode {\r\n  return node instanceof ExcalidrawNode;\r\n}\r\n"],"mappings":"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","names":["isDOMNode","useEffect","useRef","createPortal","jsx","jsxs","useRef","useEffect","isDOMNode","createPortal","jsx","ExcalidrawComponent"]}

package/dist/index.css

@@ -1250,6 +1250,106 @@ i.page-break,
 .editor-shell .editor-image .image-edit-button:hover {
   background-color: rgba(60, 132, 244, 0.1);
 }
+.editor-shell .editor-image .image-resize-button {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">%0A  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707"/>%0A</svg>%0A');
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  height: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 44px;
+  top: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+.editor-shell .editor-image .image-resize-button:hover {
+  background-color: rgba(60, 132, 244, 0.1);
+}
+.excalidraw-resize-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+.excalidraw-resize-dialog {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px 24px;
+  min-width: 300px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+}
+.excalidraw-resize-dialog__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #1a1a1a;
+}
+.excalidraw-resize-dialog__fields {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.excalidraw-resize-dialog__label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #555;
+  flex: 1;
+}
+.excalidraw-resize-dialog__input {
+  padding: 6px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.excalidraw-resize-dialog__input:focus {
+  border-color: rgb(60, 132, 244);
+  box-shadow: 0 0 0 2px rgba(60, 132, 244, 0.15);
+}
+.excalidraw-resize-dialog__hint {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 16px;
+}
+.excalidraw-resize-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.excalidraw-resize-dialog__btn {
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #333;
+  transition: background-color 0.15s;
+}
+.excalidraw-resize-dialog__btn:hover {
+  background: #f5f5f5;
+}
+.excalidraw-resize-dialog__btn--save {
+  background: rgb(60, 132, 244);
+  color: #fff;
+  border-color: rgb(60, 132, 244);
+}
+.excalidraw-resize-dialog__btn--save:hover {
+  background: rgb(45, 115, 225);
+}
 .editor-shell .editor-image .image-resizer {
   display: block;
   width: 7px;
@@ -1765,11 +1865,18 @@ button.toolbar-item.active i {
   height: 12px;
   background-size: contain;
 }
+.editor-shell span.editor-excalidraw {
+  display: block;
+  width: 100%;
+}
 .excalidraw-button {
   border: 0;
   padding: 0;
   margin: 0;
   background-color: transparent;
+  display: block;
+  cursor: default;
+  position: relative;
 }
 .excalidraw-button.selected {
   outline: 2px solid rgb(60, 132, 244);