From 2716fa6795d471b5b883cb24812974ddbe71303d Mon Sep 17 00:00:00 2001 From: jocs Date: Thu, 25 Apr 2024 22:29:36 +0800 Subject: [PATCH] refactor: use rxjs to replace eventCenter --- packages/core/package.json | 1 + .../src/block/commonMark/codeBlock/code.ts | 22 +++++++++---------- .../src/block/extra/diagram/diagramPreview.ts | 10 +++------ .../core/src/block/extra/math/mathPreview.ts | 10 +++------ packages/core/src/block/gfm/table/index.ts | 8 ++++--- packages/facade/README.md | 1 + pnpm-lock.yaml | 4 +++- 7 files changed, 27 insertions(+), 29 deletions(-) create mode 100644 packages/facade/README.md 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/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==}