@mdxeditor/editor 4.0.3 → 4.1.0

package/dist/plugins/search/index.js

@@ -1,7 +1,9 @@
 import { Cell, debounceTime, useRealm, useCellValue, useCell } from "@mdxeditor/gurx";
-import { getNearestEditorFromDOMNode, $getNearestNodeFromDOMNode, $isTextNode, $createRangeSelection } from "lexical";
+import { createDOMRange } from "@lexical/selection";
+import { $createRangeSelection, HISTORY_PUSH_TAG, $getRoot, $getNodeByKey, $isTextNode } from "lexical";
 import { realmPlugin } from "../../RealmWithPlugins.js";
-import { contentEditableRef$, createRootEditorSubscription$ } from "../core/index.js";
+import { contentEditableRef$, createActiveEditorSubscription$, activeEditor$, historyState$ } from "../core/index.js";
+import { editorUsesHistoryState } from "../core/lexicalExtensions.js";
 const EmptyTextNodeIndex = {
   allText: "",
   nodeIndex: [],
@@ -19,7 +21,7 @@ const editorSearchScrollableContent$ = Cell(
   null,
   (r) => r.sub(contentEditableRef$, (cref) => {
     var _a;
-    r.pub(editorSearchScrollableContent$, ((_a = cref == null ? void 0 : cref.current) == null ? void 0 : _a.parentNode) ?? null);
+    r.pub(editorSearchScrollableContent$, ((_a = cref == null ? void 0 : cref.current) == null ? void 0 : _a.parentElement) ?? null);
   })
 );
 const MDX_SEARCH_NAME = "MdxSearch";
@@ -27,6 +29,8 @@ const MDX_FOCUS_SEARCH_NAME = "MdxFocusSearch";
 const debouncedIndexer$ = Cell(EmptyTextNodeIndex, (realm) => {
   realm.link(debouncedIndexer$, realm.pipe(editorSearchTextNodeIndex$, realm.transformer(debounceTime(250))));
 });
+const editorSearchActiveEditor$ = Cell(null);
+const editorSearchStateMatches$ = Cell([]);
 function* searchText(allText, searchQuery) {
   if (!searchQuery) {
     return;
@@ -34,8 +38,7 @@ function* searchText(allText, searchQuery) {
   let regex;
   try {
     regex = new RegExp(searchQuery, "gi");
-  } catch (e) {
-    console.error("Invalid search pattern:", e);
+  } catch {
     return;
   }
   let match;
@@ -46,50 +49,17 @@ function* searchText(allText, searchQuery) {
       }
       continue;
     }
-    const start = match.index;
-    const end = start + match[0].length - 1;
-    yield [start, end];
+    yield [match.index, match.index + match[0].length - 1];
   }
 }
-function indexAllTextNodes(root) {
-  var _a;
-  let allText = "";
-  const nodeIndex = [];
-  const offsetIndex = [];
-  if (!root) {
-    return { allText: "", nodeIndex, offsetIndex };
-  }
-  const contentSelector = "p, h1, h2, h3, h4, h5, h6, li, code, pre";
-  const treeWalker = document.createTreeWalker(
-    root,
-    NodeFilter.SHOW_TEXT,
-    // The corrected heuristic: accept any text node that is a descendant of a valid content container.
-    (node) => {
-      var _a2;
-      if ((_a2 = node.parentElement) == null ? void 0 : _a2.closest(contentSelector)) {
-        return NodeFilter.FILTER_ACCEPT;
-      }
-      return NodeFilter.FILTER_REJECT;
-    }
-  );
-  let currentNode;
-  while (currentNode = treeWalker.nextNode()) {
-    const nodeContent = ((_a = currentNode.textContent) == null ? void 0 : _a.normalize("NFKD")) ?? currentNode.textContent ?? "";
-    for (let i = 0; i < nodeContent.length; i++) {
-      nodeIndex.push(currentNode);
-      offsetIndex.push(i);
-      allText += nodeContent[i] ?? "";
-    }
-  }
-  return { allText, nodeIndex, offsetIndex };
-}
 function* rangeSearchScan(searchQuery, { allText, offsetIndex, nodeIndex }) {
   for (const [start, end] of searchText(allText, searchQuery)) {
     const startOffset = offsetIndex[start];
     const endOffset = offsetIndex[end];
     const startNode = nodeIndex[start];
     const endNode = nodeIndex[end];
-    const range = new Range();
+    const ownerDocument = (startNode == null ? void 0 : startNode.ownerDocument) ?? document;
+    const range = ownerDocument.createRange();
     if (startNode === void 0 || endNode === void 0 || startOffset === void 0 || endOffset === void 0) {
       throw new Error("Invalid range: startNode, endNode, startOffset, or endOffset is undefined.");
     }
@@ -98,15 +68,104 @@ function* rangeSearchScan(searchQuery, { allText, offsetIndex, nodeIndex }) {
     yield range;
   }
 }
+function createSearchSnapshot(editor) {
+  let text = "";
+  const units = [];
+  for (const node of $getRoot().getAllTextNodes()) {
+    const nodeText = node.getTextContent();
+    let sourceOffset = 0;
+    while (sourceOffset < nodeText.length) {
+      const codePoint = nodeText.codePointAt(sourceOffset);
+      if (codePoint === void 0)
+        break;
+      const sourceUnit = String.fromCodePoint(codePoint);
+      const normalizedUnit = sourceUnit.normalize("NFKD");
+      const mapsOneToOne = normalizedUnit === sourceUnit;
+      for (let normalizedOffset = 0; normalizedOffset < normalizedUnit.length; normalizedOffset++) {
+        const startOffset = mapsOneToOne ? sourceOffset + normalizedOffset : sourceOffset;
+        const endOffset = mapsOneToOne ? startOffset + 1 : sourceOffset + sourceUnit.length;
+        units.push({ key: node.getKey(), startOffset, endOffset });
+        text += normalizedUnit[normalizedOffset] ?? "";
+      }
+      sourceOffset += sourceUnit.length;
+    }
+  }
+  return { editor, text, units };
+}
+function findStateMatches(snapshot, searchQuery) {
+  const matches = [];
+  for (const [startIndex, endIndex] of searchText(snapshot.text, searchQuery)) {
+    const startUnit = snapshot.units[startIndex];
+    const endUnit = snapshot.units[endIndex];
+    if (!startUnit || !endUnit)
+      continue;
+    matches.push({
+      editor: snapshot.editor,
+      start: { key: startUnit.key, offset: startUnit.startOffset },
+      end: { key: endUnit.key, offset: endUnit.endOffset }
+    });
+  }
+  return matches;
+}
+function projectSnapshot(snapshot, matches) {
+  const nodeIndex = [];
+  const offsetIndex = [];
+  const domTextNodes = /* @__PURE__ */ new Map();
+  const projectedMatches = [];
+  let projectionComplete = true;
+  snapshot.editor.getEditorState().read(() => {
+    for (const unit of snapshot.units) {
+      let domTextNode = domTextNodes.get(unit.key);
+      if (!domTextNode) {
+        const lexicalNode = $getNodeByKey(unit.key);
+        if (!$isTextNode(lexicalNode)) {
+          projectionComplete = false;
+          break;
+        }
+        const nodeRange = createDOMRange(snapshot.editor, lexicalNode, 0, lexicalNode, lexicalNode.getTextContentSize());
+        if (!nodeRange || nodeRange.startContainer !== nodeRange.endContainer) {
+          projectionComplete = false;
+          break;
+        }
+        domTextNode = nodeRange.startContainer;
+        domTextNodes.set(unit.key, domTextNode);
+      }
+      nodeIndex.push(domTextNode);
+      offsetIndex.push(unit.startOffset);
+    }
+    for (const match of matches) {
+      const startNode = $getNodeByKey(match.start.key);
+      const endNode = $getNodeByKey(match.end.key);
+      if (!$isTextNode(startNode) || !$isTextNode(endNode))
+        continue;
+      const range = createDOMRange(snapshot.editor, startNode, match.start.offset, endNode, match.end.offset);
+      if (range)
+        projectedMatches.push({ match, range });
+    }
+  });
+  return {
+    index: projectionComplete ? { allText: snapshot.text, nodeIndex, offsetIndex } : EmptyTextNodeIndex,
+    projectedMatches
+  };
+}
+function supportsHighlights() {
+  return typeof CSS !== "undefined" && typeof CSS.highlights !== "undefined" && typeof Highlight !== "undefined";
+}
 const focusHighlightRange = (range) => {
+  if (!supportsHighlights())
+    return;
   CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
   if (range)
     CSS.highlights.set(MDX_FOCUS_SEARCH_NAME, new Highlight(range));
 };
 const highlightRanges = (ranges) => {
+  if (!supportsHighlights())
+    return;
   CSS.highlights.set(MDX_SEARCH_NAME, new Highlight(...ranges));
 };
 const resetHighlights = () => {
+  if (!supportsHighlights())
+    return;
   CSS.highlights.delete(MDX_SEARCH_NAME);
   CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
 };
@@ -130,56 +189,122 @@ const scrollToRange = (range, contentEditable, options) => {
     const rangeBottom = bottomRelativeToContainer + contentEditable.scrollTop;
     const visibleTop = contentEditable.scrollTop;
     const visibleBottom = visibleTop + contentEditable.clientHeight;
-    const inView = rangeTop >= visibleTop && rangeBottom <= visibleBottom;
-    if (inView)
+    if (rangeTop >= visibleTop && rangeBottom <= visibleBottom)
       return;
   }
   const top = topRelativeToContainer + contentEditable.scrollTop - first.height;
   contentEditable.scrollTo({ top, behavior });
 };
-function isSimilarRange(range1, range2) {
-  return range1.startContainer === range2.startContainer && range1.startOffset === range2.startOffset;
+function isSameStart(first, second) {
+  return (first == null ? void 0 : first.editor) === second.editor && first.start.key === second.start.key && first.start.offset === second.start.offset;
 }
-function replaceTextInRange(range, str, onUpdate) {
-  const startDomNode = range.startContainer;
-  const endDomNode = range.endContainer;
-  const startOffset = range.startOffset;
-  const endOffset = range.endOffset;
-  const editor = getNearestEditorFromDOMNode(startDomNode);
-  if (!editor) {
-    console.warn("No editor found for the provided DOM node.");
+function clearSearchResults(realm) {
+  realm.pubIn({
+    [editorSearchStateMatches$]: [],
+    [editorSearchRanges$]: [],
+    [editorSearchCursor$]: 0
+  });
+  resetHighlights();
+}
+function refreshSearch(realm, editor, advanceFrom) {
+  if (realm.getValue(editorSearchActiveEditor$) !== editor)
+    return;
+  let snapshot;
+  editor.getEditorState().read(() => {
+    snapshot = createSearchSnapshot(editor);
+  });
+  const searchOpen = realm.getValue(searchOpen$);
+  const searchQuery = realm.getValue(editorSearchTerm$);
+  const stateMatches = searchOpen ? findStateMatches(snapshot, searchQuery) : [];
+  const { index, projectedMatches } = projectSnapshot(snapshot, stateMatches);
+  if (searchOpen) {
+    realm.pub(editorSearchTextNodeIndex$, index);
+  } else {
+    realm.pub(debouncedIndexer$, index);
+  }
+  if (!searchOpen || !searchQuery || projectedMatches.length === 0) {
+    clearSearchResults(realm);
     return;
   }
+  const matches = projectedMatches.map(({ match }) => match);
+  const ranges = projectedMatches.map(({ range }) => range);
+  const previousCursor = realm.getValue(editorSearchCursor$);
+  let cursor = Math.min(Math.max(previousCursor, 1), ranges.length);
+  if (advanceFrom && isSameStart(matches[advanceFrom.cursor - 1], advanceFrom.match)) {
+    cursor = advanceFrom.cursor % ranges.length + 1;
+  }
+  realm.pubIn({
+    [editorSearchStateMatches$]: matches,
+    [editorSearchRanges$]: ranges,
+    [editorSearchCursor$]: cursor
+  });
+  highlightRanges(ranges);
+  focusHighlightRange(ranges[cursor - 1]);
+}
+function resolveMatch(match) {
+  const startNode = $getNodeByKey(match.start.key);
+  const endNode = $getNodeByKey(match.end.key);
+  if (!$isTextNode(startNode) || !$isTextNode(endNode))
+    return null;
+  if (match.start.offset < 0 || match.start.offset > startNode.getTextContentSize())
+    return null;
+  if (match.end.offset < 0 || match.end.offset > endNode.getTextContentSize())
+    return null;
+  return { startNode, endNode };
+}
+function replaceStateMatches(editor, matches, replacement, onUpdate) {
+  if (matches.length === 0 || matches.some((match) => match.editor !== editor))
+    return;
   editor.update(
     () => {
-      const startLexicalNode = $getNearestNodeFromDOMNode(startDomNode);
-      const endLexicalNode = $getNearestNodeFromDOMNode(endDomNode);
-      if (!$isTextNode(startLexicalNode) || !$isTextNode(endLexicalNode)) {
+      if (matches.some((match) => resolveMatch(match) === null))
         return;
-      }
-      try {
-        const selection = $createRangeSelection();
-        selection.anchor.set(startLexicalNode.getKey(), startOffset, "text");
-        selection.focus.set(endLexicalNode.getKey(), endOffset, "text");
-        selection.insertText(str);
-      } catch (e) {
-        console.warn("Error replacing text in the editor:", e);
-        if (onUpdate) {
-          onUpdate();
+      for (let index = matches.length - 1; index >= 0; index--) {
+        const match = matches[index];
+        if (!match)
+          continue;
+        const resolved = resolveMatch(match);
+        if (!resolved) {
+          throw new Error("Search match became stale during replacement.");
         }
+        if (resolved.startNode.is(resolved.endNode)) {
+          const replacedNode = resolved.startNode.spliceText(match.start.offset, match.end.offset - match.start.offset, replacement, true);
+          if (replacedNode.getTextContentSize() === 0) {
+            replacedNode.remove();
+          }
+          continue;
+        }
+        const selection = $createRangeSelection();
+        selection.anchor.set(resolved.startNode.getKey(), match.start.offset, "text");
+        selection.focus.set(resolved.endNode.getKey(), match.end.offset, "text");
+        selection.insertText(replacement);
       }
     },
     {
+      tag: HISTORY_PUSH_TAG,
       onUpdate
     }
   );
 }
+function ensureHistoryBaseline(realm, editor) {
+  var _a;
+  const historyState = realm.getValue(historyState$);
+  if (!editorUsesHistoryState(editor, historyState)) {
+    return;
+  }
+  if (((_a = historyState.current) == null ? void 0 : _a.editor) !== editor) {
+    if (historyState.current) {
+      historyState.undoStack.push(historyState.current);
+    }
+    historyState.current = { editor, editorState: editor.getEditorState() };
+  }
+}
 function useEditorSearch() {
   const realm = useRealm();
   const ranges = useCellValue(editorSearchRanges$);
   const cursor = useCellValue(editorSearchCursor$);
   const search = useCellValue(editorSearchTerm$);
-  const currentRange = ranges[cursor - 1] ?? null;
+  const currentRange = cursor > 0 ? ranges.at(cursor - 1) ?? null : null;
   const contentEditable = useCellValue(editorSearchScrollableContent$);
   const [isSearchOpen, setIsSearchOpen] = useCell(searchOpen$);
   const openSearch = () => {
@@ -191,13 +316,12 @@ function useEditorSearch() {
   const toggleSearch = () => {
     setIsSearchOpen(!isSearchOpen);
   };
-  const rangeCount = ranges.length;
   const scrollToRangeOrIndex = (range, options) => {
     const scrollRange = typeof range === "number" ? ranges[range - 1] : range;
     if (!scrollRange) {
       throw new Error("Error scrolling to range, range does not exist");
     }
-    scrollToRange(scrollRange, contentEditable, options);
+    scrollToRange(scrollRange, contentEditable ?? void 0, options);
   };
   const setSearch = (term) => {
     if ((term ?? "") !== search) {
@@ -208,62 +332,44 @@ function useEditorSearch() {
   const next = () => {
     if (!ranges.length)
       return;
-    const newVal = cursor % ranges.length + 1;
-    scrollToRangeOrIndex(newVal);
-    realm.pub(editorSearchCursor$, newVal);
+    const newCursor = cursor % ranges.length + 1;
+    scrollToRangeOrIndex(newCursor);
+    realm.pub(editorSearchCursor$, newCursor);
   };
   const prev = () => {
     if (!ranges.length)
       return;
-    const newVal = cursor <= 1 ? ranges.length : cursor - 1;
-    scrollToRangeOrIndex(newVal);
-    realm.pub(editorSearchCursor$, newVal);
+    const newCursor = cursor <= 1 ? ranges.length : cursor - 1;
+    scrollToRangeOrIndex(newCursor);
+    realm.pub(editorSearchCursor$, newCursor);
   };
-  const replace = (str, onUpdate) => {
-    const currentRange2 = ranges[cursor - 1];
-    if (!currentRange2) {
+  const replace = (replacement, onUpdate) => {
+    const editor = realm.getValue(editorSearchActiveEditor$);
+    const matches = realm.getValue(editorSearchStateMatches$);
+    const match = matches[cursor - 1];
+    if (!editor || !match)
       return;
-    }
-    const { startContainer, startOffset } = currentRange2 ?? {};
-    replaceTextInRange(currentRange2, str, () => {
-      const unsub = realm.sub(editorSearchRanges$, (newRanges) => {
-        unsub();
-        if (isSimilarRange(newRanges[cursor - 1] ?? {}, {
-          startOffset,
-          startContainer
-        })) {
-          realm.pub(editorSearchCursor$, (cursor + 1) % (newRanges.length + 1) || 1);
-        }
-      });
+    ensureHistoryBaseline(realm, editor);
+    replaceStateMatches(editor, [match], replacement, () => {
+      refreshSearch(realm, editor, { cursor, match });
       onUpdate == null ? void 0 : onUpdate();
     });
   };
-  const replaceAll = (str, onUpdate) => {
-    const runReplaceAll = () => {
-      let ticks = 0;
-      for (let i = ranges.length - 1; i >= 0; i--) {
-        const textReplaceRange = ranges[i];
-        if (!textReplaceRange) {
-          throw new Error("error replacing all text range does not exist");
-        }
-        replaceTextInRange(textReplaceRange, str, () => {
-          ticks++;
-          if (ticks >= ranges.length) {
-            onUpdate == null ? void 0 : onUpdate();
-          }
-        });
-      }
-    };
-    if (typeof requestIdleCallback === "function") {
-      requestIdleCallback(runReplaceAll);
-    } else {
-      setTimeout(runReplaceAll, 0);
-    }
+  const replaceAll = (replacement, onUpdate) => {
+    const editor = realm.getValue(editorSearchActiveEditor$);
+    const matches = realm.getValue(editorSearchStateMatches$);
+    if (!editor || matches.length === 0)
+      return;
+    ensureHistoryBaseline(realm, editor);
+    replaceStateMatches(editor, matches, replacement, () => {
+      refreshSearch(realm, editor);
+      onUpdate == null ? void 0 : onUpdate();
+    });
   };
   return {
     next,
     prev,
-    total: rangeCount,
+    total: ranges.length,
     cursor,
     setSearch,
     search,
@@ -280,73 +386,70 @@ function useEditorSearch() {
   };
 }
 const searchPlugin = realmPlugin({
-  //TODO: ensure proper event cleanup
   init(realm) {
-    if (typeof CSS.highlights === "undefined") {
-      console.warn("CSS.highlights is not supported in this browser. Search functionality will be limited.");
-      return;
+    if (!supportsHighlights()) {
+      console.warn("CSS.highlights is not supported in this browser. Search highlighting will be unavailable.");
     }
     realm.sub(editorSearchCursor$, (cursor) => {
-      const ranges = realm.getValue(editorSearchRanges$);
-      focusHighlightRange(ranges[cursor - 1]);
+      if (realm.getValue(searchOpen$)) {
+        focusHighlightRange(realm.getValue(editorSearchRanges$)[cursor - 1]);
+      }
+    });
+    realm.sub(editorSearchTerm$, () => {
+      const editor = realm.getValue(editorSearchActiveEditor$);
+      if (editor)
+        refreshSearch(realm, editor);
     });
-    const updateHighlights = (searchQuery, textNodeIndex) => {
-      if (!searchQuery) {
-        realm.pub(editorSearchCursor$, 0);
-        realm.pub(editorSearchRanges$, []);
-        resetHighlights();
+    realm.sub(searchOpen$, (searchOpen) => {
+      if (!searchOpen) {
+        clearSearchResults(realm);
         return;
       }
-      const ranges = Array.from(rangeSearchScan(searchQuery, textNodeIndex));
-      realm.pub(editorSearchRanges$, ranges);
-      highlightRanges(ranges);
-      if (ranges.length) {
-        const currentCursor = realm.getValue(editorSearchCursor$) || 1;
-        focusHighlightRange(ranges[currentCursor - 1]);
-        realm.pub(editorSearchCursor$, currentCursor);
-        const scrollRange = ranges[currentCursor - 1];
-        if (!scrollRange)
-          throw new Error("error updating highlights, scroll range does not exist");
-        const contentEditable = realm.getValue(editorSearchScrollableContent$);
-        scrollToRange(scrollRange, contentEditable, {
-          ignoreIfInView: true
-        });
-      } else {
-        resetHighlights();
-      }
-    };
-    realm.sub(editorSearchTextNodeIndex$, (textNodeIndex) => {
-      updateHighlights(realm.getValue(editorSearchTerm$), textNodeIndex);
-    });
-    realm.sub(editorSearchTerm$, (searchQuery) => {
-      updateHighlights(searchQuery, realm.getValue(editorSearchTextNodeIndex$));
+      const editor = realm.getValue(editorSearchActiveEditor$);
+      if (editor)
+        refreshSearch(realm, editor);
     });
-    realm.pub(createRootEditorSubscription$, (editor) => {
-      let observer = null;
-      return editor.registerRootListener((rootElement) => {
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-        if (rootElement) {
-          const initialIndex = indexAllTextNodes(rootElement);
-          realm.pub(editorSearchTextNodeIndex$, initialIndex);
-          observer = new MutationObserver(() => {
-            const newIndex = indexAllTextNodes(rootElement);
-            if (realm.getValue(searchOpen$)) {
-              realm.pub(editorSearchTextNodeIndex$, newIndex);
-            } else {
-              realm.pub(debouncedIndexer$, newIndex);
-            }
-          });
-          observer.observe(rootElement, {
-            childList: true,
-            subtree: true,
-            characterData: true
-          });
-          return () => observer == null ? void 0 : observer.disconnect();
+    realm.pub(createActiveEditorSubscription$, (editor) => {
+      var _a;
+      realm.pubIn({
+        [editorSearchActiveEditor$]: editor,
+        [editorSearchTextNodeIndex$]: EmptyTextNodeIndex,
+        [editorSearchScrollableContent$]: ((_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) ?? null
+      });
+      clearSearchResults(realm);
+      refreshSearch(realm, editor);
+      const unregisterUpdate = editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+        if (dirtyElements.size > 0 || dirtyLeaves.size > 0)
+          refreshSearch(realm, editor);
+      });
+      const unregisterRoot = editor.registerRootListener((rootElement) => {
+        if (!rootElement) {
+          if (realm.getValue(editorSearchActiveEditor$) === editor) {
+            realm.pubIn({
+              [editorSearchTextNodeIndex$]: EmptyTextNodeIndex,
+              [editorSearchScrollableContent$]: null
+            });
+            clearSearchResults(realm);
+          }
+          return;
         }
+        realm.pub(editorSearchScrollableContent$, rootElement.parentElement);
+        refreshSearch(realm, editor);
       });
+      return () => {
+        unregisterUpdate();
+        unregisterRoot();
+        if (realm.getValue(editorSearchActiveEditor$) === editor) {
+          realm.pub(editorSearchActiveEditor$, null);
+          clearSearchResults(realm);
+        }
+      };
+    });
+    realm.sub(activeEditor$, (editor) => {
+      if (!editor) {
+        realm.pub(editorSearchScrollableContent$, null);
+        clearSearchResults(realm);
+      }
     });
   }
 });