feat(creator-studio): portal dropdowns, hidden content, two-step block delete

Toolbar
- New ToolMenu renders menus through a portal on body, so they are no longer
  clipped by the horizontally scrolling toolbar and no longer fall back to a
  native <select>. Triggers reuse .jio-creator__tool-btn geometry, fixing the
  heading button's mismatched height/size/position.
- Heading / list / align / quote / hidden-content are all dropdowns.
- Lists: unordered + ordered via InsertOrderedList/InsertUnorderedList.
  The TOC button is removed (it also used the wrong icon).
- Adds left / center / right alignment.
- Adds hidden content: comment / login / VIP / paid, wired to the existing
  [reply], [jio_hide mode="login"], [vip] and [payshow] shortcodes.

Editor content
- Quote blocks now match the live article: full .quote_q structure, four
  colour variables, and an SVG-mask quote mark that does not depend on the
  Font Awesome font being present inside the iframe.
- Block math is centred on a transparent background instead of a full-width
  grey bar.
- Code blocks are plain <pre><code>, identical to the article page; language
  and theme selection is gone and EnlighterJS handles highlighting globally.
  The classic submit editor's code modal follows the same shape.
- Hidden content reuses the .tinymce-hide structure and shows a readable label
  while keeping the shortcode text in the DOM for saving.

Block deletion
- Two-step delete, WPS style: the first click only selects and highlights the
  block, the second click removes it. Clicking elsewhere or Esc cancels.

Contracts updated and extended; 884 widget-system tests pass.
This commit is contained in:
kate522 committed 2026-11-09 15:03:50 +08:00
1 parent 3e48fdf61e
commit c5bdbc0457
16 files changed
+1090 -545

No files matched your search

+8 -81
View File
@@ -504,61 +504,6 @@
editor.nodeChanged();
}
var codeLanguages = [
['yaml', 'yaml'],
['xml/html', 'xml'],
['visualbasic', 'visualbasic'],
['vhdl', 'vhdl'],
['typescript', 'typescript'],
['swift', 'swift'],
['sql', 'sql'],
['shell', 'shell'],
['scss/sass', 'scss'],
['rust', 'rust'],
['ruby', 'ruby'],
['python', 'python'],
['powershell', 'powershell'],
['php', 'php'],
['markdown', 'markdown'],
['lua', 'lua'],
['less', 'less'],
['kotlin', 'kotlin'],
['json', 'json'],
['javascript', 'javascript'],
['java', 'java'],
['ini/conf', 'ini'],
['go/golang', 'go'],
['docker', 'dockerfile'],
['diff', 'diff'],
['css', 'css'],
['csharp', 'csharp'],
['Cpp/C++/C', 'cpp'],
['assembly', 'assembly'],
[i18n.codeGeneric || '通用高亮', 'generic'],
];
var codeThemes = [
['enlighter', 'enlighter'],
['classic', 'classic'],
['beyond', 'beyond'],
['mowtwo', 'mowtwo'],
['eclipse', 'eclipse'],
['droide', 'droide'],
['minimal', 'minimal'],
['atomic', 'atomic'],
['dracula', 'dracula'],
['bootstrap4', 'bootstrap4'],
['rowhammer', 'rowhammer'],
['godzilla', 'godzilla'],
[i18n.codeFollowGlobal || '跟随全局设置', 'qj'],
];
function listboxValues(items) {
return items.map(function (item) {
return { text: item[0], value: item[1] };
});
}
function bindCharacterCount(editor) {
var counter = null;
@@ -592,40 +537,27 @@
editor.on('init SetContent input keyup change Undo Redo', updateCount);
}
// 代码块:与前台文章页完全一致(pre > code),语言交给「全局功能 → 代码高亮」
// 在发布页统一决定,编辑器里不再选语言 / 主题。
function openCodeModal(editor) {
var selected = editor.dom.getParent(editor.selection.getNode(), 'pre.enlighter-pre');
var selected = editor.dom.getParent(editor.selection.getNode(), 'pre');
var code = selected ? selected.querySelector('code') : null;
var width = window.innerWidth > 800 ? Math.round(window.innerWidth * 0.5) :
(window.innerWidth > 640 ? Math.round(window.innerWidth * 0.7) : window.innerWidth - 20);
var height = Math.round(window.innerHeight * 0.6);
editor.windowManager.open({
title: (selected ? (i18n.edit || '编辑') : (i18n.insert || '插入')) +
(i18n.highlightCode || '高亮代码'),
width: width,
width: window.innerWidth > 800 ? Math.round(window.innerWidth * 0.5) :
(window.innerWidth > 640 ? Math.round(window.innerWidth * 0.7) : window.innerWidth - 20),
height: height,
body: [
{
type: 'listbox',
name: 'language',
label: i18n.selectLanguage || '选择语言',
value: code ? (code.getAttribute('data-enlighter-language') || 'generic') : 'generic',
values: listboxValues(codeLanguages),
},
{
type: 'listbox',
name: 'theme',
label: i18n.codeTheme || '主题',
value: code ? (code.getAttribute('data-enlighter-theme') || 'qj') : 'qj',
values: listboxValues(codeThemes),
},
{
type: 'textbox',
name: 'content',
label: i18n.codeLabel || '代码:',
value: code ? (code.textContent || '') : '',
multiline: true,
minHeight: Math.max(160, height - 115),
minHeight: Math.max(160, height - 60),
},
],
onsubmit: function (event) {
@@ -634,12 +566,7 @@
return;
}
var encoded = window.tinymce.html.Entities.encodeAllRaw(content);
var language = event.data.language === 'generic' ? '' :
' data-enlighter-language="' + escapeAttr(event.data.language) + '"';
var theme = event.data.theme === 'qj' ? '' :
' data-enlighter-theme="' + escapeAttr(event.data.theme) + '"';
var markup = '<pre contenteditable="false" class="enlighter-pre"><code class="gl"' +
language + theme + '>' + encoded + '</code></pre>';
var markup = '<pre><code>' + encoded + '</code></pre>';
if (selected) {
editor.dom.setOuterHTML(selected, markup);
} else {
@@ -846,7 +773,7 @@
text: '',
icon: 'code',
tooltip: i18n.highlightCode || '高亮代码',
stateSelector: 'pre.enlighter-pre',
stateSelector: 'pre',
onclick: function () {
openCodeModal(editor);
},