From 1a5c60f85f679ee7952ed658cb67652a190db963 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 30 Jun 2022 10:54:43 +0800
Subject: [PATCH] fix: color input infinite loop

---
 .../src/components/inputs/ColorInput.tsx          | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
index 97558cc83c..dfb6ba88f5 100644
--- a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
@@ -7,15 +7,22 @@ interface ColorInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 export function ColorInput({ label, value, onChange, ...rest }: ColorInputProps) {
   const ref = React.useRef<HTMLDivElement>(null)
   const [computedValue, setComputedValue] = React.useState(value)
-
+  let varName: string | undefined
   // TODO: listen to theme change?
   if (value?.toString().startsWith('var') && ref.current) {
-    const varName = /var\((.*)\)/.exec(value.toString())?.[1]
+    varName = /var\((.*)\)/.exec(value.toString())?.[1]
     if (varName) {
-      setComputedValue(getComputedStyle(ref.current).getPropertyValue(varName).trim())
+      const newValue = getComputedStyle(ref.current).getPropertyValue(varName).trim();
+      if (newValue !== computedValue) {
+        setComputedValue(newValue)
+      }
     }
   }
 
+  if (varName) {
+    return null
+  }
+
   return (
     <div className="input" ref={ref}>
       <label htmlFor={`color-${label}`}>{label}</label>
@@ -25,7 +32,7 @@ export function ColorInput({ label, value, onChange, ...rest }: ColorInputProps)
           name={`color-${label}`}
           type="color"
           value={computedValue}
-          onChange={(e) => {
+          onChange={e => {
             setComputedValue(e.target.value)
             onChange?.(e)
           }}