From 73e62450d0c18ab1f94b7b874cfac7c851bb2356 Mon Sep 17 00:00:00 2001
From: zjxxxxxxxxx <43126836+zjxxxxxxxxx@users.noreply.github.com>
Date: Tue, 26 Nov 2024 21:25:07 +0800
Subject: [PATCH] fix: event mask layer event not triggered

---
 .changeset/brave-toes-move.md                 |  5 +++++
 .codesandbox/tasks.json                       | 10 ++++------
 README.md                                     |  3 ++-
 README.zh-CN.md                               |  3 ++-
 packages/client/src/bridge/treeOpenBridge.tsx | 17 ++++++++++-------
 5 files changed, 23 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/brave-toes-move.md

diff --git a/.changeset/brave-toes-move.md b/.changeset/brave-toes-move.md
new file mode 100644
index 00000000..6f59581d
--- /dev/null
+++ b/.changeset/brave-toes-move.md
@@ -0,0 +1,5 @@
+---
+'@open-editor/client': patch
+---
+
+Fix event mask layer event not triggered
diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json
index b4d86809..015bf071 100644
--- a/.codesandbox/tasks.json
+++ b/.codesandbox/tasks.json
@@ -1,16 +1,14 @@
 {
   "$schema": "https://codesandbox.io/schemas/tasks.json",
-  "setupTasks": [
-    {
+  "tasks": {
+    "install": {
       "name": "Install Dependencies",
       "command": "pnpm install:ci"
     },
-    {
+    "build": {
       "name": "Build packages",
       "command": "pnpm build"
-    }
-  ],
-  "tasks": {
+    },
     "rollup-react15": {
       "name": "Preview @playground/rollup-react15",
       "command": "pnpm --filter @playground/rollup-react15 dev",
diff --git a/README.md b/README.md
index 0f769794..92ae1aa6 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,8 @@
 
 Whether you are a `React` developer, a `Vue` developer, or a developer who uses both `React` and `Vue`, this development tool can help you. It can save you a lot of time searching for code and allow you to focus more on writing code. It can achieve the same effect in both `React` and `Vue`.
 
-![image](./public/demo.gif)
+[↓↓↓ Click here to open StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react?embed=1&file=vite.config.ts&hideExplorer=1)
+[![image](./public/demo.gif)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react?embed=1&file=vite.config.ts&hideExplorer=1)
 
 > Valid only during development, requires Node.js version 14+.
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 6dda9d92..f37a392d 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -21,7 +21,8 @@
 
 不论您是一个`React`开发者， 还是一个`Vue`开发者，又或者是一个`React`、`Vue`双料开发者，这款开发工具都可以帮助到您。它能够帮您省去大量查找代码的时间，使您能够更加专心的编写代码。无论在`React`还是`Vue`中，它都能够达到完全相同的效果。
 
-![image](./public/demo.gif)
+[↓↓↓ 点击这里打开 StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react?embed=1&file=vite.config.ts&hideExplorer=1)
+[![image](./public/demo.gif)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react?embed=1&file=vite.config.ts&hideExplorer=1)
 
 > 仅在 development 生效，需要 Node.js 版本 14+。
 
diff --git a/packages/client/src/bridge/treeOpenBridge.tsx b/packages/client/src/bridge/treeOpenBridge.tsx
index b3c22c47..66eb29a3 100644
--- a/packages/client/src/bridge/treeOpenBridge.tsx
+++ b/packages/client/src/bridge/treeOpenBridge.tsx
@@ -4,6 +4,8 @@ import { appendChild } from '../utils/dom';
 import { onMessage, postMessage } from '../utils/message';
 import { resolveSource, type CodeSource } from '../resolve';
 import { TREE_OPEN_CROSS_IFRAME } from '../constants';
+import { on } from '../event';
+import { off } from 'process';
 
 export const treeOpenBridge = crossIframeBridge<[CodeSource]>({
   setup() {
@@ -13,13 +15,14 @@ export const treeOpenBridge = crossIframeBridge<[CodeSource]>({
   },
   emitMiddlewares: [
     (_, next) => {
-      const preventEventOverlay = (
-        <div
-          className="oe-prevent-event-overlay"
-          onPointerUp={() => preventEventOverlay.remove()}
-          onPointerOut={() => preventEventOverlay.remove()}
-        />
-      );
+      const preventEventOverlay = <div className="oe-prevent-event-overlay" />;
+      const remove = () => {
+        off('pointerup', remove);
+        off('pointerout', remove);
+        preventEventOverlay.remove();
+      };
+      on('pointerup', remove, { capture: true });
+      on('pointerout', remove, { capture: true });
       appendChild(document.body, preventEventOverlay);
 
       next();