✨ #1009

CHANGELOG.md

@@ -98,6 +98,7 @@
 
 ### v3.8.5 / 2021-06-xx
 
+* [1009](https://github.com/Vanessa219/vditor/pull/1009/) 对于 markdown 目录下的渲染方法新增 适配模块 `引入特性`
 * [1011](https://github.com/Vanessa219/vditor/issues/1011) 支持导出 JSON `引入特性`
 * [1010](https://github.com/Vanessa219/vditor/issues/1010) 多语言分离 `改进功能`
 * [1008](https://github.com/Vanessa219/vditor/pull/1008) 自定义多语言 `引入特性`

src/index.ts

@@ -1,6 +1,5 @@
 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";

src/method.ts

@@ -1,4 +1,5 @@
 import {abcRender} from "./ts/markdown/abcRender";
+import * as adapterRender from "./ts/markdown/adapterRender";
 import {chartRender} from "./ts/markdown/chartRender";
 import {codeRender} from "./ts/markdown/codeRender";
 import {flowchartRender} from "./ts/markdown/flowchartRender";
@@ -13,11 +14,14 @@ import {outlineRender} from "./ts/markdown/outlineRender";
 import {plantumlRender} from "./ts/markdown/plantumlRender";
 import {md2html, previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
-import { previewImage } from "./ts/preview/image";
-import { setCodeTheme } from "./ts/ui/setCodeTheme";
+import {previewImage} from "./ts/preview/image";
+import {setCodeTheme} from "./ts/ui/setCodeTheme";
 import {setContentTheme} from "./ts/ui/setContentTheme";
+
 class Vditor {
 
+    /** 点击图片放大 */
+    public static adapterRender = adapterRender;
     /** 点击图片放大 */
     public static previewImage = previewImage;
     /** 为 element 中的代码块添加复制按钮 */

src/ts/markdown/abcRender.ts

@@ -1,13 +1,13 @@
-import {abcRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {abcRenderAdapter} from "./adapterRender";
 
 declare const ABCJS: {
     renderAbc(element: HTMLElement, text: string): void;
 };
 
 export const abcRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
-    const abcElements = abcRenderAdapter.getMathElements(element);
+    const abcElements = abcRenderAdapter.getElements(element);
     if (abcElements.length > 0) {
         addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
             abcElements.forEach((item: HTMLDivElement) => {

src/ts/markdown/adapterRender.ts

@@ -0,0 +1,33 @@
+export const mathRenderAdapter = {
+    getCode: (mathElement: Element) => mathElement.textContent,
+    getElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
+};
+export const mermaidRenderAdapter = {
+    /** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement) => element.querySelectorAll(".language-mermaid"),
+};
+export const mindmapRenderAdapter = {
+    getCode: (el: Element) => el.getAttribute("data-code"),
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-mindmap"),
+};
+export const chartRenderAdapter = {
+    getCode: (el: HTMLElement) => el.innerText,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-echarts"),
+};
+export const abcRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-abc"),
+};
+export const graphvizRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
+};
+export const flowchartRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),
+};
+export const plantumlRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-plantuml"),
+};

src/ts/markdown/chartRender.ts

@@ -1,13 +1,13 @@
-import {chartRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {chartRenderAdapter} from "./adapterRender";
 
 declare const echarts: {
     init(element: HTMLElement, theme?: string): IEChart;
 };
 
 export const chartRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
-    const echartsElements = chartRenderAdapter.getMathElements(element);
+    const echartsElements = chartRenderAdapter.getElements(element);
     if (echartsElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             echartsElements.forEach((e: HTMLDivElement) => {

src/ts/markdown/flowchartRender.ts

@@ -1,13 +1,13 @@
-import {flowchartRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {flowchartRenderAdapter} from "./adapterRender";
 
 declare const flowchart: {
     parse(text: string): { drawSVG: (type: HTMLElement) => void };
 };
 
 export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const flowchartElements = flowchartRenderAdapter.getMathElements(element);
+    const flowchartElements = flowchartRenderAdapter.getElements(element);
     if (flowchartElements.length === 0) {
         return;
     }

src/ts/markdown/graphvizRender.ts

@@ -1,6 +1,6 @@
-import {graphvizRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {graphvizRenderAdapter} from "./adapterRender";
 
 declare class Viz {
     public renderSVGElement: (code: string) => Promise<any>;
@@ -9,7 +9,7 @@ declare class Viz {
 }
 
 export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const graphvizElements = graphvizRenderAdapter.getMathElements(element);
+    const graphvizElements = graphvizRenderAdapter.getElements(element);
 
     if (graphvizElements.length === 0) {
         return;

src/ts/markdown/mathRender.ts

@@ -1,8 +1,8 @@
-import {mathRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript, addScriptSync} from "../util/addScript";
 import {addStyle} from "../util/addStyle";
 import {code160to32} from "../util/code160to32";
+import {mathRenderAdapter} from "./adapterRender";
 
 declare const katex: {
     renderToString(math: string, option: {
@@ -18,7 +18,7 @@ declare global {
 }
 
 export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
-    const mathElements = mathRenderAdapter.getMathElements(element);
+    const mathElements = mathRenderAdapter.getElements(element);
 
     if (mathElements.length === 0) {
         return;

src/ts/markdown/mermaidRender.ts

@@ -1,14 +1,14 @@
-import {mermaidRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {mermaidRenderAdapter} from "./adapterRender";
 
 declare const mermaid: {
     initialize(options: any): void,
     init(options: any, element: Element): void,
 };
 
 export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
-    const mermaidElements = mermaidRenderAdapter.getMathElements(element);
+    const mermaidElements = mermaidRenderAdapter.getElements(element);
     if (mermaidElements.length === 0) {
         return;
     }

src/ts/markdown/mindmapRender.ts

@@ -1,13 +1,13 @@
-import {mindmapRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {mindmapRenderAdapter} from "./adapterRender";
 
 declare const echarts: {
     init(element: HTMLElement, theme?: string): IEChart;
 };
 
 export const mindmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
-    const mindmapElements = mindmapRenderAdapter.getMathElements(element);
+    const mindmapElements = mindmapRenderAdapter.getElements(element);
     if (mindmapElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             mindmapElements.forEach((e: HTMLDivElement) => {

src/ts/markdown/plantumlRender.ts

@@ -1,13 +1,13 @@
-import {plantumlRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {plantumlRenderAdapter} from "./adapterRender";
 
 declare const plantumlEncoder: {
     encode(options: string): string,
 };
 
 export const plantumlRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
-    const plantumlElements = plantumlRenderAdapter.getMathElements(element);
+    const plantumlElements = plantumlRenderAdapter.getElements(element);
     if (plantumlElements.length === 0) {
         return;
     }