LayoutTree: use different hideCaret name in table

src/components/LayoutTree.tsx

@@ -26,7 +26,7 @@ import getStyle from '../selectors/getStyle'
 import getThoughtById from '../selectors/getThoughtById'
 import isContextViewActive from '../selectors/isContextViewActive'
 import nextSibling from '../selectors/nextSibling'
-import rootedParentOf from '../selectors/rootedParentOf'
+import rootedParentOf, { rootedGrandparentOf } from '../selectors/rootedParentOf'
 import simplifyPath from '../selectors/simplifyPath'
 import thoughtToPath from '../selectors/thoughtToPath'
 import reactMinistore from '../stores/react-ministore'
@@ -909,7 +909,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 +944,7 @@ const LayoutTree = () => {
       className={cx(
         css({ marginTop: '0.501em' }),
         hideCaret({
-          animation: getHideCaretAnimationName(indentDepth),
+          animation: getHideCaretAnimationName(indentDepth + tableDepth),
         }),
       )}
       style={{

src/selectors/rootedParentOf.ts

@@ -23,4 +23,8 @@ const rootedParentOf = <T extends Context | Path>(state: State, thoughts: T): T
       : (state.rootContext as T)
 }
 
+/** Calls rootedParentOf twice to get the rooted grandparent of a thought. */
+export const rootedGrandparentOf = <T extends Context | Path>(state: State, thoughts: T): T =>
+  rootedParentOf(state, rootedParentOf(state, thoughts))
+
 export default rootedParentOf