diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components/content_editor.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/content_editor.vue | 20 |
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" |