🐛 fix #1

demo/demo.js

@@ -1,5 +1,5 @@
-// import Vditor from '../src/index'
-import Vditor from '../dist/vditor/index.min'
+import Vditor from '../src/index'
+// import Vditor from '../dist/vditor/index.min'
 
 const vditor = new Vditor('vditor', {
   cache: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A markdown editor written in TypeScript",
   "author": " Vanessa <[email protected]> (http://vanessa.b3log.org)",
   "homepage": "https://hacpai.com/cr",

src/assets/scss/_content.scss

@@ -58,12 +58,17 @@
     padding: 0 3px;
     position: absolute;
     bottom: 10px;
-    right: 10px;
+    right: 20px;
     color: $textareaColor;
-    background-color: $countBg;
+    background-color: rgba($fullscreenBg, 0.6);
     border-radius: 3px;
     font-size: 12px;
     user-select: none;
+
+    &--error {
+      color: $errorColor;
+      background-color: rgba($errorColor, 0.1);
+    }
   }
 
   &-drag {

src/assets/scss/classic.scss

@@ -1,4 +1,5 @@
 $borderColor: #d1d5da !default;
+$errorColor: #d23f31!default;
 
 $toolbarBg: #f6f8fa !default;
 $toolbarIcon: #586069 !default;
@@ -22,7 +23,6 @@ $dragHoverBg: #4285f4 !default;
 
 $fullscreenBg: #fff !default;
 $previewBg: #fff !default;
-$countBg: rgba(255, 255, 255, 0.8) !default;
 
 @import "tooltipped";
 @import "panel";

src/assets/scss/dark.scss

@@ -3,6 +3,7 @@ $borderColor: #fff !default;
 $toolbarBg: #2c2c2c !default;
 $toolbarIcon: #b9b9b9 !default;
 $toolbarIconHover: #fff !default;
+$errorColor: #d23f31!default;
 
 $textareaBg: #fff !default;
 $textareaColor: rgba(0,0,0,.8) !default;
@@ -22,7 +23,6 @@ $hoverColor: #fff !default;
 
 $fullscreenBg: #fff !default;
 $previewBg: #f3f3f3 !default;
-$countBg: rgba(255, 255, 255, 0.8) !default;
 
 @import "tooltipped";
 @import "panel";

src/ts/counter/index.ts

@@ -10,6 +10,11 @@ export class Counter {
     }
 
     render(length: number, counter: number) {
+        if (length > counter) {
+            this.element.className = 'vditor-counter vditor-counter--error'
+        } else {
+            this.element.className = 'vditor-counter'
+        }
         this.element.innerHTML = `${length}/${counter}`
     }
 }

src/ts/i18n/index.ts

@@ -18,13 +18,14 @@ export const i18n: any = {
         redo: 'Redo',
         undo: 'Undo',
         table: 'Table',
-        record: 'Start Record/Cancel Record and Upload',
-        upload: 'Upload, support drag and copy',
+        record: 'Start Record/Cancel Record',
+        upload: 'Upload image or file',
         preview: 'Preview',
         uploading: 'uploading...',
         over: 'over',
         uploadError: 'upload error',
-        recoding: 'recoding...'
+        recoding: 'recoding...',
+        info: 'Info'
     },
     zh_CN: {
         emoji: '表情',
@@ -38,19 +39,20 @@ export const i18n: any = {
         fullscreen: '全屏',
         help: '帮助',
         strike: '删除线',
-        line: '横线',
+        line: '分隔线',
         check: '任务列表',
         code: '代码片断',
         'inline-code': '行内代码',
         redo: '重做',
         undo: '撤销',
         table: '表格',
-        record: '开始录音/取消录音并上传',
-        upload: '上传，支持拖拽及复制',
+        record: '开始录音/结束录音',
+        upload: '上传图片或文件',
         preview: '预览',
         uploading: '上传中...',
         over: '超过',
         uploadError: '上传错误',
-        recoding: '录音中...'
+        recoding: '录音中...',
+        info: '关于'
     }
 }

src/ts/toolbar/Fullscreen.ts

@@ -15,11 +15,22 @@ export class Fullscreen extends MenuItemClass {
             if (vditorElement.className.indexOf('vditor--fullscreen') > -1) {
                 this.innerHTML = menuItem.icon || fullscreenSVG
                 vditorElement.className = vditorElement.className.replace(' vditor--fullscreen', '')
+                Object.keys(vditor.toolbar.elements).forEach((key) => {
+                    const svgElement = vditor.toolbar.elements[key].firstChild
+                    if (svgElement) {
+                        svgElement.className = svgElement.className.replace('__s', '__n')
+                    }
+                })
             } else {
                 this.innerHTML = menuItem.icon || contractSVG
                 vditorElement.className = vditorElement.className + ' vditor--fullscreen'
+                Object.keys(vditor.toolbar.elements).forEach((key) => {
+                    const svgElement = vditor.toolbar.elements[key].firstChild
+                    if (svgElement) {
+                        svgElement.className = svgElement.className.replace('__n', '__s')
+                    }
+                })
             }
-
         })
     }
 }

src/ts/toolbar/Help.ts

@@ -10,7 +10,7 @@ export class Help extends MenuItemClass {
 
     bindEvent() {
         this.element.children[0].addEventListener('click', () => {
-            window.open('https://github.com/b3log/vditor')
+            window.open('https://hacpai.com/guide/markdown')
         })
     }
 }

src/ts/toolbar/Info.ts

@@ -0,0 +1,16 @@
+import infoSVG from "../../assets/icons/info.svg";
+import {MenuItemClass} from "./MenuItemClass";
+
+export class Info extends MenuItemClass {
+    constructor(vditor: Vditor, menuItem: MenuItem) {
+        super(vditor, menuItem)
+        this.element.children[0].innerHTML = menuItem.icon || infoSVG
+        this.bindEvent()
+    }
+
+    bindEvent() {
+        this.element.children[0].addEventListener('click', () => {
+            window.open('https://github.com/b3log/vditor')
+        })
+    }
+}

src/ts/toolbar/MenuItemClass.ts

@@ -15,11 +15,11 @@ export class MenuItemClass {
         const iconElement = document.createElement('div')
         iconElement.className = `vditor-tooltipped vditor-tooltipped__${menuItem.tipPosition}`
 
-        const hotkey = this.menuItem.hotkey ? ` <${this.menuItem.hotkey}>` : ''
+        let hotkey = this.menuItem.hotkey ? ` <${this.menuItem.hotkey}>` : ''
         if (/Mac/.test(navigator.platform)) {
-            hotkey.replace('ctrl', '⌘')
+            hotkey = hotkey.replace('ctrl', '⌘')
         } else {
-            hotkey.replace('⌘', 'ctrl')
+            hotkey = hotkey.replace('⌘', 'ctrl')
         }
         iconElement.setAttribute('aria-label',
             this.menuItem.tip || i18n[vditor.options.lang][this.menuItem.name] + hotkey)

src/ts/toolbar/index.ts

@@ -21,6 +21,7 @@ import {Preview} from "./Preview";
 import {Fullscreen} from "./Fullscreen";
 import {Upload} from "./Upload";
 import {Record} from "./Record";
+import {Info} from "./Info";
 
 export class Toolbar {
     elements: any
@@ -101,6 +102,9 @@ export class Toolbar {
                 case 'record':
                     menuItemObj = new Record(vditor, menuItem)
                     break
+                case 'info':
+                    menuItemObj = new Info(vditor, menuItem)
+                    break
                 default:
                     console.log('menu item no matched')
                     break

src/ts/util/OptionsClass.ts

@@ -62,7 +62,7 @@ export class OptionsClass {
             name: '|'
         }, {
             name: 'line',
-            prefix: '* * *\n',
+            prefix: '---\n',
             hotkey: '⌘-d',
             tipPosition: 'n'
         }, {
@@ -119,18 +119,17 @@ export class OptionsClass {
         }, {
             name: 'link',
             prefix: '[',
-            suffix: '](http://)',
+            suffix: '](https://)',
             hotkey: '⌘-k',
             tipPosition: 'n'
         }, {
             name: 'table',
-            prefix: '| ',
-            suffix: ' |  |  |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |',
+            prefix: '| col1',
+            suffix: ' | col2 | col3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |',
             hotkey: '⌘-m',
             tipPosition: 'n'
         }, {
             name: 'record',
-            hotkey: '⌘-;',
             tipPosition: 'n'
         }, {
             name: '|'
@@ -142,6 +141,10 @@ export class OptionsClass {
             name: 'fullscreen',
             hotkey: '⌘-f',
             tipPosition: 'nw'
+        }, {
+            name: 'info',
+            hotkey: '⌘-;',
+            tipPosition: 'nw'
         }, {
             name: 'help',
             hotkey: '⌘-/',