Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-19 13:38:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

📝 fix https://github.com/siyuan-note/siyuan/issues/8785

Browse source
This commit is contained in:
Vanessa 2023-07-19 13:55:42 +08:00
parent 4b873f2091
commit 0cac246415
16 changed files with 70 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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", '<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>');
e.insertAdjacentHTML("afterbegin", genIconHTML());
}
if (e.childElementCount < 4) {
e.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);

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

@ -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 = `<div class="protyle-icons${hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed") ? " fn__none" : ""}">
<span aria-label="${window.siyuan.languages.refresh}" class="b3-tooltips__n b3-tooltips protyle-icon protyle-action__reload protyle-icon--first"><svg class="fn__rotate"><use xlink:href="#iconRefresh"></use></svg></span>
<span aria-label="${window.siyuan.languages.update} SQL" class="b3-tooltips__n b3-tooltips protyle-icon protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__n b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
<span aria-label="${window.siyuan.languages.refresh}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__reload protyle-icon--first"><svg class="fn__rotate"><use xlink:href="#iconRefresh"></use></svg></span>
<span aria-label="${window.siyuan.languages.update} SQL" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
</div>${item.lastElementChild.outerHTML}`;
const content = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
let breadcrumb: boolean | string = item.getAttribute("breadcrumb");

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

@ -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", '<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>');
e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

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

@ -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", '<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>');
item.insertAdjacentHTML("afterbegin", genIconHTML());
}
if (item.childElementCount < 4) {
item.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);

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

@ -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<any>;
@ -24,7 +25,7 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
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>');
e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

3
app/src/protyle/render/highlightRender.ts
View file

@ -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;
}

18
app/src/protyle/render/htmlRender.ts Normal file
View file

@ -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);
});
}
};

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

@ -66,7 +66,10 @@ const initMermaid = (mermaidElements: Element[]) => {
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>');
item.insertAdjacentHTML("afterbegin", `<div class="protyle-icons">
<span aria-label="${window.siyuan.languages.edit}" class="b3-tooltips__sw b3-tooltips protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__sw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
</div>`);
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
renderElement.removeAttribute("data-processed");

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

@ -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", '<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>');
e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

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

@ -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", '<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>');
e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

6
app/src/protyle/render/util.ts Normal file
View file

@ -0,0 +1,6 @@
export const genIconHTML = () => {
return `<div class="protyle-icons">
<span aria-label="${window.siyuan.languages.edit}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
</div>`
}