feat: force copy onpaste event

Author: WindRunnerMax

packages/copy/src/constant/event.ts

@@ -19,3 +19,4 @@ export const FOCUS = "focus";
 export const BLUR = "blur";
 export const FOCUS_IN = "focusin";
 export const FOCUS_OUT = "focusout";
+export const PASTE = "paste";

packages/force-copy/src/bridge/content-inject/request.ts

@@ -8,7 +8,9 @@ const CI_REQUEST_ENUM = [
   "DEBUG_MOUSE_EVENT",
   "DEBUG_FOCUS_EVENT",
   "DEBUG_EDITABLE",
+  "DEBUG_PASTE",
 ] as const;
+
 export const CONTENT_TO_INJECT_REQUEST = CI_REQUEST_ENUM.reduce(
   (acc, cur) => ({ ...acc, [cur]: `__${cur}__${MARK}__` }),
   {} as { [K in typeof CI_REQUEST_ENUM[number]]: `__${K}__${typeof MARK}__` }
@@ -28,6 +30,7 @@ export type EventMap = {
   [CONTENT_TO_INJECT_REQUEST.DEBUG_MOUSE_EVENT]: null;
   [CONTENT_TO_INJECT_REQUEST.DEBUG_FOCUS_EVENT]: null;
   [CONTENT_TO_INJECT_REQUEST.DEBUG_EDITABLE]: null;
+  [CONTENT_TO_INJECT_REQUEST.DEBUG_PASTE]: null;
 };
 
 export type CIRequestType = Reflex.Tuple<EventMap>;

packages/force-copy/src/bridge/popup-content/request.ts

@@ -9,7 +9,9 @@ const PC_REQUEST_TYPE = [
   "DEBUG_MOUSE_EVENT",
   "DEBUG_FOCUS_EVENT",
   "DEBUG_EDITABLE",
+  "DEBUG_PASTE_EVENT",
 ] as const;
+
 export const POPUP_TO_CONTENT_REQUEST = PC_REQUEST_TYPE.reduce(
   (acc, cur) => ({ ...acc, [cur]: `__${cur}__${MARK}__` }),
   {} as { [K in typeof PC_REQUEST_TYPE[number]]: `__${K}__${typeof MARK}__` }
@@ -23,6 +25,7 @@ type EventMap = {
   [POPUP_TO_CONTENT_REQUEST.DEBUG_MOUSE_EVENT]: null;
   [POPUP_TO_CONTENT_REQUEST.DEBUG_FOCUS_EVENT]: null;
   [POPUP_TO_CONTENT_REQUEST.DEBUG_EDITABLE]: null;
+  [POPUP_TO_CONTENT_REQUEST.DEBUG_PASTE_EVENT]: null;
 };
 
 export type PCRequestType = Reflex.Tuple<EventMap>;

packages/force-copy/src/content/channel/popup.ts

@@ -84,5 +84,12 @@ export const onPopupMessage = (data: PCRequestType) => {
       });
       break;
     }
+    case PCBridge.REQUEST.DEBUG_PASTE_EVENT: {
+      CIBridge.postToInject({
+        type: CIBridge.REQUEST.DEBUG_PASTE,
+        payload: null,
+      });
+      break;
+    }
   }
 };

packages/force-copy/src/inject/channel/content.ts

@@ -48,6 +48,10 @@ export const onContentMessage = (handler: WebSite) => {
         document.body.contentEditable = "true";
         break;
       }
+      case CIBridge.REQUEST.DEBUG_PASTE: {
+        EventBus.on(EVENTS_ENUM.PASTE_CAPTURE, stopNativePropagation);
+        break;
+      }
     }
   };
 };

packages/force-copy/src/inject/utils/bus.ts

@@ -21,6 +21,7 @@ const EVENTS_TYPE = [
   "MOUSE_MOVE_CAPTURE",
   "TOUCH_MOVE_CAPTURE",
   "TOUCH_END_CAPTURE",
+  "PASTE_CAPTURE",
 ] as const;
 
 export const EVENTS_ENUM = EVENTS_TYPE.reduce(
@@ -48,6 +49,7 @@ interface EventBusParams {
   [EVENTS_ENUM.BLUR_CAPTURE]: FocusEvent;
   [EVENTS_ENUM.TOUCH_MOVE_CAPTURE]: TouchEvent;
   [EVENTS_ENUM.TOUCH_END_CAPTURE]: TouchEvent;
+  [EVENTS_ENUM.PASTE_CAPTURE]: ClipboardEvent;
 }
 
 declare module "laser-utils/dist/es/event-bus" {

packages/force-copy/src/popup/components/tools/index.module.scss

@@ -8,10 +8,4 @@ $box-shadow: 0 0 4px var(--color-border-2);
   border-radius: 4px;
   box-shadow: $box-shadow;
 
-  .row {
-    margin-bottom: 5px;
-    &:last-child {
-      margin-bottom: auto;
-    }
-  }
 }

packages/force-copy/src/popup/components/tools/index.tsx

@@ -4,17 +4,16 @@ import type { FC } from "react";
 import type { I18n } from "@/popup/i18n";
 import { PCBridge } from "@/bridge/popup-content";
 
-const Row = Grid.Row;
-const Col = Grid.Col;
+const GridItem = Grid.GridItem;
 
 export const Tools: FC<{
   i18n: I18n;
   visible?: boolean;
 }> = ({ i18n }) => {
   return (
     <div className={styles.container}>
-      <Row className={styles.row} gutter={10}>
-        <Col span={12}>
+      <Grid cols={2} colGap={10} rowGap={5}>
+        <GridItem>
           <Button
             size="mini"
             onClick={() =>
@@ -26,8 +25,8 @@ export const Tools: FC<{
           >
             {i18n.t("Tools.MouseEvent")}
           </Button>
-        </Col>
-        <Col span={12}>
+        </GridItem>
+        <GridItem>
           <Button
             onClick={() =>
               PCBridge.postToContent({
@@ -39,10 +38,8 @@ export const Tools: FC<{
           >
             {i18n.t("Tools.FocusEvent")}
           </Button>
-        </Col>
-      </Row>
-      <Row className={styles.row}>
-        <Col span={12}>
+        </GridItem>
+        <GridItem>
           <Button
             onClick={() =>
               PCBridge.postToContent({
@@ -54,8 +51,21 @@ export const Tools: FC<{
           >
             {i18n.t("Tools.Editable")}
           </Button>
-        </Col>
-      </Row>
+        </GridItem>
+        <GridItem>
+          <Button
+            onClick={() =>
+              PCBridge.postToContent({
+                type: PCBridge.REQUEST.DEBUG_PASTE_EVENT,
+                payload: null,
+              })
+            }
+            size="mini"
+          >
+            {i18n.t("Tools.PasteEvent")}
+          </Button>
+        </GridItem>
+      </Grid>
     </div>
   );
 };

packages/force-copy/src/popup/i18n/en.ts

@@ -20,5 +20,6 @@ export const en = {
     MouseEvent: "MouseEvent",
     FocusEvent: "FocusEvent",
     Editable: "Editable",
+    PasteEvent: "PasteEvent",
   },
 };