feat(creator-studio): switch writing editor to TinyMCE
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed
1 parent
4868de2cda
commit
384d2b7aa0
25 files changed
+1255
-7076
No files matched your search
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* 交互冒烟：验证插入面板能打开、能插入区块，封面条存在，
|
||||
* TinyMCE 交互冒烟：验证固定工具栏能够编辑正文格式，
|
||||
* 并记录无法捕获的 promise 拒绝。
|
||||
*/
|
||||
const fs = require('fs');
|
||||
@@ -22,82 +22,38 @@ const URL = process.argv[2] || 'https://localhost/jio-preview.html';
|
||||
args: ['--disable-gpu', '--no-sandbox'],
|
||||
});
|
||||
const page = await browser.newPage();
|
||||
await page.setViewport({ width: 1440, height: 560 });
|
||||
|
||||
if (process.env.JIO_USE_WORKTREE_BUILD === '1') {
|
||||
await page.setRequestInterception(true);
|
||||
page.on('request', (request) => {
|
||||
const pathname = new URL(request.url()).pathname;
|
||||
const jsSuffix = '/assets/creator-studio/build/index.js';
|
||||
const cssSuffix = '/assets/creator-studio/build/index.css';
|
||||
if (pathname.endsWith(jsSuffix)) {
|
||||
request.respond({
|
||||
status: 200,
|
||||
contentType: 'application/javascript',
|
||||
body: fs.readFileSync(path.join(__dirname, '../build/index.js')),
|
||||
});
|
||||
} else if (pathname.endsWith(cssSuffix)) {
|
||||
request.respond({
|
||||
status: 200,
|
||||
contentType: 'text/css',
|
||||
body: fs.readFileSync(path.join(__dirname, '../build/index.css')),
|
||||
});
|
||||
} else {
|
||||
request.continue();
|
||||
}
|
||||
});
|
||||
}
|
||||
await page.setViewport({ width: 1440, height: 900 });
|
||||
|
||||
const errors = [];
|
||||
page.on('pageerror', (e) => errors.push('pageerror: ' + e.message));
|
||||
page.on('pageerror', (error) => errors.push('pageerror: ' + error.message));
|
||||
|
||||
await page.goto(URL, { waitUntil: 'networkidle2', timeout: 60000 });
|
||||
await new Promise((r) => setTimeout(r, 2500));
|
||||
await page.waitForFunction(() => window.tinymce?.get('jio-creator-content'), { timeout: 20000 });
|
||||
|
||||
const before = await page.evaluate(() => ({
|
||||
blocks: document.querySelectorAll('.block-editor-block-list__block').length,
|
||||
hasInsertBtn: !!document.querySelector('.jio-creator__insert'),
|
||||
hasCover: !!document.querySelector('.jio-creator__cover'),
|
||||
toolbarTop: document.querySelector('.jio-creator__bar')?.getBoundingClientRect().top,
|
||||
fixed: getComputedStyle(document.querySelector('.jio-creator__bar')).position === 'fixed',
|
||||
toolbar: !!document.querySelector('[role="toolbar"]'),
|
||||
editor: !!window.tinymce?.get('jio-creator-content'),
|
||||
}));
|
||||
await page.evaluate(() => window.scrollTo(0, 700));
|
||||
await new Promise((r) => setTimeout(r, 300));
|
||||
const toolbarAfterScroll = await page.$eval('.jio-creator__bar', (el) => el.getBoundingClientRect().top);
|
||||
console.log('BEFORE ' + JSON.stringify({ ...before, toolbarAfterScroll }));
|
||||
|
||||
// 打开插入面板
|
||||
await page.click('.jio-creator__insert');
|
||||
await new Promise((r) => setTimeout(r, 400));
|
||||
const panel = await page.evaluate(() => ({
|
||||
open: !!document.querySelector('.jio-insert__panel'),
|
||||
items: Array.from(document.querySelectorAll('.jio-insert-item__label')).map((n) => n.textContent),
|
||||
}));
|
||||
console.log('PANEL ' + JSON.stringify(panel));
|
||||
|
||||
// 插入「标题」区块
|
||||
const clicked = await page.evaluate(() => {
|
||||
const btn = Array.from(document.querySelectorAll('.jio-insert-item')).find(
|
||||
(b) => (b.textContent || '').includes('标题')
|
||||
);
|
||||
if (!btn) return false;
|
||||
btn.click();
|
||||
return true;
|
||||
await page.evaluate(() => {
|
||||
const editor = window.tinymce.get('jio-creator-content');
|
||||
editor.setContent('<p>Toolbar smoke test</p>');
|
||||
editor.selection.select(editor.dom.select('p')[0], true);
|
||||
});
|
||||
await new Promise((r) => setTimeout(r, 900));
|
||||
await page.click('.jio-creator__tool-btn[aria-label="加粗"]');
|
||||
const bold = await page.evaluate(() => /<(strong|b)>Toolbar smoke test<\/(strong|b)>/.test(window.tinymce.get('jio-creator-content').getContent()));
|
||||
|
||||
const after = await page.evaluate(() => ({
|
||||
panelClosed: !document.querySelector('.jio-insert__panel'),
|
||||
blocks: document.querySelectorAll('.block-editor-block-list__block').length,
|
||||
hasHeading: !!document.querySelector('[data-type="core/heading"]'),
|
||||
}));
|
||||
console.log('AFTER ' + JSON.stringify({ clicked, ...after }));
|
||||
|
||||
await page.screenshot({ path: 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot-insert.png' });
|
||||
|
||||
if (errors.length) {
|
||||
console.log('--- errors ---');
|
||||
errors.slice(0, 10).forEach((e) => console.log(e));
|
||||
}
|
||||
await page.evaluate(() => {
|
||||
const editor = window.tinymce.get('jio-creator-content');
|
||||
editor.setContent('<p>Heading smoke test</p>');
|
||||
editor.selection.select(editor.dom.select('p')[0], true);
|
||||
});
|
||||
await page.select('.jio-creator__format-select', 'h2');
|
||||
const heading = await page.evaluate(() => /<h2[^>]*>Heading smoke test<\/h2>/.test(window.tinymce.get('jio-creator-content').getContent()));
|
||||
|
||||
console.log('STATE ' + JSON.stringify({ ...before, bold, heading }));
|
||||
if (errors.length) errors.forEach((error) => console.log(error));
|
||||
await page.screenshot({ path: 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot-tinymce-toolbar.png' });
|
||||
await browser.close();
|
||||
})();
|
||||
@@ -21,7 +21,7 @@ const mockBootstrap = {
|
||||
title: '',
|
||||
excerpt: '',
|
||||
content:
|
||||
'<!-- wp:paragraph --><p>这是正文的第一段。微信公众号式的编辑体验强调沉浸感：大面积留白、克制的工具栏、只在需要时才出现的设置面板。</p><!-- /wp:paragraph -->',
|
||||
'<p>这是正文的第一段。微信公众号式的编辑体验强调沉浸感：留白克制，固定工具栏始终可用，发布设置只在需要时打开。</p>',
|
||||
permalink: '',
|
||||
isPublished: false,
|
||||
categories: {
|
||||
@@ -81,7 +81,6 @@ const mockBootstrap = {
|
||||
privateUrl: '#',
|
||||
bootstrapUrl: '#',
|
||||
},
|
||||
blocks: { mediaUploadUrl: '#', mediaListUrl: '#' },
|
||||
nonce: 'preview',
|
||||
};
|
||||
|
||||
|
||||
@@ -59,8 +59,8 @@ const PREFIX = process.argv[3] || 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/
|
||||
title: pick('.jio-creator__title textarea'),
|
||||
excerpt: pick('.jio-creator__excerpt textarea'),
|
||||
canvas: pick('.jio-creator__canvas'),
|
||||
para: pick('.block-editor-block-list__block'),
|
||||
appender: pick('.block-editor-default-block-appender'),
|
||||
toolbar: pick('.jio-creator__toolbar-tools'),
|
||||
editor: pick('.jio-creator__editor .mce-edit-area'),
|
||||
primaryBtn: pick('.jio-creator__primary'),
|
||||
ghostBtn: pick('.jio-creator__ghost'),
|
||||
pageBg: getComputedStyle(document.body).backgroundColor,
|
||||
|
||||
@@ -75,9 +75,12 @@ if (!EDGE) {
|
||||
|
||||
const state = await page.evaluate(() => ({
|
||||
hasBar: !!document.querySelector('.jio-creator__bar'),
|
||||
hasCanvas: !!document.querySelector('.jio-creator__canvas'),
|
||||
appender: !!document.querySelector('.block-editor-default-block-appender'),
|
||||
blocks: document.querySelectorAll('.block-editor-block-list__block').length,
|
||||
hasToolbar: !!document.querySelector('.jio-creator__toolbar-tools'),
|
||||
hasTinyMce: !!window.tinymce?.get('jio-creator-content'),
|
||||
hasEditorFrame: !!document.querySelector('.mce-tinymce iframe, .tox-tinymce iframe'),
|
||||
hasTitle: !!document.querySelector('.jio-creator__title textarea'),
|
||||
hasSaveDraft: !!document.querySelector('.jio-creator__save-draft'),
|
||||
toolbarActions: Array.from(document.querySelectorAll('.jio-creator__toolbar-tools button')).map((button) => button.getAttribute('aria-label') || button.textContent.trim()),
|
||||
saveText: (document.querySelector('.jio-creator__save') || {}).textContent,
|
||||
rejections: window.__jioRejections || [],
|
||||
}));
|
||||
|
||||
Reference in new issue
Block a user