查找和替换扩展

查找和替换扩展会搜索文档、突出显示匹配项，并提供用于导航和替换的命令。它是无界面的，因此你可以构建控件，并将其放置在应用程序中的任意位置。

安装

npm install @tiptap/extension-find-and-replace

用法

import { Editor } from '@tiptap/core'
import FindAndReplace from '@tiptap/extension-find-and-replace'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [StarterKit, FindAndReplace],
})

请参阅自定义 UI 指南，了解完整的 React 和 Vue 示例。

设置

这些选项用于设置初始状态。编辑器运行时，使用以下命令更新搜索内容。

searchTerm

要搜索的初始文本。在正则表达式模式下，这是正则表达式的源代码。

默认值：''

FindAndReplace.configure({
  searchTerm: 'Tiptap',
})

replaceTerm

替换命令使用的初始文本。

默认值：''

FindAndReplace.configure({
  replaceTerm: 'Editor',
})

caseSensitive

搜索是否严格区分大小写。

默认值：false

FindAndReplace.configure({
  caseSensitive: true,
})

useRegex

是否将 searchTerm 作为正则表达式处理。

默认值：false

FindAndReplace.configure({
  useRegex: true,
  searchTerm: 'colou?r',
})

无效或被判定为不安全的模式不会返回结果。正则表达式模式仅控制匹配：替换文本会按字面插入，因此不会展开 $1 等捕获组引用。

wholeWord

是否仅匹配完整单词。启用 useRegex 时会忽略此选项。

默认值：false

FindAndReplace.configure({
  wholeWord: true,
})

searchDebounceMs

setSearchTerm() 更新搜索结果前的延迟时间，单位为毫秒。将其设置为 0 可立即更新结果。

默认值：250

FindAndReplace.configure({
  searchDebounceMs: 0,
})

injectCSS

是否注入默认的结果高亮样式。禁用此选项后可提供自定义样式。

默认值：true

FindAndReplace.configure({
  injectCSS: false,
})

injectNonce

应用于注入样式元素的 nonce。当内容安全策略要求 nonce 时，请设置此项。

默认值：undefined

FindAndReplace.configure({
  injectNonce: 'your-nonce-here',
})

命令

setSearchTerm()

设置搜索词并高亮每个匹配项。

editor.commands.setSearchTerm('Tiptap')

setReplaceTerm()

设置由 replace() 和 replaceAll() 使用的文本。

editor.commands.setReplaceTerm('Editor')

setCaseSensitive()

启用或禁用大小写敏感匹配。

editor.commands.setCaseSensitive(true)

setUseRegex()

启用或禁用正则表达式匹配。

editor.commands.setUseRegex(true)

setWholeWord()

启用或禁用全词匹配。启用正则表达式模式时，此设置无效。

editor.commands.setWholeWord(true)

goToNextResult()

选择下一个结果。导航到最后一个结果后会循环回第一个结果。

editor.commands.goToNextResult()

goToPreviousResult()

选择上一个结果。导航到第一个结果后会循环回最后一个结果。

editor.commands.goToPreviousResult()

replace()

替换选中的结果，并选择下一个可用结果。

editor.commands.replace()

replaceAll()

替换当前结果集中的每个结果。

editor.commands.replaceAll()

clearSearch()

清除搜索词并移除每个结果的高亮。

editor.commands.clearSearch()

存储

该扩展将其当前状态保存在 editor.storage.findAndReplace 中。

searchTerm

当前搜索词。

editor.storage.findAndReplace.searchTerm

replaceTerm

当前替换文本。

editor.storage.findAndReplace.replaceTerm

caseSensitive、useRegex 和 wholeWord

当前匹配选项。

editor.storage.findAndReplace.caseSensitive
editor.storage.findAndReplace.useRegex
editor.storage.findAndReplace.wholeWord

results

按文档顺序排列的匹配项。每个结果都有 from 和 to 两个 ProseMirror 位置。

editor.storage.findAndReplace.results

currentIndex

所选结果的索引；未选择任何结果时为 null。

editor.storage.findAndReplace.currentIndex

搜索行为

当文档或搜索选项发生变化时，匹配项会更新。一个匹配项可以跨越带有不同标记的文本节点，但绝不会跨越文本块或非文本内联节点，例如硬换行或提及。

replaceAll() 会替换命令运行时存在的匹配项。如果替换文本也符合搜索条件，那么这些新匹配项会在事务完成后保留在存储中。

设置样式

默认情况下，结果会以黄色高亮显示，选中的结果会以橙色高亮显示。禁用 injectCSS 以替换这些样式。

.find-and-replace-result {
  background-color: rgb(255 225 0 / 0.4);
}

.find-and-replace-result-current {
  background-color: rgb(255 165 0 / 0.55);
}

源代码

packages/extension-find-and-replace/

PreviouslyFile handler

Next up浮动菜单