diff --git a/packages/core/package.json b/packages/core/package.json
index deed381..569dea8 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/core/src/block/commonMark/codeBlock/code.ts b/packages/core/src/block/commonMark/codeBlock/code.ts
index 4a5715d..aeeb7cb 100644
--- a/packages/core/src/block/commonMark/codeBlock/code.ts
+++ b/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);
     }
 }
 
diff --git a/packages/core/src/block/extra/diagram/diagramPreview.ts b/packages/core/src/block/extra/diagram/diagramPreview.ts
index 25bea0d..fe116ef 100644
--- a/packages/core/src/block/extra/diagram/diagramPreview.ts
+++ b/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) {
diff --git a/packages/core/src/block/extra/math/mathPreview.ts b/packages/core/src/block/extra/math/mathPreview.ts
index 8b4ae7d..99aca10 100644
--- a/packages/core/src/block/extra/math/mathPreview.ts
+++ b/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) {
diff --git a/packages/core/src/block/gfm/table/index.ts b/packages/core/src/block/gfm/table/index.ts
index df47805..0a4d3e5 100644
--- a/packages/core/src/block/gfm/table/index.ts
+++ b/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,11 +92,10 @@ 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()!;
@@ -103,7 +103,9 @@ class Table extends Parent {
                 cursorBlock.setCursor(offset, offset, true);
             }
         };
-        eventCenter.attachDOMEvent(domNode!, 'mousedown', clickHandler);
+
+        const mousedownObservable = fromEvent(domNode!, 'mousedown');
+        mousedownObservable.subscribe(mousedownHandler);
     }
 
     queryBlock(path: TBlockPath) {
diff --git a/packages/core/src/clipboard/index.ts b/packages/core/src/clipboard/index.ts
index b23ccbd..2b3ce63 100644
--- a/packages/core/src/clipboard/index.ts
+++ b/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() {
diff --git a/packages/core/src/editor/index.ts b/packages/core/src/editor/index.ts
index 06bc2b9..a2d536b 100644
--- a/packages/core/src/editor/index.ts
+++ b/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() {
diff --git a/packages/facade/README.md b/packages/facade/README.md
new file mode 100644
index 0000000..f1fd416
--- /dev/null
+++ b/packages/facade/README.md
@@ -0,0 +1 @@
+# Use to export facade APIs.
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68e855d..23c8811 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,6 +131,9 @@ importers:
       prismjs:
         specifier: ^1.29.0
         version: 1.29.0
+      rxjs:
+        specifier: ^7.8.1
+        version: 7.8.1
       snabbdom:
         specifier: ^3.6.2
         version: 3.6.2
@@ -8585,7 +8588,6 @@ packages:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
     dependencies:
       tslib: 2.6.2
-    dev: true
 
   /sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}