diff --git a/apps/builder/components/shared/CodeEditor.tsx b/apps/builder/components/shared/CodeEditor.tsx index f795c1793..28dddb057 100644 --- a/apps/builder/components/shared/CodeEditor.tsx +++ b/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) => { const editorContainer = useRef(null) const editorView = useRef(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, diff --git a/apps/builder/services/typebots/typebots.ts b/apps/builder/services/typebots/typebots.ts index 897af8e5f..73f7438c2 100644 --- a/apps/builder/services/typebots/typebots.ts +++ b/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)}`