fix(editor): 🚸 Improve equality check

apps/builder/components/shared/CodeEditor.tsx

@@ -5,7 +5,7 @@ import { css } from '@codemirror/lang-css'
 import { javascript } from '@codemirror/lang-javascript'
 import { html } from '@codemirror/lang-html'
 import { useEffect, useRef, useState } from 'react'
-import { useDebounce } from 'use-debounce'
+import { useDebouncedCallback } from 'use-debounce'
 
 type Props = {
   value: string
@@ -22,12 +22,22 @@ export const CodeEditor = ({
 }: Props & Omit<BoxProps, 'onChange'>) => {
   const editorContainer = useRef<HTMLDivElement | null>(null)
   const editorView = useRef<EditorView | null>(null)
-  const [plainTextValue, setPlainTextValue] = useState(value)
-  const [debouncedValue] = useDebounce(
-    plainTextValue,
+  const [, setPlainTextValue] = useState(value)
+  const debounced = useDebouncedCallback(
+    (value) => {
+      setPlainTextValue(value)
+      onChange && onChange(value)
+    },
     process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
   )
 
+  useEffect(
+    () => () => {
+      debounced.flush()
+    },
+    [debounced]
+  )
+
   useEffect(() => {
     if (!editorView.current || !isReadOnly) return
     editorView.current.dispatch({
@@ -40,12 +50,6 @@ export const CodeEditor = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value])
 
-  useEffect(() => {
-    if (!onChange || debouncedValue === value) return
-    onChange(debouncedValue)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
-
   useEffect(() => {
     const editor = initEditor(value)
     return () => {
@@ -58,7 +62,7 @@ export const CodeEditor = ({
     if (!editorContainer.current) return
     const updateListenerExtension = EditorView.updateListener.of((update) => {
       if (update.docChanged && onChange)
-        setPlainTextValue(update.state.doc.toJSON().join('\n'))
+        debounced(update.state.doc.toJSON().join('\n'))
     })
     const extensions = [
       updateListenerExtension,

apps/builder/services/typebots/typebots.ts

@@ -49,6 +49,7 @@ import { deepEqual } from 'fast-equals'
 import { stringify } from 'qs'
 import { isChoiceInput, isConditionStep, sendRequest, omit } from 'utils'
 import cuid from 'cuid'
+import { diff } from 'deep-object-diff'
 
 export type TypebotInDashboard = Pick<
   Typebot,
@@ -253,12 +254,35 @@ export const checkIfTypebotsAreEqual = (typebotA: Typebot, typebotB: Typebot) =>
 
 export const checkIfPublished = (
   typebot: Typebot,
-  publicTypebot: PublicTypebot
-) =>
-  deepEqual(typebot.blocks, publicTypebot.blocks) &&
-  deepEqual(typebot.settings, publicTypebot.settings) &&
-  deepEqual(typebot.theme, publicTypebot.theme) &&
-  deepEqual(typebot.variables, publicTypebot.variables)
+  publicTypebot: PublicTypebot,
+  debug?: boolean
+) => {
+  if (debug)
+    console.log(
+      diff(
+        JSON.parse(JSON.stringify(typebot.blocks)),
+        JSON.parse(JSON.stringify(publicTypebot.blocks))
+      )
+    )
+  return (
+    deepEqual(
+      JSON.parse(JSON.stringify(typebot.blocks)),
+      JSON.parse(JSON.stringify(publicTypebot.blocks))
+    ) &&
+    deepEqual(
+      JSON.parse(JSON.stringify(typebot.settings)),
+      JSON.parse(JSON.stringify(publicTypebot.settings))
+    ) &&
+    deepEqual(
+      JSON.parse(JSON.stringify(typebot.theme)),
+      JSON.parse(JSON.stringify(publicTypebot.theme))
+    ) &&
+    deepEqual(
+      JSON.parse(JSON.stringify(typebot.variables)),
+      JSON.parse(JSON.stringify(publicTypebot.variables))
+    )
+  )
+}
 
 export const parseDefaultPublicId = (name: string, id: string) =>
   toKebabCase(name) + `-${id?.slice(-7)}`