@8btc/mditor 0.0.1

package/src/method.ts

@@ -0,0 +1,71 @@
+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";
+import {graphvizRender} from "./ts/markdown/graphvizRender";
+import {highlightRender} from "./ts/markdown/highlightRender";
+import {lazyLoadImageRender} from "./ts/markdown/lazyLoadImageRender";
+import {mathRender} from "./ts/markdown/mathRender";
+import {mediaRender} from "./ts/markdown/mediaRender";
+import {mermaidRender} from "./ts/markdown/mermaidRender";
+import {SMILESRender} from "./ts/markdown/SMILESRender";
+import {markmapRender} from "./ts/markdown/markmapRender";
+import {mindmapRender} from "./ts/markdown/mindmapRender";
+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 {setContentTheme} from "./ts/ui/setContentTheme";
+
+class Vditor {
+
+    /** 点击图片放大 */
+    public static adapterRender = adapterRender;
+    /** 点击图片放大 */
+    public static previewImage = previewImage;
+    /** 为 element 中的代码块添加复制按钮 */
+    public static codeRender = codeRender;
+    /** 对 graphviz 进行渲染 */
+    public static graphvizRender = graphvizRender;
+    /** 为 element 中的代码块进行高亮渲染 */
+    public static highlightRender = highlightRender;
+    /** 对数学公式进行渲染 */
+    public static mathRender = mathRender;
+    /** 流程图/时序图/甘特图渲染 */
+    public static mermaidRender = mermaidRender;
+    /** 化学物质结构渲染 */
+    public static SMILESRender = SMILESRender;
+    /** 支持 markdown 的思维导图 */
+    public static markmapRender = markmapRender;
+    /** flowchart.js 渲染 */
+    public static flowchartRender = flowchartRender;
+    /** 图表渲染 */
+    public static chartRender = chartRender;
+    /** 五线谱渲染 */
+    public static abcRender = abcRender;
+    /** 脑图渲染 */
+    public static mindmapRender = mindmapRender;
+    /** plantuml渲染 */
+    public static plantumlRender = plantumlRender;
+    /** 大纲渲染 */
+    public static outlineRender = outlineRender;
+    /** 为[特定链接](https://github.com/Vanessa219/vditor/issues/7)分别渲染为视频、音频、嵌入的 iframe */
+    public static mediaRender = mediaRender;
+    /** 对选中的文字进行阅读 */
+    public static speechRender = speechRender;
+    /** 对图片进行懒加载 */
+    public static lazyLoadImageRender = lazyLoadImageRender;
+    /** Markdown 文本转换为 HTML，该方法需使用[异步编程](https://ld246.com/article/1546828434083?r=Vaness) */
+    public static md2html = md2html;
+    /** 页面 Markdown 文章渲染 */
+    public static preview = previewRender;
+    /** 设置代码主题 */
+    public static setCodeTheme = setCodeTheme;
+    /** 设置内容主题 */
+    public static setContentTheme = setContentTheme;
+}
+
+export default Vditor;

package/src/ts/constants.ts

@@ -0,0 +1,350 @@
+declare const VDITOR_VERSION: string;
+
+const _VDITOR_VERSION = VDITOR_VERSION;
+
+export { _VDITOR_VERSION as VDITOR_VERSION };
+
+export abstract class Constants {
+    public static readonly ZWSP: string = "\u200b";
+    public static readonly DROP_EDITOR: string = "application/editor";
+    public static readonly MOBILE_WIDTH: number = 520;
+    public static readonly CLASS_MENU_DISABLED: string =
+        "vditor-menu--disabled";
+    public static readonly EDIT_TOOLBARS: string[] = [
+        "emoji",
+        "headings",
+        "bold",
+        "italic",
+        "strike",
+        "link",
+        "list",
+        "ordered-list",
+        "outdent",
+        "indent",
+        "check",
+        "line",
+        "quote",
+        "code",
+        "inline-code",
+        "insert-after",
+        "insert-before",
+        "upload",
+        "record",
+        "table",
+    ];
+    public static readonly CODE_THEME: string[] = [
+        "a11y-dark",
+        "agate",
+        "an-old-hope",
+        "androidstudio",
+        "arta",
+        "atom-one-dark",
+        "atom-one-dark-reasonable",
+        "base16/3024",
+        "base16/apathy",
+        "base16/apprentice",
+        "base16/ashes",
+        "base16/atelier-cave",
+        "base16/atelier-dune",
+        "base16/atelier-estuary",
+        "base16/atelier-forest",
+        "base16/atelier-heath",
+        "base16/atelier-lakeside",
+        "base16/atelier-plateau",
+        "base16/atelier-savanna",
+        "base16/atelier-seaside",
+        "base16/atelier-sulphurpool",
+        "base16/atlas",
+        "base16/bespin",
+        "base16/black-metal",
+        "base16/black-metal-bathory",
+        "base16/black-metal-burzum",
+        "base16/black-metal-dark-funeral",
+        "base16/black-metal-gorgoroth",
+        "base16/black-metal-immortal",
+        "base16/black-metal-khold",
+        "base16/black-metal-marduk",
+        "base16/black-metal-mayhem",
+        "base16/black-metal-nile",
+        "base16/black-metal-venom",
+        "base16/brewer",
+        "base16/bright",
+        "base16/brogrammer",
+        "base16/brush-trees-dark",
+        "base16/chalk",
+        "base16/circus",
+        "base16/classic-dark",
+        "base16/codeschool",
+        "base16/colors",
+        "base16/danqing",
+        "base16/darcula",
+        "base16/dark-violet",
+        "base16/darkmoss",
+        "base16/darktooth",
+        "base16/decaf",
+        "base16/default-dark",
+        "base16/dracula",
+        "base16/edge-dark",
+        "base16/eighties",
+        "base16/embers",
+        "base16/equilibrium-dark",
+        "base16/equilibrium-gray-dark",
+        "base16/espresso",
+        "base16/eva",
+        "base16/eva-dim",
+        "base16/flat",
+        "base16/framer",
+        "base16/gigavolt",
+        "base16/google-dark",
+        "base16/grayscale-dark",
+        "base16/green-screen",
+        "base16/gruvbox-dark-hard",
+        "base16/gruvbox-dark-medium",
+        "base16/gruvbox-dark-pale",
+        "base16/gruvbox-dark-soft",
+        "base16/hardcore",
+        "base16/harmonic16-dark",
+        "base16/heetch-dark",
+        "base16/helios",
+        "base16/hopscotch",
+        "base16/horizon-dark",
+        "base16/humanoid-dark",
+        "base16/ia-dark",
+        "base16/icy-dark",
+        "base16/ir-black",
+        "base16/isotope",
+        "base16/kimber",
+        "base16/london-tube",
+        "base16/macintosh",
+        "base16/marrakesh",
+        "base16/materia",
+        "base16/material",
+        "base16/material-darker",
+        "base16/material-palenight",
+        "base16/material-vivid",
+        "base16/mellow-purple",
+        "base16/mocha",
+        "base16/monokai",
+        "base16/nebula",
+        "base16/nord",
+        "base16/nova",
+        "base16/ocean",
+        "base16/oceanicnext",
+        "base16/onedark",
+        "base16/outrun-dark",
+        "base16/papercolor-dark",
+        "base16/paraiso",
+        "base16/pasque",
+        "base16/phd",
+        "base16/pico",
+        "base16/pop",
+        "base16/porple",
+        "base16/qualia",
+        "base16/railscasts",
+        "base16/rebecca",
+        "base16/ros-pine",
+        "base16/ros-pine-moon",
+        "base16/sandcastle",
+        "base16/seti-ui",
+        "base16/silk-dark",
+        "base16/snazzy",
+        "base16/solar-flare",
+        "base16/solarized-dark",
+        "base16/spacemacs",
+        "base16/summercamp",
+        "base16/summerfruit-dark",
+        "base16/synth-midnight-terminal-dark",
+        "base16/tango",
+        "base16/tender",
+        "base16/tomorrow-night",
+        "base16/twilight",
+        "base16/unikitty-dark",
+        "base16/vulcan",
+        "base16/windows-10",
+        "base16/windows-95",
+        "base16/windows-high-contrast",
+        "base16/windows-nt",
+        "base16/woodland",
+        "base16/xcode-dusk",
+        "base16/zenburn",
+        "codepen-embed",
+        "dark",
+        "devibeans",
+        "far",
+        "felipec",
+        "github-dark",
+        "github-dark-dimmed",
+        "gml",
+        "gradient-dark",
+        "hybrid",
+        "ir-black",
+        "isbl-editor-dark",
+        "kimbie-dark",
+        "lioshi",
+        "monokai",
+        "monokai-sublime",
+        "night-owl",
+        "nnfx-dark",
+        "nord",
+        "obsidian",
+        "panda-syntax-dark",
+        "paraiso-dark",
+        "pojoaque",
+        "qtcreator-dark",
+        "rainbow",
+        "shades-of-purple",
+        "srcery",
+        "stackoverflow-dark",
+        "sunburst",
+        "tomorrow-night-blue",
+        "tomorrow-night-bright",
+        "tokyo-night-dark",
+        "vs2015",
+        "xt256",
+        "ant-design",
+        "a11y-light",
+        "arduino-light",
+        "ascetic",
+        "atom-one-light",
+        "base16/atelier-cave-light",
+        "base16/atelier-dune-light",
+        "base16/atelier-estuary-light",
+        "base16/atelier-forest-light",
+        "base16/atelier-heath-light",
+        "base16/atelier-lakeside-light",
+        "base16/atelier-plateau-light",
+        "base16/atelier-savanna-light",
+        "base16/atelier-seaside-light",
+        "base16/atelier-sulphurpool-light",
+        "base16/brush-trees",
+        "base16/classic-light",
+        "base16/cupcake",
+        "base16/cupertino",
+        "base16/default-light",
+        "base16/dirtysea",
+        "base16/edge-light",
+        "base16/equilibrium-gray-light",
+        "base16/equilibrium-light",
+        "base16/fruit-soda",
+        "base16/github",
+        "base16/google-light",
+        "base16/grayscale-light",
+        "base16/gruvbox-light-hard",
+        "base16/gruvbox-light-medium",
+        "base16/gruvbox-light-soft",
+        "base16/harmonic16-light",
+        "base16/heetch-light",
+        "base16/humanoid-light",
+        "base16/horizon-light",
+        "base16/ia-light",
+        "base16/material-lighter",
+        "base16/mexico-light",
+        "base16/one-light",
+        "base16/papercolor-light",
+        "base16/ros-pine-dawn",
+        "base16/sagelight",
+        "base16/shapeshifter",
+        "base16/silk-light",
+        "base16/solar-flare-light",
+        "base16/solarized-light",
+        "base16/summerfruit-light",
+        "base16/synth-midnight-terminal-light",
+        "base16/tomorrow",
+        "base16/unikitty-light",
+        "base16/windows-10-light",
+        "base16/windows-95-light",
+        "base16/windows-high-contrast-light",
+        "brown-paper",
+        "base16/windows-nt-light",
+        "color-brewer",
+        "docco",
+        "foundation",
+        "github",
+        "googlecode",
+        "gradient-light",
+        "grayscale",
+        "idea",
+        "intellij-light",
+        "isbl-editor-light",
+        "kimbie-light",
+        "lightfair",
+        "magula",
+        "mono-blue",
+        "nnfx-light",
+        "panda-syntax-light",
+        "paraiso-light",
+        "purebasic",
+        "qtcreator-light",
+        "routeros",
+        "school-book",
+        "stackoverflow-light",
+        "tokyo-night-light",
+        "vs",
+        "xcode",
+        "default",
+    ];
+    public static readonly ALIAS_CODE_LANGUAGES: string[] = [
+        // 自定义
+        "abc",
+        "plantuml",
+        "mermaid",
+        "flowchart",
+        "echarts",
+        "mindmap",
+        "graphviz",
+        "math",
+        "markmap",
+        "smiles",
+        // 别名
+        "js",
+        "ts",
+        "html",
+        "toml",
+        "c#",
+        "bat",
+    ];
+    public static readonly CDN = `https://webcdn.wujieai.com/vditor@${VDITOR_VERSION}`;
+    public static readonly MARKDOWN_OPTIONS = {
+        autoSpace: false,
+        gfmAutoLink: true,
+        codeBlockPreview: true,
+        fixTermTypo: false,
+        footnotes: true,
+        linkBase: "",
+        linkPrefix: "",
+        listStyle: false,
+        mark: false,
+        mathBlockPreview: true,
+        paragraphBeginningSpace: false,
+        sanitize: true,
+        sub: false,
+        sup: false,
+        toc: false,
+    };
+    public static readonly HLJS_OPTIONS = {
+        enable: true,
+        lineNumber: false,
+        defaultLang: "",
+        style: "github",
+    };
+    public static readonly MATH_OPTIONS: IMath = {
+        engine: "MathJax",
+        inlineDigit: false,
+        // 默认宏：补充常见但部分引擎未内置的积分符号
+        // oiint: 关闭曲面积分（∯），在 MathJax 下通过 unicode 宏渲染
+        // 说明：KaTeX 若不支持 \unicode，将退化为普通 \iint（由 mathRender 保证）
+        macros: {
+            oiint: "\\unicode{x222F}",
+        },
+    };
+    public static readonly THEME_OPTIONS = {
+        current: "light",
+        list: {
+            "ant-design": "Ant Design",
+            dark: "Dark",
+            light: "Light",
+            wechat: "WeChat",
+        },
+        path: `${Constants.CDN}/dist/css/content-theme`,
+    };
+}

package/src/ts/devtools/index.ts

@@ -0,0 +1,83 @@
+import {getMarkdown} from "../markdown/getMarkdown";
+import {addScript} from "../util/addScript";
+
+declare const echarts: {
+    init(element: HTMLElement): IEChart;
+};
+
+export class DevTools {
+    public element: HTMLDivElement;
+    private ASTChart: IEChart;
+
+    constructor() {
+        this.element = document.createElement("div");
+        this.element.className = "vditor-devtools";
+        this.element.innerHTML = '<div class="vditor-reset--error"></div><div style="height: 100%;"></div>';
+    }
+
+    public renderEchart(vditor: IVditor) {
+        if (vditor.devtools.element.style.display !== "block") {
+            return;
+        }
+
+        addScript(`${vditor.options.cdn}/dist/js/echarts/echarts.min.js?v=5.5.1`, "vditorEchartsScript").then(() => {
+            if (!this.ASTChart) {
+                this.ASTChart = echarts.init(vditor.devtools.element.lastElementChild as HTMLDivElement);
+            }
+            try {
+                (this.element.lastElementChild as HTMLElement).style.display = "block";
+                this.element.firstElementChild.innerHTML = "";
+                this.ASTChart.setOption({
+                    series: [
+                        {
+                            data: JSON.parse(vditor.lute.RenderEChartsJSON(getMarkdown(vditor))),
+                            initialTreeDepth: -1,
+                            label: {
+                                align: "left",
+                                backgroundColor: "rgba(68, 77, 86, .68)",
+                                borderRadius: 3,
+                                color: "#d1d5da",
+                                fontSize: 12,
+                                lineHeight: 12,
+                                offset: [9, 12],
+                                padding: [2, 4, 2, 4],
+                                position: "top",
+                                verticalAlign: "middle",
+                            },
+                            lineStyle: {
+                                color: "#4285f4",
+                                type: "curve",
+                                width: 1,
+                            },
+                            orient: "vertical",
+                            roam: true,
+                            type: "tree",
+                        },
+                    ],
+                    toolbox: {
+                        bottom: 25,
+                        emphasis: {
+                            iconStyle: {
+                                color: "#4285f4",
+                            },
+                        },
+                        feature: {
+                            restore: {
+                                show: true,
+                            },
+                            saveAsImage: {
+                                show: true,
+                            },
+                        },
+                        right: 15,
+                        show: true,
+                    },
+                });
+                this.ASTChart.resize();
+            } catch (e) {
+                (this.element.lastElementChild as HTMLElement).style.display = "none";
+                this.element.firstElementChild.innerHTML = e;
+            }
+        });
+    }
+}

package/src/ts/export/index.ts

@@ -0,0 +1,84 @@
+import {getHTML} from "../markdown/getHTML";
+import {getMarkdown} from "../markdown/getMarkdown";
+
+export const download = (vditor: IVditor, content: string, filename: string) => {
+    const aElement = document.createElement("a");
+    if ("download" in aElement) {
+        aElement.download = filename;
+        aElement.style.display = "none";
+        aElement.href = URL.createObjectURL(new Blob([content]));
+
+        document.body.appendChild(aElement);
+        aElement.click();
+        aElement.remove();
+    } else {
+        vditor.tip.show(window.VditorI18n.downloadTip, 0);
+    }
+};
+
+export const exportMarkdown = (vditor: IVditor) => {
+    const content = getMarkdown(vditor);
+    download(vditor, content, content.substr(0, 10) + ".md");
+};
+
+export const exportPDF = (vditor: IVditor) => {
+    vditor.tip.show(window.VditorI18n.generate, 3800);
+    const iframe = document.querySelector("#vditorExportIframe") as HTMLIFrameElement;
+    iframe.contentDocument.open();
+    iframe.contentDocument.write(`<link rel="stylesheet" href="${vditor.options.cdn}/dist/index.css"/>
+<script src="${vditor.options.cdn}/dist/method.min.js"></script>
+<div id="preview" style="width: 800px"></div>
+<script>
+window.addEventListener("message", (e) => {
+  if(!e.data) {
+    return;
+  }
+  Vditor.preview(document.getElementById('preview'), e.data, {
+    cdn: "${vditor.options.cdn}",
+    markdown: {
+      theme: ${JSON.stringify(vditor.options.preview.theme)}
+    },
+    hljs: {
+      style: "${vditor.options.preview.hljs.style}"
+    }
+  });
+  setTimeout(() => {
+        window.print();
+    }, 3600);
+}, false);
+</script>`);
+    iframe.contentDocument.close();
+    setTimeout(() => {
+        iframe.contentWindow.postMessage(getMarkdown(vditor), "*");
+    }, 200);
+};
+
+export const exportHTML = (vditor: IVditor) => {
+    const content = getHTML(vditor);
+    const html = `<html><head><link rel="stylesheet" type="text/css" href="${vditor.options.cdn}/dist/index.css"/>
+<script src="${vditor.options.cdn}/dist/js/i18n/${vditor.options.lang}.js"></script>
+<script src="${vditor.options.cdn}/dist/method.min.js"></script></head>
+<body><div class="vditor-reset" id="preview">${content}</div>
+<script>
+    const previewElement = document.getElementById('preview')
+    Vditor.setContentTheme('${vditor.options.preview.theme.current}', '${vditor.options.preview.theme.path}');
+    Vditor.codeRender(previewElement);
+    Vditor.highlightRender(${JSON.stringify(vditor.options.preview.hljs)}, previewElement, '${vditor.options.cdn}');
+    Vditor.mathRender(previewElement, {
+        cdn: '${vditor.options.cdn}',
+        math: ${JSON.stringify(vditor.options.preview.math)},
+    });
+    Vditor.mermaidRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.SMILESRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.markmapRender(previewElement, '${vditor.options.cdn}');
+    Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
+    Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
+    Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.abcRender(previewElement, '${vditor.options.cdn}');
+    ${vditor.options.preview.render.media.enable ? 'Vditor.mediaRender(previewElement);' : ""}
+    Vditor.speechRender(previewElement);
+</script>
+<script src="${vditor.options.cdn}/dist/js/icons/${vditor.options.icon}.js"></script></body></html>`;
+    download(vditor, html, content.substr(0, 10) + ".html");
+};