From 7859290c4ed5290d65ec36c2e678395d8d914594 Mon Sep 17 00:00:00 2001
From: Heri Setiawan <heri.dehero@gmail.com>
Date: Tue, 24 Dec 2024 19:16:24 +0700
Subject: [PATCH] Fix missing frame when dissolving

---
 src/components/LayoutTree.tsx |  6 +-----
 src/components/Subthought.tsx | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/LayoutTree.tsx b/src/components/LayoutTree.tsx
index bfbb29e234..aad3c091cc 100644
--- a/src/components/LayoutTree.tsx
+++ b/src/components/LayoutTree.tsx
@@ -430,10 +430,6 @@ const TreeNode = ({
     const lastPatches = state.undoPatches[state.undoPatches.length - 1]
     return lastPatches?.some(patch => patch.actions[0] === 'newThought')
   })
-  const isLastActionDeleteThought = useSelector(state => {
-    const lastPatches = state.undoPatches[state.undoPatches.length - 1]
-    return lastPatches?.some(patch => patch.actions[0] === 'deleteThoughtWithCursor')
-  })
 
   useLayoutEffect(() => {
     if (y !== _y) {
@@ -493,7 +489,7 @@ const TreeNode = ({
         // The FadeTransition is only responsible for fade out on unmount;
         // or for fade in on mounting of a new thought.
         // See autofocusChanged for normal opacity transition.
-        duration={isEmpty ? 'nodeFadeIn' : isLastActionDeleteThought ? 'nodeDissolve' : 'nodeFadeOut'}
+        duration={isEmpty ? 'nodeFadeIn' : 'nodeDissolve'}
         nodeRef={fadeThoughtRef}
         in={transitionGroupsProps.in}
         unmountOnExit
diff --git a/src/components/Subthought.tsx b/src/components/Subthought.tsx
index 48210c5256..83a852e20c 100644
--- a/src/components/Subthought.tsx
+++ b/src/components/Subthought.tsx
@@ -117,12 +117,28 @@ const Subthought = ({
     ref.current.style.opacity = opacity
   })
 
+  /**
+   * Cleans up editable classes from the provided HTML string.
+   *
+   * @param htmlString - The HTML string to clean up.
+   * @returns The cleaned HTML string.
+   */
+  const cleanUpEditableClasses = (htmlString: string) => {
+    const container = document.createElement('div')
+    container.innerHTML = htmlString
+    const editableElements = container.querySelectorAll('.editable--preventAutoscroll_true')
+    editableElements.forEach(element => {
+      element.classList.remove('editable--preventAutoscroll_true')
+    })
+    return container.innerHTML
+  }
+
   // Capture the static HTML string when the thought is first rendered
   useEffect(() => {
     if (thought && ref.current) {
-      cachedHTMLRef.current = ref.current.innerHTML
+      cachedHTMLRef.current = cleanUpEditableClasses(ref.current.innerHTML)
     }
-  }, [thought])
+  }, [thought, ref])
 
   // If the thought is deleted, return the cached static HTML from the ref
   if (!thought && cachedHTMLRef.current) {