@webiny/lexical-nodes 0.0.0-unstable.06b2ede40f

package/components/ImageNode/ImageResizer.js

@@ -0,0 +1,211 @@
+/**
+ * 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 * as React from "react";
+import { useRef } from "react";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2
+};
+export function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  buttonRef,
+  imageRef,
+  maxWidth,
+  editor,
+  showCaption,
+  setShowCaption,
+  captionsEnabled
+}) {
+  const controlWrapperRef = useRef(null);
+  const userSelect = useRef({
+    priority: "",
+    value: "default"
+  });
+  const positioningRef = useRef({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  });
+  const editorRootElement = editor.getRootElement();
+  // Find max width, accounting for editor padding.
+  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  const minWidth = 100;
+  const minHeight = 100;
+  const setStartCursor = direction => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+      userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
+      userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
+      document.body.style.setProperty("-webkit-user-select", `none`, "important");
+    }
+  };
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
+    }
+  };
+  const handlePointerDown = (event, direction) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null) {
+      const {
+        width,
+        height
+      } = image.getBoundingClientRect();
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX;
+      positioning.startY = event.clientY;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+      setStartCursor(direction);
+      onResizeStart();
+      controlWrapper.classList.add("image-control-wrapper--resizing");
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+  const handlePointerMove = event => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    const isVertical = positioning.direction & (Direction.south | Direction.north);
+    if (image !== null && positioning.isResizing) {
+      // Corner cursor
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+        const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+      controlWrapper.classList.remove("image-control-wrapper--resizing");
+      setEndCursor();
+      onResizeEnd(width, height);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: controlWrapperRef
+  }, !showCaption && captionsEnabled && /*#__PURE__*/React.createElement("button", {
+    className: "image-caption-button",
+    ref: buttonRef,
+    onClick: () => {
+      setShowCaption(!showCaption);
+    }
+  }, "Add Caption"), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-n",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.north);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-ne",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.north | Direction.east);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-e",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.east);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-se",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.south | Direction.east);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-s",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.south);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-sw",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.south | Direction.west);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-w",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.west);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-nw",
+    onPointerDown: event => {
+      handlePointerDown(event, Direction.north | Direction.west);
+    }
+  }));
+}
+
+//# sourceMappingURL=ImageResizer.js.map

package/components/ImageNode/ImageResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onClick","onPointerDown"],"sources":["ImageResizer.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 { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n    east: 1 << 0,\n    north: 1 << 3,\n    south: 1 << 1,\n    west: 1 << 2\n};\n\nexport function ImageResizer({\n    onResizeStart,\n    onResizeEnd,\n    buttonRef,\n    imageRef,\n    maxWidth,\n    editor,\n    showCaption,\n    setShowCaption,\n    captionsEnabled\n}: {\n    editor: LexicalEditor;\n    buttonRef: { current: null | HTMLButtonElement };\n    imageRef: { current: null | HTMLElement };\n    maxWidth?: number;\n    onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n    onResizeStart: () => void;\n    setShowCaption: (show: boolean) => void;\n    showCaption: boolean;\n    captionsEnabled: boolean;\n}): JSX.Element {\n    const controlWrapperRef = useRef<HTMLDivElement>(null);\n    const userSelect = useRef({\n        priority: \"\",\n        value: \"default\"\n    });\n    const positioningRef = useRef<{\n        currentHeight: \"inherit\" | number;\n        currentWidth: \"inherit\" | number;\n        direction: number;\n        isResizing: boolean;\n        ratio: number;\n        startHeight: number;\n        startWidth: number;\n        startX: number;\n        startY: number;\n    }>({\n        currentHeight: 0,\n        currentWidth: 0,\n        direction: 0,\n        isResizing: false,\n        ratio: 0,\n        startHeight: 0,\n        startWidth: 0,\n        startX: 0,\n        startY: 0\n    });\n    const editorRootElement = editor.getRootElement();\n    // Find max width, accounting for editor padding.\n    const maxWidthContainer = maxWidth\n        ? maxWidth\n        : editorRootElement !== null\n        ? editorRootElement.getBoundingClientRect().width - 20\n        : 100;\n    const maxHeightContainer =\n        editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n    const minWidth = 100;\n    const minHeight = 100;\n\n    const setStartCursor = (direction: number) => {\n        const ew = direction === Direction.east || direction === Direction.west;\n        const ns = direction === Direction.north || direction === Direction.south;\n        const nwse =\n            (direction & Direction.north && direction & Direction.west) ||\n            (direction & Direction.south && direction & Direction.east);\n\n        const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n            userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n            userSelect.current.priority =\n                document.body.style.getPropertyPriority(\"-webkit-user-select\");\n            document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n        }\n    };\n\n    const setEndCursor = () => {\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", \"text\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", \"default\");\n            document.body.style.setProperty(\n                \"-webkit-user-select\",\n                userSelect.current.value,\n                userSelect.current.priority\n            );\n        }\n    };\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n        if (!editor.isEditable()) {\n            return;\n        }\n\n        const image = imageRef.current;\n        const controlWrapper = controlWrapperRef.current;\n\n        if (image !== null && controlWrapper !== null) {\n            const { width, height } = image.getBoundingClientRect();\n            const positioning = positioningRef.current;\n            positioning.startWidth = width;\n            positioning.startHeight = height;\n            positioning.ratio = width / height;\n            positioning.currentWidth = width;\n            positioning.currentHeight = height;\n            positioning.startX = event.clientX;\n            positioning.startY = event.clientY;\n            positioning.isResizing = true;\n            positioning.direction = direction;\n\n            setStartCursor(direction);\n            onResizeStart();\n\n            controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n            image.style.height = `${height}px`;\n            image.style.width = `${width}px`;\n\n            document.addEventListener(\"pointermove\", handlePointerMove);\n            document.addEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    const handlePointerMove = (event: PointerEvent) => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n\n        const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n        const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n        if (image !== null && positioning.isResizing) {\n            // Corner cursor\n            if (isHorizontal && isVertical) {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                const height = width / positioning.ratio;\n                image.style.width = `${width}px`;\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n                positioning.currentWidth = width;\n            } else if (isVertical) {\n                let diff = Math.floor(positioning.startY - event.clientY);\n                diff = positioning.direction & Direction.south ? -diff : diff;\n\n                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n            } else {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                image.style.width = `${width}px`;\n                positioning.currentWidth = width;\n            }\n        }\n    };\n    const handlePointerUp = () => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n        const controlWrapper = controlWrapperRef.current;\n        if (image !== null && controlWrapper !== null && positioning.isResizing) {\n            const width = positioning.currentWidth;\n            const height = positioning.currentHeight;\n            positioning.startWidth = 0;\n            positioning.startHeight = 0;\n            positioning.ratio = 0;\n            positioning.startX = 0;\n            positioning.startY = 0;\n            positioning.currentWidth = 0;\n            positioning.currentHeight = 0;\n            positioning.isResizing = false;\n\n            controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n            setEndCursor();\n            onResizeEnd(width, height);\n\n            document.removeEventListener(\"pointermove\", handlePointerMove);\n            document.removeEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    return (\n        <div ref={controlWrapperRef}>\n            {!showCaption && captionsEnabled && (\n                <button\n                    className=\"image-caption-button\"\n                    ref={buttonRef}\n                    onClick={() => {\n                        setShowCaption(!showCaption);\n                    }}\n                >\n                    Add Caption\n                </button>\n            )}\n            <div\n                className=\"image-resizer image-resizer-n\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-ne\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-e\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-se\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-s\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-sw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-w\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-nw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.west);\n                }}\n            />\n        </div>\n    );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,OAAO;AAE9B,SAASC,KAAKA,CAACC,KAAa,EAAEC,GAAW,EAAEC,GAAW,EAAE;EACpD,OAAOC,IAAI,CAACF,GAAG,CAACE,IAAI,CAACD,GAAG,CAACF,KAAK,EAAEC,GAAG,CAAC,EAAEC,GAAG,CAAC;AAC9C;AAEA,MAAME,SAAS,GAAG;EACdC,IAAI,EAAE,CAAC,IAAI,CAAC;EACZC,KAAK,EAAE,CAAC,IAAI,CAAC;EACbC,KAAK,EAAE,CAAC,IAAI,CAAC;EACbC,IAAI,EAAE,CAAC,IAAI;AACf,CAAC;AAED,OAAO,SAASC,YAAYA,CAAC;EACzBC,aAAa;EACbC,WAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,WAAW;EACXC,cAAc;EACdC;AAWJ,CAAC,EAAe;EACZ,MAAMC,iBAAiB,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAMsB,UAAU,GAAGtB,MAAM,CAAC;IACtBuB,QAAQ,EAAE,EAAE;IACZrB,KAAK,EAAE;EACX,CAAC,CAAC;EACF,MAAMsB,cAAc,GAAGxB,MAAM,CAU1B;IACCyB,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE,CAAC;IACZC,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAE,CAAC;IACRC,WAAW,EAAE,CAAC;IACdC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE;EACZ,CAAC,CAAC;EACF,MAAMC,iBAAiB,GAAGjB,MAAM,CAACkB,cAAc,CAAC,CAAC;EACjD;EACA,MAAMC,iBAAiB,GAAGpB,QAAQ,GAC5BA,QAAQ,GACRkB,iBAAiB,KAAK,IAAI,GAC1BA,iBAAiB,CAACG,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,EAAE,GACpD,GAAG;EACT,MAAMC,kBAAkB,GACpBL,iBAAiB,KAAK,IAAI,GAAGA,iBAAiB,CAACG,qBAAqB,CAAC,CAAC,CAACG,MAAM,GAAG,EAAE,GAAG,GAAG;EAE5F,MAAMC,QAAQ,GAAG,GAAG;EACpB,MAAMC,SAAS,GAAG,GAAG;EAErB,MAAMC,cAAc,GAAIhB,SAAiB,IAAK;IAC1C,MAAMiB,EAAE,GAAGjB,SAAS,KAAKrB,SAAS,CAACC,IAAI,IAAIoB,SAAS,KAAKrB,SAAS,CAACI,IAAI;IACvE,MAAMmC,EAAE,GAAGlB,SAAS,KAAKrB,SAAS,CAACE,KAAK,IAAImB,SAAS,KAAKrB,SAAS,CAACG,KAAK;IACzE,MAAMqC,IAAI,GACLnB,SAAS,GAAGrB,SAAS,CAACE,KAAK,IAAImB,SAAS,GAAGrB,SAAS,CAACI,IAAI,IACzDiB,SAAS,GAAGrB,SAAS,CAACG,KAAK,IAAIkB,SAAS,GAAGrB,SAAS,CAACC,IAAK;IAE/D,MAAMwC,SAAS,GAAGH,EAAE,GAAG,IAAI,GAAGC,EAAE,GAAG,IAAI,GAAGC,IAAI,GAAG,MAAM,GAAG,MAAM;IAEhE,IAAIZ,iBAAiB,KAAK,IAAI,EAAE;MAC5BA,iBAAiB,CAACc,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,GAAGF,SAAS,SAAS,EAAE,WAAW,CAAC;IACrF;IACA,IAAIG,QAAQ,CAACC,IAAI,KAAK,IAAI,EAAE;MACxBD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,GAAGF,SAAS,SAAS,EAAE,WAAW,CAAC;MAC7EzB,UAAU,CAAC8B,OAAO,CAAClD,KAAK,GAAGgD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACK,gBAAgB,CAAC,qBAAqB,CAAC;MACtF/B,UAAU,CAAC8B,OAAO,CAAC7B,QAAQ,GACvB2B,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACM,mBAAmB,CAAC,qBAAqB,CAAC;MAClEJ,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAAC,qBAAqB,EAAE,MAAM,EAAE,WAAW,CAAC;IAC/E;EACJ,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvB,IAAIrB,iBAAiB,KAAK,IAAI,EAAE;MAC5BA,iBAAiB,CAACc,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC;IACzD;IACA,IAAIC,QAAQ,CAACC,IAAI,KAAK,IAAI,EAAE;MACxBD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;MACpDC,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAC3B,qBAAqB,EACrB3B,UAAU,CAAC8B,OAAO,CAAClD,KAAK,EACxBoB,UAAU,CAAC8B,OAAO,CAAC7B,QACvB,CAAC;IACL;EACJ,CAAC;EAED,MAAMiC,iBAAiB,GAAGA,CAACC,KAAyC,EAAE9B,SAAiB,KAAK;IACxF,IAAI,CAACV,MAAM,CAACyC,UAAU,CAAC,CAAC,EAAE;MACtB;IACJ;IAEA,MAAMC,KAAK,GAAG5C,QAAQ,CAACqC,OAAO;IAC9B,MAAMQ,cAAc,GAAGvC,iBAAiB,CAAC+B,OAAO;IAEhD,IAAIO,KAAK,KAAK,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;MAC3C,MAAM;QAAEtB,KAAK;QAAEE;MAAO,CAAC,GAAGmB,KAAK,CAACtB,qBAAqB,CAAC,CAAC;MACvD,MAAMwB,WAAW,GAAGrC,cAAc,CAAC4B,OAAO;MAC1CS,WAAW,CAAC9B,UAAU,GAAGO,KAAK;MAC9BuB,WAAW,CAAC/B,WAAW,GAAGU,MAAM;MAChCqB,WAAW,CAAChC,KAAK,GAAGS,KAAK,GAAGE,MAAM;MAClCqB,WAAW,CAACnC,YAAY,GAAGY,KAAK;MAChCuB,WAAW,CAACpC,aAAa,GAAGe,MAAM;MAClCqB,WAAW,CAAC7B,MAAM,GAAGyB,KAAK,CAACK,OAAO;MAClCD,WAAW,CAAC5B,MAAM,GAAGwB,KAAK,CAACM,OAAO;MAClCF,WAAW,CAACjC,UAAU,GAAG,IAAI;MAC7BiC,WAAW,CAAClC,SAAS,GAAGA,SAAS;MAEjCgB,cAAc,CAAChB,SAAS,CAAC;MACzBf,aAAa,CAAC,CAAC;MAEfgD,cAAc,CAACI,SAAS,CAACC,GAAG,CAAC,iCAAiC,CAAC;MAC/DN,KAAK,CAACX,KAAK,CAACR,MAAM,GAAG,GAAGA,MAAM,IAAI;MAClCmB,KAAK,CAACX,KAAK,CAACV,KAAK,GAAG,GAAGA,KAAK,IAAI;MAEhCY,QAAQ,CAACgB,gBAAgB,CAAC,aAAa,EAAEC,iBAAiB,CAAC;MAC3DjB,QAAQ,CAACgB,gBAAgB,CAAC,WAAW,EAAEE,eAAe,CAAC;IAC3D;EACJ,CAAC;EACD,MAAMD,iBAAiB,GAAIV,KAAmB,IAAK;IAC/C,MAAME,KAAK,GAAG5C,QAAQ,CAACqC,OAAO;IAC9B,MAAMS,WAAW,GAAGrC,cAAc,CAAC4B,OAAO;IAE1C,MAAMiB,YAAY,GAAGR,WAAW,CAAClC,SAAS,IAAIrB,SAAS,CAACC,IAAI,GAAGD,SAAS,CAACI,IAAI,CAAC;IAC9E,MAAM4D,UAAU,GAAGT,WAAW,CAAClC,SAAS,IAAIrB,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACE,KAAK,CAAC;IAE9E,IAAImD,KAAK,KAAK,IAAI,IAAIE,WAAW,CAACjC,UAAU,EAAE;MAC1C;MACA,IAAIyC,YAAY,IAAIC,UAAU,EAAE;QAC5B,IAAIC,IAAI,GAAGlE,IAAI,CAACmE,KAAK,CAACX,WAAW,CAAC7B,MAAM,GAAGyB,KAAK,CAACK,OAAO,CAAC;QACzDS,IAAI,GAAGV,WAAW,CAAClC,SAAS,GAAGrB,SAAS,CAACC,IAAI,GAAG,CAACgE,IAAI,GAAGA,IAAI;QAE5D,MAAMjC,KAAK,GAAGrC,KAAK,CAAC4D,WAAW,CAAC9B,UAAU,GAAGwC,IAAI,EAAE9B,QAAQ,EAAEL,iBAAiB,CAAC;QAE/E,MAAMI,MAAM,GAAGF,KAAK,GAAGuB,WAAW,CAAChC,KAAK;QACxC8B,KAAK,CAACX,KAAK,CAACV,KAAK,GAAG,GAAGA,KAAK,IAAI;QAChCqB,KAAK,CAACX,KAAK,CAACR,MAAM,GAAG,GAAGA,MAAM,IAAI;QAClCqB,WAAW,CAACpC,aAAa,GAAGe,MAAM;QAClCqB,WAAW,CAACnC,YAAY,GAAGY,KAAK;MACpC,CAAC,MAAM,IAAIgC,UAAU,EAAE;QACnB,IAAIC,IAAI,GAAGlE,IAAI,CAACmE,KAAK,CAACX,WAAW,CAAC5B,MAAM,GAAGwB,KAAK,CAACM,OAAO,CAAC;QACzDQ,IAAI,GAAGV,WAAW,CAAClC,SAAS,GAAGrB,SAAS,CAACG,KAAK,GAAG,CAAC8D,IAAI,GAAGA,IAAI;QAE7D,MAAM/B,MAAM,GAAGvC,KAAK,CAAC4D,WAAW,CAAC/B,WAAW,GAAGyC,IAAI,EAAE7B,SAAS,EAAEH,kBAAkB,CAAC;QAEnFoB,KAAK,CAACX,KAAK,CAACR,MAAM,GAAG,GAAGA,MAAM,IAAI;QAClCqB,WAAW,CAACpC,aAAa,GAAGe,MAAM;MACtC,CAAC,MAAM;QACH,IAAI+B,IAAI,GAAGlE,IAAI,CAACmE,KAAK,CAACX,WAAW,CAAC7B,MAAM,GAAGyB,KAAK,CAACK,OAAO,CAAC;QACzDS,IAAI,GAAGV,WAAW,CAAClC,SAAS,GAAGrB,SAAS,CAACC,IAAI,GAAG,CAACgE,IAAI,GAAGA,IAAI;QAE5D,MAAMjC,KAAK,GAAGrC,KAAK,CAAC4D,WAAW,CAAC9B,UAAU,GAAGwC,IAAI,EAAE9B,QAAQ,EAAEL,iBAAiB,CAAC;QAE/EuB,KAAK,CAACX,KAAK,CAACV,KAAK,GAAG,GAAGA,KAAK,IAAI;QAChCuB,WAAW,CAACnC,YAAY,GAAGY,KAAK;MACpC;IACJ;EACJ,CAAC;EACD,MAAM8B,eAAe,GAAGA,CAAA,KAAM;IAC1B,MAAMT,KAAK,GAAG5C,QAAQ,CAACqC,OAAO;IAC9B,MAAMS,WAAW,GAAGrC,cAAc,CAAC4B,OAAO;IAC1C,MAAMQ,cAAc,GAAGvC,iBAAiB,CAAC+B,OAAO;IAChD,IAAIO,KAAK,KAAK,IAAI,IAAIC,cAAc,KAAK,IAAI,IAAIC,WAAW,CAACjC,UAAU,EAAE;MACrE,MAAMU,KAAK,GAAGuB,WAAW,CAACnC,YAAY;MACtC,MAAMc,MAAM,GAAGqB,WAAW,CAACpC,aAAa;MACxCoC,WAAW,CAAC9B,UAAU,GAAG,CAAC;MAC1B8B,WAAW,CAAC/B,WAAW,GAAG,CAAC;MAC3B+B,WAAW,CAAChC,KAAK,GAAG,CAAC;MACrBgC,WAAW,CAAC7B,MAAM,GAAG,CAAC;MACtB6B,WAAW,CAAC5B,MAAM,GAAG,CAAC;MACtB4B,WAAW,CAACnC,YAAY,GAAG,CAAC;MAC5BmC,WAAW,CAACpC,aAAa,GAAG,CAAC;MAC7BoC,WAAW,CAACjC,UAAU,GAAG,KAAK;MAE9BgC,cAAc,CAACI,SAAS,CAACS,MAAM,CAAC,iCAAiC,CAAC;MAElElB,YAAY,CAAC,CAAC;MACd1C,WAAW,CAACyB,KAAK,EAAEE,MAAM,CAAC;MAE1BU,QAAQ,CAACwB,mBAAmB,CAAC,aAAa,EAAEP,iBAAiB,CAAC;MAC9DjB,QAAQ,CAACwB,mBAAmB,CAAC,WAAW,EAAEN,eAAe,CAAC;IAC9D;EACJ,CAAC;EACD,oBACIrE,KAAA,CAAA4E,aAAA;IAAKC,GAAG,EAAEvD;EAAkB,GACvB,CAACH,WAAW,IAAIE,eAAe,iBAC5BrB,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,sBAAsB;IAChCD,GAAG,EAAE9D,SAAU;IACfgE,OAAO,EAAEA,CAAA,KAAM;MACX3D,cAAc,CAAC,CAACD,WAAW,CAAC;IAChC;EAAE,GACL,aAEO,CACX,eACDnB,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACE,KAAK,CAAC;IAC7C;EAAE,CACL,CAAC,eACFT,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACE,KAAK,GAAGF,SAAS,CAACC,IAAI,CAAC;IAC9D;EAAE,CACL,CAAC,eACFR,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACC,IAAI,CAAC;IAC5C;EAAE,CACL,CAAC,eACFR,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACC,IAAI,CAAC;IAC9D;EAAE,CACL,CAAC,eACFR,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACG,KAAK,CAAC;IAC7C;EAAE,CACL,CAAC,eACFV,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACI,IAAI,CAAC;IAC9D;EAAE,CACL,CAAC,eACFX,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACI,IAAI,CAAC;IAC5C;EAAE,CACL,CAAC,eACFX,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACE,KAAK,GAAGF,SAAS,CAACI,IAAI,CAAC;IAC9D;EAAE,CACL,CACA,CAAC;AAEd","ignoreList":[]}

package/components/ImageNode/Placeholder.css

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Placeholder__root {
+  font-size: 15px;
+  margin-top: -20px;
+  color: #999;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+  pointer-events: none;
+}

package/components/ImageNode/Placeholder.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 "./Placeholder.css";
+import * as React from "react";
+import type { ReactNode } from "react";
+export declare function Placeholder({ children, className, styles }: {
+    children: ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+}): JSX.Element;

package/components/ImageNode/Placeholder.js

@@ -0,0 +1,24 @@
+/**
+ * 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 "./Placeholder.css";
+import * as React from "react";
+export function Placeholder({
+  children,
+  className,
+  styles
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...styles
+    },
+    className: className || "Placeholder__root"
+  }, children);
+}
+
+//# sourceMappingURL=Placeholder.js.map

package/components/ImageNode/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Placeholder","children","className","styles","createElement","style"],"sources":["Placeholder.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 \"./Placeholder.css\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\n\nexport function Placeholder({\n    children,\n    className,\n    styles\n}: {\n    children: ReactNode;\n    className?: string;\n    styles?: React.CSSProperties;\n}): JSX.Element {\n    return (\n        <div style={{ ...styles }} className={className || \"Placeholder__root\"}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAO,SAASC,WAAWA,CAAC;EACxBC,QAAQ;EACRC,SAAS;EACTC;AAKJ,CAAC,EAAe;EACZ,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,KAAK,EAAE;MAAE,GAAGF;IAAO,CAAE;IAACD,SAAS,EAAEA,SAAS,IAAI;EAAoB,GAClED,QACA,CAAC;AAEd","ignoreList":[]}

package/components/ImageNode/SharedHistoryContext.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { HistoryState } from "@lexical/history";
+type ContextShape = {
+    historyState?: HistoryState;
+};
+export declare const SharedHistoryContext: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSharedHistoryContext: () => ContextShape;
+export {};

package/components/ImageNode/SharedHistoryContext.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { createContext, useContext, useMemo } from "react";
+import { createEmptyHistoryState } from "@lexical/history";
+const Context = /*#__PURE__*/createContext({});
+export const SharedHistoryContext = ({
+  children
+}) => {
+  const historyContext = useMemo(() => ({
+    historyState: createEmptyHistoryState()
+  }), []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: historyContext
+  }, children);
+};
+export const useSharedHistoryContext = () => {
+  return useContext(Context);
+};
+
+//# sourceMappingURL=SharedHistoryContext.js.map

package/components/ImageNode/SharedHistoryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useMemo","createEmptyHistoryState","Context","SharedHistoryContext","children","historyContext","historyState","createElement","Provider","value","useSharedHistoryContext"],"sources":["SharedHistoryContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { HistoryState } from \"@lexical/history\";\nimport { createEmptyHistoryState } from \"@lexical/history\";\n\ntype ContextShape = {\n    historyState?: HistoryState;\n};\n\nconst Context: React.Context<ContextShape> = createContext({});\n\nexport const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {\n    const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);\n    return <Context.Provider value={historyContext}>{children}</Context.Provider>;\n};\n\nexport const useSharedHistoryContext = (): ContextShape => {\n    return useContext(Context);\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,uBAAuB,QAAQ,kBAAkB;AAM1D,MAAMC,OAAoC,gBAAGJ,aAAa,CAAC,CAAC,CAAC,CAAC;AAE9D,OAAO,MAAMK,oBAAoB,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAkB;EACxF,MAAMC,cAAc,GAAGL,OAAO,CAAC,OAAO;IAAEM,YAAY,EAAEL,uBAAuB,CAAC;EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;EACvF,oBAAOJ,KAAA,CAAAU,aAAA,CAACL,OAAO,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAe,GAAED,QAA2B,CAAC;AACjF,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGA,CAAA,KAAoB;EACvD,OAAOX,UAAU,CAACG,OAAO,CAAC;AAC9B,CAAC","ignoreList":[]}

package/generateInitialLexicalValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description Basic JSON data string that will initialize the editor.
+ */
+export declare const generateInitialLexicalValue: () => string;

package/generateInitialLexicalValue.js

@@ -0,0 +1,27 @@
+const defaultLexicalValue = JSON.stringify({
+  root: {
+    children: [{
+      children: [],
+      direction: null,
+      format: "",
+      indent: 0,
+      styles: [],
+      type: "wby-paragraph",
+      version: 1
+    }],
+    direction: null,
+    format: "",
+    indent: 0,
+    type: "root",
+    version: 1
+  }
+});
+
+/**
+ * @description Basic JSON data string that will initialize the editor.
+ */
+export const generateInitialLexicalValue = () => {
+  return defaultLexicalValue;
+};
+
+//# sourceMappingURL=generateInitialLexicalValue.js.map

package/generateInitialLexicalValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defaultLexicalValue","JSON","stringify","root","children","direction","format","indent","styles","type","version","generateInitialLexicalValue"],"sources":["generateInitialLexicalValue.ts"],"sourcesContent":["const defaultLexicalValue = JSON.stringify({\n    root: {\n        children: [\n            {\n                children: [],\n                direction: null,\n                format: \"\",\n                indent: 0,\n                styles: [],\n                type: \"wby-paragraph\",\n                version: 1\n            }\n        ],\n        direction: null,\n        format: \"\",\n        indent: 0,\n        type: \"root\",\n        version: 1\n    }\n});\n\n/**\n * @description Basic JSON data string that will initialize the editor.\n */\nexport const generateInitialLexicalValue = (): string => {\n    return defaultLexicalValue;\n};\n"],"mappings":"AAAA,MAAMA,mBAAmB,GAAGC,IAAI,CAACC,SAAS,CAAC;EACvCC,IAAI,EAAE;IACFC,QAAQ,EAAE,CACN;MACIA,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,IAAI;MACfC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE,eAAe;MACrBC,OAAO,EAAE;IACb,CAAC,CACJ;IACDL,SAAS,EAAE,IAAI;IACfC,MAAM,EAAE,EAAE;IACVC,MAAM,EAAE,CAAC;IACTE,IAAI,EAAE,MAAM;IACZC,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;;AAEF;AACA;AACA;AACA,OAAO,MAAMC,2BAA2B,GAAGA,CAAA,KAAc;EACrD,OAAOX,mBAAmB;AAC9B,CAAC","ignoreList":[]}

package/index.d.ts

@@ -0,0 +1,19 @@
+import { type Klass, type LexicalNode, type LexicalNodeReplacement } from "lexical";
+export * from "./FontColorNode";
+export * from "./ListNode";
+export * from "./ListItemNode";
+export * from "./HeadingNode";
+export * from "./ParagraphNode";
+export * from "./QuoteNode";
+export * from "./ImageNode";
+export * from "./LinkNode";
+export * from "./utils/formatList";
+export * from "./utils/listNode";
+export * from "./utils/formatToQuote";
+export * from "./utils/formatToHeading";
+export * from "./utils/formatToParagraph";
+export * from "./utils/clearNodeFormating";
+export * from "./utils/toggleLink";
+export * from "./prepareLexicalState";
+export * from "./generateInitialLexicalValue";
+export declare const allNodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>;

package/index.js

@@ -0,0 +1,51 @@
+import { ParagraphNode as BaseParagraphNode } from "lexical";
+import { HeadingNode as BaseHeadingNode, QuoteNode as BaseQuoteNode } from "@lexical/rich-text";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { HashtagNode } from "@lexical/hashtag";
+import { MarkNode } from "@lexical/mark";
+import { OverflowNode } from "@lexical/overflow";
+import { AutoLinkNode, LinkNode } from "./LinkNode";
+import { FontColorNode } from "./FontColorNode";
+import { ListNode } from "./ListNode";
+import { ListItemNode } from "./ListItemNode";
+import { HeadingNode } from "./HeadingNode";
+import { ParagraphNode } from "./ParagraphNode";
+import { QuoteNode } from "./QuoteNode";
+import { ImageNode } from "./ImageNode";
+export * from "./FontColorNode";
+export * from "./ListNode";
+export * from "./ListItemNode";
+export * from "./HeadingNode";
+export * from "./ParagraphNode";
+export * from "./QuoteNode";
+export * from "./ImageNode";
+export * from "./LinkNode";
+export * from "./utils/formatList";
+export * from "./utils/listNode";
+export * from "./utils/formatToQuote";
+export * from "./utils/formatToHeading";
+export * from "./utils/formatToParagraph";
+export * from "./utils/clearNodeFormating";
+export * from "./utils/toggleLink";
+export * from "./prepareLexicalState";
+export * from "./generateInitialLexicalValue";
+
+// This is a list of all the nodes that our Lexical implementation supports OOTB.
+export const allNodes = [ParagraphNode, {
+  replace: BaseParagraphNode,
+  with: () => {
+    return new ParagraphNode();
+  }
+}, HeadingNode, {
+  replace: BaseHeadingNode,
+  with: node => {
+    return new HeadingNode(node.getTag());
+  }
+}, QuoteNode, {
+  replace: BaseQuoteNode,
+  with: () => {
+    return new QuoteNode();
+  }
+}, ImageNode, ListNode, ListItemNode, CodeNode, HashtagNode, CodeHighlightNode, AutoLinkNode, OverflowNode, MarkNode, FontColorNode, QuoteNode, LinkNode];
+
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ParagraphNode","BaseParagraphNode","HeadingNode","BaseHeadingNode","QuoteNode","BaseQuoteNode","CodeHighlightNode","CodeNode","HashtagNode","MarkNode","OverflowNode","AutoLinkNode","LinkNode","FontColorNode","ListNode","ListItemNode","ImageNode","allNodes","replace","with","node","getTag"],"sources":["index.ts"],"sourcesContent":["import {\n    type Klass,\n    type LexicalNode,\n    type LexicalNodeReplacement,\n    ParagraphNode as BaseParagraphNode\n} from \"lexical\";\nimport { HeadingNode as BaseHeadingNode, QuoteNode as BaseQuoteNode } from \"@lexical/rich-text\";\nimport { CodeHighlightNode, CodeNode } from \"@lexical/code\";\nimport { HashtagNode } from \"@lexical/hashtag\";\nimport { MarkNode } from \"@lexical/mark\";\nimport { OverflowNode } from \"@lexical/overflow\";\n\nimport { AutoLinkNode, LinkNode } from \"./LinkNode\";\nimport { FontColorNode } from \"./FontColorNode\";\nimport { ListNode } from \"./ListNode\";\nimport { ListItemNode } from \"./ListItemNode\";\nimport { HeadingNode } from \"./HeadingNode\";\nimport { ParagraphNode } from \"./ParagraphNode\";\nimport { QuoteNode } from \"./QuoteNode\";\nimport { ImageNode } from \"./ImageNode\";\n\nexport * from \"./FontColorNode\";\nexport * from \"./ListNode\";\nexport * from \"./ListItemNode\";\nexport * from \"./HeadingNode\";\nexport * from \"./ParagraphNode\";\nexport * from \"./QuoteNode\";\nexport * from \"./ImageNode\";\nexport * from \"./LinkNode\";\n\nexport * from \"./utils/formatList\";\nexport * from \"./utils/listNode\";\nexport * from \"./utils/formatToQuote\";\nexport * from \"./utils/formatToHeading\";\nexport * from \"./utils/formatToParagraph\";\nexport * from \"./utils/clearNodeFormating\";\nexport * from \"./utils/toggleLink\";\nexport * from \"./prepareLexicalState\";\nexport * from \"./generateInitialLexicalValue\";\n\n// This is a list of all the nodes that our Lexical implementation supports OOTB.\nexport const allNodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement> = [\n    ParagraphNode,\n    {\n        replace: BaseParagraphNode,\n        with: () => {\n            return new ParagraphNode();\n        }\n    },\n    HeadingNode,\n    {\n        replace: BaseHeadingNode,\n        with: (node: BaseHeadingNode) => {\n            return new HeadingNode(node.getTag());\n        }\n    },\n    QuoteNode,\n    {\n        replace: BaseQuoteNode,\n        with: () => {\n            return new QuoteNode();\n        }\n    },\n    ImageNode,\n    ListNode,\n    ListItemNode,\n    CodeNode,\n    HashtagNode,\n    CodeHighlightNode,\n    AutoLinkNode,\n    OverflowNode,\n    MarkNode,\n    FontColorNode,\n    QuoteNode,\n    LinkNode\n];\n"],"mappings":"AAAA,SAIIA,aAAa,IAAIC,iBAAiB,QAC/B,SAAS;AAChB,SAASC,WAAW,IAAIC,eAAe,EAAEC,SAAS,IAAIC,aAAa,QAAQ,oBAAoB;AAC/F,SAASC,iBAAiB,EAAEC,QAAQ,QAAQ,eAAe;AAC3D,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,YAAY,QAAQ,mBAAmB;AAEhD,SAASC,YAAY,EAAEC,QAAQ;AAC/B,SAASC,aAAa;AACtB,SAASC,QAAQ;AACjB,SAASC,YAAY;AACrB,SAASb,WAAW;AACpB,SAASF,aAAa;AACtB,SAASI,SAAS;AAClB,SAASY,SAAS;AAElB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,QAAoE,GAAG,CAChFjB,aAAa,EACb;EACIkB,OAAO,EAAEjB,iBAAiB;EAC1BkB,IAAI,EAAEA,CAAA,KAAM;IACR,OAAO,IAAInB,aAAa,CAAC,CAAC;EAC9B;AACJ,CAAC,EACDE,WAAW,EACX;EACIgB,OAAO,EAAEf,eAAe;EACxBgB,IAAI,EAAGC,IAAqB,IAAK;IAC7B,OAAO,IAAIlB,WAAW,CAACkB,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC;EACzC;AACJ,CAAC,EACDjB,SAAS,EACT;EACIc,OAAO,EAAEb,aAAa;EACtBc,IAAI,EAAEA,CAAA,KAAM;IACR,OAAO,IAAIf,SAAS,CAAC,CAAC;EAC1B;AACJ,CAAC,EACDY,SAAS,EACTF,QAAQ,EACRC,YAAY,EACZR,QAAQ,EACRC,WAAW,EACXF,iBAAiB,EACjBK,YAAY,EACZD,YAAY,EACZD,QAAQ,EACRI,aAAa,EACbT,SAAS,EACTQ,QAAQ,CACX","ignoreList":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@webiny/lexical-nodes",
+	"version": "0.0.0-unstable.06b2ede40f",
+	"dependencies": {
+		"@lexical/code": "0.23.1",
+		"@lexical/hashtag": "0.23.1",
+		"@lexical/history": "0.23.1",
+		"@lexical/list": "0.23.1",
+		"@lexical/mark": "0.23.1",
+		"@lexical/overflow": "0.23.1",
+		"@lexical/react": "0.23.1",
+		"@lexical/rich-text": "0.23.1",
+		"@lexical/selection": "0.23.1",
+		"@lexical/utils": "0.23.1",
+		"@types/prismjs": "1.26.4",
+		"@webiny/lexical-theme": "0.0.0-unstable.06b2ede40f",
+		"lexical": "0.23.1"
+	},
+	"devDependencies": {
+		"@webiny/project-utils": "0.0.0-unstable.06b2ede40f",
+		"react": "18.2.0"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "node ../cli/bin.js run build",
+		"watch": "node ../cli/bin.js run watch"
+	},
+	"adio": {
+		"ignore": {
+			"dependencies": [
+				"@types/prismjs"
+			]
+		}
+	},
+	"gitHead": "06b2ede40fc2212a70eeafd74afd50b56fb0ce82"
+}

package/prepareLexicalState.d.ts

@@ -0,0 +1,2 @@
+import type { SerializedEditorState } from "lexical";
+export declare const prepareLexicalState: (value: string | SerializedEditorState | null | undefined) => string;

package/prepareLexicalState.js

@@ -0,0 +1,53 @@
+import { generateInitialLexicalValue } from "./generateInitialLexicalValue";
+
+/**
+ * Remap various node types to their latest form.
+ */
+const nodeTypeMap = {
+  "webiny-list": "wby-list",
+  list: "wby-list",
+  "webiny-listitem": "wby-list-item",
+  "list-item": "wby-list-item",
+  "font-color-node": "wby-font-color",
+  "font-color": "wby-font-color",
+  "heading-element": "wby-heading",
+  heading: "wby-heading",
+  "paragraph-element": "wby-paragraph",
+  paragraph: "wby-paragraph",
+  "webiny-quote": "wby-quote",
+  quote: "wby-quote",
+  image: "wby-image",
+  link: "wby-link"
+};
+
+// Migrate old node types
+function deepReplaceType(node) {
+  if (nodeTypeMap.hasOwnProperty(node.type)) {
+    node.type = nodeTypeMap[node.type];
+  }
+  if (node.children) {
+    node.children.forEach(deepReplaceType);
+  }
+}
+export const prepareLexicalState = value => {
+  if (!value) {
+    return generateInitialLexicalValue();
+  }
+  if (typeof value === "string") {
+    try {
+      const stateAsObject = JSON.parse(value);
+      deepReplaceType(stateAsObject.root);
+      return JSON.stringify(stateAsObject);
+    } catch {
+      return generateInitialLexicalValue();
+    }
+  }
+  try {
+    deepReplaceType(value.root);
+    return JSON.stringify(value);
+  } catch (e) {
+    return generateInitialLexicalValue();
+  }
+};
+
+//# sourceMappingURL=prepareLexicalState.js.map

package/prepareLexicalState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateInitialLexicalValue","nodeTypeMap","list","heading","paragraph","quote","image","link","deepReplaceType","node","hasOwnProperty","type","children","forEach","prepareLexicalState","value","stateAsObject","JSON","parse","root","stringify","e"],"sources":["prepareLexicalState.ts"],"sourcesContent":["import type { SerializedEditorState } from \"lexical\";\nimport { generateInitialLexicalValue } from \"./generateInitialLexicalValue\";\n\n/**\n * Remap various node types to their latest form.\n */\nconst nodeTypeMap: Record<string, string> = {\n    \"webiny-list\": \"wby-list\",\n    list: \"wby-list\",\n    \"webiny-listitem\": \"wby-list-item\",\n    \"list-item\": \"wby-list-item\",\n    \"font-color-node\": \"wby-font-color\",\n    \"font-color\": \"wby-font-color\",\n    \"heading-element\": \"wby-heading\",\n    heading: \"wby-heading\",\n    \"paragraph-element\": \"wby-paragraph\",\n    paragraph: \"wby-paragraph\",\n    \"webiny-quote\": \"wby-quote\",\n    quote: \"wby-quote\",\n    image: \"wby-image\",\n    link: \"wby-link\"\n};\n\n// Migrate old node types\nfunction deepReplaceType(node: any): void {\n    if (nodeTypeMap.hasOwnProperty(node.type)) {\n        node.type = nodeTypeMap[node.type];\n    }\n\n    if (node.children) {\n        node.children.forEach(deepReplaceType);\n    }\n}\n\nexport const prepareLexicalState = (\n    value: string | SerializedEditorState | null | undefined\n): string => {\n    if (!value) {\n        return generateInitialLexicalValue();\n    }\n\n    if (typeof value === \"string\") {\n        try {\n            const stateAsObject = JSON.parse(value) as SerializedEditorState;\n            deepReplaceType(stateAsObject.root);\n            return JSON.stringify(stateAsObject);\n        } catch {\n            return generateInitialLexicalValue();\n        }\n    }\n\n    try {\n        deepReplaceType(value.root);\n        return JSON.stringify(value);\n    } catch (e) {\n        return generateInitialLexicalValue();\n    }\n};\n"],"mappings":"AACA,SAASA,2BAA2B;;AAEpC;AACA;AACA;AACA,MAAMC,WAAmC,GAAG;EACxC,aAAa,EAAE,UAAU;EACzBC,IAAI,EAAE,UAAU;EAChB,iBAAiB,EAAE,eAAe;EAClC,WAAW,EAAE,eAAe;EAC5B,iBAAiB,EAAE,gBAAgB;EACnC,YAAY,EAAE,gBAAgB;EAC9B,iBAAiB,EAAE,aAAa;EAChCC,OAAO,EAAE,aAAa;EACtB,mBAAmB,EAAE,eAAe;EACpCC,SAAS,EAAE,eAAe;EAC1B,cAAc,EAAE,WAAW;EAC3BC,KAAK,EAAE,WAAW;EAClBC,KAAK,EAAE,WAAW;EAClBC,IAAI,EAAE;AACV,CAAC;;AAED;AACA,SAASC,eAAeA,CAACC,IAAS,EAAQ;EACtC,IAAIR,WAAW,CAACS,cAAc,CAACD,IAAI,CAACE,IAAI,CAAC,EAAE;IACvCF,IAAI,CAACE,IAAI,GAAGV,WAAW,CAACQ,IAAI,CAACE,IAAI,CAAC;EACtC;EAEA,IAAIF,IAAI,CAACG,QAAQ,EAAE;IACfH,IAAI,CAACG,QAAQ,CAACC,OAAO,CAACL,eAAe,CAAC;EAC1C;AACJ;AAEA,OAAO,MAAMM,mBAAmB,GAC5BC,KAAwD,IAC/C;EACT,IAAI,CAACA,KAAK,EAAE;IACR,OAAOf,2BAA2B,CAAC,CAAC;EACxC;EAEA,IAAI,OAAOe,KAAK,KAAK,QAAQ,EAAE;IAC3B,IAAI;MACA,MAAMC,aAAa,GAAGC,IAAI,CAACC,KAAK,CAACH,KAAK,CAA0B;MAChEP,eAAe,CAACQ,aAAa,CAACG,IAAI,CAAC;MACnC,OAAOF,IAAI,CAACG,SAAS,CAACJ,aAAa,CAAC;IACxC,CAAC,CAAC,MAAM;MACJ,OAAOhB,2BAA2B,CAAC,CAAC;IACxC;EACJ;EAEA,IAAI;IACAQ,eAAe,CAACO,KAAK,CAACI,IAAI,CAAC;IAC3B,OAAOF,IAAI,CAACG,SAAS,CAACL,KAAK,CAAC;EAChC,CAAC,CAAC,OAAOM,CAAC,EAAE;IACR,OAAOrB,2BAA2B,CAAC,CAAC;EACxC;AACJ,CAAC","ignoreList":[]}

package/types.d.ts

@@ -0,0 +1,11 @@
+export type ThemeStyleType = "typography" | "colors" | "fonts";
+export interface ThemeStyleValue {
+    styleId: string;
+    type: ThemeStyleType;
+}
+export interface TypographyStylesNode {
+    getStyleId: () => string | undefined;
+    setStyleId: (id: string) => void;
+    getClassName: () => string | undefined;
+    setClassName: (className: string) => void;
+}

package/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type ThemeStyleType = \"typography\" | \"colors\" | \"fonts\";\n\nexport interface ThemeStyleValue {\n    styleId: string;\n    type: ThemeStyleType;\n}\n\nexport interface TypographyStylesNode {\n    getStyleId: () => string | undefined;\n    setStyleId: (id: string) => void;\n    getClassName: () => string | undefined;\n    setClassName: (className: string) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/utils/clearNodeFormating.d.ts

@@ -0,0 +1,2 @@
+import type { LexicalEditor, RangeSelection } from "lexical";
+export declare const clearNodeFormatting: (activeEditor: LexicalEditor, selection: RangeSelection | null) => void;

package/utils/clearNodeFormating.js

@@ -0,0 +1,23 @@
+import { $isRangeSelection, $isTextNode } from "lexical";
+import { $selectAll } from "@lexical/selection";
+import { $getNearestBlockElementAncestorOrThrow } from "@lexical/utils";
+import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
+export const clearNodeFormatting = (activeEditor, selection) => {
+  activeEditor.update(() => {
+    if ($isRangeSelection(selection)) {
+      $selectAll(selection);
+      selection.getNodes().forEach(node => {
+        if ($isTextNode(node)) {
+          node.setFormat(0);
+          node.setStyle("");
+          $getNearestBlockElementAncestorOrThrow(node).setFormat("");
+        }
+        if ($isDecoratorBlockNode(node)) {
+          node.setFormat("");
+        }
+      });
+    }
+  });
+};
+
+//# sourceMappingURL=clearNodeFormating.js.map