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:
1 parent
3e48fdf61e
commit
c5bdbc0457
16 files changed
+1090
-545
No files matched your search
@@ -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);
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user