`;
} else {
editableElement.textContent = textContent;
newHTML = protyle.lute.SpinBlockDOM(nodeElement.outerHTML);
@@ -693,7 +694,7 @@ ${unicode2Emoji(emoji.unicode)}`;
} else {
let newHTML = protyle.lute.SpinBlockDOM(textContent);
if (value === "
") {
- newHTML = `
`;
+ newHTML = `
`;
}
nodeElement.insertAdjacentHTML("afterend", newHTML);
const oldHTML = nodeElement.outerHTML;
diff --git a/app/src/protyle/method.ts b/app/src/protyle/method.ts
index 899a9d5da..d9dcd8a70 100644
--- a/app/src/protyle/method.ts
+++ b/app/src/protyle/method.ts
@@ -5,6 +5,7 @@ import { mermaidRender } from "./render/mermaidRender";
import { flowchartRender } from "./render/flowchartRender";
import { chartRender } from "./render/chartRender";
import { abcRender } from "./render/abcRender";
+import { htmlRender } from "./render/htmlRender";
import { mindmapRender } from "./render/mindmapRender";
import { plantumlRender } from "./render/plantumlRender";
import { avRender } from "./render/av/render";
@@ -31,6 +32,7 @@ class Protyle {
/** UML 渲染 */
public static plantumlRender = plantumlRender;
public static avRender = avRender;
+ public static htmlRender = htmlRender;
}
// 由于 https://github.com/siyuan-note/siyuan/issues/7800，先临时解决一下
diff --git a/app/src/protyle/render/abcRender.ts b/app/src/protyle/render/abcRender.ts
index deb317e97..89f114b9e 100644
--- a/app/src/protyle/render/abcRender.ts
+++ b/app/src/protyle/render/abcRender.ts
@@ -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", '
');
+ e.insertAdjacentHTML("afterbegin", genIconHTML());
}
if (e.childElementCount < 4) {
e.lastElementChild.insertAdjacentHTML("beforebegin", `
${Constants.ZWSP}`);
diff --git a/app/src/protyle/render/blockRender.ts b/app/src/protyle/render/blockRender.ts
index e6e51fc6b..cb654df9b 100644
--- a/app/src/protyle/render/blockRender.ts
+++ b/app/src/protyle/render/blockRender.ts
@@ -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 = `
-
-
-
+
+
+
${item.lastElementChild.outerHTML}`;
const content = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
let breadcrumb: boolean | string = item.getAttribute("breadcrumb");
diff --git a/app/src/protyle/render/chartRender.ts b/app/src/protyle/render/chartRender.ts
index c556469d0..cf977d9a3 100644
--- a/app/src/protyle/render/chartRender.ts
+++ b/app/src/protyle/render/chartRender.ts
@@ -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", '
');
+ e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
diff --git a/app/src/protyle/render/flowchartRender.ts b/app/src/protyle/render/flowchartRender.ts
index 9901727b9..f45a73d66 100644
--- a/app/src/protyle/render/flowchartRender.ts
+++ b/app/src/protyle/render/flowchartRender.ts
@@ -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", '
');
+ item.insertAdjacentHTML("afterbegin", genIconHTML());
}
if (item.childElementCount < 4) {
item.lastElementChild.insertAdjacentHTML("beforebegin", `
${Constants.ZWSP}`);
diff --git a/app/src/protyle/render/graphvizRender.ts b/app/src/protyle/render/graphvizRender.ts
index dfd3ced60..c58a0c18c 100644
--- a/app/src/protyle/render/graphvizRender.ts
+++ b/app/src/protyle/render/graphvizRender.ts
@@ -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
;
@@ -24,7 +25,7 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
- e.insertAdjacentHTML("afterbegin", '
');
+ e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
diff --git a/app/src/protyle/render/highlightRender.ts b/app/src/protyle/render/highlightRender.ts
index 0f2e78dab..e296e2d00 100644
--- a/app/src/protyle/render/highlightRender.ts
+++ b/app/src/protyle/render/highlightRender.ts
@@ -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;
}
diff --git a/app/src/protyle/render/htmlRender.ts b/app/src/protyle/render/htmlRender.ts
new file mode 100644
index 000000000..b4b4b3d9e
--- /dev/null
+++ b/app/src/protyle/render/htmlRender.ts
@@ -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);
+ });
+ }
+};
diff --git a/app/src/protyle/render/mermaidRender.ts b/app/src/protyle/render/mermaidRender.ts
index c8ba688cc..6622f2950 100644
--- a/app/src/protyle/render/mermaidRender.ts
+++ b/app/src/protyle/render/mermaidRender.ts
@@ -66,7 +66,10 @@ const initMermaid = (mermaidElements: Element[]) => {
return;
}
if (!item.firstElementChild.classList.contains("protyle-icons")) {
- item.insertAdjacentHTML("afterbegin", '
');
+ item.insertAdjacentHTML("afterbegin", `
+
+
+
`);
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
renderElement.removeAttribute("data-processed");
diff --git a/app/src/protyle/render/mindmapRender.ts b/app/src/protyle/render/mindmapRender.ts
index 879ed7f3d..cdc04bce9 100644
--- a/app/src/protyle/render/mindmapRender.ts
+++ b/app/src/protyle/render/mindmapRender.ts
@@ -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", '
');
+ e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
diff --git a/app/src/protyle/render/plantumlRender.ts b/app/src/protyle/render/plantumlRender.ts
index b588db14f..2467237d7 100644
--- a/app/src/protyle/render/plantumlRender.ts
+++ b/app/src/protyle/render/plantumlRender.ts
@@ -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", '
');
+ e.insertAdjacentHTML("afterbegin", genIconHTML());
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
diff --git a/app/src/protyle/render/util.ts b/app/src/protyle/render/util.ts
new file mode 100644
index 000000000..120d56029
--- /dev/null
+++ b/app/src/protyle/render/util.ts
@@ -0,0 +1,6 @@
+export const genIconHTML = () => {
+ return `
+
+
+
`
+}
diff --git a/app/src/protyle/util/processCode.ts b/app/src/protyle/util/processCode.ts
index 48c92349b..9590065bb 100644
--- a/app/src/protyle/util/processCode.ts
+++ b/app/src/protyle/util/processCode.ts
@@ -7,6 +7,7 @@ import {mindmapRender} from "../render/mindmapRender";
import {flowchartRender} from "../render/flowchartRender";
import {plantumlRender} from "../render/plantumlRender";
import {Constants} from "../../constants";
+import {htmlRender} from "../render/htmlRender";
export const processPasteCode = (html: string, text: string) => {
const tempElement = document.createElement("div");
@@ -31,7 +32,16 @@ export const processPasteCode = (html: string, text: string) => {
if (isCode) {
let code = text || html;
if (/\n/.test(code)) {
- return `${window.siyuan.storage[Constants.LOCAL_CODELANG]}
${code.replace(/&/g, "&").replace(/
${Constants.ZWSP}
+
+ ${window.siyuan.storage[Constants.LOCAL_CODELANG]}
+
+
+
+
+
${code.replace(/&/g, "&").replace(/
+
${Constants.ZWSP}
+