Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 6 days 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 (about 3 years ago)
Default Branch: main
Last Pushed: 2024-10-07T09:46:31.000Z (2 months ago)
Last Synced: 2024-10-24T21:38:11.385Z (about 2 months 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.07 MB
Stars: 353
Watchers: 5
Forks: 23
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome-tiptap - tiptap-comment-extension
awesome-tiptap - tiptap-comment-extension

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

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