highlight searched content

src/components/CustomNode/ObjectNode.tsx

@@ -16,15 +16,14 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
           {value.map(
             (val, idx) =>
               val[1] && (
-                <Styled.StyledRow key={idx} width={width}>
-                  <Styled.StyledKey
-                    data-x={x}
-                    data-y={y}
-                    data-key={val[1]}
-                    objectKey
-                  >
-                    {val[0]}:{" "}
-                  </Styled.StyledKey>
+                <Styled.StyledRow
+                  data-key={val[1]}
+                  data-x={x}
+                  data-y={y}
+                  key={idx}
+                  width={width}
+                >
+                  <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
                   {val[1]}
                 </Styled.StyledRow>
               )

src/components/CustomNode/styles.tsx

@@ -28,6 +28,11 @@ export const StyledForeignObject = styled.foreignObject`
     border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};
     border-radius: 2px;
   }
+
+  .highlight {
+    background-color: rgba(255, 0, 255, 0.5);
+    filter: hue-rotate();
+  }
 `;
 
 export const StyledKey = styled.span<{
@@ -38,7 +43,7 @@ export const StyledKey = styled.span<{
     parent ? theme.ORANGE : objectKey ? "#5c87ff" : theme.TEXT_POSITIVE};
 `;
 
-export const StyledRow = styled.div<{ width: number }>`
+export const StyledRow = styled.span<{ width: number }>`
   height: fit-content;
   overflow: hidden;
   text-overflow: ellipsis;

src/hooks/useFocusNode.tsx

@@ -53,7 +53,7 @@ export const useFocusNode = () => {
         zoomPanPinch.clientHeight / 2 -
         matchedNode.getBoundingClientRect().height / 2;
 
-      highlightMatchedNodes(matchedNodes);
+      highlightMatchedNodes(matchedNodes, selectedNode);
 
       settings.zoomPanPinch?.setTransform(newPositionX, newPositionY, newScale);
     } else {

src/utils/search.ts

@@ -3,17 +3,23 @@ export const searchQuery = (param: string) => {
 };
 
 export const cleanupHighlight = () => {
-  const nodes = document.querySelectorAll("foreignObject.searched");
+  const nodes = document.querySelectorAll("foreignObject.searched, .highlight");
 
   nodes?.forEach((node) => {
+    node.classList.remove("highlight");
     node.classList.remove("searched");
   });
 };
 
-export const highlightMatchedNodes = (nodes: NodeListOf<Element>) => {
+export const highlightMatchedNodes = (
+  nodes: NodeListOf<Element>,
+  selectedNode: number
+) => {
   nodes?.forEach((node) => {
     node.parentElement?.parentElement
       ?.closest("foreignObject")
       ?.classList.add("searched");
   });
+
+  nodes[selectedNode].classList.add("highlight");
 };