{"id":13770319,"url":"https://github.com/osain-az/editorjs-comment","last_synced_at":"2026-01-12T03:02:46.470Z","repository":{"id":223025448,"uuid":"759002479","full_name":"osain-az/editorjs-comment","owner":"osain-az","description":"Editorjs plugin that allows you to add comment to editorjs  (Editorjs-comment )","archived":false,"fork":false,"pushed_at":"2024-02-27T10:56:02.000Z","size":192,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-27T03:25:49.538Z","etag":null,"topics":["editorjs","editorjs-comment","editorjs-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/editorjs-comment","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/osain-az.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-17T17:41:33.000Z","updated_at":"2025-09-24T09:39:46.000Z","dependencies_parsed_at":"2024-08-03T17:03:25.016Z","dependency_job_id":null,"html_url":"https://github.com/osain-az/editorjs-comment","commit_stats":null,"previous_names":["osain-az/editorjs-comment"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/osain-az/editorjs-comment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osain-az%2Feditorjs-comment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osain-az%2Feditorjs-comment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osain-az%2Feditorjs-comment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osain-az%2Feditorjs-comment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/osain-az","download_url":"https://codeload.github.com/osain-az/editorjs-comment/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osain-az%2Feditorjs-comment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332847,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editorjs","editorjs-comment","editorjs-plugin"],"created_at":"2024-08-03T17:00:36.212Z","updated_at":"2026-01-12T03:02:46.441Z","avatar_url":"https://github.com/osain-az.png","language":"TypeScript","funding_links":[],"categories":["Tools"],"sub_categories":["Inline Tools"],"readme":"# Editorjs plugin for adding comment.\n\u003c!-- markdownlint-disable first-line-h1 --\u003e\n\u003ch1 align=\"center\"\u003eWelcome to editorjs-comment 👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/editorjs-comment\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/editorjs-comment.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/osain-az/editorjs-comment/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" /\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\n`editorjs-comment` plugin is design to allow developers to  create custom component  of there  comment  and pass it through config, it allows to create any comment section they want  for [editorjs](https://editorjs.io/)\n\n\u003cimg alt=\"editorjscomment\" src=\"public\\editorjscomment.png\" width=\"\" /\u003e \n\n### Features\n* support typescript\n* using  with HTML project\n* using  react (JSX.Element)\n* other coming soon.\n\n#### Limitation\nFor React component, `Hooks` will not work since is render outside of the component,  a work around  is using preact signal https://preactjs.com/guide/v10/signals/\n```typescript\n import { signal } from \"@preact-signals/safe-react\";\nimport { withTrackSignals } from \"@preact-signals/safe-react/manual\";\n```\ncheck the  example  for usage\n\n## Installation\n\n### Install via NPM\n\n```sh\nnpm install editorjs-comment\n```\n\n### Load from CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-comment@latest\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```javascript\nimport Comment from 'editorjs-comment';\n```\nediotrjs Comment  must be used with the config. A function  that returns a JSX.Element  or HTML file must be passed to the  config file `CommentConfig`. See the config interface.\n\n\n##important interfaces\n```typescript\nexport interface RenderBody {\n  commentBlockId: string | null;\n  blockId: string | null;\n  onClose: () =\u003e void;\n  addCommentBlockData: (data: CommentBlockData) =\u003e void;\n  removeBlockComments: () =\u003e void;\n}\n\nexport interface CommentConfig {\n  markerColor?: string;\n  activeColor?: string;\n  editorjsId?: string;\n  renderBody: ({\n    commentBlockId,\n    blockId,\n    addCommentBlockData,\n    onClose,\n    removeBlockComments,\n  }: RenderBody) =\u003e HTMLElement | any //JSX.Element;\n}\n```\n\n### Usage example\n\n```Typescript\nconst EDITOR_JS_TOOL = {\n\n  ....\n  comment: {\n    class: Comment,\n    inlineToolbar: true,\n\n    config: {\n      markerColor: \"\",\n      activeColor: \"pink\",\n      renderBody: ({\n        commentBlockId,\n        blockId,\n        onClose,\n        addCommentBlockData,\n      }: {\n        commentBlockId: string;\n        blockId: string;\n        onClose: () =\u003e void;\n        addCommentBlockData: (data: any) =\u003e void;\n      }) =\u003e {\n        return RenderItem({\n          onClose,\n          blockId,\n          commentId: commentBlockId,\n          setCommentBlockData: addCommentBlockData,\n        });\n      },\n    },\n  },\n}\n```\n\n### RenderBody  function\nThe renderBody is a function which is a required parameter by the config. \nThe function must accept the `RenderBody` interface as shown  below\n\n\n```typescript\nexport interface RenderBody {\n  commentBlockId: string | null;\n  blockId: string | null;\n  onClose: () =\u003e void;\n  addCommentBlockData: (data: CommentBlockData) =\u003e void;\n  removeBlockComments: () =\u003e void;\n}\n```\n #### parameter\n This parameters will be pass to the function were the developer can access then an use it. \n\n| Field          | Type       | required   |Description |\n| --------       | -------- | -------- |  -------- |\n| `commentBlockId`  | String|  true | This is a unique string(id) that represent  the  section of the highlighted  text that you want to add a comment. The developer  is responsible for creating this id the first time an comment is created. For existing comment, this value will the pass to the renderBody function where developer can use this to get the comments for this comment section |\n|blockId| string |true| This is the blockId from Editorjs block  of where the comment is made. Is upto the developer if they need \n|onClose | Func| true| Function use to manually close the opened comment section |\n|addCommentBlockData| Func|true |this function will initialize comment section to the corresponding BlockData to the highlighted  area  when is called, it is recommended to be called first comment of any selected area is made.\n|removeBlockComments |Func| true| This function should be called with caution, it will remove the  comment section from the  editorjs  permanently. \n\n\n\n\n## config parameter is `CommentConfig`\n\n`CommentConfig`  is the interface that is passed to the config option. only  `renderBody` is required. \n\n| Field          | Type       | required | default  |Description |\n| --------       | -------- | -------- |  -------- | -------- |\n| `markerColor`  | String|  false |    null  |The color of the  marker showing the area of the comment |\n| `activeColor`  |string | false |    Add underline text decoration to the text wrapped by the tooltip. Default is `false`. |\n| `editorjsId`   | String | -| editorjs| This is the container id for the editorjs, if you sed the default value `editorjs` then is not required but if you other name then is required|\n| `renderBody`     | Func| true |  null |  A function that return an HTML or JSX.Element;  the function should accept the `RenderBody` interface. Check  the usage or the example |\n\n\n## case study\nexample using react and preact/signal\n\n```typescript\n\n//import { signal, computed, useSignal } from \"@preact/signals\";\nimport { signal } from \"@preact-signals/safe-react\";\nimport { withTrackSignals } from \"@preact-signals/safe-react/manual\";\nimport { CommentBlockData, RenderBody } from \"editorjs-comment\";\n\ninterface Comment {\n  commentBlockId: string;\n  blockId: string;\n  content: string\n  //... your custom fields\n\n}\nconst comments = signal\u003cComment[]\u003e([]);\n\nconst commentSignal = signal\u003cComment\u003e(Object());\n\nconst RenderItem = ({\n  commentBlockId,\n  blockId,\n  onClose,\n  addCommentBlockData,\n}: RenderBody) =\u003e {\n  commentSignal.value = {\n    ...Object(),\n    commentBlockId,\n    blockId,\n  };\n\n  const data = (value: string) =\u003e {\n    commentSignal.value = { ...commentSignal.value, content: value };\n  };\n\n  //save comment to DB\n  const saveComment = () =\u003e {\n    \n\n    addContractCommentApi({\n      ...commentSignal.value,\n    \n    }).then((respo) =\u003e {\n      if (respo.length \u003e 0) {\n        const data = {\n          id: respo[0].commentBlockId,\n          count: respo.length,\n        };\n\n        // if the data is save to the database  then call the setCommentBlockData method \n        // for every new comment section this should be call, it will highlight the selected section with marker and also add the required data to the block.\n        // this can be called only once for a new comment section\n        if (addCommentBlockData) {\n          addCommentBlockData(data);\n        }\n        comments.value = respo;\n      }\n    });\n  };\n\n  //The commentBlockId for the current  comment section is available  to be use to query the db, depending on your logic\n  const getComments = () =\u003e {\n\n    if (!commentBlockId) {\n      comments.value = [];\n      return;\n    }\n    getContractCommentByIdApi(commentBlockId)\n      .then((respon) =\u003e {\n        if (respon.length \u003e 0) {\n          addCommentBlockData({\n            id: respon[0].commentBlockId,\n            count: respon.length,\n          });\n          comments.value = respon;\n        }\n      })\n      .catch((err) =\u003e {\n        comments.value = [];\n        console.log(err);\n      });\n  };\n  getComments();\n\n  // manually render on change\n  const ShowComments = withTrackSignals(() =\u003e {\n    return (\n      \u003cdiv\u003e\n        {comments.value.map((comment, index) =\u003e (\n          \u003cdiv key={index}\u003e\n             \u003cdiv\u003e{comment.}\u003c/div\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n    );\n  });\n\n  const closeEl = () =\u003e {\n    if (!onClose) return;\n    onClose();\n  };\n\n  return (\n    \u003cPaper\n      style={{ zIndex: 3, position: \"absolute\" }}\n      className=\"comment-popover\"\n      contentEditable={false}\n    \u003e\n      \u003cdiv style={{ textAlign: \"right\" }} onClick={closeEl}\u003e\n        \u003cBtn text=\"Close\" onClick={closeEl} /\u003e\n      \u003c/div\u003e\n      \u003cdiv style={{ margin: 10 }}\u003e\n        \u003cdiv\u003e{text.value}\u003c/div\u003e\n        \u003cdiv\u003e\n          \u003cInputField\n            label=\"tesv\"\n            type=\"text\"\n            value={commentSignal.value.content}\n            onChange={data}\n          /\u003e\n          \u003cBtn text=\"Add comment\" onClick={saveComment} /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003cShowComments /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/Paper\u003e\n  );\n};\n\nexport default RenderItem;\n\n\n\n //Editorjs tools \n\n\n import Comment from \"editorjs-comment\";\n\n\n\nimport RenderItem from \"./component\";\n\n\nconst EDITOR_JS_TOOL = {\n  // attached: {\n  //   class: Attached,\n  //   config:{\n  //     endpoint: 'http://localhost:7000/blog/uploadFile', // Your backend file uploader endpoint\n  //   }\n  // },\n\n  comment: {\n    class: Comment,\n    inlineToolbar: true,\n\n    config: {\n      markerColor: \"grey\", // optional \n      activeColor: \"green\",// optional\n      renderBody: ({\n        commentBlockId,\n        blockId,\n        onClose,\n        addCommentBlockData,\n      }: {\n        commentBlockId: string;\n        blockId: string;\n        onClose: () =\u003e void;\n        addCommentBlockData: (data: any) =\u003e void;\n      }) =\u003e {\n        return RenderItem({\n          onClose,\n          blockId,\n           commentBlockId,\n          addCommentBlockData\n        });\n      },\n    },\n  },\n\n\n  // MyTool,\n  //table: Table,\n\n  /*   inlineImage: InlineImage,\n   */\n\n\n/*   paragraph: {\n    class: Paragraph,\n    inlineToolbar: true,\n    config: {\n      placeholder: \"Enter project description\",\n    },\n    tunes: [\"textVariant\", \"alignment\"],\n  }, */\n \n  // simpleImage: SimpleImage\n};\n\n\n```\n\n\n##### note: This  project is still in beta so changes will happen often \n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/osain-az/editorjs-comment/issues).\n\n## Show your support\n\nGive a ⭐️ if this project helped you!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosain-az%2Feditorjs-comment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosain-az%2Feditorjs-comment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosain-az%2Feditorjs-comment/lists"}