fix: removed redundant codes from useBlockHighlight

chaibuilder · Nov 3, 2024 · 9978510 · 9978510
1 parent fe18a88
commit 9978510
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 45 deletions.
diff --git a/src/core/components/canvas/static/Canvas.tsx b/src/core/components/canvas/static/Canvas.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useFrame } from "../../../frame";
-import { useSelectedBlockIds, useSelectedStylingBlocks, useUpdateBlocksProps } from "../../../hooks";
+import { useSelectedBlockIds, useSelectedStylingBlocks, useUpdateBlocksProps, useBlockHighlight } from "../../../hooks";
 import { first, isEmpty, omit, throttle } from "lodash-es";
 import { Quill } from "react-quill";
 import { useAtom } from "jotai";
@@ -47,6 +47,7 @@ const useHandleCanvasDblClick = () => {
   const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"];
   const updateContent = useUpdateBlocksProps();
   const [editingBlockId, setEditingBlockId] = useAtom(inlineEditingActiveAtom);
+  const { clearHighlight } = useBlockHighlight();
 
   return (e) => {
     if (editingBlockId) return;
@@ -74,10 +75,7 @@ const useHandleCanvasDblClick = () => {
       newBlock.removeEventListener("blur", blurListener, true);
       destroyQuill(quill);
       setEditingBlockId("");
-      if (lastHighlighted) {
-        lastHighlighted.removeAttribute("data-highlighted");
-        lastHighlighted = null;
-      }
+      clearHighlight();
     }
     newBlock.addEventListener("blur", blurListener, true);
 
@@ -99,18 +97,15 @@ const useHandleCanvasClick = () => {
   const [ids, setIds] = useSelectedBlockIds();
   const [editingBlockId] = useAtom(inlineEditingActiveAtom);
   const [treeRef] = useAtom(treeRefAtom);
-
+  const { clearHighlight } = useBlockHighlight();
   return (e: any) => {
     if (editingBlockId) return;
     e.stopPropagation();
     const chaiBlock: HTMLElement = getTargetedBlock(e.target);
     if (chaiBlock?.getAttribute("data-block-id") && chaiBlock?.getAttribute("data-block-id") === "container") {
       setIds([]);
       setStyleBlockIds([]);
-      if (lastHighlighted) {
-        lastHighlighted.removeAttribute("data-highlighted");
-        lastHighlighted = null;
-      }
+      clearHighlight();
       return;
     }
 
@@ -133,59 +128,39 @@ const useHandleCanvasClick = () => {
       setStyleBlockIds([]);
       setIds(blockId === "canvas" ? [] : [blockId]);
     }
-    if (lastHighlighted) {
-      lastHighlighted.removeAttribute("data-highlighted");
-      lastHighlighted = null;
-    }
+
+    clearHighlight();
   };
 };
 
-let lastHighlighted: HTMLElement | null = null;
-
-const handleMouseMove = throttle((e: any) => {
-  if (lastHighlighted) {
-    lastHighlighted.removeAttribute("data-highlighted");
-  }
-
-  const chaiBlock = getTargetedBlock(e.target);
-  if (chaiBlock) {
-    chaiBlock.setAttribute("data-highlighted", "true");
-    lastHighlighted = chaiBlock;
-  } else {
-    lastHighlighted = null;
-  }
-}, 16);
-
 const useHandleMouseMove = () => {
   const [editingBlockId] = useAtom(inlineEditingActiveAtom);
-  return (e: any) => {
-    if (editingBlockId) return;
-    handleMouseMove(e);
-  };
-};
+  const { highlightBlock } = useBlockHighlight();
 
-const clearHighlight = () => {
-  if (lastHighlighted) {
-    lastHighlighted.removeAttribute("data-highlighted");
-    lastHighlighted = null;
-  }
+  return throttle((e: any) => {
+    if (editingBlockId) return;
+    const chaiBlock = getTargetedBlock(e.target);
+    if (chaiBlock) {
+      highlightBlock(chaiBlock.getAttribute("data-block-id"));
+    }
+  }, 16);
 };
 
 const useHandleMouseLeave = () => {
+  const { clearHighlight } = useBlockHighlight();
   return clearHighlight;
 };
 
 export const Canvas = ({ children }: { children: React.ReactNode }) => {
   const { document } = useFrame();
   const [ids] = useSelectedBlockIds();
   const [styleIds, setSelectedStylingBlocks] = useSelectedStylingBlocks();
+  const { clearHighlight } = useBlockHighlight();
 
   // Add cleanup effect
   useEffect(() => {
-    return () => {
-      clearHighlight();
-    };
-  }, []);
+    return clearHighlight;
+  }, [clearHighlight]);
 
   useEffect(() => {
     setTimeout(() => {

diff --git a/src/core/hooks/useBlockHighlight.ts b/src/core/hooks/useBlockHighlight.ts
@@ -1,6 +1,7 @@
 import { useAtom } from "jotai";
 import { canvasIframeAtom } from "../atoms/ui";
 
+//module-level variable to track the last highlighted block
 let lastHighlighted: HTMLElement | null = null;
 
 export const useBlockHighlight = () => {
@@ -29,5 +30,5 @@ export const useBlockHighlight = () => {
     }
   };
 
-  return { highlightBlock, clearHighlight };
+  return { highlightBlock, clearHighlight, lastHighlighted };
 };