@yurikilian/lex4 1.4.1 → 1.5.1

package/dist/lex4-editor.cjs

@@ -8,13 +8,15 @@ const React = require("react");
 const lexical = require("lexical");
 const LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 const list = require("@lexical/list");
+const selection = require("@lexical/selection");
+const richText = require("@lexical/rich-text");
+const useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
 const LexicalComposer = require("@lexical/react/LexicalComposer");
 const LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
 const LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
 const LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
 const LexicalErrorBoundary = require("@lexical/react/LexicalErrorBoundary");
 const LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-const richText = require("@lexical/rich-text");
 function createEmptyPage(id) {
   return {
     id: id ?? crypto.randomUUID(),
@@ -473,6 +475,15 @@ const DEFAULT_TRANSLATIONS = {
     bulletList: "Bullet List",
     indent: "Indent",
     outdent: "Outdent",
+    history: "History",
+    blockType: "Block type",
+    paragraph: "Paragraph",
+    heading1: "Heading 1",
+    heading2: "Heading 2",
+    heading3: "Heading 3",
+    heading4: "Heading 4",
+    heading5: "Heading 5",
+    heading6: "Heading 6",
     openHistory: "Open History",
     closeHistory: "Close History"
   },
@@ -504,7 +515,9 @@ const DEFAULT_TRANSLATIONS = {
       indentedContent: "Indented content",
       outdentedContent: "Outdented content",
       fontChanged: "Font changed to {{value}}",
-      fontSizeChanged: "Font size changed to {{value}}pt"
+      fontSizeChanged: "Font size changed to {{value}}pt",
+      blockTypeChanged: "Block type changed to {{value}}",
+      insertedDocumentContent: "Inserted document content"
     }
   },
   variables: {
@@ -604,6 +617,15 @@ const PT_BR_TRANSLATIONS = {
     bulletList: "Lista com Marcadores",
     indent: "Aumentar Recuo",
     outdent: "Diminuir Recuo",
+    history: "Histórico",
+    blockType: "Tipo de bloco",
+    paragraph: "Parágrafo",
+    heading1: "Título 1",
+    heading2: "Título 2",
+    heading3: "Título 3",
+    heading4: "Título 4",
+    heading5: "Título 5",
+    heading6: "Título 6",
     openHistory: "Abrir Histórico",
     closeHistory: "Fechar Histórico"
   },
@@ -635,7 +657,9 @@ const PT_BR_TRANSLATIONS = {
       indentedContent: "Conteúdo recuado",
       outdentedContent: "Recuo reduzido",
       fontChanged: "Fonte alterada para {{value}}",
-      fontSizeChanged: "Tamanho da fonte alterado para {{value}}pt"
+      fontSizeChanged: "Tamanho da fonte alterado para {{value}}pt",
+      blockTypeChanged: "Tipo de bloco alterado para {{value}}",
+      insertedDocumentContent: "Conteúdo do documento inserido"
     }
   },
   variables: {
@@ -797,25 +821,25 @@ function captureCaretSelection(editor) {
   };
   let caretSelection = null;
   editor.getEditorState().read(() => {
-    const selection = lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) {
+    const selection2 = lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection2)) {
       return;
     }
     caretSelection = {
       anchor: {
-        key: selection.anchor.key,
-        offset: selection.anchor.offset,
-        type: selection.anchor.type
+        key: selection2.anchor.key,
+        offset: selection2.anchor.offset,
+        type: selection2.anchor.type
       },
       focus: {
-        key: selection.focus.key,
-        offset: selection.focus.offset,
-        type: selection.focus.type
+        key: selection2.focus.key,
+        offset: selection2.focus.offset,
+        type: selection2.focus.type
       },
       anchorTextOffset: domSelection && selectionInRoot(domSelection.anchorNode) ? getTextOffset(domSelection.anchorNode, domSelection.anchorOffset) : 0,
       focusTextOffset: domSelection && selectionInRoot(domSelection.focusNode) ? getTextOffset(domSelection.focusNode, domSelection.focusOffset) : 0,
-      format: selection.format,
-      style: selection.style
+      format: selection2.format,
+      style: selection2.style
     };
   });
   return caretSelection;
@@ -1286,6 +1310,7 @@ const DocumentProvider = ({
     activePageId,
     setActivePageId,
     activeEditor: activeEditorRef.current,
+    activeCaretPosition: activeCaretPositionRef.current,
     consumePendingCaretPosition,
     consumePendingFocusAtEnd,
     requestFocusAtEnd,
@@ -1892,6 +1917,36 @@ const HistorySidebar = () => {
     }
   );
 };
+const DEFAULT_TOOLBAR_CONTROL_CONFIG = {
+  visible: true,
+  showLabel: true
+};
+const DEFAULT_TOOLBAR_CONFIG = {
+  history: DEFAULT_TOOLBAR_CONTROL_CONFIG,
+  variables: DEFAULT_TOOLBAR_CONTROL_CONFIG,
+  headerFooter: DEFAULT_TOOLBAR_CONTROL_CONFIG
+};
+const ToolbarConfigContext = React.createContext(DEFAULT_TOOLBAR_CONFIG);
+function resolveControlConfig(config) {
+  return {
+    visible: (config == null ? void 0 : config.visible) ?? true,
+    showLabel: (config == null ? void 0 : config.showLabel) ?? true
+  };
+}
+function normalizeToolbarConfig(config) {
+  return {
+    history: resolveControlConfig(config == null ? void 0 : config.history),
+    variables: resolveControlConfig(config == null ? void 0 : config.variables),
+    headerFooter: resolveControlConfig(config == null ? void 0 : config.headerFooter)
+  };
+}
+const ToolbarConfigProvider = ({ toolbar, children }) => {
+  const resolvedConfig = React.useMemo(() => normalizeToolbarConfig(toolbar), [toolbar]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolbarConfigContext.Provider, { value: resolvedConfig, children });
+};
+function useToolbarConfig() {
+  return React.useContext(ToolbarConfigContext);
+}
 function resolveExtensions(extensions) {
   const resolved = {
     nodes: [],
@@ -1997,9 +2052,9 @@ const SUPPORTED_FONTS = [
 ];
 function applyFontFamily(editor, fontFamily) {
   editor.update(() => {
-    const selection = lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) return;
-    const nodes = selection.getNodes();
+    const selection2 = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection2)) return;
+    const nodes = selection2.getNodes();
     for (const node of nodes) {
       if (lexical.$isTextNode(node)) {
         node.setStyle(`font-family: ${fontFamily}`);
@@ -2024,11 +2079,12 @@ const SUPPORTED_FONT_SIZES = [
   48,
   72
 ];
+const DEFAULT_FONT_SIZE = 12;
 function applyFontSize(editor, size) {
   editor.update(() => {
-    const selection = lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) return;
-    const nodes = selection.getNodes();
+    const selection2 = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection2)) return;
+    const nodes = selection2.getNodes();
     for (const node of nodes) {
       if (lexical.$isTextNode(node)) {
         const existing = node.getStyle();
@@ -2074,9 +2130,366 @@ function indentContent(editor) {
 function outdentContent(editor) {
   editor.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND, void 0);
 }
+function setBlockType(editor, blockType) {
+  editor.update(() => {
+    const selection$1 = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection$1)) {
+      return;
+    }
+    if (blockType === "paragraph") {
+      selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+      return;
+    }
+    selection.$setBlocksType(selection$1, () => richText.$createHeadingNode(blockType));
+  });
+}
+function getActiveBlockType(editor) {
+  let blockType = "paragraph";
+  editor.getEditorState().read(() => {
+    const selection2 = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection2)) {
+      return;
+    }
+    const anchorNode = selection2.anchor.getNode();
+    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+    if (richText.$isHeadingNode(topLevelElement)) {
+      blockType = topLevelElement.getTag();
+    }
+  });
+  return blockType;
+}
+function extractStyleValue(style, property) {
+  const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = style.match(new RegExp(`${escapedProperty}:\\s*([^;]+)`));
+  return match ? match[1].trim().replace(/['"]/g, "") : void 0;
+}
+function mergeStyleDeclaration(existingStyle, property, value) {
+  const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const stripped = existingStyle.replace(
+    new RegExp(`${escapedProperty}:\\s*[^;]+;?\\s*`, "g"),
+    ""
+  ).trim();
+  const declaration = `${property}: ${value}`;
+  return stripped ? `${stripped}; ${declaration}` : declaration;
+}
+function extractFontFamilyFromStyle(style) {
+  return extractStyleValue(style, "font-family");
+}
+function extractFontSizePtFromStyle(style) {
+  const value = extractStyleValue(style, "font-size");
+  if (!value) {
+    return void 0;
+  }
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*pt$/);
+  return match ? parseFloat(match[1]) : void 0;
+}
+function mergeFontFamilyStyle(existingStyle, fontFamily) {
+  return mergeStyleDeclaration(existingStyle, "font-family", fontFamily);
+}
+function mergeFontSizeStyle(existingStyle, size) {
+  return mergeStyleDeclaration(existingStyle, "font-size", `${size}pt`);
+}
+const EMPTY_CONTEXT = {
+  definitions: [],
+  refreshDefinitions: () => {
+  },
+  getDefinition: () => void 0
+};
+const VariableContext = React.createContext(EMPTY_CONTEXT);
+const VariableProvider = ({
+  initialDefinitions = [],
+  children
+}) => {
+  const [definitions, setDefinitions] = React.useState(initialDefinitions);
+  const refresh = React.useCallback((newDefinitions) => {
+    setDefinitions(newDefinitions);
+  }, []);
+  const getDefinition = React.useCallback(
+    (key) => {
+      return definitions.find((d) => d.key === key);
+    },
+    [definitions]
+  );
+  const value = React.useMemo(
+    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
+    [definitions, refresh, getDefinition]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(VariableContext.Provider, { value, children });
+};
+function useVariables() {
+  return React.useContext(VariableContext);
+}
+class VariableNode extends lexical.DecoratorNode {
+  constructor(variableKey, format = 0, style = "", key) {
+    super(key);
+    __publicField(this, "__variableKey");
+    __publicField(this, "__format");
+    __publicField(this, "__style");
+    this.__variableKey = variableKey;
+    this.__format = format;
+    this.__style = style;
+  }
+  static getType() {
+    return "variable-node";
+  }
+  static clone(node) {
+    return new VariableNode(node.__variableKey, node.__format, node.__style, node.__key);
+  }
+  getVariableKey() {
+    return this.getLatest().__variableKey;
+  }
+  getFormat() {
+    return this.getLatest().__format;
+  }
+  setFormat(format) {
+    const writable = this.getWritable();
+    writable.__format = format;
+    return writable;
+  }
+  getStyle() {
+    return this.getLatest().__style;
+  }
+  setStyle(style) {
+    const writable = this.getWritable();
+    writable.__style = style;
+    return writable;
+  }
+  // -- Serialization --
+  static importJSON(serializedNode) {
+    return $createVariableNode(
+      serializedNode.variableKey,
+      serializedNode.format ?? 0,
+      serializedNode.style ?? ""
+    );
+  }
+  exportJSON() {
+    return {
+      type: "variable-node",
+      version: 1,
+      variableKey: this.__variableKey,
+      format: this.__format,
+      style: this.__style
+    };
+  }
+  // -- DOM --
+  createDOM() {
+    const span = document.createElement("span");
+    span.className = "lex4-variable";
+    span.setAttribute("data-variable-key", this.__variableKey);
+    span.setAttribute("data-testid", `variable-${this.__variableKey}`);
+    span.contentEditable = "false";
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const span = document.createElement("span");
+    span.setAttribute("data-variable-key", this.__variableKey);
+    span.textContent = `{{${this.__variableKey}}}`;
+    return { element: span };
+  }
+  static importDOM() {
+    return null;
+  }
+  // -- Behavior --
+  isInline() {
+    return true;
+  }
+  isKeyboardSelectable() {
+    return true;
+  }
+  getTextContent() {
+    return `{{${this.__variableKey}}}`;
+  }
+  // -- Rendering --
+  decorate() {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VariableChip,
+      {
+        nodeKey: this.__key,
+        variableKey: this.__variableKey,
+        format: this.__format,
+        styleValue: this.__style
+      }
+    );
+  }
+}
+function VariableChip({
+  nodeKey,
+  variableKey,
+  format,
+  styleValue
+}) {
+  const { getDefinition } = useVariables();
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isSelected, setSelected, clearOtherSelections] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
+  const def = getDefinition(variableKey);
+  const label = (def == null ? void 0 : def.label) ?? variableKey;
+  const group = def == null ? void 0 : def.group;
+  const style = React.useMemo(() => {
+    const fontFamily = extractFontFamilyFromStyle(styleValue);
+    const fontSize = extractFontSizePtFromStyle(styleValue);
+    return {
+      ...fontFamily ? { fontFamily } : {},
+      ...fontSize ? { fontSize: `${fontSize}pt` } : {}
+    };
+  }, [styleValue]);
+  const className = [
+    "lex4-variable-chip",
+    isSelected && "lex4-variable-chip-selected",
+    format & 1 ? "lex4-text-bold" : "",
+    format & 2 ? "lex4-text-italic" : "",
+    format & 8 ? "lex4-text-underline" : "",
+    format & 4 ? "lex4-text-strikethrough" : ""
+  ].filter(Boolean).join(" ");
+  const handleClick = React.useCallback((event) => {
+    event.preventDefault();
+    if (!event.shiftKey) {
+      clearOtherSelections();
+    }
+    setSelected(!isSelected);
+  }, [clearOtherSelections, isSelected, setSelected]);
+  React.useEffect(() => {
+    const removeSelectedNodes = () => {
+      editor.update(() => {
+        const selection2 = lexical.$getSelection();
+        if (!lexical.$isNodeSelection(selection2)) {
+          const node = lexical.$getNodeByKey(nodeKey);
+          if ($isVariableNode(node)) {
+            node.remove();
+          }
+          return;
+        }
+        for (const node of selection2.getNodes()) {
+          if ($isVariableNode(node)) {
+            node.remove();
+          }
+        }
+      });
+    };
+    const unregisterBackspace = editor.registerCommand(
+      lexical.KEY_BACKSPACE_COMMAND,
+      () => {
+        if (!isSelected) {
+          return false;
+        }
+        removeSelectedNodes();
+        return true;
+      },
+      lexical.COMMAND_PRIORITY_LOW
+    );
+    const unregisterDelete = editor.registerCommand(
+      lexical.KEY_DELETE_COMMAND,
+      () => {
+        if (!isSelected) {
+          return false;
+        }
+        removeSelectedNodes();
+        return true;
+      },
+      lexical.COMMAND_PRIORITY_LOW
+    );
+    return () => {
+      unregisterBackspace();
+      unregisterDelete();
+    };
+  }, [editor, isSelected, nodeKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      "data-testid": `variable-chip-${variableKey}`,
+      "data-variable-group": group,
+      title: variableKey,
+      style,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: handleClick,
+      children: label
+    }
+  );
+}
+function $createVariableNode(variableKey, format = 0, style = "") {
+  return lexical.$applyNodeReplacement(new VariableNode(variableKey, format, style));
+}
+function $isVariableNode(node) {
+  return node instanceof VariableNode;
+}
+const FORMAT_MASKS = {
+  bold: 1,
+  italic: 2,
+  strikethrough: 4,
+  underline: 8
+};
+function withSelectedVariableNodes(editor, updater) {
+  let updated = false;
+  editor.update(() => {
+    const selection2 = lexical.$getSelection();
+    if (!lexical.$isNodeSelection(selection2)) {
+      return;
+    }
+    const nodes = selection2.getNodes().filter($isVariableNode);
+    if (nodes.length === 0) {
+      return;
+    }
+    updater(nodes);
+    updated = true;
+  });
+  return updated;
+}
+function getSelectedVariableNodes(editor) {
+  let nodes = [];
+  editor.getEditorState().read(() => {
+    const selection2 = lexical.$getSelection();
+    if (!lexical.$isNodeSelection(selection2)) {
+      return;
+    }
+    nodes = selection2.getNodes().filter($isVariableNode);
+  });
+  return nodes;
+}
+function toggleSelectedVariableFormat(editor, format) {
+  const mask = FORMAT_MASKS[format];
+  if (!mask) {
+    return false;
+  }
+  return withSelectedVariableNodes(editor, (nodes) => {
+    const shouldEnable = nodes.some((node) => (node.getFormat() & mask) === 0);
+    for (const node of nodes) {
+      const nextFormat = shouldEnable ? node.getFormat() | mask : node.getFormat() & ~mask;
+      node.setFormat(nextFormat);
+    }
+  });
+}
+function applyFontFamilyToSelectedVariables(editor, fontFamily) {
+  return withSelectedVariableNodes(editor, (nodes) => {
+    for (const node of nodes) {
+      node.setStyle(mergeFontFamilyStyle(node.getStyle(), fontFamily));
+    }
+  });
+}
+function applyFontSizeToSelectedVariables(editor, size) {
+  return withSelectedVariableNodes(editor, (nodes) => {
+    for (const node of nodes) {
+      node.setStyle(mergeFontSizeStyle(node.getStyle(), size));
+    }
+  });
+}
+function readSelectedVariableFormatting(editor) {
+  const firstNode = getSelectedVariableNodes(editor)[0];
+  if (!firstNode) {
+    return {};
+  }
+  const style = firstNode.getStyle();
+  return {
+    fontFamily: extractFontFamilyFromStyle(style),
+    fontSize: extractFontSizePtFromStyle(style)
+  };
+}
 const HeaderFooterToggle = ({
   enabled,
-  onToggle
+  onToggle,
+  showLabel = true
 }) => {
   const t = useTranslations();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2086,18 +2499,20 @@ const HeaderFooterToggle = ({
       "data-testid": "header-footer-toggle",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FileText, { size: 14, className: "lex4-hf-toggle-icon" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-toggle-label", children: t.headerFooter.label }),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-toggle-label", children: t.headerFooter.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             role: "switch",
             "aria-checked": enabled,
+            "aria-label": t.headerFooter.label,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => onToggle(!enabled),
             className: "lex4-hf-switch",
             style: { backgroundColor: enabled ? "var(--color-primary)" : "var(--color-muted)" },
             "data-testid": "header-footer-switch",
+            title: t.headerFooter.label,
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-switch-knob" })
           }
         )
@@ -2261,6 +2676,7 @@ const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */
 const MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-divider" });
 const CanvasControls = () => {
   const { document: document2, dispatch, activePageId, runHistoryAction } = useDocument();
+  const toolbarConfig = useToolbarConfig();
   const t = useTranslations();
   const runCanvasAction = React.useCallback((label, callback) => {
     runHistoryAction(
@@ -2327,12 +2743,16 @@ const CanvasControls = () => {
       dispatch({ type: "SET_PAGE_COUNTER_MODE", mode });
     });
   }, [dispatch, runCanvasAction, t.history.actions.pageCounterSet]);
+  if (!toolbarConfig.headerFooter.visible) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group lex4-toolbar-group-gap", "data-testid": "header-footer-controls", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       HeaderFooterToggle,
       {
         enabled: document2.headerFooterEnabled,
-        onToggle: handleToggle
+        onToggle: handleToggle,
+        showLabel: toolbarConfig.headerFooter.showLabel
       }
     ),
     document2.headerFooterEnabled && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2365,7 +2785,17 @@ const Toolbar = () => {
     undo
   } = useDocument();
   const { toolbarItems, toolbarEndItems } = useExtensions();
+  const toolbarConfig = useToolbarConfig();
   const t = useTranslations();
+  const [activeBlockType, setActiveBlockType] = React.useState("paragraph");
+  const [activeFontFamily, setActiveFontFamily] = React.useState("Calibri");
+  const [activeFontSize, setActiveFontSize] = React.useState(DEFAULT_FONT_SIZE);
+  const normalizeFontFamily = React.useCallback((fontFamily) => {
+    if (fontFamily && SUPPORTED_FONTS.includes(fontFamily)) {
+      return fontFamily;
+    }
+    return "Calibri";
+  }, []);
   const withBodySelection = React.useCallback(
     (editor, action) => {
       editor.update(() => {
@@ -2401,27 +2831,91 @@ const Toolbar = () => {
     },
     [runHistoryAction]
   );
+  React.useEffect(() => {
+    if (!activeEditor) {
+      setActiveBlockType("paragraph");
+      setActiveFontFamily("Calibri");
+      setActiveFontSize(DEFAULT_FONT_SIZE);
+      return;
+    }
+    const updateSelectionState = () => {
+      const selectedVariables = getSelectedVariableNodes(activeEditor);
+      if (selectedVariables.length > 0) {
+        const formatting = readSelectedVariableFormatting(activeEditor);
+        setActiveBlockType("paragraph");
+        setActiveFontFamily(normalizeFontFamily(formatting.fontFamily));
+        setActiveFontSize(formatting.fontSize ?? DEFAULT_FONT_SIZE);
+        return;
+      }
+      setActiveBlockType(getActiveBlockType(activeEditor));
+      let nextFontFamily = "Calibri";
+      let nextFontSize = DEFAULT_FONT_SIZE;
+      activeEditor.getEditorState().read(() => {
+        const selection2 = lexical.$getSelection();
+        if (!lexical.$isRangeSelection(selection2)) {
+          return;
+        }
+        const textNode = selection2.getNodes().find(lexical.$isTextNode);
+        if (!textNode) {
+          return;
+        }
+        const style = textNode.getStyle();
+        nextFontFamily = normalizeFontFamily(extractFontFamilyFromStyle(style));
+        nextFontSize = extractFontSizePtFromStyle(style) ?? DEFAULT_FONT_SIZE;
+      });
+      setActiveFontFamily(nextFontFamily);
+      setActiveFontSize(nextFontSize);
+    };
+    updateSelectionState();
+    const unregisterSelectionChange = activeEditor.registerCommand(
+      lexical.SELECTION_CHANGE_COMMAND,
+      () => {
+        updateSelectionState();
+        return false;
+      },
+      lexical.COMMAND_PRIORITY_LOW
+    );
+    const unregisterUpdateListener = activeEditor.registerUpdateListener(() => {
+      updateSelectionState();
+    });
+    return () => {
+      unregisterSelectionChange();
+      unregisterUpdateListener();
+    };
+  }, [activeEditor, normalizeFontFamily]);
   const handleBold = React.useCallback(() => {
     debug("toolbar", `bold (globalSelection=${globalSelectionActive}, editors=${editorRegistry.all().length}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.boldApplied, () => {
+      if (activeEditor && toggleSelectedVariableFormat(activeEditor, "bold")) {
+        return;
+      }
       applyToBodyEditors(toggleBold);
     });
   }, [activeEditor, applyToBodyEditors, editorRegistry, globalSelectionActive, runToolbarAction, t.history.actions.boldApplied]);
   const handleItalic = React.useCallback(() => {
     debug("toolbar", `italic (globalSelection=${globalSelectionActive}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.italicApplied, () => {
+      if (activeEditor && toggleSelectedVariableFormat(activeEditor, "italic")) {
+        return;
+      }
       applyToBodyEditors(toggleItalic);
     });
   }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction, t.history.actions.italicApplied]);
   const handleUnderline = React.useCallback(() => {
     debug("toolbar", `underline (globalSelection=${globalSelectionActive}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.underlineApplied, () => {
+      if (activeEditor && toggleSelectedVariableFormat(activeEditor, "underline")) {
+        return;
+      }
       applyToBodyEditors(toggleUnderline);
     });
   }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction, t.history.actions.underlineApplied]);
   const handleStrikethrough = React.useCallback(() => {
     debug("toolbar", `strikethrough (globalSelection=${globalSelectionActive}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.strikethroughApplied, () => {
+      if (activeEditor && toggleSelectedVariableFormat(activeEditor, "strikethrough")) {
+        return;
+      }
       applyToBodyEditors(toggleStrikethrough);
     });
   }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction, t.history.actions.strikethroughApplied]);
@@ -2467,20 +2961,59 @@ const Toolbar = () => {
   }, [applyToBodyEditors, runToolbarAction, t.history.actions.outdentedContent]);
   const handleFontChange = React.useCallback(
     (e) => {
-      runToolbarAction(interpolate(t.history.actions.fontChanged, { value: e.target.value }), () => {
-        applyToBodyEditors((editor) => applyFontFamily(editor, e.target.value));
+      const fontFamily = e.target.value;
+      runToolbarAction(interpolate(t.history.actions.fontChanged, { value: fontFamily }), () => {
+        if (activeEditor && applyFontFamilyToSelectedVariables(activeEditor, fontFamily)) {
+          return;
+        }
+        applyToBodyEditors((editor) => applyFontFamily(editor, fontFamily));
       });
     },
-    [applyToBodyEditors, runToolbarAction, t.history.actions.fontChanged]
+    [activeEditor, applyToBodyEditors, runToolbarAction, t.history.actions.fontChanged]
   );
   const handleFontSizeChange = React.useCallback(
     (e) => {
       const size = parseInt(e.target.value, 10);
       runToolbarAction(interpolate(t.history.actions.fontSizeChanged, { value: String(size) }), () => {
+        if (activeEditor && applyFontSizeToSelectedVariables(activeEditor, size)) {
+          return;
+        }
         applyToBodyEditors((editor) => applyFontSize(editor, size));
       });
     },
-    [applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
+    [activeEditor, applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
+  );
+  const handleBlockTypeChange = React.useCallback(
+    (e) => {
+      const blockType = e.target.value;
+      const labelMap = {
+        paragraph: t.toolbar.paragraph,
+        h1: t.toolbar.heading1,
+        h2: t.toolbar.heading2,
+        h3: t.toolbar.heading3,
+        h4: t.toolbar.heading4,
+        h5: t.toolbar.heading5,
+        h6: t.toolbar.heading6
+      };
+      runToolbarAction(
+        interpolate(t.history.actions.blockTypeChanged, { value: labelMap[blockType] }),
+        () => {
+          applyToBodyEditors((editor) => setBlockType(editor, blockType));
+        }
+      );
+    },
+    [
+      applyToBodyEditors,
+      runToolbarAction,
+      t.history.actions.blockTypeChanged,
+      t.toolbar.heading1,
+      t.toolbar.heading2,
+      t.toolbar.heading3,
+      t.toolbar.heading4,
+      t.toolbar.heading5,
+      t.toolbar.heading6,
+      t.toolbar.paragraph
+    ]
   );
   const handleToggleHistory = React.useCallback(() => {
     setHistorySidebarOpen(!historySidebarOpen);
@@ -2514,6 +3047,26 @@ const Toolbar = () => {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-toolbar-group-gap lex4-toolbar-group-block", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            className: "lex4-toolbar-select lex4-toolbar-select-block",
+            "data-testid": "block-type-selector",
+            "aria-label": t.toolbar.blockType,
+            value: activeBlockType,
+            onChange: handleBlockTypeChange,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "paragraph", children: t.toolbar.paragraph }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h1", children: t.toolbar.heading1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h2", children: t.toolbar.heading2 }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h3", children: t.toolbar.heading3 }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h4", children: t.toolbar.heading4 }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h5", children: t.toolbar.heading5 }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h6", children: t.toolbar.heading6 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group-gap", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Type, { size: 14, className: "lex4-toolbar-icon" }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2521,7 +3074,7 @@ const Toolbar = () => {
             {
               className: "lex4-toolbar-select",
               "data-testid": "font-selector",
-              defaultValue: "Calibri",
+              value: activeFontFamily,
               onChange: handleFontChange,
               children: SUPPORTED_FONTS.map((font) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: font, style: { fontFamily: font }, children: font }, font))
             }
@@ -2534,7 +3087,7 @@ const Toolbar = () => {
             {
               className: "lex4-toolbar-select lex4-toolbar-select-narrow",
               "data-testid": "font-size-selector",
-              defaultValue: "12",
+              value: String(activeFontSize),
               onChange: handleFontSizeChange,
               children: SUPPORTED_FONT_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
             }
@@ -2569,7 +3122,7 @@ const Toolbar = () => {
         /* @__PURE__ */ jsxRuntime.jsx(CanvasControls, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-end", children: [
           toolbarEndItems.map((EndItem, idx) => /* @__PURE__ */ jsxRuntime.jsx(EndItem, {}, idx)),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          toolbarConfig.history.visible && /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
@@ -2581,7 +3134,7 @@ const Toolbar = () => {
               "aria-label": historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(History, { size: 14 }),
-                "History"
+                toolbarConfig.history.showLabel && t.toolbar.history
               ]
             }
           )
@@ -2925,7 +3478,8 @@ const lexicalTheme = {
     h2: "lex4-heading lex4-heading-h2",
     h3: "lex4-heading lex4-heading-h3",
     h4: "lex4-heading lex4-heading-h4",
-    h5: "lex4-heading lex4-heading-h5"
+    h5: "lex4-heading lex4-heading-h5",
+    h6: "lex4-heading lex4-heading-h6"
   },
   text: {
     bold: "lex4-text-bold",
@@ -4462,12 +5016,10 @@ function decodeFormatBitmask(format) {
   return marks;
 }
 function extractFontFamily(style) {
-  const match = style.match(/font-family:\s*([^;]+)/);
-  return match ? match[1].trim().replace(/['"]/g, "") : void 0;
+  return extractFontFamilyFromStyle(style);
 }
 function extractFontSizePt(style) {
-  const match = style.match(/font-size:\s*(\d+(?:\.\d+)?)\s*pt/);
-  return match ? parseFloat(match[1]) : void 0;
+  return extractFontSizePtFromStyle(style);
 }
 function buildTextMarks(format, style) {
   const formatMarks = decodeFormatBitmask(format);
@@ -4501,9 +5053,11 @@ function mapTextNode(node) {
   };
 }
 function mapVariableNode(node) {
+  const marks = buildTextMarks(node.format ?? 0, node.style);
   return {
     type: "variable",
-    key: node.variableKey
+    key: node.variableKey,
+    ...marks ? { marks } : {}
   };
 }
 function mapLineBreak() {
@@ -4567,7 +5121,7 @@ function mapParagraph(node) {
 function mapHeading(node) {
   var _a;
   const alignment = decodeAlignment(node.format);
-  const tagMatch = (_a = node.tag) == null ? void 0 : _a.match(/^h(\d)$/);
+  const tagMatch = (_a = node.tag) == null ? void 0 : _a.match(/^h([1-6])$/);
   const level = tagMatch ? parseInt(tagMatch[1], 10) : 1;
   return {
     type: "heading",
@@ -4692,6 +5246,105 @@ function buildSavePayload(ast, options) {
 function serializeDocumentJson(ast) {
   return JSON.stringify(ast, null, 2);
 }
+function appendChildren(parent, children = []) {
+  const nodes = children.map(buildLexicalNode).filter((node) => node !== null);
+  if (nodes.length > 0) {
+    parent.append(...nodes);
+  }
+}
+function applyElementFormatting(node, serializedNode) {
+  if (typeof serializedNode.format === "string" && ["left", "center", "right", "justify"].includes(serializedNode.format) && node.setFormat) {
+    node.setFormat(serializedNode.format);
+  }
+  if (typeof serializedNode.indent === "number" && serializedNode.indent > 0 && node.setIndent) {
+    node.setIndent(serializedNode.indent);
+  }
+}
+function buildLexicalNode(serializedNode) {
+  switch (serializedNode.type) {
+    case "paragraph": {
+      const node = lexical.$createParagraphNode();
+      applyElementFormatting(node, serializedNode);
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
+    case "heading": {
+      const tag = typeof serializedNode.tag === "string" && /^h[1-6]$/.test(serializedNode.tag) ? serializedNode.tag : "h1";
+      const node = richText.$createHeadingNode(tag);
+      applyElementFormatting(node, serializedNode);
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
+    case "quote": {
+      const node = richText.$createQuoteNode();
+      applyElementFormatting(node, serializedNode);
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
+    case "list": {
+      const listType = serializedNode.listType === "number" ? "number" : "bullet";
+      const node = list.$createListNode(listType, typeof serializedNode.start === "number" ? serializedNode.start : 1);
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
+    case "listitem": {
+      const node = list.$createListItemNode();
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
+    case "text": {
+      const node = lexical.$createTextNode(serializedNode.text ?? "");
+      if (typeof serializedNode.format === "number" && serializedNode.format > 0) {
+        node.setFormat(serializedNode.format);
+      }
+      if (typeof serializedNode.style === "string" && serializedNode.style.trim() !== "") {
+        node.setStyle(serializedNode.style);
+      }
+      return node;
+    }
+    case "linebreak":
+      return lexical.$createLineBreakNode();
+    case "variable-node":
+      return $createVariableNode(
+        serializedNode.variableKey ?? "",
+        typeof serializedNode.format === "number" ? serializedNode.format : 0,
+        typeof serializedNode.style === "string" ? serializedNode.style : ""
+      );
+    default:
+      return null;
+  }
+}
+function getBodyChildren(pageState) {
+  const root = pageState == null ? void 0 : pageState.root;
+  return (root == null ? void 0 : root.children) ?? [];
+}
+function insertDocumentContent(editor, document2) {
+  let inserted = false;
+  editor.update(() => {
+    const nodes = document2.pages.flatMap((page) => getBodyChildren(page.bodyState)).map(buildLexicalNode).filter((node) => node !== null);
+    if (nodes.length === 0) {
+      return;
+    }
+    const selection2 = lexical.$getSelection();
+    if (lexical.$isRangeSelection(selection2)) {
+      if (selection2.isCollapsed()) {
+        selection2.insertParagraph();
+      }
+      const nextSelection = lexical.$getSelection();
+      if (lexical.$isRangeSelection(nextSelection) || lexical.$isNodeSelection(nextSelection)) {
+        nextSelection.insertNodes(nodes);
+      } else {
+        lexical.$insertNodes(nodes);
+      }
+    } else if (lexical.$isNodeSelection(selection2)) {
+      selection2.insertNodes(nodes);
+    } else {
+      lexical.$insertNodes(nodes);
+    }
+    inserted = true;
+  });
+  return inserted;
+}
 function selectEntireDocument(rootElement, selectionBuffer) {
   if (!rootElement || !selectionBuffer) {
     return;
@@ -4898,10 +5551,13 @@ const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, on
   const {
     document: doc,
     activeEditor,
+    activeCaretPosition,
     historySidebarOpen,
+    runHistoryAction,
     setHistorySidebarOpen
   } = useDocument();
   const { handleFactories } = useExtensions();
+  const t = useTranslations();
   const getDocument = React.useCallback(() => doc, [doc]);
   const getActiveEditor = React.useCallback(() => activeEditor, [activeEditor]);
   const extensionCtx = useExtensionContext(getDocument, getActiveEditor);
@@ -4912,6 +5568,23 @@ const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, on
       },
       toggleHistorySidebar: () => {
         setHistorySidebarOpen(!historySidebarOpen);
+      },
+      insertDocumentContent: (documentToInsert) => {
+        if (!activeEditor || (activeCaretPosition == null ? void 0 : activeCaretPosition.region) !== "body") {
+          return false;
+        }
+        let inserted = false;
+        runHistoryAction(
+          {
+            label: t.history.actions.insertedDocumentContent,
+            source: "toolbar",
+            region: "document"
+          },
+          () => {
+            inserted = insertDocumentContent(activeEditor, documentToInsert);
+          }
+        );
+        return inserted;
       }
     };
     for (const factory of handleFactories) {
@@ -4919,7 +5592,16 @@ const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, on
       Object.assign(handle, methods);
     }
     return handle;
-  }, [extensionCtx, handleFactories, historySidebarOpen, setHistorySidebarOpen]);
+  }, [
+    activeCaretPosition == null ? void 0 : activeCaretPosition.region,
+    activeEditor,
+    extensionCtx,
+    handleFactories,
+    historySidebarOpen,
+    runHistoryAction,
+    setHistorySidebarOpen,
+    t.history.actions.insertedDocumentContent
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     EditorChrome,
     {
@@ -4937,9 +5619,10 @@ const Lex4Editor = React.forwardRef(({
   onSave,
   extensions,
   translations,
+  toolbar,
   className
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsxRuntime.jsx(ExtensionStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ExtensionProvider, { extensions, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarConfigProvider, { toolbar, children: /* @__PURE__ */ jsxRuntime.jsx(ExtensionStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ExtensionProvider, { extensions, children: /* @__PURE__ */ jsxRuntime.jsx(
     DocumentProvider,
     {
       initialDocument,
@@ -4954,7 +5637,7 @@ const Lex4Editor = React.forwardRef(({
         }
       )
     }
-  ) }) }) });
+  ) }) }) }) });
 });
 Lex4Editor.displayName = "Lex4Editor";
 function useOverflowDetection(bodyHeight, onOverflow, debounceMs = 100) {
@@ -5048,120 +5731,6 @@ function astExtension() {
     }
   };
 }
-const EMPTY_CONTEXT = {
-  definitions: [],
-  refreshDefinitions: () => {
-  },
-  getDefinition: () => void 0
-};
-const VariableContext = React.createContext(EMPTY_CONTEXT);
-const VariableProvider = ({
-  initialDefinitions = [],
-  children
-}) => {
-  const [definitions, setDefinitions] = React.useState(initialDefinitions);
-  const refresh = React.useCallback((newDefinitions) => {
-    setDefinitions(newDefinitions);
-  }, []);
-  const getDefinition = React.useCallback(
-    (key) => {
-      return definitions.find((d) => d.key === key);
-    },
-    [definitions]
-  );
-  const value = React.useMemo(
-    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
-    [definitions, refresh, getDefinition]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(VariableContext.Provider, { value, children });
-};
-function useVariables() {
-  return React.useContext(VariableContext);
-}
-class VariableNode extends lexical.DecoratorNode {
-  constructor(variableKey, key) {
-    super(key);
-    __publicField(this, "__variableKey");
-    this.__variableKey = variableKey;
-  }
-  static getType() {
-    return "variable-node";
-  }
-  static clone(node) {
-    return new VariableNode(node.__variableKey, node.__key);
-  }
-  getVariableKey() {
-    return this.__variableKey;
-  }
-  // -- Serialization --
-  static importJSON(serializedNode) {
-    return $createVariableNode(serializedNode.variableKey);
-  }
-  exportJSON() {
-    return {
-      type: "variable-node",
-      version: 1,
-      variableKey: this.__variableKey
-    };
-  }
-  // -- DOM --
-  createDOM() {
-    const span = document.createElement("span");
-    span.className = "lex4-variable";
-    span.setAttribute("data-variable-key", this.__variableKey);
-    span.setAttribute("data-testid", `variable-${this.__variableKey}`);
-    span.contentEditable = "false";
-    return span;
-  }
-  updateDOM() {
-    return false;
-  }
-  exportDOM() {
-    const span = document.createElement("span");
-    span.setAttribute("data-variable-key", this.__variableKey);
-    span.textContent = `{{${this.__variableKey}}}`;
-    return { element: span };
-  }
-  static importDOM() {
-    return null;
-  }
-  // -- Behavior --
-  isInline() {
-    return true;
-  }
-  isKeyboardSelectable() {
-    return true;
-  }
-  getTextContent() {
-    return `{{${this.__variableKey}}}`;
-  }
-  // -- Rendering --
-  decorate() {
-    return /* @__PURE__ */ jsxRuntime.jsx(VariableChip, { variableKey: this.__variableKey });
-  }
-}
-function VariableChip({ variableKey }) {
-  const { getDefinition } = useVariables();
-  const def = getDefinition(variableKey);
-  const label = (def == null ? void 0 : def.label) ?? variableKey;
-  const group = def == null ? void 0 : def.group;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: "lex4-variable-chip",
-      "data-testid": `variable-chip-${variableKey}`,
-      "data-variable-group": group,
-      title: variableKey,
-      children: label
-    }
-  );
-}
-function $createVariableNode(variableKey) {
-  return lexical.$applyNodeReplacement(new VariableNode(variableKey));
-}
-function $isVariableNode(node) {
-  return node instanceof VariableNode;
-}
 const INSERT_VARIABLE_COMMAND = lexical.createCommand("INSERT_VARIABLE");
 const VariablePlugin = () => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -5170,8 +5739,8 @@ const VariablePlugin = () => {
       INSERT_VARIABLE_COMMAND,
       (variableKey) => {
         editor.update(() => {
-          const selection = lexical.$getSelection();
-          if (!lexical.$isRangeSelection(selection)) return;
+          const selection2 = lexical.$getSelection();
+          if (!lexical.$isRangeSelection(selection2)) return;
           const variableNode = $createVariableNode(variableKey);
           lexical.$insertNodes([variableNode]);
         });
@@ -5422,7 +5991,11 @@ const VariablePanelStateProvider = ({ children }) => {
 };
 const VariableToolbarToggle = () => {
   const { panelOpen, setPanelOpen } = useVariablePanelState();
+  const toolbarConfig = useToolbarConfig();
   const t = useTranslations();
+  if (!toolbarConfig.variables.visible) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -5435,7 +6008,7 @@ const VariableToolbarToggle = () => {
       "aria-label": panelOpen ? t.variables.closePanel : t.variables.openPanel,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Braces, { size: 14 }),
-        t.variables.title
+        toolbarConfig.variables.showLabel && t.variables.title
       ]
     }
   );