refactor: use fromEvent to replace attachDOMEvent

marktext · May 1, 2024 · bdc2aa5 · bdc2aa5
1 parent 2716fa6
commit bdc2aa5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 26 deletions.
diff --git 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
@@ -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() {