Bullet/Editable: Use fastClick for clickHandler

src/components/Bullet.tsx

@@ -20,6 +20,7 @@ import getThoughtById from '../selectors/getThoughtById'
 import isContextViewActive from '../selectors/isContextViewActive'
 import isMulticursorPath from '../selectors/isMulticursorPath'
 import rootedParentOf from '../selectors/rootedParentOf'
+import fastClick, { type FastClickEvent } from '../util/fastClick'
 import hashPath from '../util/hashPath'
 import head from '../util/head'
 import isDivider from '../util/isDivider'
@@ -531,16 +532,15 @@ const Bullet = ({
   // expand or collapse on click
   // has some additional logic to make it work intuitively with pin true/false
   const clickHandler = useCallback(
-    (e: React.MouseEvent) => {
-      // stop click event from bubbling up to Content.clickOnEmptySpace
-      e.stopPropagation()
+    (e: FastClickEvent) => {
       // short circuit if dragHold
       // useLongPress stop is activated in onMouseUp but is delayed to ensure that dragHold is still true here
       // stopping propagation from useLongPress was not working either due to bubbling order or mismatched event type
       if (dragHold) return
 
       // short circuit if toggling multiselect
-      if (!isTouch && (isMac ? e.metaKey : e.ctrlKey)) {
+      // e should always be a MouseEvent if !isTouch, but getting the type system to believe it is another story
+      if (!isTouch && e instanceof MouseEvent && (isMac ? e.metaKey : e.ctrlKey)) {
         dispatch(toggleMulticursor({ path }))
         return
       }
@@ -605,7 +605,9 @@ const Bullet = ({
         paddingBottom: extendClickHeight + 2,
         width,
       }}
-      onClick={clickHandler}
+      {...fastClick(clickHandler)}
+      // stop click event from bubbling up to Content.clickOnEmptySpace
+      onClick={e => e.stopPropagation()}
     >
       <svg
         className={cx(

src/components/Editable.tsx

@@ -18,7 +18,7 @@ import { setCursorActionCreator as setCursor } from '../actions/setCursor'
 import { toggleColorPickerActionCreator as toggleColorPicker } from '../actions/toggleColorPicker'
 import { toggleLetterCaseActionCreator as toggleLetterCase } from '../actions/toggleLetterCase'
 import { tutorialNextActionCreator as tutorialNext } from '../actions/tutorialNext'
-import { isMac, isTouch } from '../browser'
+import { isMac, isSafari, isTouch } from '../browser'
 import { commandEmitter } from '../commands'
 import {
   EDIT_THROTTLE,
@@ -203,6 +203,8 @@ const Editable = ({
       // set offset to null to allow the browser to set the position of the selection
       let offset = null
 
+      if (isTouch && isSafari() && contentRef.current?.innerHTML.length) offset = contentRef.current.innerHTML.length
+
       // if running for the first time, restore the offset if the path matches the restored cursor
       if (!cursorOffsetInitialized) {
         const restored: { path: Path | null; offset: number | null } = storageModel.get('cursor')
@@ -545,7 +547,7 @@ const Editable = ({
       if (
         disabled ||
         // dragInProgress: not sure if this can happen, but I observed some glitchy behavior with the cursor moving when a drag and drop is completed so check dragInProgress to be safe
-        (!globals.touching && !state.dragInProgress && !state.dragHold && (!editingOrOnCursor || !isVisible))
+        (isTouch && isSafari() && !globals.touching && !state.dragInProgress && !state.dragHold)
       ) {
         // do not set cursor on hidden thought
         e.preventDefault()
@@ -557,7 +559,7 @@ const Editable = ({
 
           if (state.showLetterCase) dispatch(toggleLetterCase({ value: false }))
         } else {
-          setCursorOnThought()
+          setCursorOnThought({ editing: editingOrOnCursor })
 
           // When the the cursor is first set on a thought, prevent the default browser behavior to avoid activating edit mode.
           // Do not reset until the long tap is definitely over.

src/components/Editable/useEditMode.ts

@@ -51,6 +51,7 @@ const useEditMode = ({
           selection.clear()
         } else {
           selection.set(contentRef.current, { offset: editingCursorOffset || 0 })
+          if (isTouch && isSafari()) contentRef.current?.focus()
         }
       }
 

src/util/fastClick.ts

@@ -1,6 +1,9 @@
 import _ from 'lodash'
+import React from 'react'
 import { isTouch } from '../browser'
 
+export type FastClickEvent = React.TouchEvent<Element> | React.MouseEvent<Element, MouseEvent>
+
 // the number of pixels of scrolling or dragging from touchStart that is allowed to still trigger fastClick
 const MOVE_THRESHOLD = 15
 
@@ -12,13 +15,13 @@ const fastClick = isTouch
   ? (
       // triggered on mouseup or touchend
       // cancelled if the user scroll or drags
-      tapUp: (e: React.TouchEvent) => void,
+      tapUp: (e: FastClickEvent) => void,
       // triggered on mousedown or touchstart
-      tapDown?: (e: React.TouchEvent) => void,
+      tapDown?: (e: FastClickEvent) => void,
       // triggered when tapUp is cancelled due to scrolling or dragging
       // does not work with drag-and-drop on desktop (onMouseUp does not trigger)
-      tapCancel?: (e: React.TouchEvent) => void,
-      // triggered with touchMove
+      tapCancel?: (e: FastClickEvent) => void,
+      // triggered with touchMove, which can never be a MouseEvent
       touchMove?: (e: React.TouchEvent) => void,
     ) => ({
       onTouchStart: (e: React.TouchEvent) => {