@mdxeditor/editor 3.39.0 → 3.40.0

package/dist/index.d.ts

@@ -798,6 +798,8 @@ export declare function curry1to0<T, R>(proc: (arg: T) => R, arg: T): () => R;
  */
 export declare function curry2to1<T, K, R>(proc: (arg1: T, arg2: K) => R, arg1: T): (arg2: K) => R;
 
+export declare const debouncedIndexer$: NodeRef<TextNodeIndex>;
+
 export declare const DEFAULT_FORMAT: 0;
 
 /**
@@ -1131,6 +1133,18 @@ export declare interface EditorInFocus {
  */
 export declare const editorRootElementRef$: NodeRef<default_2.RefObject<HTMLDivElement> | null>;
 
+export declare const editorSearchCursor$: NodeRef<number>;
+
+export declare const editorSearchRanges$: NodeRef<Range[]>;
+
+export declare const editorSearchScollableContent$: NodeRef<HTMLElement | null>;
+
+export declare const editorSearchTerm$: NodeRef<string>;
+
+export declare const editorSearchTermDebounced$: NodeRef<string>;
+
+export declare const editorSearchTextNodeIndex$: NodeRef<TextNodeIndex>;
+
 /**
  * A function that subscribes to Lexical editor updates or events, and retursns an unsubscribe function.
  * @group Core
@@ -1139,6 +1153,8 @@ export declare type EditorSubscription = (activeEditor: LexicalEditor) => () =>
 
 /* Excluded from this release type: editorWrappers$ */
 
+export declare const EmptyTextNodeIndex: TextNodeIndex;
+
 /* Excluded from this release type: ExportLexicalTreeOptions */
 
 /* Excluded from this release type: exportLexicalTreeToMdast */
@@ -2134,6 +2150,10 @@ export declare type MdastJsx = MdxJsxTextElement | MdxJsxFlowElement;
 
 /* Excluded from this release type: MdastTreeImportOptions */
 
+export declare const MDX_FOCUS_SEARCH_NAME = "MdxFocusSearch";
+
+export declare const MDX_SEARCH_NAME = "MdxSearch";
+
 /**
  * The MDXEditor React component.
  * @group MDXEditor
@@ -2472,6 +2492,8 @@ export declare const PropertyPopover: default_2.FC<{
  */
 export declare const quotePlugin: (params?: unknown) => RealmPlugin;
 
+export declare function rangeSearchScan(searchQuery: string, { allText, offsetIndex, nodeIndex }: TextNodeIndex): Generator<Range, void, unknown>;
+
 /**
  * Holds the readOnly state of the editor.
  * @group Core
@@ -2660,6 +2682,10 @@ export declare interface SaveImageParameters extends BaseImageParameters {
     file?: FileList;
 }
 
+export declare const searchOpen$: NodeRef<boolean>;
+
+export declare const searchPlugin: (params?: unknown) => RealmPlugin;
+
 /**
  * A toolbar primitive you can use to build dropdowns, such as the block type select.
  * @group Toolbar Primitives
@@ -2879,6 +2905,12 @@ export declare const tablePlugin: (params?: Options_3 | undefined) => RealmPlugi
  */
 export declare function tap<T>(arg: T, proc: (arg: T) => unknown): T;
 
+export declare interface TextNodeIndex {
+    allText: string;
+    nodeIndex: Node[];
+    offsetIndex: number[];
+}
+
 /**
  * A plugin that adds support for thematic breaks.
  * @group Thematic Break
@@ -2981,6 +3013,28 @@ export declare function useCodeBlockEditorContext(): CodeBlockEditorContextValue
  */
 export declare const usedLexicalNodes$: NodeRef< KlassConstructor<typeof LexicalNode>[]>;
 
+export declare function useEditorSearch(): {
+    next: () => void;
+    prev: () => void;
+    total: number;
+    cursor: number;
+    setSearch: (term: string | null) => void;
+    search: string;
+    currentRange: Range;
+    isSearchOpen: boolean;
+    setIsSearchOpen: (value: boolean) => void;
+    openSearch: () => void;
+    closeSearch: () => void;
+    toggleSearch: () => void;
+    ranges: Range[];
+    scrollToRangeOrIndex: (range: Range | number, options?: {
+        ignoreIfInView?: boolean;
+        behavior?: ScrollBehavior;
+    }) => void;
+    replace: (str: string, onUpdate?: () => void) => void;
+    replaceAll: (str: string, onUpdate?: () => void) => void;
+};
+
 /**
  * A hook that returns a function that removes the lexical node from the editor.
  * @group Custom Editor Primitives

package/dist/index.js

@@ -28,6 +28,7 @@ import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkD
 import { toolbarClassName$, toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
 import { cmExtensions$, diffMarkdown$, diffSourcePlugin, readOnlyDiff$ } from "./plugins/diff-source/index.js";
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
+import { EmptyTextNodeIndex, MDX_FOCUS_SEARCH_NAME, MDX_SEARCH_NAME, debouncedIndexer$, editorSearchCursor$, editorSearchRanges$, editorSearchScollableContent$, editorSearchTerm$, editorSearchTermDebounced$, editorSearchTextNodeIndex$, rangeSearchScan, searchOpen$, searchPlugin, useEditorSearch } from "./plugins/search/index.js";
 import { BlockTypeSelect } from "./plugins/toolbar/components/BlockTypeSelect.js";
 import { BoldItalicUnderlineToggles, StrikeThroughSupSubToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
 import { ChangeAdmonitionType, admonitionLabelsMap } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
@@ -108,6 +109,7 @@ export {
   DialogButton,
   DiffSourceToggleWrapper,
   DirectiveNode,
+  EmptyTextNodeIndex,
   FrontmatterNode,
   GenericDirectiveEditor,
   GenericHTMLNode,
@@ -133,6 +135,8 @@ export {
   KitchenSinkToolbar,
   ListsToggle,
   MDXEditor,
+  MDX_FOCUS_SEARCH_NAME,
+  MDX_SEARCH_NAME,
   MarkdownParseError,
   MultipleChoiceToggleGroup,
   NESTED_EDITOR_UPDATED_COMMAND,
@@ -210,6 +214,7 @@ export {
   currentSelection$,
   curry1to0,
   curry2to1,
+  debouncedIndexer$,
   defaultCodeBlockLanguage$,
   defaultSvgIcons,
   diffMarkdown$,
@@ -222,6 +227,12 @@ export {
   editImageToolbarComponent$,
   editorInFocus$,
   editorRootElementRef$,
+  editorSearchCursor$,
+  editorSearchRanges$,
+  editorSearchScollableContent$,
+  editorSearchTerm$,
+  editorSearchTermDebounced$,
+  editorSearchTextNodeIndex$,
   editorWrappers$,
   exportLexicalTreeToMdast,
   exportMarkdownFromLexical,
@@ -296,6 +307,7 @@ export {
   placeholder$,
   prop,
   quotePlugin,
+  rangeSearchScan,
   readOnly$,
   readOnlyDiff$,
   realmPlugin,
@@ -307,6 +319,8 @@ export {
   sandpackConfig$,
   sandpackPlugin,
   saveImage$,
+  searchOpen$,
+  searchPlugin,
   setMarkdown$,
   spellCheck$,
   switchFromPreviewToLinkEdit$,
@@ -324,6 +338,7 @@ export {
   translation$,
   updateLink$,
   useCodeBlockEditorContext,
+  useEditorSearch,
   useLexicalNodeRemove,
   useMdastNodeUpdater,
   useNestedEditorContext,

package/dist/plugins/core/index.js

@@ -101,7 +101,7 @@ const mutableMarkdownSignal$ = Signal((r) => {
     ),
     mutableMarkdownSignal$
   );
-});
+}, true);
 const importVisitors$ = Cell([]);
 const usedLexicalNodes$ = Cell([]);
 const syntaxExtensions$ = Cell([]);
@@ -475,10 +475,14 @@ const viewMode$ = Cell("rich-text", (r) => {
     }
   );
 });
-const markdownSourceEditorValue$ = Cell("", (r) => {
-  r.link(markdown$, markdownSourceEditorValue$);
-  r.link(markdownSourceEditorValue$, markdownSignal$);
-});
+const markdownSourceEditorValue$ = Cell(
+  "",
+  (r) => {
+    r.link(markdown$, markdownSourceEditorValue$);
+    r.link(markdownSourceEditorValue$, markdownSignal$);
+  },
+  true
+);
 const activePlugins$ = Cell([]);
 const addActivePlugin$ = Appender(activePlugins$);
 const translation$ = Cell(() => {
@@ -491,6 +495,7 @@ const corePlugin = realmPlugin({
     r.register(createRootEditorSubscription$);
     r.register(createActiveEditorSubscription$);
     r.register(markdownSignal$);
+    r.register(markdownSourceEditorValue$);
     r.pubIn({
       [initialMarkdown$]: (params == null ? void 0 : params.trim) ? initialMarkdown.trim() : initialMarkdown,
       [iconComponentFor$]: params == null ? void 0 : params.iconComponentFor,

package/dist/plugins/search/index.js

@@ -0,0 +1,368 @@
+import { Cell, debounceTime, useRealm, useCellValue, useCell } from "@mdxeditor/gurx";
+import { getNearestEditorFromDOMNode, $getNearestNodeFromDOMNode, $isTextNode, $createRangeSelection } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { contentEditableRef$, createRootEditorSubscription$ } from "../core/index.js";
+const EmptyTextNodeIndex = {
+  allText: "",
+  nodeIndex: [],
+  offsetIndex: []
+};
+const editorSearchTerm$ = Cell("");
+const editorSearchRanges$ = Cell([]);
+const editorSearchCursor$ = Cell(0);
+const editorSearchTextNodeIndex$ = Cell(EmptyTextNodeIndex);
+const searchOpen$ = Cell(false);
+const editorSearchTermDebounced$ = Cell("", (realm) => {
+  realm.link(editorSearchTermDebounced$, realm.pipe(editorSearchTerm$, realm.transformer(debounceTime(250))));
+});
+const editorSearchScollableContent$ = Cell(
+  null,
+  (r) => r.sub(contentEditableRef$, (cref) => {
+    var _a;
+    r.pub(editorSearchScollableContent$, ((_a = cref == null ? void 0 : cref.current) == null ? void 0 : _a.parentNode) ?? null);
+  })
+);
+const MDX_SEARCH_NAME = "MdxSearch";
+const MDX_FOCUS_SEARCH_NAME = "MdxFocusSearch";
+const debouncedIndexer$ = Cell(EmptyTextNodeIndex, (realm) => {
+  realm.link(debouncedIndexer$, realm.pipe(editorSearchTextNodeIndex$, realm.transformer(debounceTime(250))));
+});
+function* searchText(allText, searchQuery) {
+  if (!searchQuery) {
+    return;
+  }
+  let regex;
+  try {
+    regex = new RegExp(searchQuery, "gi");
+  } catch (e) {
+    console.error("Invalid search pattern:", e);
+    return;
+  }
+  let match;
+  while ((match = regex.exec(allText)) !== null) {
+    if (match[0].length === 0) {
+      if (regex.lastIndex === match.index) {
+        regex.lastIndex++;
+      }
+      continue;
+    }
+    const start = match.index;
+    const end = start + match[0].length - 1;
+    yield [start, end];
+  }
+}
+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();
+    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.");
+    }
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset + 1);
+    yield range;
+  }
+}
+const focusHighlightRange = (range) => {
+  CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
+  if (range)
+    CSS.highlights.set(MDX_FOCUS_SEARCH_NAME, new Highlight(range));
+};
+const highlightRanges = (ranges) => {
+  CSS.highlights.set(MDX_SEARCH_NAME, new Highlight(...ranges));
+};
+const resetHighlights = () => {
+  CSS.highlights.delete(MDX_SEARCH_NAME);
+  CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
+};
+const scrollToRange = (range, contentEditable, options) => {
+  const ignoreIfInView = (options == null ? void 0 : options.ignoreIfInView) ?? true;
+  const behavior = (options == null ? void 0 : options.behavior) ?? "smooth";
+  const [first] = range.getClientRects();
+  if (!contentEditable) {
+    console.warn("No content-editable element found for scrolling.");
+    return;
+  }
+  if (!first) {
+    console.warn("No client rect found for the range, cannot scroll.");
+    return;
+  }
+  const containerRect = contentEditable.getBoundingClientRect();
+  const topRelativeToContainer = first.top - containerRect.top;
+  const bottomRelativeToContainer = first.bottom - containerRect.top;
+  if (ignoreIfInView) {
+    const rangeTop = topRelativeToContainer + contentEditable.scrollTop;
+    const rangeBottom = bottomRelativeToContainer + contentEditable.scrollTop;
+    const visibleTop = contentEditable.scrollTop;
+    const visibleBottom = visibleTop + contentEditable.clientHeight;
+    const inView = rangeTop >= visibleTop && rangeBottom <= visibleBottom;
+    if (inView)
+      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 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.");
+    return;
+  }
+  editor.update(
+    () => {
+      const startLexicalNode = $getNearestNodeFromDOMNode(startDomNode);
+      const endLexicalNode = $getNearestNodeFromDOMNode(endDomNode);
+      if (!$isTextNode(startLexicalNode) || !$isTextNode(endLexicalNode)) {
+        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();
+        }
+      }
+    },
+    {
+      onUpdate
+    }
+  );
+}
+function useEditorSearch() {
+  const realm = useRealm();
+  const ranges = useCellValue(editorSearchRanges$);
+  const cursor = useCellValue(editorSearchCursor$);
+  const search = useCellValue(editorSearchTerm$);
+  const currentRange = ranges[cursor - 1] ?? null;
+  const contentEditable = useCellValue(editorSearchScollableContent$);
+  const [isSearchOpen, setIsSearchOpen] = useCell(searchOpen$);
+  const openSearch = () => {
+    setIsSearchOpen(true);
+  };
+  const closeSearch = () => {
+    setIsSearchOpen(false);
+  };
+  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);
+  };
+  const setSearch = (term) => {
+    if ((term ?? "") !== search) {
+      realm.pub(editorSearchCursor$, 0);
+    }
+    realm.pub(editorSearchTermDebounced$, term ?? "");
+  };
+  const next = () => {
+    if (!ranges.length)
+      return;
+    const newVal = cursor % ranges.length + 1;
+    scrollToRangeOrIndex(newVal);
+    realm.pub(editorSearchCursor$, newVal);
+  };
+  const prev = () => {
+    if (!ranges.length)
+      return;
+    const newVal = cursor <= 1 ? ranges.length : cursor - 1;
+    scrollToRangeOrIndex(newVal);
+    realm.pub(editorSearchCursor$, newVal);
+  };
+  const replace = (str, onUpdate) => {
+    const currentRange2 = ranges[cursor - 1];
+    if (!currentRange2) {
+      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);
+        }
+      });
+      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);
+    }
+  };
+  return {
+    next,
+    prev,
+    total: rangeCount,
+    cursor,
+    setSearch,
+    search,
+    currentRange,
+    isSearchOpen,
+    setIsSearchOpen,
+    openSearch,
+    closeSearch,
+    toggleSearch,
+    ranges,
+    scrollToRangeOrIndex,
+    replace,
+    replaceAll
+  };
+}
+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;
+    }
+    realm.sub(editorSearchCursor$, (cursor) => {
+      const ranges = realm.getValue(editorSearchRanges$);
+      focusHighlightRange(ranges[cursor - 1]);
+    });
+    const updateHighlights = (searchQuery, textNodeIndex) => {
+      if (!searchQuery) {
+        realm.pub(editorSearchCursor$, 0);
+        realm.pub(editorSearchRanges$, []);
+        resetHighlights();
+        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(editorSearchScollableContent$);
+        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$));
+    });
+    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();
+        }
+      });
+    });
+  }
+});
+export {
+  EmptyTextNodeIndex,
+  MDX_FOCUS_SEARCH_NAME,
+  MDX_SEARCH_NAME,
+  debouncedIndexer$,
+  editorSearchCursor$,
+  editorSearchRanges$,
+  editorSearchScollableContent$,
+  editorSearchTerm$,
+  editorSearchTermDebounced$,
+  editorSearchTextNodeIndex$,
+  rangeSearchScan,
+  searchOpen$,
+  searchPlugin,
+  useEditorSearch
+};

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",