From 0d2e77dceb52eba997cd61357dbe5d647c67ab2b Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Thu, 4 Dec 2025 17:48:26 +0000
Subject: [PATCH] The fix is complete. Here's a summary of the changes: (#1435)

## Summary

Fixed GitHub issue #1433 - "Clicking on add review comment button no longer focus on the edit box"

### Changes Made

**1. `frontend/src/components/ui/wysiwyg.tsx`** (+5 lines)
- Added import for `AutoFocusPlugin` from `@lexical/react/LexicalAutoFocusPlugin`
- Added `autoFocus?: boolean` prop to `WysiwygProps` type
- Conditionally renders `<AutoFocusPlugin />` when `autoFocus` is true and editor is editable

**2. `frontend/src/components/diff/CommentWidgetLine.tsx`** (+1 line)
- Added `autoFocus` prop to the `WYSIWYGEditor` when creating new review comments

**3. `frontend/src/components/diff/ReviewCommentRenderer.tsx`** (+1 line)
- Added `autoFocus` prop to the `WYSIWYGEditor` when editing existing review comments

### Verification
- TypeScript type check: Passed
- ESLint: Passed
- Prettier: Passed
---
 frontend/src/components/diff/CommentWidgetLine.tsx     | 1 +
 frontend/src/components/diff/ReviewCommentRenderer.tsx | 1 +
 frontend/src/components/ui/wysiwyg.tsx                 | 5 +++++
 3 files changed, 7 insertions(+)

diff --git a/frontend/src/components/diff/CommentWidgetLine.tsx b/frontend/src/components/diff/CommentWidgetLine.tsx
index 7e42a8be..7e521914 100644
--- a/frontend/src/components/diff/CommentWidgetLine.tsx
+++ b/frontend/src/components/diff/CommentWidgetLine.tsx
@@ -83,6 +83,7 @@ export function CommentWidgetLine({
         className="w-full bg-primary text-primary-foreground text-sm font-mono min-h-[60px]"
         projectId={projectId}
         onCmdEnter={handleSave}
+        autoFocus
       />
       <div className="mt-2 flex gap-2">
         <Button size="xs" onClick={handleSave} disabled={!value.trim()}>
diff --git a/frontend/src/components/diff/ReviewCommentRenderer.tsx b/frontend/src/components/diff/ReviewCommentRenderer.tsx
index 0e74b711..ecad0366 100644
--- a/frontend/src/components/diff/ReviewCommentRenderer.tsx
+++ b/frontend/src/components/diff/ReviewCommentRenderer.tsx
@@ -47,6 +47,7 @@ export function ReviewCommentRenderer({
           className="w-full bg-background text-foreground text-sm font-mono min-h-[60px]"
           projectId={projectId}
           onCmdEnter={handleSave}
+          autoFocus
         />
         <div className="mt-2 flex gap-2">
           <Button size="xs" onClick={handleSave} disabled={!editText.trim()}>
diff --git a/frontend/src/components/ui/wysiwyg.tsx b/frontend/src/components/ui/wysiwyg.tsx
index dd22d52d..0f40ee81 100644
--- a/frontend/src/components/ui/wysiwyg.tsx
+++ b/frontend/src/components/ui/wysiwyg.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState, useCallback, memo } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import { TRANSFORMERS, INLINE_CODE, type Transformer } from '@lexical/markdown';
@@ -62,6 +63,8 @@ type WysiwygProps = {
   onEdit?: () => void;
   /** Optional delete callback - shows delete button in read-only mode when provided */
   onDelete?: () => void;
+  /** Auto-focus the editor on mount */
+  autoFocus?: boolean;
 };
 
 function WYSIWYGEditor({
@@ -80,6 +83,7 @@ function WYSIWYGEditor({
   localImages,
   onEdit,
   onDelete,
+  autoFocus = false,
 }: WysiwygProps) {
   // Copy button state
   const [copied, setCopied] = useState(false);
@@ -225,6 +229,7 @@ function WYSIWYGEditor({
               {/* Only include editing plugins when not in read-only mode */}
               {!disabled && (
                 <>
+                  {autoFocus && <AutoFocusPlugin />}
                   <HistoryPlugin />
                   <MarkdownShortcutPlugin transformers={extendedTransformers} />
                   <FileTagTypeaheadPlugin projectId={projectId} />