From 9f7ab8b22b0c87a19ffb2e45ce20838a93ebf9cc Mon Sep 17 00:00:00 2001
From: RitaDias <rita@sanity.io>
Date: Fri, 24 May 2024 13:25:55 +0200
Subject: [PATCH] fix(core): unable to open block style select when in nested
 PTEs in fullscreen (#6738)

* chore(dev): update schema

* fix(core): unable to open block style select when in nested PTEs

* test(@sanity, sanity, test): update e2e tests

* chore(sanity): remove unneded zindex

* test(test): update e2e to wait for the second full screen in pte
---
 .../portableText/allTheBellsAndWhistles.ts    | 45 ++++++++++++++
 .../src/editor/components/Element.tsx         |  1 +
 .../PortableText/toolbar/BlockStyleSelect.tsx | 12 +++-
 .../inputs/PortableText/toolbar/Toolbar.tsx   |  9 ++-
 .../ArrayOfObjectsFunctions.tsx               | 20 ++++++-
 test/e2e/tests/pte/Toolbar.spec.ts            | 58 +++++++++++++++++++
 6 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 test/e2e/tests/pte/Toolbar.spec.ts

diff --git a/dev/test-studio/schema/standard/portableText/allTheBellsAndWhistles.ts b/dev/test-studio/schema/standard/portableText/allTheBellsAndWhistles.ts
index 95dba62c327..f350bf4fd23 100644
--- a/dev/test-studio/schema/standard/portableText/allTheBellsAndWhistles.ts
+++ b/dev/test-studio/schema/standard/portableText/allTheBellsAndWhistles.ts
@@ -335,5 +335,50 @@ export const ptAllTheBellsAndWhistlesType = defineType({
         }),
       ],
     }),
+    defineField({
+      name: 'content',
+      type: 'array',
+      of: [
+        defineArrayMember({
+          name: 'something',
+          type: 'block',
+          of: [
+            defineArrayMember({
+              name: 'nested',
+              type: 'object',
+              fields: [
+                defineField({
+                  name: 'items',
+                  type: 'array',
+                  of: [
+                    defineArrayMember({
+                      name: 'item',
+                      type: 'object',
+                      fields: [
+                        defineField({
+                          name: 'deep',
+                          type: 'array',
+                          of: [
+                            defineArrayMember({
+                              type: 'block',
+                              styles: [
+                                {title: 'Normal', value: 'normal'},
+                                {title: 'H2', value: 'h2'},
+                                {title: 'H3', value: 'h3'},
+                                {title: 'H4', value: 'h4'},
+                              ],
+                            }),
+                          ],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    }),
   ],
 })
diff --git a/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx b/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx
index 240e06bebf0..8cc506020f3 100644
--- a/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx
+++ b/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx
@@ -108,6 +108,7 @@ export const Element: FunctionComponent<ElementProps> = ({
           <span
             draggable={!readOnly}
             className="pt-inline-object"
+            data-testid="pt-inline-object"
             ref={inlineBlockObjectRef}
             key={element._key}
             style={inlineBlockStyle}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
index d9a26f2df22..051de925242 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
@@ -29,6 +29,7 @@ const MenuButtonMemo = memo(MenuButton)
 interface BlockStyleSelectProps {
   disabled: boolean
   items: BlockStyleItem[]
+  boundaryElement: HTMLDivElement | null
 }
 
 const StyledMenuItem = styled(MenuItem)`
@@ -70,11 +71,18 @@ const emptyStyle: BlockStyleItem = {
 export const BlockStyleSelect = memo(function BlockStyleSelect(
   props: BlockStyleSelectProps,
 ): JSX.Element {
-  const {disabled, items: itemsProp} = props
+  const {disabled, items: itemsProp, boundaryElement} = props
   const editor = usePortableTextEditor()
   const focusBlock = useFocusBlock()
   const {t} = useTranslation()
 
+  const popoverProperties: MenuButtonProps['popover'] = {
+    constrainSize: true,
+    placement: 'bottom-start',
+    portal: 'default',
+    referenceBoundary: boundaryElement,
+  }
+
   const _disabled =
     disabled || (focusBlock ? editor.schemaTypes.block.name !== focusBlock._type : false)
 
@@ -177,7 +185,7 @@ export const BlockStyleSelect = memo(function BlockStyleSelect(
 
   return (
     <MenuButtonMemo
-      popover={MENU_POPOVER_PROPS}
+      popover={popoverProperties}
       id="block-style-select"
       button={button}
       menu={menu}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
index 1ace135d436..05fc209288e 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
@@ -100,8 +100,13 @@ const InnerToolbar = memo(function InnerToolbar({
     <RootFlex align="center" ref={setRootElement} onMouseDown={preventEditorBlurOnToolbarMouseDown}>
       {showBlockStyleSelect && (
         <StyleSelectFlex flex={collapsed ? 1 : undefined}>
-          <StyleSelectBox padding={isFullscreen ? 2 : 1}>
-            <BlockStyleSelect disabled={disabled} items={blockStyles} />
+          <StyleSelectBox padding={isFullscreen ? 2 : 1} data-testid="block-style-select">
+            <BlockStyleSelect
+              disabled={disabled}
+              items={blockStyles}
+              // send the boundary in cases of PTEs within PTEs
+              boundaryElement={rootElement}
+            />
           </StyleSelectBox>
         </StyleSelectFlex>
       )}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 78f0dc5f234..6872919fa0b 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -54,7 +54,14 @@ export function ArrayOfObjectsFunctions<
     return (
       <Tooltip portal content={t('inputs.array.read-only-label')}>
         <Grid>
-          <Button icon={AddIcon} mode="ghost" disabled size="large" text={t(addItemI18nKey)} />
+          <Button
+            icon={AddIcon}
+            mode="ghost"
+            disabled
+            size="large"
+            data-testid="add-read-object-button"
+            text={t(addItemI18nKey)}
+          />
         </Grid>
       </Tooltip>
     )
@@ -68,11 +75,20 @@ export function ArrayOfObjectsFunctions<
           mode="ghost"
           onClick={handleAddBtnClick}
           size="large"
+          data-testid="add-single-object-button"
           text={t(addItemI18nKey)}
         />
       ) : (
         <MenuButton
-          button={<Button icon={AddIcon} mode="ghost" size="large" text={t(addItemI18nKey)} />}
+          button={
+            <Button
+              icon={AddIcon}
+              mode="ghost"
+              size="large"
+              data-testid="add-multiple-object-button"
+              text={t(addItemI18nKey)}
+            />
+          }
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/test/e2e/tests/pte/Toolbar.spec.ts b/test/e2e/tests/pte/Toolbar.spec.ts
new file mode 100644
index 00000000000..52e91185e66
--- /dev/null
+++ b/test/e2e/tests/pte/Toolbar.spec.ts
@@ -0,0 +1,58 @@
+import {expect, type Locator} from '@playwright/test'
+import {test} from '@sanity/test'
+
+test.describe('Portable Text Input - Open Block Style Select', () => {
+  let pteInput: Locator
+
+  test.beforeEach(async ({page, createDraftDocument}) => {
+    await createDraftDocument(
+      '/test/content/input-standard;portable-text;pt_allTheBellsAndWhistles',
+    )
+
+    pteInput = page.getByTestId('field-content')
+
+    // set up the portable text editor
+    await pteInput.focus()
+    await pteInput.click()
+  })
+
+  test('on a simple editor', async ({page}) => {
+    await pteInput.getByTestId('block-style-select').click()
+
+    expect(await page.locator('[data-ui="MenuButton__popover"]')).toBeVisible()
+  })
+
+  test('on a full screen simple editor', async ({page}) => {
+    await pteInput.getByLabel('Expand editor').click()
+    await page.locator('[data-testid="block-style-select"]').click()
+
+    await expect(await page.locator('[data-ui="MenuButton__popover"]')).toBeVisible()
+  })
+
+  test('on a full screen multi nested PTE', async ({page}) => {
+    await pteInput.getByLabel('Expand editor').click()
+
+    // add a object with a nested PTE
+    await page.getByRole('button', {name: 'Insert Nested (inline)'}).click()
+
+    // click the block
+    await page.getByTestId('pt-inline-object').click()
+
+    // set up object
+    await page.getByTestId('add-single-object-button').click()
+
+    // set up nested PTE
+    const nestedPTE = page.locator('[data-testid^="field-content"][data-testid$=".deep"]')
+
+    await nestedPTE.focus()
+    await nestedPTE.click()
+
+    // nested block full screen
+    await nestedPTE.getByLabel('Expand editor').click()
+
+    // click the block style select
+    await page.locator('[data-testid="block-style-select"]').nth(1).click()
+
+    await expect(await page.locator('[data-ui="MenuButton__popover"]')).toBeVisible()
+  })
+})