Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-21 15:56:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/15274

Browse source
This commit is contained in:
Vanessa 2025-07-11 19:56:14 +08:00
parent 0e8931ff12
commit 357290d518
8 changed files with 50 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/src/protyle/render/abcRender.ts
View file

@ -37,13 +37,13 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
}
if (abcElements.length > 0) {
addScript(`${cdn}/js/abcjs/abcjs-basic-min.js?v=6.5.0`, "protyleAbcjsScript").then(() => {
const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
const wysiwygElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
abcElements.forEach((e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiwygElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"></div>`;

23
app/src/protyle/render/chartRender.ts
View file

@ -31,24 +31,25 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
if (!e.getAttribute("data-content")) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
return;
}
try {
const chartInstance = window.echarts.getInstanceById(renderElement.getAttribute("_echarts_instance_"));
if (!renderElement.lastElementChild || renderElement.childElementCount === 1) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div style="height:420px" contenteditable="false"></div>`;
}
const chartInstance = window.echarts.getInstanceById(renderElement.lastElementChild?.getAttribute("_echarts_instance_"));
const option = await looseJsonParse(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")));
if (chartInstance && chartInstance.getOption().series[0]?.type !== option.series[0]?.type) {
chartInstance.clear();
}
renderElement.classList.remove("ft__error");
renderElement.style.height = e.style.height;
window.echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
e.setAttribute("data-render", "true");
if (!renderElement.textContent.endsWith(Constants.ZWSP)) {
renderElement.firstElementChild.insertAdjacentText("beforeend", Constants.ZWSP);
}
window.echarts.init(renderElement.lastElementChild, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
} catch (error) {
window.echarts.dispose(renderElement);
renderElement.classList.add("ft__error");
renderElement.innerHTML = `echarts render error: <br>${error}`;
window.echarts.dispose(renderElement.lastElementChild);
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false">echarts render error: <br>${error}</div>`;
}
e.setAttribute("data-render", "true");
});
});
});

6
app/src/protyle/render/flowchartRender.ts
View file

@ -49,8 +49,12 @@ const initFlowchart = (flowchartElements: Element[]) => {
item.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = item.firstElementChild.nextElementSibling;
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false"></div>`;
if (!item.getAttribute("data-content")) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
return;
}
try {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"></div>`;
flowchart.parse(Lute.UnEscapeHTMLStr(item.getAttribute("data-content"))).drawSVG(renderElement.lastElementChild);
} catch (error) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false">Flow Chart render error: <br>${error}</div>`;

4
app/src/protyle/render/graphvizRender.ts
View file

@ -24,6 +24,10 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
if (!e.getAttribute("data-content")) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
return;
}
try {
Viz.instance().then((viz) => {
const svgElement = viz.renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")));

7
app/src/protyle/render/mermaidRender.ts
View file

@ -70,9 +70,13 @@ const initMermaid = (mermaidElements: Element[]) => {
item.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
if (!item.getAttribute("data-content")) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
return;
}
const id = "mermaid" + Lute.NewNodeID();
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"><span id="${id}"></span></div>`;
try {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"><span id="${id}"></span></div>`;
const mermaidData = await window.mermaid.render(id, Lute.UnEscapeHTMLStr(item.getAttribute("data-content")));
renderElement.lastElementChild.innerHTML = mermaidData.svg;
} catch (e) {
@ -80,7 +84,6 @@ const initMermaid = (mermaidElements: Element[]) => {
renderElement.lastElementChild.innerHTML = `${errorElement.outerHTML}<div class="fn__hr"></div><div class="ft__error">${e.message.replace(/\n/, "<br>")}</div>`;
errorElement.parentElement.remove();
}
item.setAttribute("data-render", "true");
});
};

20
app/src/protyle/render/mindmapRender.ts
View file

@ -28,9 +28,15 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
if (!e.getAttribute("data-content")) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
return;
}
try {
renderElement.style.height = e.style.height;
window.echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {
if (!renderElement.lastElementChild || renderElement.childElementCount === 1) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div style="height:420px" contenteditable="false"></div>`;
}
window.echarts.init(renderElement.lastElementChild, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {
width,
}).setOption({
series: [
@ -73,15 +79,11 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
},
backgroundColor: "transparent",
});
e.setAttribute("data-render", "true");
if (!renderElement.textContent.endsWith(Constants.ZWSP)) {
renderElement.firstElementChild.insertAdjacentText("beforeend", Constants.ZWSP);
}
renderElement.classList.remove("ft__error");
} catch (error) {
renderElement.classList.add("ft__error");
renderElement.innerHTML = `Mindmap render error: <br>${error}`;
window.echarts.dispose(renderElement.lastElementChild);
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false">Mindmap render error: <br>${error}</div>`;
}
e.setAttribute("data-render", "true");
});
});
};

12
app/src/protyle/render/plantumlRender.ts
View file

@ -24,14 +24,22 @@ export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
if (!e.getAttribute("data-content")) {
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
return;
}
try {
renderElement.innerHTML = `<object type="image/svg+xml" data="${window.siyuan.config.editor.plantUMLServePath}${window.plantumlEncoder.encode(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")))}"/>`;
const url = `${window.siyuan.config.editor.plantUMLServePath}${window.plantumlEncoder.encode(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")))}`;
renderElement.innerHTML = `<object type="image/svg+xml" data="${url}"/>`;
renderElement.classList.remove("ft__error");
e.setAttribute("data-render", "true");
renderElement.firstElementChild.addEventListener("error", () => {
renderElement.innerHTML = `<img src=${url}">`;
});
} catch (error) {
renderElement.classList.add("ft__error");
renderElement.innerHTML = `plantuml render error: <br>${error}`;
}
e.setAttribute("data-render", "true");
});
});
};

2
app/src/types/index.d.ts vendored
View file

@ -141,7 +141,7 @@ interface CSSStyleDeclarationElectron extends CSSStyleDeclaration {
interface Window {
echarts: {
init(element: HTMLElement, theme?: string, options?: {
init(element: Element, theme?: string, options?: {
width: number
}): {
setOption(option: any): void;