@syncfusion/ej2-spreadsheet/docs/skills/action/comment.md

Feature-rich JavaScript Spreadsheet (Excel) control with built-in support for selection, editing, formatting, importing and exporting to Excel

# Comment Module data flow

## What It Does
Comment module manages threaded comments in spreadsheets. Enables multi-user collaboration with comment threads (parent+replies), comment indicators on cells, comment resolution, filtering, and a review pane for viewing all comments across sheets.

## Entry Points

**SpreadsheetComment Class**
- `initiateComment()` - Creates comment on active or specified cell
- `deleteComment()` - Removes entire comment thread
- `replyToComment()` - Adds reply to existing thread
- `showCommentPane()` - Opens/closes review panel
- `navigateNextPrevComment()` - Jump to next/previous comment

## Core Logic Flow

```
User Action (Comment/Reply)
         ↓
initiateComment() / replyToComment()
         ↓
createCommentContainer() → Render UI
         ↓
renderCommentUI() → Create header/body/footer
         ↓
initListView() → Display thread items
         ↓
postComment() / postReply()
         ↓
saveComment() → processSheetComments()
         ↓
Show in Review Pane (if open)
```

## Operations Handled

1. **createCommentContainer()** - Main comment popup:
   - Renders header: author avatar, name, timestamp, actions menu
   - Renders body: ListView of thread items
   - Renders footer: textarea input for replies
   - Positions relative to cell
   - Handles resolved state styling

2. **createheaderContent()** - Header element:
   - Avatar: Color-coded initials (hash-based from author name)
   - Author name display
   - Actions menu (Edit, Resolve/Unresolve, Delete)
   - Cell reference for resolved threads
   - Edit/non-edit modes

3. **createBodyContent()** - Comment thread display:
   - Uses ListView with virtualization
   - Converts thread to list items (initial + replies)
   - Shows each item with type, author, text, timestamp
   - Reply action buttons (Edit, Delete)
   - Handles resolved thread display

4. **createFooterContent()** - Input area:
   - Textarea for initial comment or reply
   - Placeholder text (different for initial vs reply)
   - Post/Cancel buttons
   - Input/focus/blur event handlers
   - Auto-adjust height on typing

5. **renderHeaderActions()** - Context menu:
   - Edit: Open edit mode
   - Resolve/Unresolve: Toggle resolution status
   - Delete: Remove thread
   - PopUp positioning relative to parent

6. **Thread Resolution**:
   - `setThreadResolved()` - Toggle isResolved flag
   - Disables footer on resolved threads
   - Shows "Resolved" badge
   - Removes reply buttons from body
   - Renders "All replies resolved" message

7. **beginEdit/applyInlineEdit** - Inline editing:
   - Captures original text
   - Replaces with editable textarea
   - Shows post/cancel buttons
   - Updates timestamp on save
   - Ends edit mode and restores display

8. **Review Pane** - Side panel for all comments:
   - Lists all comment threads with filters (All/Unresolved/Resolved)
   - Shows cell references
   - Filters by resolution status
   - Supports multi-sheet comment navigation
   - Highlights selected comment/reply
   - Virtual scrolling for performance

## Validation & Safety

- **Readonly Cells**: Prevents commenting on protected cells
- **Protected Sheets**: Checks locked cell status
- **Merge Cells**: Shows dialog preventing comments in merged ranges
- **Editing State**: Only allows one edit at a time
- **Event Cancellation**: beginAction event can cancel comment
- **Cleanup**: Destroys dropdown buttons on comment removal

## Desired Outputs
- Comment indicator badge on cell
- Comment popup with thread display
- Avatar (colored initials)
- Edit/Resolve/Delete action menu
- Reply input and existing replies
- "Resolved" badge on resolved threads
- Review pane sidebar with all comments
- Filter dropdown (All/Unresolved/Resolved)
- Cell reference links in pane

**System-Level:**
- ThreadedCommentModel in cell.comment + replies array
- Comment containers in DOM (class 'e-comment-container')
- Review pane element (class 'e-review-pane')
- ListView for thread items with virtualization
- DropDownButton for actions menu
- Events: beginAction, completeAction, commentUndoRedo
- Undo/redo records: add, edit, delete, resolve comment
- Nested structure: initial comment → replies array
- Author color hash for avatar consistency