@yurikilian/lex4 1.7.0 → 1.10.0

package/dist/lex4-editor.cjs

@@ -8,6 +8,7 @@ const React = require("react");
 const lexical = require("lexical");
 const LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 const list = require("@lexical/list");
+const utils = require("@lexical/utils");
 const selection = require("@lexical/selection");
 const richText = require("@lexical/rich-text");
 const useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
@@ -473,6 +474,7 @@ const DEFAULT_TRANSLATIONS = {
     justify: "Justify",
     numberedList: "Numbered List",
     bulletList: "Bullet List",
+    alphabeticList: "Alphabetic List",
     indent: "Indent",
     outdent: "Outdent",
     history: "History",
@@ -512,6 +514,7 @@ const DEFAULT_TRANSLATIONS = {
       justifiedText: "Justified text",
       insertedNumberedList: "Inserted numbered list",
       insertedBulletList: "Inserted bullet list",
+      insertedAlphabeticList: "Inserted alphabetic list",
       indentedContent: "Indented content",
       outdentedContent: "Outdented content",
       fontChanged: "Font changed to {{value}}",
@@ -615,6 +618,7 @@ const PT_BR_TRANSLATIONS = {
     justify: "Justificar",
     numberedList: "Lista Numerada",
     bulletList: "Lista com Marcadores",
+    alphabeticList: "Lista Alfabética",
     indent: "Aumentar Recuo",
     outdent: "Diminuir Recuo",
     history: "Histórico",
@@ -654,6 +658,7 @@ const PT_BR_TRANSLATIONS = {
       justifiedText: "Texto justificado",
       insertedNumberedList: "Lista numerada inserida",
       insertedBulletList: "Lista com marcadores inserida",
+      insertedAlphabeticList: "Lista alfabética inserida",
       indentedContent: "Conteúdo recuado",
       outdentedContent: "Recuo reduzido",
       fontChanged: "Fonte alterada para {{value}}",
@@ -850,9 +855,10 @@ function mergeFontSize(existingStyle, size) {
 }
 const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
   blockType: "paragraph",
-  fontFamily: "Calibri",
+  fontFamily: "Inter",
   fontSize: DEFAULT_FONT_SIZE,
   alignment: "left",
+  activeList: "none",
   isBold: false,
   isItalic: false,
   isUnderline: false,
@@ -2210,13 +2216,145 @@ function toggleStrikethrough(editor) {
 function setAlignment(editor, alignment) {
   editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, alignment);
 }
+function decorateAlphaListDom(dom) {
+  dom.classList.add("lex4-list-alpha");
+  dom.setAttribute("data-lex4-list-variant", "alpha");
+}
+class AlphaListNode extends list.ListNode {
+  static getType() {
+    return "alpha-list";
+  }
+  static clone(node) {
+    return new AlphaListNode(node.getStart(), node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createAlphaListNode(
+      typeof serializedNode.start === "number" ? serializedNode.start : 1
+    );
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  constructor(start = 1, key) {
+    super("number", start, key);
+  }
+  createDOM(config, editor) {
+    const dom = super.createDOM(config, editor);
+    decorateAlphaListDom(dom);
+    return dom;
+  }
+  updateDOM(prevNode, dom, config) {
+    const replaced = super.updateDOM(prevNode, dom, config);
+    if (replaced) {
+      return true;
+    }
+    decorateAlphaListDom(dom);
+    return false;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "alpha-list",
+      markerStyle: "alpha"
+    };
+  }
+}
+function $createAlphaListNode(start = 1) {
+  return lexical.$applyNodeReplacement(new AlphaListNode(start));
+}
+function $isAlphaListNode(node) {
+  return node instanceof AlphaListNode;
+}
+function getNearestListNode$1(node) {
+  if (list.$isListNode(node)) {
+    return node;
+  }
+  const listNode = utils.$findMatchingParent(node, list.$isListNode);
+  return list.$isListNode(listNode) ? listNode : null;
+}
+function getSelectedListNodes() {
+  const selection2 = lexical.$getSelection();
+  if (!selection2) {
+    return [];
+  }
+  const listNodes = /* @__PURE__ */ new Map();
+  const nodes = selection2.getNodes();
+  if (lexical.$isRangeSelection(selection2)) {
+    nodes.push(selection2.anchor.getNode(), selection2.focus.getNode());
+  }
+  for (const node of nodes) {
+    const listNode = getNearestListNode$1(node);
+    if (listNode) {
+      listNodes.set(listNode.getKey(), listNode);
+    }
+  }
+  return Array.from(listNodes.values());
+}
+function replaceWithAlphaList(listNode) {
+  if ($isAlphaListNode(listNode) || listNode.getListType() !== "number") {
+    return;
+  }
+  const alphaList = $createAlphaListNode(listNode.getStart());
+  alphaList.setFormat(listNode.getFormatType());
+  alphaList.setIndent(listNode.getIndent());
+  alphaList.setDirection(listNode.getDirection());
+  alphaList.append(...listNode.getChildren());
+  listNode.replace(alphaList);
+}
+function replaceWithPlainList(listNode, listType) {
+  if (!$isAlphaListNode(listNode) && listNode.getListType() === listType) {
+    return;
+  }
+  const plainList = list.$createListNode(
+    listType,
+    listType === "number" ? listNode.getStart() : 1
+  );
+  plainList.setFormat(listNode.getFormatType());
+  plainList.setIndent(listNode.getIndent());
+  plainList.setDirection(listNode.getDirection());
+  plainList.append(...listNode.getChildren());
+  listNode.replace(plainList);
+}
+function insertAlphaList(editor) {
+  const hasAlphaListSelection = editor.getEditorState().read(
+    () => getSelectedListNodes().some($isAlphaListNode)
+  );
+  if (hasAlphaListSelection) {
+    removeList(editor);
+    return;
+  }
+  editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
+  editor.update(() => {
+    getSelectedListNodes().forEach(replaceWithAlphaList);
+  });
+}
+function normalizeSelectedAlphaLists(editor, listType) {
+  const hasAlphaListSelection = editor.getEditorState().read(
+    () => getSelectedListNodes().some($isAlphaListNode)
+  );
+  if (!hasAlphaListSelection) {
+    return false;
+  }
+  editor.update(() => {
+    getSelectedListNodes().forEach((listNode) => replaceWithPlainList(listNode, listType));
+  });
+  return true;
+}
 function insertList(editor, type) {
-  if (type === "number") {
+  if (type === "alpha") {
+    insertAlphaList(editor);
+  } else if (normalizeSelectedAlphaLists(editor, type)) {
+    return;
+  } else if (type === "number") {
     editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
   } else {
     editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
   }
 }
+function removeList(editor) {
+  editor.dispatchCommand(list.REMOVE_LIST_COMMAND, void 0);
+}
 function indentContent(editor) {
   editor.dispatchCommand(lexical.INDENT_CONTENT_COMMAND, void 0);
 }
@@ -2413,6 +2551,7 @@ class VariableNode extends lexical.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;
@@ -2460,7 +2599,7 @@ function VariableChip({
 }) {
   const { getDefinition } = useVariables();
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isSelected, setSelected, clearOtherSelections] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
+  const [isSelected] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
   const def = getDefinition(variableKey);
   const label = (def == null ? void 0 : def.label) ?? variableKey;
   const group = def == null ? void 0 : def.group;
@@ -2482,13 +2621,48 @@ function VariableChip({
     format & 8 ? "lex4-text-underline" : "",
     format & 4 ? "lex4-text-strikethrough" : ""
   ].filter(Boolean).join(" ");
-  const handleClick = React.useCallback((event) => {
+  const clearDomSelection = React.useCallback(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+  }, []);
+  const selectNode = React.useCallback((extendSelection) => {
+    editor.focus();
+    editor.update(() => {
+      const nextSelection = lexical.$createNodeSelection();
+      if (extendSelection) {
+        const currentSelection = lexical.$getSelection();
+        if (lexical.$isNodeSelection(currentSelection)) {
+          for (const node of currentSelection.getNodes()) {
+            if ($isVariableNode(node)) {
+              nextSelection.add(node.getKey());
+            }
+          }
+        }
+      }
+      nextSelection.add(nodeKey);
+      lexical.$setSelection(nextSelection);
+    });
+    clearDomSelection();
+  }, [clearDomSelection, editor, nodeKey]);
+  const handleMouseDown = React.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 = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const handleMouseUp = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    clearDomSelection();
+  }, [clearDomSelection]);
   React.useEffect(() => {
     const removeSelectedNodes = () => {
       editor.update(() => {
@@ -2576,7 +2750,8 @@ function VariableChip({
       "data-variable-group": group,
       title: variableKey,
       style,
-      onMouseDown: (event) => event.preventDefault(),
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onClick: handleClick,
       children: label
     }
@@ -2588,6 +2763,83 @@ function $createVariableNode(variableKey, format = 0, style = "") {
 function $isVariableNode(node) {
   return node instanceof VariableNode;
 }
+const FORMAT_MASKS$1 = {
+  bold: 1,
+  italic: 2,
+  strikethrough: 4,
+  underline: 8
+};
+function dedupeVariableNodes(nodes) {
+  return Array.from(new Map(nodes.map((node) => [node.getKey(), node])).values());
+}
+function getSelectedVariableNodesFromSelection(selection2) {
+  if (!selection2 || typeof selection2 !== "object" || !("getNodes" in selection2) || typeof selection2.getNodes !== "function") {
+    return [];
+  }
+  return dedupeVariableNodes(selection2.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 node = lexical.$getNodeByKey(nodeKey);
+    if ($isVariableNode(node)) {
+      nodes.push(node);
+    }
+  });
+  return dedupeVariableNodes(nodes);
+}
+function withSelectedVariableNodes(editor, updater) {
+  let updated = false;
+  editor.update(() => {
+    const nodes = [
+      ...getSelectedVariableNodesFromSelection(lexical.$getSelection()),
+      ...getVisuallySelectedVariableNodes(editor)
+    ];
+    const uniqueNodes = dedupeVariableNodes(nodes);
+    if (uniqueNodes.length === 0) {
+      return;
+    }
+    updater(uniqueNodes);
+    updated = true;
+  });
+  return updated;
+}
+function toggleSelectedVariableFormat(editor, format) {
+  const mask = FORMAT_MASKS$1[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 getElementBlockType$1(element) {
   if (richText.$isHeadingNode(element)) {
     return element.getTag();
@@ -2653,15 +2905,38 @@ function getStandaloneVariableChildren(topLevelElement) {
   }
   return meaningfulChildren;
 }
+function getSelectedVariableNodesFromRangeSelection(editor, selection2) {
+  const seen = /* @__PURE__ */ new Set();
+  const variables = [];
+  for (const node of [
+    selection2.anchor.getNode(),
+    selection2.focus.getNode(),
+    ...selection2.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 = 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);
+      const variables = Array.from(new Map(
+        [
+          ...selection$1.getNodes().filter($isVariableNode),
+          ...visuallySelectedVariables
+        ].map((variable) => [variable.getKey(), variable])
+      ).values());
       if (variables.length === 0) {
         return;
       }
@@ -2693,69 +2968,32 @@ function setBlockType(editor, blockType) {
       return;
     }
     if (!lexical.$isRangeSelection(selection$1)) {
+      if (visuallySelectedVariables.length === 0) {
+        return;
+      }
+      for (const variable of visuallySelectedVariables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
       return;
     }
     const anchorTopLevel = selection$1.anchor.getNode().getTopLevelElementOrThrow();
     const standaloneVariables = lexical.$isElementNode(anchorTopLevel) ? getStandaloneVariableChildren(anchorTopLevel) : null;
+    const selectedVariables = getSelectedVariableNodesFromRangeSelection(editor, selection$1);
     if (isPartialSingleBlockSelection(selection$1)) {
       selection.$patchStyleText(selection$1, createInlineBlockTypeStylePatch(blockType));
+      for (const variable of selectedVariables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
       return;
     }
-    for (const variable of standaloneVariables ?? []) {
+    for (const variable of new Map(
+      [...standaloneVariables ?? [], ...selectedVariables].map((variable2) => [variable2.getKey(), variable2])
+    ).values()) {
       variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
     }
     applySemanticBlockType(selection$1, blockType);
   });
 }
-const FORMAT_MASKS$1 = {
-  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 toggleSelectedVariableFormat(editor, format) {
-  const mask = FORMAT_MASKS$1[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));
-    }
-  });
-}
 const BLOCK_TYPE_OPTIONS = [
   { value: "paragraph", shortLabel: "P" },
   { value: "h1", shortLabel: "H1" },
@@ -3181,7 +3419,7 @@ function normalizeFontFamily(fontFamily) {
   if (fontFamily && SUPPORTED_FONTS.includes(fontFamily)) {
     return fontFamily;
   }
-  return "Calibri";
+  return "Inter";
 }
 function normalizeAlignment(alignment) {
   if (alignment === "center" || alignment === "right" || alignment === "justify") {
@@ -3203,6 +3441,40 @@ function getElementAlignment(node) {
   }
   return "left";
 }
+function getNearestListNode(node) {
+  if (list.$isListNode(node)) {
+    return node;
+  }
+  return utils.$findMatchingParent(node, list.$isListNode);
+}
+function getNodeActiveList(node) {
+  const listNode = getNearestListNode(node);
+  if (!list.$isListNode(listNode)) {
+    return "none";
+  }
+  if ($isAlphaListNode(listNode)) {
+    return "alpha";
+  }
+  return listNode.getListType() === "number" ? "number" : listNode.getListType() === "bullet" ? "bullet" : "none";
+}
+function getActiveList(nodes, anchorNode) {
+  const activeLists = /* @__PURE__ */ new Set();
+  const anchorList = getNodeActiveList(anchorNode);
+  if (anchorList !== "none") {
+    activeLists.add(anchorList);
+  }
+  for (const node of nodes) {
+    const activeList = getNodeActiveList(node);
+    if (activeList === "none") {
+      continue;
+    }
+    activeLists.add(activeList);
+    if (activeLists.size > 1) {
+      return "none";
+    }
+  }
+  return activeLists.values().next().value ?? "none";
+}
 function getInlineStyleTarget(nodes, anchorNode) {
   if (lexical.$isTextNode(anchorNode) || $isVariableNode(anchorNode)) {
     return anchorNode;
@@ -3231,7 +3503,7 @@ 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;
+    const selection2 = lexical.$isNodeSelection(currentSelection) || lexical.$isRangeSelection(currentSelection) ? currentSelection : lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
     if (lexical.$isNodeSelection(selection2)) {
       const variableNodes = selection2.getNodes().filter($isVariableNode);
       if (variableNodes.length === 0) {
@@ -3244,6 +3516,7 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
         fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style2)),
         fontSize: extractFontSizePtFromStyle(style2) ?? DEFAULT_FONT_SIZE,
         alignment: getElementAlignment(firstVariableNode),
+        activeList: getActiveList(variableNodes, 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),
@@ -3264,6 +3537,7 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
       fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style)),
       fontSize: extractFontSizePtFromStyle(style) ?? DEFAULT_FONT_SIZE,
       alignment: getElementAlignment(anchorNode),
+      activeList: getActiveList(selection2.getNodes(), 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"),
@@ -3294,6 +3568,7 @@ const Toolbar = () => {
   const activeFontFamily = useToolbarStyleStore((state) => state.fontFamily);
   const activeFontSize = useToolbarStyleStore((state) => state.fontSize);
   const activeAlignment = useToolbarStyleStore((state) => state.alignment);
+  const activeList = useToolbarStyleStore((state) => state.activeList);
   const isBoldActive = useToolbarStyleStore((state) => state.isBold);
   const isItalicActive = useToolbarStyleStore((state) => state.isItalic);
   const isUnderlineActive = useToolbarStyleStore((state) => state.isUnderline);
@@ -3322,16 +3597,27 @@ const Toolbar = () => {
   );
   const runToolbarAction = React.useCallback(
     (label, callback) => {
+      const refreshSnapshot = () => {
+        if (!activeEditor) {
+          return;
+        }
+        queueMicrotask(() => {
+          toolbarStyleStore.getState().setSnapshot(readToolbarStyleSnapshot(activeEditor));
+        });
+      };
       runHistoryAction(
         {
           label,
           source: "toolbar",
           region: "document"
         },
-        callback
+        () => {
+          callback();
+          refreshSnapshot();
+        }
       );
     },
-    [runHistoryAction]
+    [activeEditor, runHistoryAction, toolbarStyleStore]
   );
   React.useEffect(() => {
     if (!activeEditor) {
@@ -3424,6 +3710,11 @@ const Toolbar = () => {
       applyToBodyEditors((editor) => insertList(editor, "bullet"));
     });
   }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedBulletList]);
+  const handleListAlpha = React.useCallback(() => {
+    runToolbarAction(t.history.actions.insertedAlphabeticList, () => {
+      applyToBodyEditors((editor) => insertList(editor, "alpha"));
+    });
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedAlphabeticList]);
   const handleIndent = React.useCallback(() => {
     runToolbarAction(t.history.actions.indentedContent, () => {
       applyToBodyEditors(indentContent);
@@ -3556,8 +3847,9 @@ const Toolbar = () => {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsxRuntime.jsx(ListOrdered, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsxRuntime.jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", active: activeList === "number", onClick: handleListNumber, children: /* @__PURE__ */ jsxRuntime.jsx(ListOrdered, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", active: activeList === "bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsxRuntime.jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alphabeticList, testId: "btn-list-alpha", active: activeList === "alpha", onClick: handleListAlpha, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-toolbar-text-icon", children: "a)" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentIncrease, { size: 15 }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentDecrease, { size: 15 }) })
         ] }),
@@ -3948,7 +4240,7 @@ const lexicalTheme = {
   },
   quote: "lex4-quote"
 };
-const DEFAULT_NODES = [richText.HeadingNode, richText.QuoteNode, list.ListNode, list.ListItemNode];
+const DEFAULT_NODES = [richText.HeadingNode, richText.QuoteNode, list.ListNode, list.ListItemNode, AlphaListNode];
 function createEditorConfig(mode, pageId, extraNodes = [], themeOverrides = {}) {
   const namespace = pageId ? `lex4-${mode}-${pageId}` : `lex4-${mode}`;
   return {
@@ -5566,6 +5858,7 @@ function mapBlockNode(node) {
     case "heading":
       return mapHeading(node);
     case "list":
+    case "alpha-list":
       return mapList(node);
     case "quote":
       return mapBlockQuote(node);
@@ -5599,7 +5892,7 @@ function mapHeading(node) {
   };
 }
 function mapList(node) {
-  const listType = node.listType === "number" ? "ordered" : "unordered";
+  const listType = node.type === "alpha-list" ? "ordered-alpha" : node.listType === "number" ? "ordered" : "unordered";
   const items = (node.children ?? []).filter((c) => c.type === "listitem").map(mapListItem);
   return {
     type: "list",
@@ -5611,7 +5904,7 @@ function mapListItem(node) {
   const inlineChildren = [];
   let nestedList;
   for (const child of node.children ?? []) {
-    if (child.type === "list") {
+    if (child.type === "list" || child.type === "alpha-list") {
       nestedList = mapList(child);
     } else {
       const mapped = mapInlineNodes([child]);
@@ -5755,6 +6048,13 @@ function buildLexicalNode(serializedNode) {
       appendChildren(node, serializedNode.children);
       return node;
     }
+    case "alpha-list": {
+      const node = $createAlphaListNode(
+        typeof serializedNode.start === "number" ? serializedNode.start : 1
+      );
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
     case "listitem": {
       const node = list.$createListItemNode();
       appendChildren(node, serializedNode.children);
@@ -6264,8 +6564,12 @@ const VariablePanel = ({ open, onClose }) => {
   const { activeEditor, runHistoryAction } = useDocument();
   const t = useTranslations();
   const [filter, setFilter] = React.useState("");
+  const [collapsedGroups, setCollapsedGroups] = React.useState({});
   const [creating, setCreating] = React.useState(false);
   const [createError, setCreateError] = React.useState(null);
+  const toggleGroup = React.useCallback((group) => {
+    setCollapsedGroups((current) => ({ ...current, [group]: !current[group] }));
+  }, []);
   const [draft, setDraft] = React.useState({
     label: "",
     key: "",
@@ -6379,23 +6683,50 @@ const VariablePanel = ({ open, onClose }) => {
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-list", children: [
           Object.keys(grouped).length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-list-empty", children: t.variables.noVariablesFound }),
-          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-group", "data-variable-group": group, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-label", children: group }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+          Object.entries(grouped).map(([group, defs]) => {
+            const isCollapsed = !filter && Boolean(collapsedGroups[group]);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                type: "button",
-                className: "lex4-variable-list-item",
-                "data-testid": `variable-panel-${def.key}`,
+                className: `lex4-variable-group${isCollapsed ? " is-collapsed" : ""}`,
                 "data-variable-group": group,
-                onClick: () => handleInsert(def.key),
-                disabled: !activeEditor,
-                title: def.key,
-                children: def.label
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lex4-variable-group-header",
+                      "data-testid": `variable-panel-group-${group}`,
+                      "aria-expanded": !isCollapsed,
+                      onClick: () => toggleGroup(group),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lex4-variable-group-header-left", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 12, className: "lex4-variable-group-chevron" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-group-label", children: group })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-group-count", children: defs.length })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lex4-variable-list-item",
+                      "data-testid": `variable-panel-${def.key}`,
+                      "data-variable-group": group,
+                      onClick: () => handleInsert(def.key),
+                      disabled: !activeEditor,
+                      title: def.key,
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-list-item-label", children: def.label })
+                    },
+                    def.key
+                  )) })
+                ]
               },
-              def.key
-            )) })
-          ] }, group))
+              group
+            );
+          })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create", children: creating ? /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "lex4-variable-create-form", onSubmit: handleCreateVariable, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create-title", children: t.variables.createVariableTitle }),