From 84fdd59099f6a9795b9b8892357a210127c281c2 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 1 Oct 2024 09:55:37 +0800
Subject: [PATCH] refactor(web): style code update style on blur (#1159)

---
 .../Editor/StyleCode/index.tsx                | 40 +++++++++----------
 .../reearth-ui/components/CodeInput/index.tsx |  3 +-
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx
index 3d8f91acb..8598c5863 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleCode/index.tsx
@@ -2,7 +2,7 @@ import { CodeInput } from "@reearth/beta/lib/reearth-ui";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { styled } from "@reearth/services/theme";
 import { SetStateAction } from "jotai";
-import { Dispatch, FC, useCallback, useEffect, useState } from "react";
+import { Dispatch, FC, useCallback, useEffect, useRef, useState } from "react";
 
 import NoStyleMessage from "../NoStyleMessage";
 
@@ -13,36 +13,34 @@ type CodeProps = {
 
 const StyleCode: FC<CodeProps> = ({ layerStyle, setLayerStyle }) => {
   const [styleCode, setStyleCode] = useState<string | undefined>("");
+  const styleCodeRef = useRef<string | undefined>(styleCode);
+  styleCodeRef.current = styleCode;
 
   useEffect(() => {
     setStyleCode(JSON.stringify(layerStyle?.value, null, 2));
   }, [layerStyle]);
 
-  const handleStyleCodeChange = useCallback(
-    (newStyleCode?: string) => {
-      try {
-        const parsedStyle = JSON.parse(newStyleCode || "");
-        setLayerStyle((prev) => {
-          if (!prev?.id) return prev;
-          return {
-            ...prev,
-            value: parsedStyle
-          };
-        });
-      } catch (_error) {
-        // Do nothing
-      }
-
-      setStyleCode(newStyleCode);
-    },
-    [setLayerStyle]
-  );
+  const updateStyle = useCallback(() => {
+    try {
+      const parsedStyle = JSON.parse(styleCodeRef.current || "");
+      setLayerStyle((prev) => {
+        if (!prev?.id) return prev;
+        return {
+          ...prev,
+          value: parsedStyle
+        };
+      });
+    } catch (_error) {
+      // Do nothing
+    }
+  }, [setLayerStyle]);
 
   return layerStyle?.id ? (
     <CodeWrapper>
       <CodeInput
         value={styleCode}
-        onChange={handleStyleCodeChange}
+        onChange={setStyleCode}
+        onBlur={updateStyle}
         language="json"
         showLines={false}
       />
diff --git a/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx b/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
index 9f90b5ca0..c0806dc4f 100644
--- a/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
@@ -45,7 +45,8 @@ export const CodeInput: FC<CodeInputProps> = ({
       },
       scrollbar: {
         horizontal: "hidden"
-      }
+      },
+      tabSize: 2
     }),
     [disabled, showLines]
   );