Editor Comment

Pro

Inline comment thread popover for the editor — shows a thread of replies, a reply composer, and a resolve action. `type="suggestion"` leads with the proposed change (deleted → inserted), says "suggested an edit" and replaces resolve with Accept / Reject.

Open issues Report a bug

Version: v1.3.0
Stability: stable
License: Commercial license
Related: Editor; Editor Toolbar; Emoji Picker

Jordan Lee 2h ago

This paragraph needs a stronger opening sentence.

Resolved

⌘↵ to send

Priya Nair Yesterday

Can we cite the Q2 numbers here?

Resolved

⌘↵ to send

previews.components.editor-comment.default.blade.php Blade

<div class="w-full flex flex-wrap justify-center gap-6 p-6">
    <x-ui.editor-comment author="Jordan Lee" time="2h ago" />
    <x-ui.editor-comment
        author="Priya Nair"
        time="Yesterday"
        body="Can we cite the Q2 numbers here?"
        :replies="[['author' => 'Sam Rivera', 'time' => '20m ago', 'body' => 'Added the link to the report in the next paragraph.']]"
    />
</div>

Installation

terminal

php artisan ui:add pro/editor-comment

Note

This component ships an Alpine behavior module at resources/js/ui/editor-comment.js. Import it once from your bundle so it registers on alpine:init:

resources/js/ui/index.js JS

import './editor-comment.js';

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

editor-comment.md

# Brok UI: Editor Comment (`editor-comment`)

Inline comment thread popover for the editor — shows a thread of replies, a reply composer, and a resolve action. `type="suggestion"` leads with the proposed change (deleted → inserted), says "suggested an edit" and replaces resolve with Accept / Reject.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add pro/editor-comment
```

## Usage

```blade
<div class="w-full flex flex-wrap justify-center gap-6 p-6">
    <x-ui.editor-comment author="Jordan Lee" time="2h ago" />
    <x-ui.editor-comment
        author="Priya Nair"
        time="Yesterday"
        body="Can we cite the Q2 numbers here?"
        :replies="[['author' => 'Sam Rivera', 'time' => '20m ago', 'body' => 'Added the link to the report in the next paragraph.']]"
    />
</div>
```

## Use when

- Use when users need rich structured authoring, annotation, or collaborative editing controls.
- Attaching an inline comment thread to a piece of editor content, with replies, resolve or reopen, and a composer.
- Presenting a proposed edit as a suggestion, showing the removed and inserted text with Accept/Reject actions, using type="suggestion".

## Avoid when

- Do not use rich editor affordances for simple one-line or plain-text tasks.
- The feedback is not tied to a specific span of document content; use a general comment or activity feed instead. Use blocks/activity-feed-timeline for a general comment or activity feed instead.

## Anti-patterns

- Rich editors for one-line or easily validated input

## Rules

- Use the `<brok:editor-comment>` tag (or `<x-ui.editor-comment>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/editor-comment

Ask about Editor Comment in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Examples

Suggestion

suggestion.blade.php Blade

<div class="mx-auto max-w-md p-6">
    <x-ui.editor-comment type="suggestion" author="Jordan Lee" time="5m ago" deleted="a slow fox" inserted="the quick brown fox" />
</div>

API

manifest knowledge + registry-derived coverage

Props

No documented props. Pass normal Blade attributes through the component root.

Slots

default —

Data slots

Stable hooks for CSS overrides and browser tests.

No data-slot selectors found in the registry source.

Behavior

type="comment" shows resolve/reopen and stamps state open or resolved; type="suggestion" leads with the deleted-to-inserted diff and replaces resolve with Accept/Reject, stamping state pending, accepted, or rejected.
Cmd/Ctrl+Enter submits a reply from the composer, which grows to fit its content and reveals its buttons once it has focus or a draft.
Installs a JavaScript behavior module when the registry item includes resources/js/ui files.

Guidance

Rich authoring and editing

Create or revise structured rich content.

Use when

Use when users need rich structured authoring, annotation, or collaborative editing controls.
Attaching an inline comment thread to a piece of editor content, with replies, resolve or reopen, and a composer.
Presenting a proposed edit as a suggestion, showing the removed and inserted text with Accept/Reject actions, using type="suggestion".

Avoid when

Do not use rich editor affordances for simple one-line or plain-text tasks.
The feedback is not tied to a specific span of document content; use a general comment or activity feed instead. Use blocks/activity-feed-timeline for a general comment or activity feed instead.

Use instead

Textarea or plain field for simple content

Anti-patterns

Rich editors for one-line or easily validated input

Anatomy: root editor-comment-change avatar

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Each thread generates a unique draft-field id per instance, so the composer's label always points at the correct textarea even with many threads on one page.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

Source available with Pro

This preview shows the real Pro component, while its installable source is delivered only through the authenticated registry. Activate a license, then use the installation command above.

Open the authenticated source endpoint

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.3.0
Status: Stable
License: pro
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated

Preview