Tiptap Comment Extension:

<p align="center"> <img src="assets/logo.svg" width="200"/>

DM Me on Discord - sereneinserenade#4869

</p>

Tiptap Extension for having Google-Docs like pro-commenting in Tiptap.

Supports both TipTap 2 and TipTap 3.

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 Resiable Images And Videos, Search and Replace, LanguageTool integration with tiptap. You can check it our here https://github.com/sereneinserenade#a-glance-of-my-projects.

Demo:

Try live demo: https://sereneinserenade.github.io/tiptap-comment-extension/

https://github.com/sereneinserenade/tiptap-comment-extension/assets/45892659/5d66b6b7-7de0-4cc4-bfe4-0ec00d34aa4a

How to use

bashCopy
npm i @sereneinserenade/tiptap-comment-extension

tsCopy
import StarterKit from "@tiptap/starter-kit";
import CommentExtension from "@sereneinserenade/tiptap-comment-extension";

/* or
import { CommentExtension } from "@sereneinserenade/tiptap-comment-extension";
*/

const extensions = [
  StarterKit,
  Comment.configure({
    HTMLAttributes: {
      class: "my-comment",
    },
    onCommentActivated: (commentId) => {
      setActiveCommentId(commentId);

      if (commentId) setTimeout(() => focusCommentWithActiveId(commentId));
    },
  }),
];

For more details, look at react demo.

API:

Comment.configure

tsCopy
Comment.configure({
  HTMLAttributes: {
    class: "my-comment",
  },
  onCommentActivated: (commentId) => {
    setActiveCommentId(commentId);

    if (commentId) setTimeout(() => focusCommentWithActiveId(commentId));
  },
});

Commands:

• setComment: Sets the comment for the current selection with the given commentId. <br/>
  Example: editor.commands.setComment('<a-comment-id>')
• unsetComment: Unsets the comment for the given commentId. <br/>
  Example: editor.commands.unsetComment('<a-comment-id>')

Stargazers