From 4d39c31accc7cd1044fcb9b49ae06eb4d57d1d4a Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 29 Jun 2023 09:54:14 +0100
Subject: [PATCH] Merge pull request #13520 from overleaf/ae-state-tree

[visual] Refactoring in the atomic decorations state field

GitOrigin-RevId: e3cfd945dd900b3d7527bc9249132213d2a0e1bc
---
 .../extensions/visual/atomic-decorations.ts   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts b/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
index 7437bce8d6..bccea4296b 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
@@ -897,19 +897,19 @@ export const atomicDecorations = (options: Options) => {
     return Decoration.set(decorations, true)
   }
 
-  let previousTree: Tree
-
   return [
     StateField.define<{
       mousedown: boolean
       decorations: DecorationSet
+      previousTree: Tree
     }>({
       create(state) {
-        previousTree = syntaxTree(state)
+        const previousTree = syntaxTree(state)
 
         return {
           mousedown: false,
           decorations: createDecorations(state, previousTree),
+          previousTree,
         }
       },
       update(value, tr) {
@@ -917,33 +917,35 @@ export const atomicDecorations = (options: Options) => {
           // store the "mousedown" value when it changes
           if (effect.is(mouseDownEffect)) {
             value = {
+              ...value,
               mousedown: effect.value,
-              decorations: value.decorations, // unchanged
             }
           }
         }
 
         const tree = syntaxTree(tr.state)
         if (
-          tree.type === previousTree.type &&
+          tree.type === value.previousTree.type &&
           tree.length < tr.state.doc.length
         ) {
           // still parsing
           value = {
-            mousedown: value.mousedown, // unchanged
+            ...value,
             decorations: value.decorations.map(tr.changes),
           }
         } else if (
           // only update the decorations when the mouse is not making a selection
           !value.mousedown &&
-          (tree !== previousTree || tr.selection || hasMouseDownEffect(tr))
+          (tree !== value.previousTree ||
+            tr.selection ||
+            hasMouseDownEffect(tr))
         ) {
           // tree changed
-          previousTree = tree
           // TODO: update the existing decorations for the changed range(s)?
           value = {
-            mousedown: value.mousedown, // unchanged
+            ...value,
             decorations: createDecorations(tr.state, tree),
+            previousTree: tree,
           }
         }