Fix/blur shrink ondelete

src/components/LayoutTree.tsx

@@ -491,7 +491,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' : 'nodeFadeOut'}
+        duration={isEmpty ? 'nodeFadeIn' : 'nodeDissolve'}
         nodeRef={fadeThoughtRef}
         in={transitionGroupsProps.in}
         unmountOnExit

src/components/Subthought.tsx

@@ -6,6 +6,7 @@ import LazyEnv from '../@types/LazyEnv'
 import Path from '../@types/Path'
 import SimplePath from '../@types/SimplePath'
 import ThoughtId from '../@types/ThoughtId'
+import useCachedNode from '../hooks/useCachedNode'
 import useChangeRef from '../hooks/useChangeRef'
 import attributeEquals from '../selectors/attributeEquals'
 import findFirstEnvContextWithZoom from '../selectors/findFirstEnvContextWithZoom'
@@ -59,6 +60,8 @@ const Subthought = ({
   const state = store.getState()
   const ref = useRef<HTMLDivElement>(null)
   const thought = useSelector(state => getThoughtById(state, head(simplePath)), shallowEqual)
+  // Cache the DOM before it is deleted
+  const cachedHTMLRef = useCachedNode({ thought, elementRef: ref })
   const noOtherContexts = useSelector(
     state => thought && isContextViewActive(state, simplePath) && getContexts(state, thought.value).length <= 1,
   )
@@ -114,6 +117,11 @@ const Subthought = ({
     ref.current.style.opacity = opacity
   })
 
+  // If the thought is deleted, return the cached static HTML from the ref
+  if (!thought && cachedHTMLRef.current) {
+    return <div dangerouslySetInnerHTML={{ __html: cachedHTMLRef.current }} />
+  }
+
   // Short circuit if thought has already been removed.
   // This can occur in a re-render even when thought is defined in the parent component.
   if (!thought) return null

src/durations.config.ts

@@ -32,6 +32,8 @@ const durationsConfig = {
   nodeFadeIn: 80,
   /* A fade out animation that is triggered when a node unmounts. See autofocusChanged for normal opacity animations. */
   nodeFadeOut: 80,
+  /* A dissolve animation that is triggered when a node is deleted. */
+  nodeDissolve: 80,
 } as const
 
 export default durationsConfig

src/hooks/useCachedNode.ts

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react'
+import { cx } from '../../styled-system/css'
+import { editableRecipe } from '../../styled-system/recipes'
+import Thought from '../@types/Thought'
+
+// Create a regular expression to match and remove BEM modifier (variant) classes
+const editableClass = cx(
+  editableRecipe({
+    preventAutoscroll: true,
+  }),
+).split(' ')
+
+// Filter classes containing '--' to identify variant classes
+const modifiers = editableClass.filter(cls => cls.includes('--'))
+
+// Precompile the regex once, so it's not recreated on each render
+const regex = new RegExp(`\\b(${modifiers.join('|')})\\b`, 'g')
+
+/**
+ * Custom hook to capture and cache the static HTML string of a node.
+ *
+ * @param thought - The thought object.
+ * @param elementRef - The ref of the node.
+ * @returns The cached HTML string.
+ */
+const useCachedNode = ({
+  thought,
+  elementRef: ref,
+}: {
+  thought: Thought
+  elementRef: React.RefObject<HTMLDivElement>
+}) => {
+  // Cache the DOM before it is deleted
+  const cachedHTMLRef = useRef<string | null>(null)
+
+  /**
+   * 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) => {
+    // Replace BEM modifier classes with an empty string
+    return htmlString.replace(regex, '').trim()
+  }
+
+  // Capture the static HTML string when the thought is first rendered
+  useEffect(() => {
+    if (thought && ref.current) {
+      cachedHTMLRef.current = cleanUpEditableClasses(ref.current.innerHTML)
+    }
+  }, [thought, ref])
+
+  return cachedHTMLRef
+}
+
+export default useCachedNode

src/recipes/fadeTransition.ts

@@ -35,6 +35,29 @@ const fadeTransitionRecipe = defineSlotRecipe({
         enter: { opacity: 1 },
         exitActive: { transition: `opacity {durations.nodeFadeOut} ease-out` },
       },
+      nodeDissolve: {
+        enter: {
+          transform: 'scale3d(1, 1, 1)',
+          filter: 'blur(0)',
+        },
+        enterActive: {
+          transform: 'scale3d(1, 1, 1)',
+          filter: 'blur(0)',
+          transition: `opacity {durations.nodeDissolve} ease-out, transform {durations.nodeDissolve} ease-out, filter {durations.nodeDissolve} ease-out`,
+        },
+        exit: {
+          transform: 'scale3d(1, 1, 1)',
+          filter: 'blur(0)',
+          transformOrigin: 'left',
+        },
+        exitActive: {
+          opacity: 0,
+          transform: 'scale3d(0.5, 0.5, 0.5)',
+          filter: 'blur(4px)',
+          transformOrigin: 'left',
+          transition: `opacity {durations.nodeDissolve} ease-out, transform {durations.nodeDissolve} ease-out, filter {durations.nodeDissolve} ease-out`,
+        },
+      },
     },
   },
   staticCss: ['*'],