diff --git a/app/src/protyle/render/chartRender.ts b/app/src/protyle/render/chartRender.ts index fcc4fd0e3..e23a3b246 100644 --- a/app/src/protyle/render/chartRender.ts +++ b/app/src/protyle/render/chartRender.ts @@ -28,7 +28,7 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { return; } if (!e.firstElementChild.classList.contains("protyle-icons")) { - e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement)); + e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement, ["refresh", "edit", "more"])); } const renderElement = e.firstElementChild.nextElementSibling as HTMLElement; if (!e.getAttribute("data-content")) { @@ -41,8 +41,11 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { } 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(); + if (chartInstance) { + if (chartInstance.getOption().series[0]?.type !== option.series[0]?.type) { + chartInstance.clear(); + } + chartInstance?.resize(); } window.echarts.init(renderElement.lastElementChild, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option); } catch (error) { diff --git a/app/src/protyle/render/util.ts b/app/src/protyle/render/util.ts index 407d22e83..dddccc36e 100644 --- a/app/src/protyle/render/util.ts +++ b/app/src/protyle/render/util.ts @@ -1,7 +1,7 @@ import {isInEmbedBlock} from "../util/hasClosest"; import {Constants} from "../../constants"; -export const genIconHTML = (element?: false | HTMLElement) => { +export const genIconHTML = (element?: false | HTMLElement, actions = ["edit", "more"]) => { let enable = true; if (element) { const readonly = element.getAttribute("data-readonly"); @@ -11,10 +11,18 @@ export const genIconHTML = (element?: false | HTMLElement) => { return '
'; } } - return `
+ if (actions.length === 3) { + return `
+ + + +
`; + } else { + return `
`; + } }; export const genRenderFrame = (renderElement: Element) => { diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 0bbc4baa3..b0c14fc6d 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -100,6 +100,7 @@ import {globalClickHideMenu} from "../../boot/globalEvent/click"; import {hideTooltip} from "../../dialog/tooltip"; import {openGalleryItemMenu} from "../render/av/gallery/util"; import {clearSelect} from "../util/clearSelect"; +import {chartRender} from "../render/chartRender"; export class WYSIWYG { public lastHTMLs: { [key: string]: string } = {}; @@ -2815,6 +2816,12 @@ export class WYSIWYG { if (embedReloadElement) { embedReloadElement.removeAttribute("data-render"); blockRender(protyle, embedReloadElement); + } else { + const blockElement = hasClosestBlock(reloadElement); + if (blockElement && blockElement.getAttribute("data-subtype") === "echarts") { + blockElement.removeAttribute("data-render"); + chartRender(blockElement); + } } event.stopPropagation(); event.preventDefault();