@tarviks/lexical-rich-editor 1.2.0 → 1.2.1

package/dist/index.mjs

@@ -7,8 +7,8 @@ import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { createCommand, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, $setSelection, $getSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getNodeByKey, $getRoot, $createTextNode, $isTextNode, $createRangeSelection, $isElementNode, $isNodeSelection, CLICK_COMMAND, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, 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, ToolbarDivider, Button, MenuItemRadio, Popover, PopoverTrigger, PopoverSurface, Field, Input } from '@fluentui/react-components';
-import { ErrorCircleRegular, 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, CodeFilled, LinkFilled, Dismiss16Regular } from '@fluentui/react-icons';
+import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, ToolbarDivider, Button, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Field, Input, DialogActions } from '@fluentui/react-components';
+import { ErrorCircleRegular, ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, AddRegular, TableAddRegular, ImageAddRegular, ImageEditRegular, VideoClipRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, AttachFilled, LinkAddRegular, TextColorRegular, PaintBucket16Filled, Dismiss16Regular, Checkmark16Regular, Edit16Regular, Delete16Regular, CodeFilled, LinkFilled } from '@fluentui/react-icons';
 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 } from '@lexical/list';
@@ -615,7 +615,6 @@ var init_ImageComponent = __esm({
             editor,
             buttonRef,
             imageRef,
-            maxWidth,
             onResizeStart,
             onResizeEnd,
             captionsEnabled: !isLoadError && captionsEnabled
@@ -766,6 +765,9 @@ var init_ImageNode = __esm({
         const writable = this.getWritable();
         writable.__width = width;
         writable.__height = height;
+        if (typeof width === "number" && width > writable.__maxWidth) {
+          writable.__maxWidth = width;
+        }
       }
       setShowCaption(showCaption) {
         const writable = this.getWritable();
@@ -855,6 +857,7 @@ __export(InlineImageComponent_exports, {
 var imageCache2, useSuspenseImage2, LazyImage2, InlineImageComponent, InlineImageComponent_default;
 var init_InlineImageComponent = __esm({
   "src/Nodes/InlineImageComponent.tsx"() {
+    init_ImageResizer();
     init_InlineImage();
     init_InlineImageNode();
     imageCache2 = /* @__PURE__ */ new Set();
@@ -897,6 +900,29 @@ var init_InlineImageComponent = __esm({
       const buttonRef = useRef(null);
       const [editor] = useLexicalComposerContext();
       const isEditable = useLexicalEditable();
+      const [isResizing, setIsResizing] = useState(false);
+      const onResizeEnd = (nextWidth, nextHeight) => {
+        setTimeout(() => {
+          setIsResizing(false);
+        }, 200);
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if ($isInlineImageNode(node)) {
+            node.setWidthAndHeight(nextWidth, nextHeight);
+          }
+        });
+      };
+      const onResizeStart = () => {
+        setIsResizing(true);
+      };
+      const setShowCaption = (show) => {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if ($isInlineImageNode(node)) {
+            node.setShowCaption(show);
+          }
+        });
+      };
       const $onDelete = useCallback(
         (payload) => {
           const deleteSelection = $getSelection();
@@ -972,6 +998,9 @@ var init_InlineImageComponent = __esm({
             CLICK_COMMAND,
             (payload) => {
               const event = payload;
+              if (isResizing) {
+                return true;
+              }
               if (event.target === imageRef.current) {
                 if (event.shiftKey) {
                   setSelected(!isSelected);
@@ -1020,6 +1049,7 @@ var init_InlineImageComponent = __esm({
       }, [
         clearSelection,
         editor,
+        isResizing,
         isSelected,
         nodeKey,
         $onDelete,
@@ -1027,20 +1057,35 @@ var init_InlineImageComponent = __esm({
         $onEscape,
         setSelected
       ]);
-      const draggable = isSelected && $isNodeSelection(selection);
-      const isFocused = isSelected && isEditable;
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx("span", { draggable, children: /* @__PURE__ */ jsx(
-        LazyImage2,
-        {
-          className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
-          src,
-          altText,
-          imageRef,
-          width,
-          height,
-          position
-        }
-      ) }) });
+      const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+      const isFocused = (isSelected || isResizing) && isEditable;
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { draggable, children: /* @__PURE__ */ jsx(
+          LazyImage2,
+          {
+            className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+            src,
+            altText,
+            imageRef,
+            width,
+            height,
+            position
+          }
+        ) }),
+        isFocused && $isNodeSelection(selection) && /* @__PURE__ */ jsx(
+          ImageResizer_default,
+          {
+            showCaption,
+            setShowCaption,
+            editor,
+            buttonRef,
+            imageRef,
+            onResizeStart,
+            onResizeEnd,
+            captionsEnabled: false
+          }
+        )
+      ] }) });
     };
     InlineImageComponent_default = InlineImageComponent;
   }
@@ -2857,7 +2902,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       return;
     }
     const rootElement = editor.getRootElement();
-    if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
+    if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       if (domRect) {
         domRect.y += 40;
@@ -2873,7 +2918,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       setLinkUrl("");
     }
     return true;
-  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+  }, [anchorElem, editor, isLink, setIsLinkEditMode, isLinkEditMode, linkUrl]);
   useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
@@ -2971,6 +3016,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       {
         ref: inputRef,
         className: "link-input",
+        placeholder: "https://",
         value: editedLinkUrl,
         onChange: (event) => {
           setEditedLinkUrl(event.target.value);
@@ -2980,27 +3026,31 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         }
       }
     ),
-    /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "link-actions", children: [
       /* @__PURE__ */ jsx(
-        "div",
+        "button",
         {
-          className: "link-cancel",
-          role: "button",
-          tabIndex: 0,
+          type: "button",
+          className: "link-icon-btn link-cancel",
+          title: "Cancel",
+          "aria-label": "Cancel",
           onMouseDown: preventDefault,
           onClick: () => {
             setIsLinkEditMode(false);
-          }
+          },
+          children: /* @__PURE__ */ jsx(Dismiss16Regular, {})
         }
       ),
       /* @__PURE__ */ jsx(
-        "div",
+        "button",
         {
-          className: "link-confirm",
-          role: "button",
-          tabIndex: 0,
+          type: "button",
+          className: "link-icon-btn link-confirm",
+          title: "Confirm",
+          "aria-label": "Confirm",
           onMouseDown: preventDefault,
-          onClick: handleLinkSubmission
+          onClick: handleLinkSubmission,
+          children: /* @__PURE__ */ jsx(Checkmark16Regular, {})
         }
       )
     ] })
@@ -3014,32 +3064,38 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         children: linkUrl
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "link-edit",
-        role: "button",
-        tabIndex: 0,
-        onMouseDown: preventDefault,
-        onClick: (event) => {
-          event.preventDefault();
-          setEditedLinkUrl(linkUrl);
-          setIsLinkEditMode(true);
+    /* @__PURE__ */ jsxs("div", { className: "link-actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "link-icon-btn link-edit",
+          title: "Edit link",
+          "aria-label": "Edit link",
+          onMouseDown: preventDefault,
+          onClick: (event) => {
+            event.preventDefault();
+            setEditedLinkUrl(linkUrl);
+            setIsLinkEditMode(true);
+          },
+          children: /* @__PURE__ */ jsx(Edit16Regular, {})
         }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "link-trash",
-        role: "button",
-        tabIndex: 0,
-        onMouseDown: preventDefault,
-        onClick: () => {
-          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "link-icon-btn link-trash",
+          title: "Remove link",
+          "aria-label": "Remove link",
+          onMouseDown: preventDefault,
+          onClick: () => {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+          },
+          children: /* @__PURE__ */ jsx(Delete16Regular, {})
         }
-      }
-    )
+      )
+    ] })
   ] }) });
 };
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
@@ -3140,74 +3196,28 @@ var readClipboardImageAsDataURL = async (event) => {
   }
   return null;
 };
-var InsertImageByURL = ({
-  setIsOpen,
-  onClick,
-  disabled
-}) => {
-  const [altText, setAltText] = useState("");
-  const [src, setSrc] = useState("");
-  const isDisabled = disabled || src === "";
-  return /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
-    /* @__PURE__ */ jsx(Field, { label: "Enter URL", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        autoFocus: !disabled,
-        appearance: "underline",
-        placeholder: "Add URL",
-        disabled,
-        onChange: (_, v) => setSrc(v.value),
-        value: src
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        placeholder: "Alt text",
-        disabled,
-        onChange: (_, v) => setAltText(v.value),
-        value: altText
-      },
-      "alt-text-url"
-    ) }),
-    /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          style: { width: "150px" },
-          onClick: () => !disabled && onClick({ altText, src }),
-          disabled: isDisabled,
-          size: "small",
-          children: "Confirm"
-        },
-        "url-confirm-btn"
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          style: { width: "150px" },
-          onClick: () => setIsOpen(false),
-          disabled,
-          size: "small",
-          children: "Cancel"
-        },
-        "file-url-cancel"
-      )
-    ] })
-  ] });
-};
 var InsertImageDialog = ({
   activeEditor,
-  disabled
+  disabled,
+  open: externalOpen,
+  onClose
 }) => {
   const [src, setSrc] = useState("");
   const [altText, setAltText] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState("Upload");
+  const [internalOpen, setInternalOpen] = useState(false);
   const [fileName, setFileName] = useState("");
   const hasModifier = useRef(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  const isDisabled = disabled || src === "";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const isAddDisabled = disabled || src === "";
+  const handleClose = () => {
+    setSrc("");
+    setAltText("");
+    setFileName("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
@@ -3219,10 +3229,7 @@ var InsertImageDialog = ({
   const onClick = (payload) => {
     if (disabled) return;
     activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-    setIsOpen(false);
-    setAltText("");
-    setSrc("");
-    setFileName("");
+    handleClose();
   };
   const loadImage = (event) => {
     if (disabled) return;
@@ -3237,118 +3244,108 @@ var InsertImageDialog = ({
     };
     reader.readAsDataURL(files[0]);
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__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;
+          setSrc("");
+          setAltText("");
+          setFileName("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, 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);
-              setSrc("");
-              setAltText("");
-              setFileName("");
-            }
-          },
-          "upload-image"
-        ) }),
-        /* @__PURE__ */ jsxs(
-          PopoverSurface,
-          {
-            style: {
-              width: "320px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                  "label",
-                  {
-                    style: {
-                      cursor: disabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      opacity: disabled ? 0.75 : 1
+      "upload-image"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "400px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Image" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", 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
                     },
-                    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(
-                          AttachFilled,
-                          {
-                            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: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    placeholder: "Alt text",
-                    appearance: "underline",
-                    disabled,
-                    onChange: (_, d) => setAltText(d.value),
-                    value: altText
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, 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" })
-                ] })
-              ] }),
-              selectedValue === "URL" && /* @__PURE__ */ jsx(
-                InsertImageByURL,
-                {
-                  disabled,
-                  setIsOpen: (open) => setIsOpen(open),
-                  onClick: (payload) => onClick(payload)
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+                    "inline-image-upload"
+                  ),
+                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
+                    /* @__PURE__ */ jsx(
+                      AttachFilled,
+                      {
+                        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: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Alt text",
+                appearance: "underline",
+                disabled,
+                onChange: (_, d) => setAltText(d.value),
+                value: altText
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: isAddDisabled,
+                onClick: () => onClick({ altText, src }),
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = useLexicalComposerContext();
@@ -3514,17 +3511,28 @@ var useStyles = makeStyles({
 });
 var InsertInlineImageDialog = ({
   disabled,
-  activeEditor
+  activeEditor,
+  open: externalOpen,
+  onClose
 }) => {
   const hasModifier = useRef(false);
   const [src, setSrc] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [altText, setAltText] = useState("");
   const [fileName, setFileName] = useState("");
   const [position, setPosition] = useState("left");
   const styles = useStyles();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  const isDisabled = disabled || src === "";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const isAddDisabled = disabled || src === "";
+  const handleClose = () => {
+    setSrc("");
+    setAltText("");
+    setFileName("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   const loadImage = (event) => {
     if (disabled) return;
     const files = event.target.files;
@@ -3549,146 +3557,135 @@ var InsertInlineImageDialog = ({
     if (disabled) return;
     const payload = { altText, position, src };
     activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload);
-    setIsOpen(false);
-    setAltText("");
-    setSrc("");
-    setFileName("");
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__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;
+          setSrc("");
+          setAltText("");
+          setFileName("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, 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);
-              setAltText("");
-              setSrc("");
-              setFileName("");
-            }
-          },
-          "upload-inline-image"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "400px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  style: {
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    opacity: disabled ? 0.75 : 1
-                  },
-                  children: [
+      "upload-inline-image"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "440px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Inline Image" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", 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 })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Position", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  placeholder: "Left Align",
-                  className: styles.alignDropdown,
-                  disabled,
-                  listbox: { style: { width: "120px" } },
-                  root: { style: { borderBottom: "1px solid black" } },
-                  children: [
-                    /* @__PURE__ */ jsx(Option, { text: "full", onClick: () => setPosition("full"), children: "Full" }, "full"),
-                    /* @__PURE__ */ jsx(Option, { text: "left", onClick: () => setPosition("left"), children: "Left" }, "left"),
-                    /* @__PURE__ */ jsx(Option, { text: "right", onClick: () => setPosition("right"), children: "Right" }, "right")
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  placeholder: "Alt text",
-                  appearance: "underline",
-                  disabled,
-                  value: altText,
-                  onChange: (_, d) => setAltText(d.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, 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"
-                )
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+                      }
+                    ),
+                    !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", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                placeholder: "Left Align",
+                className: styles.alignDropdown,
+                disabled,
+                listbox: { style: { width: "120px" } },
+                root: { style: { borderBottom: "1px solid black" } },
+                children: [
+                  /* @__PURE__ */ jsx(Option, { text: "full", onClick: () => setPosition("full"), children: "Full" }, "full"),
+                  /* @__PURE__ */ jsx(Option, { text: "left", onClick: () => setPosition("left"), children: "Left" }, "left"),
+                  /* @__PURE__ */ jsx(Option, { text: "right", onClick: () => setPosition("right"), children: "Right" }, "right")
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Alt text",
+                appearance: "underline",
+                disabled,
+                value: altText,
+                onChange: (_, d) => setAltText(d.value)
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: isAddDisabled,
+                onClick: handleOnClick,
+                children: "Add"
+              },
+              "file-inline-upload-btn"
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                disabled,
+                onClick: handleClose,
+                children: "Cancel"
+              },
+              "file-inline-upload-cancel"
+            )
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 var InlineImagePlugin = () => {
   const [editor] = useLexicalComposerContext();
@@ -5057,8 +5054,8 @@ function getToolbarGroupsByLevel(level) {
         // ['undo', 'redo', '|'],
         ["Bold", "Italic", "Underline", "|"],
         ["ColorPicker", "|"],
-        ["Link", "Table", "|"],
-        // ['Image', 'Youtube', 'InlineImage', '|'],
+        ["Link", "|"],
+        ["Insert", "|"],
         ["Heading", "|"],
         ["FontFamily", "|"],
         ["FontSize", "|"],
@@ -5072,9 +5069,8 @@ function getToolbarGroupsByLevel(level) {
         // ['undo', 'redo', '|'],
         ["Bold", "Italic", "Underline", "|"],
         ["ColorPicker", "|"],
-        ["Link", "Table", "|"],
-        // ['CodeBlock', '|'],
-        ["Image", "Youtube", "InlineImage", "|"],
+        ["Link", "|"],
+        ["Insert", "|"],
         ["Heading", "|"],
         ["FontFamily", "|"],
         ["FontSize", "|"],
@@ -5884,105 +5880,135 @@ var FontSizePlugin = ({ disabled }) => {
     "fontsize"
   ) });
 };
-var InsertLinkPlugin = ({ disabled }) => {
+var VERBATIM_LINK_RE = /^https?:\/\/|^mailto:|^tel:|^#|^\//i;
+function getLinkValidationMessage(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return void 0;
+  if (/\s/.test(trimmed)) return "URL cannot contain spaces";
+  if (!VERBATIM_LINK_RE.test(trimmed) && !trimmed.includes(".")) {
+    return "Enter a valid URL (e.g. example.com)";
+  }
+  return void 0;
+}
+var InsertLinkPlugin = ({
+  disabled,
+  open: externalOpen,
+  onClose
+}) => {
   const [editor] = useLexicalComposerContext();
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [text, setText] = useState("");
   const [link, setLink] = useState("");
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const linkError = getLinkValidationMessage(link);
+  const handleClose = () => {
+    setText("");
+    setLink("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   const insertLink = (text2, link2) => {
     if (disabled) return;
+    if (getLinkValidationMessage(link2)) return;
+    const trimmedLink = link2.trim();
+    const href = VERBATIM_LINK_RE.test(trimmedLink) ? trimmedLink : `https://${trimmedLink}`;
     editor.update(() => {
-      setText("");
-      setLink("");
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
         const textNode = new TextNode(text2);
-        const linkNode = $createLinkNode(link2.startsWith("http") ? link2 : `https://${link2}`);
+        const linkNode = $createLinkNode(href);
         linkNode.append(textNode);
         selection.insertNodes([linkNode]);
       }
-      setIsOpen(false);
     });
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add link",
+        disabled,
+        icon: /* @__PURE__ */ jsx(LinkAddRegular, { 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;
+          setInternalOpen((prev) => !prev);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add link",
-            disabled,
-            icon: /* @__PURE__ */ jsx(LinkAddRegular, { 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) setIsOpen((prev) => !prev);
-            }
-          },
-          "upload-link"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  value: text,
-                  appearance: "underline",
-                  placeholder: "Text",
-                  disabled,
-                  onChange: (_, v) => setText(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Link", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  value: link,
-                  appearance: "underline",
-                  placeholder: "Link",
-                  disabled,
-                  onChange: (_, v) => setLink(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
+      "upload-link"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "380px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Link" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                autoFocus: !disabled,
+                value: text,
+                appearance: "underline",
+                placeholder: "Text",
+                disabled,
+                onChange: (_, v) => setText(v.value)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Link",
+                orientation: "horizontal",
+                size: "small",
+                validationState: linkError ? "error" : "none",
+                validationMessage: linkError,
+                children: /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    size: "small",
-                    disabled: disabled || !text || !link,
-                    onClick: () => insertLink(text, link),
-                    children: "Add"
+                    value: link,
+                    appearance: "underline",
+                    placeholder: "Link",
+                    disabled,
+                    onChange: (_, v) => setLink(v.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" && text && link && !linkError) insertLink(text, link);
+                    }
                   }
-                ),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+                )
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: disabled || !text || !link || !!linkError,
+                onClick: () => insertLink(text, link),
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 function PageSetupPlugin({ disabled, value, onChange }) {
   const sizeLabel = value.size === "pageless" ? "Pageless" : PAGE_SIZE_OPTIONS.find((o) => o.key === value.size)?.label ?? "Pageless";
@@ -6038,194 +6064,280 @@ function PageSetupPlugin({ disabled, value, onChange }) {
     }
   );
 }
-var TableItemPlugin = ({ disabled }) => {
+var MAX_ROWS = 50;
+var MAX_COLS = 50;
+var TableItemPlugin = ({
+  disabled,
+  open: externalOpen,
+  onClose
+}) => {
   const [editor] = useLexicalComposerContext();
   const [columns, setColumns] = useState("");
   const [rows, setRows] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [rowError, setRowError] = useState("");
+  const [colError, setColError] = useState("");
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
+  const handleClose = () => {
+    setRows("");
+    setColumns("");
+    setRowError("");
+    setColError("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
+  const onRowsChange = (val) => {
+    const clean = val.replace(/\D/g, "");
+    setRows(clean);
+    const n = Number(clean);
+    if (clean && n > MAX_ROWS) setRowError(`Maximum ${MAX_ROWS} rows allowed`);
+    else setRowError("");
+  };
+  const onColsChange = (val) => {
+    const clean = val.replace(/\D/g, "");
+    setColumns(clean);
+    const n = Number(clean);
+    if (clean && n > MAX_COLS) setColError(`Maximum ${MAX_COLS} columns allowed`);
+    else setColError("");
+  };
   const onAddTable = () => {
     if (disabled) return;
     const row = Number(rows);
     const col = Number(columns);
     if (!row || !col) return;
+    if (row > MAX_ROWS || col > MAX_COLS) return;
     editor.update(() => {
       const tableNode = $createTableNodeWithDimensions(row, col, true);
       $insertNodeToNearestRoot(tableNode);
     });
-    setRows("");
-    setColumns("");
-    setIsOpen(false);
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  const isAddDisabled = disabled || !rows || !columns || !!rowError || !!colError;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__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;
+          setRows("");
+          setColumns("");
+          setRowError("");
+          setColError("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, 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);
-              setRows("");
-              setColumns("");
-            }
-          },
-          "insert-table-nodes"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Rows", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  type: "number",
-                  min: 1,
-                  value: rows,
-                  placeholder: "Rows",
-                  appearance: "underline",
-                  disabled,
-                  input: { style: { textAlign: "left" } },
-                  onChange: (_, v) => setRows(v.value.replace(/\D/g, ""))
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Columns", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "number",
-                  min: 1,
-                  value: columns,
-                  placeholder: "Columns",
-                  appearance: "underline",
-                  disabled,
-                  input: { style: { textAlign: "left" } },
-                  onChange: (_, v) => setColumns(v.value.replace(/\D/g, ""))
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
+      "insert-table-nodes"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "380px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Table" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Rows",
+                orientation: "horizontal",
+                size: "small",
+                validationMessage: rowError || void 0,
+                validationState: rowError ? "error" : "none",
+                children: /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    size: "small",
-                    appearance: "primary",
-                    disabled: disabled || !rows || !columns,
-                    onClick: onAddTable,
-                    children: "Add"
+                    autoFocus: !disabled,
+                    type: "number",
+                    min: 1,
+                    max: MAX_ROWS,
+                    value: rows,
+                    placeholder: "Rows",
+                    appearance: "underline",
+                    disabled,
+                    input: { style: { textAlign: "left" } },
+                    onChange: (_, v) => onRowsChange(v.value)
                   }
-                ),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Columns",
+                orientation: "horizontal",
+                size: "small",
+                validationMessage: colError || void 0,
+                validationState: colError ? "error" : "none",
+                children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    min: 1,
+                    max: MAX_COLS,
+                    value: columns,
+                    placeholder: "Columns",
+                    appearance: "underline",
+                    disabled,
+                    input: { style: { textAlign: "left" } },
+                    onChange: (_, v) => onColsChange(v.value)
+                  }
+                )
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: isAddDisabled,
+                onClick: onAddTable,
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
-var YoutubeUploadPlugin = ({ disabled }) => {
+function extractYouTubeId(url) {
+  const trimmed = url.trim();
+  if (/^[\w-]{11}$/.test(trimmed)) return trimmed;
+  const match = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/|live\/|u\/\w\/))([^#&?]{11})/.exec(trimmed);
+  return match ? match[1] : null;
+}
+var YoutubeUploadPlugin = ({
+  disabled,
+  open: externalOpen,
+  onClose
+}) => {
   const [url, setURL] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [urlError, setUrlError] = useState("");
+  const [internalOpen, setInternalOpen] = useState(false);
   const [editor] = useLexicalComposerContext();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#424242";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const handleClose = () => {
+    setURL("");
+    setUrlError("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   const onHandleEmbeded = () => {
     if (disabled) return;
     if (!url) return;
-    const match = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url);
-    const id = match && match[2]?.length === 11 ? match[2] : null;
-    if (!id) return;
+    const id = extractYouTubeId(url);
+    if (!id) {
+      setUrlError("Invalid YouTube URL. Supported: watch?v=, youtu.be/, /shorts/, /live/");
+      return;
+    }
+    setUrlError("");
     editor.update(() => {
       const node = $createYouTubeNode(id);
       $insertNodes([node]);
     });
-    setURL("");
-    setIsOpen(false);
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__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;
+          setURL("");
+          setUrlError("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, 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("");
-            }
-          },
-          "upload-video"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "URL", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  disabled,
-                  value: url,
-                  appearance: "underline",
-                  placeholder: "Add Youtube video URL",
-                  onChange: (_, v) => setURL(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+      "upload-video"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "420px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert YouTube Video" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "URL",
+                orientation: "horizontal",
+                size: "small",
+                validationState: urlError ? "error" : "none",
+                validationMessage: urlError || void 0,
+                children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    autoFocus: !disabled,
+                    disabled,
+                    value: url,
+                    appearance: "underline",
+                    placeholder: "Paste YouTube URL or video ID\u2026",
+                    onChange: (_, v) => {
+                      setURL(v.value);
+                      if (urlError) setUrlError("");
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") onHandleEmbeded();
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#94a3b8", lineHeight: 1.5 }, children: "Supports: youtube.com/watch?v=\u2026, youtu.be/\u2026, /shorts/\u2026, /live/\u2026" })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: disabled || !url,
+                onClick: onHandleEmbeded,
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 var useStyles4 = makeStyles({
   dropdown: {
@@ -6250,6 +6362,7 @@ var ALLOWED_TOKENS = {
   Image: true,
   InlineImage: true,
   Youtube: true,
+  Insert: true,
   Heading: true,
   FontFamily: true,
   FontSize: true,
@@ -6281,6 +6394,7 @@ var ToolBarPlugins = (props) => {
   const [isLowercase, setIsLowercase] = useState(false);
   const [isCapitalize, setIsCapitalize] = useState(false);
   const [alignment, setAlignment] = useState("left");
+  const [activeInsertDialog, setActiveInsertDialog] = useState(null);
   const lastSelectionRef = React9__default.useRef(null);
   const presetGroups = getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
@@ -6526,6 +6640,7 @@ var ToolBarPlugins = (props) => {
       marginRight: 8,
       verticalAlign: "middle"
     };
+    const isDisabled = !isEditable || !!props.readOnly;
     switch (token) {
       case "Bold":
         return /* @__PURE__ */ jsx(
@@ -6589,6 +6704,95 @@ var ToolBarPlugins = (props) => {
         );
       case "Youtube":
         return /* @__PURE__ */ jsx(YoutubeUploadPlugin, { disabled: !isEditable || props.readOnly }, key);
+      case "Insert": {
+        const menuIconColor = isDisabled ? fgDisabled : fg;
+        return /* @__PURE__ */ jsxs(React9__default.Fragment, { children: [
+          /* @__PURE__ */ jsxs(Menu, { children: [
+            /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                disabled: isDisabled,
+                icon: /* @__PURE__ */ jsx(AddRegular, { style: { color: menuIconColor } }),
+                style: {
+                  ...getButtonStyle(false),
+                  gap: 4,
+                  paddingInline: 8
+                },
+                children: "Insert"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs(MenuList, { children: [
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("table"),
+                  children: "Table"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("image"),
+                  children: "Image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("inlineImage"),
+                  children: "Inline Image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("youtube"),
+                  children: "YouTube"
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            TableItemPlugin,
+            {
+              disabled: isDisabled,
+              open: activeInsertDialog === "table",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InsertImageDialog,
+            {
+              activeEditor: editor,
+              disabled: isDisabled,
+              open: activeInsertDialog === "image",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InsertInlineImageDialog,
+            {
+              activeEditor: editor,
+              disabled: isDisabled,
+              open: activeInsertDialog === "inlineImage",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YoutubeUploadPlugin,
+            {
+              disabled: isDisabled,
+              open: activeInsertDialog === "youtube",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          )
+        ] }, key);
+      }
       case "Heading": {
         const headingLabel = selectNodeType === "paragraph" ? "Normal" : HEADING_OPTION.find((h) => h.key === selectNodeType)?.text ?? selectNodeType;
         return /* @__PURE__ */ jsxs(
@@ -6984,7 +7188,9 @@ function BrowserSpellCheckPlugin({ enabled }) {
   }, [editor, enabled]);
   return null;
 }
-function WordCountPlugin({ onCountChange }) {
+function WordCountPlugin({
+  onCountChange
+}) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {
@@ -6997,7 +7203,9 @@ function WordCountPlugin({ onCountChange }) {
   }, [editor, onCountChange]);
   return null;
 }
-function CharCountPlugin({ onCountChange }) {
+function CharCountPlugin({
+  onCountChange
+}) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {
@@ -7081,7 +7289,10 @@ function _adaptRawSpell(data, text) {
   }
   const rawGrammar = data.grammar_correction ?? data.improved_text;
   const grammarCorrection = rawGrammar && rawGrammar.trim() !== text.trim() ? rawGrammar.trim() : void 0;
-  return { issues: issues.sort((a, b) => a.offset - b.offset), grammarCorrection };
+  return {
+    issues: issues.sort((a, b) => a.offset - b.offset),
+    grammarCorrection
+  };
 }
 function _adaptRawSuggest(data) {
   if (!data) return null;
@@ -7136,359 +7347,385 @@ function _makeQueryFn(fn) {
     };
   };
 }
-var ContentEditorComponent = forwardRef(
-  (props, ref) => {
-    const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React9__default.useMemo(
-      () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [props.spellCheckFn, props.useSpellCheck]
-    );
-    const resolvedQuery = React9__default.useMemo(
-      () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [props.suggestFn, props.useQuery]
-    );
-    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
-    const [isLinkEditMode, setIsLinkEditMode] = useState(false);
-    const [wordCount, setWordCount] = useState(0);
-    const handleWordCount = useCallback((count) => setWordCount(count), []);
-    const [charCount, setCharCount] = useState(0);
-    const handleCharCount = useCallback((count) => setCharCount(count), []);
-    const [refErrors, setRefErrors] = useState([]);
-    const [pageSetup, setPageSetup] = useState(DEFAULT_PAGE_SETUP);
-    const pageCanvas = resolvePageCanvasMetrics(pageSetup);
-    const contentEditableDomRef = useRef(null);
-    const previousOverLimitRef = useRef(false);
-    const focusedRef = useRef(false);
-    const setFocused = (focused) => {
-      focusedRef.current = focused;
-    };
-    const containerRef = useRef(null);
-    const onAnchorRef = (elem) => {
-      if (elem) setFloatingAnchorElem(elem);
-    };
-    const initialConfig = {
-      namespace: props.namespace,
-      theme,
-      onError: () => {
-      },
-      nodes: [
-        HeadingNode,
-        QuoteNode,
-        CodeHighlightNode,
-        CodeNode,
-        ListNode,
-        ListItemNode,
-        LinkNode,
-        AutoLinkNode,
-        TableNode,
-        TableRowNode,
-        TableCellNode,
-        ImageNode,
-        InlineImageNode,
-        YouTubeNode,
-        PageBreakNode,
-        AutocompleteNode,
-        SpellErrorNode,
-        HtmlBlockNode
-      ]
-    };
-    const EditorStyles = mergeStyleSets({
-      editorPlaceholder: {
-        color: "var(--colorNeutralForeground3, grey)",
-        position: "absolute",
-        top: props.level !== "none" /* None */ ? "17px" : "27px",
-        left: pageCanvas.paddingPx,
-        right: pageCanvas.paddingPx,
-        fontSize: "14px",
-        pointerEvents: "none",
-        userSelect: "none"
-      },
-      contentEditor: {
-        zIndex: 0,
-        flex: "auto",
-        outline: "none",
-        overflow: "auto",
-        marginTop: "0px",
-        position: "relative",
-        background: "var(--colorNeutralBackground1, #ffffff)",
-        justifyContent: "center",
-        height: props.contentHeight ?? "100%",
-        ...isReadOnly && {
-          cursor: "not-allowed",
-          opacity: 0.75,
-          userSelect: "text"
-        }
-      }
-    });
-    const urlRegExp = new RegExp(
-      /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
-    );
-    const validateUrl = (url) => url === "https://" || urlRegExp.test(url);
-    const handleReadOnlyClickCapture = (e) => {
-      if (!isReadOnly) return;
-      const target = e.target;
-      const anchor = target?.closest?.("a");
-      if (anchor) {
-        e.preventDefault();
-        e.stopPropagation();
+var ContentEditorComponent = forwardRef((props, ref) => {
+  const isReadOnly = !!props.readOnly;
+  const resolvedSpellCheck = React9__default.useMemo(
+    () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.spellCheckFn, props.useSpellCheck]
+  );
+  const resolvedQuery = React9__default.useMemo(
+    () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.suggestFn, props.useQuery]
+  );
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+  const [isLinkEditMode, setIsLinkEditMode] = useState(false);
+  const [wordCount, setWordCount] = useState(0);
+  const handleWordCount = useCallback(
+    (count) => setWordCount(count),
+    []
+  );
+  const [charCount, setCharCount] = useState(0);
+  const handleCharCount = useCallback(
+    (count) => setCharCount(count),
+    []
+  );
+  const [refErrors, setRefErrors] = useState([]);
+  const [pageSetup, setPageSetup] = useState(DEFAULT_PAGE_SETUP);
+  const pageCanvas = resolvePageCanvasMetrics(pageSetup);
+  const contentEditableDomRef = useRef(null);
+  const previousOverLimitRef = useRef(false);
+  const focusedRef = useRef(false);
+  const setFocused = (focused) => {
+    focusedRef.current = focused;
+  };
+  const containerRef = useRef(null);
+  const onAnchorRef = (elem) => {
+    if (elem) setFloatingAnchorElem(elem);
+  };
+  const initialConfig = {
+    namespace: props.namespace,
+    theme,
+    onError: () => {
+    },
+    nodes: [
+      HeadingNode,
+      QuoteNode,
+      CodeHighlightNode,
+      CodeNode,
+      ListNode,
+      ListItemNode,
+      LinkNode,
+      AutoLinkNode,
+      TableNode,
+      TableRowNode,
+      TableCellNode,
+      ImageNode,
+      InlineImageNode,
+      YouTubeNode,
+      PageBreakNode,
+      AutocompleteNode,
+      SpellErrorNode,
+      HtmlBlockNode
+    ]
+  };
+  const EditorStyles = mergeStyleSets({
+    editorPlaceholder: {
+      color: "var(--colorNeutralForeground3, grey)",
+      position: "absolute",
+      top: props.level !== "none" /* None */ ? "17px" : "27px",
+      left: pageCanvas.paddingPx,
+      right: pageCanvas.paddingPx,
+      fontSize: "14px",
+      pointerEvents: "none",
+      userSelect: "none"
+    },
+    contentEditor: {
+      zIndex: 0,
+      flex: "auto",
+      outline: "none",
+      overflow: "auto",
+      marginTop: "0px",
+      position: "relative",
+      background: "var(--colorNeutralBackground1, #ffffff)",
+      justifyContent: "center",
+      height: props.contentHeight ?? "100%",
+      ...isReadOnly && {
+        cursor: "not-allowed",
+        opacity: 0.75,
+        userSelect: "text"
       }
-    };
-    const [touched, setTouched] = useState(false);
-    const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
-    const internalErrors = [];
-    if (isOverLimit) {
-      const m = props.errorMessages?.wordLimitExceeded;
-      internalErrors.push(
-        typeof m === "function" ? m(wordCount, props.wordLimit) : m ?? `Word limit exceeded (${wordCount} / ${props.wordLimit} words used)`
-      );
-    }
-    if (props.required && touched && wordCount === 0) {
-      internalErrors.push(
-        props.errorMessages?.required ?? "This field is required"
-      );
-    }
-    if (props.minWords !== void 0 && touched && wordCount < props.minWords) {
-      const m = props.errorMessages?.minWords;
-      internalErrors.push(
-        typeof m === "function" ? m(wordCount, props.minWords) : m ?? `Minimum ${props.minWords} words required (${wordCount} entered)`
-      );
     }
-    if (props.maxChars !== void 0 && charCount > props.maxChars) {
-      const m = props.errorMessages?.maxCharsExceeded;
-      internalErrors.push(
-        typeof m === "function" ? m(charCount, props.maxChars) : m ?? `Character limit exceeded (${charCount} / ${props.maxChars} characters used)`
-      );
+  });
+  const urlRegExp = new RegExp(
+    /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
+  );
+  const validateUrl = (url) => url === "https://" || urlRegExp.test(url);
+  const handleReadOnlyClickCapture = (e) => {
+    if (!isReadOnly) return;
+    const target = e.target;
+    const anchor = target?.closest?.("a");
+    if (anchor) {
+      e.preventDefault();
+      e.stopPropagation();
     }
-    if (props.minChars !== void 0 && touched && charCount < props.minChars && charCount > 0) {
-      const m = props.errorMessages?.minCharsRequired;
-      internalErrors.push(
-        typeof m === "function" ? m(charCount, props.minChars) : m ?? `Minimum ${props.minChars} characters required (${charCount} entered)`
-      );
+  };
+  const [touched, setTouched] = useState(false);
+  const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
+  const internalErrors = [];
+  if (isOverLimit) {
+    const m = props.errorMessages?.wordLimitExceeded;
+    internalErrors.push(
+      typeof m === "function" ? m(wordCount, props.wordLimit) : m ?? `Word limit exceeded (${wordCount} / ${props.wordLimit} words used)`
+    );
+  }
+  if (props.required && touched && wordCount === 0) {
+    internalErrors.push(
+      props.errorMessages?.required ?? "This field is required"
+    );
+  }
+  if (props.minWords !== void 0 && touched && wordCount < props.minWords) {
+    const m = props.errorMessages?.minWords;
+    internalErrors.push(
+      typeof m === "function" ? m(wordCount, props.minWords) : m ?? `Minimum ${props.minWords} words required (${wordCount} entered)`
+    );
+  }
+  if (props.maxChars !== void 0 && charCount > props.maxChars) {
+    const m = props.errorMessages?.maxCharsExceeded;
+    internalErrors.push(
+      typeof m === "function" ? m(charCount, props.maxChars) : m ?? `Character limit exceeded (${charCount} / ${props.maxChars} characters used)`
+    );
+  }
+  if (props.minChars !== void 0 && touched && charCount < props.minChars && charCount > 0) {
+    const m = props.errorMessages?.minCharsRequired;
+    internalErrors.push(
+      typeof m === "function" ? m(charCount, props.minChars) : m ?? `Minimum ${props.minChars} characters required (${charCount} entered)`
+    );
+  }
+  const allErrors = [
+    ...internalErrors,
+    ...props.errors ?? [],
+    ...refErrors
+  ];
+  const hasErrors = allErrors.length > 0;
+  const hasRedBorder = hasErrors;
+  useEffect(() => {
+    if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
+    const wasOverLimit = previousOverLimitRef.current;
+    if (isOverLimit !== wasOverLimit) {
+      props.onWordLimitExceeded({
+        wordCount,
+        wordLimit: props.wordLimit,
+        exceeded: isOverLimit
+      });
+      previousOverLimitRef.current = isOverLimit;
     }
-    const allErrors = [...internalErrors, ...props.errors ?? [], ...refErrors];
-    const hasErrors = allErrors.length > 0;
-    const hasRedBorder = hasErrors;
-    useEffect(() => {
-      if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
-      const wasOverLimit = previousOverLimitRef.current;
-      if (isOverLimit !== wasOverLimit) {
-        props.onWordLimitExceeded({
-          wordCount,
-          wordLimit: props.wordLimit,
-          exceeded: isOverLimit
-        });
-        previousOverLimitRef.current = isOverLimit;
-      }
-    }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        style: {
-          zIndex: 1e3,
-          background: "#fff",
-          borderRadius: "2px",
-          width: props.width ?? "100%",
-          height: props.height ?? "100%",
-          margin: props.margin ?? "5px auto",
-          border: `1px solid ${hasRedBorder ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
-          transition: "border-color 0.2s",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                pointerEvents: isReadOnly ? "none" : "auto",
-                position: "sticky",
-                opacity: isReadOnly ? 0.85 : 1
-              },
-              children: /* @__PURE__ */ jsx(
-                ToolBarPlugins,
+  }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
+  return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      style: {
+        zIndex: 1e3,
+        background: "#fff",
+        borderRadius: "2px",
+        width: props.width ?? "100%",
+        height: props.height ?? "100%",
+        margin: props.margin ?? "5px auto",
+        border: `1px solid ${hasRedBorder ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
+        transition: "border-color 0.2s",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              pointerEvents: isReadOnly ? "none" : "auto",
+              position: "sticky",
+              opacity: isReadOnly ? 0.85 : 1
+            },
+            children: /* @__PURE__ */ jsx(
+              ToolBarPlugins,
+              {
+                level: props.level ?? "basic" /* Basic */,
+                readOnly: props.readOnly,
+                pageSetup,
+                onPageSetupChange: setPageSetup
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              flexGrow: 1,
+              padding: "15px 0px",
+              overflowY: "scroll",
+              overflowX: "auto",
+              minWidth: 0,
+              background: pageCanvas.widthPx !== void 0 ? "#eef0f2" : void 0
+            },
+            onClickCapture: handleReadOnlyClickCapture,
+            children: [
+              /* @__PURE__ */ jsx(
+                RichTextPlugin,
                 {
-                  level: props.level ?? "basic" /* Basic */,
-                  readOnly: props.readOnly,
-                  pageSetup,
-                  onPageSetupChange: setPageSetup
+                  ErrorBoundary: LexicalErrorBoundary,
+                  contentEditable: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "editor",
+                      style: { height: "100%", position: "relative" },
+                      ref: onAnchorRef,
+                      children: /* @__PURE__ */ jsx(
+                        ContentEditable,
+                        {
+                          ref: contentEditableDomRef,
+                          className: css(EditorStyles.contentEditor),
+                          style: {
+                            paddingTop: props.level !== "none" /* None */ ? 0 : 10,
+                            paddingLeft: pageCanvas.paddingPx,
+                            paddingRight: pageCanvas.paddingPx,
+                            maxWidth: pageCanvas.widthPx,
+                            marginLeft: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+                            marginRight: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+                            boxShadow: pageCanvas.widthPx !== void 0 ? "0 0 0 1px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08)" : void 0
+                          },
+                          spellCheck: !resolvedSpellCheck,
+                          autoCorrect: resolvedSpellCheck ? "off" : void 0,
+                          autoCapitalize: resolvedSpellCheck ? "off" : void 0
+                        }
+                      )
+                    }
+                  ),
+                  placeholder: /* @__PURE__ */ jsx(Stack, { className: css(EditorStyles.editorPlaceholder), children: props.placeholder })
+                }
+              ),
+              props.wordLimit !== void 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "sticky",
+                    bottom: 0,
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    paddingRight: 14,
+                    pointerEvents: "none",
+                    userSelect: "none"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        color: isOverLimit ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
+                        fontWeight: isOverLimit ? 600 : 400,
+                        transition: "color 0.2s, font-weight 0.2s"
+                      },
+                      children: [
+                        wordCount,
+                        " / ",
+                        props.wordLimit,
+                        " words"
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                position: "relative",
-                flexGrow: 1,
-                padding: "15px 0px",
-                overflowY: "scroll",
-                overflowX: "auto",
-                minWidth: 0,
-                background: pageCanvas.widthPx !== void 0 ? "#eef0f2" : void 0
-              },
-              onClickCapture: handleReadOnlyClickCapture,
-              children: [
-                /* @__PURE__ */ jsx(
-                  RichTextPlugin,
-                  {
-                    ErrorBoundary: LexicalErrorBoundary,
-                    contentEditable: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "editor",
-                        style: { height: "100%", position: "relative" },
-                        ref: onAnchorRef,
-                        children: /* @__PURE__ */ jsx(
-                          ContentEditable,
-                          {
-                            ref: contentEditableDomRef,
-                            className: css(EditorStyles.contentEditor),
-                            style: {
-                              paddingTop: props.level !== "none" /* None */ ? 0 : 10,
-                              paddingLeft: pageCanvas.paddingPx,
-                              paddingRight: pageCanvas.paddingPx,
-                              maxWidth: pageCanvas.widthPx,
-                              marginLeft: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
-                              marginRight: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
-                              boxShadow: pageCanvas.widthPx !== void 0 ? "0 0 0 1px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08)" : void 0
-                            },
-                            spellCheck: !resolvedSpellCheck,
-                            autoCorrect: resolvedSpellCheck ? "off" : void 0,
-                            autoCapitalize: resolvedSpellCheck ? "off" : void 0
-                          }
-                        )
-                      }
-                    ),
-                    placeholder: /* @__PURE__ */ jsx(Stack, { className: css(EditorStyles.editorPlaceholder), children: props.placeholder })
-                  }
-                ),
-                props.wordLimit !== void 0 && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "sticky",
-                      bottom: 0,
-                      display: "flex",
-                      justifyContent: "flex-end",
-                      paddingRight: 14,
-                      pointerEvents: "none",
-                      userSelect: "none"
-                    },
-                    children: /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "11px",
-                          color: isOverLimit ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
-                          fontWeight: isOverLimit ? 600 : 400,
-                          transition: "color 0.2s, font-weight 0.2s"
-                        },
-                        children: [
-                          wordCount,
-                          " / ",
-                          props.wordLimit,
-                          " words"
-                        ]
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          hasErrors && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                borderTop: "1px solid #fbd5d5",
-                background: "#fff8f8",
-                padding: "6px 12px 8px",
-                display: "flex",
-                flexDirection: "column",
-                gap: 4
-              },
-              children: allErrors.map((err, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsx(ErrorCircleRegular, { style: { fontSize: 14, color: "#c4272c", flexShrink: 0 } }),
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#c4272c" }, children: err })
-              ] }, i))
-            }
-          ),
-          /* @__PURE__ */ jsx(ReadOnlyPlugin, { readonly: isReadOnly }),
-          /* @__PURE__ */ jsx(BrowserSpellCheckPlugin, { enabled: !resolvedSpellCheck }),
-          /* @__PURE__ */ jsx(
-            FocusEventsPlugin,
-            {
-              onFocus: props.onFocus,
-              onBlur: () => {
-                setTouched(true);
-                props.onBlur?.();
+            ]
+          }
+        ),
+        hasErrors && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid #fbd5d5",
+              background: "#fff8f8",
+              padding: "6px 12px 8px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: allErrors.map((err, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: 6 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ErrorCircleRegular,
+                    {
+                      style: { fontSize: 14, color: "#c4272c", flexShrink: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#c4272c" }, children: err })
+                ]
               },
-              setFocused,
-              containerRef
-            }
-          ),
-          props.autoFocus && !isReadOnly && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
-          /* @__PURE__ */ jsx(HistoryPlugin, {}),
-          /* @__PURE__ */ jsx(ListPlugin, {}),
-          /* @__PURE__ */ jsx(LinkPlugin, { validateUrl }),
-          /* @__PURE__ */ jsx(AutoLinkPlugin, { matchers: MATCHERS }),
-          /* @__PURE__ */ jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true }),
-          !isReadOnly && /* @__PURE__ */ jsx(YoutubeDeletePlugin, {}),
-          !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableActionMenuPlugin, {}),
-          !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableCellResizerPlugin, { anchorElem: floatingAnchorElem }),
-          !isReadOnly && /* @__PURE__ */ jsx(
-            FloatingLinkEditorPlugin,
-            {
-              anchorElem: floatingAnchorElem,
-              isLinkEditMode,
-              setIsLinkEditMode
-            }
-          ),
-          !isReadOnly && /* @__PURE__ */ jsx(ImagePlugin_default, {}),
-          !isReadOnly && /* @__PURE__ */ jsx(InlineImage_default, {}),
-          !isReadOnly && /* @__PURE__ */ jsx(PageBreakPlugin, {}),
-          !!resolvedQuery && !isReadOnly && /* @__PURE__ */ jsx(
-            AutocompletePlugin,
-            {
-              useQuery: resolvedQuery,
-              isReadOnly,
-              onSuggestionShown: props.onSuggestionShown,
-              onSuggestionAccept: props.onSuggestionAccept,
-              idleMs: props.suggestIdleMs ?? 300,
-              minWords: 4,
-              prefixWindow: 300
-            }
-          ),
-          !!resolvedSpellCheck && !isReadOnly && /* @__PURE__ */ jsx(
-            SpellCheckPlugin,
-            {
-              useSpellCheck: resolvedSpellCheck,
-              onSpellCheckAccept: props.onSpellCheckAccept,
-              idleMs: props.spellCheckIdleMs ?? 1200,
-              enabled: props.spellCheckEnabled !== false
-            }
-          ),
-          !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
-          /* @__PURE__ */ jsx(CustomOnChangePlugin, { value: props.value, onChange: props.onChange }),
-          (props.wordLimit !== void 0 || props.required || props.minWords !== void 0) && /* @__PURE__ */ jsx(WordCountPlugin, { onCountChange: handleWordCount }),
-          (props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsx(CharCountPlugin, { onCountChange: handleCharCount }),
-          /* @__PURE__ */ jsx(
-            RefApiPlugin,
-            {
-              forwardedRef: ref,
-              contentEditableDomRef,
-              focusedRef,
-              setRefErrors
-            }
-          )
-        ]
-      }
-    ) }) }) });
-  }
-);
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(ReadOnlyPlugin, { readonly: isReadOnly }),
+        /* @__PURE__ */ jsx(BrowserSpellCheckPlugin, { enabled: !resolvedSpellCheck }),
+        /* @__PURE__ */ jsx(
+          FocusEventsPlugin,
+          {
+            onFocus: props.onFocus,
+            onBlur: () => {
+              setTouched(true);
+              props.onBlur?.();
+            },
+            setFocused,
+            containerRef
+          }
+        ),
+        props.autoFocus && !isReadOnly && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
+        /* @__PURE__ */ jsx(HistoryPlugin, {}),
+        /* @__PURE__ */ jsx(ListPlugin, {}),
+        /* @__PURE__ */ jsx(LinkPlugin, { validateUrl }),
+        /* @__PURE__ */ jsx(AutoLinkPlugin, { matchers: MATCHERS }),
+        /* @__PURE__ */ jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true }),
+        !isReadOnly && /* @__PURE__ */ jsx(YoutubeDeletePlugin, {}),
+        !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableActionMenuPlugin, {}),
+        !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableCellResizerPlugin, { anchorElem: floatingAnchorElem }),
+        !isReadOnly && /* @__PURE__ */ jsx(
+          FloatingLinkEditorPlugin,
+          {
+            anchorElem: floatingAnchorElem,
+            isLinkEditMode,
+            setIsLinkEditMode
+          }
+        ),
+        !isReadOnly && /* @__PURE__ */ jsx(ImagePlugin_default, {}),
+        !isReadOnly && /* @__PURE__ */ jsx(InlineImage_default, {}),
+        !isReadOnly && /* @__PURE__ */ jsx(PageBreakPlugin, {}),
+        !!resolvedQuery && !isReadOnly && /* @__PURE__ */ jsx(
+          AutocompletePlugin,
+          {
+            useQuery: resolvedQuery,
+            isReadOnly,
+            onSuggestionShown: props.onSuggestionShown,
+            onSuggestionAccept: props.onSuggestionAccept,
+            idleMs: props.suggestIdleMs ?? 300,
+            minWords: 4,
+            prefixWindow: 300
+          }
+        ),
+        !!resolvedSpellCheck && !isReadOnly && /* @__PURE__ */ jsx(
+          SpellCheckPlugin,
+          {
+            useSpellCheck: resolvedSpellCheck,
+            onSpellCheckAccept: props.onSpellCheckAccept,
+            idleMs: props.spellCheckIdleMs ?? 1200,
+            enabled: props.spellCheckEnabled !== false
+          }
+        ),
+        !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
+        /* @__PURE__ */ jsx(
+          CustomOnChangePlugin,
+          {
+            value: props.value,
+            onChange: props.onChange
+          }
+        ),
+        (props.wordLimit !== void 0 || props.required || props.minWords !== void 0) && /* @__PURE__ */ jsx(WordCountPlugin, { onCountChange: handleWordCount }),
+        (props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsx(CharCountPlugin, { onCountChange: handleCharCount }),
+        /* @__PURE__ */ jsx(
+          RefApiPlugin,
+          {
+            forwardedRef: ref,
+            contentEditableDomRef,
+            focusedRef,
+            setRefErrors
+          }
+        )
+      ]
+    }
+  ) }) }) });
+});
 
 export { ContentEditorComponent, ContentEditorLevel };
 //# sourceMappingURL=index.mjs.map