:tada: event

demo/demo.js

@@ -14,6 +14,24 @@ const vditor = new Vditor('vditor', {
   classes: {
     preview: 'content-reset',
   },
+  focus:(val)=> {
+    console.log(`focus: ${val}`)
+  },
+  blur:(val)=> {
+    console.log(`blur: ${val}`)
+  },
+  input: (val, mdElement)=> {
+    console.log('change:' + val, mdElement)
+  },
+  esc: (val)=> {
+    console.log(`esc: ${val}`)
+  },
+  ctrlEnter: (val)=> {
+    console.log(`ctrlEnter: ${val}`)
+  },
+  select: (val)=> {
+    console.log(`select: ${val}`)
+  },
   toolbar: [
     'preview',
     {

src/assets/classic.scss

@@ -28,6 +28,7 @@
     border: 0;
     font-size: 14px;
     resize: none;
+    padding: 10px;
     box-sizing: border-box;
 
     &:focus {
@@ -42,6 +43,10 @@
     padding: 10px;
     box-shadow: inset 1px 0 hsla(0,0%,50.2%,.06);
     box-sizing: border-box;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &-counter {

src/ts/editor/index.ts

@@ -13,16 +13,47 @@ class Editor {
 
     private bindEvent(vditor: Vditor) {
         this.element.addEventListener('input', () => {
-
             if (vditor.options.counter > 0) {
                 vditor.counter.render(this.element.value.length, vditor.options.counter)
             }
-        })
-        this.element.addEventListener('focus', () => {
-            if (vditor.options.counter > 0) {
-                vditor.counter.render(this.element.value.length, vditor.options.counter)
+            if (vditor.options.input) {
+                vditor.options.input(this.element.value, vditor.markdown && vditor.markdown.element)
             }
         })
+        if (vditor.options.focus) {
+            this.element.addEventListener('focus', () => {
+                vditor.options.focus(this.element.value)
+            })
+        }
+        if (vditor.options.blur) {
+            this.element.addEventListener('blur', () => {
+                vditor.options.blur(this.element.value)
+            })
+        }
+        if (vditor.options.select) {
+            this.element.onselect = () => {
+                vditor.options.select(this.element.value.substring(
+                    this.element.selectionStart, this.element.selectionEnd))
+            }
+        }
+        if (vditor.markdown) {
+            this.element.addEventListener('scroll', () => {
+                if (vditor.markdown.element.style.display === 'none') {
+                    return
+                }
+                const textScrollTop = this.element.scrollTop
+                const textHeight = this.element.clientHeight
+                const textScrollHeight = this.element.scrollHeight
+                const preview = vditor.markdown.element
+                if ((textScrollTop / textHeight > 0.5)) {
+                    preview.scrollTop = (textScrollTop + textHeight) *
+                        preview.scrollHeight / textScrollHeight - textHeight
+                } else {
+                    preview.scrollTop = textScrollTop *
+                        preview.scrollHeight / textScrollHeight
+                }
+            })
+        }
     }
 }
 

src/ts/hotkey/index.ts

@@ -12,6 +12,16 @@ export class Hotkey {
 
     private bindHotkey(): void {
         this.editorElement.addEventListener('keydown', (event) => {
+            if (this.options.esc) {
+                if(event.key.toLowerCase() === 'Escape'.toLowerCase()) {
+                    this.options.esc(this.editorElement.value)
+                }
+            }
+            if (this.options.ctrlEnter) {
+                if( (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'Enter'.toLowerCase()) {
+                    this.options.ctrlEnter(this.editorElement.value)
+                }
+            }
             this.options.toolbar.forEach((menuItem: MenuItem) => {
                 if (!menuItem.hotkey) {
                     return

src/ts/markdown/index.ts

@@ -11,10 +11,7 @@ export class Markdown {
 
     constructor(vditor: Vditor) {
         this.element = document.createElement('div')
-        this.element.className = 'vditor-preview' + (vditor.options.classes.preview ? ' ' + vditor.options.classes.preview : '')
+        this.element.className = 'vditor-preview' +
+            (vditor.options.classes.preview ? ' ' + vditor.options.classes.preview : '')
     }
-
-    renderPreview(html: string) {
-        this.element.innerHTML = html
-    }
-}
+}

src/ts/types/index.d.ts

@@ -40,10 +40,15 @@ interface Options {
     atUserCallback?: object | string
     commonEmoji?: any
     toolbar?: Array<string | MenuItem>
-    change?: ChangeFunction
+    input?: InputFunction
+    focus?: { (value: string): void }
+    blur?: { (value: string): void }
+    esc?: { (value: string): void }
+    ctrlEnter?: { (value: string): void }
+    select?: { (value: string): void }
 }
 
-interface ChangeFunction {
+interface InputFunction {
     (value: string, previewElement?: HTMLElement): void
 }