fix: event mask layer event not triggered

.changeset/brave-toes-move.md

@@ -0,0 +1,5 @@
+---
+'@open-editor/client': patch
+---
+
+Fix event mask layer event not triggered

.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",

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+.
 

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+。
 

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();