diff --git a/app/src/protyle/render/abcRender.ts b/app/src/protyle/render/abcRender.ts
index 06ef1fce9..efd56a920 100644
--- a/app/src/protyle/render/abcRender.ts
+++ b/app/src/protyle/render/abcRender.ts
@@ -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 = `${Constants.ZWSP}`;
diff --git a/app/src/protyle/render/chartRender.ts b/app/src/protyle/render/chartRender.ts
index e334901a8..83c8e0cb5 100644
--- a/app/src/protyle/render/chartRender.ts
+++ b/app/src/protyle/render/chartRender.ts
@@ -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 = `${Constants.ZWSP}`;
+ return;
+ }
try {
- const chartInstance = window.echarts.getInstanceById(renderElement.getAttribute("_echarts_instance_"));
+ if (!renderElement.lastElementChild || renderElement.childElementCount === 1) {
+ renderElement.innerHTML = `${Constants.ZWSP}`;
+ }
+ 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:
${error}`;
+ window.echarts.dispose(renderElement.lastElementChild);
+ renderElement.innerHTML = `${Constants.ZWSP}echarts render error:
${error}
`;
}
+ e.setAttribute("data-render", "true");
});
});
});
diff --git a/app/src/protyle/render/flowchartRender.ts b/app/src/protyle/render/flowchartRender.ts
index 152a83198..6da8c5614 100644
--- a/app/src/protyle/render/flowchartRender.ts
+++ b/app/src/protyle/render/flowchartRender.ts
@@ -49,8 +49,12 @@ const initFlowchart = (flowchartElements: Element[]) => {
item.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = item.firstElementChild.nextElementSibling;
- renderElement.innerHTML = `${Constants.ZWSP}`;
+ if (!item.getAttribute("data-content")) {
+ renderElement.innerHTML = `${Constants.ZWSP}`;
+ return;
+ }
try {
+ renderElement.innerHTML = `${Constants.ZWSP}`;
flowchart.parse(Lute.UnEscapeHTMLStr(item.getAttribute("data-content"))).drawSVG(renderElement.lastElementChild);
} catch (error) {
renderElement.innerHTML = `${Constants.ZWSP}Flow Chart render error:
${error}
`;
diff --git a/app/src/protyle/render/graphvizRender.ts b/app/src/protyle/render/graphvizRender.ts
index 9461c87aa..4097730d3 100644
--- a/app/src/protyle/render/graphvizRender.ts
+++ b/app/src/protyle/render/graphvizRender.ts
@@ -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 = `${Constants.ZWSP}`;
+ return;
+ }
try {
Viz.instance().then((viz) => {
const svgElement = viz.renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")));
diff --git a/app/src/protyle/render/mermaidRender.ts b/app/src/protyle/render/mermaidRender.ts
index 4835f8e19..627fc3b42 100644
--- a/app/src/protyle/render/mermaidRender.ts
+++ b/app/src/protyle/render/mermaidRender.ts
@@ -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 = `${Constants.ZWSP}`;
+ return;
+ }
const id = "mermaid" + Lute.NewNodeID();
- renderElement.innerHTML = `${Constants.ZWSP}
`;
try {
+ renderElement.innerHTML = `${Constants.ZWSP}
`;
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}${e.message.replace(/\n/, "
")}
`;
errorElement.parentElement.remove();
}
-
item.setAttribute("data-render", "true");
});
};
diff --git a/app/src/protyle/render/mindmapRender.ts b/app/src/protyle/render/mindmapRender.ts
index ada453bbf..242aab679 100644
--- a/app/src/protyle/render/mindmapRender.ts
+++ b/app/src/protyle/render/mindmapRender.ts
@@ -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 = `${Constants.ZWSP}`;
+ 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 = `${Constants.ZWSP}`;
+ }
+ 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:
${error}`;
+ window.echarts.dispose(renderElement.lastElementChild);
+ renderElement.innerHTML = `${Constants.ZWSP}Mindmap render error:
${error}
`;
}
+ e.setAttribute("data-render", "true");
});
});
};
diff --git a/app/src/protyle/render/plantumlRender.ts b/app/src/protyle/render/plantumlRender.ts
index ae9ef97c4..4458e832b 100644
--- a/app/src/protyle/render/plantumlRender.ts
+++ b/app/src/protyle/render/plantumlRender.ts
@@ -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 = `${Constants.ZWSP}`;
+ return;
+ }
try {
- renderElement.innerHTML = ``;
+ const url = `${window.siyuan.config.editor.plantUMLServePath}${window.plantumlEncoder.encode(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")))}`;
+ renderElement.innerHTML = ``;
renderElement.classList.remove("ft__error");
- e.setAttribute("data-render", "true");
+ renderElement.firstElementChild.addEventListener("error", () => {
+ renderElement.innerHTML = `![](${url}")
`;
+ });
} catch (error) {
renderElement.classList.add("ft__error");
renderElement.innerHTML = `plantuml render error:
${error}`;
}
+ e.setAttribute("data-render", "true");
});
});
};
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index a556ef1aa..ff560f628 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -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;