@yurikilian/lex4 1.6.0 → 1.7.0

package/dist/lex4-editor.cjs

@@ -779,6 +779,115 @@ const TranslationsProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TranslationsContext.Provider, { value: merged, children });
 };
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
+  );
+  React.useDebugValue(slice);
+  return slice;
+}
+const SUPPORTED_FONT_SIZES = [
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  16,
+  18,
+  20,
+  24,
+  28,
+  32,
+  36,
+  48,
+  72
+];
+const DEFAULT_FONT_SIZE = 12;
+function applyFontSize(editor, size) {
+  editor.update(() => {
+    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();
+        const updated = mergeFontSize(existing, size);
+        node.setStyle(updated);
+      }
+    }
+  });
+}
+function mergeFontSize(existingStyle, size) {
+  const stripped = existingStyle.replace(/font-size:\s*[^;]+;?\s*/g, "").trim();
+  const sizeDecl = `font-size: ${size}pt`;
+  return stripped ? `${stripped}; ${sizeDecl}` : sizeDecl;
+}
+const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
+  blockType: "paragraph",
+  fontFamily: "Calibri",
+  fontSize: DEFAULT_FONT_SIZE,
+  alignment: "left",
+  isBold: false,
+  isItalic: false,
+  isUnderline: false,
+  isStrikethrough: false,
+  hasSelectedVariable: false
+};
+function createToolbarStyleStore(initialSnapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT) {
+  return createStore((set) => ({
+    ...initialSnapshot,
+    setSnapshot: (snapshot) => set(snapshot),
+    reset: () => set(DEFAULT_TOOLBAR_STYLE_SNAPSHOT)
+  }));
+}
+const ToolbarStyleStoreContext = React.createContext(null);
+const ToolbarStyleStoreProvider = ({ children }) => {
+  const storeRef = React.useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = createToolbarStyleStore();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolbarStyleStoreContext.Provider, { value: storeRef.current, children });
+};
+function useToolbarStyleStore(selector) {
+  const store = React.useContext(ToolbarStyleStoreContext);
+  if (!store) {
+    throw new Error("useToolbarStyleStore must be used within a ToolbarStyleStoreProvider");
+  }
+  return useStore(store, selector);
+}
+function useToolbarStyleStoreApi() {
+  const store = React.useContext(ToolbarStyleStoreContext);
+  if (!store) {
+    throw new Error("useToolbarStyleStoreApi must be used within a ToolbarStyleStoreProvider");
+  }
+  return store;
+}
 const HISTORY_RESTORE_SUPPRESSION_MS = 100;
 const HISTORY_BATCH_FLUSH_MS = 16;
 function cloneDocumentSnapshot(document2) {
@@ -1335,7 +1444,7 @@ const DocumentProvider = ({
     undo,
     redo,
     editorRegistry
-  }, children });
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarStyleStoreProvider, { children }) });
 };
 /**
  * @license lucide-react v1.8.0 - ISC
@@ -2083,43 +2192,6 @@ function applyFontFamily(editor, fontFamily) {
     }
   });
 }
-const SUPPORTED_FONT_SIZES = [
-  8,
-  9,
-  10,
-  11,
-  12,
-  14,
-  16,
-  18,
-  20,
-  24,
-  28,
-  32,
-  36,
-  48,
-  72
-];
-const DEFAULT_FONT_SIZE = 12;
-function applyFontSize(editor, size) {
-  editor.update(() => {
-    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();
-        const updated = mergeFontSize(existing, size);
-        node.setStyle(updated);
-      }
-    }
-  });
-}
-function mergeFontSize(existingStyle, size) {
-  const stripped = existingStyle.replace(/font-size:\s*[^;]+;?\s*/g, "").trim();
-  const sizeDecl = `font-size: ${size}pt`;
-  return stripped ? `${stripped}; ${sizeDecl}` : sizeDecl;
-}
 function toggleFormat(editor, format) {
   editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, format);
 }
@@ -2151,48 +2223,77 @@ 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));
-  });
+const INLINE_BLOCK_STYLE_PROPERTY = "--lex4-block-type";
+const INLINE_BLOCK_STYLE_PRESETS = {
+  paragraph: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "paragraph",
+    "font-size": "12pt",
+    "font-weight": "400"
+  },
+  h1: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "h1",
+    "font-size": "22.5pt",
+    "font-weight": "700"
+  },
+  h2: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "h2",
+    "font-size": "18pt",
+    "font-weight": "700"
+  },
+  h3: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "h3",
+    "font-size": "15pt",
+    "font-weight": "600"
+  },
+  h4: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "h4",
+    "font-size": "13.5pt",
+    "font-weight": "600"
+  },
+  h5: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "h5",
+    "font-size": "12pt",
+    "font-weight": "500"
+  },
+  h6: {
+    [INLINE_BLOCK_STYLE_PROPERTY]: "h6",
+    "font-size": "11.25pt",
+    "font-weight": "500"
+  }
+};
+function escapeStyleProperty(property) {
+  const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return escapedProperty;
 }
-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 stripStyleDeclaration(existingStyle, property) {
+  const escapedProperty = escapeStyleProperty(property);
+  return existingStyle.replace(
+    new RegExp(`${escapedProperty}:\\s*[^;]+;?\\s*`, "g"),
+    ""
+  ).trim();
+}
+function isSupportedInlineBlockType(value) {
+  return value === "paragraph" || value === "h1" || value === "h2" || value === "h3" || value === "h4" || value === "h5" || value === "h6";
 }
 function extractStyleValue(style, property) {
-  const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const escapedProperty = escapeStyleProperty(property);
   const match = style.match(new RegExp(`${escapedProperty}:\\s*([^;]+)`));
   return match ? match[1].trim().replace(/['"]/g, "") : void 0;
 }
+function removeStyleDeclaration(existingStyle, property) {
+  return stripStyleDeclaration(existingStyle, property);
+}
 function mergeStyleDeclaration(existingStyle, property, value) {
-  const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const stripped = existingStyle.replace(
-    new RegExp(`${escapedProperty}:\\s*[^;]+;?\\s*`, "g"),
-    ""
-  ).trim();
+  const stripped = stripStyleDeclaration(existingStyle, property);
   const declaration = `${property}: ${value}`;
   return stripped ? `${stripped}; ${declaration}` : declaration;
 }
+function mergeStyleDeclarations(existingStyle, declarations) {
+  return Object.entries(declarations).reduce(
+    (style, [property, value]) => mergeStyleDeclaration(style, property, value),
+    existingStyle
+  );
+}
 function extractFontFamilyFromStyle(style) {
   return extractStyleValue(style, "font-family");
 }
@@ -2210,6 +2311,21 @@ function mergeFontFamilyStyle(existingStyle, fontFamily) {
 function mergeFontSizeStyle(existingStyle, size) {
   return mergeStyleDeclaration(existingStyle, "font-size", `${size}pt`);
 }
+function extractInlineBlockTypeFromStyle(style) {
+  const value = extractStyleValue(style, INLINE_BLOCK_STYLE_PROPERTY);
+  return isSupportedInlineBlockType(value) ? value : void 0;
+}
+function createInlineBlockTypeStylePatch(blockType) {
+  return INLINE_BLOCK_STYLE_PRESETS[blockType];
+}
+function mergeInlineBlockTypeStyle(existingStyle, blockType) {
+  const baseStyle = [
+    INLINE_BLOCK_STYLE_PROPERTY,
+    "font-size",
+    "font-weight"
+  ].reduce((style, property) => removeStyleDeclaration(style, property), existingStyle);
+  return mergeStyleDeclarations(baseStyle, createInlineBlockTypeStylePatch(blockType));
+}
 const EMPTY_CONTEXT = {
   definitions: [],
   refreshDefinitions: () => {
@@ -2351,9 +2467,11 @@ function VariableChip({
   const style = React.useMemo(() => {
     const fontFamily = extractFontFamilyFromStyle(styleValue);
     const fontSize = extractFontSizePtFromStyle(styleValue);
+    const fontWeight = extractStyleValue(styleValue, "font-weight");
     return {
       ...fontFamily ? { fontFamily } : {},
-      ...fontSize ? { fontSize: `${fontSize}pt` } : {}
+      ...fontSize ? { fontSize: `${fontSize}pt` } : {},
+      ...fontWeight ? { fontWeight } : {}
     };
   }, [styleValue]);
   const className = [
@@ -2470,7 +2588,126 @@ function $createVariableNode(variableKey, format = 0, style = "") {
 function $isVariableNode(node) {
   return node instanceof VariableNode;
 }
-const FORMAT_MASKS = {
+function getElementBlockType$1(element) {
+  if (richText.$isHeadingNode(element)) {
+    return element.getTag();
+  }
+  return "paragraph";
+}
+function getVariableTopLevelElement(variable) {
+  const topLevelElement = variable.getTopLevelElementOrThrow();
+  return lexical.$isElementNode(topLevelElement) ? topLevelElement : null;
+}
+function replaceTopLevelBlockType(element, blockType) {
+  const currentType = getElementBlockType$1(element);
+  if (currentType === blockType) {
+    return;
+  }
+  const nextElement = blockType === "paragraph" ? lexical.$createParagraphNode() : richText.$createHeadingNode(blockType);
+  nextElement.setFormat(element.getFormatType());
+  nextElement.setIndent(element.getIndent());
+  const children = element.getChildren();
+  for (const child of children) {
+    nextElement.append(child);
+  }
+  element.replace(nextElement);
+}
+function isPartialSingleBlockSelection(selection2) {
+  if (selection2.isCollapsed()) {
+    return false;
+  }
+  const anchorTopLevel = selection2.anchor.getNode().getTopLevelElementOrThrow();
+  const focusTopLevel = selection2.focus.getNode().getTopLevelElementOrThrow();
+  if (!anchorTopLevel.is(focusTopLevel)) {
+    return false;
+  }
+  const selectedText = selection2.getTextContent().trim();
+  const blockText = anchorTopLevel.getTextContent().trim();
+  return selectedText.length > 0 && selectedText.length < blockText.length;
+}
+function applySemanticBlockType(selection$1, blockType) {
+  if (blockType === "paragraph") {
+    selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+    return;
+  }
+  selection.$setBlocksType(selection$1, () => richText.$createHeadingNode(blockType));
+}
+function selectedVariablesOccupyEntireBlock(variables, topLevelElement) {
+  const selectedKeys = new Set(variables.map((variable) => variable.getKey()));
+  const meaningfulChildren = topLevelElement.getChildren().filter(
+    (child) => !(lexical.$isTextNode(child) && child.getTextContent().trim() === "")
+  );
+  if (meaningfulChildren.length === 0) {
+    return false;
+  }
+  return meaningfulChildren.every(
+    (child) => $isVariableNode(child) && selectedKeys.has(child.getKey())
+  );
+}
+function getStandaloneVariableChildren(topLevelElement) {
+  const meaningfulChildren = topLevelElement.getChildren().filter(
+    (child) => !(lexical.$isTextNode(child) && child.getTextContent().trim() === "")
+  );
+  if (meaningfulChildren.length === 0 || !meaningfulChildren.every($isVariableNode)) {
+    return null;
+  }
+  return meaningfulChildren;
+}
+function setBlockType(editor, blockType) {
+  editor.update(() => {
+    const currentSelection = lexical.$getSelection();
+    const selection$1 = lexical.$isNodeSelection(currentSelection) ? currentSelection : lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
+    if (lexical.$isRangeSelection(selection$1)) {
+      lexical.$setSelection(selection$1);
+    }
+    if (lexical.$isNodeSelection(selection$1)) {
+      const variables = selection$1.getNodes().filter($isVariableNode);
+      if (variables.length === 0) {
+        return;
+      }
+      const firstTopLevelElement = getVariableTopLevelElement(variables[0]);
+      if (!firstTopLevelElement) {
+        return;
+      }
+      const sameTopLevelElement = variables.every(
+        (variable) => {
+          var _a;
+          return ((_a = getVariableTopLevelElement(variable)) == null ? void 0 : _a.is(firstTopLevelElement)) ?? false;
+        }
+      );
+      if (sameTopLevelElement && selectedVariablesOccupyEntireBlock(variables, firstTopLevelElement)) {
+        for (const variable of variables) {
+          variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+        }
+        replaceTopLevelBlockType(firstTopLevelElement, blockType);
+        const nextSelection = lexical.$createNodeSelection();
+        for (const variable of variables) {
+          nextSelection.add(variable.getKey());
+        }
+        lexical.$setSelection(nextSelection);
+        return;
+      }
+      for (const variable of variables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
+      return;
+    }
+    if (!lexical.$isRangeSelection(selection$1)) {
+      return;
+    }
+    const anchorTopLevel = selection$1.anchor.getNode().getTopLevelElementOrThrow();
+    const standaloneVariables = lexical.$isElementNode(anchorTopLevel) ? getStandaloneVariableChildren(anchorTopLevel) : null;
+    if (isPartialSingleBlockSelection(selection$1)) {
+      selection.$patchStyleText(selection$1, createInlineBlockTypeStylePatch(blockType));
+      return;
+    }
+    for (const variable of standaloneVariables ?? []) {
+      variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+    }
+    applySemanticBlockType(selection$1, blockType);
+  });
+}
+const FORMAT_MASKS$1 = {
   bold: 1,
   italic: 2,
   strikethrough: 4,
@@ -2492,19 +2729,8 @@ function withSelectedVariableNodes(editor, updater) {
   });
   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];
+  const mask = FORMAT_MASKS$1[format];
   if (!mask) {
     return false;
   }
@@ -2530,25 +2756,6 @@ function applyFontSizeToSelectedVariables(editor, size) {
     }
   });
 }
-function readSelectedVariableFormatting(editor) {
-  let formatting = {};
-  editor.getEditorState().read(() => {
-    const selection2 = lexical.$getSelection();
-    if (!lexical.$isNodeSelection(selection2)) {
-      return;
-    }
-    const firstNode = selection2.getNodes().filter($isVariableNode)[0];
-    if (!firstNode) {
-      return;
-    }
-    const style = firstNode.getStyle();
-    formatting = {
-      fontFamily: extractFontFamilyFromStyle(style),
-      fontSize: extractFontSizePtFromStyle(style)
-    };
-  });
-  return formatting;
-}
 const BLOCK_TYPE_OPTIONS = [
   { value: "paragraph", shortLabel: "P" },
   { value: "h1", shortLabel: "H1" },
@@ -2964,6 +3171,108 @@ const CanvasControls = () => {
     )
   ] });
 };
+const FORMAT_MASKS = {
+  bold: 1,
+  italic: 2,
+  strikethrough: 4,
+  underline: 8
+};
+function normalizeFontFamily(fontFamily) {
+  if (fontFamily && SUPPORTED_FONTS.includes(fontFamily)) {
+    return fontFamily;
+  }
+  return "Calibri";
+}
+function normalizeAlignment(alignment) {
+  if (alignment === "center" || alignment === "right" || alignment === "justify") {
+    return alignment;
+  }
+  return "left";
+}
+function getElementBlockType(node) {
+  const topLevelElement = node.getTopLevelElementOrThrow();
+  if (richText.$isHeadingNode(topLevelElement)) {
+    return topLevelElement.getTag();
+  }
+  return "paragraph";
+}
+function getElementAlignment(node) {
+  const topLevelElement = node.getTopLevelElementOrThrow();
+  if (lexical.$isElementNode(topLevelElement)) {
+    return normalizeAlignment(topLevelElement.getFormatType());
+  }
+  return "left";
+}
+function getInlineStyleTarget(nodes, anchorNode) {
+  if (lexical.$isTextNode(anchorNode) || $isVariableNode(anchorNode)) {
+    return anchorNode;
+  }
+  return nodes.find((node) => lexical.$isTextNode(node) || $isVariableNode(node)) ?? null;
+}
+function getInlineStyleFromNode(node) {
+  if (lexical.$isTextNode(node) || $isVariableNode(node)) {
+    return node.getStyle();
+  }
+  return "";
+}
+function hasInlineFormat(node, format) {
+  if ($isVariableNode(node)) {
+    return (node.getFormat() & FORMAT_MASKS[format]) !== 0;
+  }
+  if (lexical.$isTextNode(node) && "hasFormat" in node && typeof node.hasFormat === "function") {
+    return node.hasFormat(format);
+  }
+  if (lexical.$isTextNode(node) && "getFormat" in node && typeof node.getFormat === "function") {
+    return (node.getFormat() & FORMAT_MASKS[format]) !== 0;
+  }
+  return false;
+}
+function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState()) {
+  let snapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT;
+  editorState.read(() => {
+    const currentSelection = lexical.$getSelection();
+    const selection2 = lexical.$isNodeSelection(currentSelection) ? currentSelection : lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
+    if (lexical.$isNodeSelection(selection2)) {
+      const variableNodes = selection2.getNodes().filter($isVariableNode);
+      if (variableNodes.length === 0) {
+        return;
+      }
+      const firstVariableNode = variableNodes[0];
+      const style2 = firstVariableNode.getStyle();
+      snapshot = {
+        blockType: extractInlineBlockTypeFromStyle(style2) ?? getElementBlockType(firstVariableNode),
+        fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style2)),
+        fontSize: extractFontSizePtFromStyle(style2) ?? DEFAULT_FONT_SIZE,
+        alignment: getElementAlignment(firstVariableNode),
+        isBold: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.bold) !== 0),
+        isItalic: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.italic) !== 0),
+        isUnderline: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.underline) !== 0),
+        isStrikethrough: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.strikethrough) !== 0),
+        hasSelectedVariable: true
+      };
+      return;
+    }
+    if (!lexical.$isRangeSelection(selection2)) {
+      return;
+    }
+    const anchorNode = selection2.anchor.getNode();
+    const inlineStyleTarget = getInlineStyleTarget(selection2.getNodes(), anchorNode);
+    const style = selection2.style || getInlineStyleFromNode(inlineStyleTarget);
+    const isCollapsed = selection2.isCollapsed();
+    snapshot = {
+      blockType: extractInlineBlockTypeFromStyle(style) ?? getElementBlockType(anchorNode),
+      fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style)),
+      fontSize: extractFontSizePtFromStyle(style) ?? DEFAULT_FONT_SIZE,
+      alignment: getElementAlignment(anchorNode),
+      isBold: selection2.hasFormat("bold") || isCollapsed && hasInlineFormat(inlineStyleTarget, "bold"),
+      isItalic: selection2.hasFormat("italic") || isCollapsed && hasInlineFormat(inlineStyleTarget, "italic"),
+      isUnderline: selection2.hasFormat("underline") || isCollapsed && hasInlineFormat(inlineStyleTarget, "underline"),
+      isStrikethrough: selection2.hasFormat("strikethrough") || isCollapsed && hasInlineFormat(inlineStyleTarget, "strikethrough"),
+      hasSelectedVariable: false
+    };
+  });
+  return snapshot;
+}
 const Toolbar = () => {
   const {
     activeEditor,
@@ -2980,15 +3289,15 @@ const Toolbar = () => {
   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 toolbarStyleStore = useToolbarStyleStoreApi();
+  const activeBlockType = useToolbarStyleStore((state) => state.blockType);
+  const activeFontFamily = useToolbarStyleStore((state) => state.fontFamily);
+  const activeFontSize = useToolbarStyleStore((state) => state.fontSize);
+  const activeAlignment = useToolbarStyleStore((state) => state.alignment);
+  const isBoldActive = useToolbarStyleStore((state) => state.isBold);
+  const isItalicActive = useToolbarStyleStore((state) => state.isItalic);
+  const isUnderlineActive = useToolbarStyleStore((state) => state.isUnderline);
+  const isStrikethroughActive = useToolbarStyleStore((state) => state.isStrikethrough);
   const withBodySelection = React.useCallback(
     (editor, action) => {
       editor.update(() => {
@@ -3026,38 +3335,11 @@ const Toolbar = () => {
   );
   React.useEffect(() => {
     if (!activeEditor) {
-      setActiveBlockType("paragraph");
-      setActiveFontFamily("Calibri");
-      setActiveFontSize(DEFAULT_FONT_SIZE);
+      toolbarStyleStore.getState().reset();
       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);
+    const updateSelectionState = (editorState = activeEditor.getEditorState()) => {
+      toolbarStyleStore.getState().setSnapshot(readToolbarStyleSnapshot(activeEditor, editorState));
     };
     updateSelectionState();
     const unregisterSelectionChange = activeEditor.registerCommand(
@@ -3068,14 +3350,14 @@ const Toolbar = () => {
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-    const unregisterUpdateListener = activeEditor.registerUpdateListener(() => {
-      updateSelectionState();
+    const unregisterUpdateListener = activeEditor.registerUpdateListener(({ editorState }) => {
+      updateSelectionState(editorState);
     });
     return () => {
       unregisterSelectionChange();
       unregisterUpdateListener();
     };
-  }, [activeEditor, normalizeFontFamily]);
+  }, [activeEditor, toolbarStyleStore]);
   const handleBold = React.useCallback(() => {
     debug("toolbar", `bold (globalSelection=${globalSelectionActive}, editors=${editorRegistry.all().length}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.boldApplied, () => {
@@ -3260,17 +3542,17 @@ const Toolbar = () => {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "format-group", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsxRuntime.jsx(Bold, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsxRuntime.jsx(Italic, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsxRuntime.jsx(Underline, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough, { size: 15 }) })
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", active: isBoldActive, onClick: handleBold, children: /* @__PURE__ */ jsxRuntime.jsx(Bold, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", active: isItalicActive, onClick: handleItalic, children: /* @__PURE__ */ jsxRuntime.jsx(Italic, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", active: isUnderlineActive, onClick: handleUnderline, children: /* @__PURE__ */ jsxRuntime.jsx(Underline, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", active: isStrikethroughActive, onClick: handleStrikethrough, children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "align-group", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignStart, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignCenter, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignEnd, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignJustify, { size: 15 }) })
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", active: activeAlignment === "left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignStart, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", active: activeAlignment === "center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignCenter, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", active: activeAlignment === "right", onClick: handleAlignRight, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignEnd, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", active: activeAlignment === "justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignJustify, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
@@ -3321,6 +3603,7 @@ const ToolbarIconButton = ({
     type: "button",
     title,
     "aria-label": title,
+    "aria-pressed": active,
     disabled,
     onMouseDown: (e) => e.preventDefault(),
     onClick,