@webiny/lexical-editor 6.0.0-alpha.5 → 6.0.0-rc.0

package/plugins/ImagesPlugin/ImagesPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","mergeRegister","$createRangeSelection","$getSelection","$isNodeSelection","$setSelection","COMMAND_PRIORITY_EDITOR","COMMAND_PRIORITY_HIGH","COMMAND_PRIORITY_LOW","DRAGOVER_COMMAND","DRAGSTART_COMMAND","DROP_COMMAND","$isImageNode","ImageNode","INSERT_IMAGE_COMMAND","CAN_USE_DOM","insertImage","useRichTextEditor","getDOMSelection","targetWindow","window","getSelection","ImagesPlugin","captionsEnabled","editor","hasNodes","Error","registerCommand","payload","event","onDragStart","onDragover","onDrop","getDragImage","document","undefined","TRANSPARENT_IMAGE","img","createElement","src","node","getImageNodeInSelection","dataTransfer","dragImage","setData","setDragImage","JSON","stringify","data","id","__id","altText","__altText","caption","__caption","height","__height","key","getKey","maxWidth","__maxWidth","showCaption","__showCaption","__src","width","__width","type","canDropImage","preventDefault","getDragImageData","range","getDragSelection","remove","rangeSelection","applyDOMRange","dispatchCommand","selection","nodes","getNodes","dragData","getData","parse","target","HTMLElement","closest","parentElement","nodeType","defaultView","ownerDocument","domSelection","caretRangeFromPoint","clientX","clientY","rangeParent","collapse","rangeOffset","getRangeAt"],"sources":["ImagesPlugin.tsx"],"sourcesContent":["\"use client\";\n/**\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 */\nimport { useEffect } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport type { LexicalEditor } from \"lexical\";\nimport {\n    $createRangeSelection,\n    $getSelection,\n    $isNodeSelection,\n    $setSelection,\n    COMMAND_PRIORITY_EDITOR,\n    COMMAND_PRIORITY_HIGH,\n    COMMAND_PRIORITY_LOW,\n    DRAGOVER_COMMAND,\n    DRAGSTART_COMMAND,\n    DROP_COMMAND\n} from \"lexical\";\nimport { $isImageNode, ImageNode } from \"@webiny/lexical-nodes\";\nimport type { ImagePayload } from \"~/commands\";\nimport { INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { CAN_USE_DOM } from \"~/utils/canUseDOM\";\nimport { insertImage } from \"~/utils/insertImage\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport type InsertImagePayload = Readonly<ImagePayload>;\n\nconst getDOMSelection = (targetWindow: Window | null): Selection | null =>\n    CAN_USE_DOM ? (targetWindow || window).getSelection() : null;\n\nexport function ImagesPlugin({\n    captionsEnabled\n}: {\n    captionsEnabled?: boolean;\n}): JSX.Element | null {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([ImageNode])) {\n            throw new Error(\"ImagesPlugin: ImageNode not registered in the editor!\");\n        }\n\n        return mergeRegister(\n            editor.registerCommand<InsertImagePayload>(\n                INSERT_IMAGE_COMMAND,\n                payload => insertImage(payload),\n                COMMAND_PRIORITY_EDITOR\n            ),\n            editor.registerCommand<DragEvent>(\n                DRAGSTART_COMMAND,\n                event => {\n                    return onDragStart(event);\n                },\n                COMMAND_PRIORITY_HIGH\n            ),\n            editor.registerCommand<DragEvent>(\n                DRAGOVER_COMMAND,\n                event => {\n                    return onDragover(event);\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand<DragEvent>(\n                DROP_COMMAND,\n                event => {\n                    return onDrop(event, editor);\n                },\n                COMMAND_PRIORITY_HIGH\n            )\n        );\n    }, [captionsEnabled, editor]);\n\n    return null;\n}\n\nfunction getDragImage() {\n    if (!document) {\n        return undefined;\n    }\n\n    const TRANSPARENT_IMAGE =\n        \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\";\n    const img = document.createElement(\"img\");\n    img.src = TRANSPARENT_IMAGE;\n    return img;\n}\n\nfunction onDragStart(event: DragEvent): boolean {\n    const node = getImageNodeInSelection();\n    if (!node) {\n        return false;\n    }\n    const dataTransfer = event.dataTransfer;\n    const dragImage = getDragImage();\n    if (!dataTransfer || !dragImage) {\n        return false;\n    }\n    dataTransfer.setData(\"text/plain\", \"_\");\n    dataTransfer.setDragImage(dragImage, 0, 0);\n    dataTransfer.setData(\n        \"application/x-lexical-drag\",\n        JSON.stringify({\n            data: {\n                id: node.__id,\n                altText: node.__altText,\n                caption: node.__caption,\n                height: node.__height,\n                key: node.getKey(),\n                maxWidth: node.__maxWidth,\n                showCaption: node.__showCaption,\n                src: node.__src,\n                width: node.__width\n            },\n            type: \"image\"\n        })\n    );\n\n    return true;\n}\n\nfunction onDragover(event: DragEvent): boolean {\n    const node = getImageNodeInSelection();\n    if (!node) {\n        return false;\n    }\n    if (!canDropImage(event)) {\n        event.preventDefault();\n    }\n    return true;\n}\n\nfunction onDrop(event: DragEvent, editor: LexicalEditor): boolean {\n    const node = getImageNodeInSelection();\n    if (!node) {\n        return false;\n    }\n    const data = getDragImageData(event);\n    if (!data) {\n        return false;\n    }\n    event.preventDefault();\n    if (canDropImage(event)) {\n        const range = getDragSelection(event);\n        node.remove();\n        const rangeSelection = $createRangeSelection();\n        if (range !== null && range !== undefined) {\n            rangeSelection.applyDOMRange(range);\n        }\n        $setSelection(rangeSelection);\n        editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);\n    }\n    return true;\n}\n\nfunction getImageNodeInSelection(): ImageNode | null {\n    const selection = $getSelection();\n    if (!$isNodeSelection(selection)) {\n        return null;\n    }\n    const nodes = selection.getNodes();\n    const node = nodes[0];\n    return $isImageNode(node) ? node : null;\n}\n\nfunction getDragImageData(event: DragEvent): null | InsertImagePayload {\n    const dragData = event.dataTransfer?.getData(\"application/x-lexical-drag\");\n    if (!dragData) {\n        return null;\n    }\n    const { type, data } = JSON.parse(dragData);\n    if (type !== \"image\") {\n        return null;\n    }\n\n    return data;\n}\n\ndeclare global {\n    interface DragEvent {\n        rangeOffset?: number;\n        rangeParent?: Node;\n    }\n}\n\nfunction canDropImage(event: DragEvent): boolean {\n    const target = event.target;\n    return !!(\n        target &&\n        target instanceof HTMLElement &&\n        !target.closest(\"code, span.editor-image\") &&\n        target.parentElement &&\n        target.parentElement.closest(\"div.ContentEditable__root\")\n    );\n}\n\nfunction getDragSelection(event: DragEvent): Range | null | undefined {\n    let range;\n    const target = event.target as null | Element | Document;\n    const targetWindow =\n        target == null\n            ? null\n            : target.nodeType === 9\n            ? (target as Document).defaultView\n            : (target as Element).ownerDocument.defaultView;\n    const domSelection = getDOMSelection(targetWindow);\n    if (document.caretRangeFromPoint) {\n        range = document.caretRangeFromPoint(event.clientX, event.clientY);\n    } else if (event.rangeParent && domSelection !== null) {\n        domSelection.collapse(event.rangeParent, event.rangeOffset || 0);\n        range = domSelection.getRangeAt(0);\n    } else {\n        throw Error(`Cannot get the selection when dragging`);\n    }\n\n    return range;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","$createRangeSelection","$getSelection","$isNodeSelection","$setSelection","mergeRegister","COMMAND_PRIORITY_EDITOR","COMMAND_PRIORITY_HIGH","COMMAND_PRIORITY_LOW","DRAGOVER_COMMAND","DRAGSTART_COMMAND","DROP_COMMAND","$isImageNode","ImageNode","INSERT_IMAGE_COMMAND","CAN_USE_DOM","insertImage","useRichTextEditor","getDOMSelection","targetWindow","window","getSelection","ImagesPlugin","captionsEnabled","editor","hasNodes","Error","registerCommand","payload","event","onDragStart","onDragover","onDrop","getDragImage","document","undefined","TRANSPARENT_IMAGE","img","createElement","src","node","getImageNodeInSelection","dataTransfer","dragImage","setData","setDragImage","JSON","stringify","data","id","__id","altText","__altText","height","__height","key","getKey","maxWidth","__maxWidth","__src","width","__width","type","canDropImage","preventDefault","getDragImageData","range","getDragSelection","remove","rangeSelection","applyDOMRange","dispatchCommand","selection","nodes","getNodes","dragData","getData","parse","target","HTMLElement","closest","parentElement","nodeType","defaultView","ownerDocument","domSelection","caretRangeFromPoint","clientX","clientY","rangeParent","collapse","rangeOffset","getRangeAt"],"sources":["ImagesPlugin.tsx"],"sourcesContent":["\"use client\";\n/**\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 */\nimport { useEffect } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport {\n    $createRangeSelection,\n    $getSelection,\n    $isNodeSelection,\n    $setSelection,\n    mergeRegister,\n    COMMAND_PRIORITY_EDITOR,\n    COMMAND_PRIORITY_HIGH,\n    COMMAND_PRIORITY_LOW,\n    DRAGOVER_COMMAND,\n    DRAGSTART_COMMAND,\n    DROP_COMMAND\n} from \"lexical\";\nimport { $isImageNode, ImageNode } from \"@webiny/lexical-nodes\";\nimport type { ImagePayload } from \"~/commands/index.js\";\nimport { INSERT_IMAGE_COMMAND } from \"~/commands/index.js\";\nimport { CAN_USE_DOM } from \"~/utils/canUseDOM.js\";\nimport { insertImage } from \"~/utils/insertImage.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport type InsertImagePayload = Readonly<ImagePayload>;\n\nconst getDOMSelection = (targetWindow: Window | null): Selection | null =>\n    CAN_USE_DOM ? (targetWindow || window).getSelection() : null;\n\nexport function ImagesPlugin({\n    captionsEnabled\n}: {\n    captionsEnabled?: boolean;\n}): JSX.Element | null {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([ImageNode])) {\n            throw new Error(\"ImagesPlugin: ImageNode not registered in the editor!\");\n        }\n\n        return mergeRegister(\n            editor.registerCommand<InsertImagePayload>(\n                INSERT_IMAGE_COMMAND,\n                payload => insertImage(payload),\n                COMMAND_PRIORITY_EDITOR\n            ),\n            editor.registerCommand<DragEvent>(\n                DRAGSTART_COMMAND,\n                event => {\n                    return onDragStart(event);\n                },\n                COMMAND_PRIORITY_HIGH\n            ),\n            editor.registerCommand<DragEvent>(\n                DRAGOVER_COMMAND,\n                event => {\n                    return onDragover(event);\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand<DragEvent>(\n                DROP_COMMAND,\n                event => {\n                    return onDrop(event, editor);\n                },\n                COMMAND_PRIORITY_HIGH\n            )\n        );\n    }, [captionsEnabled, editor]);\n\n    return null;\n}\n\nfunction getDragImage() {\n    if (!document) {\n        return undefined;\n    }\n\n    const TRANSPARENT_IMAGE =\n        \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\";\n    const img = document.createElement(\"img\");\n    img.src = TRANSPARENT_IMAGE;\n    return img;\n}\n\nfunction onDragStart(event: DragEvent): boolean {\n    const node = getImageNodeInSelection();\n    if (!node) {\n        return false;\n    }\n    const dataTransfer = event.dataTransfer;\n    const dragImage = getDragImage();\n    if (!dataTransfer || !dragImage) {\n        return false;\n    }\n    dataTransfer.setData(\"text/plain\", \"_\");\n    dataTransfer.setDragImage(dragImage, 0, 0);\n    dataTransfer.setData(\n        \"application/x-lexical-drag\",\n        JSON.stringify({\n            data: {\n                id: node.__id,\n                altText: node.__altText,\n                height: node.__height,\n                key: node.getKey(),\n                maxWidth: node.__maxWidth,\n                src: node.__src,\n                width: node.__width\n            },\n            type: \"image\"\n        })\n    );\n\n    return true;\n}\n\nfunction onDragover(event: DragEvent): boolean {\n    const node = getImageNodeInSelection();\n    if (!node) {\n        return false;\n    }\n    if (!canDropImage(event)) {\n        event.preventDefault();\n    }\n    return true;\n}\n\nfunction onDrop(event: DragEvent, editor: LexicalEditor): boolean {\n    const node = getImageNodeInSelection();\n    if (!node) {\n        return false;\n    }\n    const data = getDragImageData(event);\n    if (!data) {\n        return false;\n    }\n    event.preventDefault();\n    if (canDropImage(event)) {\n        const range = getDragSelection(event);\n        node.remove();\n        const rangeSelection = $createRangeSelection();\n        if (range !== null && range !== undefined) {\n            rangeSelection.applyDOMRange(range);\n        }\n        $setSelection(rangeSelection);\n        editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);\n    }\n    return true;\n}\n\nfunction getImageNodeInSelection(): ImageNode | null {\n    const selection = $getSelection();\n    if (!$isNodeSelection(selection)) {\n        return null;\n    }\n    const nodes = selection.getNodes();\n    const node = nodes[0];\n    return $isImageNode(node) ? node : null;\n}\n\nfunction getDragImageData(event: DragEvent): null | InsertImagePayload {\n    const dragData = event.dataTransfer?.getData(\"application/x-lexical-drag\");\n    if (!dragData) {\n        return null;\n    }\n    const { type, data } = JSON.parse(dragData);\n    if (type !== \"image\") {\n        return null;\n    }\n\n    return data;\n}\n\ndeclare global {\n    interface DragEvent {\n        rangeOffset?: number;\n        rangeParent?: Node;\n    }\n}\n\nfunction canDropImage(event: DragEvent): boolean {\n    const target = event.target;\n    return !!(\n        target &&\n        target instanceof HTMLElement &&\n        !target.closest(\"code, span.editor-image\") &&\n        target.parentElement &&\n        target.parentElement.closest(\"div.ContentEditable__root\")\n    );\n}\n\nfunction getDragSelection(event: DragEvent): Range | null | undefined {\n    let range;\n    const target = event.target as null | Element | Document;\n    const targetWindow =\n        target == null\n            ? null\n            : target.nodeType === 9\n              ? (target as Document).defaultView\n              : (target as Element).ownerDocument.defaultView;\n    const domSelection = getDOMSelection(targetWindow);\n    if (document.caretRangeFromPoint) {\n        range = document.caretRangeFromPoint(event.clientX, event.clientY);\n    } else if (event.rangeParent && domSelection !== null) {\n        domSelection.collapse(event.rangeParent, event.rangeOffset || 0);\n        range = domSelection.getRangeAt(0);\n    } else {\n        throw Error(`Cannot get the selection when dragging`);\n    }\n\n    return range;\n}\n"],"mappings":"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","ignoreList":[]}

package/plugins/LinkPlugin/LinkPlugin.js

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
-import { mergeRegister } from "@lexical/utils";
-import { $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND } from "lexical";
+import { $getSelection, $isElementNode, $isRangeSelection, mergeRegister, COMMAND_PRIORITY_LOW, PASTE_COMMAND } from "lexical";
 import { LinkNode, TOGGLE_LINK_COMMAND, toggleLink } from "@webiny/lexical-nodes";
-import { useRichTextEditor } from "../../hooks";
+import { useRichTextEditor } from "../../hooks/index.js";
 export function LinkPlugin({
   validateUrl
 }) {

package/plugins/LinkPlugin/LinkPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","mergeRegister","$getSelection","$isElementNode","$isRangeSelection","COMMAND_PRIORITY_LOW","PASTE_COMMAND","LinkNode","TOGGLE_LINK_COMMAND","toggleLink","useRichTextEditor","LinkPlugin","validateUrl","editor","hasNodes","Error","commands","registerCommand","payload","undefined","url","attrs","push","event","selection","isCollapsed","ClipboardEvent","clipboardData","clipboardText","getData","getNodes","some","node","dispatchCommand","preventDefault"],"sources":["LinkPlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isElementNode,\n    $isRangeSelection,\n    COMMAND_PRIORITY_LOW,\n    PASTE_COMMAND\n} from \"lexical\";\nimport { LinkNode, TOGGLE_LINK_COMMAND, toggleLink } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks\";\n\ntype Props = {\n    validateUrl?: (url: string) => boolean;\n};\n\nexport function LinkPlugin({ validateUrl }: Props): null {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([LinkNode])) {\n            throw new Error(\"LinkPlugin: LinkNode not registered in the editor!\");\n        }\n\n        const commands = [\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    if (payload === null) {\n                        toggleLink(payload);\n                        return true;\n                    } else if (typeof payload === \"string\") {\n                        if (validateUrl === undefined || validateUrl(payload)) {\n                            toggleLink(payload);\n                            return true;\n                        }\n                        return false;\n                    } else {\n                        const { url, ...attrs } = payload;\n                        toggleLink(url, attrs);\n                        return true;\n                    }\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        ];\n\n        if (validateUrl !== undefined) {\n            commands.push(\n                editor.registerCommand(\n                    PASTE_COMMAND,\n                    event => {\n                        const selection = $getSelection();\n                        if (\n                            !$isRangeSelection(selection) ||\n                            selection.isCollapsed() ||\n                            !(event instanceof ClipboardEvent) ||\n                            event.clipboardData == null\n                        ) {\n                            return false;\n                        }\n                        const clipboardText = event.clipboardData.getData(\"text\");\n                        if (!validateUrl(clipboardText)) {\n                            return false;\n                        }\n                        // If we select nodes that are elements then avoid applying the link.\n                        if (!selection.getNodes().some(node => $isElementNode(node))) {\n                            editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);\n                            event.preventDefault();\n                            return true;\n                        }\n                        return false;\n                    },\n                    COMMAND_PRIORITY_LOW\n                )\n            );\n        }\n\n        return mergeRegister(...commands);\n    }, [editor, validateUrl]);\n\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SACIC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,oBAAoB,EACpBC,aAAa,QACV,SAAS;AAChB,SAASC,QAAQ,EAAEC,mBAAmB,EAAEC,UAAU,QAAQ,uBAAuB;AACjF,SAASC,iBAAiB;AAM1B,OAAO,SAASC,UAAUA,CAAC;EAAEC;AAAmB,CAAC,EAAQ;EACrD,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCV,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,MAAM,CAACC,QAAQ,CAAC,CAACP,QAAQ,CAAC,CAAC,EAAE;MAC9B,MAAM,IAAIQ,KAAK,CAAC,oDAAoD,CAAC;IACzE;IAEA,MAAMC,QAAQ,GAAG,CACbH,MAAM,CAACI,eAAe,CAClBT,mBAAmB,EACnBU,OAAO,IAAI;MACP,IAAIA,OAAO,KAAK,IAAI,EAAE;QAClBT,UAAU,CAACS,OAAO,CAAC;QACnB,OAAO,IAAI;MACf,CAAC,MAAM,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;QACpC,IAAIN,WAAW,KAAKO,SAAS,IAAIP,WAAW,CAACM,OAAO,CAAC,EAAE;UACnDT,UAAU,CAACS,OAAO,CAAC;UACnB,OAAO,IAAI;QACf;QACA,OAAO,KAAK;MAChB,CAAC,MAAM;QACH,MAAM;UAAEE,GAAG;UAAE,GAAGC;QAAM,CAAC,GAAGH,OAAO;QACjCT,UAAU,CAACW,GAAG,EAAEC,KAAK,CAAC;QACtB,OAAO,IAAI;MACf;IACJ,CAAC,EACDhB,oBACJ,CAAC,CACJ;IAED,IAAIO,WAAW,KAAKO,SAAS,EAAE;MAC3BH,QAAQ,CAACM,IAAI,CACTT,MAAM,CAACI,eAAe,CAClBX,aAAa,EACbiB,KAAK,IAAI;QACL,MAAMC,SAAS,GAAGtB,aAAa,CAAC,CAAC;QACjC,IACI,CAACE,iBAAiB,CAACoB,SAAS,CAAC,IAC7BA,SAAS,CAACC,WAAW,CAAC,CAAC,IACvB,EAAEF,KAAK,YAAYG,cAAc,CAAC,IAClCH,KAAK,CAACI,aAAa,IAAI,IAAI,EAC7B;UACE,OAAO,KAAK;QAChB;QACA,MAAMC,aAAa,GAAGL,KAAK,CAACI,aAAa,CAACE,OAAO,CAAC,MAAM,CAAC;QACzD,IAAI,CAACjB,WAAW,CAACgB,aAAa,CAAC,EAAE;UAC7B,OAAO,KAAK;QAChB;QACA;QACA,IAAI,CAACJ,SAAS,CAACM,QAAQ,CAAC,CAAC,CAACC,IAAI,CAACC,IAAI,IAAI7B,cAAc,CAAC6B,IAAI,CAAC,CAAC,EAAE;UAC1DnB,MAAM,CAACoB,eAAe,CAACzB,mBAAmB,EAAEoB,aAAa,CAAC;UAC1DL,KAAK,CAACW,cAAc,CAAC,CAAC;UACtB,OAAO,IAAI;QACf;QACA,OAAO,KAAK;MAChB,CAAC,EACD7B,oBACJ,CACJ,CAAC;IACL;IAEA,OAAOJ,aAAa,CAAC,GAAGe,QAAQ,CAAC;EACrC,CAAC,EAAE,CAACH,MAAM,EAAED,WAAW,CAAC,CAAC;EAEzB,OAAO,IAAI;AACf","ignoreList":[]}
+{"version":3,"names":["useEffect","$getSelection","$isElementNode","$isRangeSelection","mergeRegister","COMMAND_PRIORITY_LOW","PASTE_COMMAND","LinkNode","TOGGLE_LINK_COMMAND","toggleLink","useRichTextEditor","LinkPlugin","validateUrl","editor","hasNodes","Error","commands","registerCommand","payload","undefined","url","attrs","push","event","selection","isCollapsed","ClipboardEvent","clipboardData","clipboardText","getData","getNodes","some","node","dispatchCommand","preventDefault"],"sources":["LinkPlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport {\n    $getSelection,\n    $isElementNode,\n    $isRangeSelection,\n    mergeRegister,\n    COMMAND_PRIORITY_LOW,\n    PASTE_COMMAND\n} from \"lexical\";\nimport { LinkNode, TOGGLE_LINK_COMMAND, toggleLink } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\ntype Props = {\n    validateUrl?: (url: string) => boolean;\n};\n\nexport function LinkPlugin({ validateUrl }: Props): null {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([LinkNode])) {\n            throw new Error(\"LinkPlugin: LinkNode not registered in the editor!\");\n        }\n\n        const commands = [\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    if (payload === null) {\n                        toggleLink(payload);\n                        return true;\n                    } else if (typeof payload === \"string\") {\n                        if (validateUrl === undefined || validateUrl(payload)) {\n                            toggleLink(payload);\n                            return true;\n                        }\n                        return false;\n                    } else {\n                        const { url, ...attrs } = payload;\n                        toggleLink(url, attrs);\n                        return true;\n                    }\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        ];\n\n        if (validateUrl !== undefined) {\n            commands.push(\n                editor.registerCommand(\n                    PASTE_COMMAND,\n                    event => {\n                        const selection = $getSelection();\n                        if (\n                            !$isRangeSelection(selection) ||\n                            selection.isCollapsed() ||\n                            !(event instanceof ClipboardEvent) ||\n                            event.clipboardData == null\n                        ) {\n                            return false;\n                        }\n                        const clipboardText = event.clipboardData.getData(\"text\");\n                        if (!validateUrl(clipboardText)) {\n                            return false;\n                        }\n                        // If we select nodes that are elements then avoid applying the link.\n                        if (!selection.getNodes().some(node => $isElementNode(node))) {\n                            editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);\n                            event.preventDefault();\n                            return true;\n                        }\n                        return false;\n                    },\n                    COMMAND_PRIORITY_LOW\n                )\n            );\n        }\n\n        return mergeRegister(...commands);\n    }, [editor, validateUrl]);\n\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SACIC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,aAAa,EACbC,oBAAoB,EACpBC,aAAa,QACV,SAAS;AAChB,SAASC,QAAQ,EAAEC,mBAAmB,EAAEC,UAAU,QAAQ,uBAAuB;AACjF,SAASC,iBAAiB;AAM1B,OAAO,SAASC,UAAUA,CAAC;EAAEC;AAAmB,CAAC,EAAQ;EACrD,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCV,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,MAAM,CAACC,QAAQ,CAAC,CAACP,QAAQ,CAAC,CAAC,EAAE;MAC9B,MAAM,IAAIQ,KAAK,CAAC,oDAAoD,CAAC;IACzE;IAEA,MAAMC,QAAQ,GAAG,CACbH,MAAM,CAACI,eAAe,CAClBT,mBAAmB,EACnBU,OAAO,IAAI;MACP,IAAIA,OAAO,KAAK,IAAI,EAAE;QAClBT,UAAU,CAACS,OAAO,CAAC;QACnB,OAAO,IAAI;MACf,CAAC,MAAM,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;QACpC,IAAIN,WAAW,KAAKO,SAAS,IAAIP,WAAW,CAACM,OAAO,CAAC,EAAE;UACnDT,UAAU,CAACS,OAAO,CAAC;UACnB,OAAO,IAAI;QACf;QACA,OAAO,KAAK;MAChB,CAAC,MAAM;QACH,MAAM;UAAEE,GAAG;UAAE,GAAGC;QAAM,CAAC,GAAGH,OAAO;QACjCT,UAAU,CAACW,GAAG,EAAEC,KAAK,CAAC;QACtB,OAAO,IAAI;MACf;IACJ,CAAC,EACDhB,oBACJ,CAAC,CACJ;IAED,IAAIO,WAAW,KAAKO,SAAS,EAAE;MAC3BH,QAAQ,CAACM,IAAI,CACTT,MAAM,CAACI,eAAe,CAClBX,aAAa,EACbiB,KAAK,IAAI;QACL,MAAMC,SAAS,GAAGvB,aAAa,CAAC,CAAC;QACjC,IACI,CAACE,iBAAiB,CAACqB,SAAS,CAAC,IAC7BA,SAAS,CAACC,WAAW,CAAC,CAAC,IACvB,EAAEF,KAAK,YAAYG,cAAc,CAAC,IAClCH,KAAK,CAACI,aAAa,IAAI,IAAI,EAC7B;UACE,OAAO,KAAK;QAChB;QACA,MAAMC,aAAa,GAAGL,KAAK,CAACI,aAAa,CAACE,OAAO,CAAC,MAAM,CAAC;QACzD,IAAI,CAACjB,WAAW,CAACgB,aAAa,CAAC,EAAE;UAC7B,OAAO,KAAK;QAChB;QACA;QACA,IAAI,CAACJ,SAAS,CAACM,QAAQ,CAAC,CAAC,CAACC,IAAI,CAACC,IAAI,IAAI9B,cAAc,CAAC8B,IAAI,CAAC,CAAC,EAAE;UAC1DnB,MAAM,CAACoB,eAAe,CAACzB,mBAAmB,EAAEoB,aAAa,CAAC;UAC1DL,KAAK,CAACW,cAAc,CAAC,CAAC;UACtB,OAAO,IAAI;QACf;QACA,OAAO,KAAK;MAChB,CAAC,EACD7B,oBACJ,CACJ,CAAC;IACL;IAEA,OAAOD,aAAa,CAAC,GAAGY,QAAQ,CAAC;EACrC,CAAC,EAAE,CAACH,MAAM,EAAED,WAAW,CAAC,CAAC;EAEzB,OAAO,IAAI;AACf","ignoreList":[]}

package/plugins/ListPLugin/ListPlugin.js

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
-import { ListNode, ListItemNode } from "@webiny/lexical-nodes";
-import { useList, useRichTextEditor } from "../../hooks";
+import { $getSelection, $isRangeSelection, mergeRegister, COMMAND_PRIORITY_LOW, INDENT_CONTENT_COMMAND, INSERT_PARAGRAPH_COMMAND, KEY_BACKSPACE_COMMAND, OUTDENT_CONTENT_COMMAND } from "lexical";
+import { $handleListInsertParagraph, indentList, insertList, outdentList, removeList, $isListNode, ListNode, ListItemNode } from "@webiny/lexical-nodes";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands/index.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+import { getNodeFromSelection } from "../../hooks/useCurrentElement.js";
 export function ListPlugin() {
   const {
     editor
@@ -10,7 +13,46 @@ export function ListPlugin() {
       throw new Error("ListPlugin: ListNode and/or ListItemNode not registered in the editor!");
     }
   }, [editor]);
-  useList(editor);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(INDENT_CONTENT_COMMAND, () => {
+      indentList();
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(OUTDENT_CONTENT_COMMAND, () => {
+      outdentList();
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_ORDERED_LIST_COMMAND, ({
+      themeStyleId
+    }) => {
+      insertList(editor, "number", themeStyleId);
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_UNORDERED_LIST_COMMAND, ({
+      themeStyleId
+    }) => {
+      insertList(editor, "bullet", themeStyleId);
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, event => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const node = getNodeFromSelection(selection);
+        if (!$isListNode(node)) {
+          return false;
+        }
+
+        // Check if list have one list item remain, without text.
+        if (node.getChildren().length === 1 && !node.getTextContent()) {
+          event.preventDefault();
+          removeList(editor);
+          return true;
+        }
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(REMOVE_LIST_COMMAND, () => {
+      removeList(editor);
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
+      return $handleListInsertParagraph();
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor]);
   return null;
 }
 

package/plugins/ListPLugin/ListPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","ListNode","ListItemNode","useList","useRichTextEditor","ListPlugin","editor","hasNodes","Error"],"sources":["ListPlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { ListNode, ListItemNode } from \"@webiny/lexical-nodes\";\nimport { useList, useRichTextEditor } from \"~/hooks\";\n\nexport function ListPlugin(): null {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([ListNode, ListItemNode])) {\n            throw new Error(\n                \"ListPlugin: ListNode and/or ListItemNode not registered in the editor!\"\n            );\n        }\n    }, [editor]);\n\n    useList(editor);\n\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,uBAAuB;AAC9D,SAASC,OAAO,EAAEC,iBAAiB;AAEnC,OAAO,SAASC,UAAUA,CAAA,EAAS;EAC/B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EAEtCJ,SAAS,CAAC,MAAM;IACZ,IAAI,CAACM,MAAM,CAACC,QAAQ,CAAC,CAACN,QAAQ,EAAEC,YAAY,CAAC,CAAC,EAAE;MAC5C,MAAM,IAAIM,KAAK,CACX,wEACJ,CAAC;IACL;EACJ,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;EAEZH,OAAO,CAACG,MAAM,CAAC;EAEf,OAAO,IAAI;AACf","ignoreList":[]}
+{"version":3,"names":["useEffect","$getSelection","$isRangeSelection","mergeRegister","COMMAND_PRIORITY_LOW","INDENT_CONTENT_COMMAND","INSERT_PARAGRAPH_COMMAND","KEY_BACKSPACE_COMMAND","OUTDENT_CONTENT_COMMAND","$handleListInsertParagraph","indentList","insertList","outdentList","removeList","$isListNode","ListNode","ListItemNode","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","getNodeFromSelection","ListPlugin","editor","hasNodes","Error","registerCommand","themeStyleId","event","selection","node","getChildren","length","getTextContent","preventDefault"],"sources":["ListPlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    mergeRegister,\n    COMMAND_PRIORITY_LOW,\n    INDENT_CONTENT_COMMAND,\n    INSERT_PARAGRAPH_COMMAND,\n    KEY_BACKSPACE_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport {\n    $handleListInsertParagraph,\n    indentList,\n    insertList,\n    outdentList,\n    removeList,\n    $isListNode,\n    ListNode,\n    ListItemNode\n} from \"@webiny/lexical-nodes\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    REMOVE_LIST_COMMAND\n} from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement.js\";\n\nexport function ListPlugin(): null {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([ListNode, ListItemNode])) {\n            throw new Error(\n                \"ListPlugin: ListNode and/or ListItemNode not registered in the editor!\"\n            );\n        }\n    }, [editor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                INDENT_CONTENT_COMMAND,\n                () => {\n                    indentList();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                OUTDENT_CONTENT_COMMAND,\n                () => {\n                    outdentList();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                INSERT_ORDERED_LIST_COMMAND,\n                ({ themeStyleId }) => {\n                    insertList(editor, \"number\", themeStyleId);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                INSERT_UNORDERED_LIST_COMMAND,\n                ({ themeStyleId }) => {\n                    insertList(editor, \"bullet\", themeStyleId);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                KEY_BACKSPACE_COMMAND,\n                (event: KeyboardEvent) => {\n                    const selection = $getSelection();\n                    if ($isRangeSelection(selection)) {\n                        const node = getNodeFromSelection(selection);\n                        if (!$isListNode(node)) {\n                            return false;\n                        }\n\n                        // Check if list have one list item remain, without text.\n                        if (node.getChildren().length === 1 && !node.getTextContent()) {\n                            event.preventDefault();\n                            removeList(editor);\n                            return true;\n                        }\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                REMOVE_LIST_COMMAND,\n                () => {\n                    removeList(editor);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                INSERT_PARAGRAPH_COMMAND,\n                () => {\n                    return $handleListInsertParagraph();\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor]);\n\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SACIC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,oBAAoB,EACpBC,sBAAsB,EACtBC,wBAAwB,EACxBC,qBAAqB,EACrBC,uBAAuB,QACpB,SAAS;AAChB,SACIC,0BAA0B,EAC1BC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,YAAY,QACT,uBAAuB;AAC9B,SACIC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,mBAAmB;AAEvB,SAASC,iBAAiB;AAC1B,SAASC,oBAAoB;AAE7B,OAAO,SAASC,UAAUA,CAAA,EAAS;EAC/B,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCpB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACuB,MAAM,CAACC,QAAQ,CAAC,CAACT,QAAQ,EAAEC,YAAY,CAAC,CAAC,EAAE;MAC5C,MAAM,IAAIS,KAAK,CACX,wEACJ,CAAC;IACL;EACJ,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;EAEZvB,SAAS,CAAC,MAAM;IACZ,OAAOG,aAAa,CAChBoB,MAAM,CAACG,eAAe,CAClBrB,sBAAsB,EACtB,MAAM;MACFK,UAAU,CAAC,CAAC;MACZ,OAAO,KAAK;IAChB,CAAC,EACDN,oBACJ,CAAC,EACDmB,MAAM,CAACG,eAAe,CAClBlB,uBAAuB,EACvB,MAAM;MACFI,WAAW,CAAC,CAAC;MACb,OAAO,KAAK;IAChB,CAAC,EACDR,oBACJ,CAAC,EACDmB,MAAM,CAACG,eAAe,CAClBT,2BAA2B,EAC3B,CAAC;MAAEU;IAAa,CAAC,KAAK;MAClBhB,UAAU,CAACY,MAAM,EAAE,QAAQ,EAAEI,YAAY,CAAC;MAC1C,OAAO,IAAI;IACf,CAAC,EACDvB,oBACJ,CAAC,EACDmB,MAAM,CAACG,eAAe,CAClBR,6BAA6B,EAC7B,CAAC;MAAES;IAAa,CAAC,KAAK;MAClBhB,UAAU,CAACY,MAAM,EAAE,QAAQ,EAAEI,YAAY,CAAC;MAC1C,OAAO,IAAI;IACf,CAAC,EACDvB,oBACJ,CAAC,EACDmB,MAAM,CAACG,eAAe,CAClBnB,qBAAqB,EACpBqB,KAAoB,IAAK;MACtB,MAAMC,SAAS,GAAG5B,aAAa,CAAC,CAAC;MACjC,IAAIC,iBAAiB,CAAC2B,SAAS,CAAC,EAAE;QAC9B,MAAMC,IAAI,GAAGT,oBAAoB,CAACQ,SAAS,CAAC;QAC5C,IAAI,CAACf,WAAW,CAACgB,IAAI,CAAC,EAAE;UACpB,OAAO,KAAK;QAChB;;QAEA;QACA,IAAIA,IAAI,CAACC,WAAW,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC,IAAI,CAACF,IAAI,CAACG,cAAc,CAAC,CAAC,EAAE;UAC3DL,KAAK,CAACM,cAAc,CAAC,CAAC;UACtBrB,UAAU,CAACU,MAAM,CAAC;UAClB,OAAO,IAAI;QACf;MACJ;MACA,OAAO,KAAK;IAChB,CAAC,EACDnB,oBACJ,CAAC,EACDmB,MAAM,CAACG,eAAe,CAClBP,mBAAmB,EACnB,MAAM;MACFN,UAAU,CAACU,MAAM,CAAC;MAClB,OAAO,IAAI;IACf,CAAC,EACDnB,oBACJ,CAAC,EACDmB,MAAM,CAACG,eAAe,CAClBpB,wBAAwB,EACxB,MAAM;MACF,OAAOG,0BAA0B,CAAC,CAAC;IACvC,CAAC,EACDL,oBACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACmB,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf","ignoreList":[]}

package/plugins/QuoteNodePlugin/QuoteNodePlugin.js

@@ -1,17 +1,25 @@
 import { useEffect } from "react";
-import { QuoteNode } from "@webiny/lexical-nodes";
-import { useQuote } from "../../hooks/useQuote";
-import { useRichTextEditor } from "../../hooks";
+import { formatToQuote, QuoteNode } from "@webiny/lexical-nodes";
+import { COMMAND_PRIORITY_LOW, mergeRegister } from "lexical";
+import { useRichTextEditor } from "../../hooks/index.js";
+import { INSERT_QUOTE_COMMAND } from "../../commands/index.js";
 export function QuotePlugin() {
   const {
     editor
   } = useRichTextEditor();
-  useQuote(editor);
   useEffect(() => {
     if (!editor.hasNodes([QuoteNode])) {
       throw new Error("QuoteNodePlugin: QuoteNode is not registered in the editor!");
     }
   }, [editor]);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(INSERT_QUOTE_COMMAND, ({
+      themeStyleId
+    }) => {
+      formatToQuote(editor, themeStyleId);
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor]);
   return null;
 }
 

package/plugins/QuoteNodePlugin/QuoteNodePlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","QuoteNode","useQuote","useRichTextEditor","QuotePlugin","editor","hasNodes","Error"],"sources":["QuoteNodePlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { QuoteNode } from \"@webiny/lexical-nodes\";\nimport { useQuote } from \"~/hooks/useQuote\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport function QuotePlugin() {\n    const { editor } = useRichTextEditor();\n    useQuote(editor);\n\n    useEffect(() => {\n        if (!editor.hasNodes([QuoteNode])) {\n            throw new Error(\"QuoteNodePlugin: QuoteNode is not registered in the editor!\");\n        }\n    }, [editor]);\n\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,QAAQ;AACjB,SAASC,iBAAiB;AAE1B,OAAO,SAASC,WAAWA,CAAA,EAAG;EAC1B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtCD,QAAQ,CAACG,MAAM,CAAC;EAEhBL,SAAS,CAAC,MAAM;IACZ,IAAI,CAACK,MAAM,CAACC,QAAQ,CAAC,CAACL,SAAS,CAAC,CAAC,EAAE;MAC/B,MAAM,IAAIM,KAAK,CAAC,6DAA6D,CAAC;IAClF;EACJ,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf","ignoreList":[]}
+{"version":3,"names":["useEffect","formatToQuote","QuoteNode","COMMAND_PRIORITY_LOW","mergeRegister","useRichTextEditor","INSERT_QUOTE_COMMAND","QuotePlugin","editor","hasNodes","Error","registerCommand","themeStyleId"],"sources":["QuoteNodePlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { formatToQuote, QuoteNode } from \"@webiny/lexical-nodes\";\nimport { COMMAND_PRIORITY_LOW, mergeRegister } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { INSERT_QUOTE_COMMAND } from \"~/commands/index.js\";\n\nexport function QuotePlugin() {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        if (!editor.hasNodes([QuoteNode])) {\n            throw new Error(\"QuoteNodePlugin: QuoteNode is not registered in the editor!\");\n        }\n    }, [editor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                INSERT_QUOTE_COMMAND,\n                ({ themeStyleId }) => {\n                    formatToQuote(editor, themeStyleId);\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor]);\n\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,EAAEC,SAAS,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,SAAS;AAC7D,SAASC,iBAAiB;AAC1B,SAASC,oBAAoB;AAE7B,OAAO,SAASC,WAAWA,CAAA,EAAG;EAC1B,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCL,SAAS,CAAC,MAAM;IACZ,IAAI,CAACQ,MAAM,CAACC,QAAQ,CAAC,CAACP,SAAS,CAAC,CAAC,EAAE;MAC/B,MAAM,IAAIQ,KAAK,CAAC,6DAA6D,CAAC;IAClF;EACJ,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;EAEZR,SAAS,CAAC,MAAM;IACZ,OAAOI,aAAa,CAChBI,MAAM,CAACG,eAAe,CAClBL,oBAAoB,EACpB,CAAC;MAAEM;IAAa,CAAC,KAAK;MAClBX,aAAa,CAACO,MAAM,EAAEI,YAAY,CAAC;MACnC,OAAO,KAAK;IAChB,CAAC,EACDT,oBACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACK,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf","ignoreList":[]}

package/plugins/StateHandlingPlugin.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LexicalValue } from "../types";
+import type { LexicalValue } from "../types.js";
 interface OnChangeProps {
     value: string | null | undefined;
     onChange?: (value: LexicalValue) => void;

package/plugins/StateHandlingPlugin.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useMemo } from "react";
-import debounce from "lodash/debounce";
+import debounce from "lodash/debounce.js";
 import { OnChangePlugin as BaseOnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { $isRootTextContentEmpty } from "@lexical/text";
 import { generateInitialLexicalValue, prepareLexicalState } from "@webiny/lexical-nodes";
-import { normalizeInputValue } from "../components/Editor/normalizeInputValue";
-import { useRichTextEditor } from "../hooks";
-import { parseLexicalState } from "../utils/isValidLexicalData";
+import { normalizeInputValue } from "../components/Editor/normalizeInputValue.js";
+import { useRichTextEditor } from "../hooks/index.js";
+import { parseLexicalState } from "../utils/isValidLexicalData.js";
 export const StateHandlingPlugin = props => {
   const {
     editor
@@ -20,10 +20,10 @@ export const StateHandlingPlugin = props => {
         if (typeof props.onChange === "function") {
           const editorState = editor.getEditorState();
           const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);
-          const newValue = JSON.stringify(editorState.toJSON());
           if (!value && isEditorEmpty) {
             return;
           }
+          const newValue = JSON.stringify(editorState.toJSON());
           if (newValue !== lastEmittedRef.current) {
             lastEmittedRef.current = newValue;
             lastOnChangeTimestampRef.current = Date.now();
@@ -49,7 +49,7 @@ export const StateHandlingPlugin = props => {
     }
     try {
       newState = editor.parseEditorState(parsedState || generateInitialLexicalValue());
-    } catch (err) {
+    } catch {
       // Ignore errors
     }
 

package/plugins/StateHandlingPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useMemo","debounce","OnChangePlugin","BaseOnChangePlugin","$isRootTextContentEmpty","generateInitialLexicalValue","prepareLexicalState","normalizeInputValue","useRichTextEditor","parseLexicalState","StateHandlingPlugin","props","editor","lastEmittedRef","lastOnChangeTimestampRef","value","editorInputValue","handleOnChange","editorState","read","onChange","getEditorState","isEditorEmpty","isComposing","newValue","JSON","stringify","toJSON","current","Date","now","parsedState","newState","currentSerialized","parseEditorState","err","state","queueMicrotask","setEditorState","e","console","error","createElement","ignoreSelectionChange"],"sources":["StateHandlingPlugin.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { OnChangePlugin as BaseOnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport type { EditorState, LexicalEditor } from \"lexical\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { generateInitialLexicalValue, prepareLexicalState } from \"@webiny/lexical-nodes\";\nimport { normalizeInputValue } from \"~/components/Editor/normalizeInputValue\";\nimport type { LexicalValue } from \"~/types\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { parseLexicalState } from \"~/utils/isValidLexicalData\";\n\ninterface OnChangeProps {\n    value: string | null | undefined;\n    onChange?: (value: LexicalValue) => void;\n}\n\nexport const StateHandlingPlugin = (props: OnChangeProps) => {\n    const { editor } = useRichTextEditor();\n    const lastEmittedRef = useRef(\"\");\n    const lastOnChangeTimestampRef = useRef(0);\n\n    const value = normalizeInputValue(props.value);\n    const editorInputValue = prepareLexicalState(value);\n\n    const handleOnChange = useMemo(() => {\n        return debounce((editorState: EditorState, editor: LexicalEditor) => {\n            editorState.read(() => {\n                if (typeof props.onChange === \"function\") {\n                    const editorState = editor.getEditorState();\n                    const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n                    const newValue = JSON.stringify(editorState.toJSON());\n\n                    if (!value && isEditorEmpty) {\n                        return;\n                    }\n\n                    if (newValue !== lastEmittedRef.current) {\n                        lastEmittedRef.current = newValue;\n                        lastOnChangeTimestampRef.current = Date.now();\n                        props.onChange(newValue);\n                    }\n                }\n            });\n        }, 300);\n    }, [props.onChange, editor]);\n\n    useEffect(() => {\n        if (!value || !editor || value === lastEmittedRef.current) {\n            return;\n        }\n\n        const now = Date.now();\n        if (now - lastOnChangeTimestampRef.current < 500) {\n            return;\n        }\n\n        const parsedState = parseLexicalState(editorInputValue);\n\n        let newState: EditorState | undefined;\n\n        const currentSerialized = JSON.stringify(editor.getEditorState().toJSON());\n\n        if (currentSerialized === editorInputValue) {\n            return;\n        }\n\n        try {\n            newState = editor.parseEditorState(parsedState || generateInitialLexicalValue());\n        } catch (err) {\n            // Ignore errors\n        }\n\n        // We must set the state outside the `editor.update()` callback to prevent freezing.\n        // https://lexical.dev/docs/api/classes/lexical.LexicalEditor#seteditorstate\n        if (newState) {\n            const state = newState;\n            queueMicrotask(() => {\n                try {\n                    editor.setEditorState(state);\n                } catch (e) {\n                    console.error(e);\n                }\n            });\n        }\n    }, [value, editor, editorInputValue]);\n\n    return <BaseOnChangePlugin onChange={handleOnChange} ignoreSelectionChange={true} />;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useMemo","debounce","OnChangePlugin","BaseOnChangePlugin","$isRootTextContentEmpty","generateInitialLexicalValue","prepareLexicalState","normalizeInputValue","useRichTextEditor","parseLexicalState","StateHandlingPlugin","props","editor","lastEmittedRef","lastOnChangeTimestampRef","value","editorInputValue","handleOnChange","editorState","read","onChange","getEditorState","isEditorEmpty","isComposing","newValue","JSON","stringify","toJSON","current","Date","now","parsedState","newState","currentSerialized","parseEditorState","state","queueMicrotask","setEditorState","e","console","error","createElement","ignoreSelectionChange"],"sources":["StateHandlingPlugin.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { OnChangePlugin as BaseOnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport type { EditorState, LexicalEditor } from \"lexical\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { generateInitialLexicalValue, prepareLexicalState } from \"@webiny/lexical-nodes\";\nimport { normalizeInputValue } from \"~/components/Editor/normalizeInputValue.js\";\nimport type { LexicalValue } from \"~/types.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { parseLexicalState } from \"~/utils/isValidLexicalData.js\";\n\ninterface OnChangeProps {\n    value: string | null | undefined;\n    onChange?: (value: LexicalValue) => void;\n}\n\nexport const StateHandlingPlugin = (props: OnChangeProps) => {\n    const { editor } = useRichTextEditor();\n    const lastEmittedRef = useRef(\"\");\n    const lastOnChangeTimestampRef = useRef(0);\n\n    const value = normalizeInputValue(props.value);\n    const editorInputValue = prepareLexicalState(value);\n\n    const handleOnChange = useMemo(() => {\n        return debounce((editorState: EditorState, editor: LexicalEditor) => {\n            editorState.read(() => {\n                if (typeof props.onChange === \"function\") {\n                    const editorState = editor.getEditorState();\n                    const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n\n                    if (!value && isEditorEmpty) {\n                        return;\n                    }\n\n                    const newValue = JSON.stringify(editorState.toJSON());\n\n                    if (newValue !== lastEmittedRef.current) {\n                        lastEmittedRef.current = newValue;\n                        lastOnChangeTimestampRef.current = Date.now();\n                        props.onChange(newValue);\n                    }\n                }\n            });\n        }, 300);\n    }, [props.onChange, editor]);\n\n    useEffect(() => {\n        if (!value || !editor || value === lastEmittedRef.current) {\n            return;\n        }\n\n        const now = Date.now();\n        if (now - lastOnChangeTimestampRef.current < 500) {\n            return;\n        }\n\n        const parsedState = parseLexicalState(editorInputValue);\n\n        let newState: EditorState | undefined;\n\n        const currentSerialized = JSON.stringify(editor.getEditorState().toJSON());\n\n        if (currentSerialized === editorInputValue) {\n            return;\n        }\n\n        try {\n            newState = editor.parseEditorState(parsedState || generateInitialLexicalValue());\n        } catch {\n            // Ignore errors\n        }\n\n        // We must set the state outside the `editor.update()` callback to prevent freezing.\n        // https://lexical.dev/docs/api/classes/lexical.LexicalEditor#seteditorstate\n        if (newState) {\n            const state = newState;\n            queueMicrotask(() => {\n                try {\n                    editor.setEditorState(state);\n                } catch (e) {\n                    console.error(e);\n                }\n            });\n        }\n    }, [value, editor, editorInputValue]);\n\n    return <BaseOnChangePlugin onChange={handleOnChange} ignoreSelectionChange={true} />;\n};\n"],"mappings":"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","ignoreList":[]}

package/plugins/TypographyPlugin/TypographyPlugin.js

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { formatToParagraph, formatToHeading } from "@webiny/lexical-nodes";
-import { useRichTextEditor } from "../../hooks";
-import { ADD_TYPOGRAPHY_COMMAND } from "../../commands";
+import { useRichTextEditor } from "../../hooks/index.js";
+import { ADD_TYPOGRAPHY_COMMAND } from "../../commands/index.js";
 export const TypographyPlugin = () => {
   const {
     editor

package/plugins/TypographyPlugin/TypographyPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","formatToParagraph","formatToHeading","useRichTextEditor","ADD_TYPOGRAPHY_COMMAND","TypographyPlugin","editor","registerCommand","payload","selection","value","id","tag","includes"],"sources":["TypographyPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from \"lexical\";\nimport { formatToParagraph, formatToHeading } from \"@webiny/lexical-nodes\";\nimport type { HeadingTagType } from \"@lexical/rich-text\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport type { TypographyPayload } from \"~/commands\";\nimport { ADD_TYPOGRAPHY_COMMAND } from \"~/commands\";\n\nexport const TypographyPlugin = () => {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        return editor.registerCommand<TypographyPayload>(\n            ADD_TYPOGRAPHY_COMMAND,\n            payload => {\n                const selection = $getSelection();\n                // paragraph\n                if ($isRangeSelection(selection) && payload.value.id && payload.value.tag === \"p\") {\n                    formatToParagraph(editor, payload.value.id);\n                }\n                // heading\n                if (\n                    $isRangeSelection(selection) &&\n                    payload.value.id &&\n                    payload.value.tag.includes(\"h\")\n                ) {\n                    formatToHeading(editor, payload.value.tag as HeadingTagType, payload.value.id);\n                }\n                return true;\n            },\n            COMMAND_PRIORITY_EDITOR\n        );\n    }, [editor]);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,QAAQ,SAAS;AACnF,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,uBAAuB;AAE1E,SAASC,iBAAiB;AAE1B,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCN,SAAS,CAAC,MAAM;IACZ,OAAOS,MAAM,CAACC,eAAe,CACzBH,sBAAsB,EACtBI,OAAO,IAAI;MACP,MAAMC,SAAS,GAAGX,aAAa,CAAC,CAAC;MACjC;MACA,IAAIC,iBAAiB,CAACU,SAAS,CAAC,IAAID,OAAO,CAACE,KAAK,CAACC,EAAE,IAAIH,OAAO,CAACE,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC/EX,iBAAiB,CAACK,MAAM,EAAEE,OAAO,CAACE,KAAK,CAACC,EAAE,CAAC;MAC/C;MACA;MACA,IACIZ,iBAAiB,CAACU,SAAS,CAAC,IAC5BD,OAAO,CAACE,KAAK,CAACC,EAAE,IAChBH,OAAO,CAACE,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EACjC;QACEX,eAAe,CAACI,MAAM,EAAEE,OAAO,CAACE,KAAK,CAACE,GAAG,EAAoBJ,OAAO,CAACE,KAAK,CAACC,EAAE,CAAC;MAClF;MACA,OAAO,IAAI;IACf,CAAC,EACDX,uBACJ,CAAC;EACL,CAAC,EAAE,CAACM,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","formatToParagraph","formatToHeading","useRichTextEditor","ADD_TYPOGRAPHY_COMMAND","TypographyPlugin","editor","registerCommand","payload","selection","value","id","tag","includes"],"sources":["TypographyPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from \"lexical\";\nimport { formatToParagraph, formatToHeading } from \"@webiny/lexical-nodes\";\nimport type { HeadingTagType } from \"@lexical/rich-text\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport type { TypographyPayload } from \"~/commands/index.js\";\nimport { ADD_TYPOGRAPHY_COMMAND } from \"~/commands/index.js\";\n\nexport const TypographyPlugin = () => {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        return editor.registerCommand<TypographyPayload>(\n            ADD_TYPOGRAPHY_COMMAND,\n            payload => {\n                const selection = $getSelection();\n                // paragraph\n                if ($isRangeSelection(selection) && payload.value.id && payload.value.tag === \"p\") {\n                    formatToParagraph(editor, payload.value.id);\n                }\n                // heading\n                if (\n                    $isRangeSelection(selection) &&\n                    payload.value.id &&\n                    payload.value.tag.includes(\"h\")\n                ) {\n                    formatToHeading(editor, payload.value.tag as HeadingTagType, payload.value.id);\n                }\n                return true;\n            },\n            COMMAND_PRIORITY_EDITOR\n        );\n    }, [editor]);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,QAAQ,SAAS;AACnF,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,uBAAuB;AAE1E,SAASC,iBAAiB;AAE1B,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCN,SAAS,CAAC,MAAM;IACZ,OAAOS,MAAM,CAACC,eAAe,CACzBH,sBAAsB,EACtBI,OAAO,IAAI;MACP,MAAMC,SAAS,GAAGX,aAAa,CAAC,CAAC;MACjC;MACA,IAAIC,iBAAiB,CAACU,SAAS,CAAC,IAAID,OAAO,CAACE,KAAK,CAACC,EAAE,IAAIH,OAAO,CAACE,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC/EX,iBAAiB,CAACK,MAAM,EAAEE,OAAO,CAACE,KAAK,CAACC,EAAE,CAAC;MAC/C;MACA;MACA,IACIZ,iBAAiB,CAACU,SAAS,CAAC,IAC5BD,OAAO,CAACE,KAAK,CAACC,EAAE,IAChBH,OAAO,CAACE,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EACjC;QACEX,eAAe,CAACI,MAAM,EAAEE,OAAO,CAACE,KAAK,CAACE,GAAG,EAAoBJ,OAAO,CAACE,KAAK,CAACC,EAAE,CAAC;MAClF;MACA,OAAO,IAAI;IACf,CAAC,EACDX,uBACJ,CAAC;EACL,CAAC,EAAE,CAACM,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/types.d.ts

@@ -1,12 +1,12 @@
 export type LexicalValue = string;
 export type NormalizedInputValue = LexicalValue | null;
-export { FontColorPicker } from "./components/ToolbarActions/FontColorAction";
+export { FontColorPicker } from "./components/ToolbarActions/FontColorAction.js";
 export type ImageActionType = "image-action";
 export type ToolbarActionType = ImageActionType | string;
 export interface ToolbarActionPlugin {
     targetAction: ToolbarActionType;
     plugin: Record<string, any> | ((cb: (value: any) => void) => any) | undefined;
 }
-export { type ImagePayload } from "./commands";
-export { type RichTextEditorProps } from "./components/Editor/RichTextEditor";
+export { type ImagePayload } from "./commands/index.js";
+export { type RichTextEditorProps } from "./components/Editor/RichTextEditor.js";
 export type { Klass, LexicalNode } from "lexical";

package/types.js

@@ -1,4 +1,4 @@
-export { FontColorPicker } from "./components/ToolbarActions/FontColorAction";
+export { FontColorPicker } from "./components/ToolbarActions/FontColorAction.js";
 
 /* Commands payload types */
 

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["FontColorPicker"],"sources":["types.ts"],"sourcesContent":["export type LexicalValue = string;\n\nexport type NormalizedInputValue = LexicalValue | null;\n\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction\";\n\nexport type ImageActionType = \"image-action\";\nexport type ToolbarActionType = ImageActionType | string;\nexport interface ToolbarActionPlugin {\n    targetAction: ToolbarActionType;\n    plugin: Record<string, any> | ((cb: (value: any) => void) => any) | undefined;\n}\n\n/* Commands payload types */\nexport { type ImagePayload } from \"~/commands\";\n\n/* Lexical editor interfaces */\nexport { type RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\n// lexical types\nexport type { Klass, LexicalNode } from \"lexical\";\n"],"mappings":"AAIA,SAASA,eAAe;;AASxB;;AAGA;;AAGA","ignoreList":[]}
+{"version":3,"names":["FontColorPicker"],"sources":["types.ts"],"sourcesContent":["export type LexicalValue = string;\n\nexport type NormalizedInputValue = LexicalValue | null;\n\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction.js\";\n\nexport type ImageActionType = \"image-action\";\nexport type ToolbarActionType = ImageActionType | string;\nexport interface ToolbarActionPlugin {\n    targetAction: ToolbarActionType;\n    plugin: Record<string, any> | ((cb: (value: any) => void) => any) | undefined;\n}\n\n/* Commands payload types */\nexport { type ImagePayload } from \"~/commands/index.js\";\n\n/* Lexical editor interfaces */\nexport { type RichTextEditorProps } from \"~/components/Editor/RichTextEditor.js\";\n\n// lexical types\nexport type { Klass, LexicalNode } from \"lexical\";\n"],"mappings":"AAIA,SAASA,eAAe;;AASxB;;AAGA;;AAGA","ignoreList":[]}

package/ui/ContentEditable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *

package/ui/Divider.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function Divider(): JSX.Element;

package/ui/DropDown.js

@@ -6,8 +6,8 @@
  *
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 const DropDownContext = /*#__PURE__*/React.createContext(null);
 export function DropDownItem({
   children,
@@ -24,9 +24,10 @@ export function DropDownItem({
     registerItem
   } = dropDownContext;
   useEffect(() => {
-    if (ref && ref.current) {
-      registerItem(ref);
+    if (!ref.current) {
+      return;
     }
+    registerItem(ref);
   }, [ref, registerItem]);
   return /*#__PURE__*/React.createElement("button", {
     className: className,

package/ui/DropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","React","DropDownContext","createContext","DropDownItem","children","className","onClick","title","ref","dropDownContext","useContext","Error","registerItem","current","createElement","type","DropDownItems","dropDownRef","showScroll","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","focus","Provider","value","onKeyDown","DropDown","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","buttonRef","positionIsCalculated","setPositionIsCalculated","showDropDown","setShowDropDown","handleClose","button","dropDown","style","top","left","offsetLeft","handle","target","contains","document","addEventListener","removeEventListener","displayContainer","display","Fragment","position"],"sources":["DropDown.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 { ReactNode } from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport * as React from \"react\";\n\ntype DropDownContextType = {\n    registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;\n};\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null);\n\nexport function DropDownItem({\n    children,\n    className,\n    onClick,\n    title\n}: {\n    children: React.ReactNode;\n    className: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n}) {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const dropDownContext = React.useContext(DropDownContext);\n\n    if (dropDownContext === null) {\n        throw new Error(\"DropDownItem must be used within a DropDown\");\n    }\n\n    const { registerItem } = dropDownContext;\n\n    useEffect(() => {\n        if (ref && ref.current) {\n            registerItem(ref);\n        }\n    }, [ref, registerItem]);\n\n    return (\n        <button className={className} onClick={onClick} ref={ref} title={title} type=\"button\">\n            {children}\n        </button>\n    );\n}\n\nfunction DropDownItems({\n    children,\n    dropDownRef,\n    showScroll = true,\n    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\n    showScroll?: boolean;\n    onClose: () => void;\n}) {\n    const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();\n    const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();\n\n    const registerItem = useCallback(\n        (itemRef: React.RefObject<HTMLButtonElement>) => {\n            setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));\n        },\n        [setItems]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!items) {\n            return;\n        }\n\n        const key = event.key;\n\n        if ([\"Escape\", \"ArrowUp\", \"ArrowDown\", \"Tab\"].includes(key)) {\n            event.preventDefault();\n        }\n\n        if (key === \"Escape\" || key === \"Tab\") {\n            onClose();\n        } else if (key === \"ArrowUp\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                const index = items.indexOf(prev) - 1;\n                return items[index === -1 ? items.length - 1 : index];\n            });\n        } else if (key === \"ArrowDown\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                return items[items.indexOf(prev) + 1];\n            });\n        }\n    };\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem\n        }),\n        [registerItem]\n    );\n\n    useEffect(() => {\n        if (items && !highlightedItem) {\n            setHighlightedItem(items[0]);\n        }\n\n        if (highlightedItem && highlightedItem.current) {\n            highlightedItem.current.focus();\n        }\n    }, [items, highlightedItem]);\n\n    return (\n        <DropDownContext.Provider value={contextValue}>\n            <div\n                className={`lexical-dropdown ${showScroll ? \"\" : \"no-scroll\"}`}\n                ref={dropDownRef}\n                onKeyDown={handleKeyDown}\n            >\n                {children}\n            </div>\n        </DropDownContext.Provider>\n    );\n}\n\nexport function DropDown({\n    disabled = false,\n    buttonLabel,\n    buttonAriaLabel,\n    buttonClassName,\n    buttonIconClassName,\n    children,\n    stopCloseOnClickSelf,\n    showScroll = true\n}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: boolean;\n    showScroll?: boolean;\n}): JSX.Element {\n    const dropDownRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    // Used to prevent flickering of the dropdown while calculating the dropdown position.\n    const [positionIsCalculated, setPositionIsCalculated] = useState(false);\n    const [showDropDown, setShowDropDown] = useState(false);\n\n    const handleClose = () => {\n        setPositionIsCalculated(false);\n        setShowDropDown(false);\n        if (buttonRef && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    };\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        const dropDown = dropDownRef.current;\n\n        if (showDropDown && button && dropDown) {\n            dropDown.style.top = \"44px\";\n            dropDown.style.left = `${button.offsetLeft}px`;\n            setPositionIsCalculated(true);\n        }\n    }, [dropDownRef, buttonRef, showDropDown]);\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        if (button && showDropDown) {\n            const handle = (event: MouseEvent) => {\n                const target = event.target;\n                if (stopCloseOnClickSelf) {\n                    if (dropDownRef.current && dropDownRef.current.contains(target as Node)) {\n                        return;\n                    }\n                }\n\n                if (!button.contains(target as Node)) {\n                    setShowDropDown(false);\n                }\n            };\n            document.addEventListener(\"click\", handle);\n            return () => {\n                document.removeEventListener(\"click\", handle);\n            };\n        }\n        return;\n    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);\n\n    const displayContainer = useMemo(() => {\n        // To prevent blinking, we show the container only when the dropdown position is calculated.\n        // Without this, window would be visible first on left (0px), and after a millisecond on the right side.\n        return positionIsCalculated ? { display: \"block\" } : { display: \"none\" };\n    }, [positionIsCalculated]);\n\n    return (\n        <>\n            <button\n                style={{ position: \"relative\" }}\n                disabled={disabled}\n                aria-label={buttonAriaLabel || buttonLabel}\n                className={buttonClassName}\n                onClick={() => setShowDropDown(!showDropDown)}\n                ref={buttonRef}\n            >\n                {buttonIconClassName && <span className={buttonIconClassName} />}\n                {buttonLabel && <span className=\"text dropdown-button-text\">{buttonLabel}</span>}\n                <i className=\"chevron-down\" />\n            </button>\n            {showDropDown && (\n                <div className={\"lexical-dropdown-container\"} style={displayContainer}>\n                    <DropDownItems\n                        showScroll={showScroll}\n                        dropDownRef={dropDownRef}\n                        onClose={handleClose}\n                    >\n                        {children}\n                    </DropDownItems>\n                </div>\n            )}\n        </>\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","DropDownContext","createContext","DropDownItem","children","className","onClick","title","ref","dropDownContext","useContext","Error","registerItem","current","createElement","type","DropDownItems","dropDownRef","showScroll","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","focus","Provider","value","onKeyDown","DropDown","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","buttonRef","positionIsCalculated","setPositionIsCalculated","showDropDown","setShowDropDown","handleClose","button","dropDown","style","top","left","offsetLeft","handle","target","contains","document","addEventListener","removeEventListener","displayContainer","display","Fragment","position"],"sources":["DropDown.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 { ReactNode, RefObject } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\ntype DropDownContextType = {\n    registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;\n};\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null);\n\nexport function DropDownItem({\n    children,\n    className,\n    onClick,\n    title\n}: {\n    children: React.ReactNode;\n    className: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n}) {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const dropDownContext = React.useContext(DropDownContext);\n\n    if (dropDownContext === null) {\n        throw new Error(\"DropDownItem must be used within a DropDown\");\n    }\n\n    const { registerItem } = dropDownContext;\n\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        registerItem(ref as RefObject<HTMLButtonElement>);\n    }, [ref, registerItem]);\n\n    return (\n        <button className={className} onClick={onClick} ref={ref} title={title} type=\"button\">\n            {children}\n        </button>\n    );\n}\n\nfunction DropDownItems({\n    children,\n    dropDownRef,\n    showScroll = true,\n    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\n    showScroll?: boolean;\n    onClose: () => void;\n}) {\n    const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();\n    const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();\n\n    const registerItem = useCallback(\n        (itemRef: React.RefObject<HTMLButtonElement>) => {\n            setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));\n        },\n        [setItems]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!items) {\n            return;\n        }\n\n        const key = event.key;\n\n        if ([\"Escape\", \"ArrowUp\", \"ArrowDown\", \"Tab\"].includes(key)) {\n            event.preventDefault();\n        }\n\n        if (key === \"Escape\" || key === \"Tab\") {\n            onClose();\n        } else if (key === \"ArrowUp\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                const index = items.indexOf(prev) - 1;\n                return items[index === -1 ? items.length - 1 : index];\n            });\n        } else if (key === \"ArrowDown\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                return items[items.indexOf(prev) + 1];\n            });\n        }\n    };\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem\n        }),\n        [registerItem]\n    );\n\n    useEffect(() => {\n        if (items && !highlightedItem) {\n            setHighlightedItem(items[0]);\n        }\n\n        if (highlightedItem && highlightedItem.current) {\n            highlightedItem.current.focus();\n        }\n    }, [items, highlightedItem]);\n\n    return (\n        <DropDownContext.Provider value={contextValue}>\n            <div\n                className={`lexical-dropdown ${showScroll ? \"\" : \"no-scroll\"}`}\n                ref={dropDownRef}\n                onKeyDown={handleKeyDown}\n            >\n                {children}\n            </div>\n        </DropDownContext.Provider>\n    );\n}\n\nexport function DropDown({\n    disabled = false,\n    buttonLabel,\n    buttonAriaLabel,\n    buttonClassName,\n    buttonIconClassName,\n    children,\n    stopCloseOnClickSelf,\n    showScroll = true\n}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: boolean;\n    showScroll?: boolean;\n}): JSX.Element {\n    const dropDownRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    // Used to prevent flickering of the dropdown while calculating the dropdown position.\n    const [positionIsCalculated, setPositionIsCalculated] = useState(false);\n    const [showDropDown, setShowDropDown] = useState(false);\n\n    const handleClose = () => {\n        setPositionIsCalculated(false);\n        setShowDropDown(false);\n        if (buttonRef && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    };\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        const dropDown = dropDownRef.current;\n\n        if (showDropDown && button && dropDown) {\n            dropDown.style.top = \"44px\";\n            dropDown.style.left = `${button.offsetLeft}px`;\n            setPositionIsCalculated(true);\n        }\n    }, [dropDownRef, buttonRef, showDropDown]);\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        if (button && showDropDown) {\n            const handle = (event: MouseEvent) => {\n                const target = event.target;\n                if (stopCloseOnClickSelf) {\n                    if (dropDownRef.current && dropDownRef.current.contains(target as Node)) {\n                        return;\n                    }\n                }\n\n                if (!button.contains(target as Node)) {\n                    setShowDropDown(false);\n                }\n            };\n            document.addEventListener(\"click\", handle);\n            return () => {\n                document.removeEventListener(\"click\", handle);\n            };\n        }\n        return;\n    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);\n\n    const displayContainer = useMemo(() => {\n        // To prevent blinking, we show the container only when the dropdown position is calculated.\n        // Without this, window would be visible first on left (0px), and after a millisecond on the right side.\n        return positionIsCalculated ? { display: \"block\" } : { display: \"none\" };\n    }, [positionIsCalculated]);\n\n    return (\n        <>\n            <button\n                style={{ position: \"relative\" }}\n                disabled={disabled}\n                aria-label={buttonAriaLabel || buttonLabel}\n                className={buttonClassName}\n                onClick={() => setShowDropDown(!showDropDown)}\n                ref={buttonRef}\n            >\n                {buttonIconClassName && <span className={buttonIconClassName} />}\n                {buttonLabel && <span className=\"text dropdown-button-text\">{buttonLabel}</span>}\n                <i className=\"chevron-down\" />\n            </button>\n            {showDropDown && (\n                <div className={\"lexical-dropdown-container\"} style={displayContainer}>\n                    <DropDownItems\n                        showScroll={showScroll}\n                        dropDownRef={dropDownRef}\n                        onClose={handleClose}\n                    >\n                        {children}\n                    </DropDownItems>\n                </div>\n            )}\n        </>\n    );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAMzE,MAAMC,eAAe,gBAAGN,KAAK,CAACO,aAAa,CAA6B,IAAI,CAAC;AAE7E,OAAO,SAASC,YAAYA,CAAC;EACzBC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC;AAMJ,CAAC,EAAE;EACC,MAAMC,GAAG,GAAGT,MAAM,CAAoB,IAAI,CAAC;EAE3C,MAAMU,eAAe,GAAGd,KAAK,CAACe,UAAU,CAACT,eAAe,CAAC;EAEzD,IAAIQ,eAAe,KAAK,IAAI,EAAE;IAC1B,MAAM,IAAIE,KAAK,CAAC,6CAA6C,CAAC;EAClE;EAEA,MAAM;IAAEC;EAAa,CAAC,GAAGH,eAAe;EAExCZ,SAAS,CAAC,MAAM;IACZ,IAAI,CAACW,GAAG,CAACK,OAAO,EAAE;MACd;IACJ;IAEAD,YAAY,CAACJ,GAAmC,CAAC;EACrD,CAAC,EAAE,CAACA,GAAG,EAAEI,YAAY,CAAC,CAAC;EAEvB,oBACIjB,KAAA,CAAAmB,aAAA;IAAQT,SAAS,EAAEA,SAAU;IAACC,OAAO,EAAEA,OAAQ;IAACE,GAAG,EAAEA,GAAI;IAACD,KAAK,EAAEA,KAAM;IAACQ,IAAI,EAAC;EAAQ,GAChFX,QACG,CAAC;AAEjB;AAEA,SAASY,aAAaA,CAAC;EACnBZ,QAAQ;EACRa,WAAW;EACXC,UAAU,GAAG,IAAI;EACjBC;AAMJ,CAAC,EAAE;EACC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGrB,QAAQ,CAAuC,CAAC;EAC1E,MAAM,CAACsB,eAAe,EAAEC,kBAAkB,CAAC,GAAGvB,QAAQ,CAAqC,CAAC;EAE5F,MAAMY,YAAY,GAAGhB,WAAW,CAC3B4B,OAA2C,IAAK;IAC7CH,QAAQ,CAACI,IAAI,IAAKA,IAAI,GAAG,CAAC,GAAGA,IAAI,EAAED,OAAO,CAAC,GAAG,CAACA,OAAO,CAAE,CAAC;EAC7D,CAAC,EACD,CAACH,QAAQ,CACb,CAAC;EAED,MAAMK,aAAa,GAAIC,KAA0C,IAAK;IAClE,IAAI,CAACP,KAAK,EAAE;MACR;IACJ;IAEA,MAAMQ,GAAG,GAAGD,KAAK,CAACC,GAAG;IAErB,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAACC,QAAQ,CAACD,GAAG,CAAC,EAAE;MACzDD,KAAK,CAACG,cAAc,CAAC,CAAC;IAC1B;IAEA,IAAIF,GAAG,KAAK,QAAQ,IAAIA,GAAG,KAAK,KAAK,EAAE;MACnCT,OAAO,CAAC,CAAC;IACb,CAAC,MAAM,IAAIS,GAAG,KAAK,SAAS,EAAE;MAC1BL,kBAAkB,CAACE,IAAI,IAAI;QACvB,IAAI,CAACA,IAAI,EAAE;UACP,OAAOL,KAAK,CAAC,CAAC,CAAC;QACnB;QACA,MAAMW,KAAK,GAAGX,KAAK,CAACY,OAAO,CAACP,IAAI,CAAC,GAAG,CAAC;QACrC,OAAOL,KAAK,CAACW,KAAK,KAAK,CAAC,CAAC,GAAGX,KAAK,CAACa,MAAM,GAAG,CAAC,GAAGF,KAAK,CAAC;MACzD,CAAC,CAAC;IACN,CAAC,MAAM,IAAIH,GAAG,KAAK,WAAW,EAAE;MAC5BL,kBAAkB,CAACE,IAAI,IAAI;QACvB,IAAI,CAACA,IAAI,EAAE;UACP,OAAOL,KAAK,CAAC,CAAC,CAAC;QACnB;QACA,OAAOA,KAAK,CAACA,KAAK,CAACY,OAAO,CAACP,IAAI,CAAC,GAAG,CAAC,CAAC;MACzC,CAAC,CAAC;IACN;EACJ,CAAC;EAED,MAAMS,YAAY,GAAGpC,OAAO,CACxB,OAAO;IACHc;EACJ,CAAC,CAAC,EACF,CAACA,YAAY,CACjB,CAAC;EAEDf,SAAS,CAAC,MAAM;IACZ,IAAIuB,KAAK,IAAI,CAACE,eAAe,EAAE;MAC3BC,kBAAkB,CAACH,KAAK,CAAC,CAAC,CAAC,CAAC;IAChC;IAEA,IAAIE,eAAe,IAAIA,eAAe,CAACT,OAAO,EAAE;MAC5CS,eAAe,CAACT,OAAO,CAACsB,KAAK,CAAC,CAAC;IACnC;EACJ,CAAC,EAAE,CAACf,KAAK,EAAEE,eAAe,CAAC,CAAC;EAE5B,oBACI3B,KAAA,CAAAmB,aAAA,CAACb,eAAe,CAACmC,QAAQ;IAACC,KAAK,EAAEH;EAAa,gBAC1CvC,KAAA,CAAAmB,aAAA;IACIT,SAAS,EAAE,oBAAoBa,UAAU,GAAG,EAAE,GAAG,WAAW,EAAG;IAC/DV,GAAG,EAAES,WAAY;IACjBqB,SAAS,EAAEZ;EAAc,GAExBtB,QACA,CACiB,CAAC;AAEnC;AAEA,OAAO,SAASmC,QAAQA,CAAC;EACrBC,QAAQ,GAAG,KAAK;EAChBC,WAAW;EACXC,eAAe;EACfC,eAAe;EACfC,mBAAmB;EACnBxC,QAAQ;EACRyC,oBAAoB;EACpB3B,UAAU,GAAG;AAUjB,CAAC,EAAe;EACZ,MAAMD,WAAW,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EAChD,MAAM+C,SAAS,GAAG/C,MAAM,CAAoB,IAAI,CAAC;EACjD;EACA,MAAM,CAACgD,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGhD,QAAQ,CAAC,KAAK,CAAC;EACvE,MAAM,CAACiD,YAAY,EAAEC,eAAe,CAAC,GAAGlD,QAAQ,CAAC,KAAK,CAAC;EAEvD,MAAMmD,WAAW,GAAGA,CAAA,KAAM;IACtBH,uBAAuB,CAAC,KAAK,CAAC;IAC9BE,eAAe,CAAC,KAAK,CAAC;IACtB,IAAIJ,SAAS,IAAIA,SAAS,CAACjC,OAAO,EAAE;MAChCiC,SAAS,CAACjC,OAAO,CAACsB,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC;EAEDtC,SAAS,CAAC,MAAM;IACZ,MAAMuD,MAAM,GAAGN,SAAS,CAACjC,OAAO;IAChC,MAAMwC,QAAQ,GAAGpC,WAAW,CAACJ,OAAO;IAEpC,IAAIoC,YAAY,IAAIG,MAAM,IAAIC,QAAQ,EAAE;MACpCA,QAAQ,CAACC,KAAK,CAACC,GAAG,GAAG,MAAM;MAC3BF,QAAQ,CAACC,KAAK,CAACE,IAAI,GAAG,GAAGJ,MAAM,CAACK,UAAU,IAAI;MAC9CT,uBAAuB,CAAC,IAAI,CAAC;IACjC;EACJ,CAAC,EAAE,CAAC/B,WAAW,EAAE6B,SAAS,EAAEG,YAAY,CAAC,CAAC;EAE1CpD,SAAS,CAAC,MAAM;IACZ,MAAMuD,MAAM,GAAGN,SAAS,CAACjC,OAAO;IAChC,IAAIuC,MAAM,IAAIH,YAAY,EAAE;MACxB,MAAMS,MAAM,GAAI/B,KAAiB,IAAK;QAClC,MAAMgC,MAAM,GAAGhC,KAAK,CAACgC,MAAM;QAC3B,IAAId,oBAAoB,EAAE;UACtB,IAAI5B,WAAW,CAACJ,OAAO,IAAII,WAAW,CAACJ,OAAO,CAAC+C,QAAQ,CAACD,MAAc,CAAC,EAAE;YACrE;UACJ;QACJ;QAEA,IAAI,CAACP,MAAM,CAACQ,QAAQ,CAACD,MAAc,CAAC,EAAE;UAClCT,eAAe,CAAC,KAAK,CAAC;QAC1B;MACJ,CAAC;MACDW,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEJ,MAAM,CAAC;MAC1C,OAAO,MAAM;QACTG,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEL,MAAM,CAAC;MACjD,CAAC;IACL;IACA;EACJ,CAAC,EAAE,CAACzC,WAAW,EAAE6B,SAAS,EAAEG,YAAY,EAAEJ,oBAAoB,CAAC,CAAC;EAEhE,MAAMmB,gBAAgB,GAAGlE,OAAO,CAAC,MAAM;IACnC;IACA;IACA,OAAOiD,oBAAoB,GAAG;MAAEkB,OAAO,EAAE;IAAQ,CAAC,GAAG;MAAEA,OAAO,EAAE;IAAO,CAAC;EAC5E,CAAC,EAAE,CAAClB,oBAAoB,CAAC,CAAC;EAE1B,oBACIpD,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAuE,QAAA,qBACIvE,KAAA,CAAAmB,aAAA;IACIwC,KAAK,EAAE;MAAEa,QAAQ,EAAE;IAAW,CAAE;IAChC3B,QAAQ,EAAEA,QAAS;IACnB,cAAYE,eAAe,IAAID,WAAY;IAC3CpC,SAAS,EAAEsC,eAAgB;IAC3BrC,OAAO,EAAEA,CAAA,KAAM4C,eAAe,CAAC,CAACD,YAAY,CAAE;IAC9CzC,GAAG,EAAEsC;EAAU,GAEdF,mBAAmB,iBAAIjD,KAAA,CAAAmB,aAAA;IAAMT,SAAS,EAAEuC;EAAoB,CAAE,CAAC,EAC/DH,WAAW,iBAAI9C,KAAA,CAAAmB,aAAA;IAAMT,SAAS,EAAC;EAA2B,GAAEoC,WAAkB,CAAC,eAChF9C,KAAA,CAAAmB,aAAA;IAAGT,SAAS,EAAC;EAAc,CAAE,CACzB,CAAC,EACR4C,YAAY,iBACTtD,KAAA,CAAAmB,aAAA;IAAKT,SAAS,EAAE,4BAA6B;IAACiD,KAAK,EAAEU;EAAiB,gBAClErE,KAAA,CAAAmB,aAAA,CAACE,aAAa;IACVE,UAAU,EAAEA,UAAW;IACvBD,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAEgC;EAAY,GAEpB/C,QACU,CACd,CAEX,CAAC;AAEX","ignoreList":[]}

package/ui/ImageResizer.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { LexicalEditor } from "lexical";
 export declare function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled }: {
     editor: LexicalEditor;

package/ui/ImageResizer.js.map

@@ -1 +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":"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","ignoreList":[]}
+{"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":"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","ignoreList":[]}

package/ui/LinkPreview.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import "./LinkPreview.css";
 export declare function LinkPreview({ url }: Readonly<{
     url: string;