@yurikilian/lex4 1.7.0 → 1.10.0

package/dist/lex4-editor.js

@@ -3,9 +3,10 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 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, 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, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DELETE_COMMAND, KEY_DOWN_COMMAND, $isNodeSelection, $getNodeByKey, $setSelection, $createNodeSelection, $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 { $getSelection, $isRangeSelection, $isTextNode, $getRoot, $createRangeSelectionFromDom, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, $applyNodeReplacement, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, 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 { ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $createListNode, $isListNode, ListItemNode, $createListItemNode } from "@lexical/list";
+import { $findMatchingParent } from "@lexical/utils";
 import { $patchStyleText, $setBlocksType } from "@lexical/selection";
 import { $createHeadingNode, $isHeadingNode, HeadingNode, QuoteNode, $createQuoteNode } from "@lexical/rich-text";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
@@ -471,6 +472,7 @@ const DEFAULT_TRANSLATIONS = {
     justify: "Justify",
     numberedList: "Numbered List",
     bulletList: "Bullet List",
+    alphabeticList: "Alphabetic List",
     indent: "Indent",
     outdent: "Outdent",
     history: "History",
@@ -510,6 +512,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}}",
@@ -613,6 +616,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",
@@ -652,6 +656,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}}",
@@ -848,9 +853,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,
@@ -2208,13 +2214,145 @@ function toggleStrikethrough(editor) {
 function setAlignment(editor, alignment) {
   editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment);
 }
+function decorateAlphaListDom(dom) {
+  dom.classList.add("lex4-list-alpha");
+  dom.setAttribute("data-lex4-list-variant", "alpha");
+}
+class AlphaListNode extends 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 $applyNodeReplacement(new AlphaListNode(start));
+}
+function $isAlphaListNode(node) {
+  return node instanceof AlphaListNode;
+}
+function getNearestListNode$1(node) {
+  if ($isListNode(node)) {
+    return node;
+  }
+  const listNode = $findMatchingParent(node, $isListNode);
+  return $isListNode(listNode) ? listNode : null;
+}
+function getSelectedListNodes() {
+  const selection = $getSelection();
+  if (!selection) {
+    return [];
+  }
+  const listNodes = /* @__PURE__ */ new Map();
+  const nodes = selection.getNodes();
+  if ($isRangeSelection(selection)) {
+    nodes.push(selection.anchor.getNode(), selection.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 = $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(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(INSERT_ORDERED_LIST_COMMAND, void 0);
   } else {
     editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
   }
 }
+function removeList(editor) {
+  editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+}
 function indentContent(editor) {
   editor.dispatchCommand(INDENT_CONTENT_COMMAND, void 0);
 }
@@ -2411,6 +2549,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;
@@ -2458,7 +2597,7 @@ 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;
@@ -2480,13 +2619,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(() => {
@@ -2574,7 +2748,8 @@ function VariableChip({
       "data-variable-group": group,
       title: variableKey,
       style,
-      onMouseDown: (event) => event.preventDefault(),
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onClick: handleClick,
       children: label
     }
@@ -2586,6 +2761,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(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 node = $getNodeByKey(nodeKey);
+    if ($isVariableNode(node)) {
+      nodes.push(node);
+    }
+  });
+  return dedupeVariableNodes(nodes);
+}
+function withSelectedVariableNodes(editor, updater) {
+  let updated = false;
+  editor.update(() => {
+    const nodes = [
+      ...getSelectedVariableNodesFromSelection($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 ($isHeadingNode(element)) {
     return element.getTag();
@@ -2651,15 +2903,38 @@ function getStandaloneVariableChildren(topLevelElement) {
   }
   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 = selection.getNodes().filter($isVariableNode);
+      const variables = Array.from(new Map(
+        [
+          ...selection.getNodes().filter($isVariableNode),
+          ...visuallySelectedVariables
+        ].map((variable) => [variable.getKey(), variable])
+      ).values());
       if (variables.length === 0) {
         return;
       }
@@ -2691,69 +2966,32 @@ function setBlockType(editor, blockType) {
       return;
     }
     if (!$isRangeSelection(selection)) {
+      if (visuallySelectedVariables.length === 0) {
+        return;
+      }
+      for (const variable of visuallySelectedVariables) {
+        variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
+      }
       return;
     }
     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 standaloneVariables ?? []) {
+    for (const variable of new Map(
+      [...standaloneVariables ?? [], ...selectedVariables].map((variable2) => [variable2.getKey(), variable2])
+    ).values()) {
       variable.setStyle(mergeInlineBlockTypeStyle(variable.getStyle(), blockType));
     }
     applySemanticBlockType(selection, blockType);
   });
 }
-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)) {
-      return;
-    }
-    const nodes = selection.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" },
@@ -3179,7 +3417,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") {
@@ -3201,6 +3439,40 @@ function getElementAlignment(node) {
   }
   return "left";
 }
+function getNearestListNode(node) {
+  if ($isListNode(node)) {
+    return node;
+  }
+  return $findMatchingParent(node, $isListNode);
+}
+function getNodeActiveList(node) {
+  const listNode = getNearestListNode(node);
+  if (!$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 ($isTextNode(anchorNode) || $isVariableNode(anchorNode)) {
     return anchorNode;
@@ -3229,7 +3501,7 @@ 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;
+    const selection = $isNodeSelection(currentSelection) || $isRangeSelection(currentSelection) ? currentSelection : $createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
     if ($isNodeSelection(selection)) {
       const variableNodes = selection.getNodes().filter($isVariableNode);
       if (variableNodes.length === 0) {
@@ -3242,6 +3514,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),
@@ -3262,6 +3535,7 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
       fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style)),
       fontSize: extractFontSizePtFromStyle(style) ?? DEFAULT_FONT_SIZE,
       alignment: getElementAlignment(anchorNode),
+      activeList: getActiveList(selection.getNodes(), 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"),
@@ -3292,6 +3566,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);
@@ -3320,16 +3595,27 @@ const Toolbar = () => {
   );
   const runToolbarAction = 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]
   );
   useEffect(() => {
     if (!activeEditor) {
@@ -3422,6 +3708,11 @@ const Toolbar = () => {
       applyToBodyEditors((editor) => insertList(editor, "bullet"));
     });
   }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedBulletList]);
+  const handleListAlpha = useCallback(() => {
+    runToolbarAction(t.history.actions.insertedAlphabeticList, () => {
+      applyToBodyEditors((editor) => insertList(editor, "alpha"));
+    });
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedAlphabeticList]);
   const handleIndent = useCallback(() => {
     runToolbarAction(t.history.actions.indentedContent, () => {
       applyToBodyEditors(indentContent);
@@ -3554,8 +3845,9 @@ const Toolbar = () => {
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsx(ListOrdered, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", active: activeList === "number", onClick: handleListNumber, children: /* @__PURE__ */ jsx(ListOrdered, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", active: activeList === "bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alphabeticList, testId: "btn-list-alpha", active: activeList === "alpha", onClick: handleListAlpha, children: /* @__PURE__ */ jsx("span", { className: "lex4-toolbar-text-icon", children: "a)" }) }),
           /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsx(ListIndentIncrease, { size: 15 }) }),
           /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsx(ListIndentDecrease, { size: 15 }) })
         ] }),
@@ -3946,7 +4238,7 @@ const lexicalTheme = {
   },
   quote: "lex4-quote"
 };
-const DEFAULT_NODES = [HeadingNode, QuoteNode, ListNode, ListItemNode];
+const DEFAULT_NODES = [HeadingNode, QuoteNode, ListNode, ListItemNode, AlphaListNode];
 function createEditorConfig(mode, pageId, extraNodes = [], themeOverrides = {}) {
   const namespace = pageId ? `lex4-${mode}-${pageId}` : `lex4-${mode}`;
   return {
@@ -5564,6 +5856,7 @@ function mapBlockNode(node) {
     case "heading":
       return mapHeading(node);
     case "list":
+    case "alpha-list":
       return mapList(node);
     case "quote":
       return mapBlockQuote(node);
@@ -5597,7 +5890,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",
@@ -5609,7 +5902,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]);
@@ -5753,6 +6046,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 = $createListItemNode();
       appendChildren(node, serializedNode.children);
@@ -6262,8 +6562,12 @@ const VariablePanel = ({ open, onClose }) => {
   const { activeEditor, runHistoryAction } = useDocument();
   const t = useTranslations();
   const [filter, setFilter] = useState("");
+  const [collapsedGroups, setCollapsedGroups] = useState({});
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState(null);
+  const toggleGroup = useCallback((group) => {
+    setCollapsedGroups((current) => ({ ...current, [group]: !current[group] }));
+  }, []);
   const [draft, setDraft] = useState({
     label: "",
     key: "",
@@ -6377,23 +6681,50 @@ const VariablePanel = ({ open, onClose }) => {
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "lex4-variable-list", children: [
           Object.keys(grouped).length === 0 && /* @__PURE__ */ jsx("div", { className: "lex4-variable-list-empty", children: t.variables.noVariablesFound }),
-          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxs("div", { className: "lex4-variable-group", "data-variable-group": group, children: [
-            /* @__PURE__ */ jsx("div", { className: "lex4-variable-group-label", children: group }),
-            /* @__PURE__ */ jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ jsx(
-              "button",
+          Object.entries(grouped).map(([group, defs]) => {
+            const isCollapsed = !filter && Boolean(collapsedGroups[group]);
+            return /* @__PURE__ */ 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__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lex4-variable-group-header",
+                      "data-testid": `variable-panel-group-${group}`,
+                      "aria-expanded": !isCollapsed,
+                      onClick: () => toggleGroup(group),
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "lex4-variable-group-header-left", children: [
+                          /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "lex4-variable-group-chevron" }),
+                          /* @__PURE__ */ jsx("span", { className: "lex4-variable-group-label", children: group })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "lex4-variable-group-count", children: defs.length })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ 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__ */ jsx("span", { className: "lex4-variable-list-item-label", children: def.label })
+                    },
+                    def.key
+                  )) })
+                ]
               },
-              def.key
-            )) })
-          ] }, group))
+              group
+            );
+          })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "lex4-variable-create", children: creating ? /* @__PURE__ */ jsxs("form", { className: "lex4-variable-create-form", onSubmit: handleCreateVariable, children: [
           /* @__PURE__ */ jsx("div", { className: "lex4-variable-create-title", children: t.variables.createVariableTitle }),