1 files changed, 17 insertions, 3 deletions
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index 659c447e861..22381377389 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -3,7 +3,7 @@ import { EditorContent as TiptapEditorContent } from '@tiptap/vue-2';
 import { __ } from '~/locale';
 import { VARIANT_DANGER } from '~/flash';
 import { createContentEditor } from '../services/create_content_editor';
-import { ALERT_EVENT } from '../constants';
+import { ALERT_EVENT, TIPTAP_AUTOFOCUS_OPTIONS } from '../constants';
 import ContentEditorAlert from './content_editor_alert.vue';
 import ContentEditorProvider from './content_editor_provider.vue';
 import EditorStateObserver from './editor_state_observer.vue';
@@ -51,6 +51,12 @@ export default {
       required: false,
       default: '',
     },
+    autofocus: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+      validator: (autofocus) => TIPTAP_AUTOFOCUS_OPTIONS.includes(autofocus),
+    },
   },
   data() {
     return {
@@ -67,7 +73,7 @@ export default {
     },
   },
   created() {
-    const { renderMarkdown, uploadsPath, extensions, serializerConfig } = this;
+    const { renderMarkdown, uploadsPath, extensions, serializerConfig, autofocus } = this;
 
     // This is a non-reactive attribute intentionally since this is a complex object.
     this.contentEditor = createContentEditor({
@@ -75,6 +81,9 @@ export default {
       uploadsPath,
       extensions,
       serializerConfig,
+      tiptapOptions: {
+        autofocus,
+      },
     });
   },
   mounted() {
@@ -141,7 +150,12 @@ export default {
 <template>
   <content-editor-provider :content-editor="contentEditor">
     <div>
-      <editor-state-observer @docUpdate="notifyChange" @focus="focus" @blur="blur" />
+      <editor-state-observer
+        @docUpdate="notifyChange"
+        @focus="focus"
+        @blur="blur"
+        @keydown="$emit('keydown', $event)"
+      />
       <content-editor-alert />
       <div
         data-testid="content-editor"