style search node

src/components/CustomNode/styles.tsx

@@ -34,8 +34,8 @@ export const StyledForeignObject = styled.foreignObject<{
   }
 
   .highlight {
-    background-color: rgba(255, 0, 255, 0.5);
-    filter: hue-rotate();
+    border: 2px dashed #FF2970;
+    background: rgba(255, 214, 0, 0.3);
   }
 
   .renderVisible {

src/hooks/useFocusNode.tsx

@@ -23,7 +23,7 @@ export const useFocusNode = () => {
 
     const debouncer = setTimeout(() => {
       setContent((val) => ({ ...val, debounced: content.value }));
-    }, 1500);
+    }, 800);
 
     return () => clearTimeout(debouncer);
   }, [content.value, setConfig]);

src/utils/search.ts

@@ -16,9 +16,9 @@ export const highlightMatchedNodes = (
   selectedNode: number
 ) => {
   nodes?.forEach((node) => {
-    node.parentElement?.parentElement
-      ?.closest("foreignObject")
-      ?.classList.add("searched");
+    console.log(node.parentElement?.closest("foreignObject"));
+
+    node.parentElement?.closest("foreignObject")?.classList.add("searched");
   });
 
   nodes[selectedNode].classList.add("highlight");