@tarviks/lexical-rich-editor 1.2.0 → 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, Popover, PopoverTrigger, PopoverSurface, Field, Input } from '@fluentui/react-components';
-import { ErrorCircleRegular, ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, CodeFilled, LinkFilled, Dismiss16Regular } from '@fluentui/react-icons';
+import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, 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,37 +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,
-            maxWidth,
-            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;
   }
@@ -855,6 +850,7 @@ __export(InlineImageComponent_exports, {
 var imageCache2, useSuspenseImage2, LazyImage2, InlineImageComponent, InlineImageComponent_default;
 var init_InlineImageComponent = __esm({
   "src/Nodes/InlineImageComponent.tsx"() {
+    init_ImageResizer();
     init_InlineImage();
     init_InlineImageNode();
     imageCache2 = /* @__PURE__ */ new Set();
@@ -891,6 +887,7 @@ 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);
@@ -952,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(
@@ -970,48 +986,13 @@ var init_InlineImageComponent = __esm({
           ),
           editor.registerCommand(
             CLICK_COMMAND,
-            (payload) => {
-              const event = payload;
-              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;
@@ -1020,27 +1001,59 @@ var init_InlineImageComponent = __esm({
       }, [
         clearSelection,
         editor,
+        isResizing,
         isSelected,
         nodeKey,
         $onDelete,
         $onEnter,
         $onEscape,
+        onClick,
         setSelected
       ]);
-      const draggable = isSelected && $isNodeSelection(selection);
-      const isFocused = isSelected && isEditable;
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx("span", { draggable, children: /* @__PURE__ */ jsx(
-        LazyImage2,
-        {
-          className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
-          src,
-          altText,
-          imageRef,
-          width,
-          height,
-          position
-        }
-      ) }) });
+      const 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("span", { draggable, style: { position: "relative", display: "inline-block" }, children: [
+        /* @__PURE__ */ jsx(
+          LazyImage2,
+          {
+            className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+            src,
+            altText,
+            imageRef,
+            width,
+            height,
+            position
+          }
+        ),
+        $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
+          ImageResizer_default,
+          {
+            showCaption: false,
+            setShowCaption: () => {
+            },
+            captionsEnabled: false,
+            editor,
+            buttonRef,
+            imageRef,
+            onResizeStart,
+            onResizeEnd
+          }
+        )
+      ] }) });
     };
     InlineImageComponent_default = InlineImageComponent;
   }
@@ -1228,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 = {
@@ -1268,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";
@@ -1278,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 };
   }
@@ -1592,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`;
@@ -1618,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"
       }
@@ -1632,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"
       }
@@ -1646,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,
@@ -1662,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();
@@ -1673,72 +1879,173 @@ 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
             }
           )
         ] })
@@ -1798,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"
@@ -1825,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,
@@ -2200,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`;
@@ -2247,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]);
@@ -2458,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"));
@@ -2478,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;
@@ -2736,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)));
+        });
+      }
     }
   );
 };
@@ -2857,7 +3203,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       return;
     }
     const rootElement = editor.getRootElement();
-    if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
+    if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       if (domRect) {
         domRect.y += 40;
@@ -2873,7 +3219,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       setLinkUrl("");
     }
     return true;
-  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
   useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
@@ -2980,17 +3326,20 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         }
       }
     ),
-    /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "link-input-actions", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: "link-cancel",
           role: "button",
           tabIndex: 0,
+          title: "Cancel",
+          "aria-label": "Cancel",
           onMouseDown: preventDefault,
           onClick: () => {
             setIsLinkEditMode(false);
-          }
+          },
+          children: /* @__PURE__ */ jsx(DismissRegular, { fontSize: 16 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -2999,8 +3348,11 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
           className: "link-confirm",
           role: "button",
           tabIndex: 0,
+          title: "Confirm",
+          "aria-label": "Confirm",
           onMouseDown: preventDefault,
-          onClick: handleLinkSubmission
+          onClick: handleLinkSubmission,
+          children: /* @__PURE__ */ jsx(CheckmarkRegular, { fontSize: 16 })
         }
       )
     ] })
@@ -3020,12 +3372,15 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         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(
@@ -3034,10 +3389,13 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         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 })
       }
     )
   ] }) });
@@ -3120,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) => {
@@ -3149,7 +3505,7 @@ var InsertImageByURL = ({
   const [src, setSrc] = useState("");
   const isDisabled = disabled || src === "";
   return /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
-    /* @__PURE__ */ jsx(Field, { label: "Enter URL", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Field, { label: "Enter URL", size: "small", children: /* @__PURE__ */ jsx(
       Input,
       {
         autoFocus: !disabled,
@@ -3160,7 +3516,7 @@ var InsertImageByURL = ({
         value: src
       }
     ) }),
-    /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
       Input,
       {
         placeholder: "Alt text",
@@ -3198,16 +3554,19 @@ var InsertImageByURL = ({
 };
 var InsertImageDialog = ({
   activeEditor,
-  disabled
+  disabled,
+  maxImageSizeMB,
+  validationMessages
 }) => {
   const [src, setSrc] = useState("");
   const [altText, setAltText] = useState("");
   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 isDisabled = disabled || src === "";
+  const isDisabled = disabled || src === "" || !!fileSizeError;
   useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
@@ -3223,31 +3582,44 @@ var InsertImageDialog = ({
     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(
-    Popover,
+    Dialog,
     {
-      trapFocus: true,
-      withArrow: true,
       open: disabled ? false : isOpen,
       onOpenChange: (_, data) => {
         if (!disabled) setIsOpen(data.open);
       },
       children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             size: "small",
@@ -3271,81 +3643,73 @@ var InsertImageDialog = ({
           },
           "upload-image"
         ) }),
-        /* @__PURE__ */ jsxs(
-          PopoverSurface,
-          {
-            style: {
-              width: "320px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                  "label",
-                  {
-                    style: {
-                      cursor: disabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      opacity: disabled ? 0.75 : 1
+        /* @__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: {
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  opacity: disabled ? 0.75 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      accept: "image/*",
+                      style: { display: "none" },
+                      disabled,
+                      onChange: loadImage
                     },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "file",
-                          accept: "image/*",
-                          style: { display: "none" },
-                          disabled,
-                          onChange: loadImage
-                        },
-                        "inline-image-upload"
-                      ),
-                      /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                        /* @__PURE__ */ jsx(
-                          AttachFilled,
-                          {
-                            style: {
-                              fontSize: "16px",
-                              color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                              marginTop: 2
-                            }
-                          }
-                        ),
-                        !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                      ] }),
-                      fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                    ]
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    placeholder: "Alt text",
-                    appearance: "underline",
-                    disabled,
-                    onChange: (_, d) => setAltText(d.value),
-                    value: altText
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                  /* @__PURE__ */ jsx(Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
-                  /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-                ] })
-              ] }),
-              selectedValue === "URL" && /* @__PURE__ */ jsx(
-                InsertImageByURL,
-                {
-                  disabled,
-                  setIsOpen: (open) => setIsOpen(open),
-                  onClick: (payload) => onClick(payload)
-                }
-              )
-            ]
-          }
-        )
+                    "inline-image-upload"
+                  ),
+                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
+                    /* @__PURE__ */ jsx(
+                      AttachFilled,
+                      {
+                        style: {
+                          fontSize: "16px",
+                          color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                          marginTop: 2
+                        }
+                      }
+                    ),
+                    !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                  ] }),
+                  fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+                ]
+              }
+            ) }),
+            fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Alt text",
+                appearance: "underline",
+                disabled,
+                onChange: (_, d) => setAltText(d.value),
+                value: altText
+              }
+            ) }),
+            selectedValue === "URL" && /* @__PURE__ */ jsx(
+              InsertImageByURL,
+              {
+                disabled,
+                setIsOpen: (open) => setIsOpen(open),
+                onClick: (payload) => onClick(payload)
+              }
+            )
+          ] }) }),
+          /* @__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" })
+          ] })
+        ] }) })
       ]
     }
   );
@@ -3361,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;
         },
@@ -3414,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({
@@ -3447,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;
 };
@@ -3480,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;
@@ -3495,8 +3887,6 @@ var getDragSelection = (event) => {
   }
   return range;
 };
-
-// src/Plugins/InlineImage.tsx
 init_InlineImage();
 init_InlineImageNode();
 var INSERT_INLINE_IMAGE_COMMAND = createCommand(
@@ -3514,7 +3904,9 @@ var useStyles = makeStyles({
 });
 var InsertInlineImageDialog = ({
   disabled,
-  activeEditor
+  activeEditor,
+  maxImageSizeMB,
+  validationMessages
 }) => {
   const hasModifier = useRef(false);
   const [src, setSrc] = useState("");
@@ -3522,21 +3914,36 @@ var InsertInlineImageDialog = ({
   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 isDisabled = disabled || src === "";
+  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) => {
@@ -3553,18 +3960,17 @@ var InsertInlineImageDialog = ({
     setAltText("");
     setSrc("");
     setFileName("");
+    setFileSizeError(null);
   };
   return /* @__PURE__ */ jsxs(
-    Popover,
+    Dialog,
     {
-      trapFocus: true,
-      withArrow: true,
       open: disabled ? false : isOpen,
       onOpenChange: (_, data) => {
         if (!disabled) setIsOpen(data.open);
       },
       children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             size: "small",
@@ -3588,104 +3994,100 @@ var InsertInlineImageDialog = ({
           },
           "upload-inline-image"
         ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "400px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  style: {
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    opacity: disabled ? 0.75 : 1
-                  },
-                  children: [
+        /* @__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: {
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  opacity: disabled ? 0.75 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      accept: "image/*",
+                      style: { display: "none" },
+                      disabled,
+                      onChange: loadImage
+                    },
+                    "inline-image-upload"
+                  ),
+                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
                     /* @__PURE__ */ jsx(
-                      "input",
+                      AttachFilled,
                       {
-                        type: "file",
-                        accept: "image/*",
-                        style: { display: "none" },
-                        disabled,
-                        onChange: loadImage
-                      },
-                      "inline-image-upload"
-                    ),
-                    /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                      /* @__PURE__ */ jsx(
-                        AttachFilled,
-                        {
-                          style: {
-                            fontSize: "16px",
-                            color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                            marginTop: 2
-                          }
+                        style: {
+                          fontSize: "16px",
+                          color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                          marginTop: 2
                         }
-                      ),
-                      !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                    ] }),
-                    fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Position", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  placeholder: "Left Align",
-                  className: styles.alignDropdown,
-                  disabled,
-                  listbox: { style: { width: "120px" } },
-                  root: { style: { borderBottom: "1px solid black" } },
-                  children: [
-                    /* @__PURE__ */ jsx(Option, { text: "full", onClick: () => setPosition("full"), children: "Full" }, "full"),
-                    /* @__PURE__ */ jsx(Option, { text: "left", onClick: () => setPosition("left"), children: "Left" }, "left"),
-                    /* @__PURE__ */ jsx(Option, { text: "right", onClick: () => setPosition("right"), children: "Right" }, "right")
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  placeholder: "Alt text",
-                  appearance: "underline",
-                  disabled,
-                  value: altText,
-                  onChange: (_, d) => setAltText(d.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    size: "small",
-                    disabled: isDisabled,
-                    onClick: handleOnClick,
-                    children: "Add"
-                  },
-                  "file-inline-upload-btn"
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    size: "small",
-                    disabled,
-                    onClick: () => setIsOpen(false),
-                    children: "Cancel"
-                  },
-                  "file-inline-upload-cancel"
-                )
-              ] })
-            ] })
-          }
-        )
+                      }
+                    ),
+                    !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                  ] }),
+                  fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                className: styles.alignDropdown,
+                disabled,
+                value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
+                selectedOptions: [position ?? "left"],
+                listbox: { style: { width: "120px" } },
+                root: { style: { borderBottom: "1px solid black" } },
+                onOptionSelect: (_, data) => setPosition(data.optionValue),
+                children: [
+                  /* @__PURE__ */ jsx(Option, { value: "left", children: "Left" }, "left"),
+                  /* @__PURE__ */ jsx(Option, { value: "right", children: "Right" }, "right"),
+                  /* @__PURE__ */ jsx(Option, { value: "full", children: "Full" }, "full")
+                ]
+              }
+            ) }),
+            fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Alt text",
+                appearance: "underline",
+                disabled,
+                value: altText,
+                onChange: (_, d) => setAltText(d.value)
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                disabled: isDisabled,
+                onClick: handleOnClick,
+                children: "Add"
+              },
+              "file-inline-upload-btn"
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                disabled,
+                onClick: () => setIsOpen(false),
+                children: "Cancel"
+              },
+              "file-inline-upload-cancel"
+            )
+          ] })
+        ] }) })
       ]
     }
   );
@@ -3705,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
@@ -3733,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;
+  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.setDragImage(img2, 0, 0);
   dataTransfer.setData(
     "application/x-lexical-drag",
     JSON.stringify({
@@ -3757,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;
 };
@@ -3798,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;
@@ -3889,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();
@@ -3912,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(() => {
@@ -3932,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;
 }
@@ -4580,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(() => {
@@ -4593,6 +5093,7 @@ function TableActionMenuPlugin({ disabled = false }) {
           if (dom) {
             setIsInTable(true);
             setAnchorRect(dom.getBoundingClientRect());
+            setContentRight(null);
             return;
           }
         }
@@ -4600,6 +5101,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!$isRangeSelection(selection)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setContentRight(null);
         return;
       }
       const anchorNode = selection.anchor.getNode();
@@ -4607,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(
@@ -4675,31 +5187,38 @@ 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]
   );
   const insertRowBelow = () => run(() => $insertTableRowAtSelection(true));
@@ -4708,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, {})
         }
       ) }),
@@ -5084,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",
@@ -5367,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(
@@ -5380,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,
@@ -5404,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",
@@ -5493,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,
@@ -5535,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)",
@@ -5748,7 +6345,6 @@ var FontFamilyPlugin = ({ disabled = false }) => {
     "font-family"
   );
 };
-var DEFAULT_FONT_SIZE = 15;
 var FONT_SIZE_OPTIONS = [
   "8",
   "9",
@@ -5884,104 +6480,42 @@ var FontSizePlugin = ({ disabled }) => {
     "fontsize"
   ) });
 };
-var InsertLinkPlugin = ({ disabled }) => {
+var InsertLinkPlugin = ({
+  disabled,
+  setIsLinkEditMode
+}) => {
   const [editor] = useLexicalComposerContext();
-  const [isOpen, setIsOpen] = useState(false);
-  const [text, setText] = useState("");
-  const [link, setLink] = useState("");
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  const insertLink = (text2, link2) => {
+  const insertLink = () => {
     if (disabled) return;
     editor.update(() => {
-      setText("");
-      setLink("");
       const selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        const textNode = new TextNode(text2);
-        const linkNode = $createLinkNode(link2.startsWith("http") ? link2 : `https://${link2}`);
-        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://");
       }
-      setIsOpen(false);
     });
+    setIsLinkEditMode(true);
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
+  return /* @__PURE__ */ jsx(
+    Button,
     {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+      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"
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add link",
-            disabled,
-            icon: /* @__PURE__ */ jsx(LinkAddRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (!disabled) setIsOpen((prev) => !prev);
-            }
-          },
-          "upload-link"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  value: text,
-                  appearance: "underline",
-                  placeholder: "Text",
-                  disabled,
-                  onChange: (_, v) => setText(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Link", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  value: link,
-                  appearance: "underline",
-                  placeholder: "Link",
-                  disabled,
-                  onChange: (_, v) => setLink(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    size: "small",
-                    disabled: disabled || !text || !link,
-                    onClick: () => insertLink(text, link),
-                    children: "Add"
-                  }
-                ),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
+      onClick: insertLink
+    },
+    "insert-link"
   );
 };
 function PageSetupPlugin({ disabled, value, onChange }) {
@@ -6058,16 +6592,14 @@ var TableItemPlugin = ({ disabled }) => {
     setIsOpen(false);
   };
   return /* @__PURE__ */ jsxs(
-    Popover,
+    Dialog,
     {
-      trapFocus: true,
-      withArrow: true,
       open: disabled ? false : isOpen,
       onOpenChange: (_, data) => {
         if (!disabled) setIsOpen(data.open);
       },
       children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             size: "small",
@@ -6090,58 +6622,45 @@ var TableItemPlugin = ({ disabled }) => {
           },
           "insert-table-nodes"
         ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Rows", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  type: "number",
-                  min: 1,
-                  value: rows,
-                  placeholder: "Rows",
-                  appearance: "underline",
-                  disabled,
-                  input: { style: { textAlign: "left" } },
-                  onChange: (_, v) => setRows(v.value.replace(/\D/g, ""))
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Columns", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "number",
-                  min: 1,
-                  value: columns,
-                  placeholder: "Columns",
-                  appearance: "underline",
-                  disabled,
-                  input: { style: { textAlign: "left" } },
-                  onChange: (_, v) => setColumns(v.value.replace(/\D/g, ""))
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    size: "small",
-                    appearance: "primary",
-                    disabled: disabled || !rows || !columns,
-                    onClick: onAddTable,
-                    children: "Add"
-                  }
-                ),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
+        /* @__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,
+              {
+                autoFocus: !disabled,
+                value: rows,
+                placeholder: "Rows",
+                appearance: "underline",
+                disabled,
+                onChange: (_, v) => setRows(v.value)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: columns,
+                placeholder: "Columns",
+                appearance: "underline",
+                disabled,
+                onChange: (_, v) => setColumns(v.value)
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                appearance: "primary",
+                disabled: disabled || !rows || !columns,
+                onClick: onAddTable,
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+          ] })
+        ] }) })
       ]
     }
   );
@@ -6165,16 +6684,14 @@ var YoutubeUploadPlugin = ({ disabled }) => {
     setIsOpen(false);
   };
   return /* @__PURE__ */ jsxs(
-    Popover,
+    Dialog,
     {
-      trapFocus: true,
-      withArrow: true,
       open: disabled ? false : isOpen,
       onOpenChange: (_, data) => {
         if (!disabled) setIsOpen(data.open);
       },
       children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             title: "Add youtube URL",
@@ -6196,37 +6713,36 @@ var YoutubeUploadPlugin = ({ disabled }) => {
           },
           "upload-video"
         ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "URL", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  disabled,
-                  value: url,
-                  appearance: "underline",
-                  placeholder: "Add Youtube video URL",
-                  onChange: (_, v) => setURL(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
+        /* @__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",
@@ -6244,24 +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,
-  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) => {
@@ -6281,8 +6815,9 @@ var ToolBarPlugins = (props) => {
   const [isLowercase, setIsLowercase] = useState(false);
   const [isCapitalize, setIsCapitalize] = useState(false);
   const [alignment, setAlignment] = useState("left");
-  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();
@@ -6324,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();
@@ -6335,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());
       }
     });
   };
@@ -6368,8 +6899,6 @@ var ToolBarPlugins = (props) => {
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
-          const sel = $getSelection();
-          if ($isRangeSelection(sel)) lastSelectionRef.current = sel.clone();
           updateToolbarPlugins();
           return false;
         },
@@ -6401,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);
@@ -6465,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) => {
@@ -6479,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;
@@ -6532,6 +7047,8 @@ var ToolBarPlugins = (props) => {
           Button,
           {
             size: "small",
+            "aria-label": "Bold",
+            "aria-pressed": isBold,
             disabled: !isEditable || props.readOnly,
             icon: /* @__PURE__ */ jsx(TextBold24Regular, { style: { color: getIconColor(isBold) } }),
             style: getButtonStyle(isBold),
@@ -6544,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),
@@ -6556,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),
@@ -6566,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":
@@ -6574,7 +7102,9 @@ var ToolBarPlugins = (props) => {
           InsertImageDialog,
           {
             activeEditor: editor,
-            disabled: !isEditable || props.readOnly
+            disabled: !isEditable || props.readOnly,
+            maxImageSizeMB: props.maxImageSizeMB,
+            validationMessages: props.validationMessages
           },
           key
         );
@@ -6583,7 +7113,9 @@ var ToolBarPlugins = (props) => {
           InsertInlineImageDialog,
           {
             activeEditor: editor,
-            disabled: !isEditable || props.readOnly
+            disabled: !isEditable || props.readOnly,
+            maxImageSizeMB: props.maxImageSizeMB,
+            validationMessages: props.validationMessages
           },
           key
         );
@@ -6606,7 +7138,7 @@ var ToolBarPlugins = (props) => {
               const val = data.optionValue;
               if (!val) return;
               if (val === "paragraph") {
-                applyToBlock((sel) => $setBlocksType(sel, () => $createParagraphNode()));
+                formatParagraph(editor);
                 setSelectNodeType("paragraph");
               } else {
                 updateHeading(val);
@@ -6627,78 +7159,451 @@ var ToolBarPlugins = (props) => {
         return /* @__PURE__ */ jsx(FontSizePlugin, { disabled: !isEditable || props.readOnly }, key);
       case "|":
         return /* @__PURE__ */ jsx(ToolbarDivider, {}, key);
-      case "Decorators": {
-        const activeDecorators = [
-          ...isUppercase ? ["uppercase"] : [],
-          ...isLowercase ? ["lowercase"] : [],
-          ...isCapitalize ? ["capitalize"] : [],
-          ...isStrikethrough ? ["strike"] : [],
-          ...isSubscript ? ["subscript"] : [],
-          ...isSuperscript ? ["superscript"] : [],
-          ...isHighlight ? ["highlight"] : [],
-          ...selectNodeType === "ul" ? ["ul-list"] : [],
-          ...selectNodeType === "ol" ? ["ol-list"] : [],
-          ...selectNodeType === "quote" ? ["quote"] : []
-        ];
-        const DECORATOR_LABEL = {
-          uppercase: "Uppercase",
-          lowercase: "Lowercase",
-          capitalize: "Capitalize",
-          strike: "Strikethrough",
-          subscript: "Subscript",
-          superscript: "Superscript",
-          highlight: "Highlight",
-          "ul-list": "Bullet list",
-          "ol-list": "Number list",
-          quote: "Quote"
-        };
-        const decoratorValue = activeDecorators.length === 0 ? "" : activeDecorators.length === 1 ? DECORATOR_LABEL[activeDecorators[0]] : `${DECORATOR_LABEL[activeDecorators[0]]} +${activeDecorators.length - 1}`;
-        return /* @__PURE__ */ jsxs(
-          Dropdown,
+      // ── 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,
           {
-            multiselect: true,
-            id: `${groupIndex}-set-decorators`,
-            placeholder: "Text",
-            value: decoratorValue,
-            selectedOptions: activeDecorators,
-            disabled: !isEditable,
-            className: styles.alignDropdown,
-            button: { style: dropdownButtonStyle },
-            expandIcon: { style: dropdownExpandIconStyle },
-            listbox: { style: { minInlineSize: "180px" } },
-            onOptionSelect: (_, data) => {
-              switch (data.optionValue) {
-                case "uppercase":
-                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "uppercase");
-                  break;
-                case "lowercase":
-                  onHandleSelectOption("lowercase" /* Lowercase */);
-                  break;
-                case "capitalize":
-                  onHandleSelectOption("capitalize" /* Capitalize */);
-                  break;
-                case "strike":
-                  onHandleSelectOption("strike" /* Strikethrough */);
-                  break;
-                case "subscript":
-                  onHandleSelectOption("subscript" /* Subscript */);
-                  break;
-                case "superscript":
-                  onHandleSelectOption("superscript" /* Superscript */);
-                  break;
-                case "highlight":
-                  onHandleSelectOption("highlight" /* Highlight */);
-                  break;
-                case "ul-list":
-                  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);
-                  break;
-                case "page-break":
-                  editor.dispatchCommand(INSERT_PAGE_BREAK, void 0);
-                  break;
-                case "quote":
+            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("h5");
+                setSelectNodeType("h5");
+              }
+            },
+            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 "Decorators": {
+        const activeDecorators = [
+          ...isUppercase ? ["uppercase"] : [],
+          ...isLowercase ? ["lowercase"] : [],
+          ...isCapitalize ? ["capitalize"] : [],
+          ...isStrikethrough ? ["strike"] : [],
+          ...isSubscript ? ["subscript"] : [],
+          ...isSuperscript ? ["superscript"] : [],
+          ...isHighlight ? ["highlight"] : [],
+          ...selectNodeType === "ul" ? ["ul-list"] : [],
+          ...selectNodeType === "ol" ? ["ol-list"] : [],
+          ...selectNodeType === "alpha" ? ["al-list"] : [],
+          ...selectNodeType === "quote" ? ["quote"] : []
+        ];
+        const DECORATOR_LABEL = {
+          uppercase: "Uppercase",
+          lowercase: "Lowercase",
+          capitalize: "Capitalize",
+          strike: "Strikethrough",
+          subscript: "Subscript",
+          superscript: "Superscript",
+          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}`;
+        return /* @__PURE__ */ jsxs(
+          Dropdown,
+          {
+            multiselect: true,
+            id: `${groupIndex}-set-decorators`,
+            placeholder: "Text",
+            value: decoratorValue,
+            selectedOptions: activeDecorators,
+            disabled: !isEditable,
+            className: styles.alignDropdown,
+            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");
+                  break;
+                case "lowercase":
+                  onHandleSelectOption("lowercase" /* Lowercase */);
+                  break;
+                case "capitalize":
+                  onHandleSelectOption("capitalize" /* Capitalize */);
+                  break;
+                case "strike":
+                  onHandleSelectOption("strike" /* Strikethrough */);
+                  break;
+                case "subscript":
+                  onHandleSelectOption("subscript" /* Subscript */);
+                  break;
+                case "superscript":
+                  onHandleSelectOption("superscript" /* Superscript */);
+                  break;
+                case "highlight":
+                  onHandleSelectOption("highlight" /* Highlight */);
+                  break;
+                case "ul-list":
+                  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
+                  );
+                  break;
+                case "al-list":
+                  editor.update(() => $toggleAlphaList());
+                  break;
+                case "page-break":
+                  editor.dispatchCommand(INSERT_PAGE_BREAK, void 0);
+                  break;
+                case "quote":
                   formatQuote();
                   break;
               }
@@ -6729,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: [
@@ -6740,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"
@@ -6765,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(
@@ -6984,28 +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({
@@ -7026,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);
       });
@@ -7136,6 +8074,16 @@ function _makeQueryFn(fn) {
     };
   };
 }
+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;
@@ -7151,13 +8099,17 @@ var ContentEditorComponent = forwardRef(
     );
     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 [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);
@@ -7168,32 +8120,37 @@ var ContentEditorComponent = forwardRef(
     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 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)",
@@ -7235,41 +8192,7 @@ var ContentEditorComponent = forwardRef(
         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)`
-      );
-    }
-    if (props.minChars !== void 0 && touched && charCount < props.minChars && charCount > 0) {
-      const m = props.errorMessages?.minCharsRequired;
-      internalErrors.push(
-        typeof m === "function" ? m(charCount, props.minChars) : m ?? `Minimum ${props.minChars} characters required (${charCount} entered)`
-      );
-    }
-    const allErrors = [...internalErrors, ...props.errors ?? [], ...refErrors];
-    const hasErrors = allErrors.length > 0;
-    const hasRedBorder = hasErrors;
     useEffect(() => {
       if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
       const wasOverLimit = previousOverLimitRef.current;
@@ -7282,214 +8205,327 @@ var ContentEditorComponent = forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        style: {
-          zIndex: 1e3,
-          background: "#fff",
-          borderRadius: "2px",
-          width: props.width ?? "100%",
-          height: props.height ?? "100%",
-          margin: props.margin ?? "5px auto",
-          border: `1px solid ${hasRedBorder ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
-          transition: "border-color 0.2s",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                pointerEvents: isReadOnly ? "none" : "auto",
-                position: "sticky",
-                opacity: isReadOnly ? 0.85 : 1
-              },
-              children: /* @__PURE__ */ jsx(
-                ToolBarPlugins,
-                {
-                  level: props.level ?? "basic" /* Basic */,
-                  readOnly: props.readOnly,
-                  pageSetup,
-                  onPageSetupChange: setPageSetup
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                position: "relative",
-                flexGrow: 1,
-                padding: "15px 0px",
-                overflowY: "scroll",
-                overflowX: "auto",
-                minWidth: 0,
-                background: pageCanvas.widthPx !== void 0 ? "#eef0f2" : void 0
-              },
-              onClickCapture: handleReadOnlyClickCapture,
-              children: [
-                /* @__PURE__ */ jsx(
-                  RichTextPlugin,
+    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",
+              {
+                className: "editor-toolbar-root",
+                style: {
+                  pointerEvents: isReadOnly ? "none" : "auto",
+                  position: "sticky",
+                  opacity: isReadOnly ? 0.85 : 1
+                },
+                children: /* @__PURE__ */ jsx(
+                  ToolBarPlugins,
                   {
-                    ErrorBoundary: LexicalErrorBoundary,
-                    contentEditable: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "editor",
-                        style: { height: "100%", position: "relative" },
-                        ref: onAnchorRef,
-                        children: /* @__PURE__ */ jsx(
-                          ContentEditable,
+                    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",
+                        {
+                          className: "editor",
+                          style: { height: "100%", position: "relative" },
+                          ref: onAnchorRef,
+                          children: /* @__PURE__ */ jsx(
+                            ContentEditable,
+                            {
+                              ref: contentEditableDomRef,
+                              className: css(EditorStyles.contentEditor),
+                              style: {
+                                paddingTop: props.level !== "none" /* None */ ? 0 : 10,
+                                paddingLeft: pageCanvas.paddingPx,
+                                paddingRight: pageCanvas.paddingPx,
+                                maxWidth: pageCanvas.widthPx,
+                                marginLeft: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+                                marginRight: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+                                boxShadow: pageCanvas.widthPx !== void 0 ? "0 0 0 1px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08)" : void 0
+                              },
+                              spellCheck: !resolvedSpellCheck,
+                              autoCorrect: resolvedSpellCheck ? "off" : void 0,
+                              autoCapitalize: resolvedSpellCheck ? "off" : void 0
+                            }
+                          )
+                        }
+                      ),
+                      placeholder: /* @__PURE__ */ jsx(Stack, { className: css(EditorStyles.editorPlaceholder), children: props.placeholder })
+                    }
+                  ),
+                  (props.wordLimit !== void 0 || props.maxWords !== void 0 || props.minWords !== void 0 || props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        position: "sticky",
+                        bottom: 0,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        gap: 10,
+                        paddingRight: 14,
+                        pointerEvents: "none",
+                        userSelect: "none"
+                      },
+                      children: [
+                        (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",
                           {
-                            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
+                              fontSize: "11px",
+                              color: hasValidationError ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
+                              fontWeight: hasValidationError ? 600 : 400,
+                              transition: "color 0.2s, font-weight 0.2s"
                             },
-                            spellCheck: !resolvedSpellCheck,
-                            autoCorrect: resolvedSpellCheck ? "off" : void 0,
-                            autoCapitalize: resolvedSpellCheck ? "off" : void 0
+                            children: [
+                              metrics.chars,
+                              props.maxChars !== void 0 && ` / ${props.maxChars}`,
+                              props.minChars !== void 0 && props.maxChars === void 0 && ` (min ${props.minChars})`,
+                              " chars"
+                            ]
                           }
                         )
-                      }
-                    ),
-                    placeholder: /* @__PURE__ */ jsx(Stack, { className: css(EditorStyles.editorPlaceholder), children: props.placeholder })
-                  }
-                ),
-                props.wordLimit !== void 0 && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "sticky",
-                      bottom: 0,
-                      display: "flex",
-                      justifyContent: "flex-end",
-                      paddingRight: 14,
-                      pointerEvents: "none",
-                      userSelect: "none"
-                    },
-                    children: /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "11px",
-                          color: isOverLimit ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
-                          fontWeight: isOverLimit ? 600 : 400,
-                          transition: "color 0.2s, font-weight 0.2s"
-                        },
-                        children: [
-                          wordCount,
-                          " / ",
-                          props.wordLimit,
-                          " words"
-                        ]
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          hasErrors && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                borderTop: "1px solid #fbd5d5",
-                background: "#fff8f8",
-                padding: "6px 12px 8px",
-                display: "flex",
-                flexDirection: "column",
-                gap: 4
-              },
-              children: allErrors.map((err, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsx(ErrorCircleRegular, { style: { fontSize: 14, color: "#c4272c", flexShrink: 0 } }),
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#c4272c" }, children: err })
-              ] }, i))
-            }
-          ),
-          /* @__PURE__ */ jsx(ReadOnlyPlugin, { readonly: isReadOnly }),
-          /* @__PURE__ */ jsx(BrowserSpellCheckPlugin, { enabled: !resolvedSpellCheck }),
-          /* @__PURE__ */ jsx(
-            FocusEventsPlugin,
-            {
-              onFocus: props.onFocus,
-              onBlur: () => {
-                setTouched(true);
-                props.onBlur?.();
-              },
-              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(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 })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(EditorReadyPlugin, { onReady: props.onReady })
+    ] }) });
   }
 );
 
-export { ContentEditorComponent, ContentEditorLevel };
+export { ContentEditorComponent, ContentEditorLevel, DEFAULT_VALIDATION_MESSAGES };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map