From 0cac2464157eb0da08f55e9ae8b45d7b09ff2a9a Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 19 Jul 2023 13:55:42 +0800 Subject: [PATCH] :memo: fix https://github.com/siyuan-note/siyuan/issues/8785 --- app/src/plugin/customBlockRender.ts | 3 ++- app/src/protyle/export/index.ts | 2 ++ app/src/protyle/hint/index.ts | 5 +++-- app/src/protyle/method.ts | 2 ++ app/src/protyle/render/abcRender.ts | 3 ++- app/src/protyle/render/blockRender.ts | 6 +++--- app/src/protyle/render/chartRender.ts | 3 ++- app/src/protyle/render/flowchartRender.ts | 3 ++- app/src/protyle/render/graphvizRender.ts | 3 ++- app/src/protyle/render/highlightRender.ts | 3 +++ app/src/protyle/render/htmlRender.ts | 18 ++++++++++++++++++ app/src/protyle/render/mermaidRender.ts | 5 ++++- app/src/protyle/render/mindmapRender.ts | 3 ++- app/src/protyle/render/plantumlRender.ts | 3 ++- app/src/protyle/render/util.ts | 6 ++++++ app/src/protyle/util/processCode.ts | 17 +++++++++++++++-- 16 files changed, 70 insertions(+), 15 deletions(-) create mode 100644 app/src/protyle/render/htmlRender.ts create mode 100644 app/src/protyle/render/util.ts diff --git a/app/src/plugin/customBlockRender.ts b/app/src/plugin/customBlockRender.ts index a689c9840..d8887ac47 100644 --- a/app/src/plugin/customBlockRender.ts +++ b/app/src/plugin/customBlockRender.ts @@ -1,5 +1,6 @@ import {App} from "../index"; import {Constants} from "../constants"; +import {genIconHTML} from "../protyle/render/util"; export const customBlockRender = (app: App, element: Element) => { // TODO @@ -19,7 +20,7 @@ export const customBlockRender = (app: App, element: Element) => { return; } if (!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", '
'); + e.insertAdjacentHTML("afterbegin", genIconHTML()); } if (e.childElementCount < 4) { e.lastElementChild.insertAdjacentHTML("beforebegin", `${Constants.ZWSP}`); diff --git a/app/src/protyle/export/index.ts b/app/src/protyle/export/index.ts index 133aa2bd4..1a33abb16 100644 --- a/app/src/protyle/export/index.ts +++ b/app/src/protyle/export/index.ts @@ -356,6 +356,7 @@ const renderPDF = (id: string) => { Protyle.chartRender(previewElement, "${servePath}/stage/protyle"); Protyle.mindmapRender(previewElement, "${servePath}/stage/protyle"); Protyle.abcRender(previewElement, "${servePath}/stage/protyle"); + Protyle.htmlRender(previewElement); Protyle.plantumlRender(previewElement, "${servePath}/stage/protyle"); } fetchPost("/api/export/exportPreviewHTML", { @@ -643,6 +644,7 @@ const onExport = (data: IWebSocketData, filePath: string, type: string, removeAs Protyle.chartRender(previewElement, "stage/protyle"); Protyle.mindmapRender(previewElement, "stage/protyle"); Protyle.abcRender(previewElement, "stage/protyle"); + Protyle.htmlRender(previewElement); Protyle.plantumlRender(previewElement, "stage/protyle"); document.querySelectorAll(".protyle-action__copy").forEach((item) => { item.addEventListener("click", (event) => { diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts index 7c2d48396..94b59adc9 100644 --- a/app/src/protyle/hint/index.ts +++ b/app/src/protyle/hint/index.ts @@ -33,6 +33,7 @@ import {AIChat} from "../../ai/chat"; import {isMobile} from "../../util/functions"; import {isCtrl} from "../util/compatibility"; import {avRender} from "../render/av/render"; +import {genIconHTML} from "../render/util"; export class Hint { public timeId: number; @@ -675,7 +676,7 @@ ${unicode2Emoji(emoji.unicode)}`; } else if (editableElement.textContent === "" && nodeElement.getAttribute("data-type") === "NodeParagraph") { let newHTML = ""; if (value === "
") { - newHTML = `
${Constants.ZWSP}
`; + newHTML = `
${genIconHTML()}
${Constants.ZWSP}
`; } else { editableElement.textContent = textContent; newHTML = protyle.lute.SpinBlockDOM(nodeElement.outerHTML); @@ -693,7 +694,7 @@ ${unicode2Emoji(emoji.unicode)}`; } else { let newHTML = protyle.lute.SpinBlockDOM(textContent); if (value === "
") { - newHTML = `
${Constants.ZWSP}
`; + newHTML = `
${genIconHTML()}
${Constants.ZWSP}
`; } nodeElement.insertAdjacentHTML("afterend", newHTML); const oldHTML = nodeElement.outerHTML; diff --git a/app/src/protyle/method.ts b/app/src/protyle/method.ts index 899a9d5da..d9dcd8a70 100644 --- a/app/src/protyle/method.ts +++ b/app/src/protyle/method.ts @@ -5,6 +5,7 @@ import { mermaidRender } from "./render/mermaidRender"; import { flowchartRender } from "./render/flowchartRender"; import { chartRender } from "./render/chartRender"; import { abcRender } from "./render/abcRender"; +import { htmlRender } from "./render/htmlRender"; import { mindmapRender } from "./render/mindmapRender"; import { plantumlRender } from "./render/plantumlRender"; import { avRender } from "./render/av/render"; @@ -31,6 +32,7 @@ class Protyle { /** UML 渲染 */ public static plantumlRender = plantumlRender; public static avRender = avRender; + public static htmlRender = htmlRender; } // 由于 https://github.com/siyuan-note/siyuan/issues/7800，先临时解决一下 diff --git a/app/src/protyle/render/abcRender.ts b/app/src/protyle/render/abcRender.ts index deb317e97..89f114b9e 100644 --- a/app/src/protyle/render/abcRender.ts +++ b/app/src/protyle/render/abcRender.ts @@ -1,5 +1,6 @@ import {addScript} from "../util/addScript"; import {Constants} from "../../constants"; +import {genIconHTML} from "./util"; declare const ABCJS: { renderAbc(element: Element, text: string, options: { responsive: string }): void; @@ -23,7 +24,7 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { return; } if(!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", '
'); + e.insertAdjacentHTML("afterbegin", genIconHTML()); } if (e.childElementCount < 4) { e.lastElementChild.insertAdjacentHTML("beforebegin", `${Constants.ZWSP}`); diff --git a/app/src/protyle/render/blockRender.ts b/app/src/protyle/render/blockRender.ts index e6e51fc6b..cb654df9b 100644 --- a/app/src/protyle/render/blockRender.ts +++ b/app/src/protyle/render/blockRender.ts @@ -25,9 +25,9 @@ export const blockRender = (protyle: IProtyle, element: Element, top?: number) = item.setAttribute("data-render", "true"); item.style.height = (item.clientHeight - 8) + "px"; // 减少抖动 https://ld246.com/article/1668669380171 item.innerHTML = `
- - - + + +
${item.lastElementChild.outerHTML}`; const content = Lute.UnEscapeHTMLStr(item.getAttribute("data-content")); let breadcrumb: boolean | string = item.getAttribute("breadcrumb"); diff --git a/app/src/protyle/render/chartRender.ts b/app/src/protyle/render/chartRender.ts index c556469d0..cf977d9a3 100644 --- a/app/src/protyle/render/chartRender.ts +++ b/app/src/protyle/render/chartRender.ts @@ -2,6 +2,7 @@ import {addScript} from "../util/addScript"; import {Constants} from "../../constants"; import {hasClosestByClassName} from "../util/hasClosest"; import {looseJsonParse} from "../../util/functions"; +import {genIconHTML} from "./util"; export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { let echartsElements: Element[] = []; @@ -34,7 +35,7 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { return; } if (!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", '
'); + e.insertAdjacentHTML("afterbegin", genIconHTML()); } const renderElement = e.firstElementChild.nextElementSibling as HTMLElement; try { diff --git a/app/src/protyle/render/flowchartRender.ts b/app/src/protyle/render/flowchartRender.ts index 9901727b9..f45a73d66 100644 --- a/app/src/protyle/render/flowchartRender.ts +++ b/app/src/protyle/render/flowchartRender.ts @@ -1,6 +1,7 @@ import {addScript} from "../util/addScript"; import {Constants} from "../../constants"; import {hasClosestByAttribute} from "../util/hasClosest"; +import {genIconHTML} from "./util"; declare const flowchart: { parse(text: string): { drawSVG: (type: Element) => void }; @@ -42,7 +43,7 @@ const initFlowchart = (flowchartElements: Element[]) => { // preview 不需要进行设置 if (item.getAttribute("data-node-id")) { if (!item.firstElementChild.classList.contains("protyle-icons")) { - item.insertAdjacentHTML("afterbegin", '
'); + item.insertAdjacentHTML("afterbegin", genIconHTML()); } if (item.childElementCount < 4) { item.lastElementChild.insertAdjacentHTML("beforebegin", `${Constants.ZWSP}`); diff --git a/app/src/protyle/render/graphvizRender.ts b/app/src/protyle/render/graphvizRender.ts index dfd3ced60..c58a0c18c 100644 --- a/app/src/protyle/render/graphvizRender.ts +++ b/app/src/protyle/render/graphvizRender.ts @@ -1,5 +1,6 @@ import {addScript} from "../util/addScript"; import {Constants} from "../../constants"; +import {genIconHTML} from "./util"; declare class Viz { public renderSVGElement: (code: string) => Promise; @@ -24,7 +25,7 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) => return; } if (!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", '
'); + e.insertAdjacentHTML("afterbegin", genIconHTML()); } const renderElement = e.firstElementChild.nextElementSibling as HTMLElement; try { diff --git a/app/src/protyle/render/highlightRender.ts b/app/src/protyle/render/highlightRender.ts index 0f2e78dab..e296e2d00 100644 --- a/app/src/protyle/render/highlightRender.ts +++ b/app/src/protyle/render/highlightRender.ts @@ -34,6 +34,9 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) = addScript(`${cdn}/js/highlight.js/highlight.min.js?v=11.7.0`, "protyleHljsScript").then(() => { addScript(`${cdn}/js/highlight.js/third-languages.js?v=1.0.1`, "protyleHljsThirdScript").then(() => { codeElements.forEach((block: HTMLElement) => { + const iconElements = block.parentElement.querySelectorAll(".protyle-icon"); + iconElements[0].setAttribute("aria-label", window.siyuan.languages.copy); + iconElements[1].setAttribute("aria-label", window.siyuan.languages.more); if (block.getAttribute("data-render") === "true") { return; } diff --git a/app/src/protyle/render/htmlRender.ts b/app/src/protyle/render/htmlRender.ts new file mode 100644 index 000000000..b4b4b3d9e --- /dev/null +++ b/app/src/protyle/render/htmlRender.ts @@ -0,0 +1,18 @@ +export const htmlRender = (element: Element) => { + let htmlElements: Element[] = []; + if (element.getAttribute("data-type") === "NodeHTMLBlock") { + // 编辑器内代码块编辑渲染 + htmlElements = [element]; + } else { + htmlElements = Array.from(element.querySelectorAll('[data-type="NodeHTMLBlock"]')); + } + if (htmlElements.length === 0) { + return; + } + if (htmlElements.length > 0) { + htmlElements.forEach((e: HTMLDivElement) => { + e.firstElementChild.firstElementChild.setAttribute("aria-label", window.siyuan.languages.edit); + e.firstElementChild.lastElementChild.setAttribute("aria-label", window.siyuan.languages.more); + }); + } +}; diff --git a/app/src/protyle/render/mermaidRender.ts b/app/src/protyle/render/mermaidRender.ts index c8ba688cc..6622f2950 100644 --- a/app/src/protyle/render/mermaidRender.ts +++ b/app/src/protyle/render/mermaidRender.ts @@ -66,7 +66,10 @@ const initMermaid = (mermaidElements: Element[]) => { return; } if (!item.firstElementChild.classList.contains("protyle-icons")) { - item.insertAdjacentHTML("afterbegin", '
'); + item.insertAdjacentHTML("afterbegin", `
+ + +
`); } const renderElement = item.firstElementChild.nextElementSibling as HTMLElement; renderElement.removeAttribute("data-processed"); diff --git a/app/src/protyle/render/mindmapRender.ts b/app/src/protyle/render/mindmapRender.ts index 879ed7f3d..cdc04bce9 100644 --- a/app/src/protyle/render/mindmapRender.ts +++ b/app/src/protyle/render/mindmapRender.ts @@ -1,6 +1,7 @@ import {addScript} from "../util/addScript"; import {Constants} from "../../constants"; import {hasClosestByClassName} from "../util/hasClosest"; +import {genIconHTML} from "./util"; export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { let mindmapElements: Element[] = []; @@ -31,7 +32,7 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) => return; } if (!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", '
'); + e.insertAdjacentHTML("afterbegin", genIconHTML()); } const renderElement = e.firstElementChild.nextElementSibling as HTMLElement; try { diff --git a/app/src/protyle/render/plantumlRender.ts b/app/src/protyle/render/plantumlRender.ts index b588db14f..2467237d7 100644 --- a/app/src/protyle/render/plantumlRender.ts +++ b/app/src/protyle/render/plantumlRender.ts @@ -1,5 +1,6 @@ import {addScript} from "../util/addScript"; import {Constants} from "../../constants"; +import {genIconHTML} from "./util"; declare const plantumlEncoder: { encode(options: string): string, @@ -22,7 +23,7 @@ export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) => return; } if (!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", '
'); + e.insertAdjacentHTML("afterbegin", genIconHTML()); } const renderElement = e.firstElementChild.nextElementSibling as HTMLElement; try { diff --git a/app/src/protyle/render/util.ts b/app/src/protyle/render/util.ts new file mode 100644 index 000000000..120d56029 --- /dev/null +++ b/app/src/protyle/render/util.ts @@ -0,0 +1,6 @@ +export const genIconHTML = () => { + return `
+ + +
` +} diff --git a/app/src/protyle/util/processCode.ts b/app/src/protyle/util/processCode.ts index 48c92349b..9590065bb 100644 --- a/app/src/protyle/util/processCode.ts +++ b/app/src/protyle/util/processCode.ts @@ -7,6 +7,7 @@ import {mindmapRender} from "../render/mindmapRender"; import {flowchartRender} from "../render/flowchartRender"; import {plantumlRender} from "../render/plantumlRender"; import {Constants} from "../../constants"; +import {htmlRender} from "../render/htmlRender"; export const processPasteCode = (html: string, text: string) => { const tempElement = document.createElement("div"); @@ -31,7 +32,16 @@ export const processPasteCode = (html: string, text: string) => { if (isCode) { let code = text || html; if (/\n/.test(code)) { - return `
${window.siyuan.storage[Constants.LOCAL_CODELANG]}
${code.replace(/&/g, "&").replace(/
${Constants.ZWSP}
`; + return `
+
+ ${window.siyuan.storage[Constants.LOCAL_CODELANG]} + + + +
+
${code.replace(/&/g, "&").replace(/
+
${Constants.ZWSP}
+
`; } else { // Paste code from IDE no longer escape `<` and `>` https://github.com/siyuan-note/siyuan/issues/8340 code = code.replace("<", "<").replace(">", ">"); @@ -43,8 +53,9 @@ export const processPasteCode = (html: string, text: string) => { export const processRender = (previewPanel: Element) => { const language = previewPanel.getAttribute("data-subtype"); - if (!["abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math"].includes(language)) { + if (!["abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math"].includes(language) || previewPanel.getAttribute("data-type") !== "NodeHTMLBlock") { abcRender(previewPanel); + htmlRender(previewPanel); plantumlRender(previewPanel); mermaidRender(previewPanel); flowchartRender(previewPanel); @@ -70,5 +81,7 @@ export const processRender = (previewPanel: Element) => { graphvizRender(previewPanel); } else if (language === "math") { mathRender(previewPanel); + } else if (previewPanel.getAttribute("data-type") === "NodeHTMLBlock") { + htmlRender(previewPanel); } };