kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(creator-studio): bottom status bar, editor-rendered math/footnote, code language picker, block delete

Browse Source 
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-07 00:38:39 +08:00
1 parent 6928127bfa
commit 4a119358ca
11 files changed
+754 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/creator-studio/src/index.tsx
+228 -19
View File
@@ -7,19 +7,22 @@
* @package Jio
*/
import { createRoot, useCallback, useEffect, useRef, useState } from '@wordpress/element';
import { createRoot, useCallback, useEffect, useMemo, useRef, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { apiPost } from './services/api';
import { PublishDrawer } from './panels/publish-drawer';
import { EditorToolbar } from './components/editor-toolbar';
import { PublishSettings } from './components/publish-settings';
import { SaveState, type SaveStateValue } from './components/save-state';
import { type SaveStateValue } from './components/save-state';
import { useAutosave } from './hooks/use-autosave';
import { useLocalRecovery } from './hooks/use-local-recovery';
import { normalizePayForRequest } from './utils/pay';
import { EDITOR_CONTENT_STYLE } from './editor-content-style';
import { hydrateBlocks, serializeBlocks } from './utils/serialize';
import { StatusBar } from './components/status-bar';
import {
CODE_LANGUAGES,
codeBlockMarkup,
dividerMarkup,
footnoteMarkup,
@@ -174,6 +177,160 @@ function removeAdjacentBlock(editor: any, event: any): void {
editor.undoManager.add();
}
/**
* 在编辑器里为每个代码块渲染语言角标，并保证回车不会跳出代码区。
*
* 角标是编辑期提示（纯 UI），保存前由 serializeBlocks 移除。
*/
/**
* 在代码块内回车时保持在代码里换行，而不是跳出到普通段落。
*
* TinyMCE 默认把 pre 当成不可持续输入的块，回车会新建段落，导致代码跑到
* 代码块外面。这里手动插入换行并保持光标在 code 内。
*/
/**
* 让 iframe 高度跟随正文增长，避免编辑器内部出现第二根滚动条。
*
* TinyMCE 的 iframe 不会自动撑高；这里测量内容高度并同步容器，
* 页面整体滚动由外层工作台负责。
*/
function syncEditorHeight(editor: any): void {
if (!editor || editor.removed) {
return;
}
const doc = editor.getDoc();
const iframe = editor.getContentAreaContainer()?.querySelector('iframe') as HTMLIFrameElement | null;
if (!doc || !iframe) {
return;
}
const height = Math.max(
320,
doc.documentElement.scrollHeight,
doc.body ? doc.body.scrollHeight : 0
);
iframe.style.height = `${height}px`;
iframe.style.overflow = 'hidden';
}
function keepCaretInsideCode(editor: any, event: any): boolean {
if (Number(event.keyCode) !== 13 || event.shiftKey) {
return false;
}
const pre = editor.dom.getParent(editor.selection.getNode(), 'pre.enlighter-pre');
if (!pre) {
return false;
}
event.preventDefault();
const code = pre.querySelector('code') || pre;
editor.selection.setCursorLocation(code, code.childNodes.length);
editor.insertContent('<br>');
editor.nodeChanged();
return true;
}
/** 可整体删除的块级元素选择器。 */
const BLOCK_SELECTOR = 'table,pre.enlighter-pre,hr,.quote_q,p';
/**
* 给表格 / 代码块 / 引用等块渲染一个浮层删除按钮。
*
* 与 WPS 的块操作一致：鼠标悬停到块上时在右上角出现删除入口，
* 避免只能靠反复按退格键。
*/
function installBlockActions(editor: any): void {
const doc = editor.getDoc();
if (!doc || doc.getElementById('jio-block-actions')) {
return;
}
const bar = doc.createElement('div');
bar.id = 'jio-block-actions';
bar.className = 'jio-creator__block-actions';
bar.innerHTML =
'<button type="button" class="jio-creator__block-action" data-jio-block-delete title="' +
'删除此块' +
'" aria-label="删除此块"><span aria-hidden="true">&#10005;</span></button>';
doc.body.appendChild(bar);
let current: HTMLElement | null = null;
const hide = () => {
current = null;
bar.classList.remove('is-visible');
};
const show = (block: HTMLElement) => {
if (!block || block === doc.body) {
hide();
return;
}
// 空段落没有删除价值，交给退格键处理。
if (block.tagName === 'P' && (block.textContent || '').trim() === '') {
hide();
return;
}
current = block;
const rect = block.getBoundingClientRect();
bar.style.top = `${rect.top + doc.documentElement.scrollTop + 6}px`;
bar.style.left = `${rect.right - 40}px`;
bar.classList.add('is-visible');
};
doc.addEventListener('mouseover', (event: MouseEvent) => {
const block = (event.target as HTMLElement)?.closest?.(BLOCK_SELECTOR) as HTMLElement | null;
if (block && block !== doc.body && !block.classList.contains('jio-code-lang')) {
show(block);
}
});
doc.addEventListener('mouseleave', hide);
bar.addEventListener('mousedown', (event: MouseEvent) => event.preventDefault());
bar.addEventListener('click', (event: MouseEvent) => {
const button = (event.target as HTMLElement)?.closest('[data-jio-block-delete]');
if (!button || !current) {
return;
}
event.preventDefault();
const target = current;
hide();
editor.undoManager.transact(() => {
editor.dom.remove(target);
});
editor.nodeChanged();
editor.undoManager.add();
if (editor.getBody().children.length === 0) {
editor.setContent('<p></p>');
editor.selection.setCursorLocation(editor.getBody().firstChild, 0);
}
syncEditorHeight(editor);
});
}
function syncCodeLabels(editor: any): void {
const root: HTMLElement | null = editor?.getBody?.() ?? null;
if (!root) {
return;
}
root.querySelectorAll<HTMLElement>('pre.enlighter-pre[data-jio-code]').forEach((pre) => {
const existing = pre.querySelector(':scope > .jio-code-lang');
const language = pre.getAttribute('data-enlighter-language') || 'generic';
if (existing) {
existing.setAttribute('data-jio-code-lang', language);
const label = CODE_LANGUAGES.find((item) => item.value === language)?.label || language;
if ((existing.textContent || '') !== label) {
existing.textContent = label;
}
return;
}
const badge = document.createElement('span');
badge.className = 'jio-code-lang';
badge.contentEditable = 'false';
badge.setAttribute('data-jio-code-lang', language);
badge.textContent = CODE_LANGUAGES.find((item) => item.value === language)?.label || language;
pre.insertBefore(badge, pre.firstChild);
});
}
function escapeAttribute(value: string): string {
return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
@@ -215,6 +372,8 @@ function Studio(): JSX.Element {
}));
const [drawerOpen, setDrawerOpen] = useState(false);
const [blockDialog, setBlockDialog] = useState<BlockDialogKind | null>(null);
const [codeLanguage, setCodeLanguage] = useState<null | string>(null);
const codeTargetRef = useRef<any>(null);
const [notice, setNotice] = useState<{ tone: 'ok' | 'error'; text: string } | null>(null);
const [recovery, setRecovery] = useState<null | { savedAt: string }>(null);
const dirtyRef = useRef(false);
@@ -231,6 +390,7 @@ function Studio(): JSX.Element {
pointsMax: Number(bootstrap.pay?.pointsMax || 0),
};
const isPublishedEdit = !!bootstrap.isPublished;
const charCount = useMemo(() => Array.from(plainText(draft.content)).length, [draft.content]);
const patchDraft = useCallback((patch: Partial<Draft>) => {
dirtyRef.current = true;
@@ -292,7 +452,7 @@ function Studio(): JSX.Element {
async (autosave = false): Promise<boolean> => {
const editor = editorRef.current;
if (editor && !editor.removed) {
updateContent(editor.getContent());
updateContent(serializeBlocks(editor.getContent()));
}
const current = draftRef.current;
if (!dirtyRef.current && (current.postId > 0 || current.versionId > 0)) {
@@ -468,7 +628,8 @@ function Studio(): JSX.Element {
body_class: 'jio-creator__tinymce',
content_css: bootstrap.creator?.contentCss || '',
content_style: EDITOR_CONTENT_STYLE,
height: 650,
// iframe 高度随后由 autoresize 随正文增长，这里只给初始值。
height: 520,
placeholder: String(bootstrap.limits?.contentPlaceholder || ''),
setup: (editor: any) => {
editorRef.current = editor;
@@ -476,17 +637,24 @@ function Studio(): JSX.Element {
editorReadyRef.current = true;
setEditorReady(true);
if (pendingRestoreContentRef.current !== null) {
editor.setContent(pendingRestoreContentRef.current);
editor.setContent(hydrateBlocks(pendingRestoreContentRef.current));
pendingRestoreContentRef.current = null;
} else {
editor.setContent(hydrateBlocks(editor.getContent()));
}
syncCodeLabels(editor);
syncEditorHeight(editor);
installBlockActions(editor);
updateHistoryAvailability(editor);
updateFormatValue(editor);
});
editor.on('NodeChange', () => updateFormatValue(editor));
// 代码块右上角的语言标签：点击整块即可换语言，等价于公众号的「高亮」入口。
editor.on('input change Undo Redo AddUndo', () => {
updateContent(editor.getContent());
updateContent(serializeBlocks(editor.getContent()));
updateHistoryAvailability(editor);
syncCodeLabels(editor);
syncEditorHeight(editor);
});
editor.on('keydown', (event: any) => {
if ((event.metaKey || event.ctrlKey) && event.keyCode === 83) {
@@ -601,8 +769,9 @@ function Studio(): JSX.Element {
}
editor.insertContent(html);
editor.nodeChanged();
updateContent(editor.getContent());
updateContent(serializeBlocks(editor.getContent()));
updateHistoryAvailability(editor);
syncCodeLabels(editor);
}, [focusEditor]);
// 直接插入、无需参数的小块；需要参数的块打开通用弹窗。
@@ -736,18 +905,6 @@ function Studio(): JSX.Element {
onInsertBlock={insertBlock}
onInsertQuote={insertQuote}
/>
<div className="jio-creator__bar-actions jio-creator__toolbar-extension" data-toolbar-extension aria-label={__('工具扩展区', 'jio')}>
<SaveState value={saveState} />
<button type="button" className="jio-creator__save-draft" onClick={() => void save(false)} disabled={!editorReady}>
<i className="fa fas fa-save" aria-hidden="true" /><span>{__('保存草稿', 'jio')}</span>
</button>
<button type="button" className="jio-creator__ghost jio-creator__preview" onClick={() => void preview()}>
{__('预览', 'jio')}
</button>
<button type="button" className="jio-creator__primary" onClick={() => setDrawerOpen(true)}>
{isPublishedEdit ? __('提交改稿', 'jio') : __('发布', 'jio')}
</button>
</div>
</header>
{recovery && (
@@ -803,6 +960,48 @@ function Studio(): JSX.Element {
onScheduleChange={(enabled, at) => patchDraft({ schedule: { enabled, at } })}
/>
{codeLanguage !== null && (
<div className="jio-creator-dialog" role="dialog" aria-modal="true" aria-labelledby="jio-code-lang-title">
<button type="button" className="jio-creator-dialog__backdrop" aria-label={__('关闭', 'jio')} onClick={() => setCodeLanguage(null)} />
<div className="jio-creator-dialog__panel">
<header className="jio-creator-dialog__head">
<h2 id="jio-code-lang-title">{__('代码语言', 'jio')}</h2>
<button type="button" className="jio-creator-dialog__close" onClick={() => setCodeLanguage(null)} aria-label={__('关闭', 'jio')}>
<i className="fa fas fa-times" aria-hidden="true" />
</button>
</header>
<div className="jio-creator-dialog__body">
<div className="jio-creator__lang-grid">
{CODE_LANGUAGES.map((item) => (
<button
key={item.value}
type="button"
className={`jio-creator__lang-item${item.value === codeLanguage ? ' is-active' : ''}`}
onClick={() => {
const target = codeTargetRef.current;
codeTargetRef.current = null;
setCodeLanguage(null);
if (!target) {
return;
}
target.setAttribute('data-enlighter-language', item.value);
const code = target.querySelector('code');
if (code) {
code.setAttribute('data-enlighter-language', item.value);
}
syncCodeLabels(editorRef.current);
updateContent(serializeBlocks(editorRef.current.getContent()));
}}
>
{item.label}
</button>
))}
</div>
</div>
</div>
</div>
)}
{blockDialog && (
<BlockDialog
kind={blockDialog}
@@ -811,6 +1010,16 @@ function Studio(): JSX.Element {
/>
)}
<StatusBar
charCount={charCount}
saveState={saveState}
isPublishedEdit={isPublishedEdit}
saving={!editorReady || saveState.state === 'saving' || saveState.state === 'submitting'}
onSaveDraft={() => void save(false)}
onPreview={() => void preview()}
onPublish={() => setDrawerOpen(true)}
/>
{drawerOpen && (
<PublishDrawer
draft={draft}