From 7477ba6d374589d17208dff8b520c47fa0e50aae Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Mon, 31 Mar 2025 03:54:44 +0000
Subject: [PATCH] feat(core): support sending success feedback via MessagePort
 for web clipper (#11256)

---
 .../desktop/pages/import-clipper/index.tsx    | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/core/src/desktop/pages/import-clipper/index.tsx b/packages/frontend/core/src/desktop/pages/import-clipper/index.tsx
index 4d9ebf403..1aac416be 100644
--- a/packages/frontend/core/src/desktop/pages/import-clipper/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/import-clipper/index.tsx
@@ -21,6 +21,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import * as styles from './style.css';
 
 const clipperInput$ = new LiveData<ClipperInput | null>(null);
+const port$ = new LiveData<MessagePort | null>(null);
 
 window.addEventListener('message', event => {
   if (
@@ -28,6 +29,10 @@ window.addEventListener('message', event => {
     event.data.type === 'affine-clipper:import'
   ) {
     clipperInput$.value = event.data.payload;
+
+    if (event.ports.length > 0) {
+      port$.value = event.ports[0];
+    }
   }
 });
 
@@ -90,6 +95,17 @@ export const Component = () => {
     []
   );
 
+  const handleSuccess = useCallback(() => {
+    const arg = { type: 'affine-clipper:import:success' };
+    const port = port$.value;
+    if (port) {
+      port.postMessage(arg);
+    } else {
+      window.postMessage(arg);
+    }
+    window.close();
+  }, []);
+
   const handleImportToSelectedWorkspace = useAsyncCallback(async () => {
     if (clipperInputSnapshot && selectedWorkspace) {
       setImporting(true);
@@ -98,17 +114,19 @@ export const Component = () => {
           selectedWorkspace,
           clipperInputSnapshot
         );
-        window.postMessage({
-          type: 'affine-clipper:import:success',
-        });
-        window.close();
+        handleSuccess();
       } catch (err) {
         setImportingError(err);
       } finally {
         setImporting(false);
       }
     }
-  }, [clipperInputSnapshot, importClipperService, selectedWorkspace]);
+  }, [
+    clipperInputSnapshot,
+    handleSuccess,
+    importClipperService,
+    selectedWorkspace,
+  ]);
 
   const handleImportToNewWorkspace = useAsyncCallback(async () => {
     if (!clipperInputSnapshot) {
@@ -121,16 +139,13 @@ export const Component = () => {
         'Workspace',
         clipperInputSnapshot
       );
-      window.postMessage({
-        type: 'affine-clipper:import:success',
-      });
-      window.close();
+      handleSuccess();
     } catch (err) {
       setImportingError(err);
     } finally {
       setImporting(false);
     }
-  }, [clipperInputSnapshot, importClipperService]);
+  }, [clipperInputSnapshot, handleSuccess, importClipperService]);
 
   const handleClickSignIn = useCallback(() => {
     window.open(