From e4cea813d7b63e867b43511f6aef214697583a0a Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 29 Sep 2022 22:29:54 +0200
Subject: [PATCH] When we quit text editing mode, we need to safe again
 otherwise it can happen before debounce calls.

---
 .../text-editor/plugins/plugin-on-change.tsx  | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-on-change.tsx b/apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-on-change.tsx
index a4426d566d..196693fa9b 100644
--- a/apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-on-change.tsx
+++ b/apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-on-change.tsx
@@ -1,5 +1,5 @@
 import { type ChildrenUpdates } from "@webstudio-is/react-sdk";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useDebounce } from "react-use";
 import {
   OnChangePlugin as LexicalOnChangePlugin,
@@ -14,17 +14,18 @@ export const OnChangePlugin = ({
 }) => {
   const [editorState, setEditorState] = useState<EditorState>();
 
-  useDebounce(
-    () => {
-      if (editorState === undefined) return;
-      editorState.read(() => {
-        const updates = toUpdates(editorState.toJSON().root);
-        onChange(updates);
-      });
-    },
-    500,
-    [editorState]
-  );
+  const handleChange = useCallback(() => {
+    if (editorState === undefined) return;
+    editorState.read(() => {
+      const updates = toUpdates(editorState.toJSON().root);
+      onChange(updates);
+    });
+  }, [editorState, onChange]);
+
+  // When we quit editing mode, we need to safe again otherwise it can happen before debounce calls.
+  useEffect(() => handleChange);
+
+  useDebounce(handleChange, 1000, [handleChange]);
 
   return <LexicalOnChangePlugin onChange={setEditorState} />;
 };