Search & Replace
Search and replace text in the editor.
Installation
Run the following command to install the extension & associated toolbar component.
npx shadcn add https://tiptap.niazmorshed.dev/r/search-and-replace.json
Usage
const extensions = [
StarterKit.configure({
// ...
}),
SearchAndReplace,
];
const editor = useEditor({
extensions,
});
Settings
searchResultClass
Set classname for the search results chunks.
SearchAndReplace.configure({
searchResultClass: "bg-green-500",
});
selectedResultClass
Set classname for the selected search result chunk.
SearchAndReplace.configure({
selectedResultClass: "bg-red-500",
});
disableRegex
Disable regex search.
SearchAndReplace.configure({
disableRegex: true,
});
Commands
setSearchTerm
Set the search term.
editor.commands.setSearchTerm("search term");
setReplaceTerm
Set the replace term.
editor.commands.setReplaceTerm("replace term");
replace
Replace the selected search term with the replace term.
editor.commands.replace();
replaceAll
Replace all instances of the search term with the replace term.
editor.commands.replaceAll();
selectNextResult
Select the next search result.
editor.commands.selectNextResult();
selectPreviousResult
Select the previous search result.
editor.commands.selectPreviousResult();
setCaseSensitive
Set case sensitivity for the search.
editor.commands.setCaseSensitive(true);
Storage
Note: It's important to type the storage as the extension's storage type to access the storage properties. See docs here.
So, firstly get the storage for SearchAndReplace
extension like this 👇. Then you can access the storage properties.
const searchAndReplaceStorage = editor.storage.searchAndReplace as SearchAndReplaceStorage;
searchTerm
Get the current search term from the editor storage.
const searchTerm = searchAndReplaceStorage.searchTerm;
replaceTerm
Get the current replace term from the editor storage.
const replaceTerm = searchAndReplaceStorage.replaceTerm;
results
Get the current search results from the editor storage.
const results = searchAndReplaceStorage.results;
lastSearchTerm
Get the last search term from the editor storage.
const lastSearchTerm = searchAndReplaceStorage.lastSearchTerm;
selectedResult
Get the currently selected search result index from the editor storage.
const selectedResult = searchAndReplaceStorage.selectedResult;
lastSelectedResult
Get the last selected search result index from the editor storage.
const lastSelectedResult = searchAndReplaceStorage.lastSelectedResult;
caseSensitive
Get the case sensitivity state from the editor storage.
const caseSensitive = searchAndReplaceStorage.caseSensitive;
lastCaseSensitive
Get the last case sensitivity state from the editor storage.
const lastCaseSensitive = searchAndReplaceStorage.lastCaseSensitive;