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

🎨 https://github.com/siyuan-note/siyuan/issues/10644

Browse source
This commit is contained in:
Vanessa 2024-03-18 18:19:42 +08:00
parent 21b64d3710
commit 41e2a72c74
5 changed files with 51 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/src/constants.ts
View file

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

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

@ -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 === "<div>" || value === "$$" || (value.indexOf("```") > -1 && value.length > 3)) {
if (value === "<div>" || value === "$$" || (value.indexOf("```") > -1 && (value.length > 3 || nodeElement.classList.contains("render-node")))) {
protyle.toolbar.showRender(protyle, nodeElement);
processRender(nodeElement);
} else if (value.startsWith("```")) {

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

@ -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 = `<div spin="1"></div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div>`;
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 {
<svg><use xlink:href="#iconTrashcan"></use></svg>
</span></div>`;
});
this.subElement.querySelector(".b3-list--background").innerHTML = html ||`<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
this.subElement.querySelector(".b3-list--background").innerHTML = html || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
/// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT);

2
app/src/protyle/util/processCode.ts
View file

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

12
app/src/protyle/wysiwyg/enter.ts
View file

@ -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 = `<div spin="1"></div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div>`;
protyle.toolbar.showRender(protyle, blockElement);
processRender(blockElement);
} else {
highlightRender(blockElement);
}
} else {
protyle.toolbar.showRender(protyle, blockElement);
}