fix(structure): uncaught error while swapping images in array in PTE (#…

…6399)

* chore(test-studio): add schema for fix

* fix(structure): console error for when selection is zero

* chore(test-studio): update test schema

* chore(core): remove try catch

* test(pte): add test for usecase

* chore(sanity): remove ? since it will always be defined

Co-authored-by: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com>

* chore(test): fix test file to have .spec.

---------

Co-authored-by: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com>

dev/test-studio/schema/standard/portableText/allTheBellsAndWhistles.ts

@@ -255,5 +255,47 @@ export const ptAllTheBellsAndWhistlesType = defineType({
         }),
       ],
     }),
+    defineField({
+      name: 'body',
+      title: 'Body',
+      type: 'array',
+      of: [
+        defineArrayMember({
+          type: 'block',
+        }),
+        defineArrayMember({
+          type: 'object',
+          name: 'imagesWithCaption',
+          title: 'Image slideshow',
+          fields: [
+            {
+              type: 'array',
+              name: 'images',
+              of: [
+                {
+                  type: 'object',
+                  name: 'imageWithCaption',
+                  fields: [
+                    {
+                      type: 'image',
+                      name: 'image',
+                      options: {
+                        hotspot: true,
+                      },
+                      fields: [{type: 'string', name: 'alt'}],
+                    },
+                    {
+                      type: 'array',
+                      name: 'caption',
+                      of: [{type: 'block'}],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        }),
+      ],
+    }),
   ],
 })

packages/sanity/src/core/comments/plugin/input/helpers.ts

@@ -107,10 +107,9 @@ export function useAuthoringReferenceElement(
 export function getSelectionBoundingRect(): DOMRect | null {
   const selection = window.getSelection()
   let range = null
-  try {
-    range = selection?.getRangeAt(0)
-  } catch (error) {
-    console.error('Unable to get selection rect for portable text comment input', error)
+
+  if (selection && selection.rangeCount > 0) {
+    range = selection.getRangeAt(0)
   }
   const rect = range?.getBoundingClientRect()
 

test/e2e/tests/pte/ImageArrayDrag.spec.ts

@@ -0,0 +1,42 @@
+import {expect} from '@playwright/test'
+import {test} from '@sanity/test'
+
+test('Portable Text Input - Array Input of images dragging an image will not trigger range out of bounds (toast)', async ({
+  page,
+  createDraftDocument,
+}) => {
+  await createDraftDocument('/test/content/input-standard;portable-text;pt_allTheBellsAndWhistles')
+
+  // set up the portable text editor
+  await page.getByTestId('field-body').focus()
+  await page.getByTestId('field-body').click()
+
+  await page
+    .getByTestId('insert-menu-auto-collapse-menu')
+    .getByRole('button', {name: 'Insert Image slideshow (block)'})
+    .click()
+
+  // set up for the PTE block
+  await page.getByRole('button', {name: 'Add item'}).click()
+  await page.getByTestId('file-input-multi-browse-button').click()
+  await page.getByTestId('file-input-browse-button-sanity-default').click()
+
+  // grab an image
+  await page.getByRole('button', {name: 'capybara.jpg'}).click()
+  await page.getByLabel('Edit Image With Caption').getByLabel('Close dialog').click()
+
+  // grab drag element in array element
+  await page.locator("[data-sanity-icon='drag-handle']").hover()
+
+  // drag and drop element
+  await page.mouse.down()
+  await page.getByRole('button', {name: 'Add item'}).hover()
+  await page.mouse.up()
+
+  await page.locator(
+    `:has-text("Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.']`,
+  )
+
+  // check that the alert is not visible
+  await expect(await page.getByRole('alert').locator('div').nth(1)).not.toBeVisible()
+})