sereneinserenade / tiptap-comment-extension Goto Github PK

View Code? Open in Web Editor NEW

298.0 5.0 18.0 1.85 MB

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

Home Page: https://sereneinserenade.github.io/tiptap-comment-extension/

License: MIT License

JavaScript 18.38% TypeScript 81.62%

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

tiptap-comment-extension's Introduction

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

Stargazers

tiptap-comment-extension's People

Contributors

Stargazers

Watchers

Forkers

tabdon jaulz gmickel ancebear svaticalm basd1995 hondrytravis thefinnomenon vpsinghg eta-orionis guoyuping nickatblueflite koorukuroo dhruvii255 erichasegawa jarrodmjack jiangchangxiong yangfuhai

tiptap-comment-extension's Issues

prevent extension from splitting inline-code and link marks

Currently, the extension will split around the inline code block or a link for the final markup as follows:
and the markup looks like this:

<span class="my-comment" data-comment-id="ac5353dc3-357f-4ea9-b9b8-9500bf7aa76fa">prevent extension from splitting </span>
<code>code</code>
<span class="my-comment" data-comment-id="ac5353dc3-357f-4ea9-b9b8-9500bf7aa76fa"> blocks and links</span>

I'd prefer it as follows:

<span class="my-comment" data-comment-id="ac5353dc3-357f-4ea9-b9b8-9500bf7aa76fa">
prevent extension from splitting <code>code</code> blocks and links
</span>

Bug Report: select multiple blocks then add one comment, will generate duplicate comments.

I understand what happens, because the comment span will be separated into multiple blocks.

how to enable overlapping comments

If two comments select the same place, the new one overwrites the old one. If you delete the new ones, the old ones disappear. Is there a solution

Populating replies

Possible to populate replies? If so then how?

Missing MIT License file

Thanks for creating this, Jeet! The package.json indicates that this library has an MIT license, but there's no LICENSE file in the repo. The standard MIT license has a clause which includes:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software

Without a LICENSE file, it's unclear how to comply with the MIT license of this project.

I'm happy to open a PR for a LICENSE file if requested.

Compatibility Issues with Next.js Integration

I am currently working on a Next.js project and have been trying to integrate the 'tiptap-comment-extension' . This extension has worked wonderfully in my React projects, and I'm eager to use its features in Next.js. However, I am encountering compatibility issues.

The specific problem arises when importing the extension into my Next.js project, which results in an internal server error. My suspicion is that this issue is related to Server-Side Rendering (SSR) in Next.js, as the extension was designed for a Vue or React environment.

I have checked the documentation and tried various approaches to resolve this, but have not been successful. I am reaching out for guidance or suggestions on adapting this extension for seamless integration with Next.js.

Here's a codesandbox/replit reproduction of your React demo in Next.js.

deleting the text will also delete the comment

How to reproduce:

Add some comment on a text
Delete text that contain comment
the comment gone

is there any way i can prevent deletion of text that contain comment?

Strange behavior when select word with double click

If you select word with double click, popup not opens.
But if you click anywhere after it, popup will shown and not works properly.

The BubleMenu does not close immediately after the selection is reset

How to reproduce:

You can reproduce it here: https://sereneinserenade.github.io/tiptap-comment-extension/

Turn comments mode on
Select text (bubble menu will open)
Click anywhere on the text (bubble menu won't close)
Click anywhere on the text again (bubble menu will close)

Possible solution:

Add one more option to "should-show" bubble menu props:
:should-show=" ({ editor, view, state, oldState, from, to }) => isCommentModeOn && !editor.state.selection.empty && !activeCommentsInstance.uuid && from !== to "

sereneinserenade / tiptap-comment-extension Goto Github PK

tiptap-comment-extension's Introduction

Tiptap Comment Extension:

Demo:

How to use

API:

Comment.configure

Commands:

Stargazers

tiptap-comment-extension's People

Contributors

Stargazers

Watchers

Forkers

tiptap-comment-extension's Issues

How to reproduce:

Possible solution:

Recommend Projects

Recommend Topics

Recommend Org