Skip to content

Commit 5ed8c28

Browse files
Vanessa219Vanessa219
committed
✨ #1158 
1 parent db02d6a commit 5ed8c28

File tree

15 files changed

+134
-19
lines changed

15 files changed

+134
-19
lines changed

‎src/assets/less/_reset.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@
231231
.language-mindmap,
232232
.language-plantuml,
233233
.language-mermaid,
234+
.language-smiles,
234235
.language-markmap,
235236
.language-abc,
236237
.language-flowchart,

‎src/js/smiles-drawer/smiles-drawer.min.js‎

Lines changed: 71 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/method.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {lazyLoadImageRender} from "./ts/markdown/lazyLoadImageRender";
99
import {mathRender} from "./ts/markdown/mathRender";
1010
import {mediaRender} from "./ts/markdown/mediaRender";
1111
import {mermaidRender} from "./ts/markdown/mermaidRender";
12+
import {SMILESRender} from "./ts/markdown/SMILESRender";
1213
import {markmapRender} from "./ts/markdown/markmapRender";
1314
import {mindmapRender} from "./ts/markdown/mindmapRender";
1415
import {outlineRender} from "./ts/markdown/outlineRender";
@@ -35,6 +36,8 @@ class Vditor {
3536
public static mathRender = mathRender;
3637
/** 流程图/时序图/甘特图渲染 */
3738
public static mermaidRender = mermaidRender;
39+
/** 化学物质结构渲染 */
40+
public static SMILESRender = SMILESRender;
3841
/** 支持markdown的思维导图 */
3942
public static markmapRender = markmapRender;
4043
/** flowchart.js 渲染 */

‎src/ts/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export abstract class Constants {
4444
"stackoverflow-light", "tokyo-night-light", "vs", "xcode", "default"];
4545
public static readonly ALIAS_CODE_LANGUAGES: string[] = [
4646
// 自定义
47-
"abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap",
47+
"abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap", "smiles",
4848
// 别名
4949
"js", "ts", "html", "toml", "c#", "bat"
5050
];

‎src/ts/export/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ export const exportHTML = (vditor: IVditor) => {
6969
math: ${JSON.stringify(vditor.options.preview.math)},
7070
});
7171
Vditor.mermaidRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
72-
Vditor.markmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
72+
Vditor.SMILESRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
73+
Vditor.markmapRender(previewElement, '${vditor.options.cdn}');
7374
Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
7475
Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
7576
Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');

‎src/ts/markdown/SMILESRender.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Constants} from "../constants";
2+
import {addScript} from "../util/addScript";
3+
import {SMILESRenderAdapter} from "./adapterRender";
4+
import {genUUID} from "../util/function";
5+
6+
declare class SmiDrawer {
7+
constructor(moleculeOptions: IObject, reactionOptions: IObject);
8+
9+
public draw: (code: string, id: string, theme?: string) => void;
10+
}
11+
12+
export const SMILESRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
13+
const SMILESElements = SMILESRenderAdapter.getElements(element);
14+
if (SMILESElements.length > 0) {
15+
addScript(`${cdn}/dist/js/smiles-drawer/smiles-drawer.min.js?v=2.1.7`, "vditorAbcjsScript").then(() => {
16+
let sd = new SmiDrawer({}, {});
17+
SMILESElements.forEach((item: HTMLDivElement) => {
18+
const code = SMILESRenderAdapter.getCode(item).trim();
19+
if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
20+
return;
21+
}
22+
const id = "smiles" + genUUID()
23+
item.innerHTML = `<svg id="${id}"></svg>`;
24+
sd.draw(code, '#' + id, theme === "dark" ? "dark" : undefined)
25+
item.setAttribute("data-processed", "true");
26+
});
27+
});
28+
}
29+
};

‎src/ts/markdown/adapterRender.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
export const mathRenderAdapter = {
2-
getCode: (mathElement: Element) => mathElement.textContent,
3-
getElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
2+
getCode: (el: Element) => el.textContent,
3+
getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-math"),
4+
};
5+
export const SMILESRenderAdapter = {
6+
getCode: (el: Element) => el.textContent,
7+
getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-smiles"),
48
};
59
export const mermaidRenderAdapter = {
610
/** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
711
getCode: (el: Element) => el.textContent,
8-
getElements: (element: HTMLElement) => element.querySelectorAll(".language-mermaid"),
12+
getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-mermaid"),
913
};
1014
export const markmapRenderAdapter = {
1115
getCode: (el: Element) => el.textContent,
12-
getElements: (element: HTMLElement) => element.querySelectorAll(".language-markmap"),
16+
getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-markmap"),
1317
};
1418
export const mindmapRenderAdapter = {
1519
getCode: (el: Element) => el.getAttribute("data-code"),

‎src/ts/markdown/codeRender.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const codeRender = (element: HTMLElement, option?: IHljs) => {
1111
e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
1212
e.classList.contains("language-plantuml") || e.classList.contains("language-markmap") ||
1313
e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
14-
e.classList.contains("language-math")) {
14+
e.classList.contains("language-math") || e.classList.contains("language-smiles")) {
1515
return false;
1616
}
1717

‎src/ts/markdown/highlightRender.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
3535

3636
if (block.classList.contains("language-mermaid") || block.classList.contains("language-flowchart") ||
3737
block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
38-
block.classList.contains("language-plantuml") ||
38+
block.classList.contains("language-plantuml")|| block.classList.contains("language-smiles") ||
3939
block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
4040
block.classList.contains("language-math")) {
4141
return;

‎src/ts/markdown/markmapRender.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@ const init = (el: HTMLElement,code: string) => {
3232
}
3333

3434

35-
export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
35+
export const markmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
3636
const markmapElements = markmapRenderAdapter.getElements(element);
3737
if (markmapElements.length === 0) {
3838
return;
3939
}
40-
addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMermaidScript").then(() => {
40+
addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMarkerScript").then(() => {
4141
markmapElements.forEach((item) => {
4242
const code = markmapRenderAdapter.getCode(item);
4343
if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
@@ -53,5 +53,4 @@ export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme:
5353
}
5454
});
5555
});
56-
5756
};

0 commit comments

Comments
 (0)