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>