[pull] main from ueberdosis:main

.changeset/add-find-and-replace-extension.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/extension-find-and-replace': minor
+---
+
+Added a new `@tiptap/extension-find-and-replace` extension. It searches the document for a term, highlights all matches with decorations, and replaces the current or all matches. Supports case-sensitive, whole-word, and RE2-compatible regex search, plus commands to jump between results. Regex search avoids catastrophic backtracking but does not support lookarounds or backreferences.

.fallowrc.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
   "ignorePatterns": ["**/*.spec.ts"],
-  "ignoreExports": [{ "file": "**/*", "exports": ["default"] }]
+  "ignoreExports": [{ "file": "**/*", "exports": ["default"] }],
+  "dynamicallyLoaded": ["demos/src/**/index.*"]
 }

demos/src/Extensions/FindAndReplace/React/hooks/useFindAndReplace.js

@@ -0,0 +1,82 @@
+import { useEditorState } from '@tiptap/react'
+import { useEffect, useState } from 'react'
+
+export function useFindAndReplace(editor) {
+  const { searchTerm, replaceTerm, caseSensitive, useRegex, wholeWord, resultCount, currentIndex } =
+    useEditorState({
+      editor,
+      selector: ctx => ({
+        searchTerm: ctx.editor.storage.findAndReplace.searchTerm,
+        replaceTerm: ctx.editor.storage.findAndReplace.replaceTerm,
+        caseSensitive: ctx.editor.storage.findAndReplace.caseSensitive,
+        useRegex: ctx.editor.storage.findAndReplace.useRegex,
+        wholeWord: ctx.editor.storage.findAndReplace.wholeWord,
+        resultCount: ctx.editor.storage.findAndReplace.results.length,
+        currentIndex: ctx.editor.storage.findAndReplace.currentIndex,
+      }),
+    })
+  const [searchInput, setSearchInput] = useState(searchTerm)
+
+  useEffect(() => {
+    setSearchInput(searchTerm)
+  }, [searchTerm])
+
+  const setSearchTerm = term => {
+    setSearchInput(term)
+    editor.commands.setSearchTerm(term)
+  }
+
+  const goToNextResult = () => {
+    editor.commands.goToNextResult()
+  }
+
+  const goToPreviousResult = () => {
+    editor.commands.goToPreviousResult()
+  }
+
+  const replace = () => {
+    editor.commands.replace()
+  }
+
+  const replaceAll = () => {
+    editor.commands.replaceAll()
+  }
+
+  const clearSearch = () => {
+    setSearchInput('')
+    editor.commands.clearSearch()
+  }
+
+  const onSearchKeyDown = event => {
+    if (event.key !== 'Enter') {
+      return
+    }
+
+    if (event.shiftKey) {
+      editor.commands.goToPreviousResult()
+    } else {
+      editor.commands.goToNextResult()
+    }
+  }
+
+  return {
+    searchInput,
+    replaceTerm,
+    caseSensitive,
+    useRegex,
+    wholeWord,
+    resultCount,
+    currentIndex,
+    setSearchTerm,
+    setReplaceTerm: term => editor.commands.setReplaceTerm(term),
+    setCaseSensitive: value => editor.commands.setCaseSensitive(value),
+    setUseRegex: value => editor.commands.setUseRegex(value),
+    setWholeWord: value => editor.commands.setWholeWord(value),
+    goToNextResult,
+    goToPreviousResult,
+    replace,
+    replaceAll,
+    clearSearch,
+    onSearchKeyDown,
+  }
+}

demos/src/Extensions/FindAndReplace/React/index.jsx

@@ -0,0 +1,136 @@
+import './styles.scss'
+
+import Document from '@tiptap/extension-document'
+import FindAndReplace from '@tiptap/extension-find-and-replace'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { EditorContent, useEditor } from '@tiptap/react'
+
+import { useFindAndReplace } from './hooks/useFindAndReplace'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text, FindAndReplace],
+    content: `
+      <p>
+        Find and replace is one of those features you only miss once it is gone.
+        Try searching for "tiptap" in this text. Tiptap highlights every match
+        right inside the editor, no matter if it is written as tiptap, Tiptap
+        or even TIPTAP.
+      </p>
+      <p>
+        Toggle "Match case" to only find exact matches. Enable "Regex" and search
+        for colou?r to find both color and colour at once. Hit "Replace" to swap
+        the current match and jump straight to the next one.
+      </p>
+    `,
+  })
+
+  const {
+    searchInput,
+    replaceTerm,
+    caseSensitive,
+    useRegex,
+    wholeWord,
+    resultCount,
+    currentIndex,
+    setSearchTerm,
+    setReplaceTerm,
+    setCaseSensitive,
+    setUseRegex,
+    setWholeWord,
+    goToNextResult,
+    goToPreviousResult,
+    replace,
+    replaceAll,
+    clearSearch,
+    onSearchKeyDown,
+  } = useFindAndReplace(editor)
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <input
+            type="text"
+            placeholder="Search"
+            aria-label="Search"
+            value={searchInput}
+            onChange={event => setSearchTerm(event.currentTarget.value)}
+            onKeyDown={onSearchKeyDown}
+            data-testid="search-input"
+          />
+          <input
+            type="text"
+            placeholder="Replace"
+            aria-label="Replace"
+            value={replaceTerm}
+            onChange={event => setReplaceTerm(event.currentTarget.value)}
+            data-testid="replace-input"
+          />
+          <label>
+            <input
+              type="checkbox"
+              checked={caseSensitive}
+              onChange={event => setCaseSensitive(event.currentTarget.checked)}
+              data-testid="case-sensitive-checkbox"
+            />
+            Match case
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={wholeWord}
+              disabled={useRegex}
+              onChange={event => setWholeWord(event.currentTarget.checked)}
+              data-testid="whole-word-checkbox"
+            />
+            Whole word
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={useRegex}
+              onChange={event => setUseRegex(event.currentTarget.checked)}
+              data-testid="regex-checkbox"
+            />
+            Regex
+          </label>
+        </div>
+        <div className="button-group">
+          <button
+            onClick={goToPreviousResult}
+            disabled={resultCount === 0}
+            data-testid="previous-button"
+          >
+            Previous
+          </button>
+          <button onClick={goToNextResult} disabled={resultCount === 0} data-testid="next-button">
+            Next
+          </button>
+          <button onClick={replace} disabled={resultCount === 0} data-testid="replace-button">
+            Replace
+          </button>
+          <button
+            onClick={replaceAll}
+            disabled={resultCount === 0}
+            data-testid="replace-all-button"
+          >
+            Replace all
+          </button>
+          <button onClick={clearSearch} data-testid="clear-button">
+            Clear
+          </button>
+          <span className="result-count" data-testid="result-count">
+            {resultCount === 0 ? 'No results' : `${(currentIndex ?? 0) + 1} of ${resultCount}`}
+          </span>
+        </div>
+      </div>
+      <EditorContent editor={editor} />
+    </>
+  )
+}

demos/src/Extensions/FindAndReplace/React/styles.scss

@@ -0,0 +1,21 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+
+.control-group {
+  label {
+    align-items: center;
+    display: flex;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+  }
+
+  .result-count {
+    align-self: center;
+    color: var(--gray-5);
+    font-size: 0.875rem;
+  }
+}