@tarviks/lexical-rich-editor 1.3.4 → 1.3.6

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { createCommand, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getNodeByKey, $createRangeSelection, $setSelection, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isTextNode, $isElementNode, FORMAT_ELEMENT_COMMAND, CLICK_COMMAND, $isNodeSelection, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, $isLineBreakNode, SKIP_SELECTION_FOCUS_TAG, createEditor, KEY_ENTER_COMMAND } from 'lexical';
 import { mergeStyleSets, Stack, css, useTheme, Callout, TextField } from '@fluentui/react';
-import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, Button, ToolbarDivider, MenuItemRadio, Field, Input, MessageBar, MessageBarBody } from '@fluentui/react-components';
+import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, Button, ToolbarDivider, MenuItemRadio, Field, Input, MessageBar, MessageBarBody, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
 import { LinkNode, AutoLinkNode, $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode } from '@lexical/link';
 import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, $removeList, $insertList, $isListItemNode } from '@lexical/list';
@@ -24,7 +24,7 @@ import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { HeadingNode, QuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode } from '@lexical/rich-text';
 import { TableNode, TableRowNode, TableCellNode, $isTableSelection, $isTableNode, $isTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, getDOMCellFromTarget, getTableObserverFromTableElement, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableRowNode, $getTableColumnIndexFromTableCellNode, $createTableNodeWithDimensions } from '@lexical/table';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, DismissRegular, CheckmarkRegular, EditRegular, CodeFilled, LinkFilled, Dismiss16Regular } from '@fluentui/react-icons';
+import { ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, AttachFilled, ImageEditRegular, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, DismissRegular, CheckmarkRegular, EditRegular, CodeFilled, LinkFilled, Dismiss16Regular } from '@fluentui/react-icons';
 import { $setBlocksType, $patchStyleText, $isAtNodeEnd, $getSelectionStyleValueForProperty } from '@lexical/selection';
 import { createPortal } from 'react-dom';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -3143,33 +3143,6 @@ var getSelectedNode2 = (selection) => {
     return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
   }
 };
-var VERTICAL_GAP = 10;
-var HORIZONTAL_OFFSET = 5;
-var VIEWPORT_MARGIN = 8;
-var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, topBoundary = VIEWPORT_MARGIN, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
-  if (targetRect === null) {
-    floatingElem.style.opacity = "0";
-    floatingElem.style.transform = "translate(-10000px, -10000px)";
-    return;
-  }
-  const floatingElemRect = floatingElem.getBoundingClientRect();
-  let top = targetRect.bottom + verticalGap;
-  let left = targetRect.left - horizontalOffset;
-  if (top + floatingElemRect.height > window.innerHeight - VIEWPORT_MARGIN) {
-    top = targetRect.top - floatingElemRect.height - verticalGap;
-  }
-  if (top < topBoundary) {
-    top = topBoundary;
-  }
-  left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - floatingElemRect.width - VIEWPORT_MARGIN));
-  const origin = getFixedPositionOrigin(floatingElem);
-  top -= origin.top;
-  left -= origin.left;
-  floatingElem.style.opacity = "1";
-  floatingElem.style.transform = "none";
-  floatingElem.style.top = `${top}px`;
-  floatingElem.style.left = `${left}px`;
-};
 var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
   "http:",
   "https:",
@@ -3195,7 +3168,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
   const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
   const [lastSelection, setLastSelection] = useState(null);
   const [linkUrl, setLinkUrl] = useState("");
-  const editorRef = useRef(null);
+  const [target, setTarget] = useState(null);
   const inputRef = useRef(null);
   const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
@@ -3213,25 +3186,17 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
         setEditedLinkUrl(linkUrl);
       }
     }
-    const editorElem = editorRef.current;
     const nativeSelection = getDOMSelection(editor._window);
     const activeElement = document.activeElement;
-    if (editorElem === null) {
-      return;
-    }
     const rootElement = editor.getRootElement();
     if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       if (domRect) {
-        const toolbarEl = rootElement.closest(".lexical-rich-editor-root")?.querySelector(".editor-toolbar-root");
-        const topBoundary = toolbarEl ? toolbarEl.getBoundingClientRect().bottom + 8 : 8;
-        setFloatingElemPositionForLinkEditor(domRect, editorElem, topBoundary);
+        setTarget({ getBoundingClientRect: () => domRect });
       }
       setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== "aoLinkInput") {
-      if (rootElement !== null) {
-        setFloatingElemPositionForLinkEditor(null, editorElem);
-      }
+    } else if (!(activeElement instanceof HTMLInputElement) || activeElement !== inputRef.current) {
+      setTarget(null);
       setLastSelection(null);
       setIsLinkEditMode(false);
       setLinkUrl("");
@@ -3327,99 +3292,119 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
       setIsLinkEditMode(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { ref: editorRef, className: "aoLinkEditor", children: !isLink ? null : isLinkEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        className: "aoLinkInput",
-        value: editedLinkUrl,
-        onChange: (event) => {
-          setEditedLinkUrl(event.target.value);
-        },
-        onKeyDown: (event) => {
-          monitorInputInteraction(event);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "aoLinkInputActions", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "aoLinkCancel",
-          role: "button",
-          tabIndex: 0,
-          title: "Cancel",
-          "aria-label": "Cancel",
-          onMouseDown: preventDefault,
-          onClick: () => {
-            setIsLinkEditMode(false);
-          },
-          children: /* @__PURE__ */ jsx(DismissRegular, { fontSize: 16 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "aoLinkConfirm",
-          role: "button",
-          tabIndex: 0,
-          title: "Confirm",
-          "aria-label": "Confirm",
-          onMouseDown: preventDefault,
-          onClick: handleLinkSubmission,
-          children: /* @__PURE__ */ jsx(CheckmarkRegular, { fontSize: 16 })
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: "aoLinkView", children: [
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: sanitizeUrl(linkUrl),
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: linkUrl
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "aoLinkEdit",
-        role: "button",
-        tabIndex: 0,
-        title: "Edit link",
-        "aria-label": "Edit link",
-        onMouseDown: preventDefault,
-        onClick: (event) => {
-          event.preventDefault();
-          setEditedLinkUrl(linkUrl);
-          setIsLinkEditMode(true);
-        },
-        children: /* @__PURE__ */ jsx(EditRegular, { fontSize: 16 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "aoLinkTrash",
-        role: "button",
-        tabIndex: 0,
-        title: "Remove link",
-        "aria-label": "Remove link",
-        onMouseDown: preventDefault,
-        onClick: () => {
-          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-        },
-        children: /* @__PURE__ */ jsx(DeleteRegular, { fontSize: 16 })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: isLink && !!target,
+      onOpenChange: (_, data) => {
+        if (!data.open) setIsLink(false);
+      },
+      positioning: { target: target ?? void 0, position: "below", align: "start" },
+      unstable_disableAutoFocus: true,
+      children: /* @__PURE__ */ jsx(PopoverSurface, { style: { display: "flex", alignItems: "center", gap: 6, padding: 8, maxWidth: 360 }, children: isLinkEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            value: editedLinkUrl,
+            style: {
+              flex: 1,
+              minWidth: 180,
+              border: "none",
+              outline: "none",
+              background: "#f1f1f1",
+              borderRadius: 15,
+              padding: "8px 12px",
+              fontSize: 14
+            },
+            onChange: (event) => {
+              setEditedLinkUrl(event.target.value);
+            },
+            onKeyDown: (event) => {
+              monitorInputInteraction(event);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(DismissRegular, { fontSize: 16 }),
+            title: "Cancel",
+            "aria-label": "Cancel",
+            onMouseDown: preventDefault,
+            onClick: () => {
+              setIsLinkEditMode(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "primary",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(CheckmarkRegular, { fontSize: 16 }),
+            title: "Confirm",
+            "aria-label": "Confirm",
+            onMouseDown: preventDefault,
+            onClick: handleLinkSubmission
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: sanitizeUrl(linkUrl),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              padding: "0 8px",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              maxWidth: 260
+            },
+            children: linkUrl
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(EditRegular, { fontSize: 16 }),
+            title: "Edit link",
+            "aria-label": "Edit link",
+            onMouseDown: preventDefault,
+            onClick: (event) => {
+              event.preventDefault();
+              setEditedLinkUrl(linkUrl);
+              setIsLinkEditMode(true);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(DeleteRegular, { fontSize: 16 }),
+            title: "Remove link",
+            "aria-label": "Remove link",
+            onMouseDown: preventDefault,
+            onClick: () => {
+              editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+            }
+          }
+        )
+      ] }) })
+    }
+  );
 };
-var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
+var useFloatingLinkEditorToolbar = (editor, isLinkEditMode, setIsLinkEditMode) => {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
-  const portalContainer = useFloatingPortalContainer(editor);
   useEffect(() => {
     function $updateToolbar() {
       const selection = $getSelection();
@@ -3467,72 +3452,62 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
       )
     );
   }, [editor]);
-  if (!anchorElem || !(anchorElem instanceof HTMLElement) || !portalContainer) {
-    return null;
-  }
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      FloatingLinkEditor,
-      {
-        isLink,
-        editor: activeEditor,
-        setIsLink,
-        isLinkEditMode,
-        setIsLinkEditMode
-      }
-    ),
-    portalContainer
+  return /* @__PURE__ */ jsx(
+    FloatingLinkEditor,
+    {
+      isLink,
+      editor: activeEditor,
+      setIsLink,
+      isLinkEditMode,
+      setIsLinkEditMode
+    }
   );
 };
-var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
+var FloatingLinkEditorPlugin = ({ isLinkEditMode, setIsLinkEditMode }) => {
   const [editor] = useLexicalComposerContext();
-  const validAnchorElem = anchorElem && anchorElem instanceof HTMLElement ? anchorElem : document.body;
   return useFloatingLinkEditorToolbar(
     editor,
-    validAnchorElem,
     isLinkEditMode,
     setIsLinkEditMode
   );
 };
 var AoModal = ({
   isOpen,
-  onDismiss,
+  onOpenChange,
+  trigger,
   title,
   maxWidth = 280,
-  // Default to a smaller, compact size
   actions,
   children
 }) => {
-  const [editor] = useLexicalComposerContext();
-  const hostElement = useFloatingPortalContainer(editor);
-  if (!isOpen) return null;
-  const modalContent = /* @__PURE__ */ jsx("div", { className: "aoModalBackdrop", onClick: onDismiss, children: /* @__PURE__ */ jsxs(
-    FluentProvider,
+  return /* @__PURE__ */ jsxs(
+    Popover,
     {
-      theme: webLightTheme,
-      className: "aoModalWrapper aoModalContainer",
-      style: { maxWidth, width: "90vw" },
-      onClick: (e) => e.stopPropagation(),
+      open: isOpen,
+      onOpenChange: (_, data) => onOpenChange(data.open),
+      positioning: { position: "below", align: "start" },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "aoModalHeader", children: [
-          /* @__PURE__ */ jsx("h2", { className: "aoModalTitle", children: title }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "aoModalCloseButton",
-              "aria-label": "Close popup",
-              onClick: onDismiss,
-              children: "\u2715"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "aoModalBody", children }),
-        actions && /* @__PURE__ */ jsx("div", { className: "aoModalActions", children: actions })
+        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: trigger }),
+        /* @__PURE__ */ jsxs(PopoverSurface, { style: { minWidth: 240, maxWidth, width: "90vw" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsx("h2", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: title }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                size: "small",
+                icon: /* @__PURE__ */ jsx(DismissRegular, {}),
+                "aria-label": "Close popup",
+                onClick: () => onOpenChange(false)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { children }),
+          actions && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 12 }, children: actions })
+        ] })
       ]
     }
-  ) });
-  if (!hostElement) return null;
-  return createPortal(modalContent, hostElement);
+  );
 };
 
 // src/Plugins/ImagePlugin.tsx
@@ -3669,105 +3644,104 @@ var InsertImageDialog = ({
     };
     reader.readAsDataURL(file);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "small",
-        title: "Add Image",
-        disabled,
-        icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: iconColor } }),
-        style: {
-          background: isOpen && !disabled ? "#ebebeb" : "none",
-          border: "none",
-          margin: 2,
-          opacity: disabled ? 0.55 : 1,
-          cursor: disabled ? "not-allowed" : "pointer"
-        },
-        onClick: () => {
-          if (disabled) return;
-          setIsOpen((prev) => !prev);
+  return /* @__PURE__ */ jsx(
+    AoModal,
+    {
+      isOpen: disabled ? false : isOpen,
+      onOpenChange: (open) => {
+        if (disabled) return;
+        setIsOpen(open);
+        if (open) {
           setSrc("");
           setAltText("");
           setFileName("");
         }
       },
-      "upload-image"
-    ),
-    /* @__PURE__ */ jsx(
-      AoModal,
-      {
-        isOpen: disabled ? false : isOpen,
-        onDismiss: () => !disabled && setIsOpen(false),
-        title: "Insert image",
-        maxWidth: 340,
-        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
-          /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-        ] }),
-        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
-          /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
-            "label",
-            {
-              style: {
-                cursor: disabled ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                opacity: disabled ? 0.75 : 1
-              },
-              children: [
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          title: "Add Image",
+          disabled,
+          icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: iconColor } }),
+          style: {
+            background: isOpen && !disabled ? "#ebebeb" : "none",
+            border: "none",
+            margin: 2,
+            opacity: disabled ? 0.55 : 1,
+            cursor: disabled ? "not-allowed" : "pointer"
+          }
+        },
+        "upload-image"
+      ),
+      title: "Insert image",
+      maxWidth: 340,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+      ] }),
+      children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+        /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
+          "label",
+          {
+            style: {
+              cursor: disabled ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              opacity: disabled ? 0.75 : 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "file",
+                  accept: "image/*",
+                  style: { display: "none" },
+                  disabled,
+                  onChange: loadImage
+                },
+                "inline-image-upload"
+              ),
+              /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
                 /* @__PURE__ */ jsx(
-                  "input",
+                  AttachFilled,
                   {
-                    type: "file",
-                    accept: "image/*",
-                    style: { display: "none" },
-                    disabled,
-                    onChange: loadImage
-                  },
-                  "inline-image-upload"
-                ),
-                /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                  /* @__PURE__ */ jsx(
-                    AttachFilled,
-                    {
-                      style: {
-                        fontSize: "16px",
-                        color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                        marginTop: 2
-                      }
+                    style: {
+                      fontSize: "16px",
+                      color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                      marginTop: 2
                     }
-                  ),
-                  !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                ] }),
-                fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-              ]
-            }
-          ) }),
-          fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
-          /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              placeholder: "Alt text",
-              appearance: "underline",
-              disabled,
-              onChange: (_, d) => setAltText(d.value),
-              value: altText
-            }
-          ) }),
-          selectedValue === "URL" && /* @__PURE__ */ jsx(
-            InsertImageByURL,
-            {
-              disabled,
-              setIsOpen: (open) => setIsOpen(open),
-              onClick: (payload) => onClick(payload)
-            }
-          )
-        ] })
-      }
-    )
-  ] });
+                  }
+                ),
+                !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+              ] }),
+              fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+            ]
+          }
+        ) }),
+        fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Alt text",
+            appearance: "underline",
+            disabled,
+            onChange: (_, d) => setAltText(d.value),
+            value: altText
+          }
+        ) }),
+        selectedValue === "URL" && /* @__PURE__ */ jsx(
+          InsertImageByURL,
+          {
+            disabled,
+            setIsOpen: (open) => setIsOpen(open),
+            onClick: (payload) => onClick(payload)
+          }
+        )
+      ] })
+    }
+  );
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = useLexicalComposerContext();
@@ -4017,132 +3991,131 @@ var InsertInlineImageDialog = ({
     setFileName("");
     setFileSizeError(null);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "small",
-        title: "Add Inline Image",
-        disabled,
-        icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: iconColor } }),
-        style: {
-          background: isOpen && !disabled ? "#ebebeb" : "none",
-          border: "none",
-          margin: 2,
-          opacity: disabled ? 0.55 : 1,
-          cursor: disabled ? "not-allowed" : "pointer"
-        },
-        onClick: () => {
-          if (disabled) return;
-          setIsOpen((prev) => !prev);
+  return /* @__PURE__ */ jsx(
+    AoModal,
+    {
+      isOpen: disabled ? false : isOpen,
+      onOpenChange: (open) => {
+        if (disabled) return;
+        setIsOpen(open);
+        if (open) {
           setAltText("");
           setSrc("");
           setFileName("");
         }
       },
-      "upload-inline-image"
-    ),
-    /* @__PURE__ */ jsx(
-      AoModal,
-      {
-        isOpen: disabled ? false : isOpen,
-        onDismiss: () => !disabled && setIsOpen(false),
-        title: "Insert inline image",
-        maxWidth: 360,
-        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              disabled: isDisabled,
-              onClick: handleOnClick,
-              children: "Add"
-            },
-            "file-inline-upload-btn"
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              disabled,
-              onClick: () => setIsOpen(false),
-              children: "Cancel"
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          title: "Add Inline Image",
+          disabled,
+          icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: iconColor } }),
+          style: {
+            background: isOpen && !disabled ? "#ebebeb" : "none",
+            border: "none",
+            margin: 2,
+            opacity: disabled ? 0.55 : 1,
+            cursor: disabled ? "not-allowed" : "pointer"
+          }
+        },
+        "upload-inline-image"
+      ),
+      title: "Insert inline image",
+      maxWidth: 360,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            disabled: isDisabled,
+            onClick: handleOnClick,
+            children: "Add"
+          },
+          "file-inline-upload-btn"
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            disabled,
+            onClick: () => setIsOpen(false),
+            children: "Cancel"
+          },
+          "file-inline-upload-cancel"
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+        /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
+          "label",
+          {
+            style: {
+              cursor: disabled ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              opacity: disabled ? 0.75 : 1
             },
-            "file-inline-upload-cancel"
-          )
-        ] }),
-        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
-          /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
-            "label",
-            {
-              style: {
-                cursor: disabled ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                opacity: disabled ? 0.75 : 1
-              },
-              children: [
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "file",
+                  accept: "image/*",
+                  style: { display: "none" },
+                  disabled,
+                  onChange: loadImage
+                },
+                "inline-image-upload"
+              ),
+              /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
                 /* @__PURE__ */ jsx(
-                  "input",
+                  AttachFilled,
                   {
-                    type: "file",
-                    accept: "image/*",
-                    style: { display: "none" },
-                    disabled,
-                    onChange: loadImage
-                  },
-                  "inline-image-upload"
-                ),
-                /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                  /* @__PURE__ */ jsx(
-                    AttachFilled,
-                    {
-                      style: {
-                        fontSize: "16px",
-                        color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                        marginTop: 2
-                      }
+                    style: {
+                      fontSize: "16px",
+                      color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                      marginTop: 2
                     }
-                  ),
-                  !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                ] }),
-                fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxs(
-            Dropdown,
-            {
-              className: styles.alignDropdown,
-              disabled,
-              value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
-              selectedOptions: [position ?? "left"],
-              listbox: { style: { width: "120px" } },
-              root: { style: { borderBottom: "1px solid black" } },
-              onOptionSelect: (_, data) => setPosition(data.optionValue),
-              children: [
-                /* @__PURE__ */ jsx(Option, { value: "left", children: "Left" }, "left"),
-                /* @__PURE__ */ jsx(Option, { value: "right", children: "Right" }, "right"),
-                /* @__PURE__ */ jsx(Option, { value: "full", children: "Full" }, "full")
-              ]
-            }
-          ) }),
-          fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
-          /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              placeholder: "Alt text",
-              appearance: "underline",
-              disabled,
-              value: altText,
-              onChange: (_, d) => setAltText(d.value)
-            }
-          ) })
-        ] })
-      }
-    )
-  ] });
+                  }
+                ),
+                !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+              ] }),
+              fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxs(
+          Dropdown,
+          {
+            className: styles.alignDropdown,
+            disabled,
+            value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
+            selectedOptions: [position ?? "left"],
+            listbox: { style: { width: "120px" } },
+            root: { style: { borderBottom: "1px solid black" } },
+            onOptionSelect: (_, data) => setPosition(data.optionValue),
+            children: [
+              /* @__PURE__ */ jsx(Option, { value: "left", children: "Left" }, "left"),
+              /* @__PURE__ */ jsx(Option, { value: "right", children: "Right" }, "right"),
+              /* @__PURE__ */ jsx(Option, { value: "full", children: "Full" }, "full")
+            ]
+          }
+        ) }),
+        fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Alt text",
+            appearance: "underline",
+            disabled,
+            value: altText,
+            onChange: (_, d) => setAltText(d.value)
+          }
+        ) })
+      ] })
+    }
+  );
 };
 var InlineImagePlugin = () => {
   const [editor] = useLexicalComposerContext();
@@ -6643,76 +6616,75 @@ var TableItemPlugin = ({ disabled }) => {
     setColumns("");
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "small",
-        title: "Add table",
-        disabled,
-        icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: iconColor } }),
-        style: {
-          background: isOpen && !disabled ? "#ebebeb" : "none",
-          border: "none",
-          margin: 2,
-          opacity: disabled ? 0.55 : 1,
-          cursor: disabled ? "not-allowed" : "pointer"
-        },
-        onClick: () => {
-          if (disabled) return;
-          setIsOpen((prev) => !prev);
+  return /* @__PURE__ */ jsx(
+    AoModal,
+    {
+      isOpen: disabled ? false : isOpen,
+      onOpenChange: (open) => {
+        if (disabled) return;
+        setIsOpen(open);
+        if (open) {
           setRows("");
           setColumns("");
         }
       },
-      "insert-table-nodes"
-    ),
-    /* @__PURE__ */ jsx(
-      AoModal,
-      {
-        isOpen: disabled ? false : isOpen,
-        onDismiss: () => !disabled && setIsOpen(false),
-        title: "Insert table",
-        maxWidth: 300,
-        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              appearance: "primary",
-              disabled: disabled || !rows || !columns,
-              onClick: onAddTable,
-              children: "Add"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-        ] }),
-        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
-          /* @__PURE__ */ jsx(Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              autoFocus: !disabled,
-              value: rows,
-              placeholder: "Rows",
-              appearance: "underline",
-              disabled,
-              onChange: (_, v) => setRows(v.value)
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: columns,
-              placeholder: "Columns",
-              appearance: "underline",
-              disabled,
-              onChange: (_, v) => setColumns(v.value)
-            }
-          ) })
-        ] })
-      }
-    )
-  ] });
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          title: "Add table",
+          disabled,
+          icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: iconColor } }),
+          style: {
+            background: isOpen && !disabled ? "#ebebeb" : "none",
+            border: "none",
+            margin: 2,
+            opacity: disabled ? 0.55 : 1,
+            cursor: disabled ? "not-allowed" : "pointer"
+          }
+        },
+        "insert-table-nodes"
+      ),
+      title: "Insert table",
+      maxWidth: 300,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            appearance: "primary",
+            disabled: disabled || !rows || !columns,
+            onClick: onAddTable,
+            children: "Add"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+      ] }),
+      children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+        /* @__PURE__ */ jsx(Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: !disabled,
+            value: rows,
+            placeholder: "Rows",
+            appearance: "underline",
+            disabled,
+            onChange: (_, v) => setRows(v.value)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: columns,
+            placeholder: "Columns",
+            appearance: "underline",
+            disabled,
+            onChange: (_, v) => setColumns(v.value)
+          }
+        ) })
+      ] })
+    }
+  );
 };
 var YoutubeUploadPlugin = ({ disabled }) => {
   const [url, setURL] = useState("");
@@ -6732,54 +6704,51 @@ var YoutubeUploadPlugin = ({ disabled }) => {
     setURL("");
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        title: "Add youtube URL",
-        size: "small",
-        disabled,
-        icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: iconColor } }),
-        style: {
-          background: isOpen && !disabled ? "#ebebeb" : "none",
-          border: "none",
-          margin: 2,
-          opacity: disabled ? 0.55 : 1,
-          cursor: disabled ? "not-allowed" : "pointer"
-        },
-        onClick: () => {
-          if (disabled) return;
-          setIsOpen((prev) => !prev);
-          setURL("");
-        }
+  return /* @__PURE__ */ jsx(
+    AoModal,
+    {
+      isOpen: disabled ? false : isOpen,
+      onOpenChange: (open) => {
+        if (disabled) return;
+        setIsOpen(open);
+        if (open) setURL("");
       },
-      "upload-video"
-    ),
-    /* @__PURE__ */ jsx(
-      AoModal,
-      {
-        isOpen: disabled ? false : isOpen,
-        onDismiss: () => !disabled && setIsOpen(false),
-        title: "Embed YouTube video",
-        maxWidth: 320,
-        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
-          /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-        ] }),
-        children: /* @__PURE__ */ jsx(Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsx(Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            autoFocus: !disabled,
-            disabled,
-            value: url,
-            appearance: "underline",
-            placeholder: "Add Youtube video URL",
-            onChange: (_, v) => setURL(v.value)
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          title: "Add youtube URL",
+          size: "small",
+          disabled,
+          icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: iconColor } }),
+          style: {
+            background: isOpen && !disabled ? "#ebebeb" : "none",
+            border: "none",
+            margin: 2,
+            opacity: disabled ? 0.55 : 1,
+            cursor: disabled ? "not-allowed" : "pointer"
           }
-        ) }) })
-      }
-    )
-  ] });
+        },
+        "upload-video"
+      ),
+      title: "Embed YouTube video",
+      maxWidth: 320,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+      ] }),
+      children: /* @__PURE__ */ jsx(Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsx(Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: !disabled,
+          disabled,
+          value: url,
+          appearance: "underline",
+          placeholder: "Add Youtube video URL",
+          onChange: (_, v) => setURL(v.value)
+        }
+      ) }) })
+    }
+  );
 };
 var TextAlphaListLtrFilled = ({ style }) => /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style, children: [
   /* @__PURE__ */ jsx("path", { d: "M8.75 4a.75.75 0 1 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }),