LayoutTree: use different hideCaret name in table (#2775)

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={{

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