@tarviks/lexical-rich-editor 1.1.0 → 1.2.0

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, Popover, PopoverTrigger, PopoverSurface, Field, Input } from '@fluentui/react-components';
+import { ErrorCircleRegular, ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, DeleteRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, DocumentRegular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, CodeFilled, LinkFilled, Dismiss16Regular } from '@fluentui/react-icons';
 import { 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';
@@ -1228,6 +1228,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,6 +2506,236 @@ function CharacterStylesPopupPlugin(props) {
   const [editor] = 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] = useLexicalComposerContext();
   const initializedRef = useRef(false);
@@ -2486,7 +2756,7 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
   }, [editor, value]);
   const handleChange = useCallback((editorState) => {
     editorState.read(() => {
-      onChangeRef.current($generateHtmlFromNodes(editor));
+      onChangeRef.current(postProcessOutput($generateHtmlFromNodes(editor)));
     });
   }, [editor]);
   return /* @__PURE__ */ jsx(
@@ -3498,279 +3768,81 @@ 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 = $createRangeSelection();
-    if (range !== null && range !== void 0) {
-      rangeSelection.applyDOMRange(range);
-    }
-    $setSelection(rangeSelection);
-    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
-  }
-  return true;
-};
-var $getImageNodeInSelection2 = () => {
-  const selection = $getSelection();
-  if (!$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 !!(isHTMLElement(target) && !target.closest("code, span.editor-image") && isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root"));
-};
-var getDragSelection2 = (event) => {
-  let range;
-  const domSelection = 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 = createCommand();
-function PageBreakPlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    if (!editor.hasNodes([PageBreakNode])) {
-      throw new Error(
-        "PageBreakPlugin: PageBreakNode is not registered on editor"
-      );
-    }
-    return mergeRegister(
-      editor.registerCommand(
-        INSERT_PAGE_BREAK,
-        () => {
-          const selection = $getSelection();
-          if (!$isRangeSelection(selection)) {
-            return false;
-          }
-          const focusNode = selection.focus.getNode();
-          if (focusNode !== null) {
-            const pgBreak = $createPageBreakNode();
-            $insertNodeToNearestRoot(pgBreak);
-          }
-          return true;
-        },
-        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 (!data) return false;
+  event.preventDefault();
+  if (canDropImage2(event)) {
+    const range = getDragSelection2(event);
+    node.remove();
+    const rangeSelection = $createRangeSelection();
+    if (range !== null && range !== void 0) {
+      rangeSelection.applyDOMRange(range);
     }
+    $setSelection(rangeSelection);
+    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
   }
-  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 true;
+};
+var $getImageNodeInSelection2 = () => {
+  const selection = $getSelection();
+  if (!$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 !!(isHTMLElement(target) && !target.closest("code, span.editor-image") && isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root"));
+};
+var getDragSelection2 = (event) => {
+  let range;
+  const domSelection = 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 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);
+  return range;
+};
+var INSERT_PAGE_BREAK = createCommand();
+function PageBreakPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([PageBreakNode])) {
+      throw new Error(
+        "PageBreakPlugin: PageBreakNode is not registered on editor"
+      );
     }
-  }
-  if (pendingP) body.appendChild(pendingP);
-  return body.innerHTML;
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_PAGE_BREAK,
+        () => {
+          const selection = $getSelection();
+          if (!$isRangeSelection(selection)) {
+            return false;
+          }
+          const focusNode = selection.focus.getNode();
+          if (focusNode !== null) {
+            const pgBreak = $createPageBreakNode();
+            $insertNodeToNearestRoot(pgBreak);
+          }
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }, [editor]);
+  return null;
 }
-
-// src/Utils/Helper.ts
 function findBlockByKind(kind) {
   const root = $getRoot();
   for (const child of root.getChildren()) {
@@ -3842,7 +3914,7 @@ function RefApiPlugin({
         editor.getEditorState().read(() => {
           html = $generateHtmlFromNodes(editor, null);
         });
-        return html;
+        return postProcessOutput(html);
       },
       clear: () => {
         editor.update(() => {
@@ -4991,7 +5063,8 @@ function getToolbarGroupsByLevel(level) {
         ["FontFamily", "|"],
         ["FontSize", "|"],
         ["Decorators", "|"],
-        ["Align"]
+        ["Align", "|"],
+        ["PageSetup"]
       ];
     case "pro" /* Pro */:
     default:
@@ -5006,7 +5079,8 @@ function getToolbarGroupsByLevel(level) {
         ["FontFamily", "|"],
         ["FontSize", "|"],
         ["Decorators", "|"],
-        ["Align"]
+        ["Align", "|"],
+        ["PageSetup"]
       ];
   }
 }
@@ -5044,6 +5118,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 +5201,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);
+    },
+    [huePointFromEvent, commitFromHsv]
+  );
+  const handleHexChange = React9.useCallback(
+    (_, val) => {
+      const next = val ?? "";
+      setHexText(next);
+      if (isCompleteHex(next.trim())) commit(normalizeHex(next));
     },
-    [s, v, setDraftFromHsv]
+    [commit]
   );
-  const handleApply = React9.useCallback(() => {
-    onChange(hex);
-    setOpenAndNotify(false);
-  }, [onChange, hex, setOpenAndNotify]);
+  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 +5367,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 })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "aoLexRow", children: [
-            /* @__PURE__ */ jsx("div", { className: "aoLexLabel", children: "Hex" }),
+        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(
-              TextField,
+              "button",
               {
-                value: hex,
-                onChange: (_, val) => setHex(normalizeHex(val || "")),
-                onBlur: () => setDraft(normalizeHex(hex))
+                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__ */ jsx("div", { className: "aoLexSwatches", children: PRESET.map((c) => /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              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 })
+              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: 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: "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
+                  );
+                })
+              }
+            )
           ] })
         ] })
       }
@@ -5705,6 +5984,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__ */ jsxs(
+    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__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            disabled,
+            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 }) => {
   const [editor] = useLexicalComposerContext();
   const [columns, setColumns] = useState("");
@@ -5922,7 +6255,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 [];
@@ -6461,6 +6795,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;
     }
@@ -6812,6 +7156,8 @@ var ContentEditorComponent = forwardRef(
     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);
@@ -6853,8 +7199,8 @@ var ContentEditorComponent = 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"
@@ -6865,8 +7211,6 @@ var ContentEditorComponent = forwardRef(
         outline: "none",
         overflow: "auto",
         marginTop: "0px",
-        paddingLeft: "20px",
-        paddingRight: "20px",
         position: "relative",
         background: "var(--colorNeutralBackground1, #ffffff)",
         justifyContent: "center",
@@ -6966,7 +7310,9 @@ var ContentEditorComponent = forwardRef(
                 ToolBarPlugins,
                 {
                   level: props.level ?? "basic" /* Basic */,
-                  readOnly: props.readOnly
+                  readOnly: props.readOnly,
+                  pageSetup,
+                  onPageSetupChange: setPageSetup
                 }
               )
             }
@@ -6980,7 +7326,8 @@ var ContentEditorComponent = forwardRef(
                 padding: "15px 0px",
                 overflowY: "scroll",
                 overflowX: "auto",
-                minWidth: 0
+                minWidth: 0,
+                background: pageCanvas.widthPx !== void 0 ? "#eef0f2" : void 0
               },
               onClickCapture: handleReadOnlyClickCapture,
               children: [
@@ -6999,7 +7346,15 @@ var ContentEditorComponent = forwardRef(
                           {
                             ref: contentEditableDomRef,
                             className: 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