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