fix: the default addImageBlobHook is called even though it should have been deleted by hooks option

apps/editor/src/__test__/unit/editor.spec.ts

@@ -1,13 +1,15 @@
 import '@/i18n/en-us';
 import { oneLineTrim, stripIndents } from 'common-tags';
+import { Emitter } from '@t/event';
+import { EditorOptions } from '@t/editor';
 import type { OpenTagToken } from '@toast-ui/toastmark';
 import i18n from '@/i18n/i18n';
 import Editor from '@/editor';
 import Viewer from '@/Viewer';
 import * as commonUtil from '@/utils/common';
-import { EditorOptions } from '@t/editor';
 import { createHTMLrenderer } from './markdown/util';
 import { cls } from '@/utils/dom';
+import * as imageHelper from '@/helper/image';
 
 const HEADING_CLS = `${cls('md-heading')} ${cls('md-heading1')}`;
 const DELIM_CLS = cls('md-delimiter');
@@ -240,6 +242,20 @@ describe('editor', () => {
       expect(spy).toHaveBeenCalled();
     });
 
+    it('should be triggered only once when the event registered by addHook()', () => {
+      const spy = jest.fn();
+      const { eventEmitter } = editor;
+
+      eventEmitter.addEventType('custom');
+
+      editor.addHook('custom', spy);
+      editor.addHook('custom', spy);
+
+      eventEmitter.emit('custom');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
     describe('insertText()', () => {
       it('in markdown', () => {
         editor.insertText('test');
@@ -810,5 +826,37 @@ describe('editor', () => {
         expect(wwEditor.innerHTML).toContain(result);
       });
     });
+
+    describe('hooks option', () => {
+      const defaultImageBlobHookSpy = jest.fn();
+
+      function mockDefaultImageBlobHook() {
+        defaultImageBlobHookSpy.mockReset();
+
+        jest
+          .spyOn(imageHelper, 'addDefaultImageBlobHook')
+          .mockImplementation((emitter: Emitter) => {
+            emitter.listen('addImageBlobHook', defaultImageBlobHookSpy);
+          });
+      }
+
+      it('should remove default `addImageBlobHook` event handler after registering hook', () => {
+        const spy = jest.fn();
+
+        mockDefaultImageBlobHook();
+
+        createEditor({
+          el: container,
+          hooks: {
+            addImageBlobHook: spy,
+          },
+        });
+
+        editor.eventEmitter.emit('addImageBlobHook');
+
+        expect(spy).toHaveBeenCalled();
+        expect(defaultImageBlobHookSpy).not.toHaveBeenCalled();
+      });
+    });
   });
 });

apps/editor/src/__test__/unit/markdown/mdEditor.spec.ts

@@ -11,6 +11,8 @@ function getEditorHTML(editor: MarkdownEditor) {
   return editor.view.dom.innerHTML;
 }
 
+jest.useFakeTimers();
+
 describe('MarkdownEditor', () => {
   let mde: MarkdownEditor, em: EventEmitter, el: HTMLElement;
 
@@ -22,6 +24,8 @@ describe('MarkdownEditor', () => {
   });
 
   afterEach(() => {
+    jest.clearAllTimers();
+
     mde.destroy();
     document.body.removeChild(el);
   });
@@ -54,6 +58,9 @@ describe('MarkdownEditor', () => {
     mde.setMarkdown('# myText');
     mde.setSelection([1, 1], [1, 2]);
 
+    // run setTimeout function when focusing the editor
+    jest.runAllTimers();
+
     expect(getSelectedText()).toBe('#');
   });
 
@@ -89,6 +96,9 @@ describe('MarkdownEditor', () => {
   it('focus API', () => {
     mde.focus();
 
+    // run setTimeout function when focusing the editor
+    jest.runAllTimers();
+
     expect(document.activeElement).toEqual(mde.view.dom);
   });
 

apps/editor/src/__test__/unit/markdown/mdPreview.spec.ts

@@ -9,6 +9,8 @@ function getHTML(preview: MarkdownPreview) {
   return removeDataAttr(preview.getHTML());
 }
 
+jest.useFakeTimers();
+
 describe('Preview', () => {
   let eventEmitter: EventEmitter, preview: MarkdownPreview;
 
@@ -104,6 +106,7 @@ describe('preview highlight', () => {
   }
 
   afterEach(() => {
+    jest.clearAllTimers();
     document.body.removeChild(editorEl);
     editor.destroy();
     preview.destroy();
@@ -203,6 +206,9 @@ describe('preview highlight', () => {
     setMarkdown('# Heading');
     setCursor([1, 1]);
 
+    // run setTimeout function when focusing the editor
+    jest.runAllTimers();
+
     expect(getHighlightedCount()).toBe(1);
 
     blur();

apps/editor/src/__test__/unit/wysiwyg/wwEditor.spec.ts

@@ -9,6 +9,8 @@ import { createHTMLSchemaMap } from '@/wysiwyg/nodes/html';
 import { sanitizeHTML } from '@/sanitizer/htmlSanitizer';
 import { createHTMLrenderer } from '../markdown/util';
 
+jest.useFakeTimers();
+
 describe('WysiwygEditor', () => {
   let wwe: WysiwygEditor, em: EventEmitter, el: HTMLElement;
 
@@ -34,6 +36,7 @@ describe('WysiwygEditor', () => {
   });
 
   afterEach(() => {
+    jest.clearAllTimers();
     if (Object.keys(wwe).length) {
       wwe.destroy();
     }
@@ -50,6 +53,9 @@ describe('WysiwygEditor', () => {
     it(`focus() enable editor's dom selection state`, () => {
       wwe.focus();
 
+      // run setTimeout function when focusing the editor
+      jest.runAllTimers();
+
       expect(document.activeElement).toEqual(wwe.view.dom);
     });
 

apps/editor/src/editorCore.ts

@@ -197,14 +197,6 @@ class ToastUIEditorCore {
       sanitizer: customHTMLSanitizer || sanitizeHTML,
     };
     const wwToDOMAdaptor = new WwToDOMAdaptor(linkAttributes, rendererOptions.customHTMLRenderer);
-
-    if (this.options.hooks) {
-      forEachOwnProperties(this.options.hooks, (fn, key) => this.addHook(key, fn));
-    }
-
-    if (this.options.events) {
-      forEachOwnProperties(this.options.events, (fn, key) => this.on(key, fn));
-    }
     const htmlSchemaMap = createHTMLSchemaMap(
       rendererOptions.customHTMLRenderer,
       rendererOptions.sanitizer,
@@ -280,6 +272,14 @@ class ToastUIEditorCore {
     this.addInitEvent();
     this.addInitCommand(mdCommands, wwCommands);
 
+    if (this.options.hooks) {
+      forEachOwnProperties(this.options.hooks, (fn, key) => this.addHook(key, fn));
+    }
+
+    if (this.options.events) {
+      forEachOwnProperties(this.options.events, (fn, key) => this.on(key, fn));
+    }
+
     this.eventEmitter.emit('load', this);
     this.moveCursorToStart();
   }
@@ -685,6 +685,7 @@ class ToastUIEditorCore {
       this.mdEditor.setMarkdown(this.convertor.toMarkdownText(wwNode), !withoutFocus);
     }
 
+    this.eventEmitter.emit('removePopupWidget');
     this.eventEmitter.emit('changeMode', mode);
 
     if (!withoutFocus) {

apps/editor/src/event/eventEmitter.ts

@@ -21,6 +21,7 @@ const eventTypeList: EventTypes[] = [
   'toggleScrollSync',
   'mixinTableOffsetMapPrototype',
   'setFocusedNode',
+  'removePopupWidget',
   // provide event for user
   'openPopup',
   'closePopup',

apps/editor/src/plugins/popupWidget.ts

@@ -20,6 +20,7 @@ class PopupWidget {
   constructor(eventEmitter: Emitter) {
     this.eventEmitter = eventEmitter;
     this.eventEmitter.listen('blur', this.removeWidget);
+    this.eventEmitter.listen('removePopupWidget', this.removeWidget);
   }
 
   private removeWidget = () => {

apps/editor/types/event.d.ts

@@ -36,6 +36,7 @@ export type EventTypes =
   | 'toggleScrollSync'
   | 'mixinTableOffsetMapPrototype'
   | 'setFocusedNode'
+  | 'removePopupWidget'
   // provide event for user
   | 'openPopup'
   | 'closePopup'