How to Add Comments & Annotations to a React Rich Text Editor 2026

How to Add Comments & Annotations to a React Rich Text Editor 2026

Learning how to add comments to a React rich text editor is one of the highest-impact features you can ship in 2026. Google Docs made inline comments universal. Notion made threaded discussions expected. Figma made real-time annotation collaborative. Every modern content editor now needs the same pattern — highlight text, drop a comment, thread replies, resolve when done. Users notice the moment it's missing.

Building it is harder than it looks. Naive implementations lose comment anchors when users edit the surrounding text. Threaded replies pile up without resolution UI. Notifications never fire. Multi-user attribution breaks when authors disconnect mid-thread. And custom builds routinely take 2-4 weeks of engineering time when the plumbing goes wrong.

This guide shows you exactly how to add comments to a React rich text editor in 2026 — the full annotation pattern with threaded discussions, resolve/reopen controls, @mentions inside comments, and persistent storage. You'll get four working paths: custom Lexical build, custom TipTap build, CKEditor 5 Comments (available today), and Eddyter native comments (Q4 2026 launch).

The short answer: For most React and Next.js teams needing to add comments to a React rich text editor in 2026, the fastest production path today is CKEditor 5 Comments plugin ($144-$864/mo Cloud + $99+/mo AI). For flat pricing plus AI, wait for Eddyter native comments (Q4 2026 launch at $59/mo). For total UX control, custom builds in Lexical or TipTap take 2-4 weeks at $15K-$35K.

🎥 New to modern editors? Watch: What is Eddyter? Why Developers Are Switching in 2026

What Comments & Annotations Actually Mean

Before writing code, clarify what pattern you need. "Comments and annotations" describes six related features:

1. Text Anchoring

Users select text and drop a comment. The comment stays anchored to that specific text even when surrounding content changes. If someone deletes the anchored text, the comment shows as "orphaned" — not lost.

2. Threaded Discussions

Each comment supports replies. Replies to replies form a thread. Threads have a chronological order. Users can see who said what when.

3. Resolve/Reopen Controls

Comments have status: open or resolved. Reviewers resolve threads when the issue is fixed. Any author can reopen a resolved thread if needed.

4. Author Attribution

Every comment and reply shows the author's name, avatar, and timestamp. Multi-user editing shows distinct authors clearly.

5. @Mentions Inside Comments

Comments themselves need @ mention support to loop in specific users. This connects comment discussion to notifications.

6. Notification Delivery

When someone gets mentioned in a comment, they get notified. When someone replies to your thread, you get notified. When your comment is resolved, you get notified.

This guide covers all six. Building comments without any one of them creates a broken review workflow.

The 7 Technical Challenges of Building Comments

Comments look simple but hide substantial complexity:

1. Anchor Persistence Across Edits

Comment anchored to characters 100-120. User inserts 5 characters at position 50. Anchor must shift to 105-125 automatically. This is hard.

2. Anchor Behavior on Deletion

Comment anchored to text "urgent action needed". User deletes half the text to "urgent action". Comment should still work — showing what remains, or marking orphaned.

3. Rendering Comment Threads

Threads live in a sidebar or popover. Clicking a highlighted comment in the editor scrolls to the thread. Clicking a thread highlights the comment in the editor. Bidirectional interaction requires careful state.

4. Multi-User Comment Collaboration

Two users add comments simultaneously. Both persist. Two users reply to the same thread simultaneously. Both replies land in order. Requires CRDT logic for real-time editing.

5. Comment State Persistence

Comments live in your backend. Every reply, resolve, reopen action needs API calls. Debounce writes. Handle offline gracefully.

6. @Mention Notification Wiring

@ in a comment textbox needs its own autocomplete (usually different from editor-level @mentions). Notifications fire on comment save.

7. Comment Search & Filtering

Products with 100+ comments need filters: my comments, unresolved only, mentioned me, comments by author. Requires backend queries.

For deeper editor patterns, see our How to Add @Mentions to a React Rich Text Editor 2026 and How to Add Track Changes to a React Rich Text Editor 2026.

Four Paths: Custom, CKEditor Today, or Eddyter Q4 2026

You have four production paths in 2026:

Both custom paths give total control. CKEditor 5 ships today. Eddyter combines comments with AI at flat pricing when it launches.

Path 1: Custom Build in Lexical (2-4 Weeks)

If you need full control over comment UX, this is the pattern that works in 2026 with Lexical.

Step 1: Install Dependencies

bash

1
npm install lexical @lexical/react @lexical/utils nanoid

Step 2: Define the Comment Data Model

Every comment needs consistent data:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// types/comments.ts
export interface CommentAuthor {
  id: string;
  name: string;
  avatar?: string;
  color: string;
}
export interface CommentReply {
  id: string;
  threadId: string;
  authorId: string;
  authorName: string;
  content: string;
  timestamp: number;
  mentions: string[]; // User IDs mentioned in reply
}
export interface CommentThread {
  id: string;
  documentId: string;
  authorId: string;
  authorName: string;
  authorColor: string;
  anchorStart: number;
  anchorEnd: number;
  anchorText: string; // Snapshot of anchored text for context
  content: string; // First comment
  timestamp: number;
  status: 'open' | 'resolved';
  resolvedBy?: string;
  resolvedAt?: number;
  replies: CommentReply[];
  mentions: string[];
}

What this defines:

• CommentThread — the top-level comment with anchor position
• CommentReply — chronological replies inside a thread
• anchorText snapshot — preserves context even if source text is edited
• status — open or resolved for review workflow
• mentions — user IDs mentioned for notification wiring

Step 3: Create the Comment Anchor Node

Custom Lexical node that renders inline highlighting for commented text:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
// nodes/CommentAnchorNode.ts
import {
  DecoratorNode,
  LexicalNode,
  NodeKey,
  SerializedLexicalNode,
  Spread,
} from 'lexical';
import React, { JSX } from 'react';
export type SerializedCommentAnchorNode = Spread
  {
    threadId: string;
    status: 'open' | 'resolved';
    authorColor: string;
    content: string;
    type: 'comment-anchor';
    version: 1;
  },
  SerializedLexicalNode
>;
export class CommentAnchorNode extends DecoratorNode<JSX.Element> {
  __threadId: string;
  __status: 'open' | 'resolved';
  __authorColor: string;
  __content: string;
  static getType(): string {
    return 'comment-anchor';
  }
  static clone(node: CommentAnchorNode): CommentAnchorNode {
    return new CommentAnchorNode(
      node.__threadId,
      node.__status,
      node.__authorColor,
      node.__content,
      node.__key
    );
  }
  constructor(
    threadId: string,
    status: 'open' | 'resolved',
    authorColor: string,
    content: string,
    key?: NodeKey
  ) {
    super(key);
    this.__threadId = threadId;
    this.__status = status;
    this.__authorColor = authorColor;
    this.__content = content;
  }
  createDOM(): HTMLElement {
    const dom = document.createElement('span');
    dom.className = `comment-anchor comment-${this.__status}`;
    dom.setAttribute('data-thread-id', this.__threadId);
    dom.style.setProperty('--author-color', this.__authorColor);
    return dom;
  }
  updateDOM(): boolean {
    return false;
  }
  decorate(): JSX.Element {
    const style = {
      '--author-color': this.__authorColor,
    } as React.CSSProperties;
    return (
      <span
        className={`comment-anchor comment-${this.__status}`}
        style={style}
        data-thread-id={this.__threadId}
        onClick={() => {
          // Scroll to thread in sidebar
          const event = new CustomEvent('comment-anchor-click', {
            detail: { threadId: this.__threadId },
          });
          window.dispatchEvent(event);
        }}
      >
        {this.__content}
      </span>
    );
  }
  static importJSON(serialized: SerializedCommentAnchorNode): CommentAnchorNode {
    return new CommentAnchorNode(
      serialized.threadId,
      serialized.status,
      serialized.authorColor,
      serialized.content
    );
  }
  exportJSON(): SerializedCommentAnchorNode {
    return {
      threadId: this.__threadId,
      status: this.__status,
      authorColor: this.__authorColor,
      content: this.__content,
      type: 'comment-anchor',
      version: 1,
    };
  }
  getThreadId(): string {
    return this.__threadId;
  }
  isInline(): boolean {
    return true;
  }
}
export function $createCommentAnchorNode(
  threadId: string,
  status: 'open' | 'resolved',
  authorColor: string,
  content: string
): CommentAnchorNode {
  return new CommentAnchorNode(threadId, status, authorColor, content);
}

Step 4: CSS for Comment Highlighting

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* comments.css */
.comment-anchor {
  position: relative;
  cursor: pointer;
  background-color: color-mix(in srgb, var(--author-color) 15%, transparent);
  border-bottom: 2px solid var(--author-color);
  transition: background-color 0.15s;
}
.comment-anchor:hover {
  background-color: color-mix(in srgb, var(--author-color) 25%, transparent);
}
.comment-anchor.comment-open {
  border-bottom-style: solid;
}
.comment-anchor.comment-resolved {
  border-bottom-style: dashed;
  opacity: 0.6;
}
.comment-anchor:hover::after {
  content: "💬";
  position: absolute;
  right: -20px;
  top: 0;
  font-size: 14px;
}

Step 5: Build the Comment Plugin

Handle text selection and comment creation:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
"use client";
import { useEffect, useState, useCallback } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import {
  $getSelection,
  $isRangeSelection,
} from 'lexical';
import { nanoid } from 'nanoid';
import { $createCommentAnchorNode } from '@/nodes/CommentAnchorNode';
import { CommentThread, CommentAuthor } from '@/types/comments';
interface CommentPluginProps {
  currentAuthor: CommentAuthor;
  onThreadCreated: (thread: CommentThread) => void;
  documentId: string;
}
export function CommentPlugin({
  currentAuthor,
  onThreadCreated,
  documentId,
}: CommentPluginProps) {
  const [editor] = useLexicalComposerContext();
  const [selectionRect, setSelectionRect] = useState<DOMRect | null>(null);
  const [selectedText, setSelectedText] = useState('');
  // Detect selection to show "Add comment" button
  useEffect(() => {
    const handleSelectionChange = () => {
      const domSelection = window.getSelection();
      if (!domSelection || domSelection.rangeCount === 0) {
        setSelectionRect(null);
        setSelectedText('');
        return;
      }
      const range = domSelection.getRangeAt(0);
      const text = range.toString();
      if (text.length === 0) {
        setSelectionRect(null);
        setSelectedText('');
        return;
      }
      setSelectionRect(range.getBoundingClientRect());
      setSelectedText(text);
    };
    document.addEventListener('selectionchange', handleSelectionChange);
    return () => {
      document.removeEventListener('selectionchange', handleSelectionChange);
    };
  }, []);
  const handleAddComment = useCallback(
    (commentText: string) => {
      const threadId = nanoid();
      const thread: CommentThread = {
        id: threadId,
        documentId,
        authorId: currentAuthor.id,
        authorName: currentAuthor.name,
        authorColor: currentAuthor.color,
        anchorStart: 0,
        anchorEnd: 0,
        anchorText: selectedText,
        content: commentText,
        timestamp: Date.now(),
        status: 'open',
        replies: [],
        mentions: [], // Extract from commentText
      };
      // Wrap the selected text with a comment anchor
      editor.update(() => {
        const selection = $getSelection();
        if (!$isRangeSelection(selection)) return;
        const anchorNode = $createCommentAnchorNode(
          threadId,
          'open',
          currentAuthor.color,
          selectedText
        );
        selection.insertNodes([anchorNode]);
      });
      onThreadCreated(thread);
      setSelectionRect(null);
      setSelectedText('');
    },
    [editor, currentAuthor, documentId, selectedText, onThreadCreated]
  );
  if (!selectionRect || !selectedText) return null;
  return (
    <div
      className="fixed z-50 flex gap-2 bg-white border rounded-lg shadow-lg p-2"
      style={{
        top: selectionRect.top - 45,
        left: selectionRect.left,
      }}
    >
      <button
        onClick={() => {
          const text = prompt('Add a comment:');
          if (text) handleAddComment(text);
        }}
        className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        💬 Add comment
      </button>
    </div>
  );
}

What this plugin does:

• Detects text selection
• Shows "Add comment" button above selected text
• Prompts for comment text on click (in production, use a proper form)
• Creates a CommentAnchorNode wrapping the selected text
• Notifies parent component of new thread

Step 6: Comment Thread Sidebar Component

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
"use client";
import { useState, useEffect } from 'react';
import { CommentThread, CommentReply, CommentAuthor } from '@/types/comments';
import { nanoid } from 'nanoid';
interface CommentSidebarProps {
  threads: CommentThread[];
  currentAuthor: CommentAuthor;
  onReplyAdded: (threadId: string, reply: CommentReply) => void;
  onThreadResolved: (threadId: string) => void;
  onThreadReopened: (threadId: string) => void;
}
export function CommentSidebar({
  threads,
  currentAuthor,
  onReplyAdded,
  onThreadResolved,
  onThreadReopened,
}: CommentSidebarProps) {
  const [filter, setFilter] = useState<'all' | 'open' | 'resolved'>('open');
  const [highlightedThreadId, setHighlightedThreadId] = useState<string | null>(
    null
  );
  // Listen for anchor clicks to scroll to thread
  useEffect(() => {
    const handleAnchorClick = (e: Event) => {
      const detail = (e as CustomEvent).detail;
      setHighlightedThreadId(detail.threadId);
      // Scroll thread into view
      const el = document.getElementById(`thread-${detail.threadId}`);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    };
    window.addEventListener('comment-anchor-click', handleAnchorClick);
    return () => {
      window.removeEventListener('comment-anchor-click', handleAnchorClick);
    };
  }, []);
  const filteredThreads = threads.filter((t) => {
    if (filter === 'all') return true;
    return t.status === filter;
  });
  const handleReply = (threadId: string, content: string) => {
    const reply: CommentReply = {
      id: nanoid(),
      threadId,
      authorId: currentAuthor.id,
      authorName: currentAuthor.name,
      content,
      timestamp: Date.now(),
      mentions: [], // Extract @mentions from content
    };
    onReplyAdded(threadId, reply);
  };
  return (
    <div className="comment-sidebar border-l w-96 h-full overflow-y-auto p-4">
      <div className="flex gap-2 mb-4">
        <button
          onClick={() => setFilter('open')}
          className={`px-3 py-1 text-sm rounded ${
            filter === 'open' ? 'bg-blue-600 text-white' : 'bg-gray-100'
          }`}
        >
          Open ({threads.filter((t) => t.status === 'open').length})
        </button>
        <button
          onClick={() => setFilter('resolved')}
          className={`px-3 py-1 text-sm rounded ${
            filter === 'resolved' ? 'bg-blue-600 text-white' : 'bg-gray-100'
          }`}
        >
          Resolved ({threads.filter((t) => t.status === 'resolved').length})
        </button>
        <button
          onClick={() => setFilter('all')}
          className={`px-3 py-1 text-sm rounded ${
            filter === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100'
          }`}
        >
          All ({threads.length})
        </button>
      </div>
      {filteredThreads.length === 0 && (
        <p className="text-sm text-gray-500">No comments to show</p>
      )}
      {filteredThreads.map((thread) => (
        <CommentThreadCard
          key={thread.id}
          thread={thread}
          currentAuthor={currentAuthor}
          isHighlighted={thread.id === highlightedThreadId}
          onReply={(content) => handleReply(thread.id, content)}
          onResolve={() => onThreadResolved(thread.id)}
          onReopen={() => onThreadReopened(thread.id)}
        />
      ))}
    </div>
  );
}
function CommentThreadCard({
  thread,
  currentAuthor,
  isHighlighted,
  onReply,
  onResolve,
  onReopen,
}: {
  thread: CommentThread;
  currentAuthor: CommentAuthor;
  isHighlighted: boolean;
  onReply: (content: string) => void;
  onResolve: () => void;
  onReopen: () => void;
}) {
  const [replyText, setReplyText] = useState('');
  const handleReplySubmit = () => {
    if (!replyText.trim()) return;
    onReply(replyText);
    setReplyText('');
  };
  return (
    <div
      id={`thread-${thread.id}`}
      className={`comment-thread border rounded-lg p-3 mb-3 transition-all ${
        isHighlighted ? 'ring-2 ring-blue-500' : ''
      } ${thread.status === 'resolved' ? 'opacity-60' : ''}`}
      style={{ borderLeftWidth: 4, borderLeftColor: thread.authorColor }}
    >
      {/* Thread header */}
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <div
            className="w-6 h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold"
            style={{ backgroundColor: thread.authorColor }}
          >
            {thread.authorName.charAt(0).toUpperCase()}
          </div>
          <div>
            <div className="text-sm font-medium">{thread.authorName}</div>
            <div className="text-xs text-gray-500">
              {new Date(thread.timestamp).toLocaleString()}
            </div>
          </div>
        </div>
        {thread.status === 'resolved' && (
          <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">
            Resolved
          </span>
        )}
      </div>
      {/* Anchored text preview */}
      <div className="text-xs bg-gray-50 border-l-2 border-gray-300 pl-2 py-1 mb-2 italic">
        "{thread.anchorText.slice(0, 80)}
        {thread.anchorText.length > 80 ? '...' : ''}"
      </div>
      {/* First comment */}
      <div className="text-sm mb-2">{thread.content}</div>
      {/* Replies */}
      {thread.replies.length > 0 && (
        <div className="ml-4 border-l pl-3 space-y-2 mb-2">
          {thread.replies.map((reply) => (
            <div key={reply.id} className="text-sm">
              <div className="text-xs font-medium">{reply.authorName}</div>
              <div className="text-xs text-gray-500 mb-1">
                {new Date(reply.timestamp).toLocaleString()}
              </div>
              <div>{reply.content}</div>
            </div>
          ))}
        </div>
      )}
      {/* Reply input */}
      {thread.status === 'open' && (
        <div className="flex gap-2 mt-2">
          <input
            type="text"
            value={replyText}
            onChange={(e) => setReplyText(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleReplySubmit()}
            placeholder="Reply..."
            className="flex-1 px-2 py-1 text-sm border rounded"
          />
          <button
            onClick={handleReplySubmit}
            className="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
          >
            Reply
          </button>
        </div>
      )}
      {/* Resolve/Reopen */}
      <div className="mt-2 flex gap-2">
        {thread.status === 'open' ? (
          <button
            onClick={onResolve}
            className="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700"
          >
            ✓ Resolve
          </button>
        ) : (
          <button
            onClick={onReopen}
            className="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"
          >
            Reopen
          </button>
        )}
      </div>
    </div>
  );
}

What this sidebar does:

• Shows filtered comment threads (open, resolved, or all)
• Each thread displays author avatar, timestamp, and anchor text preview
• Replies chronologically shown
• Reply input for open threads
• Resolve/reopen buttons
• Auto-scrolls when comment anchor is clicked in editor
• Highlighted state for selected thread

Step 7: Wire Everything Up

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
"use client";
import { useState, useCallback } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
import { CommentPlugin } from './CommentPlugin';
import { CommentSidebar } from './CommentSidebar';
import { CommentAnchorNode } from '@/nodes/CommentAnchorNode';
import { CommentThread, CommentReply, CommentAuthor } from '@/types/comments';
const currentAuthor: CommentAuthor = {
  id: 'user-1',
  name: 'Jane Smith',
  color: '#3b82f6',
};
const documentId = 'doc-abc-123';
export default function EditorWithComments() {
  const [threads, setThreads] = useState<CommentThread[]>([]);
  const handleThreadCreated = useCallback((thread: CommentThread) => {
    setThreads((prev) => [thread, ...prev]);
    // Save to backend
    fetch('/api/comments/threads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(thread),
    });
  }, []);
  const handleReplyAdded = useCallback(
    (threadId: string, reply: CommentReply) => {
      setThreads((prev) =>
        prev.map((t) =>
          t.id === threadId ? { ...t, replies: [...t.replies, reply] } : t
        )
      );
      // Save to backend + trigger notifications
      fetch(`/api/comments/threads/${threadId}/replies`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(reply),
      });
    },
    []
  );
  const handleThreadResolved = useCallback(
    (threadId: string) => {
      setThreads((prev) =>
        prev.map((t) =>
          t.id === threadId
            ? {
                ...t,
                status: 'resolved',
                resolvedBy: currentAuthor.id,
                resolvedAt: Date.now(),
              }
            : t
        )
      );
      // Save to backend
      fetch(`/api/comments/threads/${threadId}/resolve`, { method: 'POST' });
    },
    []
  );
  const handleThreadReopened = useCallback((threadId: string) => {
    setThreads((prev) =>
      prev.map((t) =>
        t.id === threadId ? { ...t, status: 'open', resolvedBy: undefined } : t
      )
    );
    // Save to backend
    fetch(`/api/comments/threads/${threadId}/reopen`, { method: 'POST' });
  }, []);
  const initialConfig = {
    namespace: 'comment-editor',
    onError: (error: Error) => console.error(error),
    nodes: [CommentAnchorNode],
  };
  return (
    <div className="flex h-screen">
      <div className="flex-1 flex flex-col">
        <LexicalComposer initialConfig={initialConfig}>
          <div className="flex-1 p-4">
            <RichTextPlugin
              contentEditable={
                <ContentEditable className="outline-none min-h-full" />
              }
              placeholder={
                <div className="text-gray-400">
                  Type something, then select text to comment...
                </div>
              }
              ErrorBoundary={LexicalErrorBoundary}
            />
            <HistoryPlugin />
            <CommentPlugin
              currentAuthor={currentAuthor}
              onThreadCreated={handleThreadCreated}
              documentId={documentId}
            />
          </div>
        </LexicalComposer>
      </div>
      <CommentSidebar
        threads={threads}
        currentAuthor={currentAuthor}
        onReplyAdded={handleReplyAdded}
        onThreadResolved={handleThreadResolved}
        onThreadReopened={handleThreadReopened}
      />
    </div>
  );
}

That's the full custom Lexical implementation. Select text. Click "Add comment." Thread appears in sidebar. Reply. Resolve. Reopen. Persistent via backend.

What This Custom Build Doesn't Cover

The 400+ lines above handle the core pattern. Production comments still need:

• Anchor persistence when surrounding text is edited (~1 week)
• Real-time collab with Y.js awareness for multi-user (~1 week)
• Backend API + storage for threads + replies (~3-5 days)
• Notification service integration (~2-3 days)
• @mentions inside comments with autocomplete (~3-5 days)
• Comment search & filtering at scale (~3-5 days)
• Rich text inside comments (~3-5 days)

Total production-quality custom Lexical comments: 2-4 weeks of senior engineering time, roughly $12K-$24K in senior engineering salary alone, plus ongoing maintenance costs.

The Real Cost of Custom Lexical Comments

Production-quality comments built this way typically costs:

For build-vs-buy analysis, see Build vs Buy: Real Cost of Building a Rich Text Editor 2026 and Why Building Your Own Rich Text Editor Is a Startup Killer.

Path 2: Custom Build in TipTap (2-4 Weeks)

If you're already on TipTap, use the community @tiptap-pro/extension-comment (part of TipTap's paid Pro tier) or build a custom Mark-based approach.

Basic Custom Approach with Mark Extension

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// extensions/comment-mark.ts
import { Mark, mergeAttributes } from '@tiptap/core';
export const CommentMark = Mark.create({
  name: 'comment',
  addAttributes() {
    return {
      threadId: { default: null },
      status: { default: 'open' },
      authorColor: { default: '#3b82f6' },
    };
  },
  parseHTML() {
    return [{ tag: 'span[data-comment-thread]' }];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      'span',
      mergeAttributes(HTMLAttributes, {
        'data-comment-thread': HTMLAttributes.threadId,
        class: `comment-anchor comment-${HTMLAttributes.status}`,
        style: `--author-color: ${HTMLAttributes.authorColor}`,
      }),
      0,
    ];
  },
  addCommands() {
    return {
      addComment:
        (attrs) =>
        ({ commands }) => {
          return commands.setMark(this.name, attrs);
        },
      removeComment:
        () =>
        ({ commands }) => {
          return commands.unsetMark(this.name);
        },
    };
  },
});

Then handle selection detection, thread management, and sidebar rendering using the same patterns as Path 1 (adapted for TipTap's editor API instead of Lexical's).

For managed TipTap comments, use @tiptap-pro/extension-comment (part of TipTap Cloud paid plans starting at $49-$999/mo + AI Toolkit costs).

For deeper analysis, see TipTap Pricing Explained 2026 and Best TipTap Alternatives 2026.

Path 3: CKEditor 5 Comments (Available Today)

CKEditor 5 has the strongest production comments today. It ships as a paid plugin bundled with CKEditor 5 Cloud plans.

Basic Setup

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use client";
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { Comments } from '@ckeditor/ckeditor5-comments';
export default function CKEditorComments() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        extraPlugins: [Comments],
        comments: {
          editorConfig: {
            extraPlugins: [],
          },
          usersConfig: {
            currentUser: {
              id: 'user-1',
              name: 'Jane Smith',
              avatar: '/avatars/jane.jpg',
            },
          },
        },
        licenseKey: process.env.NEXT_PUBLIC_CKEDITOR_LICENSE_KEY,
      }}
    />
  );
}

CKEditor 5 Comments Strengths

• ✅ Available today — production ready in 2026
• ✅ Full feature set — threads, replies, resolve/reopen, @mentions
• ✅ Author attribution — multi-user with distinct avatars
• ✅ Sidebar UI — polished right out of the box
• ✅ Real-time collaboration — works with CKEditor 5 collab
• ✅ Backend adapter API — connect to your own comment storage
• ✅ SOC 2 Type II and HIPAA compliance support

CKEditor 5 Comments Limitations

• ❌ Complex commercial licensing starting at $144/mo Cloud
• ❌ AI Assistant costs extra ($99+/mo)
• ❌ Combined pricing can hit $1,000-$1,500/mo for full AI + collab + comments
• ❌ Heavy bundle (~500 KB) hurts Core Web Vitals
• ❌ Setup complexity — 4-6 hours vs Eddyter's 10 minutes

For comparisons, see Eddyter vs CKEditor 2026 and Best CKEditor Alternative 2026.

Best for: Enterprise teams needing comments in production today with budget for CKEditor licensing.

Path 4: Eddyter Native Comments (Q4 2026 Launch)

Eddyter's native comments launches Q4 2026 — Lexical-powered under the hood, but zero configuration on your side.

What Eddyter Comments Will Deliver (Anticipated)

• ✅ 10-minute setup — same 3-step integration as base Eddyter
• ✅ Threaded comments with replies — sidebar included, no custom code
• ✅ Multi-model AI + comments in one product (unique combination)
• ✅ @mentions inside comments with autocomplete
• ✅ Resolve/reopen workflow — built-in state management
• ✅ 7-framework support — React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS
• ✅ Flat pricing — included in AI Pro Managed ($59/mo) tier
• ✅ Notification webhooks — same pattern as @mentions webhook
• ✅ Y.js-based collaboration compatibility (Q3 2026 launch)

Anticipated Setup Pattern (Post-Q4 2026 Launch)

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider,
} from 'eddyter';
import 'eddyter/style.css';
export default function EditorWithComments() {
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY;
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        comments={{
          enabled: true,
          currentUser: {
            id: 'user-1',
            name: 'Jane Smith',
            avatar: '/avatars/jane.jpg',
            color: '#3b82f6',
          },
          onThreadCreated: (thread) => console.log(thread),
          onReplyAdded: (reply) => console.log(reply),
          fetchUsers: async (query) => {
            // For @mentions inside comments
            const res = await fetch(`/api/users/search?q=${query}`);
            return res.json();
          },
        }}
        onChange={(html) => console.log(html)}
      />
    </EditorProvider>
  );
}

Comments. Real-time collab (Q3 2026). Multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3). Track changes (Q4 2026). All in one editor at $59/mo flat.

Get your Eddyter API key from eddyter.com/user/license-key. Watch the Q4 2026 launch for comments availability.

🎥 See real Eddyter setup: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

Full Comparison: All 4 Paths

3-Year Cost Math: Real Numbers

For a typical React SaaS with 1,000 users needing comments + AI + collaboration:

Custom Build (Lexical or TipTap)

• Senior engineering (3 weeks initial build): $18,000
• Backend for threads/replies: $4,000
• Notification service integration: $3,000
• Y.js integration for multi-user comments: $8,000
• Ongoing maintenance (5 hrs/mo × $150/hr × 36 mo): $27,000
• 3-year total: $60,000

CKEditor 5 Cloud + Comments + AI Assistant

• Cloud (mid-tier): $432/mo × 36 = $15,552
• AI Assistant: $99/mo × 36 = $3,564
• Setup + initial integration (6 hrs @ $150): $900
• 3-year total: $20,016

Eddyter AI Pro Managed

• Base plan: $59/mo × 36 = $2,124
• Includes: comments (Q4 2026), track changes (Q4 2026), real-time collab (Q3 2026), multi-model AI, all editor features, infrastructure
• 3-year total: $2,124

The Real Savings

• vs Custom build: Eddyter saves $57,876 over 3 years (96.5% cost reduction)
• vs CKEditor 5: Eddyter saves $17,892 over 3 years (89.4% cost reduction)

For teams that can wait for Q4 2026, Eddyter delivers dramatic savings. For teams needing comments this quarter, CKEditor 5 is the strongest immediate option.

5-Question Decision Framework

Use this to pick the right path for your team:

1. When do you need comments in production?

This quarter (Q3 2026) → CKEditor 5. Only production-ready option today.

Late 2026 or 2027 → Eddyter native. Flat pricing + AI included.

Timeline flexible → Consider custom build for total control.

2. What frameworks does your product use?

React only → Any option works.

Multi-framework → Eddyter (Q4 2026). Custom builds and CKEditor 5 have limited multi-framework support.

3. Do you need @mentions inside comments?

Yes → All 4 paths support it. CKEditor 5 + Eddyter Q4 2026 native. Custom builds require extra 3-5 days for the mention autocomplete.

4. Do you need multi-model AI alongside comments?

Yes → Eddyter. GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3 built in.

Single AI provider OK → CKEditor 5 AI Assistant.

No AI → Any option works.

5. What's your budget model?

Flat pricing preferred → Eddyter ($59/mo flat). Best for scale.

Per-Cloud-tier pricing OK → CKEditor 5 ($144-$864/mo Cloud).

One-time engineering cost + infra → Custom build.

7 Common Comment Pitfalls

Pitfall 1: Losing Anchor When Text Is Edited

Comment anchored to characters 100-120. User inserts 10 characters at position 50. Naive implementations leave the anchor at 100-120, but the anchored text is now at 110-130. Comment appears on wrong text.

Fix: Store anchor as marks/nodes tied to specific text, not character positions. When text moves, the mark moves with it.

Pitfall 2: Not Handling Deleted Anchored Text

User deletes text that a comment was anchored to. Comment becomes orphaned but disappears from UI.

Fix: Show orphaned comments in sidebar with "text was deleted" indicator. Preserve the comment for context.

Pitfall 3: Flat Reply Structure (No Threading)

Naive implementations show all replies as siblings. Complex discussions become impossible to follow.

Fix: Support nested replies (max 2-3 levels deep). Threading beats flat lists.

Pitfall 4: No Bidirectional Highlighting

Clicking a comment anchor in editor doesn't scroll to thread. Clicking a thread doesn't highlight anchor. Users can't navigate.

Fix: Emit events on anchor click. Sidebar listens and scrolls thread into view. Sidebar click emits event that highlights anchor.

Pitfall 5: No Notification Deduplication

User replies twice to same thread within 5 minutes. Two notifications sent. Every mention resolves as separate notification.

Fix: Debounce notifications per user per thread (5-15 minute window). Batch mention notifications when possible.

Pitfall 6: Rich Text Not Supported In Comment Body

Users can only type plain text in comments. Can't format, can't paste links properly, can't attach.

Fix: Use a lightweight editor inside comments (nested editor). Supports basic formatting, mentions, and links.

Pitfall 7: No Filter or Search Options

Sidebar shows all comments in creation order. Products with 100+ comments become unusable.

Fix: Filter by status (open/resolved), by author, by @mention. Add search across comment text. Sort by newest/oldest.

When You Don't Need Comments

Three scenarios where comments add complexity without value:

1. Single-Author Content

Personal notes, personal blogs, individual document editing. Comments require multi-user coordination that doesn't apply.

2. Fast Publishing Workflows

Marketing pages, product descriptions, help articles where edits happen quickly. Comment overhead slows down fast content updates.

3. Real-Time Only Editing

Google Docs-style live editing without approval workflows. Users see each other's cursors directly — comments become chat replacement.

Frequently Asked Questions

1. What's the best React editor for comments in 2026?

For most teams needing comments today in 2026, CKEditor 5 is the strongest production-ready option — full threaded discussions, resolve/reopen, multi-author attribution, and @mentions inside comments at $144-$864/mo Cloud + $99+/mo AI Assistant. For teams that can wait for Q4 2026, Eddyter native comments delivers the same features plus multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) at $12-$59/mo flat pricing with 10-minute setup. For teams with 2-4 weeks of senior engineering time and specific requirements, custom builds in Lexical or TipTap give total control at $37K-$74K over 3 years.

2. How long does it take to build comments from scratch?

Building production-quality comments for a React editor takes 2-4 weeks of senior engineering time in 2026. This covers: comment data model design (2-3 days), custom comment anchor nodes for the editor (3-5 days), text selection detection and creation UI (2-3 days), threaded sidebar component (5-7 days), backend for threads/replies (3-5 days), notification service integration (2-3 days), Y.js collaboration integration (5-7 days), anchor persistence across edits (2-3 days), and QA (3-5 days). Total 3-year cost including engineering and infrastructure: $37,000-$74,000+. Eddyter delivers equivalent comments in 10 minutes at $2,124 over 3 years when it launches Q4 2026.

3. Can I add comments to an existing Lexical or TipTap editor?

Yes, but the integration pattern differs. Lexical requires defining custom CommentAnchorNode with DecoratorNode subclass, building a plugin for text selection detection, and creating threaded sidebar UI (~2-4 weeks). TipTap requires custom Mark extension with attributes, selection interception, and sidebar UI (~2-4 weeks). CKEditor 5 ships with a native Comments plugin available today (4-6 hours setup with commercial license). Eddyter is built on Lexical with comments launching Q4 2026 as a native feature — 10-minute setup with no custom code required.

4. Does CKEditor 5 support comments today?

Yes, CKEditor 5's Comments plugin is available today (2026) as part of paid Cloud plans starting at $144/mo. It supports threaded discussions with replies, resolve/reopen workflow, multi-author attribution with distinct avatars, @mentions inside comments, real-time collaboration integration, backend adapter API for connecting to your own comment storage, and revision history. Combined with the AI Assistant plugin ($99+/mo), CKEditor 5 delivers the most complete production comments experience in 2026. Trade-offs are heavy 500 KB bundle size, complex commercial licensing, and combined pricing that can reach $1,000-$1,500/mo for full AI + collab + comments.

5. When will Eddyter support comments?

Eddyter's native comments launches Q4 2026. When available, it will support threaded discussions with replies, resolve/reopen workflow, multi-author attribution with distinct colors, @mentions inside comments with autocomplete, integration with Q3 2026 Eddyter real-time collaboration, notification webhooks for reply and mention events, multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) alongside comments in one integration, and 7-framework support (React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS). Pricing will be included in AI Pro Managed ($59/mo flat).

6. How do I handle comments with real-time collaboration?

Comments + real-time collaboration require synchronization across users. When 3 users add comments and replies simultaneously with tracking enabled, thread state must merge deterministically — each user's actions attributed correctly. Standard solution uses Y.js awareness to synchronize comment threads across clients, CRDT logic to resolve conflicts (two people replying at once), and per-author queues that maintain attribution during merging. Custom implementations take 5-7 days extra. CKEditor 5 handles this natively as part of its Collaboration Server. Eddyter Q4 2026 launches with native support based on Y.js foundation. For Y.js implementation patterns, see How to Add Real-Time Collaboration to a React Editor With Y.js 2026.

7. How do I send notifications when someone comments or replies?

Notifications fire in three scenarios: (1) User mentioned in a comment or reply, (2) Someone replies to your thread, (3) Your comment is resolved or reopened. Custom pattern: on each event, dispatch a notification job to your notification service (email, Slack, in-app, or push). Extract mentioned user IDs from [@mention] markup in comment content. Dedupe notifications per user per document per hour to avoid spam. Eddyter Q4 2026 will support notification webhooks configured per event type. CKEditor 5's backend adapter API lets you hook into every comment lifecycle event. For notification patterns, see How to Add @Mentions to a React Rich Text Editor 2026.

8. What's the alternative to building custom comments?

The strongest managed alternatives in 2026 are CKEditor 5 Comments (production-ready today, $144-$864/mo Cloud + $99+/mo AI Assistant, comprehensive feature set, enterprise compliance) and Eddyter native comments (Q4 2026 launch, $12-$59/mo flat, multi-model AI included, 7-framework support, 10-minute setup). For teams shipping comments this quarter, CKEditor 5 is the fastest path. For teams building for late 2026 or 2027 launch, Eddyter combines comments with track changes, real-time collab, and AI at flat pricing. TipTap Pro offers @tiptap-pro/extension-comment as part of paid Cloud plans starting at $49-$999/mo. Skip building custom unless comment UX is your core product differentiator.

Ready to Ship Comments?

Stop engineering thread anchoring, sidebar UI, resolve/reopen state, notification wiring, and Y.js collaboration integration from scratch. Deploy CKEditor 5 today for immediate comments, or plan for Eddyter's Q4 2026 native launch — comments + track changes + multi-model AI + real-time collab in one editor at $12-$59/mo flat pricing, 10-minute setup, 7-framework support.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
💰 See pricing
🎥 Watch the intro video | Watch the 30-min integration guide