Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-27 17:34:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor code language and ts types (#9300)

Browse source 
* 🎨 Code block language list adds custom languages

* Update index.d.ts

* 🎨 Improve global variable type definition

* 🎨 Improve global variable type definition

* 🎨 Add constant `EXTRA_CODE_LANGUAGES`
This commit is contained in:
Yingyi / 颖逸 2023-09-28 22:38:49 +08:00 • committed by GitHub
parent 17d2a16a94
commit b2a27bb54c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 86 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/src/protyle/render/abcRender.ts
View file

@ -2,10 +2,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;
};
export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let abcElements: Element[] = [];
if (element.getAttribute("data-subtype") === "abc") {
@ -30,7 +26,7 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
e.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
ABCJS.renderAbc(renderElement, Lute.UnEscapeHTMLStr(e.getAttribute("data-content")), {
window.ABCJS.renderAbc(renderElement, Lute.UnEscapeHTMLStr(e.getAttribute("data-content")), {
responsive: "resize"
});
renderElement.setAttribute("contenteditable", "false");

4
app/src/protyle/render/chartRender.ts
View file

@ -41,14 +41,14 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
try {
renderElement.style.height = e.style.height;
const option = await looseJsonParse(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")));
echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
window.echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
e.setAttribute("data-render", "true");
renderElement.classList.remove("ft__error");
if (!renderElement.textContent.endsWith(Constants.ZWSP)) {
renderElement.firstElementChild.insertAdjacentText("beforeend", Constants.ZWSP);
}
} catch (error) {
echarts.dispose(renderElement);
window.echarts.dispose(renderElement);
renderElement.classList.add("ft__error");
renderElement.innerHTML = `echarts render error: <br>${error}`;
}

8
app/src/protyle/render/graphvizRender.ts
View file

@ -2,12 +2,6 @@ import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {genIconHTML} from "./util";
declare class Viz {
public renderSVGElement: (code: string) => Promise<any>;
constructor(worker: { worker: Worker });
}
export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let graphvizElements: Element[] = [];
if (element.getAttribute("data-subtype") === "graphviz") {
@ -34,7 +28,7 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(blob);
const worker = new Worker(blobUrl);
new Viz({worker})
new window.Viz({worker})
.renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content"))).then((result: HTMLElement) => {
renderElement.innerHTML = result.outerHTML;
renderElement.classList.remove("ft__error");

4
app/src/protyle/render/highlightRender.ts
View file

@ -66,7 +66,7 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
// bazaar readme
language = block.className.replace("language-", "");
}
if (!hljs.getLanguage(language)) {
if (!window.hljs.getLanguage(language)) {
language = "plaintext";
}
block.classList.add("hljs");
@ -110,7 +110,7 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
matchElement.scrollIntoView();
}
}
block.innerHTML = hljs.highlight(
block.innerHTML = window.hljs.highlight(
block.textContent + (block.textContent.endsWith("\n") ? "" : "\n"), // https://github.com/siyuan-note/siyuan/issues/4609
{
language,

12
app/src/protyle/render/mathRender.ts
View file

@ -4,16 +4,6 @@ import {Constants} from "../../constants";
import {hasNextSibling, hasPreviousSibling} from "../wysiwyg/getBlock";
import {hasClosestBlock} from "../util/hasClosest";
declare const katex: {
renderToString(math: string, option: {
displayMode: boolean;
output: string;
macros: IObject;
trust: boolean;
strict: (errorCode:string) => "ignore" | "warn";
}): string;
};
export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWidth = false) => {
let mathElements: Element[] = [];
if (element.getAttribute("data-subtype") === "math") {
@ -44,7 +34,7 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
console.warn("KaTex macros is not JSON", e);
}
try {
renderElement.innerHTML = katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
renderElement.innerHTML = window.katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
displayMode: mathElement.tagName === "DIV",
output: "html",
macros,

9
app/src/protyle/render/mermaidRender.ts
View file

@ -2,11 +2,6 @@ import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {hasClosestByAttribute} from "../util/hasClosest";
declare const mermaid: {
initialize(options: any): void,
init(options: any, element: Element): void
};
export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let mermaidElements: Element[] = [];
if (element.getAttribute("data-subtype") === "mermaid") {
@ -43,7 +38,7 @@ export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
if (window.siyuan.config.appearance.mode === 1) {
config.theme = "dark";
}
mermaid.initialize(config);
window.mermaid.initialize(config);
if (mermaidElements[0].firstElementChild.clientWidth === 0) {
const hideElement = hasClosestByAttribute(mermaidElements[0], "fold", "1");
if (!hideElement) {
@ -75,7 +70,7 @@ const initMermaid = (mermaidElements: Element[]) => {
renderElement.removeAttribute("data-processed");
renderElement.textContent = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
setTimeout(() => {
mermaid.init(undefined, renderElement);
window.mermaid.init(undefined, renderElement);
}, Constants.TIMEOUT_LOAD * index);
item.setAttribute("data-render", "true");
renderElement.setAttribute("contenteditable", "false");

2
app/src/protyle/render/mindmapRender.ts
View file

@ -37,7 +37,7 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
renderElement.style.height = e.style.height;
echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {
window.echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {
width,
}).setOption({
series: [

6
app/src/protyle/render/plantumlRender.ts
View file

@ -2,10 +2,6 @@ import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {genIconHTML} from "./util";
declare const plantumlEncoder: {
encode(options: string): string,
};
export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let plantumlElements: Element[] = [];
if (element.getAttribute("data-subtype") === "plantuml") {
@ -27,7 +23,7 @@ export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {
renderElement.innerHTML = `<img src=${window.siyuan.config.editor.plantUMLServePath}${plantumlEncoder.encode(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")))}">`;
renderElement.innerHTML = `<img src=${window.siyuan.config.editor.plantUMLServePath}${window.plantumlEncoder.encode(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")))}">`;
renderElement.classList.remove("ft__error");
e.setAttribute("data-render", "true");
} catch (error) {