refactor(core/form/inputs): improve autofocus handling

sanity-io · May 30, 2023 · f018467 · f018467
1 parent 6ff2b45
commit f018467
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -199,16 +199,18 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
     onOpen,
     onRemove,
     open,
-    focused,
+    path,
     readOnly,
     schemaType,
     textElement,
     validation,
+    value,
   } = props
   const isLink = schemaType.name === 'link'
   const hasError = validation.filter((v) => v.level === 'error').length > 0
   const hasWarning = validation.filter((v) => v.level === 'warning').length > 0
   const hasMarkers = markers.length > 0
+  const autofocus = isEqual(path.slice(-2), ['markDefs', {_key: value._key}])
 
   const toneKey = useMemo(() => {
     if (hasError) {
@@ -247,7 +249,7 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
           boundaryElement={__unstable_boundaryElement}
           defaultType="popover"
           onClose={onClose}
-          autofocus={focused}
+          autofocus={autofocus}
           referenceElement={__unstable_referenceElement}
           schemaType={schemaType}
         >

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -176,7 +176,6 @@ export function BlockObject(props: BlockObjectProps) {
       children: input,
       focused,
       markers,
-      nodeFocused: memberItem?.node.focused,
       onClose,
       onOpen,
       onPathFocus,
@@ -300,8 +299,8 @@ export const DefaultBlockObjectComponent = (props: BlockProps) => {
     onClose,
     onOpen,
     onRemove,
-    nodeFocused,
     open,
+    path,
     readOnly,
     renderPreview,
     selected,
@@ -315,6 +314,7 @@ export const DefaultBlockObjectComponent = (props: BlockProps) => {
   const hasWarning = validation.filter((v) => v.level === 'warning').length > 0
   const hasMarkers = Boolean(markers.length > 0)
   const tone = selected || focused ? 'primary' : 'default'
+  const autofocus = isEqual(path.slice(-1), [{_key: value._key}])
 
   const handleDoubleClickToOpen = useCallback(
     (e: React.MouseEvent<Element, MouseEvent>) => {
@@ -363,7 +363,7 @@ export const DefaultBlockObjectComponent = (props: BlockProps) => {
           boundaryElement={__unstable_boundaryElement}
           defaultType="dialog"
           onClose={onClose}
-          autofocus={nodeFocused}
+          autofocus={autofocus}
           schemaType={schemaType}
           referenceElement={__unstable_referenceElement}
         >

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -6,6 +6,7 @@ import {
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {Tooltip} from '@sanity/ui'
+import {isEqual} from '@sanity/util/paths'
 import {BlockProps, RenderCustomMarkers, RenderPreviewCallback} from '../../../types'
 import {useFormBuilder} from '../../../useFormBuilder'
 import {usePortableTextMarkers} from '../hooks/usePortableTextMarkers'
@@ -192,6 +193,7 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
     onOpen,
     onRemove,
     open,
+    path,
     readOnly,
     renderPreview,
     schemaType,
@@ -239,6 +241,8 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
     setPopoverOpen(false)
   }, [])
 
+  const autofocus = isEqual(path.slice(-2), ['children', {_key: value._key}])
+
   return (
     <>
       <Root
@@ -279,7 +283,7 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
           boundaryElement={__unstable_boundaryElement}
           defaultType="popover"
           onClose={onClose}
-          autofocus={focused}
+          autofocus={autofocus}
           referenceElement={__unstable_referenceElement}
           schemaType={schemaType}
         >

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/ObjectEditModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/ObjectEditModal.tsx
@@ -1,22 +1,17 @@
-import {
-  EditorSelection,
-  PortableTextEditor,
-  usePortableTextEditor,
-} from '@sanity/portable-text-editor'
-import React, {useCallback, useMemo, useRef} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
 import {_getModalOption} from '../helpers'
 import {DefaultEditDialog} from './DialogModal'
 import {PopoverEditDialog} from './PopoverModal'
 
 export function ObjectEditModal(props: {
+  autofocus?: boolean
   boundaryElement: HTMLElement | undefined
   children: React.ReactNode
   defaultType: 'dialog' | 'popover'
   onClose: () => void
   referenceElement: HTMLElement | undefined
   schemaType: ObjectSchemaType
-  autofocus?: boolean
 }) {
   const {onClose, defaultType, referenceElement, boundaryElement, schemaType, autofocus} = props
 
@@ -34,6 +29,7 @@ export function ObjectEditModal(props: {
   if (modalType === 'popover') {
     return (
       <PopoverEditDialog
+        autofocus={autofocus}
         boundaryElement={boundaryElement}
         onClose={handleClose}
         referenceElement={referenceElement}

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
@@ -16,6 +16,7 @@ import {
 } from './PopoverModal.styles'
 
 interface PopoverEditDialogProps {
+  autofocus?: boolean
   boundaryElement?: PortableTextEditorElement
   children: React.ReactNode
   onClose: () => void
@@ -52,7 +53,7 @@ export function PopoverEditDialog(props: PopoverEditDialogProps) {
 }
 
 function Content(props: PopoverEditDialogProps) {
-  const {onClose, referenceElement, width = 0, title, boundaryElement} = props
+  const {onClose, referenceElement, width = 0, title, boundaryElement, autofocus} = props
 
   useGlobalKeyDown(
     useCallback(
@@ -80,7 +81,13 @@ function Content(props: PopoverEditDialogProps) {
                 <Text weight="semibold">{title}</Text>
               </Box>
 
-              <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
+              <Button
+                autoFocus={Boolean(autofocus)}
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={onClose}
+                padding={2}
+              />
             </Flex>
           </ContentHeaderBox>
           <ContentScrollerBox flex={1}>