Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 01:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 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
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[] = [ public static readonly ALIAS_CODE_LANGUAGES: string[] = [
"js", "ts", "html", "toml", "c#", "bat", "js", "ts", "html", "toml", "c#", "bat",
]; ];
public static readonly SIYUAN_RENDER_CODE_LANGUAGES: string[] = [
"abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math"
];
// Google Analytics 事件 // Google Analytics 事件
public static readonly ANALYTICS_EVT_ON_GET_CONFIG: string = "siyuan.onGetConfig"; 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; let textContent = value;
if (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); const editableElement = getContenteditableElement(nodeElement);
if (value === "![]()") { // https://github.com/siyuan-note/siyuan/issues/4586 1 if (value === "![]()") { // https://github.com/siyuan-note/siyuan/issues/4586 1
@ -763,7 +763,7 @@ ${genHintItemHTML(item)}
action: "update" 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); protyle.toolbar.showRender(protyle, nodeElement);
processRender(nodeElement); processRender(nodeElement);
} else if (value.startsWith("```")) { } 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) { public showCodeLanguage(protyle: IProtyle, languageElement: HTMLElement) {
const nodeElement = hasClosestBlock(languageElement); const nodeElement = hasClosestBlock(languageElement);
if (!nodeElement) { if (!nodeElement) {
@ -1167,27 +1196,12 @@ export class Toolbar {
} }
upDownHint(listElement, event); upDownHint(listElement, event);
if (event.key === "Enter") { if (event.key === "Enter") {
const activeText = this.subElement.querySelector(".b3-list-item--focus").textContent; oldHtml = this.updateLanguage(languageElement, protyle, id, nodeElement, oldHtml, 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;
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return;
} }
if (event.key === "Escape" || event.key === "Enter") { if (event.key === "Escape") {
this.subElement.classList.add("fn__none"); this.subElement.classList.add("fn__none");
focusByRange(this.range); focusByRange(this.range);
} }
@ -1238,27 +1252,7 @@ export class Toolbar {
if (!listElement) { if (!listElement) {
return; return;
} }
languageElement.textContent = listElement.textContent === window.siyuan.languages.clear ? "" : listElement.textContent; oldHtml = this.updateLanguage(languageElement, protyle, id, nodeElement, oldHtml, 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);
}
}); });
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString(); this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none"); this.subElement.classList.remove("fn__none");
@ -1436,7 +1430,7 @@ export class Toolbar {
<svg><use xlink:href="#iconTrashcan"></use></svg> <svg><use xlink:href="#iconTrashcan"></use></svg>
</span></div>`; </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 /// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range); const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT); 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) => { export const processRender = (previewPanel: Element) => {
const language = previewPanel.getAttribute("data-subtype"); 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); abcRender(previewPanel);
htmlRender(previewPanel); htmlRender(previewPanel);
plantumlRender(previewPanel); plantumlRender(previewPanel);

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

@ -16,6 +16,7 @@ import {hideElements} from "../ui/hideElements";
import {isIPad, setStorageVal} from "../util/compatibility"; import {isIPad, setStorageVal} from "../util/compatibility";
import {mathRender} from "../render/mathRender"; import {mathRender} from "../render/mathRender";
import {isMobile} from "../../util/functions"; import {isMobile} from "../../util/functions";
import {processRender} from "../util/processCode";
export const enter = (blockElement: HTMLElement, range: Range, protyle: IProtyle) => { export const enter = (blockElement: HTMLElement, range: Range, protyle: IProtyle) => {
const disableElement = isNotEditBlock(blockElement); 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; window.siyuan.storage[Constants.LOCAL_CODELANG] = languageElement.textContent;
setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]); setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
} }
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); highlightRender(blockElement);
}
} else { } else {
protyle.toolbar.showRender(protyle, blockElement); protyle.toolbar.showRender(protyle, blockElement);
} }