[mk-Denver]

This pull request introduces a new rich Markdown editing and display experience for comments, including a toolbar-based Markdown editor with preview, improved code block rendering, and persistent edit drafts. The changes modernize the comment editing UI and ensure that Markdown is rendered consistently in both editing and display contexts.

Major features and improvements:

1. Markdown Editing and Preview

• Introduced a new MarkdownEditor component with a formatting toolbar (bold, code, lists, links, etc.), live preview, and keyboard shortcuts for common Markdown actions. This replaces the plain textarea for editing comments.
• The editor includes a "Quick preview" and a side-by-side preview mode, improving the editing experience.

2. Code Block Rendering

• Added a new CodeBlock component for rendering code blocks in comments, supporting language detection, collapsible long blocks, and a "Copy to clipboard" button.

3. Comment Editing Experience

• Replaced the textarea in CommentActions with the new MarkdownEditor, providing a richer editing interface.
• Edit drafts are now persisted in localStorage via the useCommentDraft hook, so users don't lose work on refresh. Drafts are cleared on save or cancel. [1] [2] [3]
• Added messaging to inform users that drafts are saved automatically.

4. Markdown Rendering in Comment Display

• Updated comment display to use the new MarkdownPreview component, ensuring all Markdown (including code blocks) is rendered consistently. [1] [2]

5. Codebase Clean-up

• Removed the old linkifyText utility from comment display, as Markdown rendering now handles links and formatting.

These changes collectively provide a much improved, modern, and user-friendly experience for writing and reading comments with Markdown formatting.

References:
[1] [2] [3] [4] [5] [6] [7] [8]…blocks, and draft persistence for comment discussions

[vercel]

@mk-Denver is attempting to deploy a commit to the Megasley Team on Vercel.

A member of the Team first needs to authorize it.

[Megasley]

Thanks @mk-Denver , this is a really nice upgrade. The toolbar, the draft saving and the copyable code blocks all make the comments feel much better, and the safety choices in MarkdownPreview are solid: no rehype-raw, skipHtml, images turned off, and an allowlist for link protocols. Typecheck and lint both pass on the branch, and I tested it locally.

I've left line comments. Three things need fixing before we can merge:

1. Links drop out on first load (markdown-preview.tsx:25). sanitizeUrl uses window, which doesn't exist when the page renders on the server. So absolute links render as plain text on the server and as <a> tags in the browser, which causes a hydration mismatch.
2. Pasting can run untrusted code (markdown-editor.tsx:216-217). Setting innerHTML on an element from document.createElement still runs things like <img onerror> from pasted HTML. DOMParser avoids that.
3. Editing a second time opens an empty box (use-comment-draft.ts:121). After a save, clearDraft() leaves the value as "", so clicking Edit again shows an empty editor. Setting it to null instead fixes it. That change also lets the Cancel cleanup in comment-actions.tsx (line 88) be removed.

Smaller things, marked as nits in the line comments: an off-by-one in the code-block selection, a line in prefixLines that does nothing, the reply Cancel no longer clearing the error, and highlight.js looking like an unused direct dependency.

One question for discussion: switching to Markdown changes how existing plain-text comments look. Single line breaks collapse, and characters like *, _ and # become formatting. The removed linkify.tsx mentioned "no markdown for v1 (plan §8)". I'm happy to go with Markdown, but could we add remark-breaks so older comments keep their line breaks?

Once the three blockers are fixed I'll take another look. Great work overall

[mk-Denver]

I've left line comments. Three things need fixing before we can merge:

1. Links drop out on first load (markdown-preview.tsx:25). sanitizeUrl uses window, which doesn't exist when the page renders on the server. So absolute links render as plain text on the server and as <a> tags in the browser, which causes a hydration mismatch.
2. Pasting can run untrusted code (markdown-editor.tsx:216-217). Setting innerHTML on an element from document.createElement still runs things like <img onerror> from pasted HTML. DOMParser avoids that.
3. Editing a second time opens an empty box (use-comment-draft.ts:121). After a save, clearDraft() leaves the value as "", so clicking Edit again shows an empty editor. Setting it to null instead fixes it. That change also lets the Cancel cleanup in comment-actions.tsx (line 88) be removed.

Smaller things, marked as nits in the line comments: an off-by-one in the code-block selection, a line in prefixLines that does nothing, the reply Cancel no longer clearing the error, and highlight.js looking like an unused direct dependency.

Thanks for the review @Megasley Let me address the raised concerns .

One question for discussion: switching to Markdown changes how existing plain-text comments look. Single line breaks collapse, and characters like *, _ and # become formatting. The removed linkify.tsx mentioned "no markdown for v1 (plan §8)". I'm happy to go with Markdown, but could we add remark-breaks so older comments keep their line breaks?

Absolutely we can add remark-breaks for reverse compatibility.

[Megasley]

Thanks @mk-Denver, nice turnaround! All three blockers and the nits are fixed, and I checked each one against the diff:

Great work on this, it's a big improvement to comments 🚀
Thank you so much. Merging now.