@yurikilian/lex4 1.10.0 → 1.11.0

package/dist/lex4-editor.js

@@ -3,7 +3,7 @@ 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, $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 { $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 { ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $createListNode, $isListNode, ListItemNode, $createListItemNode } from "@lexical/list";
 import { $findMatchingParent } from "@lexical/utils";
@@ -518,7 +518,8 @@ const DEFAULT_TRANSLATIONS = {
       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: {
@@ -539,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"
@@ -662,7 +665,8 @@ const PT_BR_TRANSLATIONS = {
       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: {
@@ -683,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"
@@ -861,7 +867,9 @@ const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
   isItalic: false,
   isUnderline: false,
   isStrikethrough: false,
-  hasSelectedVariable: false
+  hasSelectedVariable: false,
+  hasTextSelection: false,
+  insideOptionalSegment: false
 };
 function createToolbarStyleStore(initialSnapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT) {
   return createStore((set) => ({
@@ -1577,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" }
@@ -1616,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
  *
@@ -2746,7 +2765,7 @@ function VariableChip({
       className,
       "data-testid": `variable-chip-${variableKey}`,
       "data-variable-group": group,
-      title: variableKey,
+      title: label,
       style,
       onMouseDown: handleMouseDown,
       onMouseUp: handleMouseUp,
@@ -3407,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,
@@ -3500,6 +3667,7 @@ 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) || $isRangeSelection(currentSelection) ? currentSelection : $createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
     if ($isNodeSelection(selection)) {
@@ -3519,7 +3687,9 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
         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;
     }
@@ -3540,7 +3710,9 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
       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;
@@ -5798,6 +5970,8 @@ function mapInlineNode(node) {
       return mapVariableNode(node);
     case "linebreak":
       return mapLineBreak();
+    case "optional-segment":
+      return mapOptionalSegment(node);
     default:
       return { type: "text", text: "" };
   }
@@ -5821,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);
 }
@@ -6076,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;
   }
@@ -6557,6 +6742,42 @@ 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();
@@ -6850,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) });
@@ -6877,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,
@@ -6905,7 +7169,9 @@ function variablesExtension(definitions = []) {
   };
 }
 export {
+  $createOptionalSegmentNode,
   $createVariableNode,
+  $isOptionalSegmentNode,
   $isVariableNode,
   A4_HEIGHT_MM,
   A4_HEIGHT_PX,
@@ -6917,7 +7183,9 @@ export {
   Lex4Editor,
   MAX_FOOTER_HEIGHT_PX,
   MAX_HEADER_HEIGHT_PX,
+  OptionalSegmentNode,
   PT_BR_TRANSLATIONS,
+  TOGGLE_OPTIONAL_SEGMENT_COMMAND,
   VariableNode,
   astExtension,
   buildSavePayload,