Skip to content

sereneinserenade/tiptap-comment-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

32 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Tiptap Comment Extension:

GitHub Sponsors GitHub Repo stars 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 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

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.unsetComment('<a-comment-id>')

Stargazers

Stargazers repo roster for @sereneinserenade/tiptap-comment-extension