From d08a58a7bb60833ff06472410d2d19a8d1a80368 Mon Sep 17 00:00:00 2001
From: Hieu Pham <phamvanhieu74123@gmail.com>
Date: Mon, 3 Mar 2025 15:58:03 +0700
Subject: [PATCH] fix: onChange Text setProp many times

---
 .../landing/components/selectors/Text/index.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/landing/components/selectors/Text/index.tsx b/examples/landing/components/selectors/Text/index.tsx
index 6bef80b20..20356e9c2 100644
--- a/examples/landing/components/selectors/Text/index.tsx
+++ b/examples/landing/components/selectors/Text/index.tsx
@@ -1,5 +1,5 @@
 import { useNode, useEditor } from '@craftjs/core';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import ContentEditable from 'react-contenteditable';
 
 import { TextSettings } from './TextSettings';
@@ -30,13 +30,26 @@ export const Text = ({
   const { enabled } = useEditor((state) => ({
     enabled: state.options.enabled,
   }));
+  const textRef = useRef(text);
+
+  const decodeHTML = useCallback((str: string) => {
+    const div = document.createElement('div');
+    div.innerHTML = str;
+    return div.textContent || '';
+  }, []);
   return (
     <ContentEditable
       innerRef={connect}
       html={text} // innerHTML of the editable div
       disabled={!enabled}
       onChange={(e) => {
-        setProp((prop) => (prop.text = e.target.value), 500);
+        // Avoid calling setProp many times
+        const newText = e.target.value;
+
+        if (decodeHTML(newText) !== decodeHTML(textRef.current)) {
+          textRef.current = newText;
+          setProp((prop) => (prop.text = newText), 500);
+        }
       }} // use true to disable editing
       tagName="h2" // Use a custom HTML tag (uses a div by default)
       style={{