auto focussing

src/components/Editor/AIEdit.tsx

@@ -4,6 +4,7 @@ import { streamText } from 'ai'
 import { ArrowUp } from 'lucide-react'
 import { Button } from '../ui/button'
 import resolveLLMClient from '@/lib/llm/client'
+import MarkdownRenderer from '../Common/MarkdownRenderer'
 
 interface AiEditMenuProps {
   selectedText: string
@@ -53,7 +54,7 @@ const AiEditMenu = ({ selectedText, onEdit }: AiEditMenuProps) => {
           {response && (
             <>
               <div className="prose prose-invert max-h-[400px] max-w-none overflow-y-auto">
-                <p className="m-0 text-sm">{response}</p>
+                <MarkdownRenderer content={response} />
               </div>
               <div className="mt-2 flex justify-end">
                 <Button
@@ -86,8 +87,6 @@ const AiEditMenu = ({ selectedText, onEdit }: AiEditMenuProps) => {
           }}
           rows={1}
           className="z-50 flex w-full flex-col overflow-hidden rounded border-2 border-solid border-border bg-background p-2 text-white outline-none focus-within:ring-1 focus-within:ring-ring"
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
         />
         <Button
           onClick={handleEdit}

src/components/Editor/EditorManager.tsx

@@ -62,6 +62,17 @@ const EditorManager: React.FC = () => {
     }
   }, [showAIPopup, editor])
 
+  useEffect(() => {
+    if (showAIPopup) {
+      setTimeout(() => {
+        const textarea = document.querySelector('.ai-edit-menu textarea')
+        if (textarea instanceof HTMLTextAreaElement) {
+          textarea.focus()
+        }
+      }, 50)
+    }
+  }, [showAIPopup])
+
   return (
     <div
       className="relative size-full cursor-text overflow-hidden bg-dark-gray-c-eleven py-4 text-slate-400 opacity-80"
@@ -106,29 +117,31 @@ const EditorManager: React.FC = () => {
             }}
           >
             {showAIPopup ? (
-              <AiEditMenu
-                selectedText={turndownService.turndown(
-                  getHTMLFromFragment(
-                    editor.state.doc.slice(
-                      selectedRange?.from || editor.state.selection.from,
-                      selectedRange?.to || editor.state.selection.to,
-                    ).content,
-                    editor.schema,
-                  ),
-                )}
-                onEdit={(newText: string) => {
-                  editor
-                    .chain()
-                    .focus()
-                    .deleteRange({
-                      from: selectedRange?.from || editor.state.selection.from,
-                      to: selectedRange?.to || editor.state.selection.to,
-                    })
-                    .insertContent(newText)
-                    .run()
-                  setShowAIPopup(false)
-                }}
-              />
+              <div className="ai-edit-menu">
+                <AiEditMenu
+                  selectedText={turndownService.turndown(
+                    getHTMLFromFragment(
+                      editor.state.doc.slice(
+                        selectedRange?.from || editor.state.selection.from,
+                        selectedRange?.to || editor.state.selection.to,
+                      ).content,
+                      editor.schema,
+                    ),
+                  )}
+                  onEdit={(newText: string) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange({
+                        from: selectedRange?.from || editor.state.selection.from,
+                        to: selectedRange?.to || editor.state.selection.to,
+                      })
+                      .insertContent(newText)
+                      .run()
+                    setShowAIPopup(false)
+                  }}
+                />
+              </div>
             ) : (
               <button onClick={() => setShowAIPopup(true)} className="rounded p-2 hover:bg-gray-700">
                 AI Edit