From 75850a770930dbb2ad5a279892c0dfacc1cb3d9b Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 9 Apr 2022 14:23:14 +0300
Subject: [PATCH] zoomToElement feature

---
 src/containers/LiveEditor/index.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/containers/LiveEditor/index.tsx b/src/containers/LiveEditor/index.tsx
index 307e6a0..24df533 100644
--- a/src/containers/LiveEditor/index.tsx
+++ b/src/containers/LiveEditor/index.tsx
@@ -69,6 +69,26 @@ export const LiveEditor: React.FC = React.memo(() => {
     wrapperRef.current?.resetTransform();
   }, [settings.transform]);
 
+  React.useEffect(() => {
+    const wrapperRect =
+      wrapperRef.current?.instance.wrapperComponent?.getBoundingClientRect();
+
+    const node = document.querySelector(
+      `span[data-key*='${settings.searchNode}' i]`
+    );
+
+    if (wrapperRect && node) {
+      const newScale = 0.8;
+      const x = Number(node.getAttribute("data-x"));
+      const y = Number(node.getAttribute("data-y"));
+
+      const newPositionX = (wrapperRect.left - x) * newScale;
+      const newPositionY = (wrapperRect.top - y) * newScale;
+
+      wrapperRef.current?.setTransform(newPositionX, newPositionY, newScale);
+    }
+  }, [settings.searchNode]);
+
   if (pageLoaded)
     return (
       <StyledLiveEditor>