@yurikilian/lex4 1.8.0 → 1.11.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, $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 { $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, ElementNode, createCommand, $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, 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,12 +512,14 @@ 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}}",
       fontSizeChanged: "Font size changed to {{value}}pt",
       blockTypeChanged: "Block type changed to {{value}}",
-      insertedDocumentContent: "Inserted document content"
+      insertedDocumentContent: "Inserted document content",
+      optionalSegmentToggled: "Optional section toggled"
     }
   },
   variables: {
@@ -536,7 +540,9 @@ const DEFAULT_TRANSLATIONS = {
     createVariableSave: "Add variable",
     createVariableCancel: "Cancel",
     createVariableMissingFields: "Label and key are required.",
-    createVariableDuplicateKey: "Variable {{key}} already exists."
+    createVariableDuplicateKey: "Variable {{key}} already exists.",
+    optionalSegmentToggle: "Optional section",
+    optionalSegmentTooltip: "Optional section — appears only when all fields have a value"
   },
   header: {
     placeholder: "Header"
@@ -613,6 +619,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,12 +659,14 @@ 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}}",
       fontSizeChanged: "Tamanho da fonte alterado para {{value}}pt",
       blockTypeChanged: "Tipo de bloco alterado para {{value}}",
-      insertedDocumentContent: "Conteúdo do documento inserido"
+      insertedDocumentContent: "Conteúdo do documento inserido",
+      optionalSegmentToggled: "Seção opcional alternada"
     }
   },
   variables: {
@@ -678,7 +687,9 @@ const PT_BR_TRANSLATIONS = {
     createVariableSave: "Adicionar variável",
     createVariableCancel: "Cancelar",
     createVariableMissingFields: "Rótulo e chave são obrigatórios.",
-    createVariableDuplicateKey: "A variável {{key}} já existe."
+    createVariableDuplicateKey: "A variável {{key}} já existe.",
+    optionalSegmentToggle: "Seção opcional",
+    optionalSegmentTooltip: "Seção opcional — aparece apenas quando todos os campos têm valor"
   },
   header: {
     placeholder: "Cabeçalho"
@@ -851,11 +862,14 @@ const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
   fontFamily: "Inter",
   fontSize: DEFAULT_FONT_SIZE,
   alignment: "left",
+  activeList: "none",
   isBold: false,
   isItalic: false,
   isUnderline: false,
   isStrikethrough: false,
-  hasSelectedVariable: false
+  hasSelectedVariable: false,
+  hasTextSelection: false,
+  insideOptionalSegment: false
 };
 function createToolbarStyleStore(initialSnapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT) {
   return createStore((set) => ({
@@ -1571,33 +1585,33 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [
+const __iconNode$s = [
   ["path", { d: "m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16", key: "xik6mr" }],
   ["path", { d: "M15.697 14h5.606", key: "1stdlc" }],
   ["path", { d: "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", key: "d5nyq2" }],
   ["path", { d: "M3.304 13h6.392", key: "1q3zxz" }]
 ];
-const ALargeSmall = createLucideIcon("a-large-small", __iconNode$r);
+const ALargeSmall = createLucideIcon("a-large-small", __iconNode$s);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$r = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold = createLucideIcon("bold", __iconNode$q);
+const Bold = createLucideIcon("bold", __iconNode$r);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$q = [
   [
     "path",
     { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
@@ -1610,7 +1624,18 @@ const __iconNode$p = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$p);
+const Braces = createLucideIcon("braces", __iconNode$q);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$p = [
+  ["path", { d: "M16 3h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-3", key: "1kt8lf" }],
+  ["path", { d: "M8 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h3", key: "gduv9" }]
+];
+const Brackets = createLucideIcon("brackets", __iconNode$p);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -2208,13 +2233,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);
 }
@@ -2608,7 +2765,7 @@ function VariableChip({
       className,
       "data-testid": `variable-chip-${variableKey}`,
       "data-variable-group": group,
-      title: variableKey,
+      title: label,
       style,
       onMouseDown: handleMouseDown,
       onMouseUp: handleMouseUp,
@@ -3269,6 +3426,154 @@ const CanvasControls = () => {
     )
   ] });
 };
+class OptionalSegmentNode extends ElementNode {
+  static getType() {
+    return "optional-segment";
+  }
+  static clone(node) {
+    return new OptionalSegmentNode(node.__key);
+  }
+  constructor(key) {
+    super(key);
+  }
+  // -- Serialization --
+  static importJSON(serializedNode) {
+    const node = $createOptionalSegmentNode();
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "optional-segment",
+      version: 1
+    };
+  }
+  // -- DOM --
+  createDOM() {
+    const span = document.createElement("span");
+    span.className = "lex4-optional-segment";
+    span.setAttribute("data-lex4-optional-segment", "true");
+    span.setAttribute("data-testid", "optional-segment");
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const span = document.createElement("span");
+    span.setAttribute("data-lex4-optional-segment", "true");
+    return { element: span };
+  }
+  static importDOM() {
+    return null;
+  }
+  // -- Behavior --
+  isInline() {
+    return true;
+  }
+  canBeEmpty() {
+    return false;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  insertNewAfter(_, restoreSelection = true) {
+    const segment = $createOptionalSegmentNode();
+    this.insertAfter(segment, restoreSelection);
+    return segment;
+  }
+  extractWithChild(_child, selection, _destination) {
+    if (!$isRangeSelection(selection)) {
+      return false;
+    }
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && selection.getTextContent().length > 0;
+  }
+}
+function $createOptionalSegmentNode() {
+  return $applyNodeReplacement(new OptionalSegmentNode());
+}
+function $isOptionalSegmentNode(node) {
+  return node instanceof OptionalSegmentNode;
+}
+const TOGGLE_OPTIONAL_SEGMENT_COMMAND = createCommand(
+  "TOGGLE_OPTIONAL_SEGMENT"
+);
+function $getAncestorOptionalSegment(node) {
+  let current = node;
+  while (current !== null) {
+    if ($isOptionalSegmentNode(current)) {
+      return current;
+    }
+    current = typeof current.getParent === "function" ? current.getParent() : null;
+  }
+  return null;
+}
+function $unwrapOptionalSegment(segment) {
+  for (const child of segment.getChildren()) {
+    segment.insertBefore(child);
+  }
+  segment.remove();
+}
+function containsOptionalSegment(node) {
+  if ($isOptionalSegmentNode(node)) {
+    return true;
+  }
+  if ($isElementNode(node)) {
+    return node.getChildren().some(containsOptionalSegment);
+  }
+  return false;
+}
+function $toggleOptionalSegment() {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+  const anchorSegment = $getAncestorOptionalSegment(selection.anchor.getNode());
+  const focusSegment = $getAncestorOptionalSegment(selection.focus.getNode());
+  if (anchorSegment !== null || focusSegment !== null) {
+    if (anchorSegment !== null && focusSegment !== null && anchorSegment !== focusSegment) {
+      return false;
+    }
+    $unwrapOptionalSegment(anchorSegment ?? focusSegment);
+    return true;
+  }
+  if (selection.isCollapsed()) {
+    return false;
+  }
+  const anchorTop = selection.anchor.getNode().getTopLevelElement();
+  const focusTop = selection.focus.getNode().getTopLevelElement();
+  if (anchorTop === null || anchorTop !== focusTop) {
+    return false;
+  }
+  const extracted = selection.extract();
+  const inlineNodes = extracted.filter((node) => {
+    if ($isElementNode(node) && !node.isInline()) {
+      return false;
+    }
+    return !node.getParents().some((parent) => extracted.includes(parent));
+  });
+  if (inlineNodes.length === 0) {
+    return false;
+  }
+  if (inlineNodes.some(containsOptionalSegment)) {
+    return false;
+  }
+  const segment = $createOptionalSegmentNode();
+  inlineNodes[0].insertBefore(segment);
+  for (const node of inlineNodes) {
+    segment.append(node);
+  }
+  segment.selectEnd();
+  return true;
+}
 const FORMAT_MASKS = {
   bold: 1,
   italic: 2,
@@ -3301,6 +3606,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;
@@ -3328,8 +3667,9 @@ function hasInlineFormat(node, format) {
 function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState()) {
   let snapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT;
   editorState.read(() => {
+    var _a;
     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) {
@@ -3342,11 +3682,14 @@ 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),
         isStrikethrough: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.strikethrough) !== 0),
-        hasSelectedVariable: true
+        hasSelectedVariable: true,
+        hasTextSelection: false,
+        insideOptionalSegment: $getAncestorOptionalSegment(firstVariableNode) !== null
       };
       return;
     }
@@ -3362,11 +3705,14 @@ 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"),
       isStrikethrough: selection.hasFormat("strikethrough") || isCollapsed && hasInlineFormat(inlineStyleTarget, "strikethrough"),
-      hasSelectedVariable: false
+      hasSelectedVariable: false,
+      hasTextSelection: !isCollapsed,
+      insideOptionalSegment: $getAncestorOptionalSegment(anchorNode) !== null || $getAncestorOptionalSegment(((_a = selection.focus) == null ? void 0 : _a.getNode()) ?? null) !== null
     };
   });
   return snapshot;
@@ -3392,6 +3738,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);
@@ -3420,16 +3767,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) {
@@ -3522,6 +3880,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);
@@ -3654,8 +4017,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 }) })
         ] }),
@@ -4046,7 +4410,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 {
@@ -5606,6 +5970,8 @@ function mapInlineNode(node) {
       return mapVariableNode(node);
     case "linebreak":
       return mapLineBreak();
+    case "optional-segment":
+      return mapOptionalSegment(node);
     default:
       return { type: "text", text: "" };
   }
@@ -5629,6 +5995,12 @@ function mapVariableNode(node) {
 function mapLineBreak() {
   return { type: "linebreak" };
 }
+function mapOptionalSegment(node) {
+  return {
+    type: "optional-segment",
+    children: mapInlineNodes(node.children ?? [])
+  };
+}
 function mapInlineNodes(nodes) {
   return nodes.map(mapInlineNode);
 }
@@ -5664,6 +6036,7 @@ function mapBlockNode(node) {
     case "heading":
       return mapHeading(node);
     case "list":
+    case "alpha-list":
       return mapList(node);
     case "quote":
       return mapBlockQuote(node);
@@ -5697,7 +6070,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",
@@ -5709,7 +6082,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]);
@@ -5853,6 +6226,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);
@@ -5876,6 +6256,11 @@ function buildLexicalNode(serializedNode) {
         typeof serializedNode.format === "number" ? serializedNode.format : 0,
         typeof serializedNode.style === "string" ? serializedNode.style : ""
       );
+    case "optional-segment": {
+      const node = $createOptionalSegmentNode();
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
     default:
       return null;
   }
@@ -6357,13 +6742,53 @@ const VariablePlugin = () => {
   }, [editor]);
   return null;
 };
+const OptionalSegmentPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  const t = useTranslations();
+  useEffect(() => {
+    return editor.registerCommand(
+      TOGGLE_OPTIONAL_SEGMENT_COMMAND,
+      () => {
+        let handled = false;
+        editor.update(() => {
+          handled = $toggleOptionalSegment();
+        });
+        return handled;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  useEffect(() => {
+    return editor.registerMutationListener(
+      OptionalSegmentNode,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, mutation] of mutations) {
+            if (mutation === "created" || mutation === "updated") {
+              const element = editor.getElementByKey(key);
+              if (element) {
+                element.title = t.variables.optionalSegmentTooltip;
+              }
+            }
+          }
+        });
+      },
+      { skipInitialization: false }
+    );
+  }, [editor, t.variables.optionalSegmentTooltip]);
+  return null;
+};
 const VariablePanel = ({ open, onClose }) => {
   const { definitions, refreshDefinitions } = useVariables();
   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: "",
@@ -6477,23 +6902,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 }),
@@ -6619,6 +7071,48 @@ const VariableToolbarToggle = () => {
     }
   );
 };
+const OptionalSegmentToolbarButton = () => {
+  const { activeEditor, runHistoryAction } = useDocument();
+  const toolbarConfig = useToolbarConfig();
+  const t = useTranslations();
+  const hasTextSelection = useToolbarStyleStore((state) => state.hasTextSelection);
+  const insideOptionalSegment = useToolbarStyleStore((state) => state.insideOptionalSegment);
+  if (!toolbarConfig.variables.visible) {
+    return null;
+  }
+  if (!hasTextSelection && !insideOptionalSegment) {
+    return null;
+  }
+  const handleClick = () => {
+    if (!activeEditor) {
+      return;
+    }
+    runHistoryAction(
+      {
+        label: t.history.actions.optionalSegmentToggled,
+        source: "toolbar",
+        region: "document"
+      },
+      () => {
+        activeEditor.dispatchCommand(TOGGLE_OPTIONAL_SEGMENT_COMMAND, void 0);
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: t.variables.optionalSegmentToggle,
+      "aria-label": t.variables.optionalSegmentToggle,
+      "aria-pressed": insideOptionalSegment,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: handleClick,
+      className: `lex4-toolbar-btn${insideOptionalSegment ? " active" : ""}`,
+      "data-testid": "btn-optional-segment",
+      children: /* @__PURE__ */ jsx(Brackets, { size: 15 })
+    }
+  );
+};
 const VariablePanelWithState = () => {
   const { panelOpen, setPanelOpen } = useVariablePanelState();
   return /* @__PURE__ */ jsx(VariablePanel, { open: panelOpen, onClose: () => setPanelOpen(false) });
@@ -6646,8 +7140,9 @@ function variablesExtension(definitions = []) {
   };
   return {
     name: "variables",
-    nodes: [VariableNode],
-    bodyPlugins: [VariablePlugin],
+    nodes: [VariableNode, OptionalSegmentNode],
+    bodyPlugins: [VariablePlugin, OptionalSegmentPlugin],
+    toolbarItems: [OptionalSegmentToolbarButton],
     toolbarEndItems: [VariableToolbarToggle],
     sidePanel: VariablePanelWithState,
     provider: ProviderWrapper,
@@ -6674,7 +7169,9 @@ function variablesExtension(definitions = []) {
   };
 }
 export {
+  $createOptionalSegmentNode,
   $createVariableNode,
+  $isOptionalSegmentNode,
   $isVariableNode,
   A4_HEIGHT_MM,
   A4_HEIGHT_PX,
@@ -6686,7 +7183,9 @@ export {
   Lex4Editor,
   MAX_FOOTER_HEIGHT_PX,
   MAX_HEADER_HEIGHT_PX,
+  OptionalSegmentNode,
   PT_BR_TRANSLATIONS,
+  TOGGLE_OPTIONAL_SEGMENT_COMMAND,
   VariableNode,
   astExtension,
   buildSavePayload,