fix: select text when opening find/replace

frontend/src/components/find-replace/find-replace.tsx

@@ -4,7 +4,7 @@ import {
   openFindReplacePanel,
 } from "@/core/codemirror/find-replace/state";
 import { useAtom } from "jotai";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import {
@@ -42,6 +42,7 @@ export const FindReplace: React.FC = () => {
     count: number;
     position: Map<EditorView, Map<string, number>>;
   }>();
+  const findInputRef = useRef<HTMLInputElement>(null);
 
   useHotkey("cell.findAndReplace", () => {
     // if already open and focused, fallback to default behavior
@@ -52,6 +53,13 @@ export const FindReplace: React.FC = () => {
     return openFindReplacePanel();
   });
 
+  useEffect(() => {
+    if (state.isOpen && findInputRef.current) {
+      findInputRef.current.focus(); // Focus the input
+      findInputRef.current.select(); // Select all text in the input
+    }
+  }, [state.isOpen]); // Depend on isOpen to trigger when the panel opens
+
   useEffect(() => {
     if (!state.isOpen) {
       clearGlobalSearchQuery();
@@ -118,6 +126,7 @@ export const FindReplace: React.FC = () => {
         <div className="flex items-center gap-3">
           <div className="flex flex-col flex-2 gap-2 w-[55%]">
             <Input
+              ref={findInputRef} // Attach the ref here
               data-testid="find-input"
               value={state.findText}
               autoFocus={true}

frontend/src/core/codemirror/language/__tests__/utils.test.ts

@@ -114,8 +114,8 @@ describe("splitEditor", () => {
       selection: { anchor: "Hello,".length },
     });
     const result = splitEditor(mockEditor);
-    expect(result.beforeCursorCode).toEqual('mo.md("Hello,")');
-    expect(result.afterCursorCode).toEqual('mo.md(" World!")');
+    expect(result.beforeCursorCode).toEqual("mo.md('Hello,')");
+    expect(result.afterCursorCode).toEqual("mo.md(' World!')");
   });
 
   it("handles markdown with variables", () => {
@@ -127,7 +127,8 @@ describe("splitEditor", () => {
       selection: { anchor: "{a}\n".length },
     });
     const result = splitEditor(mockEditor);
-    expect(result.beforeCursorCode).toEqual('mo.md(f"{a}")');
-    expect(result.afterCursorCode).toEqual('mo.md(f"{b}!")');
+    // '"""' should be preserved
+    expect(result.beforeCursorCode).toEqual('mo.md(f"""{a}""")');
+    expect(result.afterCursorCode).toEqual('mo.md(f"""{b}!""")');
   });
 });

frontend/src/core/codemirror/language/markdown.ts

@@ -38,13 +38,16 @@ const regexes = pairs.map(
     ] as const,
 );
 
+type QuoteType = '"' | '"""'; // Define a type that restricts to either single or triple quotes
+
 /**
  * Language adapter for Markdown.
  */
 export class MarkdownLanguageAdapter implements LanguageAdapter {
   type = "markdown" as const;
 
   lastQuotePrefix: PrefixKind = "";
+  lastQuoteType: QuoteType = '"'; // Use the new QuoteType here
 
   transformIn(pythonCode: string): [string, number] {
     if (!this.isSupported(pythonCode)) {
@@ -55,14 +58,12 @@ export class MarkdownLanguageAdapter implements LanguageAdapter {
       const match = pythonCode.match(regex);
       if (match) {
         const innerCode = match[1];
-
         const [quotePrefix, quoteType] = splitQuotePrefix(start);
-        // store the quote prefix for later when we transform out
         this.lastQuotePrefix = quotePrefix;
+        this.lastQuoteType = quoteType as QuoteType; // Cast to QuoteType
         const unescapedCode = innerCode.replaceAll(`\\${quoteType}`, quoteType);
 
         const offset = pythonCode.indexOf(innerCode);
-        // string-dedent expects the first and last line to be empty / contain only whitespace, so we pad with \n
         return [dedent(`\n${unescapedCode}\n`).trim(), offset];
       }
     }
@@ -71,23 +72,26 @@ export class MarkdownLanguageAdapter implements LanguageAdapter {
   }
 
   transformOut(code: string): [string, number] {
-    // Get the quote type from the last transformIn
-    // const prefix = upgradePrefixKind(this.lastQuotePrefix, code);
     const prefix = this.lastQuotePrefix;
+    const quoteType = this.lastQuoteType; // Already validated as QuoteType
 
     const isOneLine = !code.includes("\n");
     if (isOneLine) {
-      const escapedCode = code.replaceAll('"', '\\"');
-      const start = `mo.md(${prefix}"`;
-      const end = `")`;
+      const escapedCode = code.replaceAll(quoteType, `\\${quoteType}`);
+      const start = `mo.md(${prefix}${quoteType}`;
+      const end = `${quoteType})`;
       return [start + escapedCode + end, start.length];
     }
 
-    // Multiline code
-    const start = `mo.md(\n    ${prefix}"""\n`;
+    const multilineStart = `mo.md(\n    ${prefix}"""\n`;
+    const multilineEnd = `\n    """\n)`;
+
+    // Multiline code that needs formatting
     const escapedCode = code.replaceAll('"""', '\\"""');
-    const end = `\n    """\n)`;
-    return [start + indentOneTab(escapedCode) + end, start.length + 1];
+    return [
+      multilineStart + indentOneTab(escapedCode) + multilineEnd,
+      multilineStart.length + 1,
+    ];
   }
 
   isSupported(pythonCode: string): boolean {
@@ -159,7 +163,10 @@ function splitQuotePrefix(quote: string): [PrefixKind, string] {
   );
   for (const prefix of prefixKindsByLength) {
     if (quote.startsWith(prefix)) {
-      return [prefix, quote.slice(prefix.length)];
+      const remaining = quote.slice(prefix.length);
+      if (remaining.startsWith('"""') || remaining.startsWith('"')) {
+        return [prefix, remaining];
+      }
     }
   }
   return ["", quote];