fix(core): portable text annotations slow to show

packages/sanity/src/core/comments/plugin/input/components/CommentsPortableTextInput.tsx

@@ -223,6 +223,8 @@
     [getComment, onCommentsOpen, scrollToComment, setSelectedPath],
   )
 
+  const blurred = useRef<boolean>(false)
+
   const handleSelectionChange = useCallback(
     (selection: EditorSelection | null) => {
       const isRangeSelected = selection?.anchor.offset !== selection?.focus.offset
@@ -234,7 +236,15 @@
         setCanSubmit(false)
         return
       }
-
+      /**
+       * When the portable text editor loses focus we will save the blurred.current to true.
+       * Later, when it restores focus the editor will emit a selection change event, but we don't want to immediately show the comment input
+       * instead, we want to wait until the user selects a new range.
+       */
+      if (blurred.current) {
+        blurred.current = false
+        return
+      }
       // If the mouse is not down, we want to set the current selection rect
       // when the selection changes. Otherwise, we want to wait until the mouse
       // is up to set the current selection rect (see `handleMouseUp`).
@@ -249,7 +259,7 @@
   )
 
   const debounceSelectionChange = useMemo(
     () => debounce(handleSelectionChange, 200),
     [handleSelectionChange],
   )
 
@@ -387,6 +397,9 @@
       if (change.type === 'mutation') {
         updateCommentRange()
       }
+      if (change.type === 'blur') {
+        blurred.current = true
+      }
       if (change.type === 'selection') {
         debounceSelectionChange(change.selection)
       }
@@ -425,7 +438,7 @@
   const currentSelectionIsOverlapping = useMemo(() => {
     if (!currentSelection || addedCommentsDecorations.length === 0) return false
 
     return addedCommentsDecorations.some((d) => {
       if (!editorRef.current) return false
 
       const testA = PortableTextEditor.isSelectionsOverlapping(

packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx

@@ -268,6 +268,7 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
   const hasError = validation.some((v) => v.level === 'error')
   const hasWarning = validation.some((v) => v.level === 'warning')
   const hasMarkers = markers.length > 0
+  const isReady = Boolean(children)
 
   const {t} = useTranslation()
   const toneKey = useMemo(() => {
@@ -296,18 +297,22 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
       onClick={readOnly ? onOpen : undefined}
     >
       {textElement}
-      <AnnotationToolbarPopover
-        annotationOpen={open}
-        floatingBoundary={floatingBoundary}
-        onOpen={onOpen}
-        onRemove={onRemove}
-        referenceBoundary={referenceBoundary}
-        referenceElement={referenceElement}
-        selected={selected}
-        title={
-          schemaType.i18nTitleKey ? t(schemaType.i18nTitleKey) : schemaType.title || schemaType.name
-        }
-      />
+      {isReady && (
+        <AnnotationToolbarPopover
+          annotationOpen={open}
+          floatingBoundary={floatingBoundary}
+          onOpen={onOpen}
+          onRemove={onRemove}
+          referenceBoundary={referenceBoundary}
+          referenceElement={referenceElement}
+          selected={selected}
+          title={
+            schemaType.i18nTitleKey
+              ? t(schemaType.i18nTitleKey)
+              : schemaType.title || schemaType.name
+          }
+        />
+      )}
       {open && (
         <ObjectEditModal
           defaultType="popover"

packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx

@@ -80,6 +80,13 @@ function Content(props: PopoverEditDialogProps) {
   const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null)
   const containerElement = useRef<HTMLDivElement | null>(null)
 
+  useEffect(() => {
+    // When rendered, focus on the first input element in the content
+    if (contentElement) {
+      contentElement.querySelector('input')?.focus()
+    }
+  }, [contentElement])
+
   return (
     <VirtualizerScrollInstanceProvider
       scrollElement={contentElement}