:recycle: #112

demo/index.js

@@ -9,15 +9,7 @@ window.vditor = new Vditor('vditor', {
     emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',
     emoji: {
       'sd': '💔',
-      'huaji': 'https://unpkg.com/[email protected]/dist/images/emoji/huaji.gif',
-      'sym': '//static.b3log.org/images/brand/sym-128.png',
-      'pipe': '//static.b3log.org/images/brand/pipe-128.png',
-      'solo': '//static.b3log.org/images/brand/solo-128.png',
-      'wide': '//static.b3log.org/images/brand/wide-128.png',
-      'chainbook': '//static.b3log.org/images/brand/chainbook-128.png',
-      'vditor': '//static.b3log.org/images/brand/vditor-128.png',
-      'b3log': '//static.b3log.org/images/brand/b3log-128.png',
-      'bnd': '//static.b3log.org/images/brand/bnd-128.png',
+      'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
     },
   },
   tab: '\t',

demo/static.html

@@ -57,15 +57,7 @@
       emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',
       emoji: {
         'sd': '💔',
-        'huaji': 'https://unpkg.com/[email protected]/dist/images/emoji/huaji.gif',
-        'sym': '//static.b3log.org/images/brand/sym-128.png',
-        'pipe': '//static.b3log.org/images/brand/pipe-128.png',
-        'solo': '//static.b3log.org/images/brand/solo-128.png',
-        'wide': '//static.b3log.org/images/brand/wide-128.png',
-        'chainbook': '//static.b3log.org/images/brand/chainbook-128.png',
-        'vditor': '//static.b3log.org/images/brand/vditor-128.png',
-        'b3log': '//static.b3log.org/images/brand/b3log-128.png',
-        'bnd': '//static.b3log.org/images/brand/bnd-128.png',
+        'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
       },
     },
     tab: '\t',

src/ts/markdown/emojiRender.ts

@@ -1,22 +1,13 @@
-import {CDN_PATH} from "../constants";
-
 export const emojiRender = (text: string, customEmoji: { [key: string]: string }) => {
-    const imgEmoji = ["b3log", "chainbook", "doge", "hacpai", "huaji", "latke", "pipe", "solo",
-        "sym", "vditor", "octocat", "wide", "trollface", ...Object.keys(customEmoji)];
+    const imgEmoji = Object.keys(customEmoji);
     imgEmoji.map((emoji) => {
-        if (emoji in customEmoji) {
-            if (customEmoji[emoji].indexOf("//") > -1) {
-                text = text.replace(new RegExp(`:${emoji}:`, "g"),
-                    `<img alt="${emoji}" class="emoji" src="${customEmoji[emoji]}"
- title="${emoji}">`);
-            }
-        } else {
-            const suffix = emoji === "huaji" ? "gif" : "png";
+        if (customEmoji[emoji].indexOf("//") > -1) {
             text = text.replace(new RegExp(`:${emoji}:`, "g"),
-                `<img alt="${emoji}" class="emoji" src="${CDN_PATH}/vditor/dist/images/emoji/${emoji}.${suffix}"
+                `<img alt="${emoji}" class="emoji" src="${customEmoji[emoji]}"
  title="${emoji}">`);
+        } else {
+            text = text.replace(new RegExp(`:${emoji}:`, "g"), customEmoji[emoji]);
         }
-
     });
     return text;
 };

src/ts/markdown/highlightRender.ts

@@ -1,8 +1,8 @@
 import {CDN_PATH} from "../constants";
 import {addStyle} from "../util/addStyle";
 
-export const highlightRender = (hljsStyle: string, enableHighlight: boolean) => {
-    if (enableHighlight) {
+export const highlightRender = async (hljsStyle: string, enableHighlight: boolean) => {
+    if (!enableHighlight) {
         return;
     }
 
@@ -21,20 +21,19 @@ export const highlightRender = (hljsStyle: string, enableHighlight: boolean) =>
         "school-book", "shades-of-purple", "solarized-dark", "solarized-light", "sunburst", "tomorrow-night",
         "tomorrow-night-blue", "tomorrow-night-bright", "tomorrow-night-eighties", "vs", "vs2015", "xcode", "xt256"];
 
-    if (hljsThemes.includes(hljsStyle) && enableHighlight) {
+    if (hljsThemes.includes(hljsStyle)) {
         addStyle(`${CDN_PATH}/vditor/dist/js/highlight.js/styles/${hljsStyle}.css`,
             "vditorHljsStyle");
     }
 
-    //     const {default: hljs} = await import(/* webpackChunkName: "highlight.js" */ "highlight.js");
-    //     options.highlight = (str: string, lang: string) => {
-    //         if (lang === "mermaid" || lang === "echarts" || lang === "abc") {
-    //             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 {default: hljs} = await import(/* webpackChunkName: "highlight.js" */ "highlight.js");
+    document.querySelectorAll('.vditor-reset pre code').forEach((block) => {
+        if (block.className.indexOf('language-mermaid') > -1 ||
+            block.className.indexOf('language-abc') > -1 ||
+            block.className.indexOf('language-echarts') > -1) {
+            return
+        }
+
+        hljs.highlightBlock(block)
+    })
 };

src/ts/markdown/preview.ts

@@ -4,6 +4,8 @@ import {codeRender} from "./codeRender";
 import {mathRender} from "./mathRender";
 import {md2htmlByText} from "./md2html";
 import {mermaidRender} from "./mermaidRender";
+import {highlightRender} from "./highlightRender";
+import {emojiRender} from "./emojiRender";
 
 export const preview = async (element: HTMLTextAreaElement, options?: IPreviewOptions) => {
     const defaultOption = {
@@ -16,17 +18,17 @@ export const preview = async (element: HTMLTextAreaElement, options?: IPreviewOp
     const html =
         await md2htmlByText(element.textContent);
     const divElement = document.createElement("div");
-    divElement.innerHTML = html;
+    divElement.innerHTML = emojiRender(html, options.customEmoji);
     divElement.className = element.className;
     divElement.id = element.id;
     divElement.setAttribute("style", element.getAttribute("style"));
     divElement.style.display = "block";
     element.after(divElement);
     element.remove();
+    codeRender(divElement, options.lang);
+    highlightRender(options.hljsStyle, options.enableHighlight)
     mathRender(divElement, options.lang);
     mermaidRender(divElement);
-    abcRender(divElement);
-    codeRender(divElement, options.lang);
     chartRender(divElement);
-    // TODO emoji and hljs render
+    abcRender(divElement);
 };

src/ts/preview/index.ts

@@ -6,6 +6,8 @@ import {codeRender} from "../markdown/codeRender";
 import {mathRender} from "../markdown/mathRender";
 import {md2htmlByText} from "../markdown/md2html";
 import {mermaidRender} from "../markdown/mermaidRender";
+import {highlightRender} from "../markdown/highlightRender";
+import {emojiRender} from "../markdown/emojiRender";
 
 export class Preview {
     public element: HTMLElement;
@@ -66,7 +68,7 @@ export class Preview {
             }, vditor.options.preview.delay);
         } else {
             const html = await md2htmlByText(getText(vditor.editor.element));
-            this.element.children[0].innerHTML = html;
+            this.element.children[0].innerHTML = emojiRender(html, vditor.options.hint.emoji);
             this.afterRender(vditor, renderStartTime);
         }
     }
@@ -75,12 +77,6 @@ export class Preview {
         if (vditor.options.preview.parse) {
             vditor.options.preview.parse(this.element);
         }
-        // TODO emoji & highligit render
-        mathRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.lang);
-        mermaidRender(vditor.preview.element.children[0] as HTMLElement);
-        codeRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.lang);
-        chartRender(vditor.preview.element.children[0] as HTMLElement);
-        abcRender(vditor.preview.element.children[0] as HTMLElement);
         const time = (new Date().getTime() - startTime);
         if ((new Date().getTime() - startTime) > 2000) {
             // https://github.com/b3log/vditor/issues/67
@@ -91,5 +87,11 @@ export class Preview {
             vditor.tip.hide();
             vditor.upload.element.removeAttribute("data-type");
         }
+        codeRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.lang);
+        highlightRender(vditor.options.preview.hljs.style, vditor.options.preview.hljs.enable)
+        mathRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.lang);
+        mermaidRender(vditor.preview.element.children[0] as HTMLElement);
+        chartRender(vditor.preview.element.children[0] as HTMLElement);
+        abcRender(vditor.preview.element.children[0] as HTMLElement);
     }
 }