diff --git a/app/src/constants.ts b/app/src/constants.ts
index e8e4ebcb8..3b2bc981e 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -670,6 +670,9 @@ export abstract class Constants {
public static readonly ALIAS_CODE_LANGUAGES: string[] = [
"js", "ts", "html", "toml", "c#", "bat",
];
+ public static readonly SIYUAN_RENDER_CODE_LANGUAGES: string[] = [
+ "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math"
+ ];
// Google Analytics 事件
public static readonly ANALYTICS_EVT_ON_GET_CONFIG: string = "siyuan.onGetConfig";
diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts
index fa29603a7..166bfa16c 100644
--- a/app/src/protyle/hint/index.ts
+++ b/app/src/protyle/hint/index.ts
@@ -680,7 +680,7 @@ ${genHintItemHTML(item)}
}
let textContent = value;
if (value === "```") {
- textContent = value + window.siyuan.storage[Constants.LOCAL_CODELANG] + Lute.Caret + "\n```";
+ textContent = value + (Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(window.siyuan.storage[Constants.LOCAL_CODELANG]) ? "" : window.siyuan.storage[Constants.LOCAL_CODELANG]) + Lute.Caret + "\n```";
}
const editableElement = getContenteditableElement(nodeElement);
if (value === "![]()") { // https://github.com/siyuan-note/siyuan/issues/4586 1
@@ -763,7 +763,7 @@ ${genHintItemHTML(item)}
action: "update"
}]);
}
- if (value === "
" || value === "$$" || (value.indexOf("```") > -1 && value.length > 3)) {
+ if (value === "
" || value === "$$" || (value.indexOf("```") > -1 && (value.length > 3 || nodeElement.classList.contains("render-node")))) {
protyle.toolbar.showRender(protyle, nodeElement);
processRender(nodeElement);
} else if (value.startsWith("```")) {
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index 7771a57d5..c0d649e47 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -1134,6 +1134,35 @@ export class Toolbar {
});
}
+ private updateLanguage(languageElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, oldHtml: string, selectedLang: string) {
+ languageElement.textContent = selectedLang === window.siyuan.languages.clear ? "" : selectedLang;
+ window.siyuan.storage[Constants.LOCAL_CODELANG] = languageElement.textContent;
+ setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
+ const editElement = getContenteditableElement(nodeElement);
+ if (Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(languageElement.textContent)) {
+ nodeElement.dataset.content = editElement.textContent.trim();
+ nodeElement.dataset.subtype = languageElement.textContent
+ nodeElement.className = "render-node"
+ nodeElement.innerHTML = `
${Constants.ZWSP}
`;
+ processRender(nodeElement);
+ } else {
+ const lineNumber = nodeElement.getAttribute("linenumber");
+ if (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum)) {
+ editElement.classList.add("protyle-linenumber");
+ } else {
+ editElement.classList.remove("protyle-linenumber");
+ }
+ (editElement as HTMLElement).textContent = editElement.textContent;
+ editElement.removeAttribute("data-render");
+ highlightRender(nodeElement);
+ }
+ nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
+ updateTransaction(protyle, id, nodeElement.outerHTML, oldHtml);
+ this.subElement.classList.add("fn__none");
+ focusByRange(this.range);
+ return nodeElement.outerHTML;
+ }
+
public showCodeLanguage(protyle: IProtyle, languageElement: HTMLElement) {
const nodeElement = hasClosestBlock(languageElement);
if (!nodeElement) {
@@ -1167,27 +1196,12 @@ export class Toolbar {
}
upDownHint(listElement, event);
if (event.key === "Enter") {
- const activeText = this.subElement.querySelector(".b3-list-item--focus").textContent;
- languageElement.textContent = activeText === window.siyuan.languages.clear ? "" : activeText;
- window.siyuan.storage[Constants.LOCAL_CODELANG] = languageElement.textContent;
- setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
- const editElement = getContenteditableElement(nodeElement);
- const lineNumber = nodeElement.getAttribute("linenumber");
- if (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum)) {
- editElement.classList.add("protyle-linenumber");
- } else {
- editElement.classList.remove("protyle-linenumber");
- }
- (editElement as HTMLElement).textContent = editElement.textContent;
- editElement.removeAttribute("data-render");
- highlightRender(nodeElement);
- nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
- updateTransaction(protyle, id, nodeElement.outerHTML, oldHtml);
- oldHtml = nodeElement.outerHTML;
+ oldHtml = this.updateLanguage(languageElement, protyle, id, nodeElement, oldHtml, this.subElement.querySelector(".b3-list-item--focus").textContent);
event.preventDefault();
event.stopPropagation();
+ return;
}
- if (event.key === "Escape" || event.key === "Enter") {
+ if (event.key === "Escape") {
this.subElement.classList.add("fn__none");
focusByRange(this.range);
}
@@ -1238,27 +1252,7 @@ export class Toolbar {
if (!listElement) {
return;
}
- languageElement.textContent = listElement.textContent === window.siyuan.languages.clear ? "" : listElement.textContent;
- window.siyuan.storage[Constants.LOCAL_CODELANG] = languageElement.textContent;
- setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
- const nodeElement = hasClosestBlock(languageElement);
- if (nodeElement) {
- const editElement = getContenteditableElement(nodeElement);
- const lineNumber = nodeElement.getAttribute("linenumber");
- if (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum)) {
- editElement.classList.add("protyle-linenumber");
- } else {
- editElement.classList.remove("protyle-linenumber");
- }
- (editElement as HTMLElement).textContent = editElement.textContent;
- editElement.removeAttribute("data-render");
- highlightRender(nodeElement);
- nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
- updateTransaction(protyle, id, nodeElement.outerHTML, oldHtml);
- oldHtml = nodeElement.outerHTML;
- this.subElement.classList.add("fn__none");
- focusByRange(this.range);
- }
+ oldHtml = this.updateLanguage(languageElement, protyle, id, nodeElement, oldHtml, listElement.textContent);
});
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
@@ -1436,7 +1430,7 @@ export class Toolbar {
`;
});
- this.subElement.querySelector(".b3-list--background").innerHTML = html ||`
${window.siyuan.languages.emptyContent}`;
+ this.subElement.querySelector(".b3-list--background").innerHTML = html || `
${window.siyuan.languages.emptyContent}`;
/// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT);
diff --git a/app/src/protyle/util/processCode.ts b/app/src/protyle/util/processCode.ts
index 6ee9134f9..e84b63ba9 100644
--- a/app/src/protyle/util/processCode.ts
+++ b/app/src/protyle/util/processCode.ts
@@ -45,7 +45,7 @@ export const processPasteCode = (html: string, text: string) => {
export const processRender = (previewPanel: Element) => {
const language = previewPanel.getAttribute("data-subtype");
- if (!["abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math"].includes(language) || previewPanel.getAttribute("data-type") !== "NodeHTMLBlock") {
+ if (!Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(language) || previewPanel.getAttribute("data-type") !== "NodeHTMLBlock") {
abcRender(previewPanel);
htmlRender(previewPanel);
plantumlRender(previewPanel);
diff --git a/app/src/protyle/wysiwyg/enter.ts b/app/src/protyle/wysiwyg/enter.ts
index eae5b72cb..636a4cab9 100644
--- a/app/src/protyle/wysiwyg/enter.ts
+++ b/app/src/protyle/wysiwyg/enter.ts
@@ -16,6 +16,7 @@ import {hideElements} from "../ui/hideElements";
import {isIPad, setStorageVal} from "../util/compatibility";
import {mathRender} from "../render/mathRender";
import {isMobile} from "../../util/functions";
+import {processRender} from "../util/processCode";
export const enter = (blockElement: HTMLElement, range: Range, protyle: IProtyle) => {
const disableElement = isNotEditBlock(blockElement);
@@ -82,7 +83,16 @@ export const enter = (blockElement: HTMLElement, range: Range, protyle: IProtyle
window.siyuan.storage[Constants.LOCAL_CODELANG] = languageElement.textContent;
setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
}
- highlightRender(blockElement);
+ if (Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(languageElement.textContent)) {
+ blockElement.dataset.content = ""
+ blockElement.dataset.subtype = languageElement.textContent
+ blockElement.className = "render-node"
+ blockElement.innerHTML = `
${Constants.ZWSP}
`;
+ protyle.toolbar.showRender(protyle, blockElement);
+ processRender(blockElement);
+ } else {
+ highlightRender(blockElement);
+ }
} else {
protyle.toolbar.showRender(protyle, blockElement);
}