From b6e7ca23a55be36ccfefc11f55fd7216f332f66f Mon Sep 17 00:00:00 2001
From: Ethan James <ethan.e.james@gmail.com>
Date: Sat, 18 Jan 2025 10:07:38 -0800
Subject: [PATCH] LayoutTree: use different hideCaret name in table (#2775)

---
 src/components/LayoutTree.tsx        |  9 +++++++--
 src/selectors/rootedGrandparentOf.ts | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/selectors/rootedGrandparentOf.ts

diff --git a/src/components/LayoutTree.tsx b/src/components/LayoutTree.tsx
index 6d910e4a8a..ee94e6bc5b 100644
--- a/src/components/LayoutTree.tsx
+++ b/src/components/LayoutTree.tsx
@@ -26,6 +26,7 @@ import getStyle from '../selectors/getStyle'
 import getThoughtById from '../selectors/getThoughtById'
 import isContextViewActive from '../selectors/isContextViewActive'
 import nextSibling from '../selectors/nextSibling'
+import rootedGrandparentOf from '../selectors/rootedGrandparentOf'
 import rootedParentOf from '../selectors/rootedParentOf'
 import simplifyPath from '../selectors/simplifyPath'
 import thoughtToPath from '../selectors/thoughtToPath'
@@ -909,7 +910,11 @@ const LayoutTree = () => {
   ])
 
   const spaceAboveLast = useRef(spaceAboveExtended)
-
+  // When the cursor is in a table, all thoughts beneath the table are hidden,
+  // so there is no concern about animation name conflicts with subsequent (deeper) thoughts.
+  const tableDepth = useSelector(state =>
+    state.cursor && attributeEquals(state, head(rootedGrandparentOf(state, state.cursor)), '=view', 'Table') ? 1 : 0,
+  )
   // The indentDepth multipicand (0.9) causes the horizontal counter-indentation to fall short of the actual indentation, causing a progressive shifting right as the user navigates deeper. This provides an additional cue for the user's depth, which is helpful when autofocus obscures the actual depth, but it must stay small otherwise the thought width becomes too small.
   // The indentCursorAncestorTables multipicand (0.5) is smaller, since animating over by the entire width of column 1 is too abrupt.
   // (The same multiplicand is applied to the vertical translation that crops hidden thoughts above the cursor.)
@@ -940,7 +945,7 @@ const LayoutTree = () => {
       className={cx(
         css({ marginTop: '0.501em' }),
         hideCaret({
-          animation: getHideCaretAnimationName(indentDepth),
+          animation: getHideCaretAnimationName(indentDepth + tableDepth),
         }),
       )}
       style={{
diff --git a/src/selectors/rootedGrandparentOf.ts b/src/selectors/rootedGrandparentOf.ts
new file mode 100644
index 0000000000..a9fa7f583e
--- /dev/null
+++ b/src/selectors/rootedGrandparentOf.ts
@@ -0,0 +1,16 @@
+import Context from '../@types/Context'
+import Path from '../@types/Path'
+import State from '../@types/State'
+import rootedParentOf from './rootedParentOf'
+
+/**
+ * Calls rootedParentOf twice to get the rooted grandparent of a thought.
+ * A thought's grandparent is relevant when it is column 2 in a table, since its grandparent will be the table itself.
+ * The only reason why we currently need to know when a thought is in column 2 of a table is in order to apply
+ * a different indent level to it, since the app will scroll over to it when selected even though indentDepth
+ * in LayoutTree does not change.
+ * */
+const rootedGrandparentOf = <T extends Context | Path>(state: State, thoughts: T): T =>
+  rootedParentOf(state, rootedParentOf(state, thoughts))
+
+export default rootedGrandparentOf