Tiptap 2 Search and Replace

Example of using SearchNReplace extension for Tiptap 2. The repo for npm package is here and here's the link to npm package.

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-n-replace-demo, and/or take a look at a demo-video below.

demo-video

Bildschirmaufnahme.2022-04-14.um.11.27.44.mov

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.replaceTerm

I've published it as an npm package so you can either directly install it,

with NPM

npm i @sereneinserenade/tiptap-extension-search-n-replace

with Yarn

yarn add @sereneinserenade/tiptap-extension-search-n-replace

or you can just copy-paste search.ts file in your own repo and import SearchNReplace from that file and use that as an extension. For more details see Tiptap.vue or the example implementations below.

Here 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.

Recommended IDE Setup

VS Code + Volar

sereneinserenade/tiptap-search-n-replace-demo