@tarviks/lexical-rich-editor 1.0.11 → 1.2.0

package/dist/index.js

@@ -1249,6 +1249,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 lexical.TextNode {
   static getType() {
     return "autocomplete";
@@ -2487,6 +2527,236 @@ function CharacterStylesPopupPlugin(props) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   return useCharacterStylesPopup(editor, props);
 }
+
+// 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;
+}
+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] = LexicalComposerContext.useLexicalComposerContext();
   const initializedRef = React9.useRef(false);
@@ -2507,7 +2777,7 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
   }, [editor, value]);
   const handleChange = React9.useCallback((editorState) => {
     editorState.read(() => {
-      onChangeRef.current(html.$generateHtmlFromNodes(editor));
+      onChangeRef.current(postProcessOutput(html.$generateHtmlFromNodes(editor)));
     });
   }, [editor]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3488,310 +3758,112 @@ function $onDragStart2(event) {
   if (!node) return false;
   const dataTransfer = event.dataTransfer;
   if (!dataTransfer) return false;
-  dataTransfer.setData("text/plain", "_");
-  dataTransfer.setDragImage(img2, 0, 0);
-  dataTransfer.setData(
-    "application/x-lexical-drag",
-    JSON.stringify({
-      data: {
-        altText: node.__altText,
-        caption: node.__caption,
-        height: node.__height,
-        key: node.getKey(),
-        showCaption: node.__showCaption,
-        src: node.__src,
-        width: node.__width
-      },
-      type: "image"
-    })
-  );
-  return true;
-}
-var $onDragover2 = (event) => {
-  const node = $getImageNodeInSelection2();
-  if (!node) return false;
-  if (!canDropImage2(event)) {
-    event.preventDefault();
-  }
-  return true;
-};
-var $onDrop2 = (event, editor) => {
-  const node = $getImageNodeInSelection2();
-  if (!node) return false;
-  const data = getDragImageData2(event);
-  if (!data) return false;
-  event.preventDefault();
-  if (canDropImage2(event)) {
-    const range = getDragSelection2(event);
-    node.remove();
-    const rangeSelection = lexical.$createRangeSelection();
-    if (range !== null && range !== void 0) {
-      rangeSelection.applyDOMRange(range);
-    }
-    lexical.$setSelection(rangeSelection);
-    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
-  }
-  return true;
-};
-var $getImageNodeInSelection2 = () => {
-  const selection = lexical.$getSelection();
-  if (!lexical.$isNodeSelection(selection)) return null;
-  const nodes = selection.getNodes();
-  const node = nodes[0];
-  return $isInlineImageNode(node) ? node : null;
-};
-var getDragImageData2 = (event) => {
-  const dragData = event.dataTransfer?.getData("application/x-lexical-drag");
-  if (!dragData) return null;
-  const { type, data } = JSON.parse(dragData);
-  if (type !== "image") return null;
-  return data;
-};
-var canDropImage2 = (event) => {
-  const target = event.target;
-  return !!(lexical.isHTMLElement(target) && !target.closest("code, span.editor-image") && lexical.isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root"));
-};
-var getDragSelection2 = (event) => {
-  let range;
-  const domSelection = lexical.getDOMSelectionFromTarget(event.target);
-  if (document.caretRangeFromPoint) {
-    range = document.caretRangeFromPoint(event.clientX, event.clientY);
-  } else if (event.rangeParent && domSelection !== null) {
-    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
-    range = domSelection.getRangeAt(0);
-  } else {
-    throw Error("Cannot get the selection when dragging");
-  }
-  return range;
-};
-var INSERT_PAGE_BREAK = lexical.createCommand();
-function PageBreakPlugin() {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
-    if (!editor.hasNodes([PageBreakNode])) {
-      throw new Error(
-        "PageBreakPlugin: PageBreakNode is not registered on editor"
-      );
-    }
-    return utils.mergeRegister(
-      editor.registerCommand(
-        INSERT_PAGE_BREAK,
-        () => {
-          const selection = lexical.$getSelection();
-          if (!lexical.$isRangeSelection(selection)) {
-            return false;
-          }
-          const focusNode = selection.focus.getNode();
-          if (focusNode !== null) {
-            const pgBreak = $createPageBreakNode();
-            utils.$insertNodeToNearestRoot(pgBreak);
-          }
-          return true;
-        },
-        lexical.COMMAND_PRIORITY_EDITOR
-      )
-    );
-  }, [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);
+  dataTransfer.setData("text/plain", "_");
+  dataTransfer.setDragImage(img2, 0, 0);
+  dataTransfer.setData(
+    "application/x-lexical-drag",
+    JSON.stringify({
+      data: {
+        altText: node.__altText,
+        caption: node.__caption,
+        height: node.__height,
+        key: node.getKey(),
+        showCaption: node.__showCaption,
+        src: node.__src,
+        width: node.__width
+      },
+      type: "image"
+    })
+  );
+  return true;
+}
+var $onDragover2 = (event) => {
+  const node = $getImageNodeInSelection2();
+  if (!node) return false;
+  if (!canDropImage2(event)) {
+    event.preventDefault();
+  }
+  return true;
+};
+var $onDrop2 = (event, editor) => {
+  const node = $getImageNodeInSelection2();
+  if (!node) return false;
+  const data = getDragImageData2(event);
+  if (!data) return false;
+  event.preventDefault();
+  if (canDropImage2(event)) {
+    const range = getDragSelection2(event);
+    node.remove();
+    const rangeSelection = lexical.$createRangeSelection();
+    if (range !== null && range !== void 0) {
+      rangeSelection.applyDOMRange(range);
     }
+    lexical.$setSelection(rangeSelection);
+    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
   }
-  if (pendingP) body.appendChild(pendingP);
-  return body.innerHTML;
+  return true;
+};
+var $getImageNodeInSelection2 = () => {
+  const selection = lexical.$getSelection();
+  if (!lexical.$isNodeSelection(selection)) return null;
+  const nodes = selection.getNodes();
+  const node = nodes[0];
+  return $isInlineImageNode(node) ? node : null;
+};
+var getDragImageData2 = (event) => {
+  const dragData = event.dataTransfer?.getData("application/x-lexical-drag");
+  if (!dragData) return null;
+  const { type, data } = JSON.parse(dragData);
+  if (type !== "image") return null;
+  return data;
+};
+var canDropImage2 = (event) => {
+  const target = event.target;
+  return !!(lexical.isHTMLElement(target) && !target.closest("code, span.editor-image") && lexical.isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root"));
+};
+var getDragSelection2 = (event) => {
+  let range;
+  const domSelection = lexical.getDOMSelectionFromTarget(event.target);
+  if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(event.clientX, event.clientY);
+  } else if (event.rangeParent && domSelection !== null) {
+    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+    range = domSelection.getRangeAt(0);
+  } else {
+    throw Error("Cannot get the selection when dragging");
+  }
+  return range;
+};
+var INSERT_PAGE_BREAK = lexical.createCommand();
+function PageBreakPlugin() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React9.useEffect(() => {
+    if (!editor.hasNodes([PageBreakNode])) {
+      throw new Error(
+        "PageBreakPlugin: PageBreakNode is not registered on editor"
+      );
+    }
+    return utils.mergeRegister(
+      editor.registerCommand(
+        INSERT_PAGE_BREAK,
+        () => {
+          const selection = lexical.$getSelection();
+          if (!lexical.$isRangeSelection(selection)) {
+            return false;
+          }
+          const focusNode = selection.focus.getNode();
+          if (focusNode !== null) {
+            const pgBreak = $createPageBreakNode();
+            utils.$insertNodeToNearestRoot(pgBreak);
+          }
+          return true;
+        },
+        lexical.COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }, [editor]);
+  return null;
 }
-
-// src/Utils/Helper.ts
 function findBlockByKind(kind) {
   const root = lexical.$getRoot();
   for (const child of root.getChildren()) {
@@ -3863,7 +3935,7 @@ function RefApiPlugin({
         editor.getEditorState().read(() => {
           html$1 = html.$generateHtmlFromNodes(editor, null);
         });
-        return html$1;
+        return postProcessOutput(html$1);
       },
       clear: () => {
         editor.update(() => {
@@ -5012,7 +5084,8 @@ function getToolbarGroupsByLevel(level) {
         ["FontFamily", "|"],
         ["FontSize", "|"],
         ["Decorators", "|"],
-        ["Align"]
+        ["Align", "|"],
+        ["PageSetup"]
       ];
     case "pro" /* Pro */:
     default:
@@ -5027,7 +5100,8 @@ function getToolbarGroupsByLevel(level) {
         ["FontFamily", "|"],
         ["FontSize", "|"],
         ["Decorators", "|"],
-        ["Align"]
+        ["Align", "|"],
+        ["PageSetup"]
       ];
   }
 }
@@ -5065,6 +5139,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) {
@@ -5112,40 +5187,6 @@ var hsvToRgb = (h, s, v) => {
     b: Math.round((bb + m) * 255)
   };
 };
-function useDrag(onMove, onEnd, interactingRef) {
-  const draggingRef = React9__namespace.useRef(false);
-  const start = React9__namespace.useCallback(
-    (e) => {
-      draggingRef.current = true;
-      if (interactingRef) interactingRef.current = true;
-      onMove(e.clientX, e.clientY);
-      const move = (ev) => {
-        if (!draggingRef.current) return;
-        onMove(ev.clientX, ev.clientY);
-      };
-      const up = () => {
-        draggingRef.current = false;
-        window.removeEventListener("mousemove", move);
-        window.removeEventListener("mouseup", up);
-        if (interactingRef) {
-          const clearFlag = () => {
-            interactingRef.current = false;
-          };
-          window.addEventListener("click", clearFlag, { once: true });
-          setTimeout(() => {
-            window.removeEventListener("click", clearFlag);
-            interactingRef.current = false;
-          }, 0);
-        }
-        onEnd?.();
-      };
-      window.addEventListener("mousemove", move);
-      window.addEventListener("mouseup", up);
-    },
-    [onMove, onEnd, interactingRef]
-  );
-  return start;
-}
 var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
   const [open, setOpen] = React9__namespace.useState(false);
   const btnRef = React9__namespace.useRef(null);
@@ -5156,13 +5197,9 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onOpenChange]
   );
-  const interactingRef = React9__namespace.useRef(false);
   const handleDismiss = React9__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
   const preventDismissOnEvent = React9__namespace.useCallback(
-    (ev) => {
-      if (interactingRef.current) return true;
-      return ev.type !== "click";
-    },
+    (ev) => ev.type !== "click",
     []
   );
   const [, forceReposition] = React9__namespace.useState(0);
@@ -5184,100 +5221,119 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  const [hex, setHex] = React9__namespace.useState(normalizeHex(value || "#000000"));
+  const appliedHex = React9__namespace.useMemo(() => normalizeHex(value || "#000000"), [value]);
+  const [hex, setHexState] = React9__namespace.useState(appliedHex);
+  const [hexText, setHexText] = React9__namespace.useState(appliedHex);
   const { r, g, b } = React9__namespace.useMemo(() => hexToRgb(hex), [hex]);
   const hsv = React9__namespace.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
   const [h, setH] = React9__namespace.useState(hsv.h);
   const [s, setS] = React9__namespace.useState(hsv.s);
   const [v, setV] = React9__namespace.useState(hsv.v);
+  const commit = React9__namespace.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__namespace.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__namespace.useRef(open);
-  console.log("[AO-ColorPicker]", title, "render with incoming value prop:", JSON.stringify(value));
   React9__namespace.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
-    console.log("[AO-ColorPicker]", title, "open-seed effect", {
-      open,
-      justOpened,
-      incomingValue: value
-    });
     if (!justOpened) return;
-    const n = normalizeHex(value || "#000000");
-    console.log("[AO-ColorPicker]", title, "seeding local state from value on open", {
-      incomingValue: value,
-      normalized: n
-    });
-    setHex(n);
-    const rgb = hexToRgb(n);
+    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);
-  }, [value, open]);
-  const updateHexFromHsv = React9__namespace.useCallback((hh, ss, vv) => {
-    const rgb = hsvToRgb(hh, ss, vv);
-    const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
-    setHex(nextHex);
-    return nextHex;
+  }, [appliedHex, open]);
+  const svRef = React9__namespace.useRef(null);
+  const svPointFromEvent = React9__namespace.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 commitHsv = React9__namespace.useCallback(
-    (hh, ss, vv, close) => {
-      const nextHex = updateHexFromHsv(hh, ss, vv);
-      console.log("[AO-ColorPicker]", title, "commitHsv -> onChange", { nextHex, close: !!close });
-      onChange(nextHex);
-      if (close) setOpenAndNotify(false);
+  const hRef = React9__namespace.useRef(h);
+  hRef.current = h;
+  const handleSVPointerDown = React9__namespace.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const pt = svPointFromEvent(e.clientX, e.clientY);
+      if (pt) commitFromHsv(hRef.current, pt.ss, pt.vv);
     },
-    [onChange, title, setOpenAndNotify, updateHexFromHsv]
+    [svPointFromEvent, commitFromHsv]
   );
-  const hRef = React9__namespace.useRef(h);
+  const handleSVPointerMove = React9__namespace.useCallback(
+    (e) => {
+      if (e.buttons !== 1) return;
+      const pt = svPointFromEvent(e.clientX, e.clientY);
+      if (pt) commitFromHsv(hRef.current, pt.ss, pt.vv);
+    },
+    [svPointFromEvent, commitFromHsv]
+  );
+  const hueRef = React9__namespace.useRef(null);
   const sRef = React9__namespace.useRef(s);
+  sRef.current = s;
   const vRef = React9__namespace.useRef(v);
-  React9__namespace.useEffect(() => {
-    hRef.current = h;
-  }, [h]);
-  React9__namespace.useEffect(() => {
-    sRef.current = s;
-  }, [s]);
-  React9__namespace.useEffect(() => {
-    vRef.current = v;
-  }, [v]);
-  const svRef = React9__namespace.useRef(null);
-  const onSVMove = React9__namespace.useCallback(
-    (clientX, clientY) => {
-      if (!svRef.current) return;
-      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;
-      setS(ss);
-      setV(vv);
-      sRef.current = ss;
-      vRef.current = vv;
-      updateHexFromHsv(hRef.current, ss, vv);
+  vRef.current = v;
+  const huePointFromEvent = React9__namespace.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__namespace.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const hh = huePointFromEvent(e.clientX);
+      if (hh != null) commitFromHsv(hh, sRef.current, vRef.current);
     },
-    [updateHexFromHsv]
+    [huePointFromEvent, commitFromHsv]
   );
-  const commitSV = React9__namespace.useCallback(() => {
-    commitHsv(hRef.current, sRef.current, vRef.current);
-  }, [commitHsv]);
-  const startSV = useDrag(onSVMove, commitSV, interactingRef);
-  const hueRef = React9__namespace.useRef(null);
-  const onHueMove = React9__namespace.useCallback(
-    (clientX) => {
-      if (!hueRef.current) return;
-      const rect = hueRef.current.getBoundingClientRect();
-      const x = clamp3(clientX - rect.left, 0, rect.width);
-      const hh = rect.width === 0 ? 0 : x / rect.width * 360;
-      setH(hh);
-      hRef.current = hh;
-      updateHexFromHsv(hh, sRef.current, vRef.current);
+  const handleHuePointerMove = React9__namespace.useCallback(
+    (e) => {
+      if (e.buttons !== 1) return;
+      const hh = huePointFromEvent(e.clientX);
+      if (hh != null) commitFromHsv(hh, sRef.current, vRef.current);
+    },
+    [huePointFromEvent, commitFromHsv]
+  );
+  const handleHexChange = React9__namespace.useCallback(
+    (_, val) => {
+      const next = val ?? "";
+      setHexText(next);
+      if (isCompleteHex(next.trim())) commit(normalizeHex(next));
     },
-    [updateHexFromHsv]
+    [commit]
   );
-  const commitHue = React9__namespace.useCallback(() => {
-    commitHsv(hRef.current, sRef.current, vRef.current);
-  }, [commitHsv]);
-  const startHue = useDrag((x) => onHueMove(x), commitHue, interactingRef);
+  const handleHexBlur = React9__namespace.useCallback(() => {
+    commit(normalizeHex(hexText));
+  }, [hexText, commit]);
   const svThumb = React9__namespace.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
   const hueThumb = React9__namespace.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
   const hueColor = React9__namespace.useMemo(() => {
@@ -5302,10 +5358,6 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
         },
         onClick: () => {
           if (disabled) return;
-          console.log("[AO-ColorPicker]", title, "trigger button clicked", {
-            wasOpen: open,
-            activeElementBeforeToggle: document.activeElement?.tagName
-          });
           setOpenAndNotify(!open);
         }
       }
@@ -5320,7 +5372,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
           transform: "translateX(-50%)",
           width: 14,
           height: 3,
-          background: hex,
+          background: appliedHex,
           borderRadius: 1,
           border: "0.5px solid rgba(0,0,0,0.18)",
           pointerEvents: "none"
@@ -5336,72 +5388,192 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
         directionalHint: 4,
         className: "aoColorCallout",
         preventDismissOnEvent,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: 12, width: 320 } }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexRow", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSwatch", style: { background: hex } }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexTitle", children: title })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexRow", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexLabel", children: "Hex" }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 14 }, styles: { root: { padding: "14px 16px 16px", width: 288 } }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "#242424", letterSpacing: 0.1 }, children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              react.TextField,
+              "button",
               {
-                value: hex,
-                onChange: (_, val) => setHex(normalizeHex(val || "")),
-                onBlur: () => {
-                  const n = normalizeHex(hex);
-                  setHex(n);
-                  const rgb = hexToRgb(n);
-                  const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                  setH(next.h);
-                  setS(next.s);
-                  setV(next.v);
-                  console.log("[AO-ColorPicker]", title, "hex field blur -> onChange", { raw: hex, normalized: n });
-                  onChange(n);
-                }
+                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__ */ jsxRuntime.jsx(reactIcons.Dismiss16Regular, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSwatches", children: PRESET.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              type: "button",
-              className: "aoLexSwatchBtn",
-              style: { background: c },
-              onClick: () => {
-                setHex(c);
-                const rgb = hexToRgb(c);
-                const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                setH(next.h);
-                setS(next.s);
-                setV(next.v);
-                console.log("[AO-ColorPicker]", title, "preset swatch click -> onChange", { color: c });
-                onChange(c);
+              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)"
               },
-              title: c
-            },
-            c
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexSV", ref: svRef, onMouseDown: startSV, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVHue", style: { background: hueColor } }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVWhite" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVBlack" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVThumb", style: svThumb })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexHue", ref: hueRef, onMouseDown: startHue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexHueThumb", style: hueThumb }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexPreview", style: { background: hex } }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexActions", children: [
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, background: hueColor } }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: "linear-gradient(to right, #fff, rgba(255,255,255,0))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: "linear-gradient(to top, #000, rgba(0,0,0,0))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              react.DefaultButton,
+              "div",
               {
-                type: "button",
-                text: "Apply",
-                onClick: () => {
-                  commitHsv(h, s, v, true);
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: 6,
+                  flexShrink: 0,
+                  background: hex,
+                  boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.12)"
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { type: "button", text: "Close", onClick: () => setOpenAndNotify(false) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.TextField,
+              {
+                value: hexText,
+                onChange: handleHexChange,
+                onBlur: handleHexBlur,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit(normalizeHex(hexText));
+                },
+                styles: { root: { flex: 1 }, fieldGroup: { borderRadius: 6 } }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 600, color: "#8a8a8a", marginBottom: 6, letterSpacing: 0.3 }, children: "STANDARD COLORS" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(9, 1fr)",
+                  gap: 6
+                },
+                children: PRESET.map((c) => {
+                  const isSelected = c.toLowerCase() === hex.toLowerCase();
+                  return /* @__PURE__ */ jsxRuntime.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
+                  );
+                })
+              }
+            )
           ] })
         ] })
       }
@@ -5414,20 +5586,10 @@ var ColorPickerPlugin = ({ disabled }) => {
   const lastRangeSelectionRef = React9__namespace.default.useRef(null);
   const updateToolbar = () => {
     const selection$1 = lexical.$getSelection();
-    const isRange = lexical.$isRangeSelection(selection$1);
-    console.log("[AO-ColorPicker] updateToolbar", {
-      isRangeSelection: isRange,
-      isCollapsed: isRange ? selection$1.isCollapsed() : null
-    });
-    if (isRange) {
+    if (lexical.$isRangeSelection(selection$1)) {
       lastRangeSelectionRef.current = selection$1.clone();
       const c = selection.$getSelectionStyleValueForProperty(selection$1, "color", "#000000");
-      const bg = selection.$getSelectionStyleValueForProperty(
-        selection$1,
-        "background-color",
-        "#ffffff"
-      );
-      console.log("[AO-ColorPicker] updateToolbar readback", { color: c, bgColor: bg });
+      const bg = selection.$getSelectionStyleValueForProperty(selection$1, "background-color", "#ffffff");
       setColors({ color: c, bgColor: bg });
     }
   };
@@ -5457,15 +5619,6 @@ var ColorPickerPlugin = ({ disabled }) => {
   };
   const applyStyle = (args) => {
     if (disabled) return;
-    console.log("[AO-ColorPicker] applyStyle called", {
-      property: args.property,
-      color: args.color,
-      hasSavedSelection: !!lastRangeSelectionRef.current,
-      savedSelectionIsCollapsed: lastRangeSelectionRef.current?.isCollapsed() ?? null,
-      wasEditorActiveAtOpen: wasEditorActiveRef.current,
-      activeElementTag: document.activeElement?.tagName,
-      activeElementClass: document.activeElement?.className
-    });
     editor.update(
       () => {
         const saved = lastRangeSelectionRef.current;
@@ -5473,39 +5626,17 @@ var ColorPickerPlugin = ({ disabled }) => {
           lexical.$setSelection(saved.clone());
         }
         const selection$1 = lexical.$getSelection();
-        const isRange = lexical.$isRangeSelection(selection$1);
-        console.log("[AO-ColorPicker] applyStyle inside editor.update", {
-          hadSavedSelection: !!saved,
-          selectionAfterRestoreIsRange: isRange,
-          selectionAfterRestoreIsCollapsed: isRange ? selection$1.isCollapsed() : null
-        });
-        if (isRange) {
+        if (lexical.$isRangeSelection(selection$1)) {
           selection.$patchStyleText(selection$1, { [args.property]: args.color });
-          const verify = selection.$getSelectionStyleValueForProperty(
-            selection$1,
-            args.property,
-            "<none>"
-          );
-          console.log("[AO-ColorPicker] applyStyle after patchStyleText, readback in same update", {
-            property: args.property,
-            appliedColor: args.color,
-            readBack: verify
-          });
-        } else {
-          console.warn(
-            "[AO-ColorPicker] applyStyle: no range selection available \u2014 style was NOT applied",
-            { property: args.property, color: args.color }
-          );
         }
       },
       // Without this tag, Lexical's reconciler force-focuses the editor root
       // whenever this update's selection diff finds the root isn't already
-      // focused (see Lexical.dev.mjs ~8112) — which it never is while the
-      // color picker's Callout legitimately holds focus. That forced focus
-      // then fights Fluent's Callout for focus on every single drag-driven
-      // commit, repeatedly bouncing focus (and, via FocusEventsPlugin,
-      // nulling and restoring the selection) between the editor and the
-      // popover until the drag's tracked color desynced from the cursor.
+      // focused — which it isn't while the color picker's Callout holds
+      // focus. The picker now only calls applyStyle once, on Apply, so this
+      // is no longer fighting for focus on every drag pixel, but there's no
+      // reason to force a focus change here at all — handleOpenChange above
+      // already does that deliberately, once, on close.
       { tag: lexical.SKIP_SELECTION_FOCUS_TAG }
     );
   };
@@ -5874,6 +6005,60 @@ var InsertLinkPlugin = ({ disabled }) => {
     }
   );
 };
+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__ */ jsxRuntime.jsxs(
+    reactComponents.Menu,
+    {
+      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__ */ jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            disabled,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DocumentRegular, {}),
+            title: "Page setup",
+            style: { minWidth: "auto" },
+            children: sizeLabel
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { style: { minWidth: 220 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Page size" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "size", value: "pageless", children: "Pageless" }),
+            PAGE_SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "size", value: opt.key, children: opt.label }, opt.key))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuDivider, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Orientation" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "orientation", value: "portrait", disabled: !isPaged, children: "Portrait" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "orientation", value: "landscape", disabled: !isPaged, children: "Landscape" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuDivider, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Margins" }),
+            MARGIN_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "margin", value: opt.key, disabled: !isPaged, children: opt.label }, opt.key))
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 var TableItemPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [columns, setColumns] = React9.useState("");
@@ -6091,7 +6276,8 @@ var ALLOWED_TOKENS = {
   FontSize: true,
   Decorators: true,
   CodeBlock: true,
-  Align: true
+  Align: true,
+  PageSetup: true
 };
 function sanitizePluginGroups(groups) {
   if (!groups || groups.length === 0) return [];
@@ -6630,6 +6816,16 @@ var ToolBarPlugins = (props) => {
           key
         );
       }
+      case "PageSetup":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          PageSetupPlugin,
+          {
+            disabled: !isEditable || props.readOnly,
+            value: props.pageSetup,
+            onChange: props.onPageSetupChange
+          },
+          key
+        );
       default:
         return null;
     }
@@ -6851,12 +7047,6 @@ function FocusEventsPlugin({
       const next = e.relatedTarget;
       const container = containerRef.current;
       const stillInside = !!next && (container ? container.contains(next) : root.contains(next));
-      console.log("[AO-ColorPicker] FocusEventsPlugin focusout", {
-        relatedTargetTag: next ? next.tagName : null,
-        relatedTargetClass: next ? next.className : null,
-        stillInside,
-        willClearSelection: !stillInside
-      });
       if (stillInside) return;
       editor.update(() => {
         lexical.$setSelection(null);
@@ -6987,6 +7177,8 @@ var ContentEditorComponent = React9.forwardRef(
     const [charCount, setCharCount] = React9.useState(0);
     const handleCharCount = React9.useCallback((count) => setCharCount(count), []);
     const [refErrors, setRefErrors] = React9.useState([]);
+    const [pageSetup, setPageSetup] = React9.useState(DEFAULT_PAGE_SETUP);
+    const pageCanvas = resolvePageCanvasMetrics(pageSetup);
     const contentEditableDomRef = React9.useRef(null);
     const previousOverLimitRef = React9.useRef(false);
     const focusedRef = React9.useRef(false);
@@ -7028,8 +7220,8 @@ var ContentEditorComponent = React9.forwardRef(
         color: "var(--colorNeutralForeground3, grey)",
         position: "absolute",
         top: props.level !== "none" /* None */ ? "17px" : "27px",
-        left: 20,
-        right: 20,
+        left: pageCanvas.paddingPx,
+        right: pageCanvas.paddingPx,
         fontSize: "14px",
         pointerEvents: "none",
         userSelect: "none"
@@ -7040,8 +7232,6 @@ var ContentEditorComponent = React9.forwardRef(
         outline: "none",
         overflow: "auto",
         marginTop: "0px",
-        paddingLeft: "20px",
-        paddingRight: "20px",
         position: "relative",
         background: "var(--colorNeutralBackground1, #ffffff)",
         justifyContent: "center",
@@ -7141,7 +7331,9 @@ var ContentEditorComponent = React9.forwardRef(
                 ToolBarPlugins,
                 {
                   level: props.level ?? "basic" /* Basic */,
-                  readOnly: props.readOnly
+                  readOnly: props.readOnly,
+                  pageSetup,
+                  onPageSetupChange: setPageSetup
                 }
               )
             }
@@ -7155,7 +7347,8 @@ var ContentEditorComponent = React9.forwardRef(
                 padding: "15px 0px",
                 overflowY: "scroll",
                 overflowX: "auto",
-                minWidth: 0
+                minWidth: 0,
+                background: pageCanvas.widthPx !== void 0 ? "#eef0f2" : void 0
               },
               onClickCapture: handleReadOnlyClickCapture,
               children: [
@@ -7174,7 +7367,15 @@ var ContentEditorComponent = React9.forwardRef(
                           {
                             ref: contentEditableDomRef,
                             className: react.css(EditorStyles.contentEditor),
-                            style: { paddingTop: props.level !== "none" /* None */ ? 0 : 10 },
+                            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