Skip to content

Commit

Permalink
✨ feat(ts): 新增适配模块 (Vanessa219#1009)
Browse files Browse the repository at this point in the history 
Co-authored-by: V <lly219@gmail.com>
  • Loading branch information
@2234839 @Vanessa219 @izgzhen
2 people authored and izgzhen committed Dec 11, 2021
1 parent 886d60b commit 0ddaad1
Show file tree
Hide file tree
Showing 10 changed files with 71 additions and 27 deletions.
1 change: 1 addition & 0 deletions src/index.ts
View file
@@ -1,5 +1,6 @@
import "./assets/scss/index.scss";
import VditorMethod from "./method";
import * as adapter from "./ts/adapter";
import {Constants, VDITOR_VERSION} from "./ts/constants";
import {DevTools} from "./ts/devtools/index";
import {Hint} from "./ts/hint/index";
Expand Down
33 changes: 33 additions & 0 deletions src/ts/adapter.ts
View file
@@ -0,0 +1,33 @@
export const mathRenderAdapter = {
getCode: (mathElement: Element) => mathElement.textContent,
getMathElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
};
export const mermaidRenderAdapter = {
/** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
getCode: (el: Element) => el.textContent,
getMathElements: (element: HTMLElement) => element.querySelectorAll(".language-mermaid"),
};
export const mindmapRenderAdapter = {
getCode: (el: Element) => el.getAttribute("data-code"),
getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-mindmap"),
};
export const chartRenderAdapter = {
getCode: (el: Element) => el.innerHTML,
getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-echarts"),
};
export const abcRenderAdapter = {
getCode: (el: Element) => el.textContent,
getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-abc"),
};
export const graphvizRenderAdapter = {
getCode: (el: Element) => el.textContent,
getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
};
export const flowchartRenderAdapter = {
getCode: (el: Element) => el.textContent,
getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),
};
export const plantumlRenderAdapter = {
getCode: (el: Element) => el.textContent,
getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-plantuml"),
};
5 changes: 3 additions & 2 deletions src/ts/markdown/abcRender.ts
View file
@@ -1,3 +1,4 @@
import {abcRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

Expand All @@ -6,7 +7,7 @@ declare const ABCJS: {
};

export const abcRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
const abcElements = element.querySelectorAll(".language-abc");
const abcElements = abcRenderAdapter.getMathElements(element);
if (abcElements.length > 0) {
addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
abcElements.forEach((item: HTMLDivElement) => {
Expand All @@ -17,7 +18,7 @@ export const abcRender = (element: (HTMLElement | Document) = document, cdn = Co
if (item.getAttribute("data-processed") === "true") {
return;
}
ABCJS.renderAbc(item, item.textContent.trim());
ABCJS.renderAbc(item, abcRenderAdapter.getCode(item).trim());
item.style.overflowX = "auto";
item.setAttribute("data-processed", "true");
});
Expand Down
5 changes: 3 additions & 2 deletions src/ts/markdown/chartRender.ts
View file
@@ -1,3 +1,4 @@
import {chartRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

Expand All @@ -6,7 +7,7 @@ declare const echarts: {
};

export const chartRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
const echartsElements = element.querySelectorAll(".language-echarts");
const echartsElements = chartRenderAdapter.getMathElements(element);
if (echartsElements.length > 0) {
addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
echartsElements.forEach((e: HTMLDivElement) => {
Expand All @@ -15,7 +16,7 @@ export const chartRender = (element: (HTMLElement | Document) = document, cdn =
return;
}

const text = e.innerText.trim();
const text = chartRenderAdapter.getCode(e).trim();
if (!text) {
return;
}
Expand Down
5 changes: 3 additions & 2 deletions src/ts/markdown/flowchartRender.ts
View file
@@ -1,3 +1,4 @@
import {flowchartRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

Expand All @@ -6,7 +7,7 @@ declare const flowchart: {
};

export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
const flowchartElements = element.querySelectorAll(".language-flowchart");
const flowchartElements = flowchartRenderAdapter.getMathElements(element);
if (flowchartElements.length === 0) {
return;
}
Expand All @@ -15,7 +16,7 @@ export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
if (item.getAttribute("data-processed") === "true") {
return;
}
const flowchartObj = flowchart.parse(item.textContent);
const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
item.innerHTML = "";
flowchartObj.drawSVG(item);
item.setAttribute("data-processed", "true");
Expand Down
24 changes: 13 additions & 11 deletions src/ts/markdown/graphvizRender.ts
View file
@@ -1,42 +1,44 @@
import {graphvizRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

declare class Viz {
public renderSVGElement: (code: string) => Promise<any>;

constructor({}: { worker: Worker });
constructor({ }: { worker: Worker });
}

export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
const graphvizElements = element.querySelectorAll(".language-graphviz");
const graphvizElements = graphvizRenderAdapter.getMathElements(element);

if (graphvizElements.length === 0) {
return;
}
addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
graphvizElements.forEach((e: HTMLDivElement) => {
const code = graphvizRenderAdapter.getCode(e);
if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
e.parentElement.classList.contains("vditor-ir__marker--pre")) {
return;
}

if (e.getAttribute("data-processed") === "true" || e.textContent.trim() === "") {
if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
return;
}

try {
const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
{type: "application/javascript"});
{ type: "application/javascript" });
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(blob);
const worker = new Worker(blobUrl);
new Viz({worker})
.renderSVGElement(e.textContent).then((result: HTMLElement) => {
e.innerHTML = result.outerHTML;
}).catch((error) => {
e.innerHTML = `graphviz render error: <br>${error}`;
e.className = "vditor-reset--error";
});
new Viz({ worker })
.renderSVGElement(code).then((result: HTMLElement) => {
e.innerHTML = result.outerHTML;
}).catch((error) => {
e.innerHTML = `graphviz render error: <br>${error}`;
e.className = "vditor-reset--error";
});
} catch (e) {
console.error("graphviz error", e);
}
Expand Down
9 changes: 5 additions & 4 deletions src/ts/markdown/mathRender.ts
View file
@@ -1,3 +1,4 @@
import {mathRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript, addScriptSync} from "../util/addScript";
import {addStyle} from "../util/addStyle";
Expand All @@ -17,7 +18,7 @@ declare global {
}

export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
const mathElements = element.querySelectorAll(".language-math");
const mathElements = mathRenderAdapter.getMathElements(element);

if (mathElements.length === 0) {
return;
Expand Down Expand Up @@ -49,7 +50,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
if (mathElement.getAttribute("data-math")) {
return;
}
const math = code160to32(mathElement.textContent);
const math = code160to32(mathRenderAdapter.getCode(mathElement));
mathElement.setAttribute("data-math", math);
try {
mathElement.innerHTML = katex.renderToString(math, {
Expand Down Expand Up @@ -87,7 +88,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
if (!window.MathJax) {
window.MathJax = {
loader: {
paths: {mathjax: `${options.cdn}/dist/js/mathjax`},
paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
},
startup: {
typeset: false,
Expand Down Expand Up @@ -120,7 +121,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
});
};
window.MathJax.startup.promise.then(() => {
const chains: any [] = [];
const chains: any[] = [];
for (let i = 0; i < mathElements.length; i++) {
const mathElement = mathElements[i];
if (!mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") &&
Expand Down
6 changes: 4 additions & 2 deletions src/ts/markdown/mermaidRender.ts
View file
@@ -1,3 +1,4 @@
import {mermaidRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

Expand All @@ -7,7 +8,7 @@ declare const mermaid: {
};

export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
const mermaidElements = element.querySelectorAll(".language-mermaid");
const mermaidElements = mermaidRenderAdapter.getMathElements(element);
if (mermaidElements.length === 0) {
return;
}
Expand Down Expand Up @@ -115,7 +116,8 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
}
mermaid.initialize(config);
mermaidElements.forEach((item) => {
if (item.getAttribute("data-processed") === "true" || item.textContent.trim() === "") {
const code = mermaidRenderAdapter.getCode(item);
if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
return;
}
mermaid.init(undefined, item);
Expand Down
5 changes: 3 additions & 2 deletions src/ts/markdown/mindmapRender.ts
View file
@@ -1,3 +1,4 @@
import {mindmapRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

Expand All @@ -6,15 +7,15 @@ declare const echarts: {
};

export const mindmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
const mindmapElements = element.querySelectorAll(".language-mindmap");
const mindmapElements = mindmapRenderAdapter.getMathElements(element);
if (mindmapElements.length > 0) {
addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
mindmapElements.forEach((e: HTMLDivElement) => {
if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
e.parentElement.classList.contains("vditor-ir__marker--pre")) {
return;
}
const text = e.getAttribute("data-code");
const text = mindmapRenderAdapter.getCode(e);
if (!text) {
return;
}
Expand Down
5 changes: 3 additions & 2 deletions src/ts/markdown/plantumlRender.ts
View file
@@ -1,3 +1,4 @@
import {plantumlRenderAdapter} from "../adapter";
import {Constants} from "../constants";
import {addScript} from "../util/addScript";

Expand All @@ -6,7 +7,7 @@ declare const plantumlEncoder: {
};

export const plantumlRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
const plantumlElements = element.querySelectorAll(".language-plantuml");
const plantumlElements = plantumlRenderAdapter.getMathElements(element);
if (plantumlElements.length === 0) {
return;
}
Expand All @@ -16,7 +17,7 @@ export const plantumlRender = (element: (HTMLElement | Document) = document, cdn
e.parentElement.classList.contains("vditor-ir__marker--pre")) {
return;
}
const text = e.textContent.trim();
const text = plantumlRenderAdapter.getCode(e).trim();
if (!text) {
return;
}
Expand Down

0 comments on commit 0ddaad1

Please sign in to comment.