Add autoFocus prop to compass-editor

Author: kraenhansen

packages/compass-editor/src/editor.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, userEvent } from '@mongodb-js/testing-library-compass';
-import { CodemirrorInlineEditor } from './editor';
+import { CodemirrorInlineEditor, CodemirrorMultilineEditor } from './editor';
 import type { EditorRef } from './types';
 import { expect } from 'chai';
 
@@ -55,4 +55,13 @@ describe('Editor', function () {
       expect(editorRef.current?.editorContents).to.equal('{\n  \n}');
     });
   });
+
+  context('CodemirrorMultilineEditor', function () {
+    it('focuses the editor when autoFocus is true', function () {
+      const editorRef = React.createRef<EditorRef>();
+      render(
+        <CodemirrorMultilineEditor text={'{}'} autoFocus ref={editorRef} />
+      );
+    });
+  });
 });

packages/compass-editor/src/editor.tsx

@@ -573,6 +573,7 @@ type EditorProps = {
   placeholder?: Parameters<typeof codemirrorPlaceholder>[0];
   commands?: readonly KeyBinding[];
   initialJSONFoldAll?: boolean;
+  autoFocus?: boolean;
 } & (
   | { text: string; initialText?: never }
   | { text?: never; initialText: string }
@@ -735,6 +736,7 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
     placeholder,
     commands,
     initialJSONFoldAll: _initialJSONFoldAll = true,
+    autoFocus = true,
     ...props
   },
   ref
@@ -1201,6 +1203,14 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
     }
   }, [maxLines, contentHeight, hasScroll, lineHeight, showScroll]);
 
+  const autoFocusRef = useRef(autoFocus);
+
+  useLayoutEffect(() => {
+    if (autoFocusRef.current) {
+      editorViewRef.current?.focus();
+    }
+  }, [autoFocusRef]);
+
   return (
     <div
       ref={containerRef}