@tarviks/lexical-rich-editor 1.1.0 → 1.2.1

package/dist/index.mjs

@@ -6,9 +6,9 @@ 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 { mergeStyleSets, Stack, css, useTheme, Callout, TextField, DefaultButton } from '@fluentui/react';
-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 { mergeStyleSets, Stack, css, useTheme, Callout, TextField } from '@fluentui/react';
+import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, ToolbarDivider, Button, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Field, Input, DialogActions } from '@fluentui/react-components';
+import { ErrorCircleRegular, ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, AddRegular, TableAddRegular, ImageAddRegular, ImageEditRegular, VideoClipRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, AttachFilled, LinkAddRegular, TextColorRegular, PaintBucket16Filled, Dismiss16Regular, Checkmark16Regular, Edit16Regular, Delete16Regular, CodeFilled, LinkFilled } from '@fluentui/react-icons';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
 import { LinkNode, AutoLinkNode, $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode } from '@lexical/link';
 import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
@@ -615,7 +615,6 @@ var init_ImageComponent = __esm({
             editor,
             buttonRef,
             imageRef,
-            maxWidth,
             onResizeStart,
             onResizeEnd,
             captionsEnabled: !isLoadError && captionsEnabled
@@ -766,6 +765,9 @@ var init_ImageNode = __esm({
         const writable = this.getWritable();
         writable.__width = width;
         writable.__height = height;
+        if (typeof width === "number" && width > writable.__maxWidth) {
+          writable.__maxWidth = width;
+        }
       }
       setShowCaption(showCaption) {
         const writable = this.getWritable();
@@ -855,6 +857,7 @@ __export(InlineImageComponent_exports, {
 var imageCache2, useSuspenseImage2, LazyImage2, InlineImageComponent, InlineImageComponent_default;
 var init_InlineImageComponent = __esm({
   "src/Nodes/InlineImageComponent.tsx"() {
+    init_ImageResizer();
     init_InlineImage();
     init_InlineImageNode();
     imageCache2 = /* @__PURE__ */ new Set();
@@ -897,6 +900,29 @@ var init_InlineImageComponent = __esm({
       const buttonRef = useRef(null);
       const [editor] = useLexicalComposerContext();
       const isEditable = useLexicalEditable();
+      const [isResizing, setIsResizing] = useState(false);
+      const onResizeEnd = (nextWidth, nextHeight) => {
+        setTimeout(() => {
+          setIsResizing(false);
+        }, 200);
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if ($isInlineImageNode(node)) {
+            node.setWidthAndHeight(nextWidth, nextHeight);
+          }
+        });
+      };
+      const onResizeStart = () => {
+        setIsResizing(true);
+      };
+      const setShowCaption = (show) => {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if ($isInlineImageNode(node)) {
+            node.setShowCaption(show);
+          }
+        });
+      };
       const $onDelete = useCallback(
         (payload) => {
           const deleteSelection = $getSelection();
@@ -972,6 +998,9 @@ var init_InlineImageComponent = __esm({
             CLICK_COMMAND,
             (payload) => {
               const event = payload;
+              if (isResizing) {
+                return true;
+              }
               if (event.target === imageRef.current) {
                 if (event.shiftKey) {
                   setSelected(!isSelected);
@@ -1020,6 +1049,7 @@ var init_InlineImageComponent = __esm({
       }, [
         clearSelection,
         editor,
+        isResizing,
         isSelected,
         nodeKey,
         $onDelete,
@@ -1027,20 +1057,35 @@ var init_InlineImageComponent = __esm({
         $onEscape,
         setSelected
       ]);
-      const draggable = isSelected && $isNodeSelection(selection);
-      const isFocused = isSelected && isEditable;
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx("span", { draggable, children: /* @__PURE__ */ jsx(
-        LazyImage2,
-        {
-          className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
-          src,
-          altText,
-          imageRef,
-          width,
-          height,
-          position
-        }
-      ) }) });
+      const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+      const isFocused = (isSelected || isResizing) && isEditable;
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { draggable, children: /* @__PURE__ */ jsx(
+          LazyImage2,
+          {
+            className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+            src,
+            altText,
+            imageRef,
+            width,
+            height,
+            position
+          }
+        ) }),
+        isFocused && $isNodeSelection(selection) && /* @__PURE__ */ jsx(
+          ImageResizer_default,
+          {
+            showCaption,
+            setShowCaption,
+            editor,
+            buttonRef,
+            imageRef,
+            onResizeStart,
+            onResizeEnd,
+            captionsEnabled: false
+          }
+        )
+      ] }) });
     };
     InlineImageComponent_default = InlineImageComponent;
   }
@@ -1228,6 +1273,46 @@ var ContentEditorLevel = /* @__PURE__ */ ((ContentEditorLevel2) => {
   ContentEditorLevel2["Pro"] = "pro";
   return ContentEditorLevel2;
 })(ContentEditorLevel || {});
+
+// src/Types/PageSetup.ts
+var DEFAULT_PAGE_SETUP = {
+  size: "pageless",
+  orientation: "portrait",
+  margin: "normal"
+};
+var PAGE_SIZE_OPTIONS = [
+  { key: "a4", label: 'A4 (8.27" x 11.69")', widthIn: 8.27, heightIn: 11.69 },
+  { key: "letter", label: 'Letter (8.5" x 11")', widthIn: 8.5, heightIn: 11 },
+  { key: "legal", label: 'Legal (8.5" x 14")', widthIn: 8.5, heightIn: 14 },
+  { key: "tabloid", label: 'Tabloid (11" x 17")', widthIn: 11, heightIn: 17 },
+  { key: "a3", label: 'A3 (11.69" x 16.54")', widthIn: 11.69, heightIn: 16.54 },
+  { key: "a5", label: 'A5 (5.83" x 8.27")', widthIn: 5.83, heightIn: 8.27 },
+  { key: "b4", label: 'B4 (9.84" x 13.90")', widthIn: 9.84, heightIn: 13.9 },
+  { key: "b5", label: 'B5 (6.93" x 9.84")', widthIn: 6.93, heightIn: 9.84 },
+  { key: "statement", label: 'Statement (5.5" x 8.5")', widthIn: 5.5, heightIn: 8.5 },
+  { key: "executive", label: 'Executive (7.25" x 10.5")', widthIn: 7.25, heightIn: 10.5 },
+  { key: "folio", label: 'Folio (8.5" x 13")', widthIn: 8.5, heightIn: 13 }
+];
+var MARGIN_OPTIONS = [
+  { key: "narrow", label: 'Narrow (0.25")', valueIn: 0.25 },
+  { key: "normal", label: 'Normal (0.4")', valueIn: 0.4 },
+  { key: "moderate", label: 'Moderate (0.75")', valueIn: 0.75 },
+  { key: "wide", label: 'Wide (1")', valueIn: 1 }
+];
+var CSS_PX_PER_INCH = 96;
+function resolvePageCanvasMetrics(value) {
+  const margin = MARGIN_OPTIONS.find((o) => o.key === value.margin) ?? MARGIN_OPTIONS[1];
+  if (value.size === "pageless") {
+    return { widthPx: void 0, paddingPx: 20 };
+  }
+  const size = PAGE_SIZE_OPTIONS.find((o) => o.key === value.size);
+  if (!size) return { widthPx: void 0, paddingPx: 20 };
+  const widthIn = value.orientation === "landscape" ? size.heightIn : size.widthIn;
+  return {
+    widthPx: Math.round(widthIn * CSS_PX_PER_INCH),
+    paddingPx: Math.round(margin.valueIn * CSS_PX_PER_INCH)
+  };
+}
 var AutocompleteNode = class _AutocompleteNode extends TextNode {
   static getType() {
     return "autocomplete";
@@ -2466,99 +2551,329 @@ function CharacterStylesPopupPlugin(props) {
   const [editor] = useLexicalComposerContext();
   return useCharacterStylesPopup(editor, props);
 }
-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 parser = new DOMParser();
-      const dom = parser.parseFromString(value, "text/html");
-      const nodes = $generateNodesFromDOM(editor, dom);
-      root.append(...nodes);
-      $setSelection(null);
-    });
-  }, [editor, value]);
-  const handleChange = useCallback((editorState) => {
-    editorState.read(() => {
-      onChangeRef.current($generateHtmlFromNodes(editor));
-    });
-  }, [editor]);
-  return /* @__PURE__ */ jsx(
-    OnChangePlugin,
-    {
-      onChange: handleChange,
-      ignoreSelectionChange: true
-    }
-  );
-};
-var getSelectedNode2 = (selection) => {
-  const anchor = selection.anchor;
-  const anchorNode = selection.anchor.getNode();
-  const focus = selection.focus;
-  const focusNode = selection.focus.getNode();
-  if (anchorNode === focusNode) {
-    return anchorNode;
-  }
-  const isBackward = selection.isBackward();
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
-  } else {
-    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+
+// 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);
   }
-};
-var VERTICAL_GAP = 10;
-var HORIZONTAL_OFFSET = 5;
-var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
-  const scrollerElem = anchorElem.parentElement;
-  if (targetRect === null || !scrollerElem) {
-    floatingElem.style.opacity = "0";
-    floatingElem.style.transform = "translate(-10000px, -10000px)";
+  const tag = el.tagName.toLowerCase();
+  if (DROP_ENTIRELY.has(tag)) {
+    el.parentNode?.removeChild(el);
     return;
   }
-  const floatingElemRect = floatingElem.getBoundingClientRect();
-  const anchorElementRect = anchorElem.getBoundingClientRect();
-  const editorScrollerRect = scrollerElem.getBoundingClientRect();
-  let top = targetRect.top - verticalGap;
-  let left = targetRect.left - horizontalOffset;
-  if (top < editorScrollerRect.top) {
-    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
-  }
-  if (left + floatingElemRect.width > editorScrollerRect.right) {
-    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  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;
+    }
   }
-  top -= anchorElementRect.top;
-  left -= anchorElementRect.left;
-  floatingElem.style.opacity = "1";
-  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
-};
-var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
-  "http:",
-  "https:",
-  "mailto:",
-  "sms:",
-  "tel:"
-]);
-var sanitizeUrl = (url) => {
-  try {
-    const parsedUrl = new URL(url);
-    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
-      return "about:blank";
+  if (!ALLOWED_TAGS.has(tag)) {
+    while (el.firstChild) {
+      el.parentNode?.insertBefore(el.firstChild, el);
     }
-  } catch {
-    return url;
+    el.parentNode?.removeChild(el);
+    return;
   }
-  return url;
-};
-var preventDefault = (event) => {
-  event.preventDefault();
-};
-var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
+  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;
+}
+function postProcessOutput(html) {
+  if (!html) return html;
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  for (const inner of Array.from(doc.querySelectorAll("b > strong"))) {
+    const outer = inner.parentElement;
+    _mergeAttributes(inner, outer);
+    while (inner.firstChild) outer.insertBefore(inner.firstChild, inner);
+    outer.removeChild(inner);
+  }
+  for (const inner of Array.from(doc.querySelectorAll("i > em"))) {
+    const outer = inner.parentElement;
+    _mergeAttributes(inner, outer);
+    while (inner.firstChild) outer.insertBefore(inner.firstChild, inner);
+    outer.removeChild(inner);
+  }
+  for (const p of Array.from(doc.querySelectorAll("p"))) {
+    const style = p.style;
+    const hasMargin = !!(style.margin || style.marginTop || style.marginRight || style.marginBottom || style.marginLeft);
+    if (!hasMargin) style.margin = "0";
+    if (!style.lineHeight) style.lineHeight = "1.25";
+  }
+  return doc.body.innerHTML;
+}
+function _mergeAttributes(src, dst) {
+  for (const { name, value } of Array.from(src.attributes)) {
+    if (name === "style") {
+      const prev = dst.getAttribute("style") || "";
+      dst.setAttribute("style", prev ? `${prev}; ${value}` : value);
+    } else if (name === "class") {
+      const prev = dst.getAttribute("class") || "";
+      dst.setAttribute("class", prev ? `${prev} ${value}` : value);
+    }
+  }
+}
+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;
+}
+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 parser = new DOMParser();
+      const dom = parser.parseFromString(value, "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
+    }
+  );
+};
+var getSelectedNode2 = (selection) => {
+  const anchor = selection.anchor;
+  const anchorNode = selection.anchor.getNode();
+  const focus = selection.focus;
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+};
+var VERTICAL_GAP = 10;
+var HORIZONTAL_OFFSET = 5;
+var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
+  const scrollerElem = anchorElem.parentElement;
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = "0";
+    floatingElem.style.transform = "translate(-10000px, -10000px)";
+    return;
+  }
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const editorScrollerRect = scrollerElem.getBoundingClientRect();
+  let top = targetRect.top - verticalGap;
+  let left = targetRect.left - horizontalOffset;
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  }
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+  floatingElem.style.opacity = "1";
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+};
+var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
+  "http:",
+  "https:",
+  "mailto:",
+  "sms:",
+  "tel:"
+]);
+var sanitizeUrl = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+      return "about:blank";
+    }
+  } catch {
+    return url;
+  }
+  return url;
+};
+var preventDefault = (event) => {
+  event.preventDefault();
+};
+var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
   const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
   const [lastSelection, setLastSelection] = useState(null);
   const [linkUrl, setLinkUrl] = useState("");
@@ -2587,7 +2902,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       return;
     }
     const rootElement = editor.getRootElement();
-    if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
+    if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       if (domRect) {
         domRect.y += 40;
@@ -2603,7 +2918,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       setLinkUrl("");
     }
     return true;
-  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+  }, [anchorElem, editor, isLink, setIsLinkEditMode, isLinkEditMode, linkUrl]);
   useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
@@ -2701,6 +3016,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       {
         ref: inputRef,
         className: "link-input",
+        placeholder: "https://",
         value: editedLinkUrl,
         onChange: (event) => {
           setEditedLinkUrl(event.target.value);
@@ -2710,27 +3026,31 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         }
       }
     ),
-    /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "link-actions", children: [
       /* @__PURE__ */ jsx(
-        "div",
+        "button",
         {
-          className: "link-cancel",
-          role: "button",
-          tabIndex: 0,
+          type: "button",
+          className: "link-icon-btn link-cancel",
+          title: "Cancel",
+          "aria-label": "Cancel",
           onMouseDown: preventDefault,
           onClick: () => {
             setIsLinkEditMode(false);
-          }
+          },
+          children: /* @__PURE__ */ jsx(Dismiss16Regular, {})
         }
       ),
       /* @__PURE__ */ jsx(
-        "div",
+        "button",
         {
-          className: "link-confirm",
-          role: "button",
-          tabIndex: 0,
+          type: "button",
+          className: "link-icon-btn link-confirm",
+          title: "Confirm",
+          "aria-label": "Confirm",
           onMouseDown: preventDefault,
-          onClick: handleLinkSubmission
+          onClick: handleLinkSubmission,
+          children: /* @__PURE__ */ jsx(Checkmark16Regular, {})
         }
       )
     ] })
@@ -2744,32 +3064,38 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
         children: linkUrl
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "link-edit",
-        role: "button",
-        tabIndex: 0,
-        onMouseDown: preventDefault,
-        onClick: (event) => {
-          event.preventDefault();
-          setEditedLinkUrl(linkUrl);
-          setIsLinkEditMode(true);
+    /* @__PURE__ */ jsxs("div", { className: "link-actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "link-icon-btn link-edit",
+          title: "Edit link",
+          "aria-label": "Edit link",
+          onMouseDown: preventDefault,
+          onClick: (event) => {
+            event.preventDefault();
+            setEditedLinkUrl(linkUrl);
+            setIsLinkEditMode(true);
+          },
+          children: /* @__PURE__ */ jsx(Edit16Regular, {})
         }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "link-trash",
-        role: "button",
-        tabIndex: 0,
-        onMouseDown: preventDefault,
-        onClick: () => {
-          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "link-icon-btn link-trash",
+          title: "Remove link",
+          "aria-label": "Remove link",
+          onMouseDown: preventDefault,
+          onClick: () => {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+          },
+          children: /* @__PURE__ */ jsx(Delete16Regular, {})
         }
-      }
-    )
+      )
+    ] })
   ] }) });
 };
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
@@ -2870,74 +3196,28 @@ var readClipboardImageAsDataURL = async (event) => {
   }
   return null;
 };
-var InsertImageByURL = ({
-  setIsOpen,
-  onClick,
-  disabled
-}) => {
-  const [altText, setAltText] = useState("");
-  const [src, setSrc] = useState("");
-  const isDisabled = disabled || src === "";
-  return /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
-    /* @__PURE__ */ jsx(Field, { label: "Enter URL", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        autoFocus: !disabled,
-        appearance: "underline",
-        placeholder: "Add URL",
-        disabled,
-        onChange: (_, v) => setSrc(v.value),
-        value: src
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        placeholder: "Alt text",
-        disabled,
-        onChange: (_, v) => setAltText(v.value),
-        value: altText
-      },
-      "alt-text-url"
-    ) }),
-    /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          style: { width: "150px" },
-          onClick: () => !disabled && onClick({ altText, src }),
-          disabled: isDisabled,
-          size: "small",
-          children: "Confirm"
-        },
-        "url-confirm-btn"
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          style: { width: "150px" },
-          onClick: () => setIsOpen(false),
-          disabled,
-          size: "small",
-          children: "Cancel"
-        },
-        "file-url-cancel"
-      )
-    ] })
-  ] });
-};
 var InsertImageDialog = ({
   activeEditor,
-  disabled
+  disabled,
+  open: externalOpen,
+  onClose
 }) => {
   const [src, setSrc] = useState("");
   const [altText, setAltText] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState("Upload");
+  const [internalOpen, setInternalOpen] = useState(false);
   const [fileName, setFileName] = useState("");
   const hasModifier = useRef(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  const isDisabled = disabled || src === "";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const isAddDisabled = disabled || src === "";
+  const handleClose = () => {
+    setSrc("");
+    setAltText("");
+    setFileName("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
@@ -2949,10 +3229,7 @@ var InsertImageDialog = ({
   const onClick = (payload) => {
     if (disabled) return;
     activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-    setIsOpen(false);
-    setAltText("");
-    setSrc("");
-    setFileName("");
+    handleClose();
   };
   const loadImage = (event) => {
     if (disabled) return;
@@ -2967,118 +3244,108 @@ var InsertImageDialog = ({
     };
     reader.readAsDataURL(files[0]);
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add Image",
+        disabled,
+        icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setSrc("");
+          setAltText("");
+          setFileName("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add Image",
-            disabled,
-            icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setSrc("");
-              setAltText("");
-              setFileName("");
-            }
-          },
-          "upload-image"
-        ) }),
-        /* @__PURE__ */ jsxs(
-          PopoverSurface,
-          {
-            style: {
-              width: "320px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                  "label",
-                  {
-                    style: {
-                      cursor: disabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      opacity: disabled ? 0.75 : 1
+      "upload-image"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "400px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Image" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  opacity: disabled ? 0.75 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      accept: "image/*",
+                      style: { display: "none" },
+                      disabled,
+                      onChange: loadImage
                     },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "file",
-                          accept: "image/*",
-                          style: { display: "none" },
-                          disabled,
-                          onChange: loadImage
-                        },
-                        "inline-image-upload"
-                      ),
-                      /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                        /* @__PURE__ */ jsx(
-                          AttachFilled,
-                          {
-                            style: {
-                              fontSize: "16px",
-                              color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                              marginTop: 2
-                            }
-                          }
-                        ),
-                        !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                      ] }),
-                      fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                    ]
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    placeholder: "Alt text",
-                    appearance: "underline",
-                    disabled,
-                    onChange: (_, d) => setAltText(d.value),
-                    value: altText
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                  /* @__PURE__ */ jsx(Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
-                  /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-                ] })
-              ] }),
-              selectedValue === "URL" && /* @__PURE__ */ jsx(
-                InsertImageByURL,
-                {
-                  disabled,
-                  setIsOpen: (open) => setIsOpen(open),
-                  onClick: (payload) => onClick(payload)
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+                    "inline-image-upload"
+                  ),
+                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
+                    /* @__PURE__ */ jsx(
+                      AttachFilled,
+                      {
+                        style: {
+                          fontSize: "16px",
+                          color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                          marginTop: 2
+                        }
+                      }
+                    ),
+                    !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                  ] }),
+                  fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Alt Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Alt text",
+                appearance: "underline",
+                disabled,
+                onChange: (_, d) => setAltText(d.value),
+                value: altText
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: isAddDisabled,
+                onClick: () => onClick({ altText, src }),
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = useLexicalComposerContext();
@@ -3244,17 +3511,28 @@ var useStyles = makeStyles({
 });
 var InsertInlineImageDialog = ({
   disabled,
-  activeEditor
+  activeEditor,
+  open: externalOpen,
+  onClose
 }) => {
   const hasModifier = useRef(false);
   const [src, setSrc] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [altText, setAltText] = useState("");
   const [fileName, setFileName] = useState("");
   const [position, setPosition] = useState("left");
   const styles = useStyles();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  const isDisabled = disabled || src === "";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const isAddDisabled = disabled || src === "";
+  const handleClose = () => {
+    setSrc("");
+    setAltText("");
+    setFileName("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   const loadImage = (event) => {
     if (disabled) return;
     const files = event.target.files;
@@ -3279,146 +3557,135 @@ var InsertInlineImageDialog = ({
     if (disabled) return;
     const payload = { altText, position, src };
     activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload);
-    setIsOpen(false);
-    setAltText("");
-    setSrc("");
-    setFileName("");
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add Inline Image",
+        disabled,
+        icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setSrc("");
+          setAltText("");
+          setFileName("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add Inline Image",
-            disabled,
-            icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setAltText("");
-              setSrc("");
-              setFileName("");
-            }
-          },
-          "upload-inline-image"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "400px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  style: {
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    opacity: disabled ? 0.75 : 1
-                  },
-                  children: [
+      "upload-inline-image"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "440px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Inline Image" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Upload", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  opacity: disabled ? 0.75 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      accept: "image/*",
+                      style: { display: "none" },
+                      disabled,
+                      onChange: loadImage
+                    },
+                    "inline-image-upload"
+                  ),
+                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
                     /* @__PURE__ */ jsx(
-                      "input",
+                      AttachFilled,
                       {
-                        type: "file",
-                        accept: "image/*",
-                        style: { display: "none" },
-                        disabled,
-                        onChange: loadImage
-                      },
-                      "inline-image-upload"
-                    ),
-                    /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                      /* @__PURE__ */ jsx(
-                        AttachFilled,
-                        {
-                          style: {
-                            fontSize: "16px",
-                            color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                            marginTop: 2
-                          }
-                        }
-                      ),
-                      !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"
-                )
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+                        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(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: isAddDisabled,
+                onClick: handleOnClick,
+                children: "Add"
+              },
+              "file-inline-upload-btn"
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                disabled,
+                onClick: handleClose,
+                children: "Cancel"
+              },
+              "file-inline-upload-cancel"
+            )
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 var InlineImagePlugin = () => {
   const [editor] = useLexicalComposerContext();
@@ -3573,204 +3840,6 @@ 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()) {
@@ -3842,7 +3911,7 @@ function RefApiPlugin({
         editor.getEditorState().read(() => {
           html = $generateHtmlFromNodes(editor, null);
         });
-        return html;
+        return postProcessOutput(html);
       },
       clear: () => {
         editor.update(() => {
@@ -4985,13 +5054,14 @@ function getToolbarGroupsByLevel(level) {
         // ['undo', 'redo', '|'],
         ["Bold", "Italic", "Underline", "|"],
         ["ColorPicker", "|"],
-        ["Link", "Table", "|"],
-        // ['Image', 'Youtube', 'InlineImage', '|'],
+        ["Link", "|"],
+        ["Insert", "|"],
         ["Heading", "|"],
         ["FontFamily", "|"],
         ["FontSize", "|"],
         ["Decorators", "|"],
-        ["Align"]
+        ["Align", "|"],
+        ["PageSetup"]
       ];
     case "pro" /* Pro */:
     default:
@@ -4999,14 +5069,14 @@ function getToolbarGroupsByLevel(level) {
         // ['undo', 'redo', '|'],
         ["Bold", "Italic", "Underline", "|"],
         ["ColorPicker", "|"],
-        ["Link", "Table", "|"],
-        // ['CodeBlock', '|'],
-        ["Image", "Youtube", "InlineImage", "|"],
+        ["Link", "|"],
+        ["Insert", "|"],
         ["Heading", "|"],
         ["FontFamily", "|"],
         ["FontSize", "|"],
         ["Decorators", "|"],
-        ["Align"]
+        ["Align", "|"],
+        ["PageSetup"]
       ];
   }
 }
@@ -5044,6 +5114,7 @@ var normalizeHex = (v) => {
   if (hex.length === 4 || hex.length === 7) return hex.toLowerCase();
   return "#000000";
 };
+var isCompleteHex = (v) => /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test((v ?? "").trim());
 var hexToRgb = (hex) => {
   const h = normalizeHex(hex).replace("#", "");
   if (h.length === 3) {
@@ -5126,62 +5197,118 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     };
   }, [open]);
   const appliedHex = React9.useMemo(() => normalizeHex(value || "#000000"), [value]);
-  const [hex, setHex] = React9.useState(appliedHex);
+  const [hex, setHexState] = React9.useState(appliedHex);
+  const [hexText, setHexText] = React9.useState(appliedHex);
   const { r, g, b } = React9.useMemo(() => hexToRgb(hex), [hex]);
   const hsv = React9.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
   const [h, setH] = React9.useState(hsv.h);
   const [s, setS] = React9.useState(hsv.s);
   const [v, setV] = React9.useState(hsv.v);
-  const setDraft = React9.useCallback((nextHex) => {
-    setHex(nextHex);
-    const rgb = hexToRgb(nextHex);
-    const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
-    setH(next.h);
-    setS(next.s);
-    setV(next.v);
-  }, []);
-  const setDraftFromHsv = React9.useCallback((hh, ss, vv) => {
-    const rgb = hsvToRgb(hh, ss, vv);
-    setHex(rgbToHex(rgb.r, rgb.g, rgb.b));
-    setH(hh);
-    setS(ss);
-    setV(vv);
-  }, []);
+  const commit = React9.useCallback(
+    (nextHex) => {
+      const rgb = hexToRgb(nextHex);
+      const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
+      setHexState(nextHex);
+      setHexText(nextHex);
+      setH(next.h);
+      setS(next.s);
+      setV(next.v);
+      onChange(nextHex);
+    },
+    [onChange]
+  );
+  const commitFromHsv = React9.useCallback(
+    (hh, ss, vv) => {
+      const rgb = hsvToRgb(hh, ss, vv);
+      const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
+      setHexState(nextHex);
+      setHexText(nextHex);
+      setH(hh);
+      setS(ss);
+      setV(vv);
+      onChange(nextHex);
+    },
+    [onChange]
+  );
   const wasOpenRef = React9.useRef(open);
   React9.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
     if (!justOpened) return;
-    setDraft(appliedHex);
-  }, [appliedHex, open, setDraft]);
+    setHexState(appliedHex);
+    setHexText(appliedHex);
+    const rgb = hexToRgb(appliedHex);
+    const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
+    setH(next.h);
+    setS(next.s);
+    setV(next.v);
+  }, [appliedHex, open]);
   const svRef = React9.useRef(null);
-  const handleSVClick = React9.useCallback(
+  const svPointFromEvent = React9.useCallback((clientX, clientY) => {
+    if (!svRef.current) return null;
+    const rect = svRef.current.getBoundingClientRect();
+    const x = clamp3(clientX - rect.left, 0, rect.width);
+    const y = clamp3(clientY - rect.top, 0, rect.height);
+    const ss = rect.width === 0 ? 0 : x / rect.width;
+    const vv = rect.height === 0 ? 0 : 1 - y / rect.height;
+    return { ss, vv };
+  }, []);
+  const hRef = React9.useRef(h);
+  hRef.current = h;
+  const handleSVPointerDown = React9.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const pt = svPointFromEvent(e.clientX, e.clientY);
+      if (pt) commitFromHsv(hRef.current, pt.ss, pt.vv);
+    },
+    [svPointFromEvent, commitFromHsv]
+  );
+  const handleSVPointerMove = React9.useCallback(
     (e) => {
-      if (!svRef.current) return;
-      const rect = svRef.current.getBoundingClientRect();
-      const x = clamp3(e.clientX - rect.left, 0, rect.width);
-      const y = clamp3(e.clientY - rect.top, 0, rect.height);
-      const ss = rect.width === 0 ? 0 : x / rect.width;
-      const vv = rect.height === 0 ? 0 : 1 - y / rect.height;
-      setDraftFromHsv(h, ss, vv);
+      if (e.buttons !== 1) return;
+      const pt = svPointFromEvent(e.clientX, e.clientY);
+      if (pt) commitFromHsv(hRef.current, pt.ss, pt.vv);
     },
-    [h, setDraftFromHsv]
+    [svPointFromEvent, commitFromHsv]
   );
   const hueRef = React9.useRef(null);
-  const handleHueClick = React9.useCallback(
+  const sRef = React9.useRef(s);
+  sRef.current = s;
+  const vRef = React9.useRef(v);
+  vRef.current = v;
+  const huePointFromEvent = React9.useCallback((clientX) => {
+    if (!hueRef.current) return null;
+    const rect = hueRef.current.getBoundingClientRect();
+    const x = clamp3(clientX - rect.left, 0, rect.width);
+    return rect.width === 0 ? 0 : x / rect.width * 360;
+  }, []);
+  const handleHuePointerDown = React9.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const hh = huePointFromEvent(e.clientX);
+      if (hh != null) commitFromHsv(hh, sRef.current, vRef.current);
+    },
+    [huePointFromEvent, commitFromHsv]
+  );
+  const handleHuePointerMove = React9.useCallback(
     (e) => {
-      if (!hueRef.current) return;
-      const rect = hueRef.current.getBoundingClientRect();
-      const x = clamp3(e.clientX - rect.left, 0, rect.width);
-      const hh = rect.width === 0 ? 0 : x / rect.width * 360;
-      setDraftFromHsv(hh, s, v);
+      if (e.buttons !== 1) return;
+      const hh = huePointFromEvent(e.clientX);
+      if (hh != null) commitFromHsv(hh, sRef.current, vRef.current);
     },
-    [s, v, setDraftFromHsv]
+    [huePointFromEvent, commitFromHsv]
   );
-  const handleApply = React9.useCallback(() => {
-    onChange(hex);
-    setOpenAndNotify(false);
-  }, [onChange, hex, setOpenAndNotify]);
+  const handleHexChange = React9.useCallback(
+    (_, val) => {
+      const next = val ?? "";
+      setHexText(next);
+      if (isCompleteHex(next.trim())) commit(normalizeHex(next));
+    },
+    [commit]
+  );
+  const handleHexBlur = React9.useCallback(() => {
+    commit(normalizeHex(hexText));
+  }, [hexText, commit]);
   const svThumb = React9.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
   const hueThumb = React9.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
   const hueColor = React9.useMemo(() => {
@@ -5236,44 +5363,192 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
         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 } }),
-            /* @__PURE__ */ jsx("div", { className: "aoLexTitle", children: title })
+        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 14 }, styles: { root: { padding: "14px 16px 16px", width: 288 } }, 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(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close",
+                onClick: () => setOpenAndNotify(false),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 24,
+                  height: 24,
+                  padding: 0,
+                  border: "none",
+                  borderRadius: 4,
+                  background: "transparent",
+                  color: "#616161",
+                  cursor: "pointer"
+                },
+                onMouseEnter: (e) => e.currentTarget.style.background = "#f0f0f0",
+                onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+                children: /* @__PURE__ */ jsx(Dismiss16Regular, {})
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "aoLexRow", children: [
-            /* @__PURE__ */ jsx("div", { className: "aoLexLabel", children: "Hex" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: svRef,
+              onPointerDown: handleSVPointerDown,
+              onPointerMove: handleSVPointerMove,
+              style: {
+                position: "relative",
+                width: "100%",
+                height: 150,
+                borderRadius: 8,
+                overflow: "hidden",
+                cursor: "crosshair",
+                touchAction: "none",
+                boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.08)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: hueColor } }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: "linear-gradient(to right, #fff, rgba(255,255,255,0))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: "linear-gradient(to top, #000, rgba(0,0,0,0))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: 16,
+                      height: 16,
+                      borderRadius: "50%",
+                      border: "2px solid #fff",
+                      boxShadow: "0 0 0 1px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4)",
+                      transform: "translate(-50%, -50%)",
+                      pointerEvents: "none",
+                      ...svThumb
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: hueRef,
+              onPointerDown: handleHuePointerDown,
+              onPointerMove: handleHuePointerMove,
+              style: {
+                position: "relative",
+                width: "100%",
+                height: 12,
+                borderRadius: 999,
+                cursor: "pointer",
+                touchAction: "none",
+                background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
+                boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.08)"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    width: 16,
+                    height: 16,
+                    borderRadius: "50%",
+                    background: hueColor,
+                    border: "2px solid #fff",
+                    boxShadow: "0 0 0 1px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4)",
+                    transform: "translate(-50%, -50%)",
+                    pointerEvents: "none",
+                    ...hueThumb
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: 6,
+                  flexShrink: 0,
+                  background: hex,
+                  boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.12)"
+                }
+              }
+            ),
             /* @__PURE__ */ jsx(
               TextField,
               {
-                value: hex,
-                onChange: (_, val) => setHex(normalizeHex(val || "")),
-                onBlur: () => setDraft(normalizeHex(hex))
+                value: hexText,
+                onChange: handleHexChange,
+                onBlur: handleHexBlur,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit(normalizeHex(hexText));
+                },
+                styles: { root: { flex: 1 }, fieldGroup: { borderRadius: 6 } }
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "aoLexSwatches", children: PRESET.map((c) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "aoLexSwatchBtn",
-              style: { background: c },
-              onClick: () => setDraft(c),
-              title: c
-            },
-            c
-          )) }),
-          /* @__PURE__ */ jsxs("div", { className: "aoLexSV", ref: svRef, onClick: handleSVClick, children: [
-            /* @__PURE__ */ jsx("div", { className: "aoLexSVHue", style: { background: hueColor } }),
-            /* @__PURE__ */ jsx("div", { className: "aoLexSVWhite" }),
-            /* @__PURE__ */ jsx("div", { className: "aoLexSVBlack" }),
-            /* @__PURE__ */ jsx("div", { className: "aoLexSVThumb", style: svThumb })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "aoLexHue", ref: hueRef, onClick: handleHueClick, children: /* @__PURE__ */ jsx("div", { className: "aoLexHueThumb", style: hueThumb }) }),
-          /* @__PURE__ */ jsx("div", { className: "aoLexPreview", style: { background: hex } }),
-          /* @__PURE__ */ jsxs("div", { className: "aoLexActions", children: [
-            /* @__PURE__ */ jsx(DefaultButton, { type: "button", text: "Apply", onClick: handleApply }),
-            /* @__PURE__ */ jsx(DefaultButton, { type: "button", text: "Close", onClick: () => setOpenAndNotify(false) })
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, color: "#8a8a8a", marginBottom: 6, letterSpacing: 0.3 }, children: "STANDARD COLORS" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(9, 1fr)",
+                  gap: 6
+                },
+                children: PRESET.map((c) => {
+                  const isSelected = c.toLowerCase() === hex.toLowerCase();
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => commit(c),
+                      title: c,
+                      "aria-label": c,
+                      style: {
+                        width: 22,
+                        height: 22,
+                        padding: 0,
+                        borderRadius: 5,
+                        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)",
+                        border: "none",
+                        transition: "transform 80ms ease"
+                      },
+                      onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.12)",
+                      onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)"
+                    },
+                    c
+                  );
+                })
+              }
+            )
           ] })
         ] })
       }
@@ -5605,294 +5880,464 @@ var FontSizePlugin = ({ disabled }) => {
     "fontsize"
   ) });
 };
-var InsertLinkPlugin = ({ disabled }) => {
+var VERBATIM_LINK_RE = /^https?:\/\/|^mailto:|^tel:|^#|^\//i;
+function getLinkValidationMessage(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return void 0;
+  if (/\s/.test(trimmed)) return "URL cannot contain spaces";
+  if (!VERBATIM_LINK_RE.test(trimmed) && !trimmed.includes(".")) {
+    return "Enter a valid URL (e.g. example.com)";
+  }
+  return void 0;
+}
+var InsertLinkPlugin = ({
+  disabled,
+  open: externalOpen,
+  onClose
+}) => {
   const [editor] = useLexicalComposerContext();
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [text, setText] = useState("");
   const [link, setLink] = useState("");
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const linkError = getLinkValidationMessage(link);
+  const handleClose = () => {
+    setText("");
+    setLink("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   const insertLink = (text2, link2) => {
     if (disabled) return;
+    if (getLinkValidationMessage(link2)) return;
+    const trimmedLink = link2.trim();
+    const href = VERBATIM_LINK_RE.test(trimmedLink) ? trimmedLink : `https://${trimmedLink}`;
     editor.update(() => {
-      setText("");
-      setLink("");
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
         const textNode = new TextNode(text2);
-        const linkNode = $createLinkNode(link2.startsWith("http") ? link2 : `https://${link2}`);
+        const linkNode = $createLinkNode(href);
         linkNode.append(textNode);
         selection.insertNodes([linkNode]);
       }
-      setIsOpen(false);
     });
+    handleClose();
   };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add link",
+        disabled,
+        icon: /* @__PURE__ */ jsx(LinkAddRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setInternalOpen((prev) => !prev);
+        }
+      },
+      "upload-link"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "380px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Link" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(Field, { label: "Text", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                autoFocus: !disabled,
+                value: text,
+                appearance: "underline",
+                placeholder: "Text",
+                disabled,
+                onChange: (_, v) => setText(v.value)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Link",
+                orientation: "horizontal",
+                size: "small",
+                validationState: linkError ? "error" : "none",
+                validationMessage: linkError,
+                children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: link,
+                    appearance: "underline",
+                    placeholder: "Link",
+                    disabled,
+                    onChange: (_, v) => setLink(v.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" && text && link && !linkError) insertLink(text, link);
+                    }
+                  }
+                )
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: disabled || !text || !link || !!linkError,
+                onClick: () => insertLink(text, link),
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+};
+function PageSetupPlugin({ disabled, value, onChange }) {
+  const sizeLabel = value.size === "pageless" ? "Pageless" : PAGE_SIZE_OPTIONS.find((o) => o.key === value.size)?.label ?? "Pageless";
+  const isPaged = value.size !== "pageless";
   return /* @__PURE__ */ jsxs(
-    Popover,
+    Menu,
     {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+      checkedValues: {
+        size: [value.size],
+        orientation: [value.orientation],
+        margin: [value.margin]
+      },
+      onCheckedValueChange: (_, data) => {
+        const selected = data.checkedItems[0];
+        if (!selected) return;
+        if (data.name === "size") onChange({ ...value, size: selected });
+        else if (data.name === "orientation")
+          onChange({ ...value, orientation: selected });
+        else if (data.name === "margin") onChange({ ...value, margin: selected });
       },
       children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
           Button,
           {
+            appearance: "subtle",
             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" })
-              ] })
-            ] })
+            icon: /* @__PURE__ */ jsx(DocumentRegular, {}),
+            title: "Page setup",
+            style: { minWidth: "auto" },
+            children: sizeLabel
           }
-        )
+        ) }),
+        /* @__PURE__ */ jsx(MenuPopover, { style: { minWidth: 220 }, children: /* @__PURE__ */ jsxs(MenuList, { children: [
+          /* @__PURE__ */ jsxs(MenuGroup, { children: [
+            /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Page size" }),
+            /* @__PURE__ */ jsx(MenuItemRadio, { name: "size", value: "pageless", children: "Pageless" }),
+            PAGE_SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(MenuItemRadio, { name: "size", value: opt.key, children: opt.label }, opt.key))
+          ] }),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsxs(MenuGroup, { children: [
+            /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Orientation" }),
+            /* @__PURE__ */ jsx(MenuItemRadio, { name: "orientation", value: "portrait", disabled: !isPaged, children: "Portrait" }),
+            /* @__PURE__ */ jsx(MenuItemRadio, { name: "orientation", value: "landscape", disabled: !isPaged, children: "Landscape" })
+          ] }),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsxs(MenuGroup, { children: [
+            /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Margins" }),
+            MARGIN_OPTIONS.map((opt) => /* @__PURE__ */ jsx(MenuItemRadio, { name: "margin", value: opt.key, disabled: !isPaged, children: opt.label }, opt.key))
+          ] })
+        ] }) })
       ]
     }
   );
-};
-var TableItemPlugin = ({ disabled }) => {
+}
+var MAX_ROWS = 50;
+var MAX_COLS = 50;
+var TableItemPlugin = ({
+  disabled,
+  open: externalOpen,
+  onClose
+}) => {
   const [editor] = useLexicalComposerContext();
   const [columns, setColumns] = useState("");
   const [rows, setRows] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [rowError, setRowError] = useState("");
+  const [colError, setColError] = useState("");
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
+  const handleClose = () => {
+    setRows("");
+    setColumns("");
+    setRowError("");
+    setColError("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
+  const onRowsChange = (val) => {
+    const clean = val.replace(/\D/g, "");
+    setRows(clean);
+    const n = Number(clean);
+    if (clean && n > MAX_ROWS) setRowError(`Maximum ${MAX_ROWS} rows allowed`);
+    else setRowError("");
+  };
+  const onColsChange = (val) => {
+    const clean = val.replace(/\D/g, "");
+    setColumns(clean);
+    const n = Number(clean);
+    if (clean && n > MAX_COLS) setColError(`Maximum ${MAX_COLS} columns allowed`);
+    else setColError("");
+  };
   const onAddTable = () => {
     if (disabled) return;
     const row = Number(rows);
     const col = Number(columns);
     if (!row || !col) return;
+    if (row > MAX_ROWS || col > MAX_COLS) return;
     editor.update(() => {
       const tableNode = $createTableNodeWithDimensions(row, col, true);
       $insertNodeToNearestRoot(tableNode);
     });
-    setRows("");
-    setColumns("");
-    setIsOpen(false);
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  const isAddDisabled = disabled || !rows || !columns || !!rowError || !!colError;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add table",
+        disabled,
+        icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setRows("");
+          setColumns("");
+          setRowError("");
+          setColError("");
+          setInternalOpen(true);
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add table",
-            disabled,
-            icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setRows("");
-              setColumns("");
-            }
-          },
-          "insert-table-nodes"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "Rows", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  type: "number",
-                  min: 1,
-                  value: rows,
-                  placeholder: "Rows",
-                  appearance: "underline",
-                  disabled,
-                  input: { style: { textAlign: "left" } },
-                  onChange: (_, v) => setRows(v.value.replace(/\D/g, ""))
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Field, { label: "Columns", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "number",
-                  min: 1,
-                  value: columns,
-                  placeholder: "Columns",
-                  appearance: "underline",
-                  disabled,
-                  input: { style: { textAlign: "left" } },
-                  onChange: (_, v) => setColumns(v.value.replace(/\D/g, ""))
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
+      "insert-table-nodes"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "380px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert Table" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Rows",
+                orientation: "horizontal",
+                size: "small",
+                validationMessage: rowError || void 0,
+                validationState: rowError ? "error" : "none",
+                children: /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    size: "small",
-                    appearance: "primary",
-                    disabled: disabled || !rows || !columns,
-                    onClick: onAddTable,
-                    children: "Add"
+                    autoFocus: !disabled,
+                    type: "number",
+                    min: 1,
+                    max: MAX_ROWS,
+                    value: rows,
+                    placeholder: "Rows",
+                    appearance: "underline",
+                    disabled,
+                    input: { style: { textAlign: "left" } },
+                    onChange: (_, v) => onRowsChange(v.value)
                   }
-                ),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Columns",
+                orientation: "horizontal",
+                size: "small",
+                validationMessage: colError || void 0,
+                validationState: colError ? "error" : "none",
+                children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    min: 1,
+                    max: MAX_COLS,
+                    value: columns,
+                    placeholder: "Columns",
+                    appearance: "underline",
+                    disabled,
+                    input: { style: { textAlign: "left" } },
+                    onChange: (_, v) => onColsChange(v.value)
+                  }
+                )
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: isAddDisabled,
+                onClick: onAddTable,
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
-var YoutubeUploadPlugin = ({ disabled }) => {
+function extractYouTubeId(url) {
+  const trimmed = url.trim();
+  if (/^[\w-]{11}$/.test(trimmed)) return trimmed;
+  const match = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/|live\/|u\/\w\/))([^#&?]{11})/.exec(trimmed);
+  return match ? match[1] : null;
+}
+var YoutubeUploadPlugin = ({
+  disabled,
+  open: externalOpen,
+  onClose
+}) => {
   const [url, setURL] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [urlError, setUrlError] = useState("");
+  const [internalOpen, setInternalOpen] = useState(false);
   const [editor] = useLexicalComposerContext();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#424242";
+  const isControlled = externalOpen !== void 0;
+  const isOpen = isControlled ? !!externalOpen && !disabled : internalOpen && !disabled;
+  const handleClose = () => {
+    setURL("");
+    setUrlError("");
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  };
   const onHandleEmbeded = () => {
     if (disabled) return;
     if (!url) return;
-    const match = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url);
-    const id = match && match[2]?.length === 11 ? match[2] : null;
-    if (!id) return;
+    const id = extractYouTubeId(url);
+    if (!id) {
+      setUrlError("Invalid YouTube URL. Supported: watch?v=, youtu.be/, /shorts/, /live/");
+      return;
+    }
+    setUrlError("");
     editor.update(() => {
       const node = $createYouTubeNode(id);
       $insertNodes([node]);
     });
-    setURL("");
-    setIsOpen(false);
+    handleClose();
   };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      trapFocus: true,
-      withArrow: true,
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
-      },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            title: "Add youtube URL",
-            size: "small",
-            disabled,
-            icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setURL("");
-            }
-          },
-          "upload-video"
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverSurface,
-          {
-            style: {
-              width: "270px",
-              opacity: disabled ? 0.6 : 1,
-              pointerEvents: disabled ? "none" : "auto"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, children: [
-              /* @__PURE__ */ jsx(Field, { label: "URL", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  autoFocus: !disabled,
-                  disabled,
-                  value: url,
-                  appearance: "underline",
-                  placeholder: "Add Youtube video URL",
-                  onChange: (_, v) => setURL(v.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 6 }, children: [
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
-                /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isControlled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        title: "Add youtube URL",
+        size: "small",
+        disabled,
+        icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setURL("");
+          setUrlError("");
+          setInternalOpen(true);
+        }
+      },
+      "upload-video"
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => {
+          if (!data.open) handleClose();
+        },
+        children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "420px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert YouTube Video" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 10 }, style: { paddingTop: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "URL",
+                orientation: "horizontal",
+                size: "small",
+                validationState: urlError ? "error" : "none",
+                validationMessage: urlError || void 0,
+                children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    autoFocus: !disabled,
+                    disabled,
+                    value: url,
+                    appearance: "underline",
+                    placeholder: "Paste YouTube URL or video ID\u2026",
+                    onChange: (_, v) => {
+                      setURL(v.value);
+                      if (urlError) setUrlError("");
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") onHandleEmbeded();
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#94a3b8", lineHeight: 1.5 }, children: "Supports: youtube.com/watch?v=\u2026, youtu.be/\u2026, /shorts/\u2026, /live/\u2026" })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "small",
+                disabled: disabled || !url,
+                onClick: onHandleEmbeded,
+                children: "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: handleClose, children: "Cancel" })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 };
 var useStyles4 = makeStyles({
   dropdown: {
@@ -5917,12 +6362,14 @@ var ALLOWED_TOKENS = {
   Image: true,
   InlineImage: true,
   Youtube: true,
+  Insert: true,
   Heading: true,
   FontFamily: true,
   FontSize: true,
   Decorators: true,
   CodeBlock: true,
-  Align: true
+  Align: true,
+  PageSetup: true
 };
 function sanitizePluginGroups(groups) {
   if (!groups || groups.length === 0) return [];
@@ -5947,6 +6394,7 @@ var ToolBarPlugins = (props) => {
   const [isLowercase, setIsLowercase] = useState(false);
   const [isCapitalize, setIsCapitalize] = useState(false);
   const [alignment, setAlignment] = useState("left");
+  const [activeInsertDialog, setActiveInsertDialog] = useState(null);
   const lastSelectionRef = React9__default.useRef(null);
   const presetGroups = getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
@@ -6192,6 +6640,7 @@ var ToolBarPlugins = (props) => {
       marginRight: 8,
       verticalAlign: "middle"
     };
+    const isDisabled = !isEditable || !!props.readOnly;
     switch (token) {
       case "Bold":
         return /* @__PURE__ */ jsx(
@@ -6255,6 +6704,95 @@ var ToolBarPlugins = (props) => {
         );
       case "Youtube":
         return /* @__PURE__ */ jsx(YoutubeUploadPlugin, { disabled: !isEditable || props.readOnly }, key);
+      case "Insert": {
+        const menuIconColor = isDisabled ? fgDisabled : fg;
+        return /* @__PURE__ */ jsxs(React9__default.Fragment, { children: [
+          /* @__PURE__ */ jsxs(Menu, { children: [
+            /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                disabled: isDisabled,
+                icon: /* @__PURE__ */ jsx(AddRegular, { style: { color: menuIconColor } }),
+                style: {
+                  ...getButtonStyle(false),
+                  gap: 4,
+                  paddingInline: 8
+                },
+                children: "Insert"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs(MenuList, { children: [
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("table"),
+                  children: "Table"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("image"),
+                  children: "Image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("inlineImage"),
+                  children: "Inline Image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: menuIconColor } }),
+                  onClick: () => !isDisabled && setActiveInsertDialog("youtube"),
+                  children: "YouTube"
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            TableItemPlugin,
+            {
+              disabled: isDisabled,
+              open: activeInsertDialog === "table",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InsertImageDialog,
+            {
+              activeEditor: editor,
+              disabled: isDisabled,
+              open: activeInsertDialog === "image",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InsertInlineImageDialog,
+            {
+              activeEditor: editor,
+              disabled: isDisabled,
+              open: activeInsertDialog === "inlineImage",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YoutubeUploadPlugin,
+            {
+              disabled: isDisabled,
+              open: activeInsertDialog === "youtube",
+              onClose: () => setActiveInsertDialog(null)
+            }
+          )
+        ] }, key);
+      }
       case "Heading": {
         const headingLabel = selectNodeType === "paragraph" ? "Normal" : HEADING_OPTION.find((h) => h.key === selectNodeType)?.text ?? selectNodeType;
         return /* @__PURE__ */ jsxs(
@@ -6461,6 +6999,16 @@ var ToolBarPlugins = (props) => {
           key
         );
       }
+      case "PageSetup":
+        return /* @__PURE__ */ jsx(
+          PageSetupPlugin,
+          {
+            disabled: !isEditable || props.readOnly,
+            value: props.pageSetup,
+            onChange: props.onPageSetupChange
+          },
+          key
+        );
       default:
         return null;
     }
@@ -6640,7 +7188,9 @@ function BrowserSpellCheckPlugin({ enabled }) {
   }, [editor, enabled]);
   return null;
 }
-function WordCountPlugin({ onCountChange }) {
+function WordCountPlugin({
+  onCountChange
+}) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {
@@ -6653,7 +7203,9 @@ function WordCountPlugin({ onCountChange }) {
   }, [editor, onCountChange]);
   return null;
 }
-function CharCountPlugin({ onCountChange }) {
+function CharCountPlugin({
+  onCountChange
+}) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {
@@ -6737,7 +7289,10 @@ function _adaptRawSpell(data, text) {
   }
   const rawGrammar = data.grammar_correction ?? data.improved_text;
   const grammarCorrection = rawGrammar && rawGrammar.trim() !== text.trim() ? rawGrammar.trim() : void 0;
-  return { issues: issues.sort((a, b) => a.offset - b.offset), grammarCorrection };
+  return {
+    issues: issues.sort((a, b) => a.offset - b.offset),
+    grammarCorrection
+  };
 }
 function _adaptRawSuggest(data) {
   if (!data) return null;
@@ -6792,348 +7347,385 @@ function _makeQueryFn(fn) {
     };
   };
 }
-var ContentEditorComponent = forwardRef(
-  (props, ref) => {
-    const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React9__default.useMemo(
-      () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [props.spellCheckFn, props.useSpellCheck]
-    );
-    const resolvedQuery = React9__default.useMemo(
-      () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [props.suggestFn, props.useQuery]
-    );
-    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
-    const [isLinkEditMode, setIsLinkEditMode] = useState(false);
-    const [wordCount, setWordCount] = useState(0);
-    const handleWordCount = useCallback((count) => setWordCount(count), []);
-    const [charCount, setCharCount] = useState(0);
-    const handleCharCount = useCallback((count) => setCharCount(count), []);
-    const [refErrors, setRefErrors] = useState([]);
-    const contentEditableDomRef = useRef(null);
-    const previousOverLimitRef = useRef(false);
-    const focusedRef = useRef(false);
-    const setFocused = (focused) => {
-      focusedRef.current = focused;
-    };
-    const containerRef = useRef(null);
-    const onAnchorRef = (elem) => {
-      if (elem) setFloatingAnchorElem(elem);
-    };
-    const initialConfig = {
-      namespace: props.namespace,
-      theme,
-      onError: () => {
-      },
-      nodes: [
-        HeadingNode,
-        QuoteNode,
-        CodeHighlightNode,
-        CodeNode,
-        ListNode,
-        ListItemNode,
-        LinkNode,
-        AutoLinkNode,
-        TableNode,
-        TableRowNode,
-        TableCellNode,
-        ImageNode,
-        InlineImageNode,
-        YouTubeNode,
-        PageBreakNode,
-        AutocompleteNode,
-        SpellErrorNode,
-        HtmlBlockNode
-      ]
-    };
-    const EditorStyles = mergeStyleSets({
-      editorPlaceholder: {
-        color: "var(--colorNeutralForeground3, grey)",
-        position: "absolute",
-        top: props.level !== "none" /* None */ ? "17px" : "27px",
-        left: 20,
-        right: 20,
-        fontSize: "14px",
-        pointerEvents: "none",
-        userSelect: "none"
-      },
-      contentEditor: {
-        zIndex: 0,
-        flex: "auto",
-        outline: "none",
-        overflow: "auto",
-        marginTop: "0px",
-        paddingLeft: "20px",
-        paddingRight: "20px",
-        position: "relative",
-        background: "var(--colorNeutralBackground1, #ffffff)",
-        justifyContent: "center",
-        height: props.contentHeight ?? "100%",
-        ...isReadOnly && {
-          cursor: "not-allowed",
-          opacity: 0.75,
-          userSelect: "text"
-        }
-      }
-    });
-    const urlRegExp = new RegExp(
-      /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
-    );
-    const validateUrl = (url) => url === "https://" || urlRegExp.test(url);
-    const handleReadOnlyClickCapture = (e) => {
-      if (!isReadOnly) return;
-      const target = e.target;
-      const anchor = target?.closest?.("a");
-      if (anchor) {
-        e.preventDefault();
-        e.stopPropagation();
+var ContentEditorComponent = forwardRef((props, ref) => {
+  const isReadOnly = !!props.readOnly;
+  const resolvedSpellCheck = React9__default.useMemo(
+    () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.spellCheckFn, props.useSpellCheck]
+  );
+  const resolvedQuery = React9__default.useMemo(
+    () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.suggestFn, props.useQuery]
+  );
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+  const [isLinkEditMode, setIsLinkEditMode] = useState(false);
+  const [wordCount, setWordCount] = useState(0);
+  const handleWordCount = useCallback(
+    (count) => setWordCount(count),
+    []
+  );
+  const [charCount, setCharCount] = useState(0);
+  const handleCharCount = useCallback(
+    (count) => setCharCount(count),
+    []
+  );
+  const [refErrors, setRefErrors] = useState([]);
+  const [pageSetup, setPageSetup] = useState(DEFAULT_PAGE_SETUP);
+  const pageCanvas = resolvePageCanvasMetrics(pageSetup);
+  const contentEditableDomRef = useRef(null);
+  const previousOverLimitRef = useRef(false);
+  const focusedRef = useRef(false);
+  const setFocused = (focused) => {
+    focusedRef.current = focused;
+  };
+  const containerRef = useRef(null);
+  const onAnchorRef = (elem) => {
+    if (elem) setFloatingAnchorElem(elem);
+  };
+  const initialConfig = {
+    namespace: props.namespace,
+    theme,
+    onError: () => {
+    },
+    nodes: [
+      HeadingNode,
+      QuoteNode,
+      CodeHighlightNode,
+      CodeNode,
+      ListNode,
+      ListItemNode,
+      LinkNode,
+      AutoLinkNode,
+      TableNode,
+      TableRowNode,
+      TableCellNode,
+      ImageNode,
+      InlineImageNode,
+      YouTubeNode,
+      PageBreakNode,
+      AutocompleteNode,
+      SpellErrorNode,
+      HtmlBlockNode
+    ]
+  };
+  const EditorStyles = mergeStyleSets({
+    editorPlaceholder: {
+      color: "var(--colorNeutralForeground3, grey)",
+      position: "absolute",
+      top: props.level !== "none" /* None */ ? "17px" : "27px",
+      left: pageCanvas.paddingPx,
+      right: pageCanvas.paddingPx,
+      fontSize: "14px",
+      pointerEvents: "none",
+      userSelect: "none"
+    },
+    contentEditor: {
+      zIndex: 0,
+      flex: "auto",
+      outline: "none",
+      overflow: "auto",
+      marginTop: "0px",
+      position: "relative",
+      background: "var(--colorNeutralBackground1, #ffffff)",
+      justifyContent: "center",
+      height: props.contentHeight ?? "100%",
+      ...isReadOnly && {
+        cursor: "not-allowed",
+        opacity: 0.75,
+        userSelect: "text"
       }
-    };
-    const [touched, setTouched] = useState(false);
-    const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
-    const internalErrors = [];
-    if (isOverLimit) {
-      const m = props.errorMessages?.wordLimitExceeded;
-      internalErrors.push(
-        typeof m === "function" ? m(wordCount, props.wordLimit) : m ?? `Word limit exceeded (${wordCount} / ${props.wordLimit} words used)`
-      );
-    }
-    if (props.required && touched && wordCount === 0) {
-      internalErrors.push(
-        props.errorMessages?.required ?? "This field is required"
-      );
     }
-    if (props.minWords !== void 0 && touched && wordCount < props.minWords) {
-      const m = props.errorMessages?.minWords;
-      internalErrors.push(
-        typeof m === "function" ? m(wordCount, props.minWords) : m ?? `Minimum ${props.minWords} words required (${wordCount} entered)`
-      );
-    }
-    if (props.maxChars !== void 0 && charCount > props.maxChars) {
-      const m = props.errorMessages?.maxCharsExceeded;
-      internalErrors.push(
-        typeof m === "function" ? m(charCount, props.maxChars) : m ?? `Character limit exceeded (${charCount} / ${props.maxChars} characters used)`
-      );
+  });
+  const urlRegExp = new RegExp(
+    /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
+  );
+  const validateUrl = (url) => url === "https://" || urlRegExp.test(url);
+  const handleReadOnlyClickCapture = (e) => {
+    if (!isReadOnly) return;
+    const target = e.target;
+    const anchor = target?.closest?.("a");
+    if (anchor) {
+      e.preventDefault();
+      e.stopPropagation();
     }
-    if (props.minChars !== void 0 && touched && charCount < props.minChars && charCount > 0) {
-      const m = props.errorMessages?.minCharsRequired;
-      internalErrors.push(
-        typeof m === "function" ? m(charCount, props.minChars) : m ?? `Minimum ${props.minChars} characters required (${charCount} entered)`
-      );
+  };
+  const [touched, setTouched] = useState(false);
+  const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
+  const internalErrors = [];
+  if (isOverLimit) {
+    const m = props.errorMessages?.wordLimitExceeded;
+    internalErrors.push(
+      typeof m === "function" ? m(wordCount, props.wordLimit) : m ?? `Word limit exceeded (${wordCount} / ${props.wordLimit} words used)`
+    );
+  }
+  if (props.required && touched && wordCount === 0) {
+    internalErrors.push(
+      props.errorMessages?.required ?? "This field is required"
+    );
+  }
+  if (props.minWords !== void 0 && touched && wordCount < props.minWords) {
+    const m = props.errorMessages?.minWords;
+    internalErrors.push(
+      typeof m === "function" ? m(wordCount, props.minWords) : m ?? `Minimum ${props.minWords} words required (${wordCount} entered)`
+    );
+  }
+  if (props.maxChars !== void 0 && charCount > props.maxChars) {
+    const m = props.errorMessages?.maxCharsExceeded;
+    internalErrors.push(
+      typeof m === "function" ? m(charCount, props.maxChars) : m ?? `Character limit exceeded (${charCount} / ${props.maxChars} characters used)`
+    );
+  }
+  if (props.minChars !== void 0 && touched && charCount < props.minChars && charCount > 0) {
+    const m = props.errorMessages?.minCharsRequired;
+    internalErrors.push(
+      typeof m === "function" ? m(charCount, props.minChars) : m ?? `Minimum ${props.minChars} characters required (${charCount} entered)`
+    );
+  }
+  const allErrors = [
+    ...internalErrors,
+    ...props.errors ?? [],
+    ...refErrors
+  ];
+  const hasErrors = allErrors.length > 0;
+  const hasRedBorder = hasErrors;
+  useEffect(() => {
+    if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
+    const wasOverLimit = previousOverLimitRef.current;
+    if (isOverLimit !== wasOverLimit) {
+      props.onWordLimitExceeded({
+        wordCount,
+        wordLimit: props.wordLimit,
+        exceeded: isOverLimit
+      });
+      previousOverLimitRef.current = isOverLimit;
     }
-    const allErrors = [...internalErrors, ...props.errors ?? [], ...refErrors];
-    const hasErrors = allErrors.length > 0;
-    const hasRedBorder = hasErrors;
-    useEffect(() => {
-      if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
-      const wasOverLimit = previousOverLimitRef.current;
-      if (isOverLimit !== wasOverLimit) {
-        props.onWordLimitExceeded({
-          wordCount,
-          wordLimit: props.wordLimit,
-          exceeded: isOverLimit
-        });
-        previousOverLimitRef.current = isOverLimit;
-      }
-    }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        style: {
-          zIndex: 1e3,
-          background: "#fff",
-          borderRadius: "2px",
-          width: props.width ?? "100%",
-          height: props.height ?? "100%",
-          margin: props.margin ?? "5px auto",
-          border: `1px solid ${hasRedBorder ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
-          transition: "border-color 0.2s",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                pointerEvents: isReadOnly ? "none" : "auto",
-                position: "sticky",
-                opacity: isReadOnly ? 0.85 : 1
-              },
-              children: /* @__PURE__ */ jsx(
-                ToolBarPlugins,
+  }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
+  return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      style: {
+        zIndex: 1e3,
+        background: "#fff",
+        borderRadius: "2px",
+        width: props.width ?? "100%",
+        height: props.height ?? "100%",
+        margin: props.margin ?? "5px auto",
+        border: `1px solid ${hasRedBorder ? "#c4272c" : "var(--colorNeutralStroke1, #ccced1)"}`,
+        transition: "border-color 0.2s",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              pointerEvents: isReadOnly ? "none" : "auto",
+              position: "sticky",
+              opacity: isReadOnly ? 0.85 : 1
+            },
+            children: /* @__PURE__ */ jsx(
+              ToolBarPlugins,
+              {
+                level: props.level ?? "basic" /* Basic */,
+                readOnly: props.readOnly,
+                pageSetup,
+                onPageSetupChange: setPageSetup
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              flexGrow: 1,
+              padding: "15px 0px",
+              overflowY: "scroll",
+              overflowX: "auto",
+              minWidth: 0,
+              background: pageCanvas.widthPx !== void 0 ? "#eef0f2" : void 0
+            },
+            onClickCapture: handleReadOnlyClickCapture,
+            children: [
+              /* @__PURE__ */ jsx(
+                RichTextPlugin,
+                {
+                  ErrorBoundary: LexicalErrorBoundary,
+                  contentEditable: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "editor",
+                      style: { height: "100%", position: "relative" },
+                      ref: onAnchorRef,
+                      children: /* @__PURE__ */ jsx(
+                        ContentEditable,
+                        {
+                          ref: contentEditableDomRef,
+                          className: css(EditorStyles.contentEditor),
+                          style: {
+                            paddingTop: props.level !== "none" /* None */ ? 0 : 10,
+                            paddingLeft: pageCanvas.paddingPx,
+                            paddingRight: pageCanvas.paddingPx,
+                            maxWidth: pageCanvas.widthPx,
+                            marginLeft: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+                            marginRight: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+                            boxShadow: pageCanvas.widthPx !== void 0 ? "0 0 0 1px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08)" : void 0
+                          },
+                          spellCheck: !resolvedSpellCheck,
+                          autoCorrect: resolvedSpellCheck ? "off" : void 0,
+                          autoCapitalize: resolvedSpellCheck ? "off" : void 0
+                        }
+                      )
+                    }
+                  ),
+                  placeholder: /* @__PURE__ */ jsx(Stack, { className: css(EditorStyles.editorPlaceholder), children: props.placeholder })
+                }
+              ),
+              props.wordLimit !== void 0 && /* @__PURE__ */ jsx(
+                "div",
                 {
-                  level: props.level ?? "basic" /* Basic */,
-                  readOnly: props.readOnly
+                  style: {
+                    position: "sticky",
+                    bottom: 0,
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    paddingRight: 14,
+                    pointerEvents: "none",
+                    userSelect: "none"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        color: isOverLimit ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
+                        fontWeight: isOverLimit ? 600 : 400,
+                        transition: "color 0.2s, font-weight 0.2s"
+                      },
+                      children: [
+                        wordCount,
+                        " / ",
+                        props.wordLimit,
+                        " words"
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                position: "relative",
-                flexGrow: 1,
-                padding: "15px 0px",
-                overflowY: "scroll",
-                overflowX: "auto",
-                minWidth: 0
-              },
-              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 },
-                            spellCheck: !resolvedSpellCheck,
-                            autoCorrect: resolvedSpellCheck ? "off" : void 0,
-                            autoCapitalize: resolvedSpellCheck ? "off" : void 0
-                          }
-                        )
-                      }
-                    ),
-                    placeholder: /* @__PURE__ */ jsx(Stack, { className: css(EditorStyles.editorPlaceholder), children: props.placeholder })
-                  }
-                ),
-                props.wordLimit !== void 0 && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "sticky",
-                      bottom: 0,
-                      display: "flex",
-                      justifyContent: "flex-end",
-                      paddingRight: 14,
-                      pointerEvents: "none",
-                      userSelect: "none"
-                    },
-                    children: /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "11px",
-                          color: isOverLimit ? "#c4272c" : "var(--colorNeutralForeground3, #aaa)",
-                          fontWeight: isOverLimit ? 600 : 400,
-                          transition: "color 0.2s, font-weight 0.2s"
-                        },
-                        children: [
-                          wordCount,
-                          " / ",
-                          props.wordLimit,
-                          " words"
-                        ]
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          hasErrors && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                borderTop: "1px solid #fbd5d5",
-                background: "#fff8f8",
-                padding: "6px 12px 8px",
-                display: "flex",
-                flexDirection: "column",
-                gap: 4
-              },
-              children: allErrors.map((err, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsx(ErrorCircleRegular, { style: { fontSize: 14, color: "#c4272c", flexShrink: 0 } }),
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#c4272c" }, children: err })
-              ] }, i))
-            }
-          ),
-          /* @__PURE__ */ jsx(ReadOnlyPlugin, { readonly: isReadOnly }),
-          /* @__PURE__ */ jsx(BrowserSpellCheckPlugin, { enabled: !resolvedSpellCheck }),
-          /* @__PURE__ */ jsx(
-            FocusEventsPlugin,
-            {
-              onFocus: props.onFocus,
-              onBlur: () => {
-                setTouched(true);
-                props.onBlur?.();
+            ]
+          }
+        ),
+        hasErrors && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid #fbd5d5",
+              background: "#fff8f8",
+              padding: "6px 12px 8px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: allErrors.map((err, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: 6 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ErrorCircleRegular,
+                    {
+                      style: { fontSize: 14, color: "#c4272c", flexShrink: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#c4272c" }, children: err })
+                ]
               },
-              setFocused,
-              containerRef
-            }
-          ),
-          props.autoFocus && !isReadOnly && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
-          /* @__PURE__ */ jsx(HistoryPlugin, {}),
-          /* @__PURE__ */ jsx(ListPlugin, {}),
-          /* @__PURE__ */ jsx(LinkPlugin, { validateUrl }),
-          /* @__PURE__ */ jsx(AutoLinkPlugin, { matchers: MATCHERS }),
-          /* @__PURE__ */ jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true }),
-          !isReadOnly && /* @__PURE__ */ jsx(YoutubeDeletePlugin, {}),
-          !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableActionMenuPlugin, {}),
-          !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableCellResizerPlugin, { anchorElem: floatingAnchorElem }),
-          !isReadOnly && /* @__PURE__ */ jsx(
-            FloatingLinkEditorPlugin,
-            {
-              anchorElem: floatingAnchorElem,
-              isLinkEditMode,
-              setIsLinkEditMode
-            }
-          ),
-          !isReadOnly && /* @__PURE__ */ jsx(ImagePlugin_default, {}),
-          !isReadOnly && /* @__PURE__ */ jsx(InlineImage_default, {}),
-          !isReadOnly && /* @__PURE__ */ jsx(PageBreakPlugin, {}),
-          !!resolvedQuery && !isReadOnly && /* @__PURE__ */ jsx(
-            AutocompletePlugin,
-            {
-              useQuery: resolvedQuery,
-              isReadOnly,
-              onSuggestionShown: props.onSuggestionShown,
-              onSuggestionAccept: props.onSuggestionAccept,
-              idleMs: props.suggestIdleMs ?? 300,
-              minWords: 4,
-              prefixWindow: 300
-            }
-          ),
-          !!resolvedSpellCheck && !isReadOnly && /* @__PURE__ */ jsx(
-            SpellCheckPlugin,
-            {
-              useSpellCheck: resolvedSpellCheck,
-              onSpellCheckAccept: props.onSpellCheckAccept,
-              idleMs: props.spellCheckIdleMs ?? 1200,
-              enabled: props.spellCheckEnabled !== false
-            }
-          ),
-          !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
-          /* @__PURE__ */ jsx(CustomOnChangePlugin, { value: props.value, onChange: props.onChange }),
-          (props.wordLimit !== void 0 || props.required || props.minWords !== void 0) && /* @__PURE__ */ jsx(WordCountPlugin, { onCountChange: handleWordCount }),
-          (props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsx(CharCountPlugin, { onCountChange: handleCharCount }),
-          /* @__PURE__ */ jsx(
-            RefApiPlugin,
-            {
-              forwardedRef: ref,
-              contentEditableDomRef,
-              focusedRef,
-              setRefErrors
-            }
-          )
-        ]
-      }
-    ) }) }) });
-  }
-);
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(ReadOnlyPlugin, { readonly: isReadOnly }),
+        /* @__PURE__ */ jsx(BrowserSpellCheckPlugin, { enabled: !resolvedSpellCheck }),
+        /* @__PURE__ */ jsx(
+          FocusEventsPlugin,
+          {
+            onFocus: props.onFocus,
+            onBlur: () => {
+              setTouched(true);
+              props.onBlur?.();
+            },
+            setFocused,
+            containerRef
+          }
+        ),
+        props.autoFocus && !isReadOnly && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
+        /* @__PURE__ */ jsx(HistoryPlugin, {}),
+        /* @__PURE__ */ jsx(ListPlugin, {}),
+        /* @__PURE__ */ jsx(LinkPlugin, { validateUrl }),
+        /* @__PURE__ */ jsx(AutoLinkPlugin, { matchers: MATCHERS }),
+        /* @__PURE__ */ jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true }),
+        !isReadOnly && /* @__PURE__ */ jsx(YoutubeDeletePlugin, {}),
+        !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableActionMenuPlugin, {}),
+        !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableCellResizerPlugin, { anchorElem: floatingAnchorElem }),
+        !isReadOnly && /* @__PURE__ */ jsx(
+          FloatingLinkEditorPlugin,
+          {
+            anchorElem: floatingAnchorElem,
+            isLinkEditMode,
+            setIsLinkEditMode
+          }
+        ),
+        !isReadOnly && /* @__PURE__ */ jsx(ImagePlugin_default, {}),
+        !isReadOnly && /* @__PURE__ */ jsx(InlineImage_default, {}),
+        !isReadOnly && /* @__PURE__ */ jsx(PageBreakPlugin, {}),
+        !!resolvedQuery && !isReadOnly && /* @__PURE__ */ jsx(
+          AutocompletePlugin,
+          {
+            useQuery: resolvedQuery,
+            isReadOnly,
+            onSuggestionShown: props.onSuggestionShown,
+            onSuggestionAccept: props.onSuggestionAccept,
+            idleMs: props.suggestIdleMs ?? 300,
+            minWords: 4,
+            prefixWindow: 300
+          }
+        ),
+        !!resolvedSpellCheck && !isReadOnly && /* @__PURE__ */ jsx(
+          SpellCheckPlugin,
+          {
+            useSpellCheck: resolvedSpellCheck,
+            onSpellCheckAccept: props.onSpellCheckAccept,
+            idleMs: props.spellCheckIdleMs ?? 1200,
+            enabled: props.spellCheckEnabled !== false
+          }
+        ),
+        !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
+        /* @__PURE__ */ jsx(
+          CustomOnChangePlugin,
+          {
+            value: props.value,
+            onChange: props.onChange
+          }
+        ),
+        (props.wordLimit !== void 0 || props.required || props.minWords !== void 0) && /* @__PURE__ */ jsx(WordCountPlugin, { onCountChange: handleWordCount }),
+        (props.maxChars !== void 0 || props.minChars !== void 0) && /* @__PURE__ */ jsx(CharCountPlugin, { onCountChange: handleCharCount }),
+        /* @__PURE__ */ jsx(
+          RefApiPlugin,
+          {
+            forwardedRef: ref,
+            contentEditableDomRef,
+            focusedRef,
+            setRefErrors
+          }
+        )
+      ]
+    }
+  ) }) }) });
+});
 
 export { ContentEditorComponent, ContentEditorLevel };
 //# sourceMappingURL=index.mjs.map