:plus: rm emoji png

demo/demo.js

@@ -20,7 +20,10 @@ const vditor = new Vditor('vditor', {
   },
   hint: {
     emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',
-    emoji: ['+1', '-1'],
+    emoji: {
+      '+1': '👍',
+      '-1': '👎',
+    },
     at: (key) => {
       console.log(`atUser: ${key}`)
       return [

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1469,6 +1469,18 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "bfj": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.1.tgz",
+      "integrity": "sha512-+GUNvzHR4nRyGybQc2WpNJL4MJazMuvf92ueIyA0bIkPRwhhQu3IfZQ2PSoVPpCBJfmoSdOxu5rnotfFLlvYRQ==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.1",
+        "check-types": "^7.3.0",
+        "hoopy": "^0.1.2",
+        "tryer": "^1.0.0"
+      }
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -1881,6 +1893,12 @@
         "supports-color": "^5.3.0"
       }
     },
+    "check-types": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
+      "integrity": "sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==",
+      "dev": true
+    },
     "chokidar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
@@ -2875,6 +2893,12 @@
         "is-obj": "^1.0.0"
       }
     },
+    "duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
+      "dev": true
+    },
     "duplexify": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.1.tgz",
@@ -2914,6 +2938,12 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
       "dev": true
     },
+    "ejs": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
+      "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.106",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.106.tgz",
@@ -3403,6 +3433,12 @@
         }
       }
     },
+    "filesize": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
+      "dev": true
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -4363,6 +4399,16 @@
         }
       }
     },
+    "gzip-size": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
+      "integrity": "sha512-5iI7omclyqrnWw4XbXAmGhPsABkSIDQonv2K0h61lybgofWa6iZyvrI3r2zsJH4P8Nb64fFVzlvfhs0g7BBxAA==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "pify": "^3.0.0"
+      }
+    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -4511,6 +4557,12 @@
         "parse-passwd": "^1.0.0"
       }
     },
+    "hoopy": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
+      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
@@ -8975,6 +9027,12 @@
         "glob": "^7.1.2"
       }
     },
+    "tryer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
+      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
+      "dev": true
+    },
     "ts-loader": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-5.3.3.tgz",
@@ -9450,6 +9508,55 @@
         "webpack-sources": "^1.3.0"
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.0.3.tgz",
+      "integrity": "sha512-naLWiRfmtH4UJgtUktRTLw6FdoZJ2RvCR9ePbwM9aRMsS/KjFerkPZG9epEvXRAw5d5oPdrs9+3p+afNjxW8Xw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^5.7.3",
+        "bfj": "^6.1.1",
+        "chalk": "^2.4.1",
+        "commander": "^2.18.0",
+        "ejs": "^2.6.1",
+        "express": "^4.16.3",
+        "filesize": "^3.6.1",
+        "gzip-size": "^5.0.0",
+        "lodash": "^4.17.10",
+        "mkdirp": "^0.5.1",
+        "opener": "^1.5.1",
+        "ws": "^6.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "5.7.3",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
+          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "dev": true
+        },
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+          "dev": true
+        },
+        "opener": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
+          "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==",
+          "dev": true
+        },
+        "ws": {
+          "version": "6.1.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.3.tgz",
+          "integrity": "sha512-tbSxiT+qJI223AP4iLfQbkbxkwdFcneYinM2+x46Gx2wgvbaOMO36czfdfVUBRTHvzAMRhDd98sA5d/BuWbQdg==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
     "webpack-cli": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.2.1.tgz",

package.json

@@ -32,6 +32,7 @@
     "ts-loader": "^5.3.3",
     "typescript": "^3.2.4",
     "webpack": "^4.29.0",
+    "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"
   },

src/ts/editor/index.ts

@@ -1,7 +1,7 @@
-import TurndownService from 'turndown'
 import {gfm} from 'turndown-plugin-gfm/lib/turndown-plugin-gfm.es.js'
 import {commandable} from '../util/commandable'
 import {uploadFiles} from "../upload/index";
+import {i18n} from "../i18n/index";
 
 class Editor {
     element: HTMLTextAreaElement
@@ -19,6 +19,79 @@ class Editor {
         this.bindEvent(vditor)
     }
 
+    private html2md (TurndownService:any, vditor:Vditor, event:any) {
+        let onlyMultiCode = false
+        // no escape
+        TurndownService.prototype.escape = (string: string) => {
+            return string
+        }
+
+        const turndownService = new TurndownService()
+
+        turndownService.addRule('strikethrough', {
+            filter: ['pre', 'code'],
+            replacement: (content: string, node: HTMLElement) => {
+                if (node.parentElement.tagName === 'PRE') {
+                    return content
+                }
+                if (content.split('\n').length > 1) {
+                    onlyMultiCode = true
+                    return '```\n' + content + '\n```'
+                }
+                return '`' + content + '`'
+            },
+        })
+        turndownService.addRule('strikethrough', {
+            filter: ['img'],
+            replacement: (content: string, target: HTMLElement) => {
+                if (!target.getAttribute('src')) {
+                    return ''
+                }
+                if (vditor.options.upload.linkToImgUrl) {
+                    const xhr = new XMLHttpRequest()
+                    xhr.open('POST', vditor.options.upload.linkToImgUrl)
+                    xhr.onreadystatechange = () => {
+                        if (xhr.readyState === XMLHttpRequest.DONE) {
+                            if (xhr.status === 200) {
+                                const responseJSON = JSON.parse(xhr.responseText)
+                                const original = target.getAttribute('src')
+                                vditor.editor.element.selectionStart = vditor.editor.element.value.split(original)[0].length
+                                vditor.editor.element.selectionEnd = vditor.editor.element.selectionStart + original.length
+                                insertText(vditor.editor.element, responseJSON.url, '', true)
+                            }
+                        }
+                    }
+                    xhr.send(JSON.stringify({url: target.getAttribute('src')}))
+                }
+
+                return `![${target.getAttribute('alt')}](${target.getAttribute('src')})`
+            },
+        })
+
+        turndownService.use(gfm)
+
+        let markdownStr = turndownService.turndown(
+            event.clipboardData.getData('text/html'))
+
+        if (onlyMultiCode) {
+            const tempElement = document.createElement('div')
+            tempElement.innerHTML = event.clipboardData.getData('text/html')
+            if (tempElement.querySelectorAll('pre').length > 1) {
+                onlyMultiCode = false
+            } else if (markdownStr.substr(0, 3) !== '```' ||
+                markdownStr.substr(markdownStr.length - 3, 3) !== '```') {
+                onlyMultiCode = false
+            }
+        }
+        if (onlyMultiCode) {
+            insertText(vditor.editor.element,
+                '```\n' + event.clipboardData.getData('text/plain') + '\n```',
+                '', true)
+        } else {
+            insertText(vditor.editor.element, markdownStr, '', true)
+        }
+    }
+
     private bindEvent(vditor: Vditor) {
         this.element.addEventListener('input', () => {
             if (vditor.options.counter > 0) {
@@ -95,81 +168,24 @@ class Editor {
             })
         }
 
+        let TurndownService:any
+        const html2md = this.html2md
         this.element.addEventListener('paste', (event: any) => {
             event.stopPropagation()
             event.preventDefault()
 
             if (event.clipboardData.getData('text/html').replace(/(^\s*)|(\s*)$/g, '') !== '') {
-                let onlyMultiCode = false
-                // no escape
-                TurndownService.prototype.escape = (string: string) => {
-                    return string
+                if (!TurndownService) {
+                    import(/* webpackChunkName: "turndown" */ 'turndown').then(turndown => {
+                        TurndownService  = turndown.default
+                        html2md(TurndownService,vditor, event)
+                    }).catch(err => {
+                        console.log('Failed to load turndown', err);
+                    });
+                    return
                 }
+                html2md(TurndownService,vditor, event)
 
-                const turndownService = new TurndownService()
-
-                turndownService.addRule('strikethrough', {
-                    filter: ['pre', 'code'],
-                    replacement: (content: string, node: HTMLElement) => {
-                        if (node.parentElement.tagName === 'PRE') {
-                            return content
-                        }
-                        if (content.split('\n').length > 1) {
-                            onlyMultiCode = true
-                            return '```\n' + content + '\n```'
-                        }
-                        return '`' + content + '`'
-                    },
-                })
-                turndownService.addRule('strikethrough', {
-                    filter: ['img'],
-                    replacement: (content: string, target: HTMLElement) => {
-                        if (!target.getAttribute('src')) {
-                            return ''
-                        }
-                        if (vditor.options.upload.linkToImgUrl) {
-                            const xhr = new XMLHttpRequest()
-                            xhr.open('POST', vditor.options.upload.linkToImgUrl)
-                            xhr.onreadystatechange = () => {
-                                if (xhr.readyState === XMLHttpRequest.DONE) {
-                                    if (xhr.status === 200) {
-                                        const responseJSON = JSON.parse(xhr.responseText)
-                                        const original = target.getAttribute('src')
-                                        vditor.editor.element.selectionStart = vditor.editor.element.value.split(original)[0].length
-                                        vditor.editor.element.selectionEnd = vditor.editor.element.selectionStart + original.length
-                                        insertText(vditor.editor.element, responseJSON.url, '', true)
-                                    }
-                                }
-                            }
-                            xhr.send(JSON.stringify({url: target.getAttribute('src')}))
-                        }
-
-                        return `![${target.getAttribute('alt')}](${target.getAttribute('src')})`
-                    },
-                })
-
-                turndownService.use(gfm)
-
-                let markdownStr = turndownService.turndown(
-                    event.clipboardData.getData('text/html'))
-
-                if (onlyMultiCode) {
-                    const tempElement = document.createElement('div')
-                    tempElement.innerHTML = event.clipboardData.getData('text/html')
-                    if (tempElement.querySelectorAll('pre').length > 1) {
-                        onlyMultiCode = false
-                    } else if (markdownStr.substr(0, 3) !== '```' ||
-                        markdownStr.substr(markdownStr.length - 3, 3) !== '```') {
-                        onlyMultiCode = false
-                    }
-                }
-                if (onlyMultiCode) {
-                    insertText(vditor.editor.element,
-                        '```\n' + event.clipboardData.getData('text/plain') + '\n```',
-                        '', true)
-                } else {
-                    insertText(vditor.editor.element, markdownStr, '', true)
-                }
             } else if (event.clipboardData.getData('text/plain').replace(/(^\s*)|(\s*)$/g, '') !== '' &&
                 event.clipboardData.files.length === 0) {
                 insertText(event.target,

src/ts/emoji/allEmoji.ts

@@ -5,18 +5,7 @@
  * @version 0.1.0.0, Jan 28, 2019
  */
 
-import cPng from '../../assets/images/c.png'
-import dPng from '../../assets/images/d.png'
-import e50aPng from '../../assets/images/e50a.png'
-import fPng from '../../assets/images/f.png'
-import gPng from '../../assets/images/g.png'
-import iPng from '../../assets/images/i.png'
-import jPng from '../../assets/images/j.png'
-import kPng from '../../assets/images/k.png'
-import octocatPng from '../../assets/images/octocat.png'
-import rPng from '../../assets/images/r.png'
-import trollfacePng from '../../assets/images/trollface.png'
-import uPng from '../../assets/images/u.png'
+const imgStaticPath =  'https://vditor.b3log.org/images'
 
 export const allEmoji:any = {
   '+1': '👍',
@@ -140,7 +129,7 @@ export const allEmoji:any = {
   'busstop': '🚏',
   'busts_in_silhouette': '👥',
   'bust_in_silhouette': '👤',
-  'c': cPng,
+  'c': `${imgStaticPath}/c.png`,
   'cactus': '🌵',
   'cake': '🍰',
   'calendar': '📆',
@@ -244,7 +233,7 @@ export const allEmoji:any = {
   'custard': '🍮',
   'customs': '🛃',
   'cyclone': '🌀',
-  'd': dPng,
+  'd': `${imgStaticPath}/d.png`,
   'dancer': '💃',
   'dancers': '👯',
   'dango': '🍡',
@@ -275,7 +264,7 @@ export const allEmoji:any = {
   'droplet': '💧',
   'dvd': '📀',
   'e-mail': '📧',
-  'e50a': e50aPng,
+  'e50a': `${imgStaticPath}/e50a.png`,
   'ear': '👂',
   'earth_africa': '🌍',
   'earth_americas': '🌎',
@@ -300,7 +289,7 @@ export const allEmoji:any = {
   'expressionless': '😑',
   'eyeglasses': '👓',
   'eyes': '👀',
-  'f': fPng,
+  'f': `${imgStaticPath}/f.png`,
   'facepunch': '👊',
   'factory': '🏭',
   'fallen_leaf': '🍂',
@@ -341,7 +330,7 @@ export const allEmoji:any = {
   'fuelpump': '⛽',
   'full_moon': '🌕',
   'full_moon_with_face': '🌝',
-  'g': gPng,
+  'g': `${imgStaticPath}/g.png`,
   'game_die': '🎲',
   'gb': '🇬🇧',
   'gem': '💎',
@@ -409,7 +398,7 @@ export const allEmoji:any = {
   'house': '🏠',
   'house_with_garden': '🏡',
   'hushed': '😯',
-  'i': iPng,
+  'i': `${imgStaticPath}/i.png`,
   'icecream': '🍦',
   'ice_cream': '🍨',
   'id': '🇮🇩',
@@ -424,7 +413,7 @@ export const allEmoji:any = {
   'iphone': '📱',
   'it': '🇮🇹',
   'izakaya_lantern': '🏮',
-  'j': jPng,
+  'j': `${imgStaticPath}/j.png`,
   'jack_o_lantern': '🎃',
   'japan': '🗾',
   'japanese_castle': '🏯',
@@ -434,7 +423,7 @@ export const allEmoji:any = {
   'joy': '😂',
   'joy_cat': '😹',
   'jp': '🇯🇵',
-  'k': kPng,
+  'k': `${imgStaticPath}/k.png`,
   'key': '🔑',
   'keycap_ten': '🔟',
   'kimono': '👘',
@@ -550,7 +539,7 @@ export const allEmoji:any = {
   'o': '⭕',
   'o2': '🅾',
   'ocean': '🌊',
-  'octocat': octocatPng,
+  'octocat': `${imgStaticPath}/octocat.png`,
   'octopus': '🐙',
   'oden': '🍢',
   'office': '🏢',
@@ -626,7 +615,7 @@ export const allEmoji:any = {
   'pushpin': '📌',
   'put_litter_in_its_place': '🚮',
   'question': '❓',
-  'r': rPng,
+  'r': `${imgStaticPath}/r.png`,
   'rabbit': '🐰',
   'rabbit2': '🐇',
   'racehorse': '🐎',
@@ -803,7 +792,7 @@ export const allEmoji:any = {
   'trident': '🔱',
   'triumph': '😤',
   'trolleybus': '🚎',
-  'trollface': trollfacePng,
+  'trollface': `${imgStaticPath}/trollface.png`,
   'trophy': '🏆',
   'tropical_drink': '🍹',
   'tropical_fish': '🐠',
@@ -818,7 +807,7 @@ export const allEmoji:any = {
   'two_hearts': '💕',
   'two_men_holding_hands': '👬',
   'two_women_holding_hands': '👭',
-  'u': uPng,
+  'u': `${imgStaticPath}/u.png`,
   'u5272': '🈹',
   'u5408': '🈴',
   'u55b6': '🈺',

src/ts/hint/index.ts

@@ -1,5 +1,6 @@
 import {getTextareaPosition} from "../util/textareaPosition";
 import {insertText} from "../editor/index";
+import {allEmoji} from "../emoji/allEmoji";
 
 export class Hint {
     timeId: number

src/ts/util/OptionsClass.ts

@@ -1,5 +1,3 @@
-import {allEmoji} from '../emoji/allEmoji'
-
 export class OptionsClass {
     options: Options;
     private defaultOptions: Options = {
@@ -18,13 +16,12 @@ export class OptionsClass {
         },
         hint: {
             delay: 200,
-            emoji: [
-                "+1",
-                "-1",
-                "100",
-                "octocat",
-                "trollface",
-            ],
+            emoji: {
+                '+1': '👍',
+                '-1': '👎',
+                'heart': '❤️',
+                'cold_sweat': '😰',
+            },
         },
         counter: 0,
         upload: {
@@ -200,13 +197,6 @@ export class OptionsClass {
 
         const mergedOptions = Object.assign({}, this.defaultOptions, this.options)
 
-        // array emoji to object emoji
-        const objectEmoji: any = {}
-        mergedOptions.hint.emoji.forEach((emoji: string) => {
-            objectEmoji[emoji] = allEmoji[emoji]
-        })
-        mergedOptions.hint.emoji = objectEmoji
-
         if (toolbar.length > 0) {
             mergedOptions.toolbar = toolbar
         }

webpack.config.js

@@ -12,6 +12,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const WebpackOnBuildPlugin = require('on-build-webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const pkg = require('./package.json')
 
 const banner = new webpack.BannerPlugin({
@@ -114,6 +115,7 @@ module.exports = [
       ],
     },
     plugins: [
+      new BundleAnalyzerPlugin(),
       new CleanWebpackPlugin(['./dist/vditor']),
       new webpack.DefinePlugin({
         VDITOR_VERSION: JSON.stringify(pkg.version),