refactor(core): clean up presence cursors code + add comments

packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx

@@ -198,8 +198,6 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
         case 'mutation':
           onChange(toFormPatches(change.patches))
           break
-        case 'patch':
-          break
         case 'connection':
           if (change.value === 'offline') {
             setIsOffline(true)

packages/sanity/src/core/form/inputs/PortableText/presence-cursors/usePresenceCursorDecorations.tsx

@@ -23,9 +23,11 @@ export function usePresenceCursorDecorations(
   const fieldPresence = useFormFieldPresence()
   const [currentPresence, setCurrentPresence] = useState<FormNodePresence[]>([])
   const [presenceCursorDecorations, setPresenceCursorDecorations] = useState<RangeDecoration[]>([])
-  const previousPresence = useRef(currentPresence)
+  const previousPresence = useRef<FormNodePresence[]>(currentPresence)
+
   const handleRangeDecorationMoved = useCallback((details: RangeDecorationOnMovedDetails) => {
     const {rangeDecoration, newSelection} = details
+
     // Update the range decoration with the new selection.
     setPresenceCursorDecorations((prev) => {
       // eslint-disable-next-line max-nested-callbacks
@@ -39,39 +41,51 @@ export function usePresenceCursorDecorations(
         }
         return p
       })
+
       return next
     })
   }, [])
 
   useEffect(() => {
-    const result = fieldPresence.filter((p) => startsWith(path, p.path) && !isEqual(path, p.path))
-    // Test is the selection and sessionId are the same as last time, if it is we don't need to update
-    if (
-      !isEqual(
-        result.map((d) => ({...d.selection, sessionId: d.sessionId})),
-        previousPresence.current.map((d) => ({...d.selection, sessionId: d.sessionId})),
-      )
-    ) {
-      const value = result.length > 0 ? result : EMPTY_ARRAY
+    const nextPresence = fieldPresence.filter(
+      (p) => startsWith(path, p.path) && !isEqual(path, p.path),
+    )
+
+    // Filter out the selection and sessionId from the next and previous presence
+    // since that is the only thing we are interested in comparing to see if we need to update.
+    const filteredNext = nextPresence.map((d) => ({...d.selection, sessionId: d.sessionId}))
+    const filteredPrevious = previousPresence.current.map((d) => ({
+      ...d.selection,
+      sessionId: d.sessionId,
+    }))
+
+    // Only update the current presence state it has changed.
+    if (!isEqual(filteredNext, filteredPrevious)) {
+      const value = nextPresence.length > 0 ? nextPresence : EMPTY_ARRAY
+
       setCurrentPresence(value)
+      // Store the previous presence to be able to compare it in the next render.
       previousPresence.current = value
     }
   }, [fieldPresence, path])
 
   useEffect(() => {
     const decorations: RangeDecoration[] = currentPresence.map((presence) => {
-      if (!presence.selection) {
-        return null
-      }
-      // Create a cursor point at the current selection focus
+      if (!presence.selection) return null
+
+      // Always use the focus point as the cursor point. This is important when
+      // the user has selected a range of text. In that case, we want to show the
+      // cursor at the start of the selection.
       const cursorPoint = {focus: presence.selection.focus, anchor: presence.selection.focus}
+
       return {
         component: () => <UserPresenceCursor user={presence.user} />,
         selection: cursorPoint,
         onMoved: handleRangeDecorationMoved,
         payload: {sessionId: presence.sessionId},
       }
     }) as RangeDecoration[]
+
     setPresenceCursorDecorations(decorations.filter(Boolean))
   }, [currentPresence, handleRangeDecorationMoved])