@tarviks/lexical-rich-editor 1.3.3 → 1.3.5

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, PopoverTrigger, PopoverSurface } 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';
@@ -2487,10 +2487,9 @@ function useFloatingPortalContainer(editor) {
   useEffect(() => {
     const root = editor.getRootElement();
     if (!root) return;
-    const panelOrLayer = root.closest(".ms-Panel-main") || root.closest(".ms-Panel") || root.closest(".ms-Layer") || document.body;
     const host = document.createElement("div");
     host.className = "lexical-floating-ui-host";
-    panelOrLayer.appendChild(host);
+    document.body.appendChild(host);
     setContainer(host);
     return () => {
       host.remove();
@@ -3497,43 +3496,41 @@ var FloatingLinkEditorPlugin = ({ anchorElem, 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
@@ -3670,105 +3667,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();
@@ -4018,132 +4014,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();
@@ -6644,76 +6639,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("");
@@ -6733,54 +6727,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" }),