@yurikilian/lex4 1.7.0 → 1.8.0

package/dist/lex4-editor.cjs

@@ -850,7 +850,7 @@ function mergeFontSize(existingStyle, size) {
 }
 const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
   blockType: "paragraph",
-  fontFamily: "Calibri",
+  fontFamily: "Inter",
   fontSize: DEFAULT_FONT_SIZE,
   alignment: "left",
   isBold: false,
@@ -2413,6 +2413,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 +2461,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 +2483,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 +2612,8 @@ function VariableChip({
       "data-variable-group": group,
       title: variableKey,
       style,
-      onMouseDown: (event) => event.preventDefault(),
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onClick: handleClick,
       children: label
     }
@@ -2588,6 +2625,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 +2767,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 +2830,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 +3281,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") {