diff --git a/demo/demo.js b/demo/demo.js index b6d598e31..d30bebe4b 100644 --- a/demo/demo.js +++ b/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, diff --git a/package.json b/package.json index f4899480b..90f7c507b 100755 --- a/package.json +++ b/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 (http://vanessa.b3log.org)", "homepage": "https://hacpai.com/cr", diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg new file mode 100755 index 000000000..1b4a81a9e --- /dev/null +++ b/src/assets/icons/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/scss/_content.scss b/src/assets/scss/_content.scss index 7e98f1a36..5a4cbe502 100644 --- a/src/assets/scss/_content.scss +++ b/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 { diff --git a/src/assets/scss/classic.scss b/src/assets/scss/classic.scss index 13ea62b7f..576b4d25c 100755 --- a/src/assets/scss/classic.scss +++ b/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"; diff --git a/src/assets/scss/dark.scss b/src/assets/scss/dark.scss index 6dba65cf4..c40eedd95 100644 --- a/src/assets/scss/dark.scss +++ b/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"; diff --git a/src/ts/counter/index.ts b/src/ts/counter/index.ts index 3f58297b8..352728d18 100644 --- a/src/ts/counter/index.ts +++ b/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}` } } \ No newline at end of file diff --git a/src/ts/i18n/index.ts b/src/ts/i18n/index.ts index e8182360f..3e5f788bd 100644 --- a/src/ts/i18n/index.ts +++ b/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: '关于' } } \ No newline at end of file diff --git a/src/ts/toolbar/Fullscreen.ts b/src/ts/toolbar/Fullscreen.ts index e6e6c090d..caf6e255b 100644 --- a/src/ts/toolbar/Fullscreen.ts +++ b/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') + } + }) } - }) } } \ No newline at end of file diff --git a/src/ts/toolbar/Help.ts b/src/ts/toolbar/Help.ts index 31a010889..c28d7076b 100644 --- a/src/ts/toolbar/Help.ts +++ b/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') }) } } \ No newline at end of file diff --git a/src/ts/toolbar/Info.ts b/src/ts/toolbar/Info.ts new file mode 100644 index 000000000..79d27a635 --- /dev/null +++ b/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') + }) + } +} \ No newline at end of file diff --git a/src/ts/toolbar/MenuItemClass.ts b/src/ts/toolbar/MenuItemClass.ts index 6e5f0a441..177f9ec0c 100644 --- a/src/ts/toolbar/MenuItemClass.ts +++ b/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) diff --git a/src/ts/toolbar/index.ts b/src/ts/toolbar/index.ts index 9958a2b73..ffae52f0b 100644 --- a/src/ts/toolbar/index.ts +++ b/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 diff --git a/src/ts/util/OptionsClass.ts b/src/ts/util/OptionsClass.ts index 14a3bd37c..cdfe942f7 100644 --- a/src/ts/util/OptionsClass.ts +++ b/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: '⌘-/',