Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

对于 markdown 目录下的渲染方法新增 适配模块 #1009

Merged
merged 3 commits into from May 20, 2021
Merged

对于 markdown 目录下的渲染方法新增 适配模块 #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0bec9d
✨ feat(ts): 新增适配模块
2234839 May 20, 2021
cde214f
Merge branch 'Vanessa219:master' into master
2234839 May 20, 2021
3511eb9
Merge branch 'dev' into master
Vanessa219 May 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions src/index.ts
View file
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
@@ -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