https://github.com/sereneinserenade/tiptap-comment-extension

Google-Docs 📄🔥 like commenting 💬 solution for Tiptap 2(https://tiptap.dev)
https://github.com/sereneinserenade/tiptap-comment-extension

google-docs google-docs-clone googledocs inkline react tiptap tiptap-editor tiptap-v2 typescript vue vue3

Last synced: about 4 hours ago
JSON representation

Google-Docs 📄🔥 like commenting 💬 solution for Tiptap 2(https://tiptap.dev)

• Host: GitHub
• URL: https://github.com/sereneinserenade/tiptap-comment-extension
• Owner: sereneinserenade
• License: mit
• Created: 2021-10-24T12:27:54.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-10T11:54:40.000Z (9 months ago)
• Last Synced: 2024-09-16T23:34:16.226Z (9 days ago)
• Topics: google-docs, google-docs-clone, googledocs, inkline, react, tiptap, tiptap-editor, tiptap-v2, typescript, vue, vue3
• Language: TypeScript
• Homepage: https://sereneinserenade.github.io/tiptap-comment-extension/
• Size: 1.81 MB
• Stars: 331
• Watchers: 5
• Forks: 22
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tiptap Comment Extension:



  

  

  ![GitHub Sponsors](https://img.shields.io/github/sponsors/sereneinserenade?color=%23bf3989&label=Sponsor%20Me&style=for-the-badge)

  ![GitHub Repo stars](https://img.shields.io/github/stars/sereneinserenade/tiptap-comment-extension?label=Star%20the%20Repo&style=for-the-badge)

  DM Me on Discord - sereneinserenade#4869



[Tiptap Extension](https://tiptap.dev/guide/custom-extensions) 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](https://github.com/sponsors/sereneinserenade)**. 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](https://github.com/sereneinserenade)👨‍💻🤩.

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 .

## 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

```bash

npm i @sereneinserenade/tiptap-comment-extension

```

```ts

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.](https://github.com/sereneinserenade/tiptap-comment-extension/blob/main/demos/react/src/components/Tiptap.tsx#L77-L91)

## API:

### Comment.configure

```ts

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('')`

- `unsetComment`: Unsets the comment for the given commentId. 


  Example: `editor.commands.setComment('')`

## Stargazers

[![Stargazers repo roster for @sereneinserenade/tiptap-comment-extension](https://reporoster.com/stars/dark/sereneinserenade/tiptap-comment-extension)](https://github.com/sereneinserenade/tiptap-comment-extension/stargazers)