@rcode-link/tiptap-comments

1.0.2 • Public • Published

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.

Package Sidebar

Install

npm i @rcode-link/tiptap-comments

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

9.18 kB

Total Files

4

Last publish

Collaborators

  • radanstupar