tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor(richtext-lexical): new upload node design (#13901)

Browse Source 
This changes the design of lexical upload nodes to better show the
actual media instead of the metadata.

## Updated Design


https://github.com/user-attachments/assets/49096378-35c2-4eb0-b4b6-5f138d49bdad

Light mode:

<img width="780" height="962" alt="Screenshot 2025-09-24 at 10 11 32@2x"
src="https://github.com/user-attachments/assets/7611e659-3914-46e9-9c8c-db88c180227b"
/>


## Previous Design

> Before:
> 
> <img width="1358" height="860" alt="Screenshot 2025-09-22 at 16 01
16@2x"
src="https://github.com/user-attachments/assets/7831761c-6c3c-4072-82ed-68b88e3842b7"
/>
> 
> After:
> 
> <img width="1776" height="1632" alt="Screenshot 2025-09-22 at 16 01
00@2x"
src="https://github.com/user-attachments/assets/b434b6d5-a965-4c2b-adba-c1bf2a3be4bc"
/>
> 
> 
>
https://github.com/user-attachments/assets/f2749a38-c191-4b50-a521-8f722ed42a8f
> 



---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211429812808983
This commit is contained in:
Alessio Gravili
2025-09-24 13:22:03 -07:00
committed by GitHub
parent abbe38fbaf
commit bea77f2f24
6 changed files with 195 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
test/lexical/collections/Lexical/e2e/main/e2e.spec.ts
View File

@@ -7,7 +7,6 @@ import type {
import type { BrowserContext, Locator, Page } from '@playwright/test'
import { expect, test } from '@playwright/test'
import { except } from 'drizzle-orm/mysql-core'
import path from 'path'
import { wait } from 'payload/shared'
import { fileURLToPath } from 'url'
@@ -537,13 +536,11 @@ describe('lexicalMain', () => {
const secondUploadNode = richTextField.locator('.lexical-upload').nth(1)
await secondUploadNode.scrollIntoViewIfNeeded()
await expect(secondUploadNode).toBeVisible()
// Focus the upload node
await secondUploadNode.click()
await expect(secondUploadNode.locator('.lexical-upload__bottomRow')).toContainText(
'payload-1.jpg',
)
await expect(secondUploadNode.locator('.lexical-upload__collectionLabel')).toContainText(
'Upload',
)
await expect(secondUploadNode.locator('.lexical-upload__filename')).toHaveText('payload-1.jpg')
await expect(secondUploadNode.locator('.lexical-upload__collectionLabel')).toHaveText('Upload')
})
// This reproduces https://github.com/payloadcms/payload/issues/7128
@@ -590,8 +587,10 @@ describe('lexicalMain', () => {
const newUploadNode = richTextField.locator('.lexical-upload').nth(1)
await newUploadNode.scrollIntoViewIfNeeded()
await expect(newUploadNode).toBeVisible()
await newUploadNode.click() // Focus the upload node
await newUploadNode.hover()
await expect(newUploadNode.locator('.lexical-upload__bottomRow')).toContainText('payload.jpg')
await expect(newUploadNode.locator('.lexical-upload__filename')).toContainText('payload.jpg')
// Click on button with class lexical-upload__upload-drawer-toggler
await newUploadNode.locator('.lexical-upload__upload-drawer-toggler').first().click()
@@ -630,6 +629,9 @@ describe('lexicalMain', () => {
.nth(1)
await reloadedUploadNode.scrollIntoViewIfNeeded()
await expect(reloadedUploadNode).toBeVisible()
await reloadedUploadNode.click() // Focus the upload node
await reloadedUploadNode.hover()
await reloadedUploadNode.locator('.lexical-upload__upload-drawer-toggler').first().click()
const reloadedUploadExtraFieldsDrawer = page
.locator('dialog[id^=drawer_1_lexical-upload-drawer-]')
@@ -1209,7 +1211,9 @@ describe('lexicalMain', () => {
await expect(slashMenuPopover).toBeHidden()
await expect(newUploadNode.locator('.lexical-upload__bottomRow')).toContainText('payload.png')
await newUploadNode.hover()
await expect(newUploadNode.locator('.lexical-upload__filename')).toHaveText('payload.png')
await page.keyboard.press('Enter') // floating toolbar needs to appear with enough distance to the upload node, otherwise clicking may fail
await page.keyboard.press('Enter')
@@ -1557,12 +1561,9 @@ describe('lexicalMain', () => {
// test
await navigateToLexicalFields()
const bottomOfUploadNode = page
.locator('.lexical-upload div')
.filter({ hasText: /^payload\.jpg$/ })
.first()
await bottomOfUploadNode.click()
await expectInsideSelectedDecorator(bottomOfUploadNode)
const uploadNode = page.locator('.lexical-upload[data-filename="payload.jpg"]').first()
await uploadNode.click()
await expectInsideSelectedDecorator(uploadNode)
const textNode = page.getByText('Upload Node:', { exact: true })
await textNode.click()