[jio_toc]
"):ue("`+n+"${e}
`:"";return`[jio_math display="1"]${a}[/jio_math]
`:`[jio_math display="0"]${a}[/jio_math]
`}(e)):ue(function(e){const t=e.trim()||(0,a.__)("注释内容","jio");return`[jio_footnote]${y(t)}[/jio_footnote]
`}(e.note))},[ue]),_e=(0,t.useCallback)(e=>{const t=i.current,n=window.JioSubmitMedia;t&&n&&"function"==typeof n.open?(le(),n.open({type:e,multiple:"image"===e&&void 0,onSelect:t=>{const a=Array.isArray(t)?t:[t],n=ie();if(!n)return;const o=a.map(t=>{const a=L(t?.large_url||t?.url);if(!a)return"";const n=Number(t.attachment_id||t.id||0),o=n>0?` data-edit-file-id="${n}"`:"";if("image"===e){const e=L(t?.url||a),n=e?` data-full-url="${M(e)}"`:"";return`${E(a)}
`).replace(/\[jio_footnote\]([\s\S]*?)\[\/jio_footnote\]/g,(e,t)=>`${t}`):e}const E=e=>e.replace(/&/g,"&").replace(//g,">").replace(/\^\{([^{}]*)\}|\^(\S)/gu,"$1$2").replace(/_\{([^{}]*)\}|_(\S)/gu,"$1$2"),v={ready:(0,a.__)("尚未保存","jio"),saving:(0,a.__)("保存中…","jio"),saved:(0,a.__)("已保存","jio"),error:(0,a.__)("保存失败","jio"),conflict:(0,a.__)("内容已在别处更新","jio"),submitting:(0,a.__)("提交中…","jio"),submitted:(0,a.__)("已提交","jio")};function k({value:t}){return(0,e.createElement)("span",{className:`jio-creator__save is-${t.state}`,role:"status","aria-live":"polite"},(0,e.createElement)("i",{className:"fa fas fa-circle","aria-hidden":"true"}),(0,e.createElement)("span",null,v[t.state]||v.ready),"saved"===t.state&&t.at?(0,e.createElement)("time",null,t.at):null)}const N=36e5,w=24*N,C=30*w,S=365*w,x={ready:(0,a.__)("草稿","jio"),saving:(0,a.__)("保存中","jio"),saved:(0,a.__)("草稿","jio"),error:(0,a.__)("保存失败","jio"),conflict:(0,a.__)("冲突","jio"),submitting:(0,a.__)("提交中","jio"),submitted:(0,a.__)("已提交","jio")};function M({charCount:t,saveState:n,isPublishedEdit:o,saving:r,onSaveDraft:l,onPreview:i,onPublish:c}){const s=n.at?function(e,t=Date.now()){const n=Date.parse(e);if(!Number.isFinite(n))return"";const o=Math.max(0,t-n);return o<6e4?(0,a.__)("刚刚","jio"):o[jio_toc]
"):je("`+n+"${e}
`:"";return`${a}
`:`${a}`}(e)):je(function(e){const t=e.trim()||(0,a.__)("注释内容","jio");return`${$(t)}`}(e.note))},[je]),ke=(0,t.useCallback)(e=>{const t=i.current,n=window.JioSubmitMedia;t&&n&&"function"==typeof n.open?(fe(),n.open({type:e,multiple:"image"===e&&void 0,onSelect:t=>{const a=Array.isArray(t)?t:[t],n=be();if(!n)return;const o=a.map(t=>{const a=O(t?.large_url||t?.url);if(!a)return"";const n=Number(t.attachment_id||t.id||0),o=n>0?` data-edit-file-id="${n}"`:"";if("image"===e){const e=O(t?.url||a),n=e?` data-full-url="${F(e)}"`:"";return`` + + `` + `' ); } +/** 把代码块的语言写成编辑器里的内联标签（纯文本，保存前由编辑器移除）。 */ export type TableOptions = { rows: number; cols: number; @@ -102,21 +109,33 @@ export function tocMarkup(): string { return '` + body + '[jio_toc]
'; } -/** 注释：用短代码落库，服务端生成上标序号与文末注释列表。 */ -export function footnoteMarkup(note: string): string { - const text = note.trim() || __('注释内容', 'jio'); - // 短代码属性里再放 HTML 会被 kses 改写，这里只允许纯文本内容。 - return `[jio_footnote]${escapeHtml(text)}[/jio_footnote]
`; -} - export type MathOptions = { formula: string; display: boolean }; -/** 公式：用短代码落库，服务端统一做上标 / 下标排版。 */ +/** 公式的上标 / 下标排版（与 ContentBlocks::typeset_math 保持一致）。 */ +export function typesetMath(raw: string): string { + const escaped = escapeHtml(raw); + return escaped + .replace(/\^\{([^{}]*)\}|\^(\S)/gu, '$1$2') + .replace(/_\{([^{}]*)\}|_(\S)/gu, '$1$2'); +} + +/** + * 公式：编辑器里直接显示排版结果，保存前由 `serializeBlocks` 换回短代码。 + */ export function mathMarkup({ formula, display }: MathOptions): string { - const body = escapeHtml(formula.trim()); + const body = typesetMath(formula.trim()); + const attrs = `data-jio-math-source="${escapeHtml(formula.trim())}" data-jio-math-display="${display ? '1' : '0'}"`; return display - ? `[jio_math display="1"]${body}[/jio_math]
` - : `[jio_math display="0"]${body}[/jio_math]
`; + ? `${body}
` + : `${body}`; +} + +/** + * 注释：编辑器里显示上标序号，保存前由 `serializeBlocks` 换回短代码。 + */ +export function footnoteMarkup(note: string): string { + const text = note.trim() || __('注释内容', 'jio'); + return `${escapeHtml(text)}`; } export type QuoteColor = '' | 'qe_wzk_c-red' | 'qe_wzk_lan' | 'qe_wzk_lv'; diff --git a/assets/creator-studio/src/utils/serialize.ts b/assets/creator-studio/src/utils/serialize.ts new file mode 100644 index 00000000..0b954528 --- /dev/null +++ b/assets/creator-studio/src/utils/serialize.ts @@ -0,0 +1,83 @@ +/** + * 编辑器内容 ↔ 保存格式的转换。 + * + * 编辑器里把公式、注释、代码语言标签渲染成可读的样子（方便写作时看到最终效果）， + * 但落库必须回到短代码/纯标记，服务端才能稳定渲染。这里在两个方向上都做一次转换。 + * + * @package Jio + */ + +const escapeAttr = (value: string): string => + value.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); + +const decodeEntities = (value: string): string => { + const area = document.createElement('textarea'); + area.innerHTML = value; + return area.value; +}; + +/** + * 保存前：把编辑器里的可视化块换回短代码 / 纯标记。 + */ +export function serializeBlocks(html: string): string { + if (!html || (html.indexOf('data-jio-') === -1 && html.indexOf('jio-code-lang') === -1)) { + return html; + } + + const container = document.createElement('div'); + container.innerHTML = html; + + // 公式 + container.querySelectorAll('[data-jio-math-source]').forEach((node) => { + const formula = node.getAttribute('data-jio-math-source') || ''; + const display = node.getAttribute('data-jio-math-display') !== '0'; + const shortcode = `[jio_math display="${display ? '1' : '0'}"]${formula}[/jio_math]`; + const paragraph = node.closest('p'); + if (display && paragraph && paragraph.textContent?.trim() === node.textContent?.trim()) { + paragraph.textContent = shortcode; + } else { + node.replaceWith(document.createTextNode(shortcode)); + } + }); + + // 注释 + container.querySelectorAll ('[data-jio-footnote]').forEach((node) => { + const note = node.getAttribute('data-jio-footnote') || ''; + node.replaceWith(document.createTextNode(`[jio_footnote]${note}[/jio_footnote]`)); + }); + + // 代码块语言角标只是编辑期提示 + container.querySelectorAll('.jio-code-lang').forEach((node) => node.remove()); + + return container.innerHTML; +} + +/** + * 打开已有内容时：把短代码还原成编辑器里的可视化块。 + */ +export function hydrateBlocks(html: string): string { + if (!html || html.indexOf('[jio_') === -1) { + return html; + } + + return html + .replace( + /\[jio_math display="([01])"\]([\s\S]*?)\[\/jio_math\]/g, + (_match, display: string, formula: string) => + display === '0' + ? `${typeset(formula)}` + : ` ${typeset(formula)}
` + ) + .replace( + /\[jio_footnote\]([\s\S]*?)\[\/jio_footnote\]/g, + (_match, note: string) => + `${note}` + ); +} + +const typeset = (raw: string): string => { + const escaped = raw.replace(/&/g, '&').replace(//g, '>'); + return escaped + .replace(/\^\{([^{}]*)\}|\^(\S)/gu, '$1$2') + .replace(/_\{([^{}]*)\}|_(\S)/gu, '$1$2'); +}; diff --git a/tests/widget-system/creator-studio-contract.test.cjs b/tests/widget-system/creator-studio-contract.test.cjs index 0a6aa616..bf5d6fd1 100644 --- a/tests/widget-system/creator-studio-contract.test.cjs +++ b/tests/widget-system/creator-studio-contract.test.cjs @@ -176,14 +176,16 @@ test('fixed top toolbar has TinyMCE formatting, media, and extension actions', ( assert.match(appSource, /onInsertBlock=\{insertBlock\}/); assert.match(appSource, /onInsertQuote=\{insertQuote\}/); const markup = read('assets/creator-studio/src/utils/block-markup.ts'); - assert.match(markup, /jio_math/); + assert.match(markup, /jio-math/); // 引用沿用主题的 quote_q 结构与配色类。 assert.match(markup, /quote_q/); assert.match(markup, /qe_wzk_c-red/); // 公式与注释用短代码落库，由服务端保证渲染。 assert.doesNotMatch(markup, /E = mc\^2/); - assert.match(markup, /\[jio_math display="1"\]/); - assert.match(markup, /\[jio_footnote\]/); + // 编辑器展示渲染结果，序列化时再换回短代码。 + assert.match(markup, /data-jio-math-source/); + assert.match(read('assets/creator-studio/src/utils/serialize.ts'), /\[jio_math display=/); + assert.match(read('assets/creator-studio/src/utils/serialize.ts'), /\[jio_footnote\]/); assert.match(markup, /\[jio_toc\]/); // 代码块角标不再输出固定「高亮代码」文案。 assert.doesNotMatch(read('assets/css/frontend/pages/submit-editor.css'), /高亮代码/); @@ -204,9 +206,17 @@ test('fixed top toolbar has TinyMCE formatting, media, and extension actions', ( // 工具栏按钮统一为「图标在上、文字在下」。 assert.match(editorToolbar, /jio-creator__tool-label/); assert.match(read('assets/creator-studio/src/styles/studio.scss'), /\.jio-creator__tool-btn\s*\{[\s\S]*?flex-direction:\s*column/); - assert.match(appSource, /保存草稿/); - assert.match(appSource, /{ assert.doesNotMatch(read('assets/creator-studio/src/styles/studio.scss'), /jio-creator__author/); }); -test('the writing surface has no character or reading-time footer', () => { +test('character count lives in the fixed bottom bar, not a reading-time footer', () => { assert.doesNotMatch(appSource, /jio-creator__footer/); assert.doesNotMatch(appSource, /分钟阅读/); - assert.doesNotMatch(appSource, /charCount/); - assert.doesNotMatch(read('assets/creator-studio/src/styles/studio.scss'), /\.jio-creator__footer/); + assert.match(read('assets/creator-studio/src/components/status-bar.tsx'), /字数/); });