7cd4a8a602
Previously, the Lexical editor was using px, and the JSX converter was using rem. #12848 fixed the inconsistency by changing the editor to rem, but it should have been the other way around, changing the JSX converter to px. You can see the latest explanation about why it should be 40px [here](https://github.com/payloadcms/payload/issues/13130#issuecomment-3058348085). In short, that's the default indentation all browsers use for lists. This time I'm making sure to leave clear comments everywhere and a test to avoid another regression. Here is an image of what the e2e test looks like: <img width="321" height="678" alt="image" src="https://github.com/user-attachments/assets/8880c7cb-a954-4487-8377-aee17c06754c" /> The first part is the Lexical editor, the second is the JSX converter. As you can see, the checkbox in JSX looks a little odd because it uses an input checkbox (as opposed to a pseudo-element in the Lexical editor). I thought about adding an inline style to move it slightly to the left, but I found that browsers don't have a standard size for the checkbox; it varies by browser and device. That requires a little more thought; I'll address that in a future PR. Fixes #13130
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import type { Page } from 'playwright'
|
|
|
|
import { expect } from '@playwright/test'
|
|
|
|
export class LexicalHelpers {
|
|
page: Page
|
|
constructor(page: Page) {
|
|
this.page = page
|
|
}
|
|
|
|
async addLine(
|
|
type: 'check' | 'h1' | 'h2' | 'ordered' | 'paragraph' | 'unordered',
|
|
text: string,
|
|
indent: number,
|
|
startWithEnter = true,
|
|
) {
|
|
if (startWithEnter) {
|
|
await this.page.keyboard.press('Enter')
|
|
}
|
|
await this.slashCommand(type)
|
|
// Outdent 10 times to be sure we are at the beginning of the line
|
|
for (let i = 0; i < 10; i++) {
|
|
await this.page.keyboard.press('Shift+Tab')
|
|
}
|
|
const adjustedIndent = ['check', 'ordered', 'unordered'].includes(type) ? indent - 1 : indent
|
|
for (let i = 0; i < adjustedIndent; i++) {
|
|
await this.page.keyboard.press('Tab')
|
|
}
|
|
await this.page.keyboard.type(text)
|
|
}
|
|
|
|
async save(container: 'document' | 'drawer') {
|
|
if (container === 'drawer') {
|
|
await this.drawer.getByText('Save').click()
|
|
} else {
|
|
throw new Error('Not implemented')
|
|
}
|
|
await this.page.waitForTimeout(1000)
|
|
}
|
|
|
|
async slashCommand(
|
|
// prettier-ignore
|
|
command: 'block' | 'check' | 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' |'h6' | 'inline'
|
|
| 'link' | 'ordered' | 'paragraph' | 'quote' | 'relationship' | 'unordered' | 'upload',
|
|
) {
|
|
await this.page.keyboard.press(`/`)
|
|
|
|
const slashMenuPopover = this.page.locator('#slash-menu .slash-menu-popup')
|
|
await expect(slashMenuPopover).toBeVisible()
|
|
await this.page.keyboard.type(command)
|
|
await this.page.keyboard.press(`Enter`)
|
|
await expect(slashMenuPopover).toBeHidden()
|
|
}
|
|
|
|
get decorator() {
|
|
return this.editor.locator('[data-lexical-decorator="true"]')
|
|
}
|
|
|
|
get drawer() {
|
|
return this.page.locator('.drawer__content')
|
|
}
|
|
|
|
get editor() {
|
|
return this.page.locator('[data-lexical-editor="true"]')
|
|
}
|
|
|
|
get paragraph() {
|
|
return this.editor.locator('p')
|
|
}
|
|
}
|