:art: delay load record

demo/demo.js

@@ -10,14 +10,33 @@ const vditor = new Vditor('vditor', {
   draggable: true,
   placeholder: 'say sth...',
   lang: 'en_US',
-  previewShow: true,
+  preview: {
+    url: '/api/markdown',
+    parse: (element) => {
+      console.log(element)
+    },
+  },
+  hint: {
+    emoji: {
+      '+1': '👍',
+      '-1': '👎',
+    },
+    at: (key) => {
+      console.log(`atUser: ${key}`)
+      return [
+        {
+          value: '@88250',
+          html: '<img src="https://img.hacpai.com/avatar/1353745196354_1535379434567.png?imageView2/1/w/52/h/52/interlace/0/q"> 88250',
+        },
+        {
+          value: '@Vanessa',
+          html: '<img src="https://img.hacpai.com/avatar/1353745196354_1535379434567.png?imageView2/1/w/52/h/52/interlace/0/q"> Vanessa',
+        }]
+    },
+  },
   classes: {
     preview: 'content-reset',
   },
-  commonEmoji: {
-    '+1': '👍',
-    '-1': '👎',
-  },
   focus: (val) => {
     console.log(`focus value: ${val}`)
     console.log(
@@ -38,18 +57,6 @@ const vditor = new Vditor('vditor', {
   select: (val) => {
     console.log(`select: ${val}`)
   },
-  atUser: (key) => {
-    console.log(`atUser: ${key}`)
-    return [
-      {
-        value: '@88250',
-        html: '<img src="https://img.hacpai.com/avatar/1353745196354_1535379434567.png?imageView2/1/w/52/h/52/interlace/0/q"> 88250',
-      },
-      {
-        value: '@Vanessa',
-        html: '<img src="https://img.hacpai.com/avatar/1353745196354_1535379434567.png?imageView2/1/w/52/h/52/interlace/0/q"> Vanessa',
-      }]
-  },
   toolbar: [
     {
       name: 'preview',
@@ -65,14 +72,17 @@ const vditor = new Vditor('vditor', {
 })
 
 const vditor2 = new Vditor('vditor2', {
-  parseMarkdown: (element) => {
-    console.log(element)
-  },
-  markdownUrl: '/api/markdown',
   upload: {
     url: '/api/upload/editor',
     linkToImgUrl: '/api/fetch-upload',
   },
+  preview: {
+    show: true,
+    url: '/api/markdown',
+    parse: (element) => {
+      console.log(element)
+    },
+  },
 })
 
 // vditor.insertVale('Hi, Vditor!')

package.json

@@ -1,13 +1,12 @@
 {
   "name": "vditor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A markdown editor written in TypeScript",
   "author": " Vanessa <[email protected]> (http://vanessa.b3log.org)",
   "homepage": "https://hacpai.com/cr",
-  "main": "dist/index.js",
+  "main": "dist/index.min.js",
   "files": [
-    "dist/index.classic.css",
-    "dist/index.min.js"
+    "dist/*"
   ],
   "dependencies": {
     "recordrtc": "^5.5.3",
@@ -39,10 +38,10 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/b3log/b3log-editor"
+    "url": "https://github.com/b3log/vditor"
   },
   "bugs": {
-    "url": "https://github.com/b3log/b3log-editor/issues"
+    "url": "https://github.com/b3log/vditor/issues"
   },
   "scripts": {
     "build": "webpack --env.production",

src/ts/hint/index.ts

@@ -11,10 +11,10 @@ export class Hint {
 
     constructor(vditor: Vditor) {
         this.timeId = -1
-        this.hintDelay = vditor.options.hintDelay
+        this.hintDelay = vditor.options.hint.delay
         this.editorElement = vditor.editor.element
-        this.atUser = vditor.options.atUser
-        this.commonEmoji = vditor.options.commonEmoji
+        this.atUser = vditor.options.hint.at
+        this.commonEmoji = vditor.options.hint.emoji
 
         this.element = document.createElement('ul')
         this.element.className = 'vditor-hint'

src/ts/hotkey/index.ts

@@ -42,7 +42,7 @@ export class Hotkey {
                 }
             })
 
-            if (this.options.atUser || this.toolbarElements.emoji) {
+            if (this.options.hint.at || this.toolbarElements.emoji) {
                 this.hint(event)
             }
         })

src/ts/markdown/index.ts

@@ -5,6 +5,10 @@ export class Markdown {
         this.element = document.createElement('div')
         this.element.className = 'vditor-preview' +
             (vditor.options.classes.preview ? ' ' + vditor.options.classes.preview : '')
+
+        if (this.element.style.display !== 'none') {
+            this.render(vditor)
+        }
     }
 
     render(vditor: Vditor, value?: string) {
@@ -14,18 +18,18 @@ export class Markdown {
 
         if (value) {
             this.element.innerHTML = value
-        } else if (vditor.options.markdownUrl) {
+        } else if (vditor.options.preview.url) {
             clearTimeout(vditor.mdTimeoutId)
             vditor.mdTimeoutId = setTimeout(() => {
                 const xhr = new XMLHttpRequest()
-                xhr.open('POST', vditor.options.markdownUrl)
+                xhr.open('POST', vditor.options.preview.url)
                 xhr.onreadystatechange = () => {
                     if (xhr.readyState === XMLHttpRequest.DONE) {
                         if (xhr.status === 200) {
                             const responseJSON = JSON.parse(xhr.responseText)
                             this.element.innerHTML = responseJSON.html
-                            if (vditor.options.parseMarkdown) {
-                                vditor.options.parseMarkdown(this.element)
+                            if (vditor.options.preview.parse) {
+                                vditor.options.preview.parse(this.element)
                             }
                         }
                     }
@@ -34,7 +38,7 @@ export class Markdown {
                 xhr.send(JSON.stringify({
                     markdownText: vditor.editor.element.value,
                 }))
-            }, vditor.options.previewDelay)
+            }, vditor.options.preview.delay)
         } else {
             this.element.innerHTML = vditor.editor.element.value
         }

src/ts/toolbar/Emoji.ts

@@ -13,8 +13,8 @@ export class Emoji extends MenuItemClass {
         emojiPanelElement.className = 'vditor-panel'
 
         let commonEmojiHTML = ''
-        Object.keys(vditor.options.commonEmoji).forEach((key) => {
-            const emojiValue = vditor.options.commonEmoji[key]
+        Object.keys(vditor.options.hint.emoji).forEach((key) => {
+            const emojiValue = vditor.options.hint.emoji[key]
             if (emojiValue.indexOf('.') > -1) {
                 commonEmojiHTML += `<span data-value=":${key}: " title=":${key}:"><img data-value=":${key}: " src="${emojiValue}"/></span>`
             } else {

src/ts/toolbar/Preview.ts

@@ -5,7 +5,7 @@ export class Preview extends MenuItemClass {
     constructor(vditor: Vditor, menuItem: MenuItem) {
         super(vditor, menuItem)
         this.element.children[0].innerHTML = menuItem.icon || previewSVG
-        if (vditor.options.previewShow) {
+        if (vditor.options.preview.show) {
             this.element.children[0].className = `vditor-tooltipped vditor-tooltipped__${menuItem.tipPosition} vditor-menu--current`
         }
         this._bindEvent(vditor, menuItem)

src/ts/toolbar/Record.ts

@@ -13,20 +13,29 @@ export class Record extends MenuItemClass {
 
     _bindEvent(vditor: Vditor) {
         let mediaRecorder: any
-        import(/* webpackChunkName: "recordrtc" */ 'recordrtc/RecordRTC.js').then(RecordRTC => {
-            navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
-                mediaRecorder = new RecordRTC.default(mediaStream, {
-                    type: 'audio',
-                    mimeType: 'audio/wav',
+        this.element.children[0].addEventListener('click', () => {
+            if (!mediaRecorder) {
+                import(/* webpackChunkName: "recordrtc" */ 'recordrtc/RecordRTC.js').then(RecordRTC => {
+                    navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
+                        mediaRecorder = new RecordRTC.default(mediaStream, {
+                            type: 'audio',
+                            mimeType: 'audio/wav',
+                        });
+
+                        vditor.upload.element.children[0].innerHTML = i18n[vditor.options.lang].recoding
+                        vditor.upload.element.style.opacity = 1
+                        vditor.upload.element.className = 'vditor-upload vditor-upload--tip'
+                        vditor.editor.element.setAttribute('disabled', 'disabled')
+                        mediaRecorder.startRecording()
+                    }).catch((err: ErrorEvent) => {
+                        console.log('init media error:', err);
+                    });
+                }).catch(err => {
+                    console.log('Failed to load marked', err);
                 });
-            }).catch((err: ErrorEvent) => {
-                console.log('init media error:', err);
-            });
-        }).catch(err => {
-            console.log('Failed to load marked', err);
-        });
+                return
+            }
 
-        this.element.children[0].addEventListener('click', () => {
             if ('recording' === mediaRecorder.getState()) {
                 mediaRecorder.stopRecording(function () {
                     const blob = mediaRecorder.getBlob();

src/ts/types/index.d.ts

@@ -13,14 +13,16 @@ declare module 'turndown'
 
 declare module 'turndown-plugin-gfm/lib/turndown-plugin-gfm.es.js'
 
+declare function captureEvents(name: string): void
+
 interface Classes {
     preview?: string
 }
 
 interface Upload {
     url: string
-    max: number
-    linkToImgUrl: string
+    max?: number
+    linkToImgUrl?: string
     success?: { (textarea: HTMLTextAreaElement, msg: string): void }
     error?: { (msg: string): void }
 }
@@ -36,36 +38,38 @@ interface MenuItem {
     tipPosition?: string
 }
 
+interface Preview {
+    delay?: number
+    show?: boolean
+    parse?: { (element: HTMLElement): void }
+    url?: string
+}
+
+interface Hint {
+    delay?: number
+    emoji?: any
+    at?: { (value: string): Array<any> }
+}
+
 interface Options {
-    previewDelay: number
-    hintDelay: number
-    parseMarkdown?: { (element: HTMLElement): void }
-    markdownUrl?: string
     height?: number | string
     width?: number | string
-    theme?: string
     placeholder?: string
     lang?: string
+    toolbar?: Array<string | MenuItem>
     draggable?: boolean
-    previewShow?: boolean
     counter?: number
+    userCache?: boolean
+    preview?: Preview
+    hint?: Hint
     upload?: Upload
     classes?: Classes
-    staticServePath?: string
-    atUser?: { (value: string): Array<any> }
-    commonEmoji?: any
-    toolbar?: Array<string | MenuItem>
-    input?: InputFunction
+    input?: { (value: string, previewElement?: HTMLElement): void }
     focus?: { (value: string): void }
     blur?: { (value: string): void }
     esc?: { (value: string): void }
     ctrlEnter?: { (value: string): void }
     select?: { (value: string): void }
-    userCache: boolean
-}
-
-interface InputFunction {
-    (value: string, previewElement?: HTMLElement): void
 }
 
 interface Vditor {
@@ -80,6 +84,4 @@ interface Vditor {
     drag?: any
     hint?: any
     upload?: any
-}
-
-declare function captureEvents(name: string): void
+}

src/ts/ui/index.ts

@@ -24,7 +24,7 @@ export class Ui {
         contentElement.appendChild(vditor.editor.element)
 
         if (vditor.markdown) {
-            if (!vditor.options.previewShow) {
+            if (!vditor.options.preview.show) {
                 vditor.markdown.element.style.display = 'none'
             }
             contentElement.appendChild(vditor.markdown.element)

src/ts/util/OptionsClass.ts

@@ -7,15 +7,24 @@ export class OptionsClass {
         userCache: true,
         height: 'auto',
         width: 'auto',
-        theme: 'classic',
         placeholder: '',
         lang: 'zh_CN',
         draggable: false,
-        previewShow: false,
+        preview: {
+            delay: 1000,
+            show: false
+        },
+        hint: {
+            delay: 200,
+            emoji: {
+                "+1": "👍",
+                "-1": "👎",
+                "100": "💯",
+                "octocat": octocatPng,
+                "trollface": trollfacePng,
+            },
+        },
         counter: 0,
-        previewDelay: 1000,
-        hintDelay: 500,
-        markdownUrl: '',
         upload: {
             url: '',
             max: 10 * 1024 * 1024,
@@ -24,13 +33,6 @@ export class OptionsClass {
         classes: {
             preview: ''
         },
-        commonEmoji: {
-            "+1": "👍",
-            "-1": "👎",
-            "100": "💯",
-            "octocat": octocatPng,
-            "trollface": trollfacePng,
-        },
         toolbar: [{
             name: 'emoji',
             hotkey: '⌘-e',

webpack.config.js

@@ -145,6 +145,7 @@ const baseConfig = [
       }),
       new WebpackOnBuildPlugin(() => {
         fs.unlinkSync('./dist/index.classic.js')
+        fs.unlinkSync('./dist/index.dark.js')
       }),
     ],
   }]