From 3d5356cb8edc043a721a5e66167b2814b191ebc2 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 29 Jul 2022 19:27:37 +0530
Subject: [PATCH] fix: use flushSync when moving line editor since we need to
 read previous value after setting state (#5508)

* fix: use flushSync when moving line editor since we need to read previous value after setting state

* add comment
---
 src/components/App.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5cd782b8..feb6d6a8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { flushSync } from "react-dom";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import clsx from "clsx";
@@ -2681,7 +2682,12 @@ class App extends React.Component<AppProps, AppState> {
         this.state.gridSize,
       );
       if (editingLinearElement !== this.state.editingLinearElement) {
-        this.setState({ editingLinearElement });
+        // Since we are reading from previous state which is not possible with
+        // automatic batching in React 18 hence using flush sync to synchronously
+        // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
+        flushSync(() => {
+          this.setState({ editingLinearElement });
+        });
       }
       if (editingLinearElement.lastUncommittedPoint != null) {
         this.maybeSuggestBindingAtCursor(scenePointer);