fix(form/inputs): improve tracking of formState focusPath for PT-input (#4466)

* fix(desk): DocumentPane must be keyed on id

The document id must be part of the key here, or focusPath isn't propery reset when changing documents.

* fix(form/inputs): improve tracking of formState focusPath for PT-input

This will improve tracking of the formState focus in the PT-input. It can now restore focus on single spans of text.
Also improved how we restore the editor selection when toggling fullscreen.

Renamed hook from useScrollToOpenendMember to useTrackFocusPath as it covers more what it does.

Made some small adjustments so that we scroll to both object blocks and text spans.

* fix(portable-text-editor): emit selection after focused and unchanged

If the selection is the same as when focus was lost, the editor will not emit a new one
because there is no onChange done to the editor instance.

Explicitly emit the selection here in that case.

Author: skogsmaskin

packages/@sanity/portable-text-editor/src/editor/Editable.tsx

@@ -284,8 +284,17 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
   )
 
   const handleOnFocus = useCallback(() => {
+    const selection = PortableTextEditor.getSelection(portableTextEditor)
     change$.next({type: 'focus'})
-  }, [change$])
+    const newSelection = PortableTextEditor.getSelection(portableTextEditor)
+    // If the selection is the same, emit it explicitly here as there is no actual onChange event triggered.
+    if (selection === newSelection) {
+      change$.next({
+        type: 'selection',
+        selection,
+      })
+    }
+  }, [change$, portableTextEditor])
 
   const handleOnBlur = useCallback(() => {
     change$.next({type: 'blur'})

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

@@ -22,7 +22,7 @@ import {RenderBlockActionsCallback} from './types'
 import {Editor} from './Editor'
 import {ExpandedLayer, Root} from './Compositor.styles'
 import {useHotkeys} from './hooks/useHotKeys'
-import {useScrollToOpenedMember} from './hooks/useScrollToOpenedMember'
+import {useTrackFocusPath} from './hooks/useTrackFocusPath'
 
 interface InputProps extends ArrayOfObjectsInputProps<PortableTextBlock> {
   hasFocus: boolean
@@ -45,7 +45,6 @@ export type PortableTextEditorElement = HTMLDivElement | HTMLSpanElement | null
 export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunctions'>) {
   const {
     changed,
-    focused,
     focusPath = EMPTY_ARRAY,
     hasFocus,
     hotkeys,
@@ -94,18 +93,15 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
   const _renderBlockActions = !!value && renderBlockActions ? renderBlockActions : undefined
   const _renderCustomMarkers = !!value && renderCustomMarkers ? renderCustomMarkers : undefined
 
-  const initialSelection = useMemo(
-    (): EditorSelection => {
-      return focusPath.length > 0
-        ? {
-            anchor: {path: focusPath, offset: 0},
-            focus: {path: focusPath, offset: 0},
-          }
-        : null
-    },
+  const initialSelection = useMemo((): EditorSelection => {
+    return focusPath.length > 0
+      ? {
+          anchor: {path: focusPath, offset: 0},
+          focus: {path: focusPath, offset: 0},
+        }
+      : null
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [] // Only initial
-  )
+  }, []) // only initial!
 
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
 
@@ -318,15 +314,15 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
 
     // Keep only stable ones here!
     [
-      editorHotkeys,
-      handleToggleFullscreen,
       hasFocus,
+      editorHotkeys,
       initialSelection,
       isActive,
       isFullscreen,
-      onCopy,
       onItemOpen,
+      onCopy,
       onPaste,
+      handleToggleFullscreen,
       path,
       readOnly,
       renderAnnotation,
@@ -349,7 +345,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
   )
 
   // Scroll to the DOM element of the "opened" portable text member when relevant.
-  useScrollToOpenedMember({
+  useTrackFocusPath({
     editorRootPath: path,
     focusPath,
     boundaryElement: boundaryElement || undefined,
@@ -361,7 +357,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
       <ActivateOnFocus onActivate={onActivate} isOverlayActive={!isActive}>
         <ChangeIndicator
           disabled={isFullscreen}
-          hasFocus={Boolean(focused)}
+          hasFocus={hasFocus}
           isChanged={changed}
           path={path}
         >

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

@@ -12,6 +12,7 @@ import {
   usePortableTextEditor,
   RenderStyleFunction,
   RenderListItemFunction,
+  usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {Path} from '@sanity/types'
 import {BoundaryElementProvider, useBoundaryElement, useGlobalKeyDown, useLayer} from '@sanity/ui'
@@ -86,6 +87,7 @@ export function Editor(props: EditorProps) {
   const {isTopLayer} = useLayer()
   const editableRef = useRef<HTMLDivElement | null>(null)
   const editor = usePortableTextEditor()
+  const selection = usePortableTextEditorSelection()
 
   const {element: boundaryElement} = useBoundaryElement()
 
@@ -109,6 +111,20 @@ export function Editor(props: EditorProps) {
 
   const scrollSelectionIntoView = useScrollSelectionIntoView(scrollElement)
 
+  // Restore the React editor selection and focus when toggling fullscreen
+  // Note that the selection itself is not part of the dependencies here (use the last known from the PTE instance)
+  useEffect(() => {
+    if (selection) {
+      PortableTextEditor.select(editor, selection)
+    }
+    if (hasFocus) {
+      PortableTextEditor.focus(editor)
+    } else {
+      PortableTextEditor.blur(editor)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isFullscreen]) // skip selection dep.
+
   const editable = useMemo(
     () => (
       <PortableTextEditable
@@ -151,13 +167,6 @@ export function Editor(props: EditorProps) {
     [editor, onItemOpen, path]
   )
 
-  // Focus the editor if we have focus and the editor is re-rendered (toggling fullscreen for instance)
-  useEffect(() => {
-    if (hasFocus) {
-      PortableTextEditor.focus(editor)
-    }
-  }, [editor, hasFocus])
-
   return (
     <Root $fullscreen={isFullscreen} data-testid="pt-editor">
       {isActive && (

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

@@ -22,7 +22,6 @@ import React, {
 } from 'react'
 import {Subject} from 'rxjs'
 import {Box, useToast} from '@sanity/ui'
-import scrollIntoView from 'scroll-into-view-if-needed'
 import {debounce} from 'lodash'
 import {FormPatch, SANITY_PATCH_TYPE} from '../../patch'
 import {ArrayOfObjectsItemMember, ObjectFormNode} from '../../store'
@@ -100,33 +99,18 @@ export function PortableTextInput(props: PortableTextInputProps) {
 
   const {subscribe} = usePatches({path})
   const editorRef = useRef<PortableTextEditor | null>(null)
-  const [hasFocus, setHasFocus] = useState(false)
   const [ignoreValidationError, setIgnoreValidationError] = useState(false)
   const [invalidValue, setInvalidValue] = useState<InvalidValue | null>(null)
   const [isFullscreen, setIsFullscreen] = useState(false)
   const [isActive, setIsActive] = useState(false)
 
-  // Set as active whenever we have focus inside the editor.
-  useEffect(() => {
-    if (focused || hasFocus || focusPath.length) {
-      setIsActive(true)
-    }
-  }, [hasFocus, focusPath, focused])
+  // Let formState decide if we are focused or not.
+  const hasFocus = Boolean(focused) || focusPath.length > 0
 
-  // Set focused if the focusPath includes the path
+  // Set active if focused
   useEffect(() => {
-    if (focused) {
+    if (hasFocus) {
       setIsActive(true)
-      setHasFocus(true)
-    }
-  }, [focused])
-
-  // Scroll into view when focused
-  useEffect(() => {
-    if (hasFocus && innerElementRef.current) {
-      scrollIntoView(innerElementRef.current, {
-        scrollMode: 'if-needed',
-      })
     }
   }, [hasFocus])
 
@@ -253,24 +237,20 @@ export function PortableTextInput(props: PortableTextInputProps) {
     return items
   }, [members, props])
 
-  const hasOpenItem = useMemo(() => {
-    return portableTextMemberItems.some((item) => item.member.open)
-  }, [portableTextMemberItems])
-
   // Sets the focusPath from editor selection (when typing, moving the cursor, clicking around)
   // This doesn't need to be immediate, so debounce it as it impacts performance.
   const setFocusPathDebounced = useMemo(
     () =>
       debounce(
         (sel: EditorSelection) => {
-          if (sel && hasFocus) {
+          if (sel) {
             onPathFocus(sel.focus.path)
           }
         },
         500,
-        {trailing: true, leading: false}
+        {trailing: true, leading: true}
       ),
-    [hasFocus, onPathFocus]
+    [onPathFocus]
   )
 
   // Handle editor changes
@@ -284,10 +264,7 @@ export function PortableTextInput(props: PortableTextInputProps) {
           setFocusPathDebounced(change.selection)
           break
         case 'focus':
-          setHasFocus(true)
-          break
-        case 'blur':
-          setHasFocus(false)
+          setIsActive(true)
           break
         case 'undo':
         case 'redo':
@@ -335,23 +312,11 @@ export function PortableTextInput(props: PortableTextInputProps) {
   const handleActivate = useCallback((): void => {
     if (!isActive) {
       setIsActive(true)
-      if (!hasFocus) {
-        if (editorRef.current) {
-          PortableTextEditor.focus(editorRef.current)
-        }
-        setHasFocus(true)
+      if (editorRef.current) {
+        PortableTextEditor.focus(editorRef.current)
       }
     }
-  }, [hasFocus, isActive])
-
-  // If the editor that has an opened item and isn't focused - scroll to the input if needed.
-  useEffect(() => {
-    if (!hasFocus && hasOpenItem && innerElementRef.current) {
-      scrollIntoView(innerElementRef.current, {
-        scrollMode: 'if-needed',
-      })
-    }
-  }, [hasFocus, hasOpenItem])
+  }, [isActive])
 
   return (
     <Box ref={innerElementRef}>
@@ -370,8 +335,6 @@ export function PortableTextInput(props: PortableTextInputProps) {
             >
               <Compositor
                 {...props}
-                focused={focused}
-                focusPath={focusPath}
                 hasFocus={hasFocus}
                 hotkeys={hotkeys}
                 isActive={isActive}
@@ -382,10 +345,8 @@ export function PortableTextInput(props: PortableTextInputProps) {
                 onInsert={onInsert}
                 onPaste={onPaste}
                 onToggleFullscreen={handleToggleFullscreen}
-                readOnly={readOnly}
                 renderBlockActions={renderBlockActions}
                 renderCustomMarkers={renderCustomMarkers}
-                value={value}
               />
             </PortableTextEditor>
           </PortableTextMemberItemsProvider>

packages/sanity/src/core/form/inputs/PortableText/hooks/useScrollToOpenedMember.tsx packages/sanity/src/core/form/inputs/PortableText/hooks/useTrackFocusPath.tsx

@@ -11,38 +11,37 @@ interface Props {
   onItemClose: () => void
 }
 
-// This hook will scroll to the "opened" portable text object's editor dom node.
-// If the opened item is a regular text block, place the cursor there as well.
-export function useScrollToOpenedMember(props: Props): void {
+// This hook will track the focusPath and make sure editor content is visible and focused accordingly.
+export function useTrackFocusPath(props: Props): void {
   const {focusPath, editorRootPath, boundaryElement, onItemClose} = props
   const portableTextMemberItems = usePortableTextMemberItems()
   const editor = usePortableTextEditor()
 
   useEffect(() => {
-    // Don't do anything if there isn't focus
+    // Don't do anything if no internal focusPath
     if (focusPath.length === 0) {
       return
     }
-    // Find the highest opened member item and scroll to it
+    // Find the most specific opened member item and scroll to it
     const memberItem = portableTextMemberItems
       .filter((item) => item.member.open)
       .sort((a, b) => b.member.item.path.length - a.member.item.path.length)[0]
-    if (memberItem && memberItem.elementRef?.current && memberItem.member.open) {
-      scrollIntoView(memberItem.elementRef.current, {
-        boundary: boundaryElement,
-        scrollMode: 'if-needed',
+    if (memberItem && memberItem.elementRef?.current) {
+      if (boundaryElement) {
+        // Scroll the boundary element into view
+        scrollIntoView(boundaryElement, {
+          scrollMode: 'if-needed',
+        })
+      }
+      // Make a selection in the editor
+      PortableTextEditor.select(editor, {
+        anchor: {path: focusPath, offset: 0},
+        focus: {path: focusPath, offset: 0},
       })
-      // If this is a text block (and not a child within), place the cursor in the beginning of it.
-      const isChildPath = focusPath.slice(editorRootPath.length).length > 1
-      if (memberItem.kind === 'textBlock' && !isChildPath) {
-        const relativePath = memberItem.member.item.path.slice(editorRootPath.length).slice(0, 1)
+      if (memberItem.kind === 'textBlock') {
+        PortableTextEditor.focus(editor)
         // "auto-close" regular text blocks or they get sticky here when trying to focus on an other field
         // There is no natural way of closing them (however opening something else would close them)
-        PortableTextEditor.select(editor, {
-          anchor: {path: relativePath, offset: 0},
-          focus: {path: relativePath, offset: 0},
-        })
-        PortableTextEditor.focus(editor)
         onItemClose()
       }
     }

packages/sanity/src/desk/panes/document/DocumentPane.tsx

@@ -141,7 +141,7 @@ function DocumentPaneInner(props: DocumentPaneProviderProps) {
     <DocumentPaneProvider
       // this needs to be here to avoid formState from being re-used across (incompatible) document types
       // see https://github.com/sanity-io/sanity/discussions/3794 for a description of the problem
-      key={documentType}
+      key={`${documentType}-${options.id}`}
       {...providerProps}
     >
       {/* NOTE: this is a temporary location for this provider until we */}