8 files changed, 66 insertions, 21 deletions
diff --git a/public/.eslintrc.js b/public/.eslintrc.js
new file mode 100644
index 00000000..dc37b3cb
--- /dev/null
+++ b/public/.eslintrc.js
@@ -0,0 +1,28 @@
+// this config file is used in concert with the root .eslintrc.js in the root dir.
+module.exports = {
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "$": false,
+    "CodeMirror": false,
+    "Cookies": false,
+    "moment": false,
+    "editor": false,
+    "ui": false,
+    "Spinner": false,
+    "modeType": false,
+    "Idle": false,
+    "serverurl": false,
+    "key": false,
+    "gapi": false,
+    "Dropbox": false,
+    "FilePicker": false,
+    "ot": false,
+    "MediaUploader": false,
+    "hex2rgb": false,
+    "num_loaded": false,
+    "Visibility": false,
+    "inlineAttachment": false
+  }
+};
diff --git a/public/docs/features.md b/public/docs/features.md
index 31c08d2e..a4ffb633 100644
--- a/public/docs/features.md
+++ b/public/docs/features.md
@@ -72,9 +72,11 @@ Notes can be embedded as follows:
 
 ## [Slide Mode](./slide-example):
 You can use a special syntax to organize your note into slides.
-After that, you can use the **Slide Mode** <i class="fa fa-tv"></i> to make a presentation.
+After that, you can use the **[Slide Mode](./slide-example)** <i class="fa fa-tv"></i> to make a presentation.
 Visit the above link for details.
 
+To switch the editor into slide mode, set the [document type](./yaml-metadata#type) to `slide`.
+
 View
 ===
 ## Table of Contents:
diff --git a/public/docs/slide-example.md b/public/docs/slide-example.md
index 5503cbd7..49503669 100644
--- a/public/docs/slide-example.md
+++ b/public/docs/slide-example.md
@@ -1,4 +1,5 @@
 ---
+type: slide
 slideOptions:
   transition: slide
 ---
diff --git a/public/docs/yaml-metadata.md b/public/docs/yaml-metadata.md
index 888345f7..839616a8 100644
--- a/public/docs/yaml-metadata.md
+++ b/public/docs/yaml-metadata.md
@@ -25,7 +25,7 @@ This option will set the note title which prior than content title.
 > default: not set
 
 **Example**
-```xml
+```yml
 title: meta title
 ```
 
@@ -36,7 +36,7 @@ This option will set the note description.
 > default: not set
 
 **Example**
-```xml
+```yml
 description: meta description
 ```
 
@@ -47,7 +47,7 @@ This option will set the tags which prior than content tags.
 > default: not set
 
 **Example**
-```xml
+```yml
 tags: features, cool, updated
 ```
 
@@ -62,7 +62,7 @@ So you can prevent any search engine index your note by set `noindex, nofollow`.
 > default: not set
 
 **Example**
-```xml
+```yml
 robots: noindex, nofollow
 ```
 
@@ -75,13 +75,13 @@ https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
 > default: not set (which will be en)
 
 **Example**
-```xml
+```yml
 langs: ja-jp
 ```
 
 dir
 ---
-This option provide to describe the direction of the text in this note.
+This option specifies the direction of the text in this note.
 You can only use whether `rtl` or `ltr`.
 Look more at here:
 http://www.w3.org/International/questions/qa-html-dir
@@ -89,7 +89,7 @@ http://www.w3.org/International/questions/qa-html-dir
 > default: not set (which will be ltr)
 
 **Example**
-```xml
+```yml
 dir: rtl
 ```
 
@@ -102,35 +102,46 @@ You can only use whether `true` or `false`.
 > default: not set (which will be true)
 
 **Example**
-```xml
+```yml
 breaks: false
 ```
 
 GA
 ---
-This option allow you to enable Google Analytics with your ID.
+This option allows you to enable Google Analytics with your ID.
 
 > default: not set (which won't enable)
 
 **Example**
-```xml
+```yml
 GA: UA-12345667-8
 ```
 
 disqus
 ---
-This option allow you to enable Disqus with your shortname.
+This option allows you to enable Disqus with your shortname.
 
 > default: not set (which won't enable)
 
 **Example**
-```xml
+```yml
 disqus: codimd
 ```
 
+type
+---
+This option allows you to switch the document view to the slide preview, to simplify live editing of presentations.
+
+> default: not set
+
+**Example:**
+```yml
+type: slide
+```
+
 slideOptions
 ---
-This option allow you provide custom options to slide mode.
+This option allows you to provide custom options to slide mode.
 Please below document for more details:
 https://github.com/hakimel/reveal.js/#configuration
 
@@ -142,7 +153,7 @@ https://github.com/hakimel/reveal.js/tree/master/css/theme
 > default: not set (which use default slide options)
 
 **Example**
-```xml
+```yml
 slideOptions:
   transition: fade
   theme: white
diff --git a/public/js/history.js b/public/js/history.js
index b4c26b42..6007bef4 100644
--- a/public/js/history.js
+++ b/public/js/history.js
@@ -218,6 +218,7 @@ export function getStorageHistory (callback) {
     if (typeof data === 'string') { data = JSON.parse(data) }
     callback(data)
   }
+  // eslint-disable-next-line standard/no-callback-literal
   callback([])
 }
 
diff --git a/public/js/index.js b/public/js/index.js
index 98c3b6d2..0c575961 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -2511,7 +2511,9 @@ function buildCursor (user) {
 // editor actions
 function removeNullByte (cm, change) {
   var str = change.text.join('\n')
+  // eslint-disable-next-line no-control-regex
   if (/\u0000/g.test(str) && change.update) {
+    // eslint-disable-next-line no-control-regex
     change.update(change.from, change.to, str.replace(/\u0000/g, '').split('\n'))
   }
 }
@@ -3046,7 +3048,7 @@ function checkInCode () {
 function checkAbove (method) {
   var cursor = editor.getCursor()
   var text = []
-  for (var i = 0; i < cursor.line; i++) {  // contain current line
+  for (var i = 0; i < cursor.line; i++) { // contain current line
     text.push(editor.getLine(i))
   }
   text = text.join('\n') + '\n' + editor.getLine(cursor.line).slice(0, cursor.ch)
diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js
index 0537e927..f05d01b8 100644
--- a/public/js/lib/editor/index.js
+++ b/public/js/lib/editor/index.js
@@ -492,7 +492,7 @@ export default class Editor {
             clearInterval(spellcheckTimer)
           }
         },
-        100,
+        100
       )
     }
   }
@@ -514,7 +514,7 @@ export default class Editor {
   }
   setOverrideBrowserKeymap () {
     var overrideBrowserKeymap = $(
-      '.ui-preferences-override-browser-keymap label > input[type="checkbox"]',
+      '.ui-preferences-override-browser-keymap label > input[type="checkbox"]'
     )
     if (overrideBrowserKeymap.is(':checked')) {
       Cookies.set('preferences-override-browser-keymap', true, {
@@ -529,10 +529,10 @@ export default class Editor {
 
   setPreferences () {
     var overrideBrowserKeymap = $(
-      '.ui-preferences-override-browser-keymap label > input[type="checkbox"]',
+      '.ui-preferences-override-browser-keymap label > input[type="checkbox"]'
     )
     var cookieOverrideBrowserKeymap = Cookies.get(
-      'preferences-override-browser-keymap',
+      'preferences-override-browser-keymap'
     )
     if (cookieOverrideBrowserKeymap && cookieOverrideBrowserKeymap === 'true') {
       overrideBrowserKeymap.prop('checked', true)
diff --git a/public/js/lib/editor/ui-elements.js b/public/js/lib/editor/ui-elements.js
index ca06d30c..29a37782 100644
--- a/public/js/lib/editor/ui-elements.js
+++ b/public/js/lib/editor/ui-elements.js
@@ -67,7 +67,7 @@ export const getUIElements = () => ({
     codemirrorScroll: $('.ui-edit-area .CodeMirror .CodeMirror-scroll'),
     codemirrorSizer: $('.ui-edit-area .CodeMirror .CodeMirror-sizer'),
     codemirrorSizerInner: $(
-      '.ui-edit-area .CodeMirror .CodeMirror-sizer > div',
+      '.ui-edit-area .CodeMirror .CodeMirror-sizer > div'
     ),
     markdown: $('.ui-view-area .markdown-body'),
     resize: {