Search & Replace

Docs

Search & Replace

Search and replace text in the editor.

Installation

npx shadcn add https://tiptap.niazmorshed.dev/r/search-and-replace.json

const extensions = [
	StarterKit.configure({
    // ...
	}),
	SearchAndReplace,
];
 
const editor = useEditor({
	extensions,
});

Set classname for the search results chunks.

SearchAndReplace.configure({
	searchResultClass: "bg-green-500",
});

Set classname for the selected search result chunk.

SearchAndReplace.configure({
	selectedResultClass: "bg-red-500",
});

Disable regex search.

SearchAndReplace.configure({
	disableRegex: true,
});

Set the search term.

editor.commands.setSearchTerm("search term");

Set the replace term.

editor.commands.setReplaceTerm("replace term");

Replace the selected search term with the replace term.

editor.commands.replace();

Replace all instances of the search term with the replace term.

editor.commands.replaceAll();

Select the next search result.

editor.commands.selectNextResult();

Select the previous search result.

editor.commands.selectPreviousResult();

Set case sensitivity for the search.

editor.commands.setCaseSensitive(true);

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;

Get the current search term from the editor storage.

const searchTerm = searchAndReplaceStorage.searchTerm;

Get the current replace term from the editor storage.

const replaceTerm = searchAndReplaceStorage.replaceTerm;

Get the current search results from the editor storage.

const results = searchAndReplaceStorage.results;

Get the last search term from the editor storage.

const lastSearchTerm = searchAndReplaceStorage.lastSearchTerm;

Get the currently selected search result index from the editor storage.

const selectedResult = searchAndReplaceStorage.selectedResult;

Get the last selected search result index from the editor storage.

const lastSelectedResult = searchAndReplaceStorage.lastSelectedResult;

Get the case sensitivity state from the editor storage.

const caseSensitive = searchAndReplaceStorage.caseSensitive;

Get the last case sensitivity state from the editor storage.

const lastCaseSensitive = searchAndReplaceStorage.lastCaseSensitive;