Search and Replace rich text mode

[rbbydotdev]

I have a pretty okay working example of search and replace in rich text mode. This utilizes the new CSS Highlight API support is nearly baseline but does not support all browsers. If there is any interest in this, let me know, I can better package and ship upstream.

The plugin:

import { Cell, debounceTime, map, realmPlugin, rootEditor$, useCellValue, useRealm } from "@mdxeditor/editor";
import { $createRangeSelection, $getNearestNodeFromDOMNode, $isTextNode, getNearestEditorFromDOMNode } from "lexical";
import { useCallback } from "react";

export const MDX_SEARCH_NAME = "MdxSearch";
export const MDX_FOCUS_SEARCH_NAME = "MdxFocusSearch";

type TextNodeIndex = {
  allText: string;
  nodeIndex: Node[];
  offsetIndex: number[];
};

export const editorSearchTerm$ = Cell<string>("");
export const editorSearchRanges$ = Cell<Range[]>([]);
export const editorSearchCursor$ = Cell<number>(0);
export const editorSearchTextNodeIndex$ = Cell<TextNodeIndex[]>([]);
export const editorSearchMode$ = Cell<"typing" | "replace">("typing");

function* searchText(allText: string, searchQuery: string): Generator<[start: number, end: number]> {
  if (searchQuery === null) return [];
  let startPos = 0;
  while (startPos < allText.length) {
    const index = allText.toLowerCase().indexOf(searchQuery.toLowerCase(), startPos);
    if (index === -1) break;
    yield [index, index + searchQuery.length - 1];
    startPos = index + searchQuery.length;
  }
}
function* indexTextNodes(containerList?: NodeListOf<HTMLElement>): Iterable<TextNodeIndex> {
  if (!containerList || containerList.length === 0) {
    return [];
  }
  for (const container of containerList ?? []) {
    let allText = "";
    const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
    let currentNode = treeWalker.nextNode();
    const offsetIndex: number[] = [];
    const nodeIndex: Node[] = [];
    while (currentNode) {
      const nodeContent = currentNode.textContent ?? "";
      for (let i = 0; i < nodeContent.length; i++) {
        nodeIndex.push(currentNode);
        offsetIndex.push(i);
        allText += nodeContent[i];
      }
      currentNode = treeWalker.nextNode();
    }
    yield { offsetIndex, nodeIndex, allText };
  }
}
export function* rangeSearchScan(searchQuery: string, textNodeIndex: Iterable<TextNodeIndex>) {
  for (const { allText, offsetIndex, nodeIndex } of textNodeIndex) {
    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();

      range.setStart(startNode, startOffset);
      range.setEnd(endNode, endOffset + 1);
      yield range;
    }
  }
}
const focusHighlightRange = (range?: Range | null) => {
  CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
  if (range) CSS.highlights.set(MDX_FOCUS_SEARCH_NAME, new Highlight(range));
};

const highlightRanges = (ranges: Range[] | Iterable<Range>) => {
  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: Range, options?: { ignoreIfInView?: boolean; behavior?: ScrollBehavior }) => {
  const el = range.startContainer.parentElement as HTMLElement;
  const ignoreIfInView = options?.ignoreIfInView ?? false;
  const behavior = options?.behavior ?? "smooth";
  if (ignoreIfInView) {
    const rect = el.getBoundingClientRect();
    const inView =
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth);
    if (inView) return;
  }
  el.scrollIntoView({ behavior });
};

function isSimilarRange(
  range1: Pick<Range, "startContainer" | "startOffset">,
  range2: Pick<Range, "startContainer" | "startOffset">
) {
  return range1.startContainer === range2.startContainer && range1.startOffset === range2.startOffset;
}

function replaceTextInRange(range: Range, str: string, onUpdate?: () => void) {
  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(
    () => {
      // 1. Find the Lexical nodes corresponding to the DOM nodes in your range.
      const startLexicalNode = $getNearestNodeFromDOMNode(startDomNode);
      const endLexicalNode = $getNearestNodeFromDOMNode(endDomNode);

      // 2. Safety check: Ensure they are valid TextNodes.
      if (!$isTextNode(startLexicalNode) || !$isTextNode(endLexicalNode)) {
        return;
      }

      // 3. Create a Lexical RangeSelection that mirrors your DOM Range.
      try {
        const selection = $createRangeSelection();
        selection.anchor.set(startLexicalNode.getKey(), startOffset, "text");
        selection.focus.set(endLexicalNode.getKey(), endOffset, "text");

        // 4. Perform the replacement. This deletes the selected content
        // and inserts the new string.
        selection.insertText(str);
      } catch (e) {
        console.warn("Error replacing text in the editor:", e);
        if (onUpdate) {
          onUpdate();
        }
        // Optionally, you can throw an error or handle it gracefully.
        // throw new Error("Failed to replace text in the editor");
      }
    },
    {
      onUpdate,
    }
  );
}

export function useEditorSearch() {
  const realm = useRealm();
  const ranges = useCellValue(editorSearchRanges$);
  const cursor = useCellValue(editorSearchCursor$);
  const search = useCellValue(editorSearchTerm$);

  const rangeCount = ranges.length;

  const scrollToRangeOrIndex = useCallback(
    (range: Range | number, options?: { ignoreIfInView?: boolean; behavior?: ScrollBehavior }) => {
      return scrollToRange(typeof range === "number" ? ranges[range - 1] : range, options);
    },
    [ranges]
  );

  const setSearch = useCallback(
    (term: string | null) => {
      realm.pub(editorSearchTerm$, term ?? "");
    },
    [realm]
  );

  const setMode = useCallback(
    (mode: "replace" | "typing") => {
      realm.pub(editorSearchMode$, mode);
    },
    [realm]
  );

  const next = useCallback(() => {
    if (!ranges.length) return;
    const newVal = (cursor % ranges.length) + 1;
    scrollToRangeOrIndex(newVal);
    realm.pub(editorSearchCursor$, newVal);
  }, [ranges, cursor, scrollToRangeOrIndex, realm]);

  const prev = useCallback(() => {
    if (!ranges.length) return;
    const newVal = cursor <= 1 ? ranges.length : cursor - 1;
    scrollToRangeOrIndex(newVal);
    realm.pub(editorSearchCursor$, newVal);
  }, [ranges, cursor, scrollToRangeOrIndex, realm]);

  const replace = useCallback(
    (str: string, onUpdate?: () => void) => {
      const currentRange = ranges[cursor - 1];
      const { startContainer, startOffset } = currentRange;

      return replaceTextInRange(currentRange, str, () => {
        //when the replaced text continues to match the search term
        //cursor must be incremented to the next match
        const unsub = realm.sub(editorSearchRanges$, (newRanges) => {
          unsub();
          if (isSimilarRange(newRanges[cursor - 1], { startOffset, startContainer })) {
            realm.pub(editorSearchCursor$, cursor + 1);
          }
        });
        onUpdate?.();
      });
    },
    [ranges, cursor, realm]
  );

  const replaceAll = useCallback(
    (str: string, onUpdate?: () => void) => {
      let ticks = 0;
      for (let i = ranges.length - 1; i >= 0; i--) {
        replaceTextInRange(ranges[i], str, () => {
          ticks++;
          if (ticks >= ranges.length) {
            onUpdate?.();
          }
        });
      }
    },
    [ranges]
  );

  return {
    next,
    prev,
    total: rangeCount,
    cursor,
    setMode,
    setSearch,
    search,
    ranges,
    scrollToRangeOrIndex,
    replace,
    replaceAll,
  };
}

const getTextNodeIndex = (root: HTMLElement) =>
  indexTextNodes(root?.querySelectorAll("ul,p,h1,h2,h3,h4,h5,h6,code,pre") ?? []);
export const searchPlugin = realmPlugin({
  postInit(realm) {
    const editor = realm.getValue(rootEditor$);
    if (editor && typeof CSS.highlights !== "undefined") {
      realm.sub(editorSearchCursor$, (cursor) => {
        const ranges = realm.getValue(editorSearchRanges$);
        focusHighlightRange(ranges[cursor - 1]);
      });
      function updateHighlights(searchQuery: string, textNodeIndex: Iterable<TextNodeIndex>) {
        if (!searchQuery) {
          realm.pub(editorSearchCursor$, 0);
          realm.pub(editorSearchRanges$, []);
          return resetHighlights();
        }
        const ranges = Array.from(rangeSearchScan(searchQuery, textNodeIndex));
        realm.pub(editorSearchRanges$, ranges);
        // replace will be triggered here via a once sub
        // SEE: const unsub = realm.sub(editorSearchRanges$, (newRanges) => { ....
        // to determine if the replaced text continues to match the search term
        // if it does it will increment the cursor
        highlightRanges(ranges);
        if (ranges.length) {
          const currentCursor = realm.getValue(editorSearchCursor$) || 1;
          focusHighlightRange(ranges[currentCursor - 1]);
          realm.pub(editorSearchCursor$, currentCursor);
          scrollToRange(ranges[currentCursor - 1], { ignoreIfInView: true });
        } else {
          resetHighlights();
        }
      }
      realm.sub(editorSearchTextNodeIndex$, (textNodeIndex) => {
        updateHighlights(realm.getValue(editorSearchTerm$), textNodeIndex);
      });

      realm.sub(editorSearchTerm$, (searchQuery) => {
        updateHighlights(searchQuery, realm.getValue(editorSearchTextNodeIndex$));
      });

      const debouncedIndexer$ = realm.pipe(
        realm.pipe(
          editorSearchTextNodeIndex$,
          realm.transformer(
            debounceTime(250),
            map((index) => {
              return Array.from(index as Iterable<TextNodeIndex>);
            })
          )
        )
      );
      let observer: MutationObserver | null = null;
      //post init should take a clean up function but it does not
      return editor.registerRootListener((rootElement) => {
        if (observer) {
          observer.disconnect();
          observer = null;
        }
        if (rootElement) {
          realm.pub(editorSearchTextNodeIndex$, [...getTextNodeIndex(rootElement)]);
          observer = new MutationObserver(() => {
            if (realm.getValue(editorSearchMode$) === "replace") {
              realm.pub(editorSearchTextNodeIndex$, [...getTextNodeIndex(rootElement)]);
            } else {
              realm.pub(debouncedIndexer$, getTextNodeIndex(rootElement));
            }
          });
          observer.observe(rootElement, {
            childList: true,
            subtree: true,
            characterData: true,
          });
          return () => observer?.disconnect();
        }
      });
    } else {
      console.debug("No active editor found when initializing search plugin");
    }
  },
});

The component:

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { IS_MAC } from "@/lib/isMac";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
import { ChevronDown, ChevronRight, ChevronUp, Replace, ReplaceAll, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { twMerge } from "tailwind-merge";

interface FloatingSearchBarProps {
  isOpen: boolean;
  onClose?: () => void;
  onOpen?: () => void;
  prev: () => void;
  next: () => void;
  cursor: number;
  onChange: (searchTerm: string | null) => void;
  replace: (str: string, onUpdate?: () => void) => void;
  replaceAll: (str: string, onUpdate?: () => void) => void;
  matchTotal: number;
  onSubmit?: () => void;
  className?: string;
}

export function EditorSearchBar({
  prev,
  next,
  cursor,
  isOpen,
  replace,
  replaceAll,
  onClose,
  onChange,
  matchTotal,
  className = "",
}: FloatingSearchBarProps) {
  const [search, setSearch] = useState<string | null>(null);
  const [replaceTerm, setReplaceTerm] = useState<string>("");
  const [isReplaceExpanded, setIsReplaceExpanded] = useState<boolean>(false);
  const pauseBlurClose = useRef(false);
  const handleClose = useCallback(() => {
    onClose?.();
    onChange(null);
  }, [onChange, onClose]);

  const handleSearchChange = (value: string) => {
    onChange?.(value || null);
    setSearch(value || null);
  };

  const searchInputRef = useRef<HTMLInputElement | null>(null);
  const replaceInputRef = useRef<HTMLInputElement | null>(null);
  const selectSearchText = useCallback(() => {
    if (searchInputRef.current && isOpen) {
      searchInputRef.current.focus();
      searchInputRef.current.setSelectionRange(0, searchInputRef.current.value.length);
    }
  }, [isOpen]);
  useEffect(() => {
    selectSearchText();
  }, [isOpen, selectSearchText]);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === "f") {
        selectSearchText();
      }
      if (e.key === "Escape" && isOpen) {
        handleClose();
      }
      if (e.key === "Enter" && isOpen) {
        e.preventDefault();
        if (e.shiftKey) {
          prev();
        } else {
          next();
        }
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, handleClose, matchTotal, prev, next, selectSearchText]);

  //this is a work around replacing text node in the lexical way requires a selection range
  //which when used will trigger a blur of the search bar thus triggering a close
  function pauseBlurCallback() {
    pauseBlurClose.current = true;
    return () => {
      replaceInputRef.current?.addEventListener(
        "focus",
        () => {
          pauseBlurClose.current = false;
        },
        { once: true }
      );
      replaceInputRef.current?.focus();
    };
  }
  //when re-opened, if search is not empty, call onChange with the current search term
  useEffect(() => {
    if (isOpen && search) {
      setSearch(search);
      onChange(search);
    }
  }, [isOpen, onChange, search]);

  if (!isOpen) return null;

  return (
    <div
      onMouseDown={(e) => {
        const target = e.target as HTMLElement;
        if (target.tagName !== "INPUT" && target.tagName !== "BUTTON") {
          e.preventDefault();
          e.stopPropagation();
        }
      }}
      onBlur={(e) => {
        // Only close if focus moves outside the search bar and its children
        // also ignore blur events triggered by the replace input
        if (!e.currentTarget.contains(e.relatedTarget as Node) && !pauseBlurClose.current) {
          handleClose();
        }
      }}
      className={twMerge("bg-background border rounded-lg shadow-lg flex absolute top-16 right-4 z-50", className)}
    >
      <div className={"p-2 flex flex-col items-center gap-1"}>
        <Collapsible className="group/collapsible" defaultOpen={true}>
          <div className="flex items-center gap-1 w-full">
            <CollapsibleTrigger asChild>
              <Button
                variant="ghost"
                className="h-6 w-6 flex p-0 flex-shrink-0"
                onClick={() => setIsReplaceExpanded(!isReplaceExpanded)}
                title={isReplaceExpanded ? "Hide Replace" : "Show Replace"}
              >

                <ChevronRight
                  size={14}
                  className={
                    "transition-transform duration-100 group-data-[state=open]/collapsible:rotate-90 group-data-[state=closed]/collapsible:rotate-0 -ml-0.5"
                  }
                />
              </Button>
            </CollapsibleTrigger>

            <div className="flex-1">
              <Input
                ref={searchInputRef}
                onChange={(e) => handleSearchChange(e.target.value)}
                defaultValue={search ?? ""}
                placeholder="Search"
                className="w-72 h-8 text-sm focus-visible:ring-0 focus-visible:ring-offset-0"
              />
            </div>
            <div>
              <div className="text-xs text-muted-foreground px-2 py-1 text-center w-20 flex items-start">
                {matchTotal > 0 ? `${cursor}/${matchTotal}` : search ? "0/0" : ""}
              </div>
            </div>
          </div>
          <CollapsibleContent>
            <div className="flex items-center mt-2 w-full">
              <div className="pl-7">
                <Input
                  ref={replaceInputRef}
                  value={replaceTerm}
                  onChange={(e) => setReplaceTerm(e.target.value)}
                  placeholder="Replace"
                  className="w-72 h-8 text-sm focus-visible:ring-0 focus-visible:ring-offset-0"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      e.stopPropagation();
                      replace(replaceTerm, pauseBlurCallback());
                      return false;
                    }
                  }}
                />
              </div>
              <div className="px-2 flex gap-4">
                <Button
                  variant="outline"
                  className="w-6 h-6 p-0"
                  title="Replace (Enter)"
                  onClick={() => replace(replaceTerm, pauseBlurCallback())}
                >
                  <Replace />
                </Button>
                <Button
                  variant="outline"
                  className="w-6 h-6 p-0"
                  title={`Replace All (${IS_MAC ? "⌘" : "Ctrl"}+Enter)`}
                  onClick={() => replaceAll(replaceTerm, pauseBlurCallback())}
                >
                  <ReplaceAll />
                </Button>
              </div>
            </div>
          </CollapsibleContent>
        </Collapsible>
      </div>
      <div className="flex w-full p-2 justify-start">
        <div className="w-full gap-1 flex justify-start">
          <Button
            variant="ghost"
            className="h-6 w-6 p-0"
            onClick={prev}
            disabled={matchTotal === 0}
            title="Previous match (Shift+Enter)"
          >
            <ChevronUp />
          </Button>
          <Button
            variant="ghost"
            className="h-6 w-6 p-0"
            onClick={next}
            disabled={matchTotal === 0}
            title="Next match (Enter)"
          >
            <ChevronDown />
          </Button>
        </div>
        <div>
          <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={handleClose} title="Close (Escape)">
            <X className="h-3 w-3" />
          </Button>
        </div>
      </div>
    </div>
  );
}

[rbbydotdev]

[rbbydotdev]

@petyosi have you had a chance to look at this?

[petyosi]

I will look into that next week, on a holiday. My overall sentiment is to accept it as a plugin if you're up
For that.

[rbbydotdev]

enjoy your holiday! would definitely be down to make it a plugin, but could use some input on how the code should look etc. I'll make a PR soon then we can flesh it out there

[petyosi]

Looking at this further, I feel like that we can structure it in the following way:

• Put the plugin itself in the source code editor package
• Create an example for it with an UI that uses shadcn and tailwind and put it a codesandbox
• Document the necessary in a Search/replace chapter here: https://mdxeditor.dev/editor/docs/getting-started.

As a start - is it possible for you to make the whole code above runnable in a codesandbox? I think I will be able to take the rest from there. Also, please let me know if you want to add an attribution to your profile/site in the docs section.

[rbbydotdev]

lets do it! 🙌

[rbbydotdev]

• Create an example for it with an UI that uses shadcn and tailwind and put it a codesandbox
  https://codesandbox.io/p/github/rbbydotdev/mdx-editor-search/sandbox

[rbbydotdev]

Note, search-and-replace for embedded code mirror editors, does not work. I think with some work it could be possible using codemirror apis. Maybe this could itself be broken out into extension configuration/params, for custom editors. A visitor-like api could run a node check like isCodeMirrorEditor() or isLexicalEditor() on search, cursor increment, and/or replace

[rbbydotdev]

starting documentation in pr: #813

[petyosi]

@rbbydotdev I finally got to that. Such an amazing work from you.

First, merged and tweaked the plugin itself in the package. There were several code changes, notice how I deal with the editor instance. There's an eslint rule that I had to turn off, not entirely sure why this was necessary.

Next, I forked your example repository to the mdxeditor org and changed it so that it uses the package.

I also merged the docs PR and added a link to the repository itself.

I think we're good here, but if there's something I'm missing, please let me know. Thank you once again!

[rbbydotdev]

Awesome! I am glad you were able to incorporate it into mdx-editor

lgtm, I am sure there is a edge case hiding in there somewhere. Feel free to tag in me in any issues that come up for it