@tarviks/lexical-rich-editor 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -5,9 +5,10 @@ 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, SELECTION_CHANGE_COMMAND, $getNodeByKey, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isTextNode, $createRangeSelection, $setSelection, $isElementNode, $isNodeSelection, CLICK_COMMAND, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, FORMAT_ELEMENT_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, createEditor, KEY_ENTER_COMMAND } from 'lexical';
+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, createEditor, KEY_ENTER_COMMAND } from 'lexical';
 import { mergeStyleSets, Stack, css, useTheme, Callout, TextField, DefaultButton } from '@fluentui/react';
-import { makeStyles, FluentProvider, webLightTheme, Button, Menu, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, ToolbarDivider, Popover, PopoverTrigger, PopoverSurface, Field, Input } from '@fluentui/react-components';
+import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, ToolbarDivider, Button, 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, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, CodeFilled, LinkFilled } from '@fluentui/react-icons';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
 import { LinkNode, AutoLinkNode, $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode } from '@lexical/link';
 import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
@@ -25,7 +26,6 @@ import { HeadingNode, QuoteNode, $isHeadingNode, $createQuoteNode, $createHeadin
 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 { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { DeleteRegular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, CodeFilled, LinkFilled } from '@fluentui/react-icons';
 import { $setBlocksType, $patchStyleText, $isAtNodeEnd, $getSelectionStyleValueForProperty } from '@lexical/selection';
 import { createPortal } from 'react-dom';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -222,80 +222,107 @@ var init_ImageResizer = __esm({
           document.removeEventListener("pointerup", handlePointerUp);
         }
       };
-      return /* @__PURE__ */ jsxs("div", { ref: controlWrapperRef, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-n",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.north);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-ne",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.north | Direction.east);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-e",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.east);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-se",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.south | Direction.east);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-s",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.south);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-sw",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.south | Direction.west);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "image-resizer image-resizer-w",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.west);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
+      return (
+        // Overlay that exactly covers the image container (position:relative parent).
+        // pointer-events:none lets clicks pass through to the image; each handle
+        // re-enables pointer-events so drag-resize still works.
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "image-resizer image-resizer-nw",
-            onPointerDown: (event) => {
-              handlePointerDown(event, Direction.north | Direction.west);
-            }
+            ref: controlWrapperRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-n",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-ne",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.east);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-e",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.east);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-se",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.east);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-s",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-sw",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.west);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-w",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.west);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "image-resizer image-resizer-nw",
+                  style: { pointerEvents: "auto" },
+                  onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.west);
+                  }
+                }
+              )
+            ]
           }
         )
-      ] });
+      );
     };
     ImageResizer_default = ImageResizer;
   }
@@ -3546,6 +3573,204 @@ function PageBreakPlugin() {
   }, [editor]);
   return null;
 }
+
+// src/Utils/Sanitize.ts
+var DROP_ENTIRELY = /* @__PURE__ */ new Set([
+  "script",
+  "noscript",
+  "style",
+  "object",
+  "embed",
+  "form",
+  "input",
+  "button",
+  "select",
+  "textarea",
+  "meta",
+  "link",
+  "base"
+]);
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  // Block
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "div",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "td",
+  "th",
+  // Inline
+  "span",
+  "a",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "del",
+  "strike",
+  "sub",
+  "sup",
+  "mark",
+  "code",
+  "br",
+  "hr",
+  // Media / embeds
+  "img",
+  "iframe"
+]);
+var ALLOWED_ATTRS = /* @__PURE__ */ new Set([
+  // Presentation
+  "class",
+  "style",
+  "dir",
+  "lang",
+  // Anchors
+  "href",
+  "target",
+  "rel",
+  // Images
+  "src",
+  "alt",
+  "width",
+  "height",
+  // Tables
+  "colspan",
+  "rowspan",
+  // Lists  — <ol type="a"> and <ol start="2">
+  "start",
+  "type",
+  // Lexical-internal data markers
+  "data-lex-block",
+  "data-kind",
+  "data-lexical-decorator",
+  // Misc
+  "title",
+  "allowfullscreen"
+]);
+var DANGEROUS_URL = /^\s*(javascript|data\s*:|vbscript)/i;
+function sanitizeElement(el) {
+  for (const child of Array.from(el.children)) {
+    sanitizeElement(child);
+  }
+  const tag = el.tagName.toLowerCase();
+  if (DROP_ENTIRELY.has(tag)) {
+    el.parentNode?.removeChild(el);
+    return;
+  }
+  if (tag === "iframe") {
+    const src = el.getAttribute("src") ?? "";
+    const isYouTube = /^\s*https:\/\/(www\.)?(youtube\.com|youtube-nocookie\.com)\/embed\/[^?&/]+/i.test(src);
+    if (!isYouTube) {
+      el.parentNode?.removeChild(el);
+      return;
+    }
+  }
+  if (!ALLOWED_TAGS.has(tag)) {
+    while (el.firstChild) {
+      el.parentNode?.insertBefore(el.firstChild, el);
+    }
+    el.parentNode?.removeChild(el);
+    return;
+  }
+  for (const { name, value } of Array.from(el.attributes)) {
+    const lname = name.toLowerCase();
+    if (!ALLOWED_ATTRS.has(lname)) {
+      el.removeAttribute(name);
+      continue;
+    }
+    if (lname === "href" || lname === "src") {
+      if (DANGEROUS_URL.test(value)) {
+        el.removeAttribute(name);
+      }
+    }
+    if (lname === "style") {
+      const safe = value.replace(/expression\s*\(/gi, "(").replace(/url\s*\(\s*['"]?\s*javascript:/gi, "url(");
+      el.setAttribute("style", safe);
+    }
+  }
+  if (tag === "a" && (el.getAttribute("target") || "").toLowerCase() === "_blank") {
+    const rel = (el.getAttribute("rel") || "").trim();
+    const tokens = new Set(
+      rel.split(/\s+/).filter(Boolean).map((t) => t.toLowerCase())
+    );
+    tokens.add("noopener");
+    tokens.add("noreferrer");
+    el.setAttribute("rel", Array.from(tokens).join(" "));
+  }
+}
+function sanitizeHtml(html) {
+  if (!html || typeof html !== "string") return "";
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  for (const child of Array.from(doc.body.children)) {
+    sanitizeElement(child);
+  }
+  return doc.body.innerHTML;
+}
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "div",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "blockquote",
+  "pre",
+  "hr"
+]);
+function normalizeToBlockHtml(html) {
+  if (!html) return "";
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const body = doc.body;
+  const childNodes = Array.from(body.childNodes);
+  const needsWrap = childNodes.some((node) => {
+    if (node.nodeType === Node.TEXT_NODE) return !!node.nodeValue?.trim();
+    if (node.nodeType === Node.ELEMENT_NODE)
+      return !BLOCK_TAGS.has(node.tagName.toLowerCase());
+    return false;
+  });
+  if (!needsWrap) return html;
+  while (body.firstChild) body.removeChild(body.firstChild);
+  let pendingP = null;
+  for (const node of childNodes) {
+    const isBlock = node.nodeType === Node.ELEMENT_NODE && BLOCK_TAGS.has(node.tagName.toLowerCase());
+    const isWhitespace = node.nodeType === Node.TEXT_NODE && !node.nodeValue?.trim();
+    if (isBlock) {
+      if (pendingP) {
+        body.appendChild(pendingP);
+        pendingP = null;
+      }
+      body.appendChild(node);
+    } else if (!isWhitespace) {
+      if (!pendingP) pendingP = doc.createElement("p");
+      pendingP.appendChild(node);
+    }
+  }
+  if (pendingP) body.appendChild(pendingP);
+  return body.innerHTML;
+}
+
+// src/Utils/Helper.ts
 function findBlockByKind(kind) {
   const root = $getRoot();
   for (const child of root.getChildren()) {
@@ -3554,8 +3779,9 @@ function findBlockByKind(kind) {
   return null;
 }
 function importHtmlIntoBlock(editor, block, html) {
+  const safe = normalizeToBlockHtml(sanitizeHtml(html));
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html || "<p></p>", "text/html");
+  const doc = parser.parseFromString(safe || "<p></p>", "text/html");
   const nodes = $generateNodesFromDOM(editor, doc);
   block.clear();
   block.append(...nodes);
@@ -3594,7 +3820,8 @@ function hasBlock(editor, kind) {
 function RefApiPlugin({
   forwardedRef,
   contentEditableDomRef,
-  focusedRef
+  focusedRef,
+  setRefErrors
 }) {
   const [editor] = useLexicalComposerContext();
   useImperativeHandle(
@@ -3633,12 +3860,14 @@ 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)
     }),
-    [editor, contentEditableDomRef, focusedRef]
+    [editor, contentEditableDomRef, focusedRef, setRefErrors]
   );
   return null;
 }
@@ -4278,8 +4507,8 @@ function SpellCheckPlugin({
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
   const [isInTable, setIsInTable] = React6.useState(false);
+  const [anchorRect, setAnchorRect] = React6.useState(null);
   const [open, setOpen] = React6.useState(false);
-  const [menuPos, setMenuPos] = React6.useState(null);
   const updateFromSelection = React6.useCallback(() => {
     const root = editor.getRootElement();
     if (!root) return;
@@ -4288,21 +4517,34 @@ function TableActionMenuPlugin({ disabled = false }) {
       if ($isTableSelection(selection)) {
         const tableNode = selection.getNodes().find((n) => $isTableNode(n));
         if (tableNode) {
-          setIsInTable(true);
-          return;
+          const dom = editor.getElementByKey(tableNode.getKey());
+          if (dom) {
+            setIsInTable(true);
+            setAnchorRect(dom.getBoundingClientRect());
+            return;
+          }
         }
       }
       if (!$isRangeSelection(selection)) {
         setIsInTable(false);
+        setAnchorRect(null);
         return;
       }
       const anchorNode = selection.anchor.getNode();
       const cellNode = $isTableCellNode(anchorNode) ? anchorNode : $findMatchingParent(anchorNode, (n) => $isTableCellNode(n));
       if (!cellNode || !$isTableCellNode(cellNode)) {
         setIsInTable(false);
+        setAnchorRect(null);
+        return;
+      }
+      const cellDom = editor.getElementByKey(cellNode.getKey());
+      if (!cellDom) {
+        setIsInTable(false);
+        setAnchorRect(null);
         return;
       }
       setIsInTable(true);
+      setAnchorRect(cellDom.getBoundingClientRect());
     });
   }, [editor]);
   React6.useEffect(() => {
@@ -4364,33 +4606,18 @@ function TableActionMenuPlugin({ disabled = false }) {
   React6.useEffect(() => {
     if (!isInTable && open) setOpen(false);
   }, [isInTable, open]);
-  React6.useEffect(() => {
-    const root = editor.getRootElement();
-    if (!root) return;
-    const handleContextMenu = (e) => {
-      if (disabled) return;
-      let inTable = false;
-      editor.getEditorState().read(() => {
-        const selection = $getSelection();
-        if ($isTableSelection(selection)) {
-          inTable = true;
-          return;
-        }
-        if ($isRangeSelection(selection)) {
-          const node = selection.anchor.getNode();
-          const cell = $isTableCellNode(node) ? node : $findMatchingParent(node, (n) => $isTableCellNode(n));
-          if (cell) inTable = true;
-        }
-      });
-      if (inTable) {
-        e.preventDefault();
-        setMenuPos({ x: e.clientX, y: e.clientY });
-        setOpen(true);
-      }
+  const canShow = isInTable && !!anchorRect && !disabled;
+  const handleStyle = React6.useMemo(() => {
+    if (!anchorRect) return void 0;
+    const top = Math.max(8, anchorRect.top + 6);
+    const left = Math.max(8, anchorRect.right - 34);
+    return {
+      position: "fixed",
+      top,
+      left,
+      zIndex: 9999
     };
-    root.addEventListener("contextmenu", handleContextMenu);
-    return () => root.removeEventListener("contextmenu", handleContextMenu);
-  }, [editor, disabled]);
+  }, [anchorRect]);
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
@@ -4423,55 +4650,63 @@ function TableActionMenuPlugin({ disabled = false }) {
     const table = $getTableNodeFromLexicalNodeOrThrow(cell);
     table.remove();
   });
-  const virtualTarget = React6.useMemo(() => {
-    if (!menuPos) return void 0;
-    return {
-      getBoundingClientRect: () => new DOMRect(menuPos.x, menuPos.y, 0, 0)
-    };
-  }, [menuPos]);
-  if (disabled) return null;
+  if (!canShow || !handleStyle) return null;
   return createPortal(
-    /* @__PURE__ */ jsx(Menu, { open, onOpenChange: (_, data) => setOpen(data.open), positioning: { target: virtualTarget }, children: /* @__PURE__ */ jsx(MenuPopover, { className: "aoTableActionPopover", children: /* @__PURE__ */ jsxs(MenuList, { children: [
-      /* @__PURE__ */ jsxs(MenuGroup, { children: [
-        /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Insert" }),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowAbove, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-            /* @__PURE__ */ jsx(ArrowUpRegular, {}),
-            " Row above"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2191" })
-        ] }) }),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowBelow, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-            /* @__PURE__ */ jsx(ArrowDownRegular, {}),
-            " Row below"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2193" })
-        ] }) }),
+    /* @__PURE__ */ jsx("div", { style: handleStyle, className: "aoTableActionHandleRoot", children: /* @__PURE__ */ jsxs(Menu, { open, onOpenChange: (_, data) => 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, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuPopover, { className: "aoTableActionPopover", children: /* @__PURE__ */ jsxs(MenuList, { children: [
+        /* @__PURE__ */ jsxs(MenuGroup, { children: [
+          /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Insert" }),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowAbove, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+              /* @__PURE__ */ jsx(ArrowUpRegular, {}),
+              " Row above"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2191" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowBelow, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+              /* @__PURE__ */ jsx(ArrowDownRegular, {}),
+              " Row below"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2193" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColLeft, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+              /* @__PURE__ */ jsx(ArrowLeftRegular, {}),
+              " Column left"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2190" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColRight, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+              /* @__PURE__ */ jsx(ArrowRightRegular, {}),
+              " Column right"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2192" })
+          ] }) })
+        ] }),
         /* @__PURE__ */ jsx(MenuDivider, {}),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColLeft, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-            /* @__PURE__ */ jsx(ArrowLeftRegular, {}),
-            " Column left"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2190" })
-        ] }) }),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColRight, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-            /* @__PURE__ */ jsx(ArrowRightRegular, {}),
-            " Column right"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2192" })
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsx(MenuDivider, {}),
-      /* @__PURE__ */ jsxs(MenuGroup, { children: [
-        /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Delete" }),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteRow, style: dangerStyle, children: "Delete row" }),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteCol, style: dangerStyle, children: "Delete column" }),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteTable, style: dangerStyle, children: "Delete table" })
-      ] })
-    ] }) }) }),
+        /* @__PURE__ */ jsxs(MenuGroup, { children: [
+          /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Delete" }),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteRow, style: dangerStyle, children: "Delete row" }),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteCol, style: dangerStyle, children: "Delete column" }),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteTable, style: dangerStyle, children: "Delete table" })
+        ] })
+      ] }) })
+    ] }) }),
     document.body
   );
 }
@@ -4775,13 +5010,6 @@ function getToolbarGroupsByLevel(level) {
       ];
   }
 }
-var DEFAULT_FONT_SIZE = 15;
-var formatParagraph = (editor) => {
-  editor.update(() => {
-    const selection = $getSelection();
-    $setBlocksType(selection, () => $createParagraphNode());
-  });
-};
 var PRESET = [
   "#000000",
   "#434343",
@@ -4857,11 +5085,12 @@ var hsvToRgb = (h, s, v) => {
     b: Math.round((bb + m) * 255)
   };
 };
-function useDrag(onMove, onEnd) {
+function useDrag(onMove, onEnd, interactingRef) {
   const draggingRef = React6.useRef(false);
   const start = React6.useCallback(
     (e) => {
       draggingRef.current = true;
+      if (interactingRef) interactingRef.current = true;
       onMove(e.clientX, e.clientY);
       const move = (ev) => {
         if (!draggingRef.current) return;
@@ -4871,17 +5100,55 @@ function useDrag(onMove, onEnd) {
         draggingRef.current = false;
         window.removeEventListener("mousemove", move);
         window.removeEventListener("mouseup", up);
+        if (interactingRef) {
+          const clearFlag = () => {
+            interactingRef.current = false;
+          };
+          window.addEventListener("click", clearFlag, { once: true });
+          setTimeout(() => {
+            window.removeEventListener("click", clearFlag);
+            interactingRef.current = false;
+          }, 0);
+        }
       };
       window.addEventListener("mousemove", move);
       window.addEventListener("mouseup", up);
     },
-    [onMove, onEnd]
+    [onMove, onEnd, interactingRef]
   );
   return start;
 }
 var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
   const [open, setOpen] = React6.useState(false);
   const btnRef = React6.useRef(null);
+  const interactingRef = React6.useRef(false);
+  const handleDismiss = React6.useCallback(() => setOpen(false), []);
+  const preventDismissOnEvent = React6.useCallback(
+    (ev) => {
+      if (interactingRef.current) return true;
+      return ev.type !== "click";
+    },
+    []
+  );
+  const [, forceReposition] = React6.useState(0);
+  React6.useEffect(() => {
+    if (!open) return;
+    let rafId = null;
+    const reposition = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        forceReposition((n) => n + 1);
+      });
+    };
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+    };
+  }, [open]);
   const [hex, setHex] = React6.useState(normalizeHex(value || "#000000"));
   const { r, g, b } = React6.useMemo(() => hexToRgb(hex), [hex]);
   const hsv = React6.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
@@ -4922,7 +5189,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     },
     [h, commitHsv]
   );
-  const startSV = useDrag(onSVMove);
+  const startSV = useDrag(onSVMove, void 0, interactingRef);
   const hueRef = React6.useRef(null);
   const onHueMove = React6.useCallback(
     (clientX) => {
@@ -4935,7 +5202,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     },
     [s, v, commitHsv]
   );
-  const startHue = useDrag((x) => onHueMove(x));
+  const startHue = useDrag((x) => onHueMove(x), void 0, interactingRef);
   const svThumb = React6.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
   const hueThumb = React6.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
   const hueColor = React6.useMemo(() => {
@@ -4984,10 +5251,11 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
       Callout,
       {
         target: btnRef,
-        onDismiss: () => setOpen(false),
+        onDismiss: handleDismiss,
         setInitialFocus: true,
         directionalHint: 4,
         className: "aoColorCallout",
+        preventDismissOnEvent,
         children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: 12, width: 320 } }, children: [
           /* @__PURE__ */ jsxs("div", { className: "aoLexRow", children: [
             /* @__PURE__ */ jsx("div", { className: "aoLexSwatch", style: { background: hex } }),
@@ -5087,7 +5355,9 @@ var ColorPickerPlugin = ({ disabled }) => {
   }, [editor]);
   const applyStyle = (args) => {
     if (disabled) return;
-    editor.focus();
+    const root = editor.getRootElement();
+    const editorIsActive = !!lastRangeSelectionRef.current && !!root && (document.activeElement === root || root.contains(document.activeElement));
+    if (editorIsActive) editor.focus();
     editor.update(() => {
       const saved = lastRangeSelectionRef.current;
       if (saved) {
@@ -5226,6 +5496,7 @@ var FontFamilyPlugin = ({ disabled = false }) => {
     "font-family"
   );
 };
+var DEFAULT_FONT_SIZE = 15;
 var FONT_SIZE_OPTIONS = [
   "8",
   "9",
@@ -5526,21 +5797,27 @@ var TableItemPlugin = ({ disabled }) => {
                 Input,
                 {
                   autoFocus: !disabled,
+                  type: "number",
+                  min: 1,
                   value: rows,
                   placeholder: "Rows",
                   appearance: "underline",
                   disabled,
-                  onChange: (_, v) => setRows(v.value)
+                  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,
-                  onChange: (_, v) => setColumns(v.value)
+                  input: { style: { textAlign: "left" } },
+                  onChange: (_, v) => setColumns(v.value.replace(/\D/g, ""))
                 }
               ) }),
               /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
@@ -5697,8 +5974,7 @@ var ToolBarPlugins = (props) => {
   const [isLowercase, setIsLowercase] = useState(false);
   const [isCapitalize, setIsCapitalize] = useState(false);
   const [alignment, setAlignment] = useState("left");
-  const [isInTable, setIsInTable] = useState(false);
-  const [tableNodeKey, setTableNodeKey] = useState(null);
+  const lastSelectionRef = React6__default.useRef(null);
   const presetGroups = getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
@@ -5715,8 +5991,6 @@ var ToolBarPlugins = (props) => {
       setIsLowercase(false);
       setIsCapitalize(false);
       setSelectNodeType("paragraph");
-      setIsInTable(false);
-      setTableNodeKey(null);
       return;
     }
     setIsBold(selection.hasFormat("bold"));
@@ -5732,21 +6006,8 @@ var ToolBarPlugins = (props) => {
     const anchorNode = selection.anchor.getNode();
     if (anchorNode.getKey() === "root") {
       setSelectNodeType("paragraph");
-      setIsInTable(false);
-      setTableNodeKey(null);
       return;
     }
-    let tableAncestorKey = null;
-    let cursor = anchorNode.getParent();
-    while (cursor !== null) {
-      if (cursor.getType() === "table") {
-        tableAncestorKey = cursor.getKey();
-        break;
-      }
-      cursor = cursor.getParent();
-    }
-    setIsInTable(tableAncestorKey !== null);
-    setTableNodeKey(tableAncestorKey);
     const element = anchorNode.getTopLevelElementOrThrow();
     setAlignment(
       typeof element.getFormatType === "function" ? element.getFormatType() || "left" : "left"
@@ -5767,12 +6028,21 @@ var ToolBarPlugins = (props) => {
       ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "quote", "code"].includes(type) ? type : "paragraph"
     );
   };
+  const applyToBlock = React6__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 = () => {
-    editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return;
+    applyToBlock((selection) => {
       if (selectNodeType === "quote") {
-        formatParagraph(editor);
+        $setBlocksType(selection, () => $createParagraphNode());
       } else {
         $setBlocksType(selection, () => $createQuoteNode());
       }
@@ -5791,6 +6061,8 @@ var ToolBarPlugins = (props) => {
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
+          const sel = $getSelection();
+          if ($isRangeSelection(sel)) lastSelectionRef.current = sel.clone();
           updateToolbarPlugins();
           return false;
         },
@@ -5822,16 +6094,52 @@ var ToolBarPlugins = (props) => {
         editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight");
         break;
       case "leftAlign" /* LeftAlign */:
-        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+        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");
+            }
+          });
+        });
         break;
       case "rightAlign" /* RightAlign */:
-        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+        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");
+            }
+          });
+        });
         break;
       case "centerAlign" /* CenterAlign */:
-        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+        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");
+            }
+          });
+        });
         break;
       case "justifyAlign" /* JustifyAlign */:
-        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+        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");
+            }
+          });
+        });
         break;
       case "undo" /* Undo */:
         editor.dispatchCommand(UNDO_COMMAND, void 0);
@@ -5851,14 +6159,8 @@ var ToolBarPlugins = (props) => {
     }
   };
   const updateHeading = (heading) => {
-    editor.update(() => {
-      const selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        $setBlocksType(selection, () => $createHeadingNode(heading));
-      }
-    });
-    editor.getEditorState().read(() => {
-      updateToolbarPlugins();
+    applyToBlock((selection) => {
+      $setBlocksType(selection, () => $createHeadingNode(heading));
     });
   };
   const renderToken = (token, groupIndex, tokenIndex) => {
@@ -5997,7 +6299,7 @@ var ToolBarPlugins = (props) => {
               const val = data.optionValue;
               if (!val) return;
               if (val === "paragraph") {
-                formatParagraph(editor);
+                applyToBlock((sel) => $setBlocksType(sel, () => $createParagraphNode()));
                 setSelectNodeType("paragraph");
               } else {
                 updateHeading(val);
@@ -6081,16 +6383,10 @@ var ToolBarPlugins = (props) => {
                   onHandleSelectOption("highlight" /* Highlight */);
                   break;
                 case "ul-list":
-                  editor.dispatchCommand(
-                    selectNodeType === "ul" ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND,
-                    void 0
-                  );
+                  editor.dispatchCommand(selectNodeType === "ul" ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND, void 0);
                   break;
                 case "ol-list":
-                  editor.dispatchCommand(
-                    selectNodeType === "ol" ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,
-                    void 0
-                  );
+                  editor.dispatchCommand(selectNodeType === "ol" ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND, void 0);
                   break;
                 case "page-break":
                   editor.dispatchCommand(INSERT_PAGE_BREAK, void 0);
@@ -6126,12 +6422,7 @@ 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: [
@@ -6167,30 +6458,10 @@ 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(
@@ -6224,69 +6495,29 @@ var ToolBarPlugins = (props) => {
   if (!pluginGroups || pluginGroups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "toolbar",
-        "aria-label": "Editor toolbar",
-        style: {
-          display: "flex",
-          flexWrap: "wrap",
-          alignItems: "center",
-          borderBottom: "1px solid #ccced1",
-          background: "#ffffff",
-          padding: "0px",
-          minHeight: 36
-        },
-        children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React6__default.Fragment, { children: group.map((token, tokenIndex) => {
-          try {
-            return renderToken(token, groupIndex, tokenIndex);
-          } catch {
-            return null;
-          }
-        }) }, `group-${groupIndex}`))
-      }
-    ),
-    isInTable && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          padding: "2px 8px",
-          borderBottom: "1px solid #ccced1",
-          background: "#fff8f8"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#888", userSelect: "none" }, children: "Table" }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              icon: /* @__PURE__ */ jsx(DeleteRegular, { style: { color: "#c4272c" } }),
-              title: "Delete table",
-              style: {
-                background: "transparent",
-                border: "none",
-                color: "#c4272c",
-                fontWeight: 500
-              },
-              onClick: () => {
-                editor.update(() => {
-                  if (!tableNodeKey) return;
-                  const node = $getNodeByKey(tableNodeKey);
-                  if (node?.getType() === "table") node.remove();
-                });
-              },
-              children: "Delete Table"
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Editor toolbar",
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        borderBottom: "1px solid #ccced1",
+        background: "#ffffff",
+        padding: "0px",
+        minHeight: 36
+      },
+      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React6__default.Fragment, { children: group.map((token, tokenIndex) => {
+        try {
+          return renderToken(token, groupIndex, tokenIndex);
+        } catch {
+          return null;
+        }
+      }) }, `group-${groupIndex}`))
+    }
+  ) });
 };
 function isYoutubeLikeNode(node) {
   try {
@@ -6439,10 +6670,23 @@ function BrowserSpellCheckPlugin({ enabled }) {
 function WordCountPlugin({ onCountChange }) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
-    return editor.registerUpdateListener(() => {
-      const text = editor.getRootElement()?.innerText ?? "";
-      const words = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
-      onCountChange(words);
+    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 }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        onCountChange($getRoot().getTextContent().length);
+      });
     });
   }, [editor, onCountChange]);
   return null;
@@ -6592,6 +6836,9 @@ var ContentEditorComponent = forwardRef(
     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 contentEditableDomRef = useRef(null);
     const previousOverLimitRef = useRef(false);
     const focusedRef = useRef(false);
@@ -6671,7 +6918,41 @@ 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;
@@ -6694,7 +6975,7 @@ var ContentEditorComponent = forwardRef(
           width: props.width ?? "100%",
           height: props.height ?? "100%",
           margin: props.margin ?? "5px auto",
-          border: `1px solid ${isOverLimit ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
+          border: `1px solid ${hasRedBorder ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
           transition: "border-color 0.2s",
           display: "flex",
           flexDirection: "column"
@@ -6724,7 +7005,9 @@ var ContentEditorComponent = forwardRef(
                 position: "relative",
                 flexGrow: 1,
                 padding: "15px 0px",
-                overflowY: "scroll"
+                overflowY: "scroll",
+                overflowX: "auto",
+                minWidth: 0
               },
               onClickCapture: handleReadOnlyClickCapture,
               children: [
@@ -6788,13 +7071,33 @@ var ContentEditorComponent = forwardRef(
               ]
             }
           ),
+          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: props.onBlur,
+              onBlur: () => {
+                setTouched(true);
+                props.onBlur?.();
+              },
               setFocused,
               containerRef
             }
@@ -6841,20 +7144,16 @@ var ContentEditorComponent = forwardRef(
             }
           ),
           !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
-          /* @__PURE__ */ jsx(
-            CustomOnChangePlugin,
-            {
-              value: props.value,
-              onChange: props.onChange
-            }
-          ),
-          props.wordLimit !== void 0 && /* @__PURE__ */ jsx(WordCountPlugin, { onCountChange: handleWordCount }),
+          /* @__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
+              focusedRef,
+              setRefErrors
             }
           )
         ]