@richhtmleditor/comments

Review and comments workflow plugin for Rich HTML Editor (enterprise). Anchored highlights, Add Comment modal, hover tooltips, comments panel, @mentions, and export HTML — requires features.comments from @richhtmleditor/enterprise, built on @richhtmleditor/core.

Current release: 1.1.2 — Depends on @richhtmleditor/core ^1.1.2.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.vercel.app — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.1.2

• createCommentsPlugin — toolbar Comment and Comments panel buttons
• Add Comment modal — compose popover anchored to the current text selection
• Anchored highlights — <span data-de-comment-id> markers in document HTML
• Hover tooltips — preview thread excerpt and messages on anchor hover
• Comments panel — thread list with reply, resolve, and reopen
• @mentions — autocomplete in compose box (mentionUsers option)
• Export HTML — buildCommentsExportHtml and editor.getCommentsExportHtml() for publish bundles

Requires features.comments: true. Demo keys: RHE-ENT-DEMO-2026-FULL or RHE-ENT-DEMO-2026-COMMENTS.

Keywords: richhtmleditor comments review enterprise annotations wysiwyg

Install

npm install @richhtmleditor/comments @richhtmleditor/enterprise
# Requires @richhtmleditor/core (via framework wrapper or direct install).

Usage

import { createEditor } from "@richhtmleditor/core";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

const editor = createEditor({
  element: host,
  toolbar: { preset: "full" },
  features: gate.features,
  plugins: [
    createCommentsPlugin({
      author: "Reviewer",
      mentionUsers: ["reviewer", "approver", "legal", "publisher"],
      onChange: (threads) => saveThreads(threads)
    })
  ]
});

Select text in the document, click Comment (toolbar or selection chip), and add a comment in the compose popover. Anchors persist in exported HTML as data-de-comment-id spans.

Usage — export with comments

import { buildCommentsExportHtml } from "@richhtmleditor/comments";

const commentsHtml = editor.getCommentsExportHtml?.()
  ?? buildCommentsExportHtml(threads);

const preview = editor.exportForPreview({
  workflowState: "in_review",
  commentsHtml
});

API

createCommentsPlugin(options?)

| Option | Type | Description | | --- | --- | --- | | author | string | Default author name for new messages (default "Reviewer"). | | initialThreads | CommentThread[] | Pre-load comment threads. | | onChange | (threads: CommentThread[]) => void | Fired when threads are added, replied, or resolved. | | mentionUsers | string[] | Users for @mention autocomplete. |

CommentThread

| Field | Type | Description | | --- | --- | --- | | id | string | Thread identifier. | | excerpt | string | Quoted selection text. | | status | "open" \| "resolved" | Thread state. | | anchorId | string? | Links to data-de-comment-id in document HTML. | | messages | Array<{ id, author, body, createdAt }> | Thread messages. |

Toolbar tools registered

| Tool ID | Description | | --- | --- | | commentAdd | Comment on selected text (opens compose popover). | | commentPanel | Toggle comments side panel. |

Editor extensions (when plugin attached)

| Method | Description | | --- | --- | | getCommentThreads() | Current thread list. | | getCommentsExportHtml() | HTML aside for exportForPreview({ commentsHtml }). |

buildCommentsExportHtml(threads)

Standalone export helper — returns an HTML fragment for comment threads.

Related packages

• @richhtmleditor/core — editor engine and exportForPreview.
• @richhtmleditor/enterprise — licence gating for features.comments.
• @richhtmleditor/workflows — draft/review/approved states.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/angular — Angular wrapper.
• @richhtmleditor/react — React wrapper.

License

MIT