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 | 31 |
1 files changed, 24 insertions, 7 deletions
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue index c6ab2e189ef..9a51def7075 100644 --- a/app/assets/javascripts/content_editor/components/content_editor.vue +++ b/app/assets/javascripts/content_editor/components/content_editor.vue @@ -1,10 +1,12 @@ <script> +import { GlAlert } from '@gitlab/ui'; import { EditorContent as TiptapEditorContent } from '@tiptap/vue-2'; import { ContentEditor } from '../services/content_editor'; import TopToolbar from './top_toolbar.vue'; export default { components: { + GlAlert, TiptapEditorContent, TopToolbar, }, @@ -14,15 +16,30 @@ export default { required: true, }, }, + data() { + return { + error: '', + }; + }, + mounted() { + this.contentEditor.tiptapEditor.on('error', (error) => { + this.error = error; + }); + }, }; </script> <template> - <div - data-testid="content-editor" - class="md-area" - :class="{ 'is-focused': contentEditor.tiptapEditor.isFocused }" - > - <top-toolbar class="gl-mb-4" :content-editor="contentEditor" /> - <tiptap-editor-content class="md" :editor="contentEditor.tiptapEditor" /> + <div> + <gl-alert v-if="error" class="gl-mb-6" variant="danger" @dismiss="error = ''"> + {{ error }} + </gl-alert> + <div + data-testid="content-editor" + class="md-area" + :class="{ 'is-focused': contentEditor.tiptapEditor.isFocused }" + > + <top-toolbar ref="toolbar" class="gl-mb-4" :content-editor="contentEditor" /> + <tiptap-editor-content class="md" :editor="contentEditor.tiptapEditor" /> + </div> </div> </template> |