@yurikilian/lex4 1.6.0 → 1.8.0

package/dist/lex4-editor.js

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo, useReducer, useState, useRef, useCallback, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
-import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $createParagraphNode, $applyNodeReplacement, DecoratorNode, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DELETE_COMMAND, KEY_DOWN_COMMAND, $isNodeSelection, $getNodeByKey, $selectAll, SELECTION_CHANGE_COMMAND, KEY_TAB_COMMAND, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, $splitNode, $getNearestNodeFromDOMNode, CONTROLLED_TEXT_INSERTION_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $insertNodes, $createLineBreakNode, $createTextNode, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
+import React, { createContext, useContext, useMemo, useRef, useReducer, useState, useCallback, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
+import { $getSelection, $isRangeSelection, $isTextNode, $getRoot, $createRangeSelectionFromDom, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $applyNodeReplacement, DecoratorNode, $createNodeSelection, $isNodeSelection, $setSelection, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DELETE_COMMAND, KEY_DOWN_COMMAND, $getNodeByKey, $isElementNode, $createParagraphNode, $selectAll, SELECTION_CHANGE_COMMAND, KEY_TAB_COMMAND, $isParagraphNode, FOCUS_COMMAND, $splitNode, $getNearestNodeFromDOMNode, CONTROLLED_TEXT_INSERTION_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $insertNodes, $createLineBreakNode, $createTextNode, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode, $isListNode, $createListItemNode, $createListNode } from "@lexical/list";
-import { $setBlocksType } from "@lexical/selection";
+import { $patchStyleText, $setBlocksType } from "@lexical/selection";
 import { $createHeadingNode, $isHeadingNode, HeadingNode, QuoteNode, $createQuoteNode } from "@lexical/rich-text";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -777,6 +777,115 @@ const TranslationsProvider = ({
   );
   return /* @__PURE__ */ 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 selection = $getSelection();
+    if (!$isRangeSelection(selection)) return;
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      if ($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: "Inter",
+  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 = createContext(null);
+const ToolbarStyleStoreProvider = ({ children }) => {
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = createToolbarStyleStore();
+  }
+  return /* @__PURE__ */ jsx(ToolbarStyleStoreContext.Provider, { value: storeRef.current, children });
+};
+function useToolbarStyleStore(selector) {
+  const store = useContext(ToolbarStyleStoreContext);
+  if (!store) {
+    throw new Error("useToolbarStyleStore must be used within a ToolbarStyleStoreProvider");
+  }
+  return useStore(store, selector);
+}
+function useToolbarStyleStoreApi() {
+  const store = 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) {
@@ -1333,7 +1442,7 @@ const DocumentProvider = ({
     undo,
     redo,
     editorRegistry
-  }, children });
+  }, children: /* @__PURE__ */ jsx(ToolbarStyleStoreProvider, { children }) });
 };
 /**
  * @license lucide-react v1.8.0 - ISC
@@ -2081,43 +2190,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 selection = $getSelection();
-    if (!$isRangeSelection(selection)) return;
-    const nodes = selection.getNodes();
-    for (const node of nodes) {
-      if ($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(FORMAT_TEXT_COMMAND, format);
 }
@@ -2149,48 +2221,77 @@ function indentContent(editor) {
 function outdentContent(editor) {
   editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, void 0);
 }
-function setBlockType(editor, blockType) {
-  editor.update(() => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-    if (blockType === "paragraph") {
-      $setBlocksType(selection, () => $createParagraphNode());
-      return;
-    }
-    $setBlocksType(selection, () => $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 selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-    const anchorNode = selection.anchor.getNode();
-    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
-    if ($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");
 }
@@ -2208,6 +2309,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: () => {
@@ -2295,6 +2411,7 @@ class VariableNode extends DecoratorNode {
     const span = document.createElement("span");
     span.className = "lex4-variable";
     span.setAttribute("data-variable-key", this.__variableKey);
+    span.setAttribute("data-node-key", this.__key);
     span.setAttribute("data-testid", `variable-${this.__variableKey}`);
     span.contentEditable = "false";
     return span;
@@ -2342,16 +2459,18 @@ function VariableChip({
 }) {
   const { getDefinition } = useVariables();
   const [editor] = useLexicalComposerContext();
-  const [isSelected, setSelected, clearOtherSelections] = useLexicalNodeSelection(nodeKey);
+  const [isSelected] = 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 = 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 = [
@@ -2362,13 +2481,48 @@ function VariableChip({
     format & 8 ? "lex4-text-underline" : "",
     format & 4 ? "lex4-text-strikethrough" : ""
   ].filter(Boolean).join(" ");
-  const handleClick = useCallback((event) => {
+  const clearDomSelection = useCallback(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+  }, []);
+  const selectNode = useCallback((extendSelection) => {
+    editor.focus();
+    editor.update(() => {
+      const nextSelection = $createNodeSelection();
+      if (extendSelection) {
+        const currentSelection = $getSelection();
+        if ($isNodeSelection(currentSelection)) {
+          for (const node of currentSelection.getNodes()) {
+            if ($isVariableNode(node)) {
+              nextSelection.add(node.getKey());
+            }
+          }
+        }
+      }
+      nextSelection.add(nodeKey);
+      $setSelection(nextSelection);
+    });
+    clearDomSelection();
+  }, [clearDomSelection, editor, nodeKey]);
+  const handleMouseDown = useCallback((event) => {
     event.preventDefault();
-    if (!event.shiftKey) {
-      clearOtherSelections();
+    event.stopPropagation();
+    if (!isSelected || event.shiftKey) {
+      selectNode(event.shiftKey);
     }
-    setSelected(!isSelected);
-  }, [clearOtherSelections, isSelected, setSelected]);
+  }, [isSelected, selectNode]);
+  const handleClick = useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const handleMouseUp = useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    clearDomSelection();
+  }, [clearDomSelection]);
   useEffect(() => {
     const removeSelectedNodes = () => {
       editor.update(() => {
@@ -2456,7 +2610,8 @@ function VariableChip({
       "data-variable-group": group,
       title: variableKey,
       style,
-      onMouseDown: (event) => event.preventDefault(),
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onClick: handleClick,
       children: label
     }
@@ -2468,41 +2623,58 @@ function $createVariableNode(variableKey, format = 0, style = "") {
 function $isVariableNode(node) {
   return node instanceof VariableNode;
 }
-const FORMAT_MASKS = {
+const FORMAT_MASKS$1 = {
   bold: 1,
   italic: 2,
   strikethrough: 4,
   underline: 8
 };
-function withSelectedVariableNodes(editor, updater) {
-  let updated = false;
-  editor.update(() => {
-    const selection = $getSelection();
-    if (!$isNodeSelection(selection)) {
+function dedupeVariableNodes(nodes) {
+  return Array.from(new Map(nodes.map((node) => [node.getKey(), node])).values());
+}
+function getSelectedVariableNodesFromSelection(selection) {
+  if (!selection || typeof selection !== "object" || !("getNodes" in selection) || typeof selection.getNodes !== "function") {
+    return [];
+  }
+  return dedupeVariableNodes(selection.getNodes().filter($isVariableNode));
+}
+function getVisuallySelectedVariableNodes(editor) {
+  const rootElement = editor.getRootElement();
+  if (!rootElement) {
+    return [];
+  }
+  const nodes = [];
+  rootElement.querySelectorAll(".lex4-variable-chip-selected").forEach((chip) => {
+    const variableElement = chip.closest("[data-node-key]");
+    const nodeKey = variableElement == null ? void 0 : variableElement.dataset.nodeKey;
+    if (!nodeKey) {
       return;
     }
-    const nodes = selection.getNodes().filter($isVariableNode);
-    if (nodes.length === 0) {
-      return;
+    const node = $getNodeByKey(nodeKey);
+    if ($isVariableNode(node)) {
+      nodes.push(node);
     }
-    updater(nodes);
-    updated = true;
   });
-  return updated;
+  return dedupeVariableNodes(nodes);
 }
-function getSelectedVariableNodes(editor) {
-  let nodes = [];
-  editor.getEditorState().read(() => {
-    const selection = $getSelection();
-    if (!$isNodeSelection(selection)) {
+function withSelectedVariableNodes(editor, updater) {
+  let updated = false;
+  editor.update(() => {
+    const nodes = [
+      ...getSelectedVariableNodesFromSelection($getSelection()),
+      ...getVisuallySelectedVariableNodes(editor)
+    ];
+    const uniqueNodes = dedupeVariableNodes(nodes);
+    if (uniqueNodes.length === 0) {
       return;
     }
-    nodes = selection.getNodes().filter($isVariableNode);
+    updater(uniqueNodes);
+    updated = true;
   });
-  return nodes;
+  return updated;
 }
 function toggleSelectedVariableFormat(editor, format) {
-  const mask = FORMAT_MASKS[format];
+  const mask = FORMAT_MASKS$1[format];
   if (!mask) {
     return false;
   }
@@ -2528,24 +2700,159 @@ function applyFontSizeToSelectedVariables(editor, size) {
     }
   });
 }
-function readSelectedVariableFormatting(editor) {
-  let formatting = {};
-  editor.getEditorState().read(() => {
-    const selection = $getSelection();
-    if (!$isNodeSelection(selection)) {
+function getElementBlockType$1(element) {
+  if ($isHeadingNode(element)) {
+    return element.getTag();
+  }
+  return "paragraph";
+}
+function getVariableTopLevelElement(variable) {
+  const topLevelElement = variable.getTopLevelElementOrThrow();
+  return $isElementNode(topLevelElement) ? topLevelElement : null;
+}
+function replaceTopLevelBlockType(element, blockType) {
+  const currentType = getElementBlockType$1(element);
+  if (currentType === blockType) {
+    return;
+  }
+  const nextElement = blockType === "paragraph" ? $createParagraphNode() : $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(selection) {
+  if (selection.isCollapsed()) {
+    return false;
+  }
+  const anchorTopLevel = selection.anchor.getNode().getTopLevelElementOrThrow();
+  const focusTopLevel = selection.focus.getNode().getTopLevelElementOrThrow();
+  if (!anchorTopLevel.is(focusTopLevel)) {
+    return false;
+  }
+  const selectedText = selection.getTextContent().trim();
+  const blockText = anchorTopLevel.getTextContent().trim();
+  return selectedText.length > 0 && selectedText.length < blockText.length;
+}
+function applySemanticBlockType(selection, blockType) {
+  if (blockType === "paragraph") {
+    $setBlocksType(selection, () => $createParagraphNode());
+    return;
+  }
+  $setBlocksType(selection, () => $createHeadingNode(blockType));
+}
+function selectedVariablesOccupyEntireBlock(variables, topLevelElement) {
+  const selectedKeys = new Set(variables.map((variable) => variable.getKey()));
+  const meaningfulChildren = topLevelElement.getChildren().filter(
+    (child) => !($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) => !($isTextNode(child) && child.getTextContent().trim() === "")
+  );
+  if (meaningfulChildren.length === 0 || !meaningfulChildren.every($isVariableNode)) {
+    return null;
+  }
+  return meaningfulChildren;
+}
+function getSelectedVariableNodesFromRangeSelection(editor, selection) {
+  const seen = /* @__PURE__ */ new Set();
+  const variables = [];
+  for (const node of [
+    selection.anchor.getNode(),
+    selection.focus.getNode(),
+    ...selection.getNodes(),
+    ...getVisuallySelectedVariableNodes(editor)
+  ]) {
+    if (!$isVariableNode(node) || seen.has(node.getKey())) {
+      continue;
+    }
+    seen.add(node.getKey());
+    variables.push(node);
+  }
+  return variables;
+}
+function setBlockType(editor, blockType) {
+  editor.update(() => {
+    const visuallySelectedVariables = getVisuallySelectedVariableNodes(editor);
+    const currentSelection = $getSelection();
+    const selection = $isNodeSelection(currentSelection) ? currentSelection : $createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
+    if ($isRangeSelection(selection)) {
+      $setSelection(selection);
+    }
+    if ($isNodeSelection(selection)) {
+      const variables = Array.from(new Map(
+        [
+          ...selection.getNodes().filter($isVariableNode),
+          ...visuallySelectedVariables
+        ].map((variable) => [variable.getKey(), variable])
+      ).values());
+      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 = $createNodeSelection();
+        for (const variable of variables) {
+          nextSelection.add(variable.getKey());
+        }
+        $setSelection(nextSelection);
+        return;
+      }
+      for (const variable of variables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
       return;
     }
-    const firstNode = selection.getNodes().filter($isVariableNode)[0];
-    if (!firstNode) {
+    if (!$isRangeSelection(selection)) {
+      if (visuallySelectedVariables.length === 0) {
+        return;
+      }
+      for (const variable of visuallySelectedVariables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
       return;
     }
-    const style = firstNode.getStyle();
-    formatting = {
-      fontFamily: extractFontFamilyFromStyle(style),
-      fontSize: extractFontSizePtFromStyle(style)
-    };
+    const anchorTopLevel = selection.anchor.getNode().getTopLevelElementOrThrow();
+    const standaloneVariables = $isElementNode(anchorTopLevel) ? getStandaloneVariableChildren(anchorTopLevel) : null;
+    const selectedVariables = getSelectedVariableNodesFromRangeSelection(editor, selection);
+    if (isPartialSingleBlockSelection(selection)) {
+      $patchStyleText(selection, createInlineBlockTypeStylePatch(blockType));
+      for (const variable of selectedVariables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
+      return;
+    }
+    for (const variable of new Map(
+      [...standaloneVariables ?? [], ...selectedVariables].map((variable2) => [variable2.getKey(), variable2])
+    ).values()) {
+      variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+    }
+    applySemanticBlockType(selection, blockType);
   });
-  return formatting;
 }
 const BLOCK_TYPE_OPTIONS = [
   { value: "paragraph", shortLabel: "P" },
@@ -2962,6 +3269,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 "Inter";
+}
+function normalizeAlignment(alignment) {
+  if (alignment === "center" || alignment === "right" || alignment === "justify") {
+    return alignment;
+  }
+  return "left";
+}
+function getElementBlockType(node) {
+  const topLevelElement = node.getTopLevelElementOrThrow();
+  if ($isHeadingNode(topLevelElement)) {
+    return topLevelElement.getTag();
+  }
+  return "paragraph";
+}
+function getElementAlignment(node) {
+  const topLevelElement = node.getTopLevelElementOrThrow();
+  if ($isElementNode(topLevelElement)) {
+    return normalizeAlignment(topLevelElement.getFormatType());
+  }
+  return "left";
+}
+function getInlineStyleTarget(nodes, anchorNode) {
+  if ($isTextNode(anchorNode) || $isVariableNode(anchorNode)) {
+    return anchorNode;
+  }
+  return nodes.find((node) => $isTextNode(node) || $isVariableNode(node)) ?? null;
+}
+function getInlineStyleFromNode(node) {
+  if ($isTextNode(node) || $isVariableNode(node)) {
+    return node.getStyle();
+  }
+  return "";
+}
+function hasInlineFormat(node, format) {
+  if ($isVariableNode(node)) {
+    return (node.getFormat() & FORMAT_MASKS[format]) !== 0;
+  }
+  if ($isTextNode(node) && "hasFormat" in node && typeof node.hasFormat === "function") {
+    return node.hasFormat(format);
+  }
+  if ($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 = $getSelection();
+    const selection = $isNodeSelection(currentSelection) ? currentSelection : $createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
+    if ($isNodeSelection(selection)) {
+      const variableNodes = selection.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 (!$isRangeSelection(selection)) {
+      return;
+    }
+    const anchorNode = selection.anchor.getNode();
+    const inlineStyleTarget = getInlineStyleTarget(selection.getNodes(), anchorNode);
+    const style = selection.style || getInlineStyleFromNode(inlineStyleTarget);
+    const isCollapsed = selection.isCollapsed();
+    snapshot = {
+      blockType: extractInlineBlockTypeFromStyle(style) ?? getElementBlockType(anchorNode),
+      fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style)),
+      fontSize: extractFontSizePtFromStyle(style) ?? DEFAULT_FONT_SIZE,
+      alignment: getElementAlignment(anchorNode),
+      isBold: selection.hasFormat("bold") || isCollapsed && hasInlineFormat(inlineStyleTarget, "bold"),
+      isItalic: selection.hasFormat("italic") || isCollapsed && hasInlineFormat(inlineStyleTarget, "italic"),
+      isUnderline: selection.hasFormat("underline") || isCollapsed && hasInlineFormat(inlineStyleTarget, "underline"),
+      isStrikethrough: selection.hasFormat("strikethrough") || isCollapsed && hasInlineFormat(inlineStyleTarget, "strikethrough"),
+      hasSelectedVariable: false
+    };
+  });
+  return snapshot;
+}
 const Toolbar = () => {
   const {
     activeEditor,
@@ -2978,15 +3387,15 @@ const Toolbar = () => {
   const { toolbarItems, toolbarEndItems } = useExtensions();
   const toolbarConfig = useToolbarConfig();
   const t = useTranslations();
-  const [activeBlockType, setActiveBlockType] = useState("paragraph");
-  const [activeFontFamily, setActiveFontFamily] = useState("Calibri");
-  const [activeFontSize, setActiveFontSize] = useState(DEFAULT_FONT_SIZE);
-  const normalizeFontFamily = 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 = useCallback(
     (editor, action) => {
       editor.update(() => {
@@ -3024,38 +3433,11 @@ const Toolbar = () => {
   );
   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 selection = $getSelection();
-        if (!$isRangeSelection(selection)) {
-          return;
-        }
-        const textNode = selection.getNodes().find($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(
@@ -3066,14 +3448,14 @@ const Toolbar = () => {
       },
       COMMAND_PRIORITY_LOW
     );
-    const unregisterUpdateListener = activeEditor.registerUpdateListener(() => {
-      updateSelectionState();
+    const unregisterUpdateListener = activeEditor.registerUpdateListener(({ editorState }) => {
+      updateSelectionState(editorState);
     });
     return () => {
       unregisterSelectionChange();
       unregisterUpdateListener();
     };
-  }, [activeEditor, normalizeFontFamily]);
+  }, [activeEditor, toolbarStyleStore]);
   const handleBold = useCallback(() => {
     debug("toolbar", `bold (globalSelection=${globalSelectionActive}, editors=${editorRegistry.all().length}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.boldApplied, () => {
@@ -3258,17 +3640,17 @@ const Toolbar = () => {
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "lex4-toolbar-group", "data-testid": "format-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsx(Underline, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) })
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", active: isBoldActive, onClick: handleBold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", active: isItalicActive, onClick: handleItalic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", active: isUnderlineActive, onClick: handleUnderline, children: /* @__PURE__ */ jsx(Underline, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", active: isStrikethroughActive, onClick: handleStrikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "lex4-toolbar-group", "data-testid": "align-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsx(TextAlignStart, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsx(TextAlignJustify, { size: 15 }) })
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", active: activeAlignment === "left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsx(TextAlignStart, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", active: activeAlignment === "center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", active: activeAlignment === "right", onClick: handleAlignRight, children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", active: activeAlignment === "justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsx(TextAlignJustify, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
@@ -3319,6 +3701,7 @@ const ToolbarIconButton = ({
     type: "button",
     title,
     "aria-label": title,
+    "aria-pressed": active,
     disabled,
     onMouseDown: (e) => e.preventDefault(),
     onClick,