Merge remote-tracking branch 'upstream/main' into feature/1954

.github/dependabot.yml

@@ -5,8 +5,8 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: 'npm'
+    directory: '/' # Location of package file
     schedule:
-      interval: 'daily'
+      interval: 'weekly'
     open-pull-requests-limit: 10

.github/workflows/puppeteer.yml

@@ -13,11 +13,13 @@ env:
 
 jobs:
   run:
-    name: Puppeteer
-    # Run on Mac since Puppeteer snapshots were generated on a Mac.
-    # Otherwise snapshot tests will fail.
-    # https://github.com/cybersemics/em/pull/1836
-    runs-on: macos-latest
+    name: Puppeteer on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest]
 
     steps:
       - name: Clone repository
@@ -39,3 +41,11 @@ jobs:
 
       - name: Test
         run: yarn test:puppeteer
+
+      - name: Upload snapshot diff artifact
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: __diff_output__
+          path: src/e2e/puppeteer/__tests__/__image_snapshots__/*/__diff_output__/
+          if-no-files-found: ignore

package.json

@@ -40,7 +40,7 @@
     "lint:src": "FORCE_COLOR=1 eslint . --cache --rule 'no-console: [2, { allow: [error, info, warn] }]'",
     "lint:lockfile": "npx lockfile-lint",
     "lint:no-npm": "node ./scripts/no-files.js package-lock.json",
-    "postinstall": "scripts/install-hooks",
+    "postinstall": "scripts/install-hooks.sh",
     "servebuild": "npx serve -s build -l 3000",
     "test": "vitest --project unit",
     "test:ios": "jest ./src/e2e/iOS --verbose",
@@ -77,7 +77,7 @@
     "@capacitor/status-bar": "^4.1.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@hocuspocus/provider": "^2.13.1",
+    "@hocuspocus/provider": "^2.13.2",
     "@mui/material": "^5.15.20",
     "algoliasearch": "^4.23.3",
     "axios": "^1.7.2",
@@ -132,7 +132,7 @@
     "xhtml-purifier": "^0.4.1",
     "y-indexeddb": "https://github.com/raineorshine/y-indexeddb#y-indexeddb-multiplex",
     "yallist": "^5.0.0",
-    "yjs": "^13.6.16"
+    "yjs": "^13.6.17"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -178,7 +178,7 @@
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-export-default-identifier": "0.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.9",
+    "eslint-plugin-jsdoc": "^48.2.12",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -193,11 +193,11 @@
     "jest-extended": "^4.0.2",
     "jest-image-snapshot": "^6.4.0",
     "jsdom": "^24.1.0",
-    "lockfile-lint": "^4.13.2",
+    "lockfile-lint": "^4.14.0",
     "npm-run-all": "^4.1.5",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.3.2",
-    "puppeteer": "^22.11.0",
+    "puppeteer": "^22.11.1",
     "react-dnd-test-backend": "^14.0.1",
     "react-dnd-test-utils": "^11.1.3",
     "redux-mock-store": "^1.5.4",
@@ -207,7 +207,7 @@
     "typedoc-plugin-external-module-name": "^4.0.6",
     "typedoc-plugin-rename-named-parameters": "^1.0.6",
     "typescript": "^5.4.5",
-    "vite": "^5.3.0",
+    "vite": "^5.3.1",
     "vite-plugin-pwa": "^0.20.0",
     "vitest": "^1.6.0",
     "webdriverio": "^7.36.0"

scripts/install-hooks.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+# Use a simple bash script to install git hooks.
+# husky was slow and did not play nice with nvm.
+# lefthook suppressed the post-commit notification for some reason.
+
+# change the git hook directory from .git/hooks to .hooks
+git config core.hooksPath .hooks

src/components/DropEmpty.tsx → src/components/DropChild.tsx

@@ -19,7 +19,7 @@ import strip from '../util/strip'
 import DragAndDropSubthoughts from './DragAndDropSubthoughts'
 import DragOnly from './DragOnly'
 
-interface DropEmptyProps {
+interface DropChildProps {
   depth?: number
   dropTarget?: ConnectDropTarget
   isHovering?: boolean
@@ -28,12 +28,12 @@ interface DropEmptyProps {
   simplePath: SimplePath
 }
 
-/** A drop target when there are no children or the thought is collapsed. The drop-hover components are DropBefore, DropEmpty, DropEnd, and DropHover. Only renders if there is a valid dropTarget and a drag is in progress. */
-const DropEmptyContainer = ({ depth, dropTarget, isHovering, last, path, simplePath }: DropEmptyProps) => {
+/** Renders the DropChildInnerContainer component if the user is dragging and the dropTarget exists. This component is an optimization to avoid calculating DropChildIfCollapsed and DropChild hooks when unnecessary. */
+const DropChildIfDragging = ({ depth, dropTarget, isHovering, last, path, simplePath }: DropChildProps) => {
   if (!dropTarget) return null
   return (
     <DragOnly>
-      <DropEmptyInnerContainer
+      <DropChildIfCollapsed
         depth={depth}
         dropTarget={dropTarget}
         isHovering={isHovering}
@@ -45,26 +45,26 @@ const DropEmptyContainer = ({ depth, dropTarget, isHovering, last, path, simpleP
   )
 }
 
-/** Only render the DropEmpty component if not expanded. */
-const DropEmptyInnerContainer = ({
+/** Render the DropChild component if the thought is collapsed, and does not match the dragging thought. This component is an optimization to avoid calculating DropChild hooks when unnecessary. */
+const DropChildIfCollapsed = ({
   depth,
   dropTarget,
   isHovering,
   last,
   path,
   simplePath,
-}: DropEmptyProps & { dropTarget: ConnectDropTarget }) => {
+}: DropChildProps & { dropTarget: ConnectDropTarget }) => {
   const isExpanded = useSelector(
     state => hasChildren(state, head(simplePath)) && !!state.expanded[hashPath(simplePath)],
   )
   const draggingThought = useSelector(state => state.draggingThought, shallowEqual)
 
-  // Do not render DropEmpty on expanded thoughts or on the dragging thought.
+  // Do not render DropChild on expanded thoughts or on the dragging thought.
   // Even though canDrop will prevent a thought from being dropped on itself, we still should prevent rendering the drop target at all, otherwise it will obscure valid drop targets.
   if (isExpanded || equalPath(draggingThought, simplePath)) return null
 
   return (
-    <DropEmpty
+    <DropChild
       depth={depth}
       dropTarget={dropTarget}
       isHovering={isHovering}
@@ -75,15 +75,15 @@ const DropEmptyInnerContainer = ({
   )
 }
 
-/** The actual DropEmpty component. */
-const DropEmpty = ({
+/** A drop target that allows dropping as a child of a thought. It is only shown when a thought has no children or is collapsed. Only renders if there is a valid dropTarget and a drag is in progress. */
+const DropChild = ({
   depth,
   dropTarget,
   isHovering,
   last,
   path,
   simplePath,
-}: DropEmptyProps & { dropTarget: ConnectDropTarget }) => {
+}: DropChildProps & { dropTarget: ConnectDropTarget }) => {
   const value = useSelector(state => getThoughtById(state, head(simplePath))?.value || '')
   const dropHoverColor = useDropHoverColor(depth || 0)
   useHoveringPath(path, !!isHovering, DropThoughtZone.SubthoughtsDrop)
@@ -139,9 +139,10 @@ const DropEmpty = ({
   )
 }
 
-const DragAndDropDropEmpty = DragAndDropSubthoughts(DropEmptyContainer)
+/** DropChild wired up with react-dnd HOC. */
+const DragAndDropDropChild = DragAndDropSubthoughts(DropChildIfDragging)
 
-const DropEmptyMemo = React.memo(DragAndDropDropEmpty)
-DropEmptyMemo.displayName = 'DropEmpty'
+const DropChildMemo = React.memo(DragAndDropDropChild)
+DropChildMemo.displayName = 'DropChild'
 
-export default DropEmptyMemo
+export default DropChildMemo

src/components/DropEnd.tsx

@@ -23,7 +23,7 @@ import DragOnly from './DragOnly'
 /** An identify function that returns the value passed to it. */
 const identity = <T,>(x: T): T => x
 
-/** The drop target at the end of the Subthoughts. The drop-hover components are DropBefore, DropEmpty, DropEnd, and DropHover. The canDrop and drop handlers can be found in the DropTarget components, DragAndDropThought and DragAndDropSubthoughts.  */
+/** The drop target at the end of the Subthoughts. The canDrop and drop handlers can be found in the DropTarget components, DragAndDropThought and DragAndDropSubthoughts.  */
 const DropEnd = ({
   depth,
   distance,

src/components/DropHover.tsx

@@ -13,7 +13,7 @@ import equalPath from '../util/equalPath'
 import head from '../util/head'
 import parentOf from '../util/parentOf'
 
-/** A drop-hover element that is rendered during drag-and-drop when it is possible to drop in a ThoughtDrop zone (next to a Thought). The drop-hover components are DropBefore, DropEmpty, DropEnd, and DropHover. The canDrop and drop handlers can be found in the DropTarget components, DragAndDropThought and DragAndDropSubthoughts. */
+/** A drop-hover element that is rendered during drag-and-drop when it is possible to drop in a ThoughtDrop zone (next to a Thought). The canDrop and drop handlers can be found in the DropTarget components, DragAndDropThought and DragAndDropSubthoughts. */
 const DropHover = ({
   isHovering,
   prevChildId,

src/components/DropBefore.tsx → src/components/DropUncle.tsx

@@ -14,7 +14,7 @@ import strip from '../util/strip'
 import DragAndDropThought from './DragAndDropThought'
 
 /** A drop target for after the hidden parent at a cliff (before the next hidden uncle). This is needed because the Thought will be hidden/shimmed so DragAndDropThought will not be rendered. DropEnd does not work since it drops at the end of a context, whereas this needs to drop before the next hidden uncle. */
-const DropBefore = ({
+const DropUncle = ({
   depth,
   dropTarget,
   isHovering,
@@ -69,9 +69,9 @@ const DropBefore = ({
 }
 
 // TODO: Type this correctly so it does not require all the Thought props (which it does not use)
-const DragAndDropDropBefore = DragAndDropThought(DropBefore) as any
+const DragAndDropDropUncle = DragAndDropThought(DropUncle) as any
 
-const DropBeforeMemo = React.memo(DragAndDropDropBefore)
-DropBeforeMemo.displayName = 'DropBefore'
+const DropUncleMemo = React.memo(DragAndDropDropUncle)
+DropUncleMemo.displayName = 'DropUncle'
 
-export default DropBeforeMemo
+export default DropUncleMemo

src/components/LayoutTree.tsx

@@ -377,7 +377,7 @@ const LayoutTree = () => {
     return state.cursor.length + (isCursorLeaf ? -1 : 0)
   })
 
-  // first uncle of the cursor used for DropBefore
+  // first uncle of the cursor used for DropUncle
   const cursorUncleId = useSelector(state => {
     // only set during drag-and-drop to avoid re-renders
     if ((!state.dragInProgress && !testFlags.simulateDrag && !testFlags.simulateDrop) || !state.cursor) return null
@@ -662,8 +662,8 @@ const LayoutTree = () => {
                 key={key}
                 style={{
                   position: 'absolute',
-                  // Cannot use transform because it creates a new stacking context, which causes later siblings' DropEmpty to be covered by previous siblings'.
-                  // Unfortunately left causes layout recalculation, so we may want to hoist DropEmpty into a parent and manually control the position.
+                  // Cannot use transform because it creates a new stacking context, which causes later siblings' DropChild to be covered by previous siblings'.
+                  // Unfortunately left causes layout recalculation, so we may want to hoist DropChild into a parent and manually control the position.
                   left: x,
                   top: y,
                   transition: `left ${LAYOUT_NODE_ANIMATION_DURATION}ms ease-out,top ${LAYOUT_NODE_ANIMATION_DURATION}ms ease-out`,
@@ -679,7 +679,7 @@ const LayoutTree = () => {
                 <VirtualThought
                   debugIndex={testFlags.simulateDrop ? indexChild : undefined}
                   depth={depth}
-                  dropBefore={thought.id === cursorUncleId}
+                  dropUncle={thought.id === cursorUncleId}
                   env={env}
                   indexDescendant={indexDescendant}
                   // isMultiColumnTable={isMultiColumnTable}