Merge branch 'main' of https://github.com/cybersemics/em into joe/fix…

…-986

.depcheckrc.json

@@ -1,11 +1,3 @@
 {
-  "ignores": [
-    "@types/jest",
-    "babel-eslint",
-    "em-typedoc-theme",
-    "eslint-config-react-app",
-    "eslint-plugin-flowtype",
-    "react-native-web",
-    "typedoc-*"
-  ]
+  "ignores": ["@types/jest", "babel-eslint", "eslint-config-react-app", "eslint-plugin-flowtype", "react-native-web"]
 }

.eslintrc.cjs

@@ -11,7 +11,7 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
   },
-  plugins: ['export-default-identifier', 'jsdoc', 'react', 'prettier'],
+  plugins: ['export-default-identifier', 'jsdoc', 'react', 'react-refresh', 'prettier'],
   settings: {
     react: {
       version: 'detect',
@@ -119,6 +119,8 @@ module.exports = {
         '@typescript-eslint/array-type': 2,
         // jsx
         'jsx-quotes': [2, 'prefer-single'],
+        // react-refresh
+        'react-refresh/only-export-components': 2,
       },
       overrides: [
         {

.ncurc.js

@@ -14,7 +14,6 @@ Dependency notes:
 
 module.exports = {
   reject: [
-    'typedoc',
     'react-dnd',
     'react-dnd-html5-backend',
     'react-dnd-multi-backend',

README.md

@@ -9,7 +9,6 @@
 ## Documentation
 
 - [Overview](https://github.com/cybersemics/em/wiki/Docs) - An overview of the architecture, data structures, and tips for contributors.
-- [Internal API](https://cybersemics.github.io/em) - Autogenerated TypeDoc documentation for all internal modules.
 - [Roadmap](https://github.com/cybersemics/em/wiki/Roadmap) - A high level overview of the project, including vision and objectives.
 
 ## Setup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "em",
-  "version": "300.30.8",
+  "version": "300.30.9",
   "author": "Raine Revere <raine@cybersemics.org>",
   "description": "A beautiful, minimalistic note-taking app for personal sensemaking.",
   "license": "NoHarm-draft",
@@ -29,7 +29,6 @@
     "start": "vite --host --port 3000",
     "build": "vite build",
     "clean": "rm -rf ./node_modules/.cache",
-    "docs": "typedoc --options typedoc.json",
     "deploy:major": "npm run lint && npm version major && npm run build && firebase deploy --only hosting",
     "deploy:minor": "npm run lint && npm version minor && npm run build && firebase deploy --only hosting",
     "deploy:patch": "npm run lint && npm version patch && npm run build && firebase deploy --only hosting",
@@ -170,7 +169,6 @@
     "browserstack-local": "^1.5.5",
     "chalk": "^5.3.0",
     "dotenv": "16.4.5",
-    "em-typedoc-theme": "^0.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-raine": "^0.5.0",
@@ -185,6 +183,7 @@
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "fake-indexeddb": "^6.0.0",
     "happy-dom": "^14.12.3",
     "it-all": "^3.0.6",
@@ -202,10 +201,6 @@
     "react-dnd-test-utils": "^11.1.3",
     "redux-mock-store": "^1.5.4",
     "tcp-port-used": "^1.0.2",
-    "typedoc": "^0.19.0",
-    "typedoc-plugin-exclude-references": "^1.0.0",
-    "typedoc-plugin-external-module-name": "^4.0.6",
-    "typedoc-plugin-rename-named-parameters": "^1.0.6",
     "typescript": "5.4.5",
     "vite": "^5.3.4",
     "vite-plugin-pwa": "^0.20.0",

src/components/DragAndDropSubthoughts.tsx

@@ -46,7 +46,7 @@ const isPathExpanded = (state: State, path: Path) => !!state.expanded[hashPath(p
 
 /** Returns true if a thought can be dropped in this context. Dropping at end of list requires different logic since the default drop moves the dragged thought before the drop target. */
 // Fires much less frequently than DragAndDropThought:canDrop
-export const canDrop = (props: DroppableSubthoughts, monitor: DropTargetMonitor): boolean => {
+const canDrop = (props: DroppableSubthoughts, monitor: DropTargetMonitor): boolean => {
   const state = store.getState()
 
   // dragInProgress can be set to false to abort the drag (e.g. by shaking)

src/components/DropEnd.tsx

@@ -20,6 +20,9 @@ import strip from '../util/strip'
 import DragAndDropSubthoughts from './DragAndDropSubthoughts'
 import DragOnly from './DragOnly'
 
+/** The amount of space to shift the drop target to the right so the user's finger is not in the way on mobile (em). */
+const DROPEND_FINGERSHIFT = isTouch ? 5 : 0
+
 /** An identify function that returns the value passed to it. */
 const identity = <T,>(x: T): T => x
 
@@ -102,6 +105,8 @@ const DropEnd = ({
         // offset marginLeft, minus 1em for bullet
         // otherwise drop-hover will be too far left
         paddingLeft: isRootPath ? '3em' : last ? (isTouch ? '6em' : '1em') : undefined,
+        // use transform to avoid conflicting with margin, which is currently spread out across multiple components and App.css
+        transform: `translateX(${DROPEND_FINGERSHIFT}em)`,
       }}
     >
       {testFlags.simulateDrop && (
@@ -124,6 +129,8 @@ const DropEnd = ({
           className='drop-hover'
           style={{
             backgroundColor: dropHoverColor,
+            // shift the drop-hover back into the proper place visually, even though drop-end has been shifted right for touch
+            marginLeft: `-${DROPEND_FINGERSHIFT}em`,
           }}
         ></span>
       )}

src/components/LayoutTree.tsx

@@ -655,7 +655,7 @@ const LayoutTree = () => {
               x,
               y,
             },
-            i,
+            index,
           ) => {
             // List Virtualization
             // Do not render thoughts that are below the viewport.
@@ -721,14 +721,21 @@ const LayoutTree = () => {
                       const simplePathEnd =
                         -(cliff + i) < simplePath.length ? (simplePath.slice(0, cliff + i) as SimplePath) : HOME_PATH
                       const cliffDepth = unroot(pathEnd).length
+
+                      // After table col2, shift the DropEnd left by the width of col1.
+                      // This correctly positions the drop target for dropping after the table view.
+                      // Otherwise it would be too far to the right.
+                      const dropEndMarginLeft =
+                        isTableCol2 && cliffDepth - depth < 0 ? treeThoughtsPositioned[index - 1].width || 0 : 0
+
                       return (
                         <div
                           key={'DropEnd-' + head(pathEnd)}
                           className='z-index-subthoughts-drop-end'
                           style={{
                             position: 'relative',
                             top: '-0.2em',
-                            left: `calc(${cliffDepth - depth}em + ${isTouch ? -1 : 1}px)`,
+                            left: `calc(${cliffDepth - depth}em - ${dropEndMarginLeft}px + ${isTouch ? -1 : 1}px)`,
                             transition: 'left 0.15s ease-out',
                           }}
                         >

src/components/ShortcutRow.tsx

@@ -115,7 +115,6 @@ const ShortcutRow: FC<DraggableShortcutRowProps> = ({
 }
 
 /** A draggable and droppable toolbar button. */
-const DragAndDropShortcutRow = (shortcutRow: FC<DraggableShortcutRowProps>) =>
-  DragSource('toolbar-button', { canDrag, beginDrag, endDrag }, dragCollect)(shortcutRow)
+const DragAndDropShortcutRow = DragSource('toolbar-button', { canDrag, beginDrag, endDrag }, dragCollect)(ShortcutRow)
 
-export default DragAndDropShortcutRow(ShortcutRow)
+export default DragAndDropShortcutRow

src/components/Subthought.tsx

@@ -7,6 +7,7 @@ import SimplePath from '../@types/SimplePath'
 import ThoughtId from '../@types/ThoughtId'
 import useChangeRef from '../hooks/useChangeRef'
 import attributeEquals from '../selectors/attributeEquals'
+import findFirstEnvContextWithZoom from '../selectors/findFirstEnvContextWithZoom'
 import { findAnyChild } from '../selectors/getChildren'
 import getContexts from '../selectors/getContexts'
 import getStyle from '../selectors/getStyle'
@@ -18,7 +19,6 @@ import isDescendantPath from '../util/isDescendantPath'
 import once from '../util/once'
 import NoOtherContexts from './NoOtherContexts'
 import Thought from './Thought'
-import { findFirstEnvContextWithZoom } from './VirtualThought'
 
 /** Renders a thought with style. */
 // TODO: These selectors can be optimized by calculating them once for all children, since they are the same among siblings. However siblings are not rendered contiguously (virtualTree), so they need to be calculated higher up.

src/components/Thought.tsx

@@ -90,6 +90,9 @@ export interface ThoughtContainerProps {
   updateSize?: () => void
 }
 
+/** Animation to apply to a parent when one of its children is being hovered over. Disabled in puppeteer tests. */
+const CHILD_IS_HOVERING_ANIMATION = navigator.webdriver ? undefined : 'pulse 0.5s linear infinite alternate'
+
 /** Returns true if two lists of children are equal. Deeply compares id, value, and rank. */
 const equalChildren = (a: Thought[], b: Thought[]) =>
   a === b ||
@@ -272,7 +275,7 @@ const ThoughtContainer = ({
       ...(isChildHovering
         ? {
             WebkitTextStrokeWidth: '0.05em',
-            animation: 'pulse 0.5s linear infinite alternate',
+            animation: CHILD_IS_HOVERING_ANIMATION,
             color: colors.highlight,
           }
         : null),

src/components/Tutorial/index.tsx

@@ -42,7 +42,7 @@ const WithCSSTransition = ({ component, ...props }: { component: FC<any>; [props
 
   const Component = component
   return (
-    <CSSTransition nodeRef={nodeRef} in={true} key={Math.floor(props.step)} timeout={400} classNames='slide'>
+    <CSSTransition nodeRef={nodeRef} in={true} key={Math.floor(props.transitionKey)} timeout={400} classNames='slide'>
       <div ref={nodeRef}>
         <Component {...props} />
       </div>
@@ -79,7 +79,7 @@ const Tutorial: FC = () => {
     rootChildren,
     contextViews,
     dispatch,
-    key: Math.floor(tutorialStep),
+    transitionKey: Math.floor(tutorialStep),
   }
 
   const tutorialStepComponent =
@@ -104,6 +104,7 @@ const Tutorial: FC = () => {
   )
 
   const cursorHeadValue = useSelector(state => state.cursor && headValue(state, state.cursor))
+
   return (
     <div className='tutorial'>
       <div className='tutorial-inner'>

src/components/VirtualThought.tsx

@@ -7,17 +7,14 @@ import State from '../@types/State'
 import ThoughtId from '../@types/ThoughtId'
 import useDelayedAutofocus from '../hooks/useDelayedAutofocus'
 import useSelectorEffect from '../hooks/useSelectorEffect'
-import attributeEquals from '../selectors/attributeEquals'
 import calculateAutofocus from '../selectors/calculateAutofocus'
-import findDescendant from '../selectors/findDescendant'
-import { findAnyChild, hasChildren } from '../selectors/getChildren'
+import { hasChildren } from '../selectors/getChildren'
 import getThoughtById from '../selectors/getThoughtById'
 import isContextViewActive from '../selectors/isContextViewActive'
 import store from '../stores/app'
 import editingValueStore from '../stores/editingValue'
 import equalPath from '../util/equalPath'
 import head from '../util/head'
-import isAttribute from '../util/isAttribute'
 import noteValue from '../util/noteValue'
 import DropChild from './DropChild'
 import DropUncle from './DropUncle'
@@ -42,20 +39,6 @@ const selectShowContexts = (path: SimplePath) => (state: State) => isContextView
 /** Selects the cursor. */
 const selectCursor = (state: State) => state.cursor
 
-/** Finds the the first env entry with =focus/Zoom. O(children). */
-export const findFirstEnvContextWithZoom = (
-  state: State,
-  { id, env }: { id: ThoughtId; env?: LazyEnv },
-): ThoughtId | null => {
-  if (!env) return null
-  const child = findAnyChild(
-    state,
-    id,
-    child => isAttribute(child.value) && attributeEquals(state, env[child.value], '=focus', 'Zoom'),
-  )
-  return child ? findDescendant(state, env[child.value], ['=focus', 'Zoom']) : null
-}
-
 /** Renders a thought if it is not hidden by autofocus, otherwise renders a fixed height shim. */
 const VirtualThought = ({
   debugIndex,

src/components/icons/Sort.tsx

@@ -54,7 +54,7 @@ const IconDesc = ({ size = 20, style }: IconType) => (
   </svg>
 )
 
-// eslint-disable-next-line jsdoc/require-jsdoc
+// eslint-disable-next-line jsdoc/require-jsdoc, react-refresh/only-export-components
 const Icon = ({ size = 20, style }: IconType) => {
   const direction = useSelector(getCursorSortDirection)
   const Component = direction === 'Desc' ? IconDesc : IconAsc

src/components/icons/StarIcon.tsx

@@ -2,7 +2,7 @@ import { useSelector } from 'react-redux'
 import IconType from '../../@types/Icon'
 import themeColors from '../../selectors/themeColors'
 
-// eslint-disable-next-line jsdoc/require-jsdoc
+// eslint-disable-next-line jsdoc/require-jsdoc, react-refresh/only-export-components
 const Icon = ({ fill, size = 20, style }: IconType) => {
   const colors = useSelector(themeColors)
   return (