Event loading events in the Content Editor class

app/assets/javascripts/content_editor/constants.js

@@ -40,3 +40,7 @@ export const TEXT_STYLE_DROPDOWN_ITEMS = [
     label: __('Normal text'),
   },
 ];
+
+export const LOADING_CONTENT_EVENT = 'loadingContent';
+export const LOADING_SUCCESS_EVENT = 'loadingSuccess';
+export const LOADING_ERROR_EVENT = 'loadingError';

app/assets/javascripts/content_editor/services/content_editor.js

+import eventHubFactory from '~/helpers/event_hub_factory';
+import { LOADING_CONTENT_EVENT, LOADING_SUCCESS_EVENT, LOADING_ERROR_EVENT } from '../constants';
 /* eslint-disable no-underscore-dangle */
 export class ContentEditor {
   constructor({ tiptapEditor, serializer }) {
     this._tiptapEditor = tiptapEditor;
     this._serializer = serializer;
+    this._eventHub = eventHubFactory();
   }
 
   get tiptapEditor() {
@@ -16,12 +19,41 @@ export class ContentEditor {
     return doc.childCount === 0 || (doc.childCount === 1 && doc.child(0).childCount === 0);
   }
 
+  once(type, handler) {
+    this._eventHub.$once(type, handler);
+  }
+
+  on(type, handler) {
+    this._eventHub.$on(type, handler);
+  }
+
+  emit(type, params = {}) {
+    this._eventHub.$emit(type, params);
+  }
+
+  off(type, handler) {
+    this._eventHub.$off(type, handler);
+  }
+
+  disposeAllEvents() {
+    this._eventHub.dispose();
+  }
+
   async setSerializedContent(serializedContent) {
     const { _tiptapEditor: editor, _serializer: serializer } = this;
 
-    editor.commands.setContent(
-      await serializer.deserialize({ schema: editor.schema, content: serializedContent }),
-    );
+    try {
+      this._eventHub.$emit(LOADING_CONTENT_EVENT);
+      const document = await serializer.deserialize({
+        schema: editor.schema,
+        content: serializedContent,
+      });
+      editor.commands.setContent(document);
+      this._eventHub.$emit(LOADING_SUCCESS_EVENT);
+    } catch (e) {
+      this._eventHub.$emit(LOADING_ERROR_EVENT, e);
+      throw e;
+    }
   }
 
   getSerializedContent() {

spec/frontend/content_editor/services/content_editor_spec.js

+import {
+  LOADING_CONTENT_EVENT,
+  LOADING_SUCCESS_EVENT,
+  LOADING_ERROR_EVENT,
+} from '~/content_editor/constants';
+import { ContentEditor } from '~/content_editor/services/content_editor';
+
+import { createTestEditor } from '../test_utils';
+
+describe('content_editor/services/content_editor', () => {
+  let contentEditor;
+  let serializer;
+
+  beforeEach(() => {
+    const tiptapEditor = createTestEditor();
+    serializer = { deserialize: jest.fn() };
+    contentEditor = new ContentEditor({ tiptapEditor, serializer });
+  });
+
+  describe('when setSerializedContent succeeds', () => {
+    beforeEach(() => {
+      serializer.deserialize.mockResolvedValueOnce('');
+    });
+
+    it('emits loadingContent and loadingSuccess event', () => {
+      let loadingContentEmitted = false;
+
+      contentEditor.on(LOADING_CONTENT_EVENT, () => {
+        loadingContentEmitted = true;
+      });
+      contentEditor.on(LOADING_SUCCESS_EVENT, () => {
+        expect(loadingContentEmitted).toBe(true);
+      });
+
+      contentEditor.setSerializedContent('**bold text**');
+    });
+  });
+
+  describe('when setSerializedContent fails', () => {
+    const error = 'error';
+
+    beforeEach(() => {
+      serializer.deserialize.mockRejectedValueOnce(error);
+    });
+
+    it('emits loadingError event', async () => {
+      contentEditor.on(LOADING_ERROR_EVENT, (e) => {
+        expect(e).toBe('error');
+      });
+
+      await expect(() => contentEditor.setSerializedContent('**bold text**')).rejects.toEqual(
+        error,
+      );
+    });
+  });
+});