feat: Add find and replace interface (#5642)

shared/editor/components/Styles.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-irregular-whitespace */
 import { lighten, transparentize } from "polished";
-import styled, { DefaultTheme, css } from "styled-components";
+import styled, { DefaultTheme, css, keyframes } from "styled-components";
 
 export type Props = {
   rtl: boolean;
@@ -11,6 +11,12 @@ export type Props = {
   theme: DefaultTheme;
 };
 
+export const pulse = keyframes`
+  0% { box-shadow: 0 0 0 1px rgba(255, 213, 0, 0.75) }
+  50% { box-shadow: 0 0 0 4px rgba(255, 213, 0, 0.75) }
+  100% { box-shadow: 0 0 0 1px rgba(255, 213, 0, 0.75) }
+`;
+
 const codeMarkCursor = () => css`
   /* Based on https://github.com/curvenote/editor/blob/main/packages/prosemirror-codemark/src/codemark.css */
   .no-cursor {
@@ -232,6 +238,17 @@ const codeBlockStyle = (props: Props) => css`
   }
 `;
 
+const findAndReplaceStyle = () => css`
+  .find-result {
+    background: rgba(255, 213, 0, 0.25);
+
+    &.current-result {
+      background: rgba(255, 213, 0, 0.75);
+      animation: ${pulse} 150ms 1;
+    }
+  }
+`;
+
 const style = (props: Props) => `
 flex-grow: ${props.grow ? 1 : 0};
 justify-content: start;
@@ -1481,6 +1498,7 @@ const EditorContainer = styled.div<Props>`
   ${mathStyle}
   ${codeMarkCursor}
   ${codeBlockStyle}
+  ${findAndReplaceStyle}
 `;
 
 export default EditorContainer;

shared/editor/extensions/FindAndReplace.ts

@@ -0,0 +1,291 @@
+import { escapeRegExp } from "lodash";
+import { Node } from "prosemirror-model";
+import { Command, Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import Extension from "../lib/Extension";
+
+const pluginKey = new PluginKey("find-and-replace");
+
+export default class FindAndReplace extends Extension {
+  public get name() {
+    return "find-and-replace";
+  }
+
+  public get defaultOptions() {
+    return {
+      resultClassName: "find-result",
+      resultCurrentClassName: "current-result",
+      caseSensitive: false,
+      regexEnabled: false,
+    };
+  }
+
+  public commands() {
+    return {
+      /**
+       * Find all matching results in the document for the given options
+       *
+       * @param attrs.text The search query
+       * @param attrs.caseSensitive Whether the search should be case sensitive
+       * @param attrs.regexEnabled Whether the search should be a regex
+       *
+       * @returns A command that finds all matching results
+       */
+      find: (attrs: {
+        text: string;
+        caseSensitive?: boolean;
+        regexEnabled?: boolean;
+      }) => this.find(attrs.text, attrs.caseSensitive, attrs.regexEnabled),
+
+      /**
+       * Find and highlight the next matching result in the document
+       */
+      nextSearchMatch: () => this.goToMatch(1),
+
+      /**
+       * Find and highlight the previous matching result in the document
+       */
+      prevSearchMatch: () => this.goToMatch(-1),
+
+      /**
+       * Replace the current highlighted result with the given text
+       *
+       * @param attrs.text The text to replace the current result with
+       */
+      replace: (attrs: { text: string }) => this.replace(attrs.text),
+
+      /**
+       * Replace all matching results with the given text
+       *
+       * @param attrs.text The text to replace all results with
+       */
+      replaceAll: (attrs: { text: string }) => this.replaceAll(attrs.text),
+
+      /**
+       * Clear the current search
+       */
+      clearSearch: () => this.clear(),
+    };
+  }
+
+  private get decorations() {
+    return this.results.map((deco, index) =>
+      Decoration.inline(deco.from, deco.to, {
+        class:
+          this.options.resultClassName +
+          (this.currentResultIndex === index
+            ? ` ${this.options.resultCurrentClassName}`
+            : ""),
+      })
+    );
+  }
+
+  public replace(replace: string): Command {
+    return (state, dispatch) => {
+      const result = this.results[this.currentResultIndex];
+
+      if (!result) {
+        return false;
+      }
+
+      const { from, to } = result;
+      dispatch?.(state.tr.insertText(replace, from, to).setMeta(pluginKey, {}));
+
+      return true;
+    };
+  }
+
+  public replaceAll(replace: string): Command {
+    return ({ tr }, dispatch) => {
+      let offset: number | undefined;
+
+      if (!this.results.length) {
+        return false;
+      }
+
+      this.results.forEach(({ from, to }, index) => {
+        tr.insertText(replace, from, to);
+        offset = this.rebaseNextResult(replace, index, offset);
+      });
+
+      dispatch?.(tr);
+      return true;
+    };
+  }
+
+  public find(
+    searchTerm: string,
+    caseSensitive = this.options.caseSensitive,
+    regexEnabled = this.options.regexEnabled
+  ): Command {
+    return (state, dispatch) => {
+      this.options.caseSensitive = caseSensitive;
+      this.options.regexEnabled = regexEnabled;
+      this.searchTerm = regexEnabled ? searchTerm : escapeRegExp(searchTerm);
+      this.currentResultIndex = 0;
+
+      dispatch?.(state.tr.setMeta(pluginKey, {}));
+      return true;
+    };
+  }
+
+  public clear(): Command {
+    return (state, dispatch) => {
+      this.searchTerm = "";
+      this.currentResultIndex = 0;
+
+      dispatch?.(state.tr.setMeta(pluginKey, {}));
+      return true;
+    };
+  }
+
+  private get findRegExp() {
+    return RegExp(this.searchTerm, !this.options.caseSensitive ? "gui" : "gu");
+  }
+
+  private goToMatch(direction: number): Command {
+    return (state, dispatch) => {
+      if (direction > 0) {
+        if (this.currentResultIndex === this.results.length - 1) {
+          this.currentResultIndex = 0;
+        } else {
+          this.currentResultIndex += 1;
+        }
+      } else {
+        if (this.currentResultIndex === 0) {
+          this.currentResultIndex = this.results.length - 1;
+        } else {
+          this.currentResultIndex -= 1;
+        }
+      }
+
+      dispatch?.(state.tr.setMeta(pluginKey, {}));
+
+      const element = window.document.querySelector(
+        `.${this.options.resultCurrentClassName}`
+      );
+      if (element) {
+        void scrollIntoView(element, {
+          scrollMode: "if-needed",
+          block: "center",
+        });
+      }
+      return true;
+    };
+  }
+
+  private rebaseNextResult(replace: string, index: number, lastOffset = 0) {
+    const nextIndex = index + 1;
+
+    if (!this.results[nextIndex]) {
+      return undefined;
+    }
+
+    const { from: currentFrom, to: currentTo } = this.results[index];
+    const offset = currentTo - currentFrom - replace.length + lastOffset;
+    const { from, to } = this.results[nextIndex];
+
+    this.results[nextIndex] = {
+      to: to - offset,
+      from: from - offset,
+    };
+
+    return offset;
+  }
+
+  private search(doc: Node) {
+    this.results = [];
+    const mergedTextNodes: {
+      text: string | undefined;
+      pos: number;
+    }[] = [];
+    let index = 0;
+
+    if (!this.searchTerm) {
+      return;
+    }
+
+    doc.descendants((node, pos) => {
+      if (node.isText) {
+        if (mergedTextNodes[index]) {
+          mergedTextNodes[index] = {
+            text: mergedTextNodes[index].text + (node.text ?? ""),
+            pos: mergedTextNodes[index].pos,
+          };
+        } else {
+          mergedTextNodes[index] = {
+            text: node.text,
+            pos,
+          };
+        }
+      } else {
+        index += 1;
+      }
+    });
+
+    mergedTextNodes.forEach(({ text = "", pos }) => {
+      const search = this.findRegExp;
+      let m;
+
+      while ((m = search.exec(text))) {
+        if (m[0] === "") {
+          break;
+        }
+
+        this.results.push({
+          from: pos + m.index,
+          to: pos + m.index + m[0].length,
+        });
+      }
+    });
+  }
+
+  private createDeco(doc: Node) {
+    this.search(doc);
+    return this.decorations
+      ? DecorationSet.create(doc, this.decorations)
+      : DecorationSet.empty;
+  }
+
+  get allowInReadOnly() {
+    return true;
+  }
+
+  get focusAfterExecution() {
+    return false;
+  }
+
+  get plugins() {
+    return [
+      new Plugin({
+        key: pluginKey,
+        state: {
+          init: () => DecorationSet.empty,
+          apply: (tr, decorationSet) => {
+            const action = tr.getMeta(pluginKey);
+
+            if (action) {
+              return this.createDeco(tr.doc);
+            }
+
+            if (tr.docChanged) {
+              return decorationSet.map(tr.mapping, tr.doc);
+            }
+
+            return decorationSet;
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+        },
+      }),
+    ];
+  }
+
+  private results: { from: number; to: number }[] = [];
+  private currentResultIndex = 0;
+  private searchTerm = "";
+}

shared/editor/lib/Extension.ts

@@ -46,6 +46,10 @@ export default class Extension {
     return false;
   }
 
+  get focusAfterExecution(): boolean {
+    return true;
+  }
+
   keys(_options: {
     type?: NodeType | MarkType;
     schema: Schema;

shared/editor/lib/ExtensionManager.ts

@@ -209,7 +209,9 @@ export default class ExtensionManager {
           if (!view.editable && !extension.allowInReadOnly) {
             return false;
           }
-          view.focus();
+          if (extension.focusAfterExecution) {
+            view.focus();
+          }
           return callback(attrs)(view.state, view.dispatch, view);
         };
 

shared/editor/nodes/index.ts

@@ -1,6 +1,7 @@
 import BlockMenu from "../extensions/BlockMenu";
 import ClipboardTextSerializer from "../extensions/ClipboardTextSerializer";
 import DateTime from "../extensions/DateTime";
+import FindAndReplace from "../extensions/FindAndReplace";
 import History from "../extensions/History";
 import Keys from "../extensions/Keys";
 import MaxLength from "../extensions/MaxLength";
@@ -109,6 +110,7 @@ export const richExtensions: Nodes = [
   Math,
   MathBlock,
   PreventTab,
+  FindAndReplace,
 ];
 
 /**