0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🐛 fix https://github.com/siyuan-note/siyuan/issues/5675 2

Browse source
This commit is contained in:
Vanessa 2022-08-19 14:39:19 +08:00
parent fa22ce9015
commit ceee12f10c
12 changed files with 69 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/protyle/hint/index.ts
View file

@ -30,6 +30,7 @@ import {openFileById} from "../../editor/util";
/// #endif
import {openMobileFileById} from "../../mobile/editor";
import {getIconByType} from "../../editor/getIcon";
import {processRender} from "../util/processCode";
export class Hint {
public timeId: number;
@ -596,6 +597,7 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
}
if (value === "<div>" || value === "$$" || (value.indexOf("```") > -1 && value.length > 3)) {
protyle.toolbar.showRender(protyle, nodeElement);
processRender(nodeElement);
} else if (value.startsWith("```")) {
highlightRender(nodeElement);
} else if (value.startsWith("<iframe") || value.startsWith("<video") || value.startsWith("<audio")) {

10
app/src/protyle/markdown/abcRender.ts
View file

@ -19,17 +19,21 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
if (abcElements.length > 0) {
addScript(`${cdn}/js/abcjs/abcjs-basic-min.js?v=0.0.0`, "protyleAbcjsScript").then(() => {
abcElements.forEach((e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if(!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", '<div class="protyle-icons"><span class="protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span></div>');
}
if (e.childElementCount < 4) {
e.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
ABCJS.renderAbc(renderElement, Lute.UnEscapeHTMLStr(e.getAttribute("data-content")), {
responsive: "resize"
});
renderElement.setAttribute("contenteditable", "false");
if (!e.textContent.endsWith(Constants.ZWSP)) {
e.insertAdjacentHTML("beforeend", `<span style="position: absolute">${Constants.ZWSP}</span>`);
}
e.setAttribute("data-render", "true");
});
});
}

5
app/src/protyle/markdown/chartRender.ts
View file

@ -29,8 +29,7 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
}
}
echartsElements.forEach((e: HTMLDivElement) => {
const text = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
if (!text || e.getAttribute("data-render") === "true") {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
@ -39,7 +38,7 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
renderElement.style.height = e.style.height;
const option = JSON.parse(text);
const option = JSON.parse(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")));
echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
e.setAttribute("data-render", "true");
renderElement.classList.remove("ft__error");

17
app/src/protyle/markdown/flowchartRender.ts
View file

@ -36,16 +36,25 @@ export const flowchartRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
const initFlowchart = (flowchartElements:Element[]) => {
flowchartElements.forEach((item: HTMLElement) => {
if (item.getAttribute("data-render") === "true") {
return;
}
if (!item.firstElementChild.classList.contains("protyle-icons")) {
item.insertAdjacentHTML("afterbegin", '<div class="protyle-icons"><span class="protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span></div>');
}
if (item.childElementCount < 4) {
item.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
const flowchartObj = flowchart.parse(Lute.UnEscapeHTMLStr(item.getAttribute("data-content")));
renderElement.innerHTML = "";
flowchartObj.drawSVG(renderElement);
renderElement.setAttribute("contenteditable", "false");
if (!item.textContent.endsWith(Constants.ZWSP)) {
item.insertAdjacentHTML("beforeend", `<span style="position: absolute">${Constants.ZWSP}</span>`);
try {
flowchartObj.drawSVG(renderElement);
} catch (error) {
renderElement.classList.add("ft__error");
renderElement.innerHTML = `Flow Chart render error: <br>${error}`;
}
renderElement.setAttribute("contenteditable", "false");
item.setAttribute("data-render", "true");
});
};

9
app/src/protyle/markdown/graphvizRender.ts
View file

@ -20,15 +20,13 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
}
addScript(`${cdn}/js/graphviz/viz.js?v=0.0.0`, "protyleGraphVizScript").then(() => {
graphvizElements.forEach((e: HTMLDivElement) => {
const text = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
if (e.getAttribute("data-render") === "true" || text === "") {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", '<div class="protyle-icons"><span class="protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span></div>');
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
const blob = new Blob([`importScripts('${(document.getElementById("protyleGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
{type: "application/javascript"});
@ -36,7 +34,7 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
const blobUrl = url.createObjectURL(blob);
const worker = new Worker(blobUrl);
new Viz({worker})
.renderSVGElement(text).then((result: HTMLElement) => {
.renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content"))).then((result: HTMLElement) => {
renderElement.innerHTML = result.outerHTML;
renderElement.classList.remove("ft__error");
renderElement.setAttribute("contenteditable", "false");
@ -48,9 +46,8 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
renderElement.classList.add("ft__error");
});
} catch (e) {
console.error("graphviz error", e);
console.error("Graphviz error", e);
}
e.setAttribute("data-render", "true");
});
});

3
app/src/protyle/markdown/mathRender.ts
View file

@ -29,14 +29,13 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
if (mathElement.getAttribute("data-render") === "true") {
return;
}
const math = Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content"));
mathElement.setAttribute("data-render", "true");
let renderElement = mathElement;
if (mathElement.tagName === "DIV") {
renderElement = mathElement.firstElementChild as HTMLElement;
}
try {
renderElement.innerHTML = katex.renderToString(math, {
renderElement.innerHTML = katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
displayMode: mathElement.tagName === "DIV",
output: "html",
});

9
app/src/protyle/markdown/mermaidRender.ts
View file

@ -139,16 +139,15 @@ export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
const initMermaid = (mermaidElements: Element[]) => {
mermaidElements.forEach((item) => {
if (item.getAttribute("data-render") === "true") {
return;
}
if (!item.firstElementChild.classList.contains("protyle-icons")) {
item.insertAdjacentHTML("afterbegin", '<div class="protyle-icons"><span class="protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span></div>');
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
const text = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
if (item.getAttribute("data-render") === "true" || text.trim() === "") {
return;
}
renderElement.removeAttribute("data-processed");
renderElement.textContent = text;
renderElement.textContent = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
mermaid.init(undefined, renderElement);
item.setAttribute("data-render", "true");
renderElement.setAttribute("contenteditable", "false");

7
app/src/protyle/markdown/mindmapRender.ts
View file

@ -27,8 +27,7 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
}
}
mindmapElements.forEach((e: HTMLDivElement) => {
const text = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
if (!text || e.getAttribute("data-render") === "true") {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
@ -42,7 +41,7 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
}).setOption({
series: [
{
data: [JSON.parse(Lute.EChartsMindmapStr(text))],
data: [JSON.parse(Lute.EChartsMindmapStr(Lute.UnEscapeHTMLStr(e.getAttribute("data-content"))))],
initialTreeDepth: -1,
itemStyle: {
borderWidth: 0,
@ -87,7 +86,7 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
renderElement.classList.remove("ft__error");
} catch (error) {
renderElement.classList.add("ft__error");
renderElement.innerHTML = `mindmap render error: <br>${error}`;
renderElement.innerHTML = `Mindmap render error: <br>${error}`;
}
});
});

6
app/src/protyle/markdown/plantumlRender.ts
View file

@ -18,8 +18,7 @@ export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
}
addScript(`${cdn}/js/plantuml/plantuml-encoder.min.js?v=0.0.0`, "protylePlantumlScript").then(() => {
plantumlElements.forEach((e: HTMLDivElement) => {
const text = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
if (!text) {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
@ -27,8 +26,9 @@ export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
renderElement.innerHTML = `<img src=${window.siyuan.config.editor.plantUMLServePath}${plantumlEncoder.encode(text)}">`;
renderElement.innerHTML = `<img src=${window.siyuan.config.editor.plantUMLServePath}${plantumlEncoder.encode(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")))}">`;
renderElement.classList.remove("ft__error");
e.setAttribute("data-render", "true");
} catch (error) {
renderElement.classList.add("ft__error");
renderElement.innerHTML = `plantuml render error: <br>${error}`;

23
app/src/protyle/toolbar/index.ts
View file

@ -701,10 +701,21 @@ export class Toolbar {
setPosition(this.subElement, nodeRect.right, nodeRect.bottom);
}
};
this.subElement.querySelector(".block__icons").addEventListener("click", (event: MouseEvent) => {
const headerElement = this.subElement.querySelector(".block__icons")
headerElement.addEventListener("click", (event: MouseEvent) => {
const target = event.target as HTMLElement;
const btnElement = hasClosestByClassName(target, "b3-tooltips");
if (!btnElement) {
if (event.detail === 2) {
const pingElement = headerElement.querySelector('[data-type="pin"]');
if (pingElement.classList.contains("block__icon--active")) {
pingElement.classList.remove("block__icon--active");
pingElement.setAttribute("aria-label", window.siyuan.languages.pin);
} else {
pingElement.classList.add("block__icon--active");
pingElement.setAttribute("aria-label", window.siyuan.languages.unpin);
}
}
return;
}
event.stopPropagation();
@ -714,7 +725,13 @@ export class Toolbar {
this.subElement.querySelector('[data-type="pin"]').classList.remove("block__icon--active");
break;
case "pin":
btnElement.classList.toggle("block__icon--active");
if (btnElement.classList.contains("block__icon--active")) {
btnElement.classList.remove("block__icon--active");
btnElement.setAttribute("aria-label", window.siyuan.languages.pin);
} else {
btnElement.classList.add("block__icon--active");
btnElement.setAttribute("aria-label", window.siyuan.languages.unpin);
}
break;
case "refresh":
btnElement.classList.toggle("block__icon--active");
@ -745,7 +762,7 @@ export class Toolbar {
break;
}
});
this.subElement.querySelector(".block__icons").addEventListener("mousedown", (event: MouseEvent) => {
headerElement.addEventListener("mousedown", (event: MouseEvent) => {
if (hasClosestByClassName(event.target as HTMLElement, "block__icon")) {
return;
}

10
app/src/protyle/util/selection.ts
View file

@ -1,4 +1,10 @@
import {getContenteditableElement, getNextBlock, getPreviousBlock, hasPreviousSibling} from "../wysiwyg/getBlock";
import {
getContenteditableElement,
getNextBlock,
getPreviousBlock,
hasPreviousSibling,
isNotEditBlock
} from "../wysiwyg/getBlock";
import {hasClosestByMatchTag} from "./hasClosest";
import {countBlockWord, countSelectWord} from "../../layout/status";
@ -288,6 +294,8 @@ export const focusByOffset = (container: Element, start: number, end: number) =>
const editElement = getContenteditableElement(container);
if (editElement) {
container = editElement;
} else if (isNotEditBlock(container)) {
return focusBlock(container);
}
let startNode;
searchNode(container, container.firstChild, node => {

4
app/src/protyle/wysiwyg/remove.ts
View file

@ -406,8 +406,8 @@ export const removeBlock = (protyle: IProtyle, blockElement: Element, range: Ran
}
return;
}
focusBlock(previousLastElement, undefined, false);
if (editableElement.textContent !== "") {
focusBlock(previousLastElement, undefined, false);
return;
}
}
@ -435,7 +435,7 @@ export const removeBlock = (protyle: IProtyle, blockElement: Element, range: Ran
if (isSelectNode) {
// 需先移除 removeElement，否则 side 会选中 removeElement
removeElement.remove();
focusSideBlock(previousElement);
focusBlock(previousLastElement, undefined, false);
} else {
const previousLastEditElement = getContenteditableElement(previousLastElement);
if (editableElement && editableElement.textContent !== "") {