Merge branch '328641-insert-images/display-errors-content-editor' into 'master'

Display errors in the Content Editor

See merge request gitlab-org/gitlab!65683

app/assets/javascripts/content_editor/components/content_editor.vue

 <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>

spec/frontend/content_editor/components/content_editor_spec.js

+import { GlAlert } from '@gitlab/ui';
 import { EditorContent } from '@tiptap/vue-2';
-import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ContentEditor from '~/content_editor/components/content_editor.vue';
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
 import { createContentEditor } from '~/content_editor/services/create_content_editor';
@@ -8,8 +10,11 @@ describe('ContentEditor', () => {
   let wrapper;
   let editor;
 
+  const findEditorElement = () => wrapper.findByTestId('content-editor');
+  const findErrorAlert = () => wrapper.findComponent(GlAlert);
+
   const createWrapper = async (contentEditor) => {
-    wrapper = shallowMount(ContentEditor, {
+    wrapper = shallowMountExtended(ContentEditor, {
       propsData: {
         contentEditor,
       },
@@ -49,7 +54,7 @@ describe('ContentEditor', () => {
       editor.tiptapEditor.isFocused = isFocused;
       createWrapper(editor);
 
-      expect(wrapper.classes()).toStrictEqual(classes);
+      expect(findEditorElement().classes()).toStrictEqual(classes);
     },
   );
 
@@ -57,6 +62,30 @@ describe('ContentEditor', () => {
     editor.tiptapEditor.isFocused = true;
     createWrapper(editor);
 
-    expect(wrapper.classes()).toContain('is-focused');
+    expect(findEditorElement().classes()).toContain('is-focused');
+  });
+
+  describe('displaying error', () => {
+    const error = 'Content Editor error';
+
+    beforeEach(async () => {
+      createWrapper(editor);
+
+      editor.tiptapEditor.emit('error', error);
+
+      await nextTick();
+    });
+
+    it('displays error notifications from the tiptap editor', () => {
+      expect(findErrorAlert().text()).toBe(error);
+    });
+
+    it('allows dismissing an error alert', async () => {
+      findErrorAlert().vm.$emit('dismiss');
+
+      await nextTick();
+
+      expect(findErrorAlert().exists()).toBe(false);
+    });
   });
 });