fix: sort out logic to handel float button #58

Author: EINDEX

src/pages/content/QuickCapture.tsx

@@ -1,5 +1,4 @@
 import { buildTurndownService } from '@/utils';
-import { debounce } from '@/utils';
 import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import Browser from 'webextension-polyfill';
@@ -9,68 +8,65 @@ import scssStyles from './index.module.scss';
 const logseqCopilotPopupId = 'logseq-copilot-popup';
 export const zIndex = '2147483647';
 
-const capture = () => {
-  const selection = getSelection();
-  if (selection !== null) {
-    const range = selection!.getRangeAt(0);
-    const clonedSelection = range.cloneContents();
-    const turndownService = buildTurndownService();
-    selection?.removeAllRanges();
-    Browser.runtime.sendMessage({
-      type: 'clip-with-selection',
-      data: turndownService.turndown(clonedSelection),
-    });
-  } else {
-    clipPage();
-  }
-};
-
-const clipPage = () => {
-  Browser.runtime.sendMessage({
-    type: 'clip-page'
-  })
-};
-
-Browser.runtime.onMessage.addListener((request) => {
-  if (request.type === 'clip-with-selection' || request.type === 'clip') {
-    capture();
-  } else if (request.type === 'clip-page') {
-    clipPage();
-  }
-});
-
 const QuickCapture = () => {
   const [position, setPostion] = useState({
     x: 0,
     y: 0,
   });
   const [show, setShow] = useState(false);
 
-  const clicked = (event: MouseEvent) => {
-    if (show) {
-      return;
-    }
+  const capture = () => {
     const selection = getSelection();
-    if (selection && selection.toString().trim() !== '') {
-      setShow(true);
-      setPostion({ x: event.pageX + 10, y: event.pageY + 10 });
-      console.log('clicked');
+    if (selection !== null) {
+      const range = selection.getRangeAt(0);
+      const clonedSelection = range.cloneContents();
+      const turndownService = buildTurndownService();
+      selection.empty();
+      Browser.runtime.sendMessage({
+        type: 'clip-with-selection',
+        data: turndownService.turndown(clonedSelection),
+      });
+    } else {
+      clipPage();
     }
   };
 
-  const release = (event: MouseEvent) => {
-    setShow(false);
+  const clipPage = () => {
+    Browser.runtime.sendMessage({
+      type: 'clip-page'
+    })
   };
 
-  const quickCapture = () => {
-    setShow(false);
-    capture();
+
+  const clicked = (event: MouseEvent) => {
+    const selection = getSelection();
+    const haveSelection = selection && selection.toString().trim().length > 0;
+    const isButton = event.target && event.target.className && event.target.className.includes("quickCapture")
+    if (isButton) {
+      if (event.type === "mouseup") {
+        setShow(false);
+      }
+      return;
+    }
+    if (haveSelection && event.type === "mouseup") {
+      setShow(true);
+      setPostion({ x: event.pageX + 10, y: event.pageY + 10 });
+    } else {
+      setShow(false)
+    }
   };
 
   useEffect(() => {
-    document.addEventListener('mouseup', debounce(clicked, 100));
-    document.addEventListener('mousedown', debounce(release, 100));
-  });
+    document.addEventListener('mouseup', clicked);
+    document.addEventListener('mousedown', clicked);
+    Browser.runtime.onMessage.addListener((request) => {
+      if (request.type === 'clip-with-selection' || request.type === 'clip') {
+        capture();
+      } else if (request.type === 'clip-page') {
+        clipPage();
+      }
+    });
+  }, []);
 
   const styles = (): React.CSSProperties => {
     return {
@@ -86,9 +82,9 @@ const QuickCapture = () => {
   return (
     <div className={scssStyles.popupButton} style={styles()}>
       <img
-        className={scssStyles.popupButton}
+        className={`${scssStyles.popupButton} quickCapture`}
         src={logo}
-        onClick={quickCapture}
+        onClick={capture}
         alt={'clip-button'}
       />
     </div>

src/pages/content/index.module.scss

@@ -52,3 +52,8 @@
 .popupButton {
   @apply rounded-lg h-6 w-6;
 }
+
+::highlight(copilot-highlight) {
+  background-color: rgba(255, 192, 4, 0.5);
+  color: black;
+}