Tiptap 3 Search and Replace

Search and Replace extension for Tiptap 3. Published to npm as @memfoldai/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 :heart: 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, 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.

https://user-images.githubusercontent.com/45892659/163356581-5fd38888-4e29-41d9-b64f-d17948ef7a16.mov

How to use

Note: This repository and demo target Tiptap v3. Use versions ^3.x for @tiptap/* packages. Demo imports the local extension from src/searchAndReplace.ts.

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,

npm i @memfoldai/tiptap-search-and-replace

yarn add @memfoldai/tiptap-search-and-replace

Here are example implementations in Vue and 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 = 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);
};

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!

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