fix: manual select leave blue rects

package.json

@@ -30,7 +30,6 @@
     "@twind/preset-autoprefix": "^1.0.7",
     "@twind/preset-tailwind": "^1.1.4",
     "beautiful-react-hooks": "^5.0.0",
-    "css-selector-generator": "^3.6.4",
     "fast-deep-equal": "^3.1.3",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",

src/content/Content.tsx

@@ -1,33 +1,50 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useReadability } from '../shared/hooks/useReadability';
 import { useMessaging } from './hooks/useMessaging';
-import { useSelectorGenerator } from './hooks/useSelectorGenerator';
+
+const CLIPPER_MARK_HOVERED = 'tiddlywikiClipperHovered';
 
 export function Content() {
   const { t } = useTranslation();
   const [isSelecting, setIsSelecting] = useState(false);
   const { parseReadability } = useReadability();
   const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);
-  useMessaging({ setIsSelecting, parseReadability, selectedElement });
-  const { updateSelector } = useSelectorGenerator();
+  const previousHoveredElementReference = useRef<HTMLElement | null>(null);
+  const previousHoveredElementOutlineReference = useRef<string>('');
+  // TODO: get selector and enable KBD to move selection.
+  // const { updateSelector } = useSelectorGenerator();
 
   const handleMouseMove = useCallback((event: MouseEvent) => {
     const element = event.target as HTMLElement | null;
     if (element === null) return;
+    if (previousHoveredElementReference.current === element) return;
+    // restore previous element
+    if (previousHoveredElementReference.current?.dataset?.[CLIPPER_MARK_HOVERED]) {
+      previousHoveredElementReference.current.style.outline = previousHoveredElementOutlineReference.current;
+    }
+    // backup current element
+    previousHoveredElementOutlineReference.current = element.style.outline ?? '';
+    previousHoveredElementReference.current = element;
+    // highlight current element
     element.style.outline = '2px solid blue'; // Highlight element
-    updateSelector(element); // Update the CSS selector
-  }, [updateSelector]);
+    element.dataset[CLIPPER_MARK_HOVERED] = 'true';
+    // updateSelector(element); // Update the CSS selector
+  }, []);
   const handleElementSelection = useCallback((event: MouseEvent) => {
     const element = event.target as HTMLElement | null;
+    if (element === null) return;
     setSelectedElement(element);
-    document.removeEventListener('mousemove', handleMouseMove); // Stop highlighting on mouse move
+    element.style.outline = '2px solid green'; // Highlight selected element
+    // Stop highlighting on mouse move, but still allow click on other element to fix the selection.
+    document.removeEventListener('mousemove', handleMouseMove);
   }, [handleMouseMove]);
   const cleanUp = useCallback(() => {
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('click', handleElementSelection);
   }, [handleElementSelection, handleMouseMove]);
+  useMessaging({ setIsSelecting, parseReadability, selectedElement, cleanUp });
 
   const handleCancelSelecting = useCallback(() => {
     setIsSelecting(false);

src/content/hooks/useMessaging.ts

@@ -3,6 +3,7 @@ import { IGetReadabilityMessageResponse, IStartClippingResponseMessage, ITabActi
 
 export function useMessaging(
   parameter: {
+    cleanUp: () => void;
     parseReadability: () => IGetReadabilityMessageResponse['article'];
     selectedElement: HTMLElement | null;
     setIsSelecting: Dispatch<SetStateAction<boolean>>;
@@ -15,7 +16,13 @@ export function useMessaging(
           parameter.setIsSelecting(true);
           break;
         }
+        /**
+         * we will try this when user click on extension icon. (whenever first-time or second-time, just try it)
+         *
+         * If `parameter.selectedElement` exists, means this is second-time (user open popup before and choose the "select manually", which is the first time.).
+         */
         case ITabActions.startClipping: {
+          parameter.cleanUp();
           parameter.setIsSelecting(false);
           if (parameter.selectedElement === null) return;
           const text = parameter.selectedElement.textContent ?? '';

src/shared/hooks/useReadability.ts

@@ -1,20 +1,20 @@
 import { Readability } from '@mozilla/readability';
-import { useCallback, useState } from 'react';
-import { IGetReadabilityMessageResponse } from '../message';
+import { useCallback } from 'react';
+// import { IGetReadabilityMessageResponse } from '../message';
 
 export function useReadability() {
-  const [article, setArticle] = useState<IGetReadabilityMessageResponse['article']>(null);
+  // const [article, setArticle] = useState<IGetReadabilityMessageResponse['article']>(null);
   const parseReadability = useCallback(() => {
     const documentClone = document.cloneNode(true) as Document;
     const reader = new Readability(documentClone);
     const article = reader.parse();
-    if (article !== null) {
-      setArticle(article);
-    }
+    // if (article !== null) {
+    //   setArticle(article);
+    // }
     return article;
   }, []);
   return {
-    article,
+    // article,
     parseReadability,
   };
 }