fix: dispatcher

toeverything · Dec 28, 2023 · ec2f186 · ec2f186
1 parent ab6cd8b
commit ec2f186
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 35 deletions.
diff --git a/packages/block-std/src/event/control/clipboard.ts b/packages/block-std/src/event/control/clipboard.ts
@@ -16,12 +16,7 @@ export class ClipboardControl {
   }
 
   private _cut = (event: ClipboardEvent) => {
-    // if (
-    //   !event.target ||
-    //   !this._dispatcher.host.contains(event.target as Node)
-    // ) {
-    //   return;
-    // }
+    if (!this._dispatcher.focus) return;
 
     const clipboardEventState = new ClipboardEventState({
       event,
@@ -33,12 +28,7 @@ export class ClipboardControl {
   };
 
   private _copy = (event: ClipboardEvent) => {
-    // if (
-    //   !event.target ||
-    //   !this._dispatcher.host.contains(event.target as Node)
-    // ) {
-    //   return;
-    // }
+    if (!this._dispatcher.focus) return;
 
     const clipboardEventState = new ClipboardEventState({
       event,
@@ -50,12 +40,7 @@ export class ClipboardControl {
   };
 
   private _paste = (event: ClipboardEvent) => {
-    // if (
-    //   !event.target ||
-    //   !this._dispatcher.host.contains(event.target as Node)
-    // ) {
-    //   return;
-    // }
+    if (!this._dispatcher.focus) return;
 
     const clipboardEventState = new ClipboardEventState({
       event,

diff --git a/packages/block-std/src/event/control/keyboard.ts b/packages/block-std/src/event/control/keyboard.ts
@@ -46,6 +46,8 @@ export class KeyboardControl {
   }
 
   private _down = (event: KeyboardEvent) => {
+    if (!this._dispatcher.focus) return;
+
     const keyboardEventState = new KeyboardEventState({
       event,
       composing: this.composition,
@@ -57,6 +59,8 @@ export class KeyboardControl {
   };
 
   private _up = (event: KeyboardEvent) => {
+    if (!this._dispatcher.focus) return;
+
     const keyboardEventState = new KeyboardEventState({
       event,
       composing: this.composition,

diff --git a/packages/block-std/src/event/control/range.ts b/packages/block-std/src/event/control/range.ts
@@ -1,3 +1,5 @@
+import { assertExists } from '@blocksuite/global/utils';
+
 import { UIEventState, UIEventStateContext } from '../base.js';
 import type {
   EventName,
@@ -55,10 +57,11 @@ export class RangeControl {
   };
 
   private _selectionChange = (event: Event) => {
-    // if (!this._checkSelectionSource()) {
-    //   this._dispatcher.std.selection.clear();
-    //   return;
-    // }
+    this._checkSelectionSource();
+    if (!this._dispatcher.focus) {
+      // this._dispatcher.std.selection.clear();
+      return;
+    }
 
     const scope = this._buildScope('selectionChange');
 
@@ -69,18 +72,44 @@ export class RangeControl {
     return UIEventStateContext.from(new UIEventState(event));
   }
 
-  // private _checkSelectionSource = () => {
-  //   const selection = document.getSelection();
-  //   if (!selection || !selection.rangeCount) return true;
-
-  //   const range = selection.getRangeAt(0);
-  //   if (!range) return true;
-
-  //   if (!this._dispatcher.std.host.contains(range.startContainer)) return false;
-  //   if (!this._dispatcher.std.host.contains(range.endContainer)) return false;
+  private _checkSelectionSource = () => {
+    const selection = document.getSelection();
+    if (!selection || !selection.rangeCount) return;
+    const range = selection.getRangeAt(0);
+
+    const startElement =
+      range.startContainer instanceof Element
+        ? range.startContainer
+        : range.startContainer.parentElement;
+    if (!startElement) return;
+
+    if (
+      startElement === document.documentElement ||
+      startElement === document.body
+    )
+      return;
+
+    if (startElement.closest('.blocksuite-portal')) return;
+
+    const pageBlock = this._dispatcher.std.view.viewFromPath('block', [
+      this._dispatcher.std.page.root?.id ?? '',
+    ]);
+    if (!pageBlock) return;
+    // @ts-ignore
+    const viewport = pageBlock.viewportElement;
+    assertExists(viewport);
+
+    if (!viewport.contains(range.startContainer)) {
+      this._dispatcher.focus = false;
+      return;
+    }
+    if (!viewport.contains(range.endContainer)) {
+      this._dispatcher.focus = false;
+      return;
+    }
 
-  //   return true;
-  // };
+    this._dispatcher.focus = true;
+  };
 
   private _buildScope = (eventName: EventName) => {
     let scope: EventScope | undefined;

diff --git a/packages/block-std/src/event/dispatcher.ts b/packages/block-std/src/event/dispatcher.ts
@@ -68,6 +68,8 @@ export type EventScope = {
 export class UIEventDispatcher {
   disposables = new DisposableGroup();
 
+  private static _focus = true;
+
   private _handlersMap = Object.fromEntries(
     eventNames.map((name): [EventName, Array<EventHandlerRunner>] => [name, []])
   ) as Record<EventName, Array<EventHandlerRunner>>;
@@ -84,6 +86,14 @@ export class UIEventDispatcher {
     this._clipboardControl = new ClipboardControl(this);
   }
 
+  get focus() {
+    return UIEventDispatcher._focus;
+  }
+
+  set focus(value) {
+    UIEventDispatcher._focus = value;
+  }
+
   mount() {
     if (this.disposables.disposed) {
       this.disposables = new DisposableGroup();

diff --git a/packages/playground/examples/multiple-editors/doc-edgeless/main.ts b/packages/playground/examples/multiple-editors/doc-edgeless/main.ts
@@ -16,13 +16,13 @@ document.body.appendChild(container);
 const page1 = createEmptyPage().init();
 const editor1 = new DocEditor();
 editor1.page = page1;
-editor1.style.flex = '1';
+editor1.style.flex = '2';
 editor1.style.borderRight = '1px solid #ccc';
 container.appendChild(editor1);
 
 const page2 = createEmptyPage().init();
 const editor2 = new EdgelessEditor();
 editor2.page = page2;
-editor2.style.flex = '2';
+editor2.style.flex = '3';
 editor2.style.borderLeft = '1px solid #ccc';
 container.appendChild(editor2);