refactor(portable-text-editor): rename var to be more explicit

'hasFocus' here really means: does it has focus inside the editor itself? As opposed focus on some object inside the editor content (object blocks etc).
sanity-io · Oct 23, 2023 · aa5eb94 · aa5eb94
1 parent e2484bd
commit aa5eb94
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx
@@ -26,7 +26,7 @@ import {useHotkeys} from './hooks/useHotKeys'
 import {useTrackFocusPath} from './hooks/useTrackFocusPath'
 
 interface InputProps extends ArrayOfObjectsInputProps<PortableTextBlock> {
-  hasFocus: boolean
+  hasFocusWithin: boolean
   hotkeys?: HotkeyOptions
   isActive: boolean
   isFullscreen: boolean
@@ -48,7 +48,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
     changed,
     focused,
     focusPath = EMPTY_ARRAY,
-    hasFocus,
+    hasFocusWithin,
     hotkeys,
     isActive,
     isFullscreen,
@@ -385,7 +385,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
       <Editor
         ariaDescribedBy={ariaDescribedBy}
         initialSelection={initialSelection}
-        hasFocus={hasFocus}
+        hasFocus={hasFocusWithin}
         hotkeys={editorHotkeys}
         isActive={isActive}
         isFullscreen={isFullscreen}
@@ -408,7 +408,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
     [
       ariaDescribedBy,
       initialSelection,
-      hasFocus,
+      hasFocusWithin,
       editorHotkeys,
       isActive,
       isFullscreen,
@@ -453,7 +453,10 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
           isChanged={changed}
           path={path}
         >
-          <Root data-focused={hasFocus ? '' : undefined} data-read-only={readOnly ? '' : undefined}>
+          <Root
+            data-focused={hasFocusWithin ? '' : undefined}
+            data-read-only={readOnly ? '' : undefined}
+          >
             <Box data-wrapper="" ref={setWrapperElement}>
               <Portal __unstable_name={isFullscreen ? 'expanded' : 'collapsed'}>
                 {isFullscreen ? <ExpandedLayer>{editorNode}</ExpandedLayer> : editorNode}

diff --git a/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx b/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx
@@ -224,17 +224,20 @@ export function PortableTextInput(props: PortableTextInputProps) {
     return items
   }, [members, props])
 
-  const hasFocus =
+  // Is true if something inside the editor itself has focus,
+  // as opposed to focus on a form field inside an
+  // annotation or object block's editing interface.
+  const hasFocusWithin =
     focused ||
     (focusPath.length > 0 &&
       portableTextMemberItems.some((m) => m.member.open && m.kind === 'textBlock'))
 
-  // Set active if focused
+  // Set active if focused within the editor
   useEffect(() => {
-    if (hasFocus) {
+    if (hasFocusWithin) {
       setIsActive(true)
     }
-  }, [hasFocus])
+  }, [hasFocusWithin])
 
   // Handle editor changes
   const handleEditorChange = useCallback(
@@ -334,7 +337,7 @@ export function PortableTextInput(props: PortableTextInputProps) {
             >
               <Compositor
                 {...props}
-                hasFocus={hasFocus}
+                hasFocusWithin={hasFocusWithin}
                 hotkeys={hotkeys}
                 isActive={isActive}
                 isFullscreen={isFullscreen}