@yurikilian/lex4 1.7.0 → 1.8.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, 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, 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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode, $isListNode, $createListItemNode, $createListNode } from "@lexical/list";
 import { $patchStyleText, $setBlocksType } from "@lexical/selection";
@@ -848,7 +848,7 @@ function mergeFontSize(existingStyle, size) {
 }
 const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
   blockType: "paragraph",
-  fontFamily: "Calibri",
+  fontFamily: "Inter",
   fontSize: DEFAULT_FONT_SIZE,
   alignment: "left",
   isBold: false,
@@ -2411,6 +2411,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 +2459,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 +2481,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 +2610,8 @@ function VariableChip({
       "data-variable-group": group,
       title: variableKey,
       style,
-      onMouseDown: (event) => event.preventDefault(),
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onClick: handleClick,
       children: label
     }
@@ -2586,6 +2623,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 +2765,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 +2828,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 +3279,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") {