Package Exports
- @sereneinserenade/tiptap-search-and-replace
- @sereneinserenade/tiptap-search-and-replace/dist/index.cjs.js
- @sereneinserenade/tiptap-search-and-replace/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sereneinserenade/tiptap-search-and-replace) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Tiptap 2 Search and Replace
Search and Replace extension for Tiptap 2. Published to npm as @sereneinserenade/tiptap-search-and-replace.
A ⭐️ to the repo if you 👍 / ❤️ what I'm doing would be much appreciated. If you're using this extension and making money from it, it'd be very kind of you to ❤️ Sponsor me. If you're looking for a dev to work you on your project's Rich Text Editor with or as a frontend developer, DM me on Discord/Twitter/LinkedIn👨💻🤩.
I've made a bunch of extensions for Tiptap 2, some of them are Google Docs like Commenting, Resize image and Videos, LanguageTool integration with tiptap. You can check it our here https://github.com/sereneinserenade#a-glance-of-my-projects .
Live Demo
Try it out live at https://sereneinserenade.github.io/tiptap-search-and-replace, and/or take a look at a demo-video below.
How to use
Note: npm version is not up-to-date. Just copy paste the extension in your code and it should work
Ideally you should keep track of these states in your code, but if you absolutely need to read the searchTerm and replaceTerm from extension, here's the code.
const searchTerm: string = editor.storage.searchAndReplace.searchTerm
const replaceTerm: string = editor.storage.searchAndReplace.replaceTermI've published it as an npm package so you can either directly install it,
with NPM
npm i @sereneinserenade/tiptap-search-and-replacewith Yarn
yarn add @sereneinserenade/tiptap-search-and-replaceHere are example implementations in Vue and React
Vue
import { Editor } from "@tiptap/core";
import { SearchNReplace } from "./path/to/search-n-replace.ts/";
const editor = new Editor({
content: "<p>Example Text</p>",
extensions: [
SearchNReplace.configure({
searchResultClass: "search-result", // class to give to found items. default 'search-result'
caseSensitive: false, // no need to explain
disableRegex: false, // also no need to explain
}),
],
});
const searchTerm = ref<string>("replace");
const replaceTerm = ref<string>("astonishing");
// you can use the commands provided by SearchNReplace extension to update the values of search and replace terms.
const updateSearchReplace = () => {
if (!editor.value) return;
editor.value.commands.setSearchTerm(searchTerm.value);
editor.value.commands.setReplaceTerm(replaceTerm.value);
};React
import { Editor } from "@tiptap/core";
import { SearchNReplace } from "./path/to/search-n-replace.ts/";
const editor = new Editor({
content: "<p>Example Text</p>",
extensions: [
SearchNReplace.configure({
searchResultClass: "search-result", // class to give to found items. default 'search-result'
caseSensitive: false, // no need to explain
disableRegex: false, // also no need to explain
}),
],
});
const searchTerm = useState<string>("replace");
const replaceTerm = useState<string>("astonishing");
// you can use the commands provided by SearchNReplace extension to update the values of search and replace terms.
const updateSearchReplace = () => { // you can probably use `useCallback` hook)
if (!editor.value) return;
editor.value.commands.setSearchTerm(searchTerm.value);
editor.value.commands.setReplaceTerm(replaceTerm.value);
};Contributing
Show your ❤️ by ⭐️ing this repository! It means a lot.
Clone the repo, do something, make a PR(or not). You know what's the drill. Looking forward to your PRs, you amazing devs.
Awesome peeps, who've starred this repo 🚀! Thank you!
Stuff that nobody really cares about
Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.