Awesome
Tiptap Comment Extension:
<p align="center"> <img src="assets/logo.svg" width="200"/>
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/
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. <br/> Example:editor.commands.setComment('<a-comment-id>')
unsetComment
: Unsets the comment for the given commentId. <br/> Example:editor.commands.setComment('<a-comment-id>')