:art: fix #49

CHANGELOG.md

@@ -1,8 +1,9 @@
 ## Vditor change log
 
 
-### v1.4.0 / 2019-05-12
+### v1.4.2 / 2019-05-15
 
+* [49](https://github.com/b3log/vditor/issues/49) 添加 md2html 接口 `feature`
 * [48](https://github.com/b3log/vditor/issues/48) 修改 emoji 中的 hash 值 `bug`
 
 ### v1.3.5 / 2019-05-04

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "cdn": "https://cdn.jsdelivr.net/npm",
   "description": "A markdown editor written in TypeScript",
   "author": " Vanessa <[email protected]> (http://vanessa.b3log.org)",
@@ -14,42 +14,42 @@
   ],
   "dependencies": {
     "highlight.js": "^9.15.6",
-    "katex": "^0.10.1",
+    "katex": "^0.10.2",
     "markdown-it": "^8.4.2",
     "mermaid": "^8.0.0",
     "turndown": "^5.0.3",
     "turndown-plugin-gfm": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@types/jest": "^24.0.9",
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@types/jest": "^24.0.13",
     "@types/markdown-it": "0.0.7",
-    "@types/puppeteer": "^1.12.2",
-    "autoprefixer": "^9.4.6",
-    "babel-loader": "^8.0.5",
-    "clean-webpack-plugin": "^1.0.1",
-    "copy-webpack-plugin": "^5.0.2",
-    "css-loader": "^2.1.0",
+    "@types/puppeteer": "^1.12.4",
+    "autoprefixer": "^9.5.1",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^2.0.2",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^2.1.1",
     "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
+    "jest": "^24.8.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.12.0",
     "on-build-webpack": "^0.1.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
-    "puppeteer": "^1.13.0",
+    "puppeteer": "^1.16.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "ts-jest": "^24.0.0",
-    "ts-loader": "^5.3.3",
-    "tslint": "^5.12.1",
-    "typescript": "^3.2.4",
-    "webpack": "^4.29.0",
+    "ts-jest": "^24.0.2",
+    "ts-loader": "^6.0.0",
+    "tslint": "^5.16.0",
+    "typescript": "^3.4.5",
+    "webpack": "^4.31.0",
     "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "^3.2.1",
+    "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.3.1"
   },
   "license": "MIT",

src/index.ts

@@ -5,6 +5,7 @@ import {Hint} from "./ts/hint/index";
 import {Hotkey} from "./ts/hotkey/index";
 import {codeRender} from "./ts/markdown/codeRender";
 import {mathRender} from "./ts/markdown/mathRender";
+import {markdownItRender} from "./ts/markdown/render";
 import {mermaidRender} from "./ts/markdown/mermaidRender";
 import {md2html} from "./ts/markdown/render";
 import {Preview} from "./ts/preview/index";
@@ -20,6 +21,7 @@ class Vditor {
     public static mathRender = mathRender;
     public static mermaidRender = mermaidRender;
     public static codeRender = codeRender;
+    public static md2html = markdownItRender
     public readonly version: string;
     public vditor: IVditor;
 

src/ts/markdown/render.ts

@@ -2,10 +2,39 @@ import {CDN_PATH, VDITOR_VERSION} from "../constants";
 import {addStyle} from "../util/addStyle";
 import {task} from "./markdown-it-task";
 
+
+export const markdownItRender = async (mdText: string, hljsStyle: string) => {
+    addStyle(`${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/[email protected]/styles/${
+            hljsStyle}.css`,
+        "vditorHljsStyle");
+
+
+    const {default: MarkdownIt} = await import(/* webpackChunkName: "markdown-it" */ "markdown-it");
+
+    const options: IMarkdownItOptions = {
+        breaks: true,
+        html: true,
+        linkify: true,
+    };
+
+    const {default: hljs} = await import(/* webpackChunkName: "highlight.js" */ "highlight.js");
+    options.highlight = (str: string, lang: string) => {
+        if (lang === "mermaid") {
+            return str;
+        }
+        if (lang && hljs.getLanguage(lang)) {
+            return `<pre><code class="language-${lang} hljs">${hljs.highlight(lang, str, true).value}</code></pre>`;
+        }
+        return `<pre><code class="hljs">${hljs.highlightAuto(str).value}</code></pre>`;
+    };
+    const markdownIt = new MarkdownIt(options).use(task);
+    return markdownIt.render(mdText);
+}
+
 const initMarkdownIt = async (vditor: IVditor, includeHljs: boolean) => {
     if (vditor.options.preview.hljs.style) {
         addStyle(`${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/[email protected]/styles/${
-            vditor.options.preview.hljs.style}.css`,
+                vditor.options.preview.hljs.style}.css`,
             "vditorHljsStyle");
     }
 

src/ts/resize/index.ts

@@ -14,15 +14,16 @@ export class Resize {
     private bindEvent(vditor: IVditor) {
         this.element.addEventListener("mousedown", (event: MouseEvent) => {
 
-            const documentSelf = document as IDocument;
+            const documentSelf = document;
             const vditorElement = document.getElementById(vditor.id);
             const y = event.clientY;
             const height = vditorElement.offsetHeight;
             documentSelf.ondragstart = () => false;
-            documentSelf.onselectstart = "return false;";
-            documentSelf.onselect = () => {
-                (document as IDocument).selection.empty();
-            };
+            // TODO 移除非规范代码
+            // documentSelf.onselectstart = "return false;";
+            // documentSelf.onselect = () => {
+            //     (document as any).selection.empty();
+            // };
 
             if (window.captureEvents) {
                 window.captureEvents();

src/ts/types/index.d.ts

@@ -67,11 +67,6 @@ interface IHTMLInputEvent extends Event {
     target: HTMLInputElement & EventTarget;
 }
 
-interface IDocument extends Document {
-    onselectstart: string | null;
-    selection: { empty(): void };
-}
-
 interface II18nLang {
     en_US: string;
     zh_CN: string;

webpack.config.js

@@ -118,7 +118,8 @@ module.exports = [
     },
     plugins: [
       // new BundleAnalyzerPlugin(),
-      new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
+      new CleanWebpackPlugin(
+        {cleanOnceBeforeBuildPatterns: [path.join(__dirname, 'dist')]}),
       new webpack.DefinePlugin({
         VDITOR_VERSION: JSON.stringify(pkg.version),
         CDN_PATH: JSON.stringify(pkg.cdn),