refactor: use rxjs to replace eventCenter

packages/core/package.json

@@ -66,6 +66,7 @@
         "plantuml-encoder": "^1.4.0",
         "popper.js": "^1.16.1",
         "prismjs": "^1.29.0",
+        "rxjs": "^7.8.1",
         "snabbdom": "^3.6.2",
         "snabbdom-to-html": "^7.1.0",
         "turndown": "^7.1.3",

packages/core/src/block/commonMark/codeBlock/code.ts

@@ -1,3 +1,4 @@
+import { fromEvent } from 'rxjs';
 import copyIcon from '../../../assets/icons/copy/2.png';
 import Parent from '../../base/parent';
 import { ScrollPage } from '../../scrollPage';
@@ -79,7 +80,11 @@ class Code extends Parent {
     }
 
     listen() {
-        const { eventCenter, editor } = this.muya;
+        const { editor } = this.muya;
+
+        if (this.domNode == null)
+            return;
+
         // Copy code content to clipboard.
         const clickHandler = (event: Event) => {
             event.preventDefault();
@@ -99,16 +104,11 @@ class Code extends Parent {
             event.preventDefault();
         };
 
-        eventCenter.attachDOMEvent(
-            this.domNode?.firstElementChild as HTMLElement,
-            'click',
-            clickHandler,
-        );
-        eventCenter.attachDOMEvent(
-            this.domNode?.firstElementChild as HTMLElement,
-            'mousedown',
-            mousedownHandler,
-        );
+        const clickObservable = fromEvent(this.domNode.firstElementChild!, 'click');
+        clickObservable.subscribe(clickHandler);
+
+        const mousedownObservable = fromEvent(this.domNode.firstElementChild!, 'mousedown');
+        mousedownObservable.subscribe(mousedownHandler);
     }
 }
 

packages/core/src/block/extra/diagram/diagramPreview.ts

@@ -1,3 +1,4 @@
+import { fromEvent } from 'rxjs';
 import Parent from '../../base/parent';
 import { PREVIEW_DOMPURIFY_CONFIG } from '../../../config';
 import type { Muya } from '../../../muya';
@@ -94,13 +95,8 @@ class DiagramPreview extends Parent {
     }
 
     attachDOMEvents() {
-        const { eventCenter } = this.muya;
-
-        eventCenter.attachDOMEvent(
-            this.domNode!,
-            'click',
-            this.clickHandler.bind(this),
-        );
+        const clickObservable = fromEvent(this.domNode!, 'click');
+        clickObservable.subscribe(this.clickHandler.bind(this));
     }
 
     clickHandler(event: Event) {

packages/core/src/block/extra/math/mathPreview.ts

@@ -1,4 +1,5 @@
 import katex from 'katex';
+import { fromEvent } from 'rxjs';
 import Parent from '../../base/parent';
 import type { Muya } from '../../../muya';
 import logger from '../../../utils/logger';
@@ -43,13 +44,8 @@ class MathPreview extends Parent {
     }
 
     attachDOMEvents() {
-        const { eventCenter } = this.muya;
-
-        eventCenter.attachDOMEvent(
-            this.domNode!,
-            'click',
-            this.clickHandler.bind(this),
-        );
+        const clickObservable = fromEvent(this.domNode!, 'click');
+        clickObservable.subscribe(this.clickHandler.bind(this));
     }
 
     clickHandler(event: Event) {

packages/core/src/block/gfm/table/index.ts

@@ -1,4 +1,5 @@
 import diff from 'fast-diff';
+import { fromEvent } from 'rxjs';
 import { LinkedList } from '../../base/linkedList/linkedList';
 import Parent from '../../base/parent';
 import type TableCellContent from '../../content/tableCell';
@@ -91,19 +92,20 @@ class Table extends Parent {
     }
 
     private _listenDomEvent() {
-        const { eventCenter } = this.muya;
         const { domNode } = this;
 
         // Fix: prevent cursor present at the end of table.
-        const clickHandler = (event: Event) => {
+        const mousedownHandler = (event: Event) => {
             if (event.target === domNode) {
                 event.preventDefault();
                 const cursorBlock = this.lastContentInDescendant()!;
                 const offset = cursorBlock.text.length;
                 cursorBlock.setCursor(offset, offset, true);
             }
         };
-        eventCenter.attachDOMEvent(domNode!, 'mousedown', clickHandler);
+
+        const mousedownObservable = fromEvent(domNode!, 'mousedown');
+        mousedownObservable.subscribe(mousedownHandler);
     }
 
     queryBlock(path: TBlockPath) {

packages/core/src/clipboard/index.ts

@@ -1,3 +1,4 @@
+import { fromEvent, merge } from 'rxjs';
 import type Content from '../block/base/content';
 import type Parent from '../block/base/parent';
 import CodeBlockContent from '../block/content/codeBlockContent';
@@ -37,22 +38,22 @@ class Clipboard {
     constructor(public muya: Muya) {}
 
     listen() {
-        const { domNode, eventCenter } = this.muya;
+        const { domNode } = this.muya;
 
-        const copyCutHandler = (event: ClipboardEvent): void => {
+        const copyCutHandler = (event: Event) => {
             event.preventDefault();
             event.stopPropagation();
 
             const isCut = event.type === 'cut';
 
-            this.copyHandler(event);
+            this.copyHandler(event as ClipboardEvent);
 
             if (isCut)
                 this.cutHandler();
         };
 
-        const keydownHandler = (event: KeyboardEvent): void => {
-            const { key, metaKey } = event;
+        const keydownHandler = (event: Event) => {
+            const { key, metaKey } = event as KeyboardEvent;
 
             const { isSelectionInSameBlock } = this.selection.getSelection() ?? {};
             if (isSelectionInSameBlock)
@@ -75,22 +76,15 @@ class Clipboard {
             this.cutHandler();
         };
 
-        const pasteHandler = (event: ClipboardEvent): void => {
-            this.pasteHandler(event);
+        const pasteHandler = (event: Event) => {
+            this.pasteHandler(event as ClipboardEvent);
         };
 
-        eventCenter.attachDOMEvent(
-            domNode,
-            'copy',
-            copyCutHandler as EventListener,
-        );
-        eventCenter.attachDOMEvent(domNode, 'cut', copyCutHandler as EventListener);
-        eventCenter.attachDOMEvent(domNode, 'paste', pasteHandler as EventListener);
-        eventCenter.attachDOMEvent(
-            domNode,
-            'keydown',
-            keydownHandler as EventListener,
-        );
+        merge(fromEvent(domNode, 'copy'), fromEvent(domNode, 'cut'))
+            .subscribe(copyCutHandler);
+
+        fromEvent(domNode, 'paste').subscribe(pasteHandler);
+        fromEvent(domNode, 'keydown').subscribe(keydownHandler);
     }
 
     getClipboardData() {

packages/core/src/editor/index.ts

@@ -1,4 +1,5 @@
 import * as otText from 'ot-text-unicode';
+import { fromEvent, merge } from 'rxjs';
 import { ScrollPage } from '../block/scrollPage';
 import type Content from '../block/base/content';
 import type Format from '../block/base/format';
@@ -68,7 +69,6 @@ class Editor {
     }
 
     private _dispatchEvents() {
-        const { eventCenter } = this.muya;
         const { domNode } = this.muya;
 
         const eventHandler = (event: Event) => {
@@ -121,12 +121,14 @@ class Editor {
             }
         };
 
-        eventCenter.attachDOMEvent(domNode, 'click', eventHandler);
-        eventCenter.attachDOMEvent(domNode, 'input', eventHandler);
-        eventCenter.attachDOMEvent(domNode, 'keydown', eventHandler);
-        eventCenter.attachDOMEvent(domNode, 'keyup', eventHandler);
-        eventCenter.attachDOMEvent(domNode, 'compositionend', eventHandler);
-        eventCenter.attachDOMEvent(domNode, 'compositionstart', eventHandler);
+        merge(
+            fromEvent(domNode, 'click'),
+            fromEvent(domNode, 'input'),
+            fromEvent(domNode, 'keydown'),
+            fromEvent(domNode, 'keyup'),
+            fromEvent(domNode, 'compositionend'),
+            fromEvent(domNode, 'compositionstart'),
+        ).subscribe(eventHandler);
     }
 
     focus() {

packages/facade/README.md

@@ -0,0 +1 @@
+# Use to export facade APIs.