Add ContentEditorError component

Add a component to display errors notified
by the ContentEditor

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

+<script>
+import { GlAlert } from '@gitlab/ui';
+import EditorStateObserver from './editor_state_observer.vue';
+
+export default {
+  components: {
+    GlAlert,
+    EditorStateObserver,
+  },
+  data() {
+    return {
+      error: null,
+    };
+  },
+  methods: {
+    displayError({ error }) {
+      this.error = error;
+    },
+    dismissError() {
+      this.error = null;
+    },
+  },
+};
+</script>
+<template>
+  <editor-state-observer @error="displayError">
+    <gl-alert v-if="error" class="gl-mb-6" variant="danger" @dismiss="dismissError">
+      {{ error }}
+    </gl-alert>
+  </editor-state-observer>
+</template>

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

@@ -5,6 +5,9 @@ export const tiptapToComponentMap = {
   update: 'docUpdate',
   selectionUpdate: 'selectionUpdate',
   transaction: 'transaction',
+  focus: 'focus',
+  blur: 'blur',
+  error: 'error',
 };
 
 const getComponentEventName = (tiptapEventName) => tiptapToComponentMap[tiptapEventName];

spec/frontend/content_editor/components/content_editor_error_spec.js

+import { GlAlert } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ContentEditorError from '~/content_editor/components/content_editor_error.vue';
+import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
+import { createTestEditor, emitEditorEvent } from '../test_utils';
+
+describe('content_editor/components/content_editor_error', () => {
+  let wrapper;
+  let tiptapEditor;
+
+  const findErrorAlert = () => wrapper.findComponent(GlAlert);
+
+  const createWrapper = async () => {
+    tiptapEditor = createTestEditor();
+
+    wrapper = shallowMountExtended(ContentEditorError, {
+      provide: {
+        tiptapEditor,
+      },
+      stubs: {
+        EditorStateObserver,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders error when content editor emits an error event', async () => {
+    const error = 'error message';
+
+    createWrapper();
+
+    await emitEditorEvent({ tiptapEditor, event: 'error', params: { error } });
+
+    expect(findErrorAlert().text()).toBe(error);
+  });
+
+  it('allows dismissing the error', async () => {
+    const error = 'error message';
+
+    createWrapper();
+
+    await emitEditorEvent({ tiptapEditor, event: 'error', params: { error } });
+
+    findErrorAlert().vm.$emit('dismiss');
+
+    await nextTick();
+
+    expect(findErrorAlert().exists()).toBe(false);
+  });
+});