Tiptap Comment Extension:

DM Me on Discord - sereneinserenade#4869

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

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/

tiptap-comment-extension.mp4

How to use

npm i @sereneinserenade/tiptap-comment-extension

import StarterKit from "@tiptap/starter-kit";
import Comment 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

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.
Example: editor.commands.setComment('<a-comment-id>')
unsetComment: Unsets the comment for the given commentId.
Example: editor.commands.setComment('<a-comment-id>')