@tarviks/lexical-rich-editor 1.2.1 → 1.3.0

package/dist/index.mjs

@@ -5,13 +5,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 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 { createCommand, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getNodeByKey, $createRangeSelection, $setSelection, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isTextNode, $isElementNode, FORMAT_ELEMENT_COMMAND, CLICK_COMMAND, $isNodeSelection, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, $isLineBreakNode, SKIP_SELECTION_FOCUS_TAG, createEditor, KEY_ENTER_COMMAND } from 'lexical';
 import { mergeStyleSets, Stack, css, useTheme, Callout, TextField } from '@fluentui/react';
-import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, 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 { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, Button, ToolbarDivider, MenuItemRadio, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, Field, Input, DialogActions, MessageBar, MessageBarBody } from '@fluentui/react-components';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
 import { LinkNode, AutoLinkNode, $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode } from '@lexical/link';
-import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, $removeList, $insertList, $isListItemNode } from '@lexical/list';
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { createLinkMatcherWithRegExp, AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -23,9 +22,9 @@ import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { HeadingNode, QuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode } from '@lexical/rich-text';
-import { TableNode, TableRowNode, TableCellNode, $isTableSelection, $isTableNode, $isTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $getTableNodeFromLexicalNodeOrThrow, getDOMCellFromTarget, getTableObserverFromTableElement, $getTableRowIndexFromTableCellNode, $isTableRowNode, $getTableColumnIndexFromTableCellNode, $createTableNodeWithDimensions } from '@lexical/table';
-import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { TableNode, TableRowNode, TableCellNode, $isTableSelection, $isTableNode, $isTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, getDOMCellFromTarget, getTableObserverFromTableElement, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableRowNode, $getTableColumnIndexFromTableCellNode, $createTableNodeWithDimensions } from '@lexical/table';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, DismissRegular, CheckmarkRegular, EditRegular, CodeFilled, LinkFilled, Dismiss16Regular } from '@fluentui/react-icons';
 import { $setBlocksType, $patchStyleText, $isAtNodeEnd, $getSelectionStyleValueForProperty } from '@lexical/selection';
 import { createPortal } from 'react-dom';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -523,17 +522,6 @@ var init_ImageComponent = __esm({
             onClick,
             COMMAND_PRIORITY_LOW
           ),
-          editor.registerCommand(
-            DRAGSTART_COMMAND,
-            (event) => {
-              if (event.target === imageRef.current) {
-                event.preventDefault();
-                return true;
-              }
-              return false;
-            },
-            COMMAND_PRIORITY_LOW
-          ),
           editor.registerCommand(
             KEY_DELETE_COMMAND,
             $onDelete,
@@ -591,36 +579,44 @@ var init_ImageComponent = __esm({
       const onResizeStart = () => {
         setIsResizing(true);
       };
-      const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+      const draggable = !isResizing;
       const isFocused = (isSelected || isResizing) && isEditable;
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { draggable, children: isLoadError ? /* @__PURE__ */ jsx(BrokenImage, {}) : /* @__PURE__ */ jsx(
-          LazyImage,
-          {
-            className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
-            src,
-            altText,
-            imageRef,
-            width,
-            height,
-            maxWidth,
-            onError: () => setIsLoadError(true)
-          }
-        ) }),
-        resizable && $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
-          ImageResizer_default,
-          {
-            showCaption,
-            setShowCaption,
-            editor,
-            buttonRef,
-            imageRef,
-            onResizeStart,
-            onResizeEnd,
-            captionsEnabled: !isLoadError && captionsEnabled
-          }
-        )
-      ] }) });
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          draggable,
+          style: { position: "relative", display: "inline-block" },
+          children: [
+            isLoadError ? /* @__PURE__ */ jsx(BrokenImage, {}) : /* @__PURE__ */ jsx(
+              LazyImage,
+              {
+                className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+                src,
+                altText,
+                imageRef,
+                width,
+                height,
+                maxWidth,
+                onError: () => setIsLoadError(true)
+              }
+            ),
+            resizable && $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
+              ImageResizer_default,
+              {
+                showCaption,
+                setShowCaption,
+                editor,
+                buttonRef,
+                imageRef,
+                maxWidth,
+                onResizeStart,
+                onResizeEnd,
+                captionsEnabled: !isLoadError && captionsEnabled
+              }
+            )
+          ]
+        }
+      ) });
     };
     ImageComponent_default = ImageComponent;
   }
@@ -765,9 +761,6 @@ 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();
@@ -894,35 +887,13 @@ var init_InlineImageComponent = __esm({
     };
     InlineImageComponent = ({ src, altText, nodeKey, width, height, showCaption, caption, position }) => {
       const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+      const [isResizing, setIsResizing] = useState(false);
       const [selection, setSelection] = useState(null);
       const activeEditorRef = useRef(null);
       const imageRef = useRef(null);
       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();
@@ -978,6 +949,25 @@ var init_InlineImageComponent = __esm({
         },
         [caption, editor, setSelected]
       );
+      const onClick = useCallback(
+        (payload) => {
+          const event = payload;
+          if (isResizing) {
+            return true;
+          }
+          if (event.target === imageRef.current) {
+            if (event.shiftKey) {
+              setSelected(!isSelected);
+            } else {
+              clearSelection();
+              setSelected(true);
+            }
+            return true;
+          }
+          return false;
+        },
+        [isResizing, isSelected, setSelected, clearSelection]
+      );
       useEffect(() => {
         let isMounted = true;
         const unregister = mergeRegister(
@@ -996,51 +986,13 @@ var init_InlineImageComponent = __esm({
           ),
           editor.registerCommand(
             CLICK_COMMAND,
-            (payload) => {
-              const event = payload;
-              if (isResizing) {
-                return true;
-              }
-              if (event.target === imageRef.current) {
-                if (event.shiftKey) {
-                  setSelected(!isSelected);
-                } else {
-                  clearSelection();
-                  setSelected(true);
-                }
-                return true;
-              }
-              return false;
-            },
-            COMMAND_PRIORITY_LOW
-          ),
-          editor.registerCommand(
-            DRAGSTART_COMMAND,
-            (event) => {
-              if (event.target === imageRef.current) {
-                event.preventDefault();
-                return true;
-              }
-              return false;
-            },
-            COMMAND_PRIORITY_LOW
-          ),
-          editor.registerCommand(
-            KEY_DELETE_COMMAND,
-            $onDelete,
-            COMMAND_PRIORITY_LOW
-          ),
-          editor.registerCommand(
-            KEY_BACKSPACE_COMMAND,
-            $onDelete,
+            onClick,
             COMMAND_PRIORITY_LOW
           ),
+          editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),
+          editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),
           editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW),
-          editor.registerCommand(
-            KEY_ESCAPE_COMMAND,
-            $onEscape,
-            COMMAND_PRIORITY_LOW
-          )
+          editor.registerCommand(KEY_ESCAPE_COMMAND, $onEscape, COMMAND_PRIORITY_LOW)
         );
         return () => {
           isMounted = false;
@@ -1055,12 +1007,27 @@ var init_InlineImageComponent = __esm({
         $onDelete,
         $onEnter,
         $onEscape,
+        onClick,
         setSelected
       ]);
-      const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+      const onResizeStart = () => {
+        setIsResizing(true);
+      };
+      const onResizeEnd = (nextWidth, nextHeight) => {
+        setTimeout(() => {
+          setIsResizing(false);
+        }, 200);
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if ($isInlineImageNode(node)) {
+            node.setWidthAndHeight(nextWidth, nextHeight);
+          }
+        });
+      };
+      const draggable = !isResizing;
       const isFocused = (isSelected || isResizing) && isEditable;
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { draggable, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs("span", { draggable, style: { position: "relative", display: "inline-block" }, children: [
+        /* @__PURE__ */ jsx(
           LazyImage2,
           {
             className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
@@ -1071,18 +1038,19 @@ var init_InlineImageComponent = __esm({
             height,
             position
           }
-        ) }),
-        isFocused && $isNodeSelection(selection) && /* @__PURE__ */ jsx(
+        ),
+        $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
           ImageResizer_default,
           {
-            showCaption,
-            setShowCaption,
+            showCaption: false,
+            setShowCaption: () => {
+            },
+            captionsEnabled: false,
             editor,
             buttonRef,
             imageRef,
             onResizeStart,
-            onResizeEnd,
-            captionsEnabled: false
+            onResizeEnd
           }
         )
       ] }) });
@@ -1273,6 +1241,19 @@ var ContentEditorLevel = /* @__PURE__ */ ((ContentEditorLevel2) => {
   ContentEditorLevel2["Pro"] = "pro";
   return ContentEditorLevel2;
 })(ContentEditorLevel || {});
+var DEFAULT_VALIDATION_MESSAGES = {
+  required: "This field is required.",
+  minWords: (current, min) => `Minimum ${min} word${min === 1 ? "" : "s"} required (${current} entered).`,
+  maxWords: (current, max) => `Word limit exceeded: ${current} / ${max} words.`,
+  minChars: (current, min) => `Minimum ${min} character${min === 1 ? "" : "s"} required (${current} entered).`,
+  maxChars: (current, max) => `Character limit exceeded: ${current} / ${max} characters.`,
+  noImages: "Images are not allowed in this field.",
+  maxImages: (current, max) => `Too many images: ${current} / ${max} allowed.`,
+  noLinks: "Hyperlinks are not allowed in this field.",
+  maxLinks: (current, max) => `Too many links: ${current} / ${max} allowed.`,
+  noTables: "Tables are not allowed in this field.",
+  imageTooLarge: (fileMB, maxMB) => `Image size (${fileMB.toFixed(1)} MB) exceeds the ${maxMB} MB limit.`
+};
 
 // src/Types/PageSetup.ts
 var DEFAULT_PAGE_SETUP = {
@@ -1313,6 +1294,106 @@ function resolvePageCanvasMetrics(value) {
     paddingPx: Math.round(margin.valueIn * CSS_PX_PER_INCH)
   };
 }
+createCommand(
+  "INSERT_ALPHA_LIST_COMMAND"
+);
+var AlphaListNode = class _AlphaListNode extends ListNode {
+  static getType() {
+    return "alpha-list";
+  }
+  static clone(node) {
+    return new _AlphaListNode(node.getStart(), node.__key);
+  }
+  constructor(start = 1, key) {
+    super("number", start, key);
+    this.__listType = "lower-alpha";
+  }
+  createDOM(config, _editor) {
+    const element = document.createElement("ol");
+    element.setAttribute("type", "a");
+    if (this.getStart() !== 1) element.setAttribute("start", String(this.getStart()));
+    element.style.listStyleType = "lower-alpha";
+    const olClass = config.theme?.list?.ol;
+    if (olClass) element.className = olClass;
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM(_editor) {
+    const element = document.createElement("ol");
+    element.setAttribute("type", "a");
+    if (this.getStart() !== 1) element.setAttribute("start", String(this.getStart()));
+    element.style.listStyleType = "lower-alpha";
+    return { element };
+  }
+  static importDOM() {
+    return {
+      ol: (domNode) => {
+        if (domNode instanceof HTMLOListElement && (domNode.getAttribute("type") === "a" || domNode.style.listStyleType === "lower-alpha")) {
+          return { conversion: convertAlphaOL, priority: 1 };
+        }
+        return null;
+      }
+    };
+  }
+  exportJSON() {
+    const base = super.exportJSON();
+    return {
+      ...base,
+      type: "alpha-list",
+      listType: "lower-alpha",
+      tag: "ol",
+      version: 1,
+      start: this.getStart()
+    };
+  }
+  static importJSON(serialized) {
+    return new _AlphaListNode(serialized.start ?? 1);
+  }
+};
+function convertAlphaOL(domNode) {
+  const start = domNode instanceof HTMLOListElement ? parseInt(domNode.getAttribute("start") || "1", 10) || 1 : 1;
+  return { node: $createAlphaListNode(start) };
+}
+function $createAlphaListNode(start = 1) {
+  return new AlphaListNode(start);
+}
+function $isAlphaListNode(node) {
+  return node instanceof AlphaListNode;
+}
+function $toggleAlphaList() {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return;
+  const anchor = selection.anchor.getNode();
+  const currentList = $findMatchingParent$1(anchor, $isListNode);
+  if ($isAlphaListNode(currentList)) {
+    $removeList();
+    return;
+  }
+  $insertList("number");
+  const sel2 = $getSelection();
+  if (!$isRangeSelection(sel2)) return;
+  const newAnchor = sel2.anchor.getNode();
+  const newList = $findMatchingParent$1(newAnchor, (n) => $isListNode(n) && !$isAlphaListNode(n));
+  if (!newList || !$isListNode(newList)) return;
+  const start = newList.getStart();
+  const formatType = typeof newList.getFormatType === "function" ? newList.getFormatType() : void 0;
+  const alpha = $createAlphaListNode(start);
+  for (const child of newList.getChildren()) {
+    alpha.append(child);
+  }
+  newList.replace(alpha);
+  if (formatType && typeof alpha.setFormat === "function") {
+    alpha.setFormat(formatType);
+  }
+  const firstItem = alpha.getFirstChild();
+  if ($isListItemNode(firstItem)) {
+    firstItem.selectStart();
+  } else {
+    alpha.select();
+  }
+}
 var AutocompleteNode = class _AutocompleteNode extends TextNode {
   static getType() {
     return "autocomplete";
@@ -1323,6 +1404,13 @@ var AutocompleteNode = class _AutocompleteNode extends TextNode {
   static importJSON(serializedNode) {
     return new _AutocompleteNode(serializedNode.text, serializedNode.uuid);
   }
+  // AutocompleteNode is excluded from copy via excludeFromCopy(), so it is
+  // never placed on the clipboard and never needs to be reconstructed from
+  // HTML.  Returning null here satisfies Lexical's exportDOM/importDOM
+  // contract check and silences the console warning.
+  static importDOM() {
+    return null;
+  }
   exportJSON() {
     return { ...super.exportJSON(), uuid: this.__uuid };
   }
@@ -1637,13 +1725,20 @@ function VideoResizer({
       const dy = ev.clientY - rs.startY;
       let newW = rs.startW;
       let newH = rs.startH;
-      if (dir === "se") {
+      if (dir === "se" || dir === "ne") {
         newW = Math.max(MIN_WIDTH, rs.startW + dx);
         newH = newW / rs.ratio;
+      } else if (dir === "nw" || dir === "sw") {
+        newW = Math.max(MIN_WIDTH, rs.startW - dx);
+        newH = newW / rs.ratio;
       } else if (dir === "e") {
         newW = Math.max(MIN_WIDTH, rs.startW + dx);
+      } else if (dir === "w") {
+        newW = Math.max(MIN_WIDTH, rs.startW - dx);
       } else if (dir === "s") {
         newH = Math.max(MIN_HEIGHT, rs.startH + dy);
+      } else if (dir === "n") {
+        newH = Math.max(MIN_HEIGHT, rs.startH - dy);
       }
       container.style.width = `${newW}px`;
       container.style.height = `${newH}px`;
@@ -1663,13 +1758,23 @@ function VideoResizer({
     /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          ...handleBase,
-          top: "50%",
-          right: -5,
-          transform: "translateY(-50%)",
-          cursor: "ew-resize"
-        },
+        style: { ...handleBase, top: -5, left: "50%", transform: "translateX(-50%)", cursor: "n-resize" },
+        onPointerDown: (e) => startResize(e, "n"),
+        title: "Resize height"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { ...handleBase, top: -5, right: -5, cursor: "ne-resize" },
+        onPointerDown: (e) => startResize(e, "ne"),
+        title: "Resize (proportional)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { ...handleBase, top: "50%", right: -5, transform: "translateY(-50%)", cursor: "ew-resize" },
         onPointerDown: (e) => startResize(e, "e"),
         title: "Resize width"
       }
@@ -1677,13 +1782,15 @@ function VideoResizer({
     /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          ...handleBase,
-          bottom: -5,
-          left: "50%",
-          transform: "translateX(-50%)",
-          cursor: "ns-resize"
-        },
+        style: { ...handleBase, bottom: -5, right: -5, cursor: "se-resize" },
+        onPointerDown: (e) => startResize(e, "se"),
+        title: "Resize (proportional)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { ...handleBase, bottom: -5, left: "50%", transform: "translateX(-50%)", cursor: "s-resize" },
         onPointerDown: (e) => startResize(e, "s"),
         title: "Resize height"
       }
@@ -1691,15 +1798,30 @@ function VideoResizer({
     /* @__PURE__ */ jsx(
       "div",
       {
-        style: { ...handleBase, bottom: -5, right: -5, cursor: "se-resize" },
-        onPointerDown: (e) => startResize(e, "se"),
+        style: { ...handleBase, bottom: -5, left: -5, cursor: "sw-resize" },
+        onPointerDown: (e) => startResize(e, "sw"),
+        title: "Resize (proportional)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { ...handleBase, top: "50%", left: -5, transform: "translateY(-50%)", cursor: "ew-resize" },
+        onPointerDown: (e) => startResize(e, "w"),
+        title: "Resize width"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { ...handleBase, top: -5, left: -5, cursor: "nw-resize" },
+        onPointerDown: (e) => startResize(e, "nw"),
         title: "Resize (proportional)"
       }
     )
   ] });
 }
 function YouTubeComponent({
-  className,
   format,
   nodeKey,
   videoID,
@@ -1707,9 +1829,48 @@ function YouTubeComponent({
   height,
   editor
 }) {
+  const wrapperRef = React9.useRef(null);
   const containerRef = React9.useRef(null);
+  const iframeRef = React9.useRef(null);
+  const isResizingRef = React9.useRef(false);
+  const [isNodeSelected, setNodeSelected, clearNodeSelection] = useLexicalNodeSelection(nodeKey);
   const [isHovered, setIsHovered] = React9.useState(false);
   const [isResizing, setIsResizing] = React9.useState(false);
+  const [isPlaying, setIsPlaying] = React9.useState(false);
+  React9.useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        FORMAT_ELEMENT_COMMAND,
+        (formatType) => {
+          if (isNodeSelected) {
+            editor.update(() => {
+              const node = $getNodeByKey(nodeKey);
+              if ($isYouTubeNode(node)) node.setFormat(formatType);
+            });
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      // Select this node on click.  When the thumbnail is shown the <img> is
+      // in the parent DOM so CLICK_COMMAND fires naturally.  When the iframe is
+      // live, clicks land in the iframe's browsing context — the node stays
+      // selected via wrapperRef boundary detection on the wrapper div.
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (event) => {
+          if (wrapperRef.current?.contains(event.target)) {
+            if (!event.shiftKey) clearNodeSelection();
+            setNodeSelected(true);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [editor, isNodeSelected, nodeKey, clearNodeSelection, setNodeSelected]);
   const handleDelete = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1718,76 +1879,177 @@ function YouTubeComponent({
       node?.remove();
     });
   };
+  const handleResizeStart = () => {
+    isResizingRef.current = true;
+    setIsResizing(true);
+    if (iframeRef.current) iframeRef.current.style.pointerEvents = "none";
+  };
   const handleResizeEnd = (w, h) => {
+    isResizingRef.current = false;
     setIsResizing(false);
+    if (iframeRef.current) iframeRef.current.style.pointerEvents = "";
+    setIsHovered(true);
     editor.update(() => {
       const node = $getNodeByKey(nodeKey);
-      if ($isYouTubeNode(node)) {
-        node.setSize(Math.round(w), Math.round(h));
-      }
+      if ($isYouTubeNode(node)) node.setSize(Math.round(w), Math.round(h));
     });
   };
-  return /* @__PURE__ */ jsx(BlockWithAlignableContents, { className, format, nodeKey, children: /* @__PURE__ */ jsxs(
+  const actionBtnStyle = (side) => ({
+    position: "absolute",
+    top: 8,
+    [side]: 8,
+    width: 28,
+    height: 28,
+    borderRadius: "50%",
+    background: "rgba(0,0,0,0.65)",
+    color: "#fff",
+    border: "none",
+    cursor: "pointer",
+    fontSize: side === "right" ? 18 : 14,
+    lineHeight: 1,
+    padding: 0,
+    zIndex: 10,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { display: "block", textAlign: format || void 0 }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
-      style: { position: "relative", display: "inline-block", width, height, lineHeight: 0 },
+      style: {
+        position: "relative",
+        display: "inline-block",
+        width,
+        height,
+        lineHeight: 0,
+        outline: isNodeSelected ? "2px solid #0078d4" : void 0,
+        outlineOffset: 2
+      },
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => {
-        if (!isResizing) setIsHovered(false);
+        if (!isResizingRef.current) setIsHovered(false);
       },
       children: [
-        /* @__PURE__ */ jsx(
-          "iframe",
-          {
-            width: "100%",
-            height: "100%",
-            src: `https://www.youtube.com/embed/${videoID}`,
-            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-            allowFullScreen: true,
-            title: "YouTube video",
-            style: { display: "block", border: "none", pointerEvents: isResizing ? "none" : "auto" }
-          }
-        ),
-        isHovered && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleDelete,
-              title: "Remove video",
-              style: {
-                position: "absolute",
-                top: 8,
-                right: 8,
-                width: 28,
-                height: 28,
-                borderRadius: "50%",
-                background: "rgba(0,0,0,0.65)",
-                color: "#fff",
-                border: "none",
-                cursor: "pointer",
-                fontSize: 18,
-                lineHeight: 1,
-                padding: 0,
-                zIndex: 10,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: "\xD7"
-            }
-          ),
+        isPlaying ? (
+          /* ── Playing state ─────────────────────────────────────────────────
+           * Show the real YouTube iframe in-place at the same dimensions.
+           * autoplay=1 starts playback immediately.
+           * pointer-events are set to 'none' during resize (handleResizeStart)
+           * so drag events are not lost to the iframe's browsing context.     */
           /* @__PURE__ */ jsx(
-            VideoResizer,
+            "iframe",
             {
-              containerRef,
-              onResizeStart: () => setIsResizing(true),
-              onResizeEnd: handleResizeEnd
+              ref: iframeRef,
+              width: "100%",
+              height: "100%",
+              src: `https://www.youtube.com/embed/${videoID}?autoplay=1`,
+              sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true,
+              title: "YouTube video",
+              style: { display: "block", border: "none" }
             }
           )
-        ] })
-      ]
+        ) : (
+          /* ── Thumbnail state ───────────────────────────────────────────────
+           * Static <img> keeps all clicks in the parent DOM so Lexical's
+           * CLICK_COMMAND fires correctly and the node can be selected.
+           * Clicking the red ▶ badge switches to playing state.              */
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: `https://img.youtube.com/vi/${videoID}/hqdefault.jpg`,
+                alt: "YouTube video",
+                draggable: false,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  display: "block",
+                  userSelect: "none",
+                  cursor: "pointer"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                "aria-label": "Play video",
+                onClick: () => setIsPlaying(true),
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 56,
+                  height: 56,
+                  background: "rgba(255, 0, 0, 0.85)",
+                  borderRadius: "50%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  cursor: "pointer"
+                },
+                children: /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 20, lineHeight: 1, marginLeft: 5 }, children: "\u25B6" })
+              }
+            )
+          ] })
+        ),
+        (isHovered || isResizing) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDelete,
+              title: "Remove video",
+              style: actionBtnStyle("right"),
+              children: "\xD7"
+            }
+          ),
+          isPlaying && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsPlaying(false);
+              },
+              title: "Stop video",
+              style: actionBtnStyle("left"),
+              children: "\u23F9"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                window.open(`https://www.youtube.com/watch?v=${videoID}`, "_blank", "noopener,noreferrer");
+              },
+              title: "Open in browser",
+              style: {
+                ...actionBtnStyle("left"),
+                top: isPlaying ? 44 : 8,
+                // stack below stop button when playing
+                fontSize: 13
+              },
+              children: "\u2197"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            VideoResizer,
+            {
+              containerRef,
+              onResizeStart: handleResizeStart,
+              onResizeEnd: handleResizeEnd
+            }
+          )
+        ] })
+      ]
     }
   ) });
 }
@@ -1843,6 +2105,7 @@ var YouTubeNode = class _YouTubeNode extends DecoratorBlockNode {
     iframe.setAttribute("width", String(this.__width));
     iframe.setAttribute("height", String(this.__height));
     iframe.style.border = "none";
+    iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-popups allow-presentation");
     iframe.setAttribute(
       "allow",
       "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -1870,16 +2133,10 @@ var YouTubeNode = class _YouTubeNode extends DecoratorBlockNode {
     writable.__width = width;
     writable.__height = height;
   }
-  decorate(_editor, config) {
-    const embedBlockTheme = config.theme.embedBlock || {};
-    const className = {
-      base: embedBlockTheme.base || "",
-      focus: embedBlockTheme.focus || ""
-    };
+  decorate(_editor, _config) {
     return /* @__PURE__ */ jsx(
       YouTubeComponent,
       {
-        className,
         format: this.__format,
         nodeKey: this.getKey(),
         videoID: this.__id,
@@ -2245,12 +2502,12 @@ function useFloatingPortalContainer(editor) {
   }, [editor]);
   return container;
 }
-function setPopupPositionFixed(popupEl, rect) {
+function setPopupPositionFixed(popupEl, rect, topBoundary) {
   const GAP = 8;
   const MARGIN = 8;
   let top = rect.top - popupEl.offsetHeight - GAP;
-  let left = rect.left + rect.width - popupEl.offsetWidth;
-  if (top < MARGIN) top = rect.bottom + GAP;
+  let left = rect.left;
+  if (top < topBoundary) top = rect.bottom + GAP;
   left = clamp2(left, MARGIN, window.innerWidth - popupEl.offsetWidth - MARGIN);
   popupEl.style.top = `${top}px`;
   popupEl.style.left = `${left}px`;
@@ -2292,10 +2549,22 @@ function FloatingCharacterStylesEditor({
       popupEl.classList.remove("is-open");
       return;
     }
-    const range = sel.getRangeAt(0);
-    const rect = range.getBoundingClientRect();
+    let rect;
+    try {
+      const focusRange = document.createRange();
+      focusRange.setStart(sel.focusNode, sel.focusOffset);
+      focusRange.setEnd(sel.focusNode, sel.focusOffset);
+      rect = focusRange.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0 && rect.top === 0 && rect.left === 0) {
+        throw new Error("empty focus rect");
+      }
+    } catch {
+      rect = sel.getRangeAt(0).getBoundingClientRect();
+    }
+    const toolbarEl = root?.closest(".lexical-rich-editor-root")?.querySelector(".editor-toolbar-root");
+    const topBoundary = toolbarEl ? toolbarEl.getBoundingClientRect().bottom + 8 : 8;
     if (!mouseDownRef.current) {
-      setPopupPositionFixed(popupEl, rect);
+      setPopupPositionFixed(popupEl, rect, topBoundary);
     }
     popupEl.classList.add("is-open");
   }, [editor]);
@@ -2503,6 +2772,11 @@ function useCharacterStylesPopup(editor, opts) {
         setIsText(false);
         return;
       }
+      const activeElement = document.activeElement;
+      if (activeElement && activeElement !== document.body && rootElement && !rootElement.contains(activeElement)) {
+        setIsText(false);
+        return;
+      }
       if (!$isRangeSelection(selection)) return;
       const node = getSelectedNode(selection);
       setIsBold(selection.hasFormat("bold"));
@@ -2523,7 +2797,11 @@ function useCharacterStylesPopup(editor, opts) {
   }, [editor]);
   useEffect(() => {
     document.addEventListener("selectionchange", updatePopupState);
-    return () => document.removeEventListener("selectionchange", updatePopupState);
+    document.addEventListener("focusin", updatePopupState);
+    return () => {
+      document.removeEventListener("selectionchange", updatePopupState);
+      document.removeEventListener("focusin", updatePopupState);
+    };
   }, [updatePopupState]);
   useEffect(() => editor.registerUpdateListener(updatePopupState), [editor, updatePopupState]);
   if (!portalContainer || !isText || isLink) return null;
@@ -2781,34 +3059,57 @@ function normalizeToBlockHtml(html) {
   if (pendingP) body.appendChild(pendingP);
   return body.innerHTML;
 }
+function splitHeadingsAtBrSequences(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const headings = Array.from(doc.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+  headings.forEach((el) => {
+    const inner = el.innerHTML;
+    const SEP = /<br\s*\/?>\s*(?:<br\s*\/?>)+/gi;
+    if (!SEP.test(inner)) return;
+    SEP.lastIndex = 0;
+    const parts = inner.split(SEP).map((p) => p.trim()).filter(Boolean);
+    if (parts.length <= 1) return;
+    const parent = el.parentNode;
+    if (!parent) return;
+    const tagName = el.tagName.toLowerCase();
+    const attrs = Array.from(el.attributes);
+    const fragment = doc.createDocumentFragment();
+    parts.forEach((part) => {
+      const newEl = doc.createElement(tagName);
+      attrs.forEach((a) => newEl.setAttribute(a.name, a.value));
+      newEl.innerHTML = part;
+      fragment.appendChild(newEl);
+    });
+    parent.replaceChild(fragment, el);
+  });
+  return doc.body.innerHTML;
+}
 var CustomOnChangePlugin = ({ value, onChange }) => {
   const [editor] = useLexicalComposerContext();
   const initializedRef = useRef(false);
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
   useEffect(() => {
     if (!value || initializedRef.current) return;
     initializedRef.current = true;
     editor.update(() => {
       const root = $getRoot();
       root.clear();
+      const safe = sanitizeHtml(value);
+      const cleaned = normalizeToBlockHtml(splitHeadingsAtBrSequences(safe));
       const parser = new DOMParser();
-      const dom = parser.parseFromString(value, "text/html");
+      const dom = parser.parseFromString(cleaned, "text/html");
       const nodes = $generateNodesFromDOM(editor, dom);
       root.append(...nodes);
-      $setSelection(null);
     });
   }, [editor, value]);
-  const handleChange = useCallback((editorState) => {
-    editorState.read(() => {
-      onChangeRef.current(postProcessOutput($generateHtmlFromNodes(editor)));
-    });
-  }, [editor]);
   return /* @__PURE__ */ jsx(
     OnChangePlugin,
     {
-      onChange: handleChange,
-      ignoreSelectionChange: true
+      onChange: (editorState) => {
+        editorState.read(() => {
+          const raw = $generateHtmlFromNodes(editor);
+          onChange(postProcessOutput(splitHeadingsAtBrSequences(raw)));
+        });
+      }
     }
   );
 };
@@ -2918,7 +3219,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       setLinkUrl("");
     }
     return true;
-  }, [anchorElem, editor, isLink, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
   useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
@@ -3016,7 +3317,6 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       {
         ref: inputRef,
         className: "link-input",
-        placeholder: "https://",
         value: editedLinkUrl,
         onChange: (event) => {
           setEditedLinkUrl(event.target.value);
@@ -3026,31 +3326,33 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         }
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "link-actions", children: [
+    /* @__PURE__ */ jsxs("div", { className: "link-input-actions", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        "div",
         {
-          type: "button",
-          className: "link-icon-btn link-cancel",
+          className: "link-cancel",
+          role: "button",
+          tabIndex: 0,
           title: "Cancel",
           "aria-label": "Cancel",
           onMouseDown: preventDefault,
           onClick: () => {
             setIsLinkEditMode(false);
           },
-          children: /* @__PURE__ */ jsx(Dismiss16Regular, {})
+          children: /* @__PURE__ */ jsx(DismissRegular, { fontSize: 16 })
         }
       ),
       /* @__PURE__ */ jsx(
-        "button",
+        "div",
         {
-          type: "button",
-          className: "link-icon-btn link-confirm",
+          className: "link-confirm",
+          role: "button",
+          tabIndex: 0,
           title: "Confirm",
           "aria-label": "Confirm",
           onMouseDown: preventDefault,
           onClick: handleLinkSubmission,
-          children: /* @__PURE__ */ jsx(Checkmark16Regular, {})
+          children: /* @__PURE__ */ jsx(CheckmarkRegular, { fontSize: 16 })
         }
       )
     ] })
@@ -3064,38 +3366,38 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         children: linkUrl
       }
     ),
-    /* @__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(
-        "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, {})
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "link-edit",
+        role: "button",
+        tabIndex: 0,
+        title: "Edit link",
+        "aria-label": "Edit link",
+        onMouseDown: preventDefault,
+        onClick: (event) => {
+          event.preventDefault();
+          setEditedLinkUrl(linkUrl);
+          setIsLinkEditMode(true);
+        },
+        children: /* @__PURE__ */ jsx(EditRegular, { fontSize: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "link-trash",
+        role: "button",
+        tabIndex: 0,
+        title: "Remove link",
+        "aria-label": "Remove link",
+        onMouseDown: preventDefault,
+        onClick: () => {
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        },
+        children: /* @__PURE__ */ jsx(DeleteRegular, { fontSize: 16 })
+      }
+    )
   ] }) });
 };
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
@@ -3176,8 +3478,6 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
     setIsLinkEditMode
   );
 };
-
-// src/Plugins/ImagePlugin.tsx
 init_ImageNode();
 var INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 var readClipboardImageAsDataURL = async (event) => {
@@ -3196,28 +3496,77 @@ 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", 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", 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,
-  open: externalOpen,
-  onClose
+  maxImageSizeMB,
+  validationMessages
 }) => {
   const [src, setSrc] = useState("");
   const [altText, setAltText] = useState("");
-  const [internalOpen, setInternalOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState("Upload");
   const [fileName, setFileName] = useState("");
+  const [fileSizeError, setFileSizeError] = useState(null);
   const hasModifier = useRef(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  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 isDisabled = disabled || src === "" || !!fileSizeError;
   useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
@@ -3229,57 +3578,75 @@ var InsertImageDialog = ({
   const onClick = (payload) => {
     if (disabled) return;
     activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-    handleClose();
+    setIsOpen(false);
+    setAltText("");
+    setSrc("");
+    setFileName("");
+    setFileSizeError(null);
   };
   const loadImage = (event) => {
     if (disabled) return;
     const files = event.target.files;
     if (!files || files.length === 0) return;
+    const file = files[0];
+    if (maxImageSizeMB !== void 0) {
+      const fileMB = file.size / (1024 * 1024);
+      if (fileMB > maxImageSizeMB) {
+        const override = validationMessages?.imageTooLarge;
+        const msg = override !== void 0 ? typeof override === "function" ? override(fileMB, maxImageSizeMB) : override : DEFAULT_VALIDATION_MESSAGES.imageTooLarge(fileMB, maxImageSizeMB);
+        setFileSizeError(msg);
+        setSrc("");
+        setFileName("");
+        event.target.value = "";
+        return;
+      }
+    }
+    setFileSizeError(null);
     const reader = new FileReader();
     reader.onload = () => {
       if (typeof reader.result === "string") {
         setSrc(reader.result);
-        setFileName(files[0].name);
+        setFileName(file.name);
       }
     };
-    reader.readAsDataURL(files[0]);
+    reader.readAsDataURL(file);
   };
-  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);
-        }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: disabled ? false : isOpen,
+      onOpenChange: (_, data) => {
+        if (!disabled) setIsOpen(data.open);
       },
-      "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(
+      children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { 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__ */ jsx(DialogSurface, { style: { maxWidth: 340 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert image" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
               "label",
               {
                 style: {
@@ -3318,7 +3685,8 @@ var InsertImageDialog = ({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+            fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
               Input,
               {
                 placeholder: "Alt text",
@@ -3327,25 +3695,24 @@ var InsertImageDialog = ({
                 onChange: (_, d) => setAltText(d.value),
                 value: altText
               }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxs(DialogActions, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
+            ) }),
+            selectedValue === "URL" && /* @__PURE__ */ jsx(
+              InsertImageByURL,
               {
-                appearance: "primary",
-                size: "small",
-                disabled: isAddDisabled,
-                onClick: () => onClick({ altText, src }),
-                children: "Add"
+                disabled,
+                setIsOpen: (open) => setIsOpen(open),
+                onClick: (payload) => onClick(payload)
               }
-            ),
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { 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" })
           ] })
         ] }) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = useLexicalComposerContext();
@@ -3358,9 +3725,21 @@ var ImagesPlugin = ({ captionsEnabled }) => {
         INSERT_IMAGE_COMMAND,
         (payload) => {
           const imageNode = $createImageNode(payload);
-          $insertNodes([imageNode]);
-          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            const topLevel = anchorNode.getTopLevelElementOrThrow();
+            const imageParagraph = $createParagraphNode();
+            imageParagraph.append(imageNode);
+            topLevel.insertAfter(imageParagraph);
+            const tail = $createParagraphNode();
+            imageParagraph.insertAfter(tail);
+            tail.select();
+          } else {
+            $insertNodes([imageNode]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+              $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            }
           }
           return true;
         },
@@ -3411,12 +3790,25 @@ var TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAA
 var img = document.createElement("img");
 img.src = TRANSPARENT_IMAGE;
 var $onDragStart = (event) => {
-  const node = $getImageNodeInSelection();
+  let node = $getImageNodeInSelection();
+  if (!node) {
+    const target = event.target;
+    if (!target) return false;
+    const lexicalNode = $getNearestNodeFromDOMNode(target);
+    if ($isImageNode(lexicalNode)) {
+      node = lexicalNode;
+    }
+  }
   if (!node) return false;
   const dataTransfer = event.dataTransfer;
   if (!dataTransfer) return false;
+  const imgEl = event.target?.closest?.("span.editor-image")?.querySelector?.("img") ?? event.target;
+  if (imgEl instanceof HTMLElement) {
+    dataTransfer.setDragImage(imgEl, 20, 20);
+  } else {
+    dataTransfer.setDragImage(img, 0, 0);
+  }
   dataTransfer.setData("text/plain", "_");
-  dataTransfer.setDragImage(img, 0, 0);
   dataTransfer.setData(
     "application/x-lexical-drag",
     JSON.stringify({
@@ -3444,20 +3836,23 @@ var $onDragover = (event) => {
   return true;
 };
 var $onDrop = (event, editor) => {
-  const node = $getImageNodeInSelection();
-  if (!node) return false;
   const data = getDragImageData(event);
   if (!data) return false;
   event.preventDefault();
   if (canDropImage(event)) {
+    const sourceKey = data.key;
+    if (sourceKey) {
+      const sourceNode = $getNodeByKey(sourceKey);
+      if (sourceNode) sourceNode.remove();
+    }
     const range = getDragSelection(event);
-    node.remove();
     const rangeSelection = $createRangeSelection();
     if (range !== null && range !== void 0) {
       rangeSelection.applyDOMRange(range);
     }
     $setSelection(rangeSelection);
-    editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+    const { key: _key, ...insertPayload } = data;
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, insertPayload);
   }
   return true;
 };
@@ -3477,7 +3872,7 @@ var getDragImageData = (event) => {
 };
 var canDropImage = (event) => {
   const target = event.target;
-  return !!(isHTMLElement(target) && !target.closest("code, span.editor-image") && isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root"));
+  return !!(isHTMLElement(target) && !target.closest("code, span.editor-image") && target.closest('[contenteditable="true"]'));
 };
 var getDragSelection = (event) => {
   let range;
@@ -3492,8 +3887,6 @@ var getDragSelection = (event) => {
   }
   return range;
 };
-
-// src/Plugins/InlineImage.tsx
 init_InlineImage();
 init_InlineImageNode();
 var INSERT_INLINE_IMAGE_COMMAND = createCommand(
@@ -3512,39 +3905,45 @@ var useStyles = makeStyles({
 var InsertInlineImageDialog = ({
   disabled,
   activeEditor,
-  open: externalOpen,
-  onClose
+  maxImageSizeMB,
+  validationMessages
 }) => {
   const hasModifier = useRef(false);
   const [src, setSrc] = useState("");
-  const [internalOpen, setInternalOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const [altText, setAltText] = useState("");
   const [fileName, setFileName] = useState("");
   const [position, setPosition] = useState("left");
+  const [fileSizeError, setFileSizeError] = useState(null);
   const styles = useStyles();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  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 isDisabled = disabled || src === "" || !!fileSizeError;
   const loadImage = (event) => {
     if (disabled) return;
     const files = event.target.files;
     if (!files || files.length === 0) return;
+    const file = files[0];
+    if (maxImageSizeMB !== void 0) {
+      const fileMB = file.size / (1024 * 1024);
+      if (fileMB > maxImageSizeMB) {
+        const override = validationMessages?.imageTooLarge;
+        const msg = override !== void 0 ? typeof override === "function" ? override(fileMB, maxImageSizeMB) : override : DEFAULT_VALIDATION_MESSAGES.imageTooLarge(fileMB, maxImageSizeMB);
+        setFileSizeError(msg);
+        setSrc("");
+        setFileName("");
+        event.target.value = "";
+        return;
+      }
+    }
+    setFileSizeError(null);
     const reader = new FileReader();
     reader.onload = () => {
       if (typeof reader.result === "string") {
         setSrc(reader.result);
-        setFileName(files[0].name);
+        setFileName(file.name);
       }
     };
-    reader.readAsDataURL(files[0]);
+    reader.readAsDataURL(file);
   };
   useEffect(() => {
     const handler = (e) => {
@@ -3557,44 +3956,48 @@ var InsertInlineImageDialog = ({
     if (disabled) return;
     const payload = { altText, position, src };
     activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload);
-    handleClose();
+    setIsOpen(false);
+    setAltText("");
+    setSrc("");
+    setFileName("");
+    setFileSizeError(null);
   };
-  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);
-        }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: disabled ? false : isOpen,
+      onOpenChange: (_, data) => {
+        if (!disabled) setIsOpen(data.open);
       },
-      "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(
+      children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { 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(DialogSurface, { style: { maxWidth: 360 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert inline image" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
               "label",
               {
                 style: {
@@ -3633,22 +4036,25 @@ var InsertInlineImageDialog = ({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(Field, { label: "Position", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxs(
               Dropdown,
               {
-                placeholder: "Left Align",
                 className: styles.alignDropdown,
                 disabled,
+                value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
+                selectedOptions: [position ?? "left"],
                 listbox: { style: { width: "120px" } },
                 root: { style: { borderBottom: "1px solid black" } },
+                onOptionSelect: (_, data) => setPosition(data.optionValue),
                 children: [
-                  /* @__PURE__ */ jsx(Option, { 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(Option, { value: "left", children: "Left" }, "left"),
+                  /* @__PURE__ */ jsx(Option, { value: "right", children: "Right" }, "right"),
+                  /* @__PURE__ */ jsx(Option, { value: "full", children: "Full" }, "full")
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+            fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
               Input,
               {
                 placeholder: "Alt text",
@@ -3663,9 +4069,8 @@ var InsertInlineImageDialog = ({
             /* @__PURE__ */ jsx(
               Button,
               {
-                appearance: "primary",
                 size: "small",
-                disabled: isAddDisabled,
+                disabled: isDisabled,
                 onClick: handleOnClick,
                 children: "Add"
               },
@@ -3676,16 +4081,16 @@ var InsertInlineImageDialog = ({
               {
                 size: "small",
                 disabled,
-                onClick: handleClose,
+                onClick: () => setIsOpen(false),
                 children: "Cancel"
               },
               "file-inline-upload-cancel"
             )
           ] })
         ] }) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 var InlineImagePlugin = () => {
   const [editor] = useLexicalComposerContext();
@@ -3702,6 +4107,11 @@ var InlineImagePlugin = () => {
           if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
             $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
           }
+          const parent = imageNode.getParent();
+          if (parent && typeof parent.setFormat === "function") {
+            const fmt = payload.position === "right" ? "right" : payload.position === "full" ? "center" : "left";
+            parent.setFormat(fmt);
+          }
           return true;
         },
         COMMAND_PRIORITY_EDITOR
@@ -3730,12 +4140,23 @@ var TRANSPARENT_IMAGE2 = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEA
 var img2 = document.createElement("img");
 img2.src = TRANSPARENT_IMAGE2;
 function $onDragStart2(event) {
-  const node = $getImageNodeInSelection2();
+  let node = $getImageNodeInSelection2();
+  if (!node) {
+    const target = event.target;
+    if (!target) return false;
+    const lexicalNode = $getNearestNodeFromDOMNode(target);
+    if ($isInlineImageNode(lexicalNode)) node = lexicalNode;
+  }
   if (!node) return false;
   const dataTransfer = event.dataTransfer;
   if (!dataTransfer) return false;
-  dataTransfer.setData("text/plain", "_");
-  dataTransfer.setDragImage(img2, 0, 0);
+  const imgEl = event.target?.closest?.(".inline-editor-image")?.querySelector?.("img") ?? event.target;
+  if (imgEl instanceof HTMLElement) {
+    dataTransfer.setDragImage(imgEl, 20, 20);
+  } else {
+    dataTransfer.setDragImage(img2, 0, 0);
+  }
+  dataTransfer.setData("text/plain", "_");
   dataTransfer.setData(
     "application/x-lexical-drag",
     JSON.stringify({
@@ -3754,28 +4175,31 @@ function $onDragStart2(event) {
   return true;
 }
 var $onDragover2 = (event) => {
-  const node = $getImageNodeInSelection2();
-  if (!node) return false;
+  const hasDragData = !!event.dataTransfer?.types.includes("application/x-lexical-drag");
+  if (!hasDragData) return false;
   if (!canDropImage2(event)) {
     event.preventDefault();
   }
   return true;
 };
 var $onDrop2 = (event, editor) => {
-  const node = $getImageNodeInSelection2();
-  if (!node) return false;
   const data = getDragImageData2(event);
   if (!data) return false;
   event.preventDefault();
   if (canDropImage2(event)) {
+    const sourceKey = data.key;
+    if (sourceKey) {
+      const sourceNode = $getNodeByKey(sourceKey);
+      if (sourceNode) sourceNode.remove();
+    }
     const range = getDragSelection2(event);
-    node.remove();
     const rangeSelection = $createRangeSelection();
     if (range !== null && range !== void 0) {
       rangeSelection.applyDOMRange(range);
     }
     $setSelection(rangeSelection);
-    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
+    const { key: _key, ...insertPayload } = data;
+    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, insertPayload);
   }
   return true;
 };
@@ -3795,7 +4219,7 @@ var getDragImageData2 = (event) => {
 };
 var canDropImage2 = (event) => {
   const target = event.target;
-  return !!(isHTMLElement(target) && !target.closest("code, span.editor-image") && isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root"));
+  return !!(isHTMLElement(target) && !target.closest("code, span.editor-image, .inline-editor-image") && target.closest('[contenteditable="true"]'));
 };
 var getDragSelection2 = (event) => {
   let range;
@@ -3886,20 +4310,79 @@ function hasBlock(editor, kind) {
 }
 
 // src/Plugins/RefApiPlugin.tsx
+function getUserContentSignature(editor) {
+  const parts = [];
+  editor.getEditorState().read(() => {
+    const root = $getRoot();
+    const collectNode = (node) => {
+      if ($isHtmlBlockNode(node)) return;
+      if ($isDecoratorNode(node)) {
+        parts.push(`D:${node.getKey()}`);
+        return;
+      }
+      if ($isLineBreakNode(node)) {
+        parts.push("BR");
+        return;
+      }
+      if ($isTextNode(node)) {
+        parts.push(`T${node.getFormat()}:${node.getStyle()}:${node.getTextContent()}`);
+        return;
+      }
+      if ($isElementNode(node)) {
+        const type = node.getType();
+        const tag = typeof node.getTag === "function" ? node.getTag() : "";
+        const list = typeof node.getListType === "function" ? node.getListType() : "";
+        const fmt = typeof node.getFormat === "function" ? node.getFormat() : "";
+        parts.push(`[${type}:${tag}:${list}:${fmt}]`);
+        for (const child of node.getChildren()) {
+          collectNode(child);
+        }
+        parts.push("[/]");
+      }
+    };
+    for (const child of root.getChildren()) {
+      if ($isHtmlBlockNode(child)) continue;
+      collectNode(child);
+    }
+  });
+  return JSON.stringify(parts);
+}
 function RefApiPlugin({
   forwardedRef,
   contentEditableDomRef,
-  focusedRef,
-  setRefErrors
+  focusedRef
 }) {
   const [editor] = useLexicalComposerContext();
+  const cleanBaselineRef = React9__default.useRef(null);
+  React9__default.useEffect(() => {
+    const capture = () => {
+      if (cleanBaselineRef.current === null) {
+        cleanBaselineRef.current = getUserContentSignature(editor);
+      }
+    };
+    const unregister = editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+      if (cleanBaselineRef.current !== null) {
+        unregister();
+        return;
+      }
+      if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+      capture();
+      unregister();
+    });
+    const timerId = setTimeout(capture, 0);
+    return () => {
+      clearTimeout(timerId);
+      unregister();
+    };
+  }, [editor]);
   useImperativeHandle(
     forwardedRef,
     () => ({
       setValue: (html) => {
         editor.update(() => {
+          const safe = normalizeToBlockHtml(sanitizeHtml(html || ""));
           const parser = new DOMParser();
-          const dom = parser.parseFromString(html || "<p></p>", "text/html");
+          const dom = parser.parseFromString(safe || "<p></p>", "text/html");
           const nodes = $generateNodesFromDOM(editor, dom);
           const root = $getRoot();
           root.clear();
@@ -3909,9 +4392,9 @@ function RefApiPlugin({
       getValue: () => {
         let html = "";
         editor.getEditorState().read(() => {
-          html = $generateHtmlFromNodes(editor, null);
+          html = postProcessOutput(splitHeadingsAtBrSequences($generateHtmlFromNodes(editor, null)));
         });
-        return postProcessOutput(html);
+        return html;
       },
       clear: () => {
         editor.update(() => {
@@ -3929,14 +4412,20 @@ function RefApiPlugin({
       },
       isFocused: () => focusedRef.current,
       getEditor: () => editor,
-      setErrors: (messages) => setRefErrors(messages),
-      clearErrors: () => setRefErrors([]),
       // Generic blocks (signature, footer, banner, etc.)
       upsertBlock: (spec) => upsertBlock(editor, spec),
       removeBlock: (kind) => removeBlock(editor, kind),
-      hasBlock: (kind) => hasBlock(editor, kind)
+      hasBlock: (kind) => hasBlock(editor, kind),
+      checkDirty: () => {
+        if (cleanBaselineRef.current === null) return false;
+        const current = getUserContentSignature(editor);
+        return current !== cleanBaselineRef.current;
+      },
+      markClean: () => {
+        cleanBaselineRef.current = getUserContentSignature(editor);
+      }
     }),
-    [editor, contentEditableDomRef, focusedRef, setRefErrors]
+    [editor, contentEditableDomRef, focusedRef]
   );
   return null;
 }
@@ -4577,8 +5066,22 @@ function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
   const [isInTable, setIsInTable] = React9.useState(false);
   const [anchorRect, setAnchorRect] = React9.useState(null);
+  const [contentRight, setContentRight] = React9.useState(null);
   const [open, setOpen] = React9.useState(false);
+  const openRef = React9.useRef(false);
+  const savedAnchorRef = React9.useRef(null);
+  const measureContentRight = React9.useCallback((cellDom) => {
+    try {
+      const range = document.createRange();
+      range.selectNodeContents(cellDom);
+      const cr = range.getBoundingClientRect();
+      return cr.width > 2 ? cr.right : null;
+    } catch {
+      return null;
+    }
+  }, []);
   const updateFromSelection = React9.useCallback(() => {
+    if (openRef.current) return;
     const root = editor.getRootElement();
     if (!root) return;
     editor.getEditorState().read(() => {
@@ -4590,6 +5093,7 @@ function TableActionMenuPlugin({ disabled = false }) {
           if (dom) {
             setIsInTable(true);
             setAnchorRect(dom.getBoundingClientRect());
+            setContentRight(null);
             return;
           }
         }
@@ -4597,6 +5101,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!$isRangeSelection(selection)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setContentRight(null);
         return;
       }
       const anchorNode = selection.anchor.getNode();
@@ -4604,18 +5109,28 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!cellNode || !$isTableCellNode(cellNode)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setContentRight(null);
         return;
       }
       const cellDom = editor.getElementByKey(cellNode.getKey());
       if (!cellDom) {
         setIsInTable(false);
         setAnchorRect(null);
+        setContentRight(null);
         return;
       }
       setIsInTable(true);
       setAnchorRect(cellDom.getBoundingClientRect());
+      setContentRight(measureContentRight(cellDom));
+      if ($isRangeSelection(selection)) {
+        savedAnchorRef.current = {
+          key: selection.anchor.key,
+          offset: selection.anchor.offset,
+          type: selection.anchor.type
+        };
+      }
     });
-  }, [editor]);
+  }, [editor, measureContentRight]);
   React9.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
@@ -4672,30 +5187,37 @@ function TableActionMenuPlugin({ disabled = false }) {
       COMMAND_PRIORITY_HIGH
     );
   }, [editor, disabled]);
-  React9.useEffect(() => {
-    if (!isInTable && open) setOpen(false);
-  }, [isInTable, open]);
   const canShow = isInTable && !!anchorRect && !disabled;
   const handleStyle = React9.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
-    const left = Math.max(8, anchorRect.right - 34);
+    const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
+    const left = contentRight !== null ? Math.max(anchorRect.left + 4, Math.min(contentRight + 4, clampedCellRight - 32)) : Math.max(8, anchorRect.left + 8);
     return {
       position: "fixed",
       top,
       left,
       zIndex: 9999
     };
-  }, [anchorRect]);
+  }, [anchorRect, contentRight]);
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
   const run = React9.useCallback(
     (fn) => {
       if (disabled) return;
-      editor.focus();
-      editor.update(() => fn());
+      openRef.current = false;
       setOpen(false);
+      editor.update(() => {
+        const saved = savedAnchorRef.current;
+        if (saved && $getNodeByKey(saved.key)) {
+          const sel = $createRangeSelection();
+          sel.anchor.set(saved.key, saved.offset, saved.type);
+          sel.focus.set(saved.key, saved.offset, saved.type);
+          $setSelection(sel);
+        }
+        fn();
+      });
     },
     [disabled, editor]
   );
@@ -4705,32 +5227,31 @@ function TableActionMenuPlugin({ disabled = false }) {
   const insertColLeft = () => run(() => $insertTableColumnAtSelection(false));
   const deleteRow = () => run(() => $deleteTableRowAtSelection());
   const deleteCol = () => run(() => $deleteTableColumnAtSelection());
-  const deleteTable = () => run(() => {
-    const selection = $getSelection();
-    if ($isTableSelection(selection)) {
-      const tableNode = selection.getNodes().find((n) => $isTableNode(n));
+  const deleteTable = () => {
+    if (disabled) return;
+    openRef.current = false;
+    setOpen(false);
+    editor.update(() => {
+      const saved = savedAnchorRef.current;
+      if (!saved) return;
+      const anchorNode = $getNodeByKey(saved.key);
+      if (!anchorNode) return;
+      const tableNode = $findMatchingParent(anchorNode, (n) => $isTableNode(n));
       if (tableNode) tableNode.remove();
-      return;
-    }
-    if (!$isRangeSelection(selection)) return;
-    const node = selection.anchor.getNode();
-    const cell = $findMatchingParent(node, (n) => $isTableCellNode(n)) ?? ($isTableCellNode(node) ? node : null);
-    if (!cell) return;
-    const table = $getTableNodeFromLexicalNodeOrThrow(cell);
-    table.remove();
-  });
+    });
+  };
   if (!canShow || !handleStyle) return null;
   return createPortal(
-    /* @__PURE__ */ jsx("div", { style: handleStyle, className: "aoTableActionHandleRoot", children: /* @__PURE__ */ jsxs(Menu, { open, onOpenChange: (_, data) => setOpen(data.open), children: [
+    /* @__PURE__ */ jsx("div", { style: handleStyle, className: "aoTableActionHandleRoot", "data-lexical-editor-portal": "true", children: /* @__PURE__ */ jsxs(Menu, { open, onOpenChange: (_, data) => {
+      openRef.current = data.open;
+      setOpen(data.open);
+    }, children: [
       /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: "aoTableActionHandleBtn",
           "aria-label": "Table options",
-          onMouseDown: (e) => {
-            e.preventDefault();
-          },
           children: /* @__PURE__ */ jsx(ChevronDown12Regular, {})
         }
       ) }),
@@ -5054,8 +5575,8 @@ function getToolbarGroupsByLevel(level) {
         // ['undo', 'redo', '|'],
         ["Bold", "Italic", "Underline", "|"],
         ["ColorPicker", "|"],
-        ["Link", "|"],
-        ["Insert", "|"],
+        ["Link", "Table", "|"],
+        // ['Image', 'Youtube', 'InlineImage', '|'],
         ["Heading", "|"],
         ["FontFamily", "|"],
         ["FontSize", "|"],
@@ -5069,8 +5590,9 @@ function getToolbarGroupsByLevel(level) {
         // ['undo', 'redo', '|'],
         ["Bold", "Italic", "Underline", "|"],
         ["ColorPicker", "|"],
-        ["Link", "|"],
-        ["Insert", "|"],
+        ["Link", "Table", "|"],
+        // ['CodeBlock', '|'],
+        ["Image", "Youtube", "InlineImage", "|"],
         ["Heading", "|"],
         ["FontFamily", "|"],
         ["FontSize", "|"],
@@ -5080,6 +5602,85 @@ function getToolbarGroupsByLevel(level) {
       ];
   }
 }
+var DEFAULT_FONT_SIZE = 15;
+function $splitBlocksAtLineBreaks(selection) {
+  const blocksToSplit = /* @__PURE__ */ new Set();
+  for (const node of selection.getNodes()) {
+    const block = node.getTopLevelElement();
+    if (block && $isElementNode(block)) {
+      const children = block.getChildren();
+      if (children.some($isLineBreakNode)) {
+        blocksToSplit.add(block);
+      }
+    }
+  }
+  for (const block of blocksToSplit) {
+    const children = [...block.getChildren()];
+    const groups = [[]];
+    for (const child of children) {
+      if ($isLineBreakNode(child)) {
+        groups.push([]);
+      } else {
+        groups[groups.length - 1].push(child);
+      }
+    }
+    const nonEmptyCount = groups.filter((g) => g.length > 0).length;
+    if (nonEmptyCount <= 1) continue;
+    for (let i = groups.length - 1; i >= 1; i--) {
+      const group = groups[i];
+      const newBlock = group.length === 0 ? $createParagraphNode() : $isHeadingNode(block) ? $createHeadingNode(block.getTag()) : $createParagraphNode();
+      group.forEach((child) => newBlock.append(child));
+      block.insertAfter(newBlock);
+    }
+    [...block.getChildren()].filter($isLineBreakNode).forEach((br) => br.remove());
+  }
+}
+function $splitBlockAtPartialSelection(selection) {
+  if (selection.isCollapsed()) return false;
+  const anchorBlock = selection.anchor.getNode().getTopLevelElement();
+  const focusBlock = selection.focus.getNode().getTopLevelElement();
+  if (!anchorBlock || !focusBlock || !anchorBlock.is(focusBlock)) return false;
+  if (!$isElementNode(anchorBlock)) return false;
+  const block = anchorBlock;
+  const extractedNodes = selection.extract();
+  if (!extractedNodes.length) return false;
+  const allDirect = extractedNodes.every((n) => {
+    const parent = n.getParent();
+    return parent !== null && parent.is(block);
+  });
+  if (!allDirect) return false;
+  const allChildren = [...block.getChildren()];
+  const firstSelected = extractedNodes[0];
+  const lastSelected = extractedNodes[extractedNodes.length - 1];
+  const firstIdx = allChildren.findIndex((n) => n.is(firstSelected));
+  const lastIdx = allChildren.findIndex((n) => n.is(lastSelected));
+  if (firstIdx === -1 || lastIdx === -1) return false;
+  if (firstIdx === 0 && lastIdx === allChildren.length - 1) return false;
+  const selectedNodes = allChildren.slice(firstIdx, lastIdx + 1);
+  const afterNodes = allChildren.slice(lastIdx + 1);
+  if (afterNodes.length > 0) {
+    const afterBlock = $isHeadingNode(block) ? $createHeadingNode(block.getTag()) : $createParagraphNode();
+    afterNodes.forEach((n) => afterBlock.append(n));
+    block.insertAfter(afterBlock);
+  }
+  const selectedBlock = $createParagraphNode();
+  selectedNodes.forEach((n) => selectedBlock.append(n));
+  block.insertAfter(selectedBlock);
+  if (block.getChildrenSize() === 0) {
+    block.remove();
+  }
+  selectedBlock.select();
+  return true;
+}
+var formatParagraph = (editor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      $splitBlocksAtLineBreaks(selection);
+    }
+    $setBlocksType($getSelection(), () => $createParagraphNode());
+  });
+};
 var PRESET = [
   "#000000",
   "#434343",
@@ -5363,7 +5964,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
         directionalHint: 4,
         className: "aoColorCallout",
         preventDismissOnEvent,
-        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 14 }, styles: { root: { padding: "14px 16px 16px", width: 288 } }, children: [
+        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 14 }, styles: { root: { padding: "14px 16px 16px", width: 250 } }, children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "#242424", letterSpacing: 0.1 }, children: title }),
             /* @__PURE__ */ jsx(
@@ -5376,8 +5977,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  width: 24,
-                  height: 24,
+                  width: 18,
+                  height: 18,
                   padding: 0,
                   border: "none",
                   borderRadius: 4,
@@ -5400,7 +6001,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
               style: {
                 position: "relative",
                 width: "100%",
-                height: 150,
+                height: 125,
                 borderRadius: 8,
                 overflow: "hidden",
                 cursor: "crosshair",
@@ -5489,8 +6090,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
               "div",
               {
                 style: {
-                  width: 32,
-                  height: 32,
+                  width: 20,
+                  height: 20,
                   borderRadius: 6,
                   flexShrink: 0,
                   background: hex,
@@ -5531,10 +6132,10 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
                       title: c,
                       "aria-label": c,
                       style: {
-                        width: 22,
-                        height: 22,
+                        width: 18,
+                        height: 18,
                         padding: 0,
-                        borderRadius: 5,
+                        borderRadius: 4,
                         background: c,
                         cursor: "pointer",
                         boxShadow: isSelected ? "0 0 0 2px #fff, 0 0 0 3px #4a86e8" : "inset 0 0 0 1px rgba(0,0,0,0.15)",
@@ -5744,7 +6345,6 @@ var FontFamilyPlugin = ({ disabled = false }) => {
     "font-family"
   );
 };
-var DEFAULT_FONT_SIZE = 15;
 var FONT_SIZE_OPTIONS = [
   "8",
   "9",
@@ -5880,135 +6480,43 @@ var FontSizePlugin = ({ disabled }) => {
     "fontsize"
   ) });
 };
-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
+  setIsLinkEditMode
 }) => {
   const [editor] = useLexicalComposerContext();
-  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) => {
+  const insertLink = () => {
     if (disabled) return;
-    if (getLinkValidationMessage(link2)) return;
-    const trimmedLink = link2.trim();
-    const href = VERBATIM_LINK_RE.test(trimmedLink) ? trimmedLink : `https://${trimmedLink}`;
     editor.update(() => {
       const selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        const textNode = new TextNode(text2);
-        const linkNode = $createLinkNode(href);
-        linkNode.append(textNode);
-        selection.insertNodes([linkNode]);
+      if (!$isRangeSelection(selection)) return;
+      const node = getSelectedNode2(selection);
+      const linkParent = $findMatchingParent$1(node, $isLinkNode);
+      if (!linkParent && !$isLinkNode(node)) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
       }
     });
-    handleClose();
+    setIsLinkEditMode(true);
   };
-  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);
-        }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      title: "Add link",
+      disabled,
+      icon: /* @__PURE__ */ jsx(LinkAddRegular, { style: { color: iconColor } }),
+      style: {
+        background: "none",
+        border: "none",
+        margin: 2,
+        opacity: disabled ? 0.55 : 1,
+        cursor: disabled ? "not-allowed" : "pointer"
       },
-      "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,
-                  {
-                    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__ */ 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" })
-          ] })
-        ] }) })
-      }
-    )
-  ] });
+      onClick: insertLink
+    },
+    "insert-link"
+  );
 };
 function PageSetupPlugin({ disabled, value, onChange }) {
   const sizeLabel = value.size === "pageless" ? "Pageless" : PAGE_SIZE_OPTIONS.find((o) => o.key === value.size)?.label ?? "Pageless";
@@ -6064,281 +6572,177 @@ function PageSetupPlugin({ disabled, value, onChange }) {
     }
   );
 }
-var MAX_ROWS = 50;
-var MAX_COLS = 50;
-var TableItemPlugin = ({
-  disabled,
-  open: externalOpen,
-  onClose
-}) => {
+var TableItemPlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
   const [columns, setColumns] = useState("");
   const [rows, setRows] = useState("");
-  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 [isOpen, setIsOpen] = useState(false);
   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);
     });
-    handleClose();
+    setRows("");
+    setColumns("");
+    setIsOpen(false);
   };
-  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);
-        }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: disabled ? false : isOpen,
+      onOpenChange: (_, data) => {
+        if (!disabled) setIsOpen(data.open);
       },
-      "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,
+      children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { 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(DialogSurface, { style: { maxWidth: 300 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert table" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
               {
-                label: "Rows",
-                orientation: "horizontal",
-                size: "small",
-                validationMessage: rowError || void 0,
-                validationState: rowError ? "error" : "none",
-                children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    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)
-                  }
-                )
+                autoFocus: !disabled,
+                value: rows,
+                placeholder: "Rows",
+                appearance: "underline",
+                disabled,
+                onChange: (_, v) => setRows(v.value)
               }
-            ),
-            /* @__PURE__ */ jsx(
-              Field,
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
               {
-                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)
-                  }
-                )
+                value: columns,
+                placeholder: "Columns",
+                appearance: "underline",
+                disabled,
+                onChange: (_, v) => setColumns(v.value)
               }
-            )
+            ) })
           ] }) }),
           /* @__PURE__ */ jsxs(DialogActions, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
-                appearance: "primary",
                 size: "small",
-                disabled: isAddDisabled,
+                appearance: "primary",
+                disabled: disabled || !rows || !columns,
                 onClick: onAddTable,
                 children: "Add"
               }
             ),
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
           ] })
         ] }) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
-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
-}) => {
+var YoutubeUploadPlugin = ({ disabled }) => {
   const [url, setURL] = useState("");
-  const [urlError, setUrlError] = useState("");
-  const [internalOpen, setInternalOpen] = useState(false);
+  const [isOpen, setIsOpen] = 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 id = extractYouTubeId(url);
-    if (!id) {
-      setUrlError("Invalid YouTube URL. Supported: watch?v=, youtu.be/, /shorts/, /live/");
-      return;
-    }
-    setUrlError("");
+    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;
     editor.update(() => {
       const node = $createYouTubeNode(id);
       $insertNodes([node]);
     });
-    handleClose();
+    setURL("");
+    setIsOpen(false);
   };
-  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);
-        }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: disabled ? false : isOpen,
+      onOpenChange: (_, data) => {
+        if (!disabled) setIsOpen(data.open);
       },
-      "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" })
+      children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { 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(DialogSurface, { style: { maxWidth: 320 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Embed YouTube video" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsx(Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoFocus: !disabled,
+              disabled,
+              value: url,
+              appearance: "underline",
+              placeholder: "Add Youtube video URL",
+              onChange: (_, v) => setURL(v.value)
+            }
+          ) }) }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
           ] })
         ] }) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
+var TextAlphaListLtrFilled = ({ style }) => /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8.75 4a.75.75 0 1 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.75 9a.75.75 0 1 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 14.75c0-.41.34-.75.75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75Z" }),
+  /* @__PURE__ */ jsx("text", { x: "3.5", y: "6", fontSize: "5.5", fontWeight: "bold", textAnchor: "middle", children: "a" }),
+  /* @__PURE__ */ jsx("text", { x: "3.5", y: "11", fontSize: "5.5", fontWeight: "bold", textAnchor: "middle", children: "b" }),
+  /* @__PURE__ */ jsx("text", { x: "3.5", y: "16", fontSize: "5.5", fontWeight: "bold", textAnchor: "middle", children: "c" })
+] });
 var useStyles4 = makeStyles({
   dropdown: {
     minInlineSize: "90px",
@@ -6356,25 +6760,42 @@ var ALLOWED_TOKENS = {
   Bold: true,
   Italic: true,
   Underline: true,
+  Strikethrough: true,
+  Subscript: true,
+  Superscript: true,
+  Highlight: true,
+  Uppercase: true,
+  Lowercase: true,
+  Capitalize: true,
+  BulletList: true,
+  NumberList: true,
+  AlphabeticalList: true,
+  Quote: true,
+  PageBreak: true,
+  H1: true,
+  H2: true,
+  H3: true,
+  H4: true,
+  H5: true,
+  H6: true,
   ColorPicker: true,
   Link: true,
   Table: true,
   Image: true,
   InlineImage: true,
   Youtube: true,
-  Insert: true,
-  Heading: true,
   FontFamily: true,
   FontSize: true,
+  Align: true,
+  Heading: true,
   Decorators: true,
   CodeBlock: true,
-  Align: true,
   PageSetup: true
 };
 function sanitizePluginGroups(groups) {
-  if (!groups || groups.length === 0) return [];
+  if (!Array.isArray(groups) || groups.length === 0) return [];
   return groups.map(
-    (g) => (g || []).map((t) => t.trim()).filter((t) => ALLOWED_TOKENS[t] === true)
+    (g) => (Array.isArray(g) ? g : []).map((t) => typeof t === "string" ? t.trim() : "").filter((t) => ALLOWED_TOKENS[t] === true)
   ).filter((g) => g.length > 0);
 }
 var ToolBarPlugins = (props) => {
@@ -6394,9 +6815,9 @@ 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 [decoratorOpen, setDecoratorOpen] = useState(false);
+  const decoratorSelectingRef = React9__default.useRef(false);
+  const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
     const selection = $getSelection();
@@ -6438,6 +6859,10 @@ var ToolBarPlugins = (props) => {
       setSelectNodeType("paragraph");
       return;
     }
+    if ($isAlphaListNode(element)) {
+      setSelectNodeType("alpha");
+      return;
+    }
     if ($isListNode(element)) {
       const parentList = $getNearestNodeOfType(anchorNode, ListNode);
       const type2 = parentList ? parentList.getTag() : element.getTag();
@@ -6449,23 +6874,15 @@ var ToolBarPlugins = (props) => {
       ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "quote", "code"].includes(type) ? type : "paragraph"
     );
   };
-  const applyToBlock = React9__default.useCallback(
-    (fn) => {
-      editor.update(() => {
-        const saved = lastSelectionRef.current;
-        if (saved) $setSelection(saved.clone());
-        const sel = $getSelection();
-        if ($isRangeSelection(sel)) fn(sel);
-      });
-    },
-    [editor]
-  );
   const formatQuote = () => {
-    applyToBlock((selection) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return;
       if (selectNodeType === "quote") {
-        $setBlocksType(selection, () => $createParagraphNode());
+        formatParagraph(editor);
       } else {
-        $setBlocksType(selection, () => $createQuoteNode());
+        $splitBlocksAtLineBreaks(selection);
+        $setBlocksType($getSelection(), () => $createQuoteNode());
       }
     });
   };
@@ -6482,8 +6899,6 @@ var ToolBarPlugins = (props) => {
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
-          const sel = $getSelection();
-          if ($isRangeSelection(sel)) lastSelectionRef.current = sel.clone();
           updateToolbarPlugins();
           return false;
         },
@@ -6515,52 +6930,16 @@ var ToolBarPlugins = (props) => {
         editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight");
         break;
       case "leftAlign" /* LeftAlign */:
-        applyToBlock((sel) => {
-          const seen = /* @__PURE__ */ new Set();
-          sel.getNodes().forEach((n) => {
-            const t = n.getTopLevelElementOrThrow();
-            if (!seen.has(t.getKey())) {
-              seen.add(t.getKey());
-              t.setFormat("left");
-            }
-          });
-        });
+        applyAlignmentWithSplit("left");
         break;
       case "rightAlign" /* RightAlign */:
-        applyToBlock((sel) => {
-          const seen = /* @__PURE__ */ new Set();
-          sel.getNodes().forEach((n) => {
-            const t = n.getTopLevelElementOrThrow();
-            if (!seen.has(t.getKey())) {
-              seen.add(t.getKey());
-              t.setFormat("right");
-            }
-          });
-        });
+        applyAlignmentWithSplit("right");
         break;
       case "centerAlign" /* CenterAlign */:
-        applyToBlock((sel) => {
-          const seen = /* @__PURE__ */ new Set();
-          sel.getNodes().forEach((n) => {
-            const t = n.getTopLevelElementOrThrow();
-            if (!seen.has(t.getKey())) {
-              seen.add(t.getKey());
-              t.setFormat("center");
-            }
-          });
-        });
+        applyAlignmentWithSplit("center");
         break;
       case "justifyAlign" /* JustifyAlign */:
-        applyToBlock((sel) => {
-          const seen = /* @__PURE__ */ new Set();
-          sel.getNodes().forEach((n) => {
-            const t = n.getTopLevelElementOrThrow();
-            if (!seen.has(t.getKey())) {
-              seen.add(t.getKey());
-              t.setFormat("justify");
-            }
-          });
-        });
+        applyAlignmentWithSplit("justify");
         break;
       case "undo" /* Undo */:
         editor.dispatchCommand(UNDO_COMMAND, void 0);
@@ -6579,9 +6958,32 @@ var ToolBarPlugins = (props) => {
         break;
     }
   };
+  const applyAlignmentWithSplit = (formatType) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return;
+      $splitBlocksAtLineBreaks(selection);
+      const sel = $getSelection();
+      if ($isRangeSelection(sel)) {
+        $splitBlockAtPartialSelection(sel);
+      }
+    });
+    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, formatType);
+  };
   const updateHeading = (heading) => {
-    applyToBlock((selection) => {
-      $setBlocksType(selection, () => $createHeadingNode(heading));
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $splitBlocksAtLineBreaks(selection);
+        const sel = $getSelection();
+        if ($isRangeSelection(sel)) {
+          $splitBlockAtPartialSelection(sel);
+        }
+        $setBlocksType($getSelection(), () => $createHeadingNode(heading));
+      }
+    });
+    editor.getEditorState().read(() => {
+      updateToolbarPlugins();
     });
   };
   const renderToken = (token, groupIndex, tokenIndex) => {
@@ -6593,7 +6995,6 @@ var ToolBarPlugins = (props) => {
     const brand = palette.themePrimary;
     const brandHover = palette.themeDarkAlt ?? brand;
     const brandPressed = palette.themeDark ?? brand;
-    palette.white;
     const bgHover = palette.neutralLighter;
     const bgPressed = palette.neutralLight;
     const bgActive = palette.neutralLighterAlt ?? palette.neutralLighter;
@@ -6640,13 +7041,14 @@ var ToolBarPlugins = (props) => {
       marginRight: 8,
       verticalAlign: "middle"
     };
-    const isDisabled = !isEditable || !!props.readOnly;
     switch (token) {
       case "Bold":
         return /* @__PURE__ */ jsx(
           Button,
           {
             size: "small",
+            "aria-label": "Bold",
+            "aria-pressed": isBold,
             disabled: !isEditable || props.readOnly,
             icon: /* @__PURE__ */ jsx(TextBold24Regular, { style: { color: getIconColor(isBold) } }),
             style: getButtonStyle(isBold),
@@ -6659,6 +7061,8 @@ var ToolBarPlugins = (props) => {
           Button,
           {
             size: "small",
+            "aria-label": "Italic",
+            "aria-pressed": isItalic,
             disabled: !isEditable || props.readOnly,
             icon: /* @__PURE__ */ jsx(TextItalicFilled, { style: { color: getIconColor(isItalic) } }),
             style: getButtonStyle(isItalic),
@@ -6671,6 +7075,8 @@ var ToolBarPlugins = (props) => {
           Button,
           {
             size: "small",
+            "aria-label": "Underline",
+            "aria-pressed": isUnderline,
             disabled: !isEditable || props.readOnly,
             icon: /* @__PURE__ */ jsx(TextUnderlineFilled, { style: { color: getIconColor(isUnderline) } }),
             style: getButtonStyle(isUnderline),
@@ -6681,7 +7087,14 @@ var ToolBarPlugins = (props) => {
       case "ColorPicker":
         return /* @__PURE__ */ jsx(ColorPickerPlugin, { disabled: !isEditable || props.readOnly }, key);
       case "Link":
-        return /* @__PURE__ */ jsx(InsertLinkPlugin, { disabled: !isEditable || props.readOnly }, key);
+        return /* @__PURE__ */ jsx(
+          InsertLinkPlugin,
+          {
+            disabled: !isEditable || props.readOnly,
+            setIsLinkEditMode: props.setIsLinkEditMode
+          },
+          key
+        );
       case "Table":
         return /* @__PURE__ */ jsx(TableItemPlugin, { disabled: !isEditable || props.readOnly }, key);
       case "Image":
@@ -6689,7 +7102,9 @@ var ToolBarPlugins = (props) => {
           InsertImageDialog,
           {
             activeEditor: editor,
-            disabled: !isEditable || props.readOnly
+            disabled: !isEditable || props.readOnly,
+            maxImageSizeMB: props.maxImageSizeMB,
+            validationMessages: props.validationMessages
           },
           key
         );
@@ -6698,139 +7113,405 @@ var ToolBarPlugins = (props) => {
           InsertInlineImageDialog,
           {
             activeEditor: editor,
-            disabled: !isEditable || props.readOnly
+            disabled: !isEditable || props.readOnly,
+            maxImageSizeMB: props.maxImageSizeMB,
+            validationMessages: props.validationMessages
           },
           key
         );
       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(
           Dropdown,
           {
-            title: "Add heading",
-            id: `heading-option-${groupIndex}`,
-            placeholder: "Format",
-            disabled: !isEditable,
-            style: { minWidth: "100px" },
-            className: styles.dropdown,
-            value: headingLabel,
-            selectedOptions: [selectNodeType],
-            onOptionSelect: (_, data) => {
-              const val = data.optionValue;
-              if (!val) return;
-              if (val === "paragraph") {
-                applyToBlock((sel) => $setBlocksType(sel, () => $createParagraphNode()));
+            title: "Add heading",
+            id: `heading-option-${groupIndex}`,
+            placeholder: "Format",
+            disabled: !isEditable,
+            style: { minWidth: "100px" },
+            className: styles.dropdown,
+            value: headingLabel,
+            selectedOptions: [selectNodeType],
+            onOptionSelect: (_, data) => {
+              const val = data.optionValue;
+              if (!val) return;
+              if (val === "paragraph") {
+                formatParagraph(editor);
+                setSelectNodeType("paragraph");
+              } else {
+                updateHeading(val);
+                setSelectNodeType(val);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Option, { value: "paragraph", children: "Normal" }),
+              HEADING_OPTION.map((option, idx) => /* @__PURE__ */ jsx(Option, { value: option.key, children: option.text }, `${option.key}-${idx}`))
+            ]
+          },
+          key
+        );
+      }
+      case "FontFamily":
+        return /* @__PURE__ */ jsx(FontFamilyPlugin, { disabled: !isEditable || props.readOnly }, key);
+      case "FontSize":
+        return /* @__PURE__ */ jsx(FontSizePlugin, { disabled: !isEditable || props.readOnly }, key);
+      case "|":
+        return /* @__PURE__ */ jsx(ToolbarDivider, {}, key);
+      // ── Standalone text-format toggle buttons ─────────────────────────────
+      // These were previously only accessible inside the 'Decorators' dropdown.
+      // Use them directly in customToolbar to show individual buttons instead.
+      case "Strikethrough":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Strikethrough",
+            "aria-pressed": isStrikethrough,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextStrikethroughFilled, { style: { color: getIconColor(isStrikethrough) } }),
+            style: getButtonStyle(isStrikethrough),
+            onClick: () => onHandleSelectOption("strike" /* Strikethrough */)
+          },
+          key
+        );
+      case "Subscript":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Subscript",
+            "aria-pressed": isSubscript,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextSubscriptFilled, { style: { color: getIconColor(isSubscript) } }),
+            style: getButtonStyle(isSubscript),
+            onClick: () => onHandleSelectOption("subscript" /* Subscript */)
+          },
+          key
+        );
+      case "Superscript":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Superscript",
+            "aria-pressed": isSuperscript,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextSuperscriptFilled, { style: { color: getIconColor(isSuperscript) } }),
+            style: getButtonStyle(isSuperscript),
+            onClick: () => onHandleSelectOption("superscript" /* Superscript */)
+          },
+          key
+        );
+      case "Highlight":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Highlight",
+            "aria-pressed": isHighlight,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(
+              HighlightAccentFilled,
+              {
+                style: { color: isEditable ? isHighlight ? brand : fg : fgDisabled }
+              }
+            ),
+            style: getButtonStyle(isHighlight),
+            onClick: () => onHandleSelectOption("highlight" /* Highlight */)
+          },
+          key
+        );
+      case "Uppercase":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Uppercase",
+            "aria-pressed": isUppercase,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextCaseUppercaseFilled, { style: { color: getIconColor(isUppercase) } }),
+            style: getButtonStyle(isUppercase),
+            onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "uppercase")
+          },
+          key
+        );
+      case "Lowercase":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Lowercase",
+            "aria-pressed": isLowercase,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextCaseLowercaseFilled, { style: { color: getIconColor(isLowercase) } }),
+            style: getButtonStyle(isLowercase),
+            onClick: () => onHandleSelectOption("lowercase" /* Lowercase */)
+          },
+          key
+        );
+      case "Capitalize":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Capitalize",
+            "aria-pressed": isCapitalize,
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextCaseTitleFilled, { style: { color: getIconColor(isCapitalize) } }),
+            style: getButtonStyle(isCapitalize),
+            onClick: () => onHandleSelectOption("capitalize" /* Capitalize */)
+          },
+          key
+        );
+      // ── Standalone list toggle buttons ────────────────────────────────────
+      case "BulletList":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Bullet list",
+            "aria-pressed": selectNodeType === "ul",
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextBulletListLtrFilled, { style: { color: getIconColor(selectNodeType === "ul") } }),
+            style: getButtonStyle(selectNodeType === "ul"),
+            onClick: () => editor.dispatchCommand(
+              selectNodeType === "ul" ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND,
+              void 0
+            )
+          },
+          key
+        );
+      case "NumberList":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Number list",
+            "aria-pressed": selectNodeType === "ol",
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(TextNumberListLtrFilled, { style: { color: getIconColor(selectNodeType === "ol") } }),
+            style: getButtonStyle(selectNodeType === "ol"),
+            onClick: () => editor.dispatchCommand(
+              selectNodeType === "ol" ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,
+              void 0
+            )
+          },
+          key
+        );
+      case "AlphabeticalList":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Alphabetical list",
+            "aria-pressed": selectNodeType === "alpha",
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(
+              TextAlphaListLtrFilled,
+              {
+                style: { color: getIconColor(selectNodeType === "alpha") }
+              }
+            ),
+            style: getButtonStyle(selectNodeType === "alpha"),
+            onClick: () => editor.update(() => $toggleAlphaList())
+          },
+          key
+        );
+      // ── Standalone block buttons ──────────────────────────────────────────
+      case "Quote":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Quote",
+            "aria-pressed": selectNodeType === "quote",
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(CommentQuoteRegular, { style: { color: getIconColor(selectNodeType === "quote") } }),
+            style: getButtonStyle(selectNodeType === "quote"),
+            onClick: () => formatQuote()
+          },
+          key
+        );
+      case "PageBreak":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Page break",
+            disabled: !isEditable || props.readOnly,
+            icon: /* @__PURE__ */ jsx(DocumentPageBreakRegular, { style: { color: getIconColor() } }),
+            style: getButtonStyle(),
+            onClick: () => editor.dispatchCommand(INSERT_PAGE_BREAK, void 0)
+          },
+          key
+        );
+      // ── Standalone heading-level toggle buttons ───────────────────────────
+      // Each button sets (or toggles off) that specific heading level.
+      // Clicking an active heading reverts to normal paragraph.
+      case "H1":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Heading 1",
+            "aria-pressed": selectNodeType === "h1",
+            disabled: !isEditable || props.readOnly,
+            style: {
+              ...getButtonStyle(selectNodeType === "h1"),
+              color: getIconColor(selectNodeType === "h1"),
+              fontSize: 12,
+              fontWeight: 600
+            },
+            onClick: () => {
+              if (selectNodeType === "h1") {
+                formatParagraph(editor);
+                setSelectNodeType("paragraph");
+              } else {
+                updateHeading("h1");
+                setSelectNodeType("h1");
+              }
+            },
+            children: "H1"
+          },
+          key
+        );
+      case "H2":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Heading 2",
+            "aria-pressed": selectNodeType === "h2",
+            disabled: !isEditable || props.readOnly,
+            style: {
+              ...getButtonStyle(selectNodeType === "h2"),
+              color: getIconColor(selectNodeType === "h2"),
+              fontSize: 12,
+              fontWeight: 600
+            },
+            onClick: () => {
+              if (selectNodeType === "h2") {
+                formatParagraph(editor);
+                setSelectNodeType("paragraph");
+              } else {
+                updateHeading("h2");
+                setSelectNodeType("h2");
+              }
+            },
+            children: "H2"
+          },
+          key
+        );
+      case "H3":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Heading 3",
+            "aria-pressed": selectNodeType === "h3",
+            disabled: !isEditable || props.readOnly,
+            style: {
+              ...getButtonStyle(selectNodeType === "h3"),
+              color: getIconColor(selectNodeType === "h3"),
+              fontSize: 12,
+              fontWeight: 600
+            },
+            onClick: () => {
+              if (selectNodeType === "h3") {
+                formatParagraph(editor);
+                setSelectNodeType("paragraph");
+              } else {
+                updateHeading("h3");
+                setSelectNodeType("h3");
+              }
+            },
+            children: "H3"
+          },
+          key
+        );
+      case "H4":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Heading 4",
+            "aria-pressed": selectNodeType === "h4",
+            disabled: !isEditable || props.readOnly,
+            style: {
+              ...getButtonStyle(selectNodeType === "h4"),
+              color: getIconColor(selectNodeType === "h4"),
+              fontSize: 12,
+              fontWeight: 600
+            },
+            onClick: () => {
+              if (selectNodeType === "h4") {
+                formatParagraph(editor);
+                setSelectNodeType("paragraph");
+              } else {
+                updateHeading("h4");
+                setSelectNodeType("h4");
+              }
+            },
+            children: "H4"
+          },
+          key
+        );
+      case "H5":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Heading 5",
+            "aria-pressed": selectNodeType === "h5",
+            disabled: !isEditable || props.readOnly,
+            style: {
+              ...getButtonStyle(selectNodeType === "h5"),
+              color: getIconColor(selectNodeType === "h5"),
+              fontSize: 12,
+              fontWeight: 600
+            },
+            onClick: () => {
+              if (selectNodeType === "h5") {
+                formatParagraph(editor);
                 setSelectNodeType("paragraph");
               } else {
-                updateHeading(val);
-                setSelectNodeType(val);
+                updateHeading("h5");
+                setSelectNodeType("h5");
               }
             },
-            children: [
-              /* @__PURE__ */ jsx(Option, { value: "paragraph", children: "Normal" }),
-              HEADING_OPTION.map((option, idx) => /* @__PURE__ */ jsx(Option, { value: option.key, children: option.text }, `${option.key}-${idx}`))
-            ]
+            children: "H5"
+          },
+          key
+        );
+      case "H6":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            "aria-label": "Heading 6",
+            "aria-pressed": selectNodeType === "h6",
+            disabled: !isEditable || props.readOnly,
+            style: {
+              ...getButtonStyle(selectNodeType === "h6"),
+              color: getIconColor(selectNodeType === "h6"),
+              fontSize: 12,
+              fontWeight: 600
+            },
+            onClick: () => {
+              if (selectNodeType === "h6") {
+                formatParagraph(editor);
+                setSelectNodeType("paragraph");
+              } else {
+                updateHeading("h6");
+                setSelectNodeType("h6");
+              }
+            },
+            children: "H6"
           },
           key
         );
-      }
-      case "FontFamily":
-        return /* @__PURE__ */ jsx(FontFamilyPlugin, { disabled: !isEditable || props.readOnly }, key);
-      case "FontSize":
-        return /* @__PURE__ */ jsx(FontSizePlugin, { disabled: !isEditable || props.readOnly }, key);
-      case "|":
-        return /* @__PURE__ */ jsx(ToolbarDivider, {}, key);
       case "Decorators": {
         const activeDecorators = [
           ...isUppercase ? ["uppercase"] : [],
@@ -6842,6 +7523,7 @@ var ToolBarPlugins = (props) => {
           ...isHighlight ? ["highlight"] : [],
           ...selectNodeType === "ul" ? ["ul-list"] : [],
           ...selectNodeType === "ol" ? ["ol-list"] : [],
+          ...selectNodeType === "alpha" ? ["al-list"] : [],
           ...selectNodeType === "quote" ? ["quote"] : []
         ];
         const DECORATOR_LABEL = {
@@ -6854,6 +7536,7 @@ var ToolBarPlugins = (props) => {
           highlight: "Highlight",
           "ul-list": "Bullet list",
           "ol-list": "Number list",
+          "al-list": "Alphabetical list",
           quote: "Quote"
         };
         const decoratorValue = activeDecorators.length === 0 ? "" : activeDecorators.length === 1 ? DECORATOR_LABEL[activeDecorators[0]] : `${DECORATOR_LABEL[activeDecorators[0]]} +${activeDecorators.length - 1}`;
@@ -6870,7 +7553,16 @@ var ToolBarPlugins = (props) => {
             button: { style: dropdownButtonStyle },
             expandIcon: { style: dropdownExpandIconStyle },
             listbox: { style: { minInlineSize: "180px" } },
+            open: decoratorOpen,
+            onOpenChange: (_, data) => {
+              if (decoratorSelectingRef.current) {
+                decoratorSelectingRef.current = false;
+                return;
+              }
+              setDecoratorOpen(data.open);
+            },
             onOptionSelect: (_, data) => {
+              decoratorSelectingRef.current = true;
               switch (data.optionValue) {
                 case "uppercase":
                   editor.dispatchCommand(FORMAT_TEXT_COMMAND, "uppercase");
@@ -6894,10 +7586,19 @@ var ToolBarPlugins = (props) => {
                   onHandleSelectOption("highlight" /* Highlight */);
                   break;
                 case "ul-list":
-                  editor.dispatchCommand(selectNodeType === "ul" ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND, void 0);
+                  editor.dispatchCommand(
+                    selectNodeType === "ul" ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND,
+                    void 0
+                  );
                   break;
                 case "ol-list":
-                  editor.dispatchCommand(selectNodeType === "ol" ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND, void 0);
+                  editor.dispatchCommand(
+                    selectNodeType === "ol" ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,
+                    void 0
+                  );
+                  break;
+                case "al-list":
+                  editor.update(() => $toggleAlphaList());
                   break;
                 case "page-break":
                   editor.dispatchCommand(INSERT_PAGE_BREAK, void 0);
@@ -6933,7 +7634,12 @@ var ToolBarPlugins = (props) => {
                 "Superscript"
               ] }),
               /* @__PURE__ */ jsxs(Option, { value: "highlight", text: "Highlight", children: [
-                /* @__PURE__ */ jsx(HighlightAccentFilled, { style: { ...optionIconStyle, color: isEditable ? brand : fgDisabled } }),
+                /* @__PURE__ */ jsx(
+                  HighlightAccentFilled,
+                  {
+                    style: { ...optionIconStyle, color: isEditable ? brand : fgDisabled }
+                  }
+                ),
                 "Highlight"
               ] }),
               /* @__PURE__ */ jsxs(Option, { value: "ul-list", text: "Bullet list", children: [
@@ -6944,6 +7650,10 @@ var ToolBarPlugins = (props) => {
                 /* @__PURE__ */ jsx(TextNumberListLtrFilled, { style: optionIconStyle }),
                 "Number list"
               ] }),
+              /* @__PURE__ */ jsxs(Option, { value: "al-list", text: "Alphabetical list", children: [
+                /* @__PURE__ */ jsx(TextAlphaListLtrFilled, { style: optionIconStyle }),
+                "Alphabetical list"
+              ] }),
               /* @__PURE__ */ jsxs(Option, { value: "page-break", text: "Page Break", children: [
                 /* @__PURE__ */ jsx(DocumentPageBreakRegular, { style: optionIconStyle }),
                 "Page break"
@@ -6969,10 +7679,30 @@ var ToolBarPlugins = (props) => {
       //   );
       case "Align": {
         const ALIGN_OPTIONS = [
-          { value: "left", label: "Left Align", icon: /* @__PURE__ */ jsx(TextAlignLeftFilled, { style: optionIconStyle }), action: "leftAlign" /* LeftAlign */ },
-          { value: "center", label: "Center Align", icon: /* @__PURE__ */ jsx(TextAlignCenterFilled, { style: optionIconStyle }), action: "centerAlign" /* CenterAlign */ },
-          { value: "right", label: "Right Align", icon: /* @__PURE__ */ jsx(TextAlignRightFilled, { style: optionIconStyle }), action: "rightAlign" /* RightAlign */ },
-          { value: "justify", label: "Justify Align", icon: /* @__PURE__ */ jsx(TextAlignJustifyFilled, { style: optionIconStyle }), action: "justifyAlign" /* JustifyAlign */ }
+          {
+            value: "left",
+            label: "Left Align",
+            icon: /* @__PURE__ */ jsx(TextAlignLeftFilled, { style: optionIconStyle }),
+            action: "leftAlign" /* LeftAlign */
+          },
+          {
+            value: "center",
+            label: "Center Align",
+            icon: /* @__PURE__ */ jsx(TextAlignCenterFilled, { style: optionIconStyle }),
+            action: "centerAlign" /* CenterAlign */
+          },
+          {
+            value: "right",
+            label: "Right Align",
+            icon: /* @__PURE__ */ jsx(TextAlignRightFilled, { style: optionIconStyle }),
+            action: "rightAlign" /* RightAlign */
+          },
+          {
+            value: "justify",
+            label: "Justify Align",
+            icon: /* @__PURE__ */ jsx(TextAlignJustifyFilled, { style: optionIconStyle }),
+            action: "justifyAlign" /* JustifyAlign */
+          }
         ];
         const alignLabel = ALIGN_OPTIONS.find((o) => o.value === alignment)?.label ?? "Left Align";
         return /* @__PURE__ */ jsx(
@@ -7188,32 +7918,31 @@ function BrowserSpellCheckPlugin({ enabled }) {
   }, [editor, enabled]);
   return null;
 }
-function WordCountPlugin({
-  onCountChange
-}) {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        const text = $getRoot().getTextContent();
-        const words = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
-        onCountChange(words);
-      });
-    });
-  }, [editor, onCountChange]);
-  return null;
-}
-function CharCountPlugin({
-  onCountChange
+function ContentMetricsPlugin({
+  onMetricsChange
 }) {
   const [editor] = useLexicalComposerContext();
+  const prevRef = useRef({ words: 0, chars: 0, images: 0, links: 0, tables: 0 });
   useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        onCountChange($getRoot().getTextContent().length);
-      });
+    return editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+      if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+      const root = editor.getRootElement();
+      if (!root) return;
+      const text = root.innerText ?? "";
+      const trimmed = text.trim();
+      const words = trimmed === "" ? 0 : trimmed.split(/\s+/).length;
+      const chars = trimmed.length;
+      const images = root.querySelectorAll("img").length;
+      const links = root.querySelectorAll("a[href]").length;
+      const tables = root.querySelectorAll("table").length;
+      const prev = prevRef.current;
+      if (prev.words !== words || prev.chars !== chars || prev.images !== images || prev.links !== links || prev.tables !== tables) {
+        const next = { words, chars, images, links, tables };
+        prevRef.current = next;
+        onMetricsChange(next);
+      }
     });
-  }, [editor, onCountChange]);
+  }, [editor, onMetricsChange]);
   return null;
 }
 function FocusEventsPlugin({
@@ -7234,7 +7963,8 @@ function FocusEventsPlugin({
       const next = e.relatedTarget;
       const container = containerRef.current;
       const stillInside = !!next && (container ? container.contains(next) : root.contains(next));
-      if (stillInside) return;
+      const isEditorPortal = !!next?.closest?.("[data-lexical-editor-portal]");
+      if (stillInside || isEditorPortal) return;
       editor.update(() => {
         $setSelection(null);
       });
@@ -7289,10 +8019,7 @@ 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;
@@ -7347,386 +8074,458 @@ 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();
-    }
-  };
-  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)`
+function EditorReadyPlugin({ onReady }) {
+  const [editor] = useLexicalComposerContext();
+  const calledRef = useRef(false);
+  useEffect(() => {
+    if (!onReady || calledRef.current) return;
+    calledRef.current = true;
+    onReady(editor);
+  }, [editor, onReady]);
+  return null;
+}
+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]
     );
-  }
-  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 resolvedQuery = React9__default.useMemo(
+      () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [props.suggestFn, props.useQuery]
     );
-  }
-  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"
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const [isLinkEditMode, setIsLinkEditMode] = useState(false);
+    const [metrics, setMetrics] = useState({
+      words: 0,
+      chars: 0,
+      images: 0,
+      links: 0,
+      tables: 0
+    });
+    const handleMetrics = useCallback((m) => setMetrics(m), []);
+    const [pageSetup, setPageSetup] = useState(DEFAULT_PAGE_SETUP);
+    const pageCanvas = resolvePageCanvasMetrics(pageSetup);
+    const wordCount = metrics.words;
+    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 = React9__default.useMemo(() => {
+      const config = {
+        namespace: props.namespace ?? "",
+        theme,
+        onError: () => {
+        },
+        nodes: [
+          HeadingNode,
+          QuoteNode,
+          CodeHighlightNode,
+          CodeNode,
+          ListNode,
+          ListItemNode,
+          AlphaListNode,
+          LinkNode,
+          AutoLinkNode,
+          TableNode,
+          TableRowNode,
+          TableCellNode,
+          ImageNode,
+          InlineImageNode,
+          YouTubeNode,
+          PageBreakNode,
+          AutocompleteNode,
+          SpellErrorNode,
+          HtmlBlockNode
+        ]
+      };
+      props.onBeforeInitialize?.(config);
+      return config;
+    }, []);
+    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"
       },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              pointerEvents: isReadOnly ? "none" : "auto",
-              position: "sticky",
-              opacity: isReadOnly ? 0.85 : 1
-            },
-            children: /* @__PURE__ */ jsx(
-              ToolBarPlugins,
+      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();
+      }
+    };
+    const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
+    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]);
+    const validationErrors = React9__default.useMemo(() => {
+      const errors = [];
+      const custom = props.validationMessages ?? {};
+      const { words, chars, images, links, tables } = metrics;
+      const msg = (key, ...args) => {
+        const override = custom[key];
+        if (override !== void 0) {
+          return typeof override === "function" ? override(...args) : override;
+        }
+        const def = DEFAULT_VALIDATION_MESSAGES[key];
+        return typeof def === "function" ? def(...args) : def;
+      };
+      const requiredFired = props.required && words === 0;
+      if (requiredFired) {
+        errors.push({ type: "required", message: msg("required") });
+      } else if (props.minWords !== void 0 && words < props.minWords) {
+        errors.push({ type: "minWords", message: msg("minWords", words, props.minWords) });
+      }
+      const effectiveMaxWords = props.maxWords ?? props.wordLimit;
+      if (effectiveMaxWords !== void 0 && words > effectiveMaxWords) {
+        errors.push({ type: "maxWords", message: msg("maxWords", words, effectiveMaxWords) });
+      }
+      if (!requiredFired && props.minChars !== void 0 && chars < props.minChars) {
+        errors.push({ type: "minChars", message: msg("minChars", chars, props.minChars) });
+      }
+      if (props.maxChars !== void 0 && chars > props.maxChars) {
+        errors.push({ type: "maxChars", message: msg("maxChars", chars, props.maxChars) });
+      }
+      if (props.noImages && images > 0) {
+        errors.push({ type: "noImages", message: msg("noImages") });
+      } else if (props.maxImages !== void 0 && images > props.maxImages) {
+        errors.push({ type: "maxImages", message: msg("maxImages", images, props.maxImages) });
+      }
+      if (props.noLinks && links > 0) {
+        errors.push({ type: "noLinks", message: msg("noLinks") });
+      } else if (props.maxLinks !== void 0 && links > props.maxLinks) {
+        errors.push({ type: "maxLinks", message: msg("maxLinks", links, props.maxLinks) });
+      }
+      if (props.noTables && tables > 0) {
+        errors.push({ type: "noTables", message: msg("noTables") });
+      }
+      return errors;
+    }, [
+      metrics,
+      props.required,
+      props.minWords,
+      props.maxWords,
+      props.wordLimit,
+      props.minChars,
+      props.maxChars,
+      props.noImages,
+      props.maxImages,
+      props.noLinks,
+      props.maxLinks,
+      props.noTables,
+      props.validationMessages
+    ]);
+    const previousErrorTypesRef = useRef("");
+    useEffect(() => {
+      if (!props.onValidationChange) return;
+      const key = validationErrors.map((e) => e.type).join(",");
+      if (key !== previousErrorTypesRef.current) {
+        previousErrorTypesRef.current = key;
+        props.onValidationChange(validationErrors);
+      }
+    }, [validationErrors, props.onValidationChange]);
+    const trimmedErrorMessage = props.errorMessage?.trim() || "";
+    const hasValidationError = validationErrors.length > 0 || !!trimmedErrorMessage;
+    return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(LexicalComposer, { initialConfig, children: [
+      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", 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 ${isOverLimit || hasValidationError ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
+            transition: "border-color 0.2s",
+            display: "flex",
+            flexDirection: "column"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                level: props.level ?? "basic" /* Basic */,
-                readOnly: props.readOnly,
-                pageSetup,
-                onPageSetupChange: setPageSetup
+                className: "editor-toolbar-root",
+                style: {
+                  pointerEvents: isReadOnly ? "none" : "auto",
+                  position: "sticky",
+                  opacity: isReadOnly ? 0.85 : 1
+                },
+                children: /* @__PURE__ */ jsx(
+                  ToolBarPlugins,
+                  {
+                    level: props.level ?? "basic" /* Basic */,
+                    customToolbar: props.customToolbar,
+                    readOnly: props.readOnly,
+                    pageSetup,
+                    onPageSetupChange: setPageSetup,
+                    maxImageSizeMB: props.maxImageSizeMB,
+                    validationMessages: props.validationMessages,
+                    setIsLinkEditMode
+                  }
+                )
               }
-            )
-          }
-        ),
-        /* @__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",
+            ),
+            /* @__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,
                     {
-                      className: "editor",
-                      style: { height: "100%", position: "relative" },
-                      ref: onAnchorRef,
-                      children: /* @__PURE__ */ jsx(
-                        ContentEditable,
+                      ErrorBoundary: LexicalErrorBoundary,
+                      contentEditable: /* @__PURE__ */ jsx(
+                        "div",
                         {
-                          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
+                          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 })
                     }
                   ),
-                  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",
+                  (props.wordLimit !== void 0 || props.maxWords !== void 0 || props.minWords !== void 0 || props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsxs(
+                    "div",
                     {
                       style: {
-                        fontSize: "11px",
-                        color: isOverLimit ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
-                        fontWeight: isOverLimit ? 600 : 400,
-                        transition: "color 0.2s, font-weight 0.2s"
+                        position: "sticky",
+                        bottom: 0,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        gap: 10,
+                        paddingRight: 14,
+                        pointerEvents: "none",
+                        userSelect: "none"
                       },
                       children: [
-                        wordCount,
-                        " / ",
-                        props.wordLimit,
-                        " words"
+                        (props.wordLimit !== void 0 || props.maxWords !== void 0 || props.minWords !== void 0) && /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              fontSize: "11px",
+                              color: hasValidationError ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
+                              fontWeight: hasValidationError ? 600 : 400,
+                              transition: "color 0.2s, font-weight 0.2s"
+                            },
+                            children: [
+                              wordCount,
+                              (props.maxWords ?? props.wordLimit) !== void 0 && ` / ${props.maxWords ?? props.wordLimit}`,
+                              props.minWords !== void 0 && props.maxWords === void 0 && props.wordLimit === void 0 && ` (min ${props.minWords})`,
+                              " words"
+                            ]
+                          }
+                        ),
+                        (props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              fontSize: "11px",
+                              color: hasValidationError ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
+                              fontWeight: hasValidationError ? 600 : 400,
+                              transition: "color 0.2s, font-weight 0.2s"
+                            },
+                            children: [
+                              metrics.chars,
+                              props.maxChars !== void 0 && ` / ${props.maxChars}`,
+                              props.minChars !== void 0 && props.maxChars === void 0 && ` (min ${props.minChars})`,
+                              " chars"
+                            ]
+                          }
+                        )
                       ]
                     }
                   )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(ReadOnlyPlugin, { readonly: isReadOnly }),
+            /* @__PURE__ */ jsx(BrowserSpellCheckPlugin, { enabled: !resolvedSpellCheck }),
+            /* @__PURE__ */ jsx(
+              FocusEventsPlugin,
+              {
+                onFocus: props.onFocus,
+                onBlur: 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 || props.maxWords !== void 0 || props.minChars !== void 0 || props.maxChars !== void 0 || props.noImages || props.maxImages !== void 0 || props.noLinks || props.maxLinks !== void 0 || props.noTables) && /* @__PURE__ */ jsx(ContentMetricsPlugin, { onMetricsChange: handleMetrics }),
+            /* @__PURE__ */ jsx(
+              RefApiPlugin,
+              {
+                forwardedRef: ref,
+                contentEditableDomRef,
+                focusedRef
+              }
+            ),
+            (validationErrors.length > 0 || trimmedErrorMessage) && /* @__PURE__ */ jsxs("div", { style: { flexShrink: 0, padding: "6px 20px 8px" }, children: [
+              validationErrors.map((err) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 6,
+                    marginTop: 2,
+                    color: "#c4272c",
+                    fontSize: 12,
+                    lineHeight: "18px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, flexShrink: 0 }, children: "\u26A0" }),
+                    /* @__PURE__ */ jsx("span", { children: err.message })
+                  ]
+                },
+                err.type
+              )),
+              trimmedErrorMessage && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 6,
+                    marginTop: 2,
+                    color: "#c4272c",
+                    fontSize: 12,
+                    lineHeight: "18px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, flexShrink: 0 }, children: "\u26A0" }),
+                    /* @__PURE__ */ jsx("span", { children: trimmedErrorMessage })
+                  ]
                 }
               )
-            ]
-          }
-        ),
-        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?.();
-            },
-            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
-          }
-        )
-      ]
-    }
-  ) }) }) });
-});
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(EditorReadyPlugin, { onReady: props.onReady })
+    ] }) });
+  }
+);
 
-export { ContentEditorComponent, ContentEditorLevel };
+export { ContentEditorComponent, ContentEditorLevel, DEFAULT_VALIDATION_MESSAGES };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map