Search
Search and replace text within the editor. This is built on top of prosemirror-search.
Usage
To highlight search matches, you must load the style.css
file or define your own styles for the .ProseMirror-search-match
(search match) and .ProseMirror-active-search-match
(active match) classes.
import 'prosekit/extensions/search/style.css'
Call defineSearchCommands()
to define related commands.
import { defineSearchCommands } from 'prosekit/extensions/search'
const extension = defineSearchCommands()
In your search component, when the search text and replace text change, you should create a new extension with the specified text. Typically, you will need to call the useExtension()
function from various framework bindings.
import { defineSearchQuery } from 'prosekit/extensions/search'
const extension = defineSearchQuery({ search: 'foo', replace: 'bar' })
Commands
findNext
Find the next instance of the search query after the current selection and move the selection to it.
editor.commands.findNext()
findPrev
Find the previous instance of the search query and move the selection to it.
editor.commands.findPrev()
findNextNoWrap
Find the next instance of the search query and move the selection to it. Don't wrap around at the end of document or search range.
editor.commands.findNextNoWrap()
findPrevNoWrap
Find the previous instance of the search query and move the selection to it. Don't wrap at the start of the document or search range.
editor.commands.findPrevNoWrap()
replaceNext
Replace the currently selected instance of the search query, and move to the next one. Or select the next match, if none is already selected.
editor.commands.replaceNext()
replaceNextNoWrap
Replace the next instance of the search query. Don't wrap around at the end of the document.
editor.commands.replaceNextNoWrap()
replaceCurrent
Replace the currently selected instance of the search query, if any, and keep it selected.
editor.commands.replaceCurrent()
replaceAll
Replace all instances of the search query.
editor.commands.replaceAll()