fix(structure): annotations not opening in portable text editor (#6198)

* fix(structure): annotations not opening in PTE, blurred path is set as open path * test(form/inputs): add test ids for annotation toolbar popover * test(playwright-ct): add test for editing existing annotation --------- Co-authored-by: Per-Kristian Nordnes <[email protected]>
sanity-io · Apr 3, 2024 · 907c904 · 907c904
1 parent 46c7ce8
commit 907c904
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 3 deletions.
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx
@@ -51,5 +51,64 @@ test.describe('Portable Text Input', () => {
       // Assertion: the annotation toolbar popover should be visible
       await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible()
     })
+
+    test('Can create, and then open the existing annotation again for editing', async ({
+      mount,
+      page,
+    }) => {
+      const {getFocusedPortableTextEditor, insertPortableText} = testHelpers({
+        page,
+      })
+      await mount(<AnnotationsStory />)
+      const $pte = await getFocusedPortableTextEditor('field-body')
+
+      await insertPortableText('Now we should insert a link.', $pte)
+
+      // Backtrack and click link icon in menu bar
+      await page.keyboard.press('ArrowLeft')
+      await page.keyboard.press('Shift+ArrowLeft+ArrowLeft+ArrowLeft+ArrowLeft')
+      await page.getByRole('button', {name: 'Link'}).click()
+      // Assertion: Wait for link to be re-rendered / PTE internal state to be done
+      await expect($pte.locator('span[data-link]')).toBeVisible()
+
+      // Assertion: the annotation toolbar popover should not be visible
+      await expect(page.getByTestId('annotation-toolbar-popover')).not.toBeVisible()
+
+      const $linkEditPopover = page.getByTestId('popover-edit-dialog')
+      const $linkInput = $linkEditPopover.getByLabel('Link').first()
+
+      // Now we check if the edit popover shows automatically
+      await expect($linkInput).toBeAttached({timeout: 10000})
+
+      // Focus the URL input
+      await $linkInput.focus()
+
+      // Assertion: The URL input should be focused
+      await expect($linkInput).toBeFocused()
+
+      // Type in the URL
+      await page.keyboard.type('https://www.sanity.io')
+
+      // Assetion: The URL input should have the correct value
+      await expect($linkInput).toHaveValue('https://www.sanity.io')
+
+      // Close the popover
+      await page.keyboard.press('Escape')
+
+      // Expect the editor to have focus after closing the popover
+      await expect($pte).toBeFocused()
+
+      // Assertion: the annotation toolbar popover should be visible
+      await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible()
+
+      // Open up the editing interface again
+      await page.getByTestId('edit-annotation-button').click()
+
+      // Focus the URL input
+      await $linkInput.focus()
+
+      // Assertion: The URL input should be focused
+      await expect($linkInput).toBeFocused()
+    })
   })
 })
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
@@ -183,6 +183,7 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
             </Box>
             <Button
               aria-label={t('inputs.portable-text.action.edit-annotation-aria-label')}
+              data-testid="edit-annotation-button"
               icon={EditIcon}
               mode="bleed"
               onClick={handleEditButtonClicked}
@@ -191,6 +192,7 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
             />
             <Button
               aria-label={t('inputs.portable-text.action.remove-annotation-aria-label')}
+              data-testid="remove-annotation-button"
               icon={TrashIcon}
               mode="bleed"
               onClick={handleRemoveButtonClicked}

diff --git a/packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx b/packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx
@@ -557,7 +557,6 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
       }
 
       setFocusPath(EMPTY_ARRAY)
-      setOpenPath(blurredPath)
 
       if (focusPathRef.current !== EMPTY_ARRAY) {
         focusPathRef.current = EMPTY_ARRAY
@@ -567,9 +566,8 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
       // note: we're deliberately not syncing presence here since it would make the user avatar disappear when a
       // user clicks outside a field without focusing another one
     },
-    [onFocusPath, setOpenPath, setFocusPath],
+    [onFocusPath, setFocusPath],
   )
-
   const documentPane: DocumentPaneContextValue = useMemo(
     () => ({
       actions,