npm.io
1.0.2 • Published 3 years ago

@rcode-link/tiptap-comments

Licence
MIT
Version
1.0.2
Deps
3
Size
9 kB
Vulns
1
Weekly
0
Stars
22

TipTap comments extension

Extension is written in typescript

Comments are saved in extensions storage. When comment is added, thread is created and all comments regarding that thread are inserted there. Structure

[
  {
    "threadId": "uuid",
    "comments": [
      {
        "comment": "text",
        "uuid": "uuid",
        "date": "date-time",
        "user": {},
        "parent_id": "nullable",
        "parent_text": "nullable"
      }
    ]
  }
]

Usage

import customComment from "@rcode-link/tiptap-comments";

const editor = Editor({
    extensions: [
        StarterKit,
        customComment
    ]
})

Define User who is posting:

The user object can be whatever is passed to it

import customComment from "@rcode-link/tiptap-comments";

const editor = Editor({
    extensions: [
        StarterKit,
        customComment.configure({
            user: {
                firstName: user.firstName,
                lastName: user.lastName,
                id: user.id
            }
        })
    ]
})

Add comment and Reply

Comment:

editor.commands.addComments({
    comment: commentTest
})

Reply:

editor.commands.addComments({
    comment: commentTest,
    parent_id: id_OF_parent
})
Remove comment
editor.commands.removeSpecificComment(threadId, commentUuid);
Getting list of comments
editor.storage.comment.comments

Note: Since comments are saved in extension storage, it is necessary when saving data to grab them, and on load to add them back

Adding comments when loaded:

editor.commands.setContent(content, true);
editor.storage.comment.comments = comments;

Getting comments to be saved:

editor.storage.comment

TODO:

  • update comment

License

The MIT License (MIT). Please see License File for more information.