This PR adds support for inserting images into the rich text editor via both **copy & paste** and **drag & drop**, whether from local files or image DOM nodes. It leverages the bulk uploads UI to provide a smooth workflow for: - Selecting the target collection - Filling in any required fields defined on the uploads collection - Uploading multiple images at once This significantly improves the UX for adding images to rich text, and also works seamlessly when pasting images from external editors like Google Docs or Microsoft Word. Test pre-release: `3.57.0-internal.801ab5a` ## Showcase - drag & drop images from computer https://github.com/user-attachments/assets/c558c034-d2e4-40d8-9035-c0681389fb7b ## Showcase - copy & paste images from computer https://github.com/user-attachments/assets/f36faf94-5274-4151-b141-00aff2b0efa4 ## Showcase - copy & paste image DOM nodes https://github.com/user-attachments/assets/2839ed0f-3f28-4e8d-8b47-01d0cb947edc --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211217132290841
177 lines
4.9 KiB
TypeScript
177 lines
4.9 KiB
TypeScript
import { spawn } from 'child_process'
|
|
import globby from 'globby'
|
|
import minimist from 'minimist'
|
|
import path from 'path'
|
|
import shelljs from 'shelljs'
|
|
import slash from 'slash'
|
|
import { fileURLToPath } from 'url'
|
|
|
|
const __filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(__filename)
|
|
|
|
// @todo remove in 4.0 - will behave like this by default in 4.0
|
|
process.env.PAYLOAD_DO_NOT_SANITIZE_LOCALIZED_PROPERTY = 'true'
|
|
|
|
shelljs.env.DISABLE_LOGGING = 'true'
|
|
|
|
const prod = process.argv.includes('--prod')
|
|
if (prod) {
|
|
process.env.PAYLOAD_TEST_PROD = 'true'
|
|
shelljs.env.PAYLOAD_TEST_PROD = 'true'
|
|
}
|
|
|
|
const turbo = process.argv.includes('--no-turbo') ? false : true
|
|
|
|
process.argv = process.argv.filter((arg) => arg !== '--prod' && arg !== '--no-turbo')
|
|
|
|
const playwrightBin = path.resolve(dirname, '../node_modules/.bin/playwright')
|
|
|
|
const testRunCodes: { code: number; suiteName: string }[] = []
|
|
const { _: args, bail, part } = minimist(process.argv.slice(2))
|
|
const suiteName = args[0]
|
|
|
|
// Run all
|
|
if (!suiteName) {
|
|
let files = await globby(`${path.resolve(dirname).replace(/\\/g, '/')}/**/*e2e.spec.ts`)
|
|
|
|
const totalFiles = files.length
|
|
|
|
if (part) {
|
|
if (!part.includes('/')) {
|
|
throw new Error('part must be in the format of "1/2"')
|
|
}
|
|
|
|
const [partToRun, totalParts] = part.split('/').map((n: string) => parseInt(n))
|
|
|
|
if (partToRun > totalParts) {
|
|
throw new Error('part cannot be greater than totalParts')
|
|
}
|
|
|
|
const partSize = Math.ceil(files.length / totalParts)
|
|
const start = (partToRun - 1) * partSize
|
|
const end = start + partSize
|
|
files = files.slice(start, end)
|
|
}
|
|
|
|
if (files.length !== totalFiles) {
|
|
console.log(`\n\nExecuting part ${part}: ${files.length} of ${totalFiles} E2E tests...\n\n`)
|
|
} else {
|
|
console.log(`\n\nExecuting all ${files.length} E2E tests...\n\n`)
|
|
}
|
|
console.log(`${files.join('\n')}\n`)
|
|
|
|
for (const file of files) {
|
|
clearWebpackCache()
|
|
|
|
const baseTestFolder = file?.split('/test/')?.[1]?.split('/')?.[0]
|
|
if (!baseTestFolder) {
|
|
throw new Error(`No base test folder found for ${file}`)
|
|
}
|
|
executePlaywright(file, baseTestFolder, bail)
|
|
}
|
|
} else {
|
|
let inputSuitePath: string | undefined = suiteName
|
|
let suiteConfigPath: string | undefined = 'config.ts'
|
|
if (suiteName.includes('#')) {
|
|
;[inputSuitePath, suiteConfigPath] = suiteName.split('#')
|
|
}
|
|
|
|
if (!inputSuitePath) {
|
|
throw new Error(`No test suite found for ${suiteName}`)
|
|
}
|
|
|
|
// Run specific suite
|
|
clearWebpackCache()
|
|
const suiteFolderPath: string | undefined = path
|
|
.resolve(dirname, inputSuitePath)
|
|
.replaceAll('__', '/')
|
|
|
|
const allSuitesInFolder = await globby(`${suiteFolderPath.replace(/\\/g, '/')}/*e2e.spec.ts`)
|
|
|
|
const baseTestFolder = inputSuitePath.split('__')[0]
|
|
|
|
if (!baseTestFolder || !allSuitesInFolder?.length) {
|
|
throw new Error(`No test suite found for ${suiteName}`)
|
|
}
|
|
|
|
console.log(`\n\nExecuting all ${allSuitesInFolder.length} E2E tests...\n\n`)
|
|
|
|
console.log(`${allSuitesInFolder.join('\n')}\n`)
|
|
|
|
for (const file of allSuitesInFolder) {
|
|
clearWebpackCache()
|
|
executePlaywright(file, baseTestFolder, false, suiteConfigPath)
|
|
}
|
|
}
|
|
|
|
console.log('\nRESULTS:')
|
|
testRunCodes.forEach((tr) => {
|
|
console.log(`\tSuite: ${tr.suiteName}, Success: ${tr.code === 0}`)
|
|
})
|
|
console.log('\n')
|
|
|
|
// baseTestFolder is the most top level folder of the test suite, that contains the payload config.
|
|
// We need this because pnpm dev for a given test suite will always be run from the top level test folder,
|
|
// not from a nested suite folder.
|
|
function executePlaywright(
|
|
suitePath: string,
|
|
baseTestFolder: string,
|
|
bail = false,
|
|
suiteConfigPath?: string,
|
|
) {
|
|
console.log(`Executing ${suitePath}...`)
|
|
const playwrightCfg = path.resolve(
|
|
dirname,
|
|
`${bail ? 'playwright.bail.config.ts' : 'playwright.config.ts'}`,
|
|
)
|
|
|
|
const spawnDevArgs: string[] = [
|
|
'dev',
|
|
suiteConfigPath ? `${baseTestFolder}#${suiteConfigPath}` : baseTestFolder,
|
|
'--start-memory-db',
|
|
]
|
|
if (prod) {
|
|
spawnDevArgs.push('--prod')
|
|
}
|
|
|
|
if (!turbo) {
|
|
spawnDevArgs.push('--no-turbo')
|
|
}
|
|
|
|
process.env.START_MEMORY_DB = 'true'
|
|
|
|
const child = spawn('pnpm', spawnDevArgs, {
|
|
stdio: 'inherit',
|
|
cwd: path.resolve(dirname, '..'),
|
|
env: {
|
|
...process.env,
|
|
},
|
|
})
|
|
|
|
const cmd = slash(`${playwrightBin} test ${suitePath} -c ${playwrightCfg}`)
|
|
console.log('\n', cmd)
|
|
const { code, stdout } = shelljs.exec(cmd, {
|
|
cwd: path.resolve(dirname, '..'),
|
|
})
|
|
const suite = path.basename(path.dirname(suitePath))
|
|
const results = { code, suiteName: suite }
|
|
|
|
if (code) {
|
|
if (bail) {
|
|
console.error(`TEST FAILURE DURING ${suite} suite.`)
|
|
}
|
|
child.kill(1)
|
|
process.exit(1)
|
|
} else {
|
|
child.kill()
|
|
}
|
|
testRunCodes.push(results)
|
|
|
|
return stdout
|
|
}
|
|
|
|
function clearWebpackCache() {
|
|
const webpackCachePath = path.resolve(dirname, '../node_modules/.cache/webpack')
|
|
shelljs.rm('-rf', webpackCachePath)
|
|
}
|