# @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`](https://www.npmjs.com/package/@richhtmleditor/enterprise), built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core).

**Current release: 1.2.10** — Depends on `@richhtmleditor/core` **^1.2.10**.

**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)

**Demo:** [richhtmleditor.stackkitlabs.com](https://richhtmleditor.stackkitlabs.com/) — [demo](https://richhtmleditor.stackkitlabs.com/demo) · [guide](https://richhtmleditor.stackkitlabs.com/guide) · [API](https://richhtmleditor.stackkitlabs.com/api). Doc Preview joint demo: [stackkitlabs.com/products/doc-preview](https://stackkitlabs.com/products/doc-preview)

### What's in 1.2.10

- **`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

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

## Usage

```ts
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

```ts
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`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine and `exportForPreview`.
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence gating for `features.comments`.
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — draft/review/approved states.
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular wrapper.
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React wrapper.

## License

[MIT](./LICENSE)