From 5ead47308dd1ce05e4d2ed2336bc1eb0e424b53e Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 26 Sep 2018 21:12:27 +0800
Subject: [PATCH 01/30] initial commit

---
 packages/docs/index.mkl    |  3 +++
 packages/docs/marklet.yml  |  1 +
 packages/docs/package.json | 12 ++++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 packages/docs/index.mkl
 create mode 100644 packages/docs/marklet.yml
 create mode 100644 packages/docs/package.json

diff --git a/packages/docs/index.mkl b/packages/docs/index.mkl
new file mode 100644
index 0000000..9c8859f
--- /dev/null
+++ b/packages/docs/index.mkl
@@ -0,0 +1,3 @@
+# Marklet
+
+A markup language designed for API manual pages.
diff --git a/packages/docs/marklet.yml b/packages/docs/marklet.yml
new file mode 100644
index 0000000..a5ef50f
--- /dev/null
+++ b/packages/docs/marklet.yml
@@ -0,0 +1 @@
+version: 1.0
diff --git a/packages/docs/package.json b/packages/docs/package.json
new file mode 100644
index 0000000..9fb1a04
--- /dev/null
+++ b/packages/docs/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@marklet/docs",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "shigma <1700011071@pku.edu.cn>",
+  "license": "MIT"
+}

From d8764c1544aa6c4cf42b01a1595884fe1134706a Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 30 Sep 2018 10:03:57 +0800
Subject: [PATCH 02/30] add some adjustments

---
 .vscode/settings.json             | 3 +--
 packages/docs/marklet.yml         | 2 ++
 packages/docs/package.json        | 3 ---
 packages/docs/{ => src}/index.mkl | 0
 4 files changed, 3 insertions(+), 5 deletions(-)
 rename packages/docs/{ => src}/index.mkl (100%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4c96c16..67167c4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,10 +5,9 @@
     "vue"
   ],
   "files.exclude": {
+    "**/node_modules": true,
     "**/package-lock.json": true,
     "package.json.lerna_backup": true,
-    "packages/**/node_modules": true,
-    "packages/**/tsconfig.json": true
   },
   "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?",
 }
\ No newline at end of file
diff --git a/packages/docs/marklet.yml b/packages/docs/marklet.yml
index a5ef50f..dee993a 100644
--- a/packages/docs/marklet.yml
+++ b/packages/docs/marklet.yml
@@ -1 +1,3 @@
 version: 1.0
+srcDir: src
+outDir: ../../docs/docs
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 9fb1a04..90d5a80 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -4,9 +4,6 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "author": "shigma <1700011071@pku.edu.cn>",
   "license": "MIT"
 }
diff --git a/packages/docs/index.mkl b/packages/docs/src/index.mkl
similarity index 100%
rename from packages/docs/index.mkl
rename to packages/docs/src/index.mkl

From a4eaf9fcb5fcbc84d981bd60b94d2601d8fc3e0e Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 6 Oct 2018 20:05:47 +0800
Subject: [PATCH 03/30] simple theme initiate

---
 README.md                            | 15 ++++----
 build/scss.js                        | 37 ++++++++++++++++++++
 build/sfc2js.js                      | 26 ++++++++++++++
 packages/app/build/transpile.js      | 52 +++++++---------------------
 packages/app/comp/app.vue            |  2 +-
 packages/renderer/themes/simple.scss | 50 ++++++++++++++++++++++++++
 6 files changed, 134 insertions(+), 48 deletions(-)
 create mode 100644 build/scss.js
 create mode 100644 build/sfc2js.js
 create mode 100644 packages/renderer/themes/simple.scss

diff --git a/README.md b/README.md
index 460db34..ba2bf4f 100644
--- a/README.md
+++ b/README.md
@@ -9,13 +9,14 @@ A markup language designed for API manual pages.
 
 ## Packages
 
-- [markletjs](https://github.com/obstudio/Marklet/tree/master/packages/marklet): [![npm](https://img.shields.io/npm/v/markletjs.svg)](https://www.npmjs.com/package/markletjs)
-- [@marklet/cli](https://github.com/obstudio/Marklet/tree/master/packages/cli): [![npm](https://img.shields.io/npm/v/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)
-- [@marklet/core](https://github.com/obstudio/Marklet/tree/master/packages/core): [![npm](https://img.shields.io/npm/v/@marklet/core.svg)](https://www.npmjs.com/package/@marklet/core)
-- [@marklet/dev-server](https://github.com/obstudio/Marklet/tree/master/packages/dev-server): [![npm](https://img.shields.io/npm/v/@marklet/dev-server.svg)](https://www.npmjs.com/package/@marklet/dev-server)
-- [@marklet/monaco](https://github.com/obstudio/Marklet/tree/master/packages/monaco): [![npm](https://img.shields.io/npm/v/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)
-- [@marklet/parser](https://github.com/obstudio/Marklet/tree/master/packages/parser): [![npm](https://img.shields.io/npm/v/@marklet/parser.svg)](https://www.npmjs.com/package/@marklet/parser)
-- [@marklet/renderer](https://github.com/obstudio/Marklet/tree/master/packages/renderer): [![npm](https://img.shields.io/npm/v/@marklet/renderer.svg)](https://www.npmjs.com/package/@marklet/renderer)
+| package | version |
+|:-------:|:-------:|
+|[@marklet/cli](https://github.com/obstudio/Marklet/tree/master/packages/cli)|[![npm](https://img.shields.io/npm/v/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)|
+|[@marklet/core](https://github.com/obstudio/Marklet/tree/master/packages/core)|[![npm](https://img.shields.io/npm/v/@marklet/core.svg)](https://www.npmjs.com/package/@marklet/core)|
+|[@marklet/dev-server](https://github.com/obstudio/Marklet/tree/master/packages/dev-server)|[![npm](https://img.shields.io/npm/v/@marklet/dev-server.svg)](https://www.npmjs.com/package/@marklet/dev-server)|
+|[@marklet/monaco](https://github.com/obstudio/Marklet/tree/master/packages/monaco)|[![npm](https://img.shields.io/npm/v/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)|
+|[@marklet/parser](https://github.com/obstudio/Marklet/tree/master/packages/parser)|[![npm](https://img.shields.io/npm/v/@marklet/parser.svg)](https://www.npmjs.com/package/@marklet/parser)|
+|[@marklet/renderer](https://github.com/obstudio/Marklet/tree/master/packages/renderer)|[![npm](https://img.shields.io/npm/v/@marklet/renderer.svg)](https://www.npmjs.com/package/@marklet/renderer)|
 
 ## Usage: CLI
 
diff --git a/build/scss.js b/build/scss.js
new file mode 100644
index 0000000..a6a6737
--- /dev/null
+++ b/build/scss.js
@@ -0,0 +1,37 @@
+const util = require('./util')
+const sass = require('sass')
+const fs = require('fs')
+
+function load({
+  src,
+  dest,
+  selector,
+  base = '',
+  cache = dest.slice(0, -3) + 'cache.scss',
+}) {
+  let cacheData = ''
+  try {
+    cacheData = fs.readFileSync(util.resolve(base, cache)).toString()
+  } catch (error) { /**/ }
+
+  const source = fs.readFileSync(util.resolve(base, src)).toString()
+  const srcData = selector ? `${selector}{${source}}` : source
+
+  if (srcData === cacheData && fs.existsSync(util.resolve(dest))) {
+    return fs.readFileSync(util.resolve(base, dest)).toString()
+  } else {
+    const destData = sass.renderSync({ data: srcData }).css.toString()
+    fs.writeFileSync(util.resolve(base, dest), destData)
+    fs.writeFileSync(util.resolve(base, cache), srcData)
+    return destData
+  }
+}
+
+function loadAll(...options) {
+  return options.map(load).join('')
+}
+
+module.exports = {
+  load,
+  loadAll,
+}
diff --git a/build/sfc2js.js b/build/sfc2js.js
new file mode 100644
index 0000000..e04bee5
--- /dev/null
+++ b/build/sfc2js.js
@@ -0,0 +1,26 @@
+const sfc2js = require('sfc2js')
+const sass = require('sass')
+const path = require('path')
+
+sfc2js.install({
+  name: 'sass-plugin',
+  version: '1.0',
+  target: 'style',
+  lang: [
+    'sass',
+    'scss',
+    'css',
+  ],
+  default: {
+    includePaths: [],
+  },
+  updated(options) {
+    const dirPath = path.dirname(options.srcPath)
+    this.options.includePaths.push(dirPath)
+  },
+  render(style) {
+    return sass.renderSync({ ...this.options, data: style.content }).css.toString()
+  },
+})
+
+module.exports = sfc2js
diff --git a/packages/app/build/transpile.js b/packages/app/build/transpile.js
index 80d914e..21ece29 100644
--- a/packages/app/build/transpile.js
+++ b/packages/app/build/transpile.js
@@ -1,32 +1,9 @@
+const sass = require('../../../build/scss')
 const util = require('../../../build/util')
-const sfc2js = require('sfc2js')
-const sass = require('sass')
-const path = require('path')
-const fs = require('fs')
+const sfc2js = require('../../../build/sfc2js')
 
 util.start()
 
-sfc2js.install({
-  name: 'sass-plugin',
-  version: '1.0',
-  target: 'style',
-  lang: [
-    'sass',
-    'scss',
-    'css',
-  ],
-  default: {
-    includePaths: [],
-  },
-  updated(options) {
-    const dirPath = path.dirname(options.srcPath)
-    this.options.includePaths.push(dirPath)
-  },
-  render(style) {
-    return sass.renderSync({ ...this.options, data: style.content }).css.toString()
-  },
-})
-
 module.exports = sfc2js.transpile({
   baseDir: util.resolve(),
   srcDir: 'app/comp',
@@ -34,21 +11,16 @@ module.exports = sfc2js.transpile({
   enterance: util.isElectron() ? 'app.vue' : '',
 })
 
-let indexCache = ''
-try {
-  indexCache = fs.readFileSync(util.resolve('app/temp/index.cache.scss')).toString()
-} catch (error) { /**/ }
-
-const indexData = fs.readFileSync(util.resolve('app/comp/index.scss')).toString()
-
-if (indexData === indexCache && fs.existsSync(util.resolve('app/temp/index.css'))) {
-  module.exports.css += fs.readFileSync(util.resolve('app/temp/index.css')).toString()
-} else {
-  const indexCSS = sass.renderSync({ data: indexData }).css.toString()
-  fs.writeFileSync(util.resolve('app/temp/index.css'), indexCSS)
-  fs.writeFileSync(util.resolve('app/temp/index.cache.scss'), indexCache)
-  module.exports.css += indexCSS
-}
+module.exports.css += sass.loadAll({
+  base: 'app',
+  src: 'comp/index.scss',
+  dest: 'temp/index.css',
+}, {
+  base: 'renderer',
+  src: 'themes/simple.scss',
+  dest: 'dist/simple.css',
+  selector: '.simple',
+})
 
 if (util.isElectron()) {
   const result = sfc2js.transpile({
diff --git a/packages/app/comp/app.vue b/packages/app/comp/app.vue
index 684e3cd..c18b7ea 100644
--- a/packages/app/comp/app.vue
+++ b/packages/app/comp/app.vue
@@ -105,7 +105,7 @@ module.exports = {
   <div>
     <div class="input" ref="input"/>
     <mkl-scroll class="output" :margin="4" :radius="6">
-      <mkl-nodes ref="nodes" :content="nodes"/>
+      <mkl-nodes ref="nodes" :content="nodes" class="simple"/>
     </mkl-scroll>
   </div>
 </template>
diff --git a/packages/renderer/themes/simple.scss b/packages/renderer/themes/simple.scss
new file mode 100644
index 0000000..e5a2f6a
--- /dev/null
+++ b/packages/renderer/themes/simple.scss
@@ -0,0 +1,50 @@
+& {
+  color: #24292e;
+  background-color: #f0f1f2;
+
+  blockquote {
+    color: #606060;
+    border-left-color: #c0c0c0;
+    background-color: #e6e6e6;
+    &.r { border-left-color: #F92672; background-color: #eae3e3 }
+    &.g { border-left-color: #96E22E; background-color: #e3eae3 }
+    &.b { border-left-color: #66D9EF; background-color: #e3e3ea }
+  }
+
+  .usage blockquote {
+    border-color: #f6f6f6 !important;
+    background-color: #e0e0e0;
+    &:not(:last-child) { border-bottom-color: #e0e0e0 }
+    &:not(:first-child) { border-top-color: #e0e0e0 }
+
+    > span:first-child {
+      color: #24292e;
+      em { color: #808080 }
+    }
+  }
+
+  h1 { border-bottom: 4px solid #bababa }
+  h2 { border-bottom: 2px solid #bababa }
+  hr { border-bottom: 1px solid #d0d0d0; background-color: #c8c8c8 }
+  
+  table {
+    th, td { border: 1px solid #636363 }
+    tr { background-color: #e0e0e0; border-top: 1px solid #636363 }
+    tr :nth-child(2n) { background-color: #e8e8e8 }
+  }
+
+  a { color: #409eff }
+  img { background-color: transparent }
+  code { background-color: #e0e0e0 }
+  span.comment { color: #454749 }
+
+  .codeblock {
+    background-color: #e0e0e0;
+    &::-webkit-scrollbar-thumb {
+      background-color: #c0c0c0;
+      box-shadow: inset 0 0 4px rgba(255,255,255,0.5);
+      &:hover { background-color: #a8a8a8 }
+      &:window-inactive { background-color: #d0d0d0; box-shadow: none }
+    }
+  }
+}

From 7ea0db382ac22e3fa96bddc46808f7fff97afbfc Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 6 Oct 2018 20:19:26 +0800
Subject: [PATCH 04/30] monaco css

---
 .gitignore                      |  4 +++-
 .vscode/settings.json           |  1 +
 build/scss.js                   | 19 ++++++++++---------
 packages/app/build/transpile.js | 11 +++++++----
 packages/app/comp/index.scss    | 32 --------------------------------
 packages/app/package.json       |  4 ++--
 packages/monaco/.npmignore      |  3 ++-
 packages/monaco/index.scss      | 31 +++++++++++++++++++++++++++++++
 packages/monaco/package.json    |  2 +-
 9 files changed, 57 insertions(+), 50 deletions(-)
 create mode 100644 packages/monaco/index.scss

diff --git a/.gitignore b/.gitignore
index 4db6739..407a7d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,7 @@ dist
 temp
 !test
 *.tgz
+*.cache.*
 packages/app/main.js
-packages/app/index.html
\ No newline at end of file
+packages/app/index.html
+packages/monaco/index.css
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 691d6e0..6a2d8de 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,6 +5,7 @@
     "vue"
   ],
   "files.exclude": {
+    "**/*.cache.*": true,
     "**/node_modules": true,
     "**/package-lock.json": true,
     "package.json.lerna_backup": true,
diff --git a/build/scss.js b/build/scss.js
index a6a6737..3109223 100644
--- a/build/scss.js
+++ b/build/scss.js
@@ -4,25 +4,26 @@ const fs = require('fs')
 
 function load({
   src,
-  dest,
+  dest = src,
   selector,
   base = '',
-  cache = dest.slice(0, -3) + 'cache.scss',
+  cache = dest,
+  style = 'compressed',
 }) {
   let cacheData = ''
   try {
-    cacheData = fs.readFileSync(util.resolve(base, cache)).toString()
+    cacheData = fs.readFileSync(util.resolve(base, cache + '.cache.scss')).toString()
   } catch (error) { /**/ }
 
-  const source = fs.readFileSync(util.resolve(base, src)).toString()
+  const source = fs.readFileSync(util.resolve(base, src + '.scss')).toString()
   const srcData = selector ? `${selector}{${source}}` : source
 
-  if (srcData === cacheData && fs.existsSync(util.resolve(dest))) {
-    return fs.readFileSync(util.resolve(base, dest)).toString()
+  if (srcData === cacheData && fs.existsSync(util.resolve(dest + '.css'))) {
+    return fs.readFileSync(util.resolve(base, dest + '.css')).toString()
   } else {
-    const destData = sass.renderSync({ data: srcData }).css.toString()
-    fs.writeFileSync(util.resolve(base, dest), destData)
-    fs.writeFileSync(util.resolve(base, cache), srcData)
+    const destData = sass.renderSync({ data: srcData, outputStyle: style }).css.toString()
+    fs.writeFileSync(util.resolve(base, dest + '.css'), destData)
+    fs.writeFileSync(util.resolve(base, cache + '.cache.scss'), srcData)
     return destData
   }
 }
diff --git a/packages/app/build/transpile.js b/packages/app/build/transpile.js
index 21ece29..efc63cc 100644
--- a/packages/app/build/transpile.js
+++ b/packages/app/build/transpile.js
@@ -13,13 +13,16 @@ module.exports = sfc2js.transpile({
 
 module.exports.css += sass.loadAll({
   base: 'app',
-  src: 'comp/index.scss',
-  dest: 'temp/index.css',
+  src: 'comp/index',
+  dest: 'temp/index',
 }, {
   base: 'renderer',
-  src: 'themes/simple.scss',
-  dest: 'dist/simple.css',
+  src: 'themes/simple',
+  dest: 'dist/simple',
   selector: '.simple',
+}, {
+  base: 'monaco',
+  src: 'index',
 })
 
 if (util.isElectron()) {
diff --git a/packages/app/comp/index.scss b/packages/app/comp/index.scss
index ef3896f..e9a6dc8 100644
--- a/packages/app/comp/index.scss
+++ b/packages/app/comp/index.scss
@@ -15,35 +15,3 @@ body {
 .no-transition {
   transition: none !important;
 }
-
-.monaco-editor {
-  .monaco-scrollable-element {
-    > .scrollbar {
-      transition: opacity 0.3s ease;
-
-      > .slider {
-        opacity: 0.5;
-        cursor: pointer;
-        border-radius: 6px;
-        background-color: #c0c4cc;
-        transition: opacity 0.3s ease;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-
-      &.vertical {
-        margin: 4px 0;
-      }
-
-      &.horizontal {
-        margin: 0 4px;
-      }
-
-      &.invisible.fade {
-        transition: opacity 0.8s ease;
-      }
-    }
-  }
-}
diff --git a/packages/app/package.json b/packages/app/package.json
index 113f2fc..5c1037b 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/app",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": true,
   "main": "main.js",
   "author": "shigma <1700011071@pku.edu.cn>",
@@ -17,7 +17,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/monaco": "^1.2.1",
+    "@marklet/monaco": "^1.3.0",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1",
     "neat-scroll": "^2.0.1",
diff --git a/packages/monaco/.npmignore b/packages/monaco/.npmignore
index f649af7..0e173cc 100644
--- a/packages/monaco/.npmignore
+++ b/packages/monaco/.npmignore
@@ -1 +1,2 @@
-.eslintrc.yml
\ No newline at end of file
+.eslintrc.yml
+*.scss
\ No newline at end of file
diff --git a/packages/monaco/index.scss b/packages/monaco/index.scss
new file mode 100644
index 0000000..11adffb
--- /dev/null
+++ b/packages/monaco/index.scss
@@ -0,0 +1,31 @@
+.monaco-editor {
+  .monaco-scrollable-element {
+    > .scrollbar {
+      transition: opacity 0.3s ease;
+
+      > .slider {
+        opacity: 0.5;
+        cursor: pointer;
+        border-radius: 6px;
+        background-color: #c0c4cc;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      &.vertical {
+        margin: 4px 0;
+      }
+
+      &.horizontal {
+        margin: 0 4px;
+      }
+
+      &.invisible.fade {
+        transition: opacity 0.8s ease;
+      }
+    }
+  }
+}
diff --git a/packages/monaco/package.json b/packages/monaco/package.json
index 3de5bad..982a696 100644
--- a/packages/monaco/package.json
+++ b/packages/monaco/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/monaco",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A monaco plugin for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [

From 556377c3d2861617d387e046b1dcdfcd7c85332e Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 6 Oct 2018 20:25:55 +0800
Subject: [PATCH 05/30] dark theme initiate

---
 {build => packages/app/build}/scss.js   |  2 +-
 {build => packages/app/build}/sfc2js.js |  0
 packages/app/build/transpile.js         | 11 ++++--
 packages/app/comp/app.vue               |  2 +-
 packages/renderer/themes/dark.scss      | 51 +++++++++++++++++++++++++
 5 files changed, 61 insertions(+), 5 deletions(-)
 rename {build => packages/app/build}/scss.js (95%)
 rename {build => packages/app/build}/sfc2js.js (100%)
 create mode 100644 packages/renderer/themes/dark.scss

diff --git a/build/scss.js b/packages/app/build/scss.js
similarity index 95%
rename from build/scss.js
rename to packages/app/build/scss.js
index 3109223..69cca55 100644
--- a/build/scss.js
+++ b/packages/app/build/scss.js
@@ -1,4 +1,4 @@
-const util = require('./util')
+const util = require('../../../build/util')
 const sass = require('sass')
 const fs = require('fs')
 
diff --git a/build/sfc2js.js b/packages/app/build/sfc2js.js
similarity index 100%
rename from build/sfc2js.js
rename to packages/app/build/sfc2js.js
diff --git a/packages/app/build/transpile.js b/packages/app/build/transpile.js
index efc63cc..c7be432 100644
--- a/packages/app/build/transpile.js
+++ b/packages/app/build/transpile.js
@@ -1,6 +1,6 @@
-const sass = require('../../../build/scss')
 const util = require('../../../build/util')
-const sfc2js = require('../../../build/sfc2js')
+const sfc2js = require('./sfc2js')
+const scss = require('./scss')
 
 util.start()
 
@@ -11,7 +11,7 @@ module.exports = sfc2js.transpile({
   enterance: util.isElectron() ? 'app.vue' : '',
 })
 
-module.exports.css += sass.loadAll({
+module.exports.css += scss.loadAll({
   base: 'app',
   src: 'comp/index',
   dest: 'temp/index',
@@ -20,6 +20,11 @@ module.exports.css += sass.loadAll({
   src: 'themes/simple',
   dest: 'dist/simple',
   selector: '.simple',
+}, {
+  base: 'renderer',
+  src: 'themes/dark',
+  dest: 'dist/dark',
+  selector: '.dark',
 }, {
   base: 'monaco',
   src: 'index',
diff --git a/packages/app/comp/app.vue b/packages/app/comp/app.vue
index c18b7ea..3bd7a09 100644
--- a/packages/app/comp/app.vue
+++ b/packages/app/comp/app.vue
@@ -105,7 +105,7 @@ module.exports = {
   <div>
     <div class="input" ref="input"/>
     <mkl-scroll class="output" :margin="4" :radius="6">
-      <mkl-nodes ref="nodes" :content="nodes" class="simple"/>
+      <mkl-nodes ref="nodes" :content="nodes" class="dark"/>
     </mkl-scroll>
   </div>
 </template>
diff --git a/packages/renderer/themes/dark.scss b/packages/renderer/themes/dark.scss
new file mode 100644
index 0000000..90aaaa0
--- /dev/null
+++ b/packages/renderer/themes/dark.scss
@@ -0,0 +1,51 @@
+* {
+  color: #fafaf5;
+  background-color: #282828;
+
+  blockquote {
+    color: #c6cbd1;
+    border-left-color: #c0c0c0;
+    background-color: #3d3d3d;
+    &.r { border-left-color: #F92672; background-color: #423939 }
+    &.g { border-left-color: #96E22E; background-color: #394239 }
+    &.b { border-left-color: #66D9EF; background-color: #393942 }
+  }
+
+  .usage blockquote {
+    border-color: #2D2F3F !important;
+    background-color: #393942;
+    &:not(:last-child) { border-bottom-color: #393952 }
+    &:not(:first-child) { border-top-color: #393952 }
+
+    > span:first-child {
+      color: #e1e4e8;
+      em { color: #9697a8 }
+    }
+  }
+
+  pre { background-color: #202020 }
+  h1 { border-bottom: 4px solid #454545 }
+  h2 { border-bottom: 2px solid #454545 }
+  hr { border-bottom: 1px solid #202020; background-color: #282828 }
+  
+  table {
+    th, td { border: 1px solid #a0a0a0 }
+    tr { background-color: #282828; border-top: 1px solid #a0a0a0 }
+    tr :nth-child(2n) { background-color: #202020 }
+  }
+
+  a { color: #7fcfff }
+  img { background-color: transparent }
+  code { background-color: #3d3d3d }
+  span.comment { color: #c6cbd1 }
+
+  .codeblock {
+    background-color: #383933;
+    &::-webkit-scrollbar-thumb {
+      background-color: #555555;
+      box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
+      &:hover { background-color: #616161 }
+      &:window-inactive { background-color: #353535; box-shadow: none }
+    }
+  }
+}
\ No newline at end of file

From 92998024894f94889952d8737ffe28de8bd7f0a2 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 7 Oct 2018 00:29:30 +0800
Subject: [PATCH 06/30] input

---
 packages/app/build/transpile.js      |   4 -
 packages/app/comp/app.vue            |  39 ++++++--
 packages/app/comp/index.css          |  16 ++++
 packages/app/comp/index.scss         |  17 ----
 packages/app/index.dev.html          |   1 +
 packages/renderer/comp/codeblock.vue |   2 +-
 packages/renderer/comp/collapse.vue  |   4 +-
 packages/renderer/comp/input.vue     | 137 +++++++++++++++++++++++++++
 packages/renderer/src/index.js       |   1 +
 packages/renderer/themes/dark.scss   |  86 +++++++++--------
 packages/renderer/themes/simple.scss |  80 ++++++++--------
 11 files changed, 275 insertions(+), 112 deletions(-)
 create mode 100644 packages/app/comp/index.css
 delete mode 100644 packages/app/comp/index.scss
 create mode 100644 packages/renderer/comp/input.vue

diff --git a/packages/app/build/transpile.js b/packages/app/build/transpile.js
index c7be432..3adee4f 100644
--- a/packages/app/build/transpile.js
+++ b/packages/app/build/transpile.js
@@ -12,10 +12,6 @@ module.exports = sfc2js.transpile({
 })
 
 module.exports.css += scss.loadAll({
-  base: 'app',
-  src: 'comp/index',
-  dest: 'temp/index',
-}, {
   base: 'renderer',
   src: 'themes/simple',
   dest: 'dist/simple',
diff --git a/packages/app/comp/app.vue b/packages/app/comp/app.vue
index 3bd7a09..7377971 100644
--- a/packages/app/comp/app.vue
+++ b/packages/app/comp/app.vue
@@ -5,10 +5,14 @@ const monacoLoader = require('@marklet/monaco')
 
 Vue.use(monacoLoader)
 
+const themes = ['simple', 'dark']
+
 module.exports = {
   el: '#app',
 
   data: () => ({
+    themeInput: '',
+    theme: 'dark',
     origin: '',
     source: '',
     nodes: [],
@@ -25,7 +29,10 @@ module.exports = {
         this._editor.setModel(this._model)
         this.layout()
       }
-    }
+    },
+    themeInput(value) {
+      if (themes.includes(value)) this.theme = value
+    },
   },
 
   created() {
@@ -96,25 +103,45 @@ module.exports = {
         if (newTime - now < deltaTime) requestAnimationFrame(layout)
       })
     },
+    validateTheme() {
+      return themes.includes(this.themeInput)
+    },
   }
 }
 
 </script>
 
 <template>
-  <div>
+  <div :class="theme">
+    <div class="navbar">
+      <mkl-input v-model="themeInput" :validate="validateTheme" placeholder="Input Theme"/>
+    </div>
     <div class="input" ref="input"/>
-    <mkl-scroll class="output" :margin="4" :radius="6">
-      <mkl-nodes ref="nodes" :content="nodes" class="dark"/>
+    <mkl-scroll class="document" :margin="4" :radius="6">
+      <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
   </div>
 </template>
 
 <style lang="scss" scoped>
 
-> .input, > .output {
+> .navbar {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+
+  .mkl-input {
+    font-size: 14px;
+    padding: 6px 16px;
+    max-width: 200px;
+  }
+}
+
+> .input, > .document {
+  position: absolute;
+  top: 40px;
   bottom: 0;
 }
 
@@ -123,7 +150,7 @@ module.exports = {
   width: 50%;
 }
 
-> .output {
+> .mkl-scroll.document {
   left: 50%;
   right: 0;
 
diff --git a/packages/app/comp/index.css b/packages/app/comp/index.css
new file mode 100644
index 0000000..df3a6d2
--- /dev/null
+++ b/packages/app/comp/index.css
@@ -0,0 +1,16 @@
+body {
+  overflow: hidden;
+  font-family:
+    "Helvetica Neue",
+    Helvetica,
+    "PingFang SC",
+    "Hiragino Sans GB",
+    "Microsoft YaHei",
+    "微软雅黑",
+    Arial,
+    sans-serif;
+}
+
+.no-transition {
+  transition: none !important;
+}
diff --git a/packages/app/comp/index.scss b/packages/app/comp/index.scss
deleted file mode 100644
index e9a6dc8..0000000
--- a/packages/app/comp/index.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
-  overflow: hidden;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-}
-
-.no-transition {
-  transition: none !important;
-}
diff --git a/packages/app/index.dev.html b/packages/app/index.dev.html
index 8463489..1d1959b 100644
--- a/packages/app/index.dev.html
+++ b/packages/app/index.dev.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Marklet</title>
+    <link href="comp/index.css" rel="stylesheet">
     <script src="../../node_modules/vue/dist/vue.runtime.min.js"></script>
     <!-- TODO: remove in production mode -->
     <script src="http://localhost:8098"></script>
diff --git a/packages/renderer/comp/codeblock.vue b/packages/renderer/comp/codeblock.vue
index ce07ae5..5f24b76 100644
--- a/packages/renderer/comp/codeblock.vue
+++ b/packages/renderer/comp/codeblock.vue
@@ -31,7 +31,7 @@ module.exports = {
 </script>
 
 <template>
-  <div class="codeblock" v-html="html"/>
+  <div class="mkl-codeblock" v-html="html"/>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/renderer/comp/collapse.vue b/packages/renderer/comp/collapse.vue
index 8557f5d..082cb1c 100644
--- a/packages/renderer/comp/collapse.vue
+++ b/packages/renderer/comp/collapse.vue
@@ -71,10 +71,9 @@ module.exports = {
   background-color: transparent;
   width: -webkit-fill-available;
   transition: background-color 0.3s ease;
-  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 16px;
 
   > .header {
-    color: #303133;
     padding: 8px 16px;
     font-size: 20px;
     line-height: 1.5em;
@@ -93,7 +92,6 @@ module.exports = {
   }
 }
 
-&.header:hover { background-color: #f5f7fa }
 &.closed:not(.header) { border-bottom: none }
 
 </style>
diff --git a/packages/renderer/comp/input.vue b/packages/renderer/comp/input.vue
new file mode 100644
index 0000000..b917b53
--- /dev/null
+++ b/packages/renderer/comp/input.vue
@@ -0,0 +1,137 @@
+<script>
+
+module.exports = {
+  props: {
+    prefixIcon: String,
+    suffixIcon: String,
+    placeholder: String,
+    disabled: Boolean,
+    validate: Function,
+    value: [ String, Number ],
+    type: { default: 'text' },
+    round: { default: false },
+  },
+
+  data: () => ({
+    focused: false,
+    invalid: false,
+  }),
+
+  computed: {
+    inputStyle() {
+      return {
+        paddingLeft: Boolean(this.prefixIcon) + 1 + 'em',
+        paddingRight: Boolean(this.suffixIcon) + 1 + 'em',
+      }
+    },
+  },
+
+  methods: {
+    onInput(event) {
+      this.value = event.target.value
+      if (this.validate) {
+        this.invalid = !this.validate(this.value)
+      }
+      this.$emit('input', this.value)
+    },
+    onFocus(event) {
+      this.focused = true
+      this.$emit('focus', event)
+    },
+    onBlur(event) {
+      this.focused = false
+      this.$emit('blur', event)
+    },
+  }
+}
+
+</script>
+
+<template>
+  <div class="mkl-input" :class="{ focused, disabled }">
+    <div class="prepend" v-if="$slots.prepend">
+      <slot name="prepend"/>
+    </div>
+    <i v-if="prefixIcon" :class="'icon-' + prefixIcon" class="prefix"/>
+    <input :value="value" :type="type" :style="inputStyle" :placeholder="placeholder"
+      @input="onInput" @focus="onFocus" @blur="onBlur" @keydown.enter.stop="$emit('enter', $event)"
+      :class="{ round, invalid, 'has-append': $slots.append, 'has-prepend': $slots.prepend }"/>
+    <i v-if="suffixIcon" :class="'icon-' + suffixIcon" class="suffix"/>
+    <div class="append" v-if="$slots.append">
+      <slot name="append"/>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+@mixin Xpend($name, $dir1, $dir2) {
+  > input.has-#{$name} {
+    border-top-#{$dir1}-radius: 0;
+    border-bottom-#{$dir1}-radius: 0;
+  }
+
+  > .#{$name} {
+    border-top-#{$dir2}-radius: 0;
+    border-bottom-#{$dir2}-radius: 0;
+    border-#{$dir2}: 0;
+  }
+}
+
+& {
+  height: 2em;
+  font-size: 16px;
+  position: relative;
+  transition: 0.3s ease;
+  display: inline-table;
+  background-color: inherit;
+  width: -webkit-fill-available;
+
+  > i.prefix, > i.suffix {
+    color: #c0c4cc;
+    top: 50%;
+    position: absolute;
+    margin-top: -0.5em;
+  }
+
+  > i.prefix { left: 10px }
+  > i.suffix { right: 10px }
+
+  > input {
+    padding: 0;
+    width: 100%;
+    outline: none;
+    font-size: 1em;
+    height: inherit;
+    display: table-cell;
+    border-radius: 0.3em;
+    transition: 0.3s ease;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    background-color: #ffffff;
+    border: 1px solid #dcdfe6;
+
+    &.round { border-radius: 1em }
+    &:hover { border-color: #c0c4cc }
+    &:focus { border-color: #409eff }
+    &.invalid { border-color: #f56c6c !important }
+    &::-webkit-input-placeholder { color: #c0c4cc }
+  }
+
+  > .prepend, > .append {
+    color: #909399;
+    vertical-align: middle;
+    background-color: inherit;
+    display: table-cell;
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 0.3em;
+    padding: 0 20px;
+    white-space: nowrap;
+  }
+
+  @include Xpend(prepend, left, right);
+  @include Xpend(append, right, left);
+}
+
+</style>
diff --git a/packages/renderer/src/index.js b/packages/renderer/src/index.js
index 9ce956e..08a702c 100644
--- a/packages/renderer/src/index.js
+++ b/packages/renderer/src/index.js
@@ -8,6 +8,7 @@ const Renderer = {
     Vue.component('mkl-collapse', require('../temp/collapse.vue'))
     Vue.component('mkl-heading', require('../temp/heading.vue'))
     Vue.component('mkl-inlinelist', require('../temp/inlinelist.vue'))
+    Vue.component('mkl-input', require('../temp/input.vue'))
     Vue.component('mkl-list-item', require('../temp/list-item.vue'))
     Vue.component('mkl-list', require('../temp/list.vue'))
     Vue.component('mkl-nodes', require('../temp/nodes.vue'))
diff --git a/packages/renderer/themes/dark.scss b/packages/renderer/themes/dark.scss
index 90aaaa0..29eff71 100644
--- a/packages/renderer/themes/dark.scss
+++ b/packages/renderer/themes/dark.scss
@@ -1,51 +1,53 @@
-* {
-  color: #fafaf5;
-  background-color: #282828;
+& {
+  .document {
+    color: #fafaf5;
+    background-color: #282828;
 
-  blockquote {
-    color: #c6cbd1;
-    border-left-color: #c0c0c0;
-    background-color: #3d3d3d;
-    &.r { border-left-color: #F92672; background-color: #423939 }
-    &.g { border-left-color: #96E22E; background-color: #394239 }
-    &.b { border-left-color: #66D9EF; background-color: #393942 }
-  }
+    blockquote {
+      color: #c6cbd1;
+      border-left-color: #c0c0c0;
+      background-color: #3d3d3d;
+      &.r { border-left-color: #F92672; background-color: #423939 }
+      &.g { border-left-color: #96E22E; background-color: #394239 }
+      &.b { border-left-color: #66D9EF; background-color: #393942 }
+    }
 
-  .usage blockquote {
-    border-color: #2D2F3F !important;
-    background-color: #393942;
-    &:not(:last-child) { border-bottom-color: #393952 }
-    &:not(:first-child) { border-top-color: #393952 }
+    .usage blockquote {
+      border-color: #2D2F3F !important;
+      background-color: #393942;
+      &:not(:last-child) { border-bottom-color: #393952 }
+      &:not(:first-child) { border-top-color: #393952 }
 
-    > span:first-child {
-      color: #e1e4e8;
-      em { color: #9697a8 }
+      > span:first-child {
+        color: #e1e4e8;
+        em { color: #9697a8 }
+      }
     }
-  }
 
-  pre { background-color: #202020 }
-  h1 { border-bottom: 4px solid #454545 }
-  h2 { border-bottom: 2px solid #454545 }
-  hr { border-bottom: 1px solid #202020; background-color: #282828 }
-  
-  table {
-    th, td { border: 1px solid #a0a0a0 }
-    tr { background-color: #282828; border-top: 1px solid #a0a0a0 }
-    tr :nth-child(2n) { background-color: #202020 }
-  }
+    pre { background-color: #202020 }
+    h1 { border-bottom: 4px solid #454545 }
+    h2 { border-bottom: 2px solid #454545 }
+    hr { border-bottom: 1px solid #202020; background-color: #282828 }
+    
+    table {
+      th, td { border: 1px solid #a0a0a0 }
+      tr { background-color: #282828; border-top: 1px solid #a0a0a0 }
+      tr :nth-child(2n) { background-color: #202020 }
+    }
 
-  a { color: #7fcfff }
-  img { background-color: transparent }
-  code { background-color: #3d3d3d }
-  span.comment { color: #c6cbd1 }
+    a { color: #7fcfff }
+    img { background-color: transparent }
+    code { background-color: #3d3d3d }
+    span.comment { color: #c6cbd1 }
 
-  .codeblock {
-    background-color: #383933;
-    &::-webkit-scrollbar-thumb {
-      background-color: #555555;
-      box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
-      &:hover { background-color: #616161 }
-      &:window-inactive { background-color: #353535; box-shadow: none }
+    .codeblock {
+      background-color: #383933;
+      &::-webkit-scrollbar-thumb {
+        background-color: #555555;
+        box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
+        &:hover { background-color: #616161 }
+        &:window-inactive { background-color: #353535; box-shadow: none }
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/renderer/themes/simple.scss b/packages/renderer/themes/simple.scss
index e5a2f6a..2fdca1b 100644
--- a/packages/renderer/themes/simple.scss
+++ b/packages/renderer/themes/simple.scss
@@ -1,50 +1,52 @@
 & {
-  color: #24292e;
-  background-color: #f0f1f2;
+  .document {
+    color: #24292e;
+    background-color: #f0f1f2;
 
-  blockquote {
-    color: #606060;
-    border-left-color: #c0c0c0;
-    background-color: #e6e6e6;
-    &.r { border-left-color: #F92672; background-color: #eae3e3 }
-    &.g { border-left-color: #96E22E; background-color: #e3eae3 }
-    &.b { border-left-color: #66D9EF; background-color: #e3e3ea }
-  }
+    blockquote {
+      color: #606060;
+      border-left-color: #c0c0c0;
+      background-color: #e6e6e6;
+      &.r { border-left-color: #F92672; background-color: #eae3e3 }
+      &.g { border-left-color: #96E22E; background-color: #e3eae3 }
+      &.b { border-left-color: #66D9EF; background-color: #e3e3ea }
+    }
 
-  .usage blockquote {
-    border-color: #f6f6f6 !important;
-    background-color: #e0e0e0;
-    &:not(:last-child) { border-bottom-color: #e0e0e0 }
-    &:not(:first-child) { border-top-color: #e0e0e0 }
+    .usage blockquote {
+      border-color: #f6f6f6 !important;
+      background-color: #e0e0e0;
+      &:not(:last-child) { border-bottom-color: #e0e0e0 }
+      &:not(:first-child) { border-top-color: #e0e0e0 }
 
-    > span:first-child {
-      color: #24292e;
-      em { color: #808080 }
+      > span:first-child {
+        color: #24292e;
+        em { color: #808080 }
+      }
     }
-  }
 
-  h1 { border-bottom: 4px solid #bababa }
-  h2 { border-bottom: 2px solid #bababa }
-  hr { border-bottom: 1px solid #d0d0d0; background-color: #c8c8c8 }
-  
-  table {
-    th, td { border: 1px solid #636363 }
-    tr { background-color: #e0e0e0; border-top: 1px solid #636363 }
-    tr :nth-child(2n) { background-color: #e8e8e8 }
-  }
+    h1 { border-bottom: 4px solid #bababa }
+    h2 { border-bottom: 2px solid #bababa }
+    hr { border-bottom: 1px solid #d0d0d0; background-color: #c8c8c8 }
+    
+    table {
+      th, td { border: 1px solid #636363 }
+      tr { background-color: #e0e0e0; border-top: 1px solid #636363 }
+      tr :nth-child(2n) { background-color: #e8e8e8 }
+    }
 
-  a { color: #409eff }
-  img { background-color: transparent }
-  code { background-color: #e0e0e0 }
-  span.comment { color: #454749 }
+    a { color: #409eff }
+    img { background-color: transparent }
+    code { background-color: #e0e0e0 }
+    span.comment { color: #454749 }
 
-  .codeblock {
-    background-color: #e0e0e0;
-    &::-webkit-scrollbar-thumb {
-      background-color: #c0c0c0;
-      box-shadow: inset 0 0 4px rgba(255,255,255,0.5);
-      &:hover { background-color: #a8a8a8 }
-      &:window-inactive { background-color: #d0d0d0; box-shadow: none }
+    .codeblock {
+      background-color: #e0e0e0;
+      &::-webkit-scrollbar-thumb {
+        background-color: #c0c0c0;
+        box-shadow: inset 0 0 4px rgba(255,255,255,0.5);
+        &:hover { background-color: #a8a8a8 }
+        &:window-inactive { background-color: #d0d0d0; box-shadow: none }
+      }
     }
   }
 }

From 85fb4ecdf2b2e8b0b408376b8d904b74ed423591 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 7 Oct 2018 02:04:20 +0800
Subject: [PATCH 07/30] add some adjustments

---
 packages/app/build/transpile.js               | 12 ++-
 packages/app/comp/app.vue                     | 19 +++--
 packages/app/comp/index.css                   |  4 +
 packages/app/index.dev.html                   |  1 +
 packages/app/package.json                     |  1 +
 packages/monaco/index.scss                    |  4 +
 .../themes/{dark.scss => dark/index.scss}     |  0
 packages/renderer/themes/dark/monaco.yaml     | 76 +++++++++++++++++++
 .../themes/{simple.scss => simple/index.scss} |  0
 packages/renderer/themes/simple/monaco.yaml   | 76 +++++++++++++++++++
 10 files changed, 185 insertions(+), 8 deletions(-)
 rename packages/renderer/themes/{dark.scss => dark/index.scss} (100%)
 create mode 100644 packages/renderer/themes/dark/monaco.yaml
 rename packages/renderer/themes/{simple.scss => simple/index.scss} (100%)
 create mode 100644 packages/renderer/themes/simple/monaco.yaml

diff --git a/packages/app/build/transpile.js b/packages/app/build/transpile.js
index 3adee4f..bf03b7f 100644
--- a/packages/app/build/transpile.js
+++ b/packages/app/build/transpile.js
@@ -1,6 +1,8 @@
 const util = require('../../../build/util')
 const sfc2js = require('./sfc2js')
 const scss = require('./scss')
+const yaml = require('js-yaml')
+const fs = require('fs')
 
 util.start()
 
@@ -13,12 +15,12 @@ module.exports = sfc2js.transpile({
 
 module.exports.css += scss.loadAll({
   base: 'renderer',
-  src: 'themes/simple',
+  src: 'themes/simple/index',
   dest: 'dist/simple',
   selector: '.simple',
 }, {
   base: 'renderer',
-  src: 'themes/dark',
+  src: 'themes/dark/index',
   dest: 'dist/dark',
   selector: '.dark',
 }, {
@@ -37,6 +39,12 @@ if (util.isElectron()) {
       props: ['node'],
     },
   })
+
+  module.exports.themes = {
+    dark: yaml.safeLoad(fs.readFileSync(util.resolve('renderer/themes/dark/monaco.yaml'))),
+    simple: yaml.safeLoad(fs.readFileSync(util.resolve('renderer/themes/simple/monaco.yaml'))),
+  }
+
   module.exports.css += result.css
   module.exports.plugin = result.app
 }
diff --git a/packages/app/comp/app.vue b/packages/app/comp/app.vue
index 7377971..830b1fb 100644
--- a/packages/app/comp/app.vue
+++ b/packages/app/comp/app.vue
@@ -30,6 +30,11 @@ module.exports = {
         this.layout()
       }
     },
+    theme(value) {
+      if (window.monaco) {
+        window.monaco.editor.setTheme(value)
+      }
+    },
     themeInput(value) {
       if (themes.includes(value)) this.theme = value
     },
@@ -42,6 +47,9 @@ module.exports = {
     this._lexer = new DocumentLexer()
 
     monacoLoader.then((monaco) => {
+      themes.forEach((name) => {
+        monaco.editor.defineTheme(name, window.result.themes[name])
+      })
       const model = monaco.editor.createModel(this.source, 'marklet')
       model.onDidChangeContent(() => this.checkChange())
       const nodes = this.nodes
@@ -56,7 +64,7 @@ module.exports = {
     window.vm = this
     
     monacoLoader.then((monaco) => {
-      monaco.editor.setTheme('vs')
+      monaco.editor.setTheme(this.theme)
       this._editor = monaco.editor.create(this.$refs.input, {
         model: null,
         language: 'marklet',
@@ -103,9 +111,6 @@ module.exports = {
         if (newTime - now < deltaTime) requestAnimationFrame(layout)
       })
     },
-    validateTheme() {
-      return themes.includes(this.themeInput)
-    },
   }
 }
 
@@ -114,7 +119,7 @@ module.exports = {
 <template>
   <div :class="theme">
     <div class="navbar">
-      <mkl-input v-model="themeInput" :validate="validateTheme" placeholder="Input Theme"/>
+      <mkl-input v-model="themeInput" placeholder="input theme"/>
     </div>
     <div class="input" ref="input"/>
     <mkl-scroll class="document" :margin="4" :radius="6">
@@ -131,6 +136,8 @@ module.exports = {
   left: 0;
   right: 0;
   height: 40px;
+  box-sizing: border-box;
+  border-bottom: 2px solid;
 
   .mkl-input {
     font-size: 14px;
@@ -150,7 +157,7 @@ module.exports = {
   width: 50%;
 }
 
-> .mkl-scroll.document {
+> .mkl-scroll {
   left: 50%;
   right: 0;
 
diff --git a/packages/app/comp/index.css b/packages/app/comp/index.css
index df3a6d2..c602397 100644
--- a/packages/app/comp/index.css
+++ b/packages/app/comp/index.css
@@ -9,6 +9,10 @@ body {
     "微软雅黑",
     Arial,
     sans-serif;
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease,
+    border-color 0.3s ease;
 }
 
 .no-transition {
diff --git a/packages/app/index.dev.html b/packages/app/index.dev.html
index 1d1959b..d7018da 100644
--- a/packages/app/index.dev.html
+++ b/packages/app/index.dev.html
@@ -15,6 +15,7 @@
       const style = document.createElement('style')
       style.innerText = result.css
       document.head.appendChild(style)
+      window.result = result
       Vue.use(result.plugin)
       new Vue(result.app)
     </script>
diff --git a/packages/app/package.json b/packages/app/package.json
index 5c1037b..558d4ca 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,6 +20,7 @@
     "@marklet/monaco": "^1.3.0",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1",
+    "js-yaml": "^3.12.0",
     "neat-scroll": "^2.0.1",
     "vue": "^2.5.17"
   }
diff --git a/packages/monaco/index.scss b/packages/monaco/index.scss
index 11adffb..f3e17a5 100644
--- a/packages/monaco/index.scss
+++ b/packages/monaco/index.scss
@@ -1,4 +1,8 @@
 .monaco-editor {
+  .decorationsOverviewRuler {
+    display: none;
+  }
+  
   .monaco-scrollable-element {
     > .scrollbar {
       transition: opacity 0.3s ease;
diff --git a/packages/renderer/themes/dark.scss b/packages/renderer/themes/dark/index.scss
similarity index 100%
rename from packages/renderer/themes/dark.scss
rename to packages/renderer/themes/dark/index.scss
diff --git a/packages/renderer/themes/dark/monaco.yaml b/packages/renderer/themes/dark/monaco.yaml
new file mode 100644
index 0000000..ca9add3
--- /dev/null
+++ b/packages/renderer/themes/dark/monaco.yaml
@@ -0,0 +1,76 @@
+base: vs-dark
+rules: []
+inherit: true
+
+colors:
+  dropdown.background: '#414339'
+  list.activeSelectionBackground: '#75715E'
+  list.focusBackground: '#414339'
+  dropdown.listBackground: '#1e1f1c'
+  list.inactiveSelectionBackground: '#414339'
+  list.hoverBackground: '#3e3d32'
+  list.dropBackground: '#414339'
+  list.highlightForeground: '#f8f8f2'
+  button.background: '#75715E'
+  editor.background: '#272822'
+  editor.foreground: '#f8f8f2'
+  selection.background: '#ccccc7'
+  editor.selectionHighlightBackground: '#575b6180'
+  editor.selectionBackground: '#878b9180'
+  editor.wordHighlightBackground: '#4a4a7680'
+  editor.wordHighlightStrongBackground: '#6a6a9680'
+  editor.lineHighlightBackground: '#3e3d32'
+  editorLineNumber.activeForeground: '#c2c2bf'
+  editorCursor.foreground: '#f8f8f0'
+  editorWhitespace.foreground: '#464741'
+  editorIndentGuide.background: '#464741'
+  editorIndentGuide.activeBackground: '#767771'
+  editorGroupHeader.tabsBackground: '#1e1f1c'
+  editorGroup.dropBackground: '#41433980'
+  tab.inactiveBackground: '#414339'
+  tab.border: '#1e1f1c'
+  tab.inactiveForeground: '#ccccc7'
+  widget.shadow: '#000000'
+  progressBar.background: '#75715E'
+  badge.background: '#75715E'
+  badge.foreground: '#f8f8f2'
+  editorLineNumber.foreground: '#90908a'
+  panelTitle.activeForeground: '#f8f8f2'
+  panelTitle.activeBorder: '#75715E'
+  panelTitle.inactiveForeground: '#75715E'
+  panel.border: '#414339'
+  titleBar.activeBackground: '#1e1f1c'
+  statusBar.background: '#414339'
+  statusBar.noFolderBackground: '#414339'
+  statusBar.debuggingBackground: '#75715E'
+  activityBar.background: '#272822'
+  activityBar.foreground: '#f8f8f2'
+  activityBar.dropBackground: '#414339'
+  sideBar.background: '#1e1f1c'
+  sideBarSectionHeader.background: '#272822'
+  pickerGroup.foreground: '#75715E'
+  input.background: '#414339'
+  inputOption.activeBorder: '#75715E'
+  focusBorder: '#75715E'
+  editorWidget.background: '#1e1f1c'
+  debugToolBar.background: '#1e1f1c'
+  diffEditor.insertedTextBackground: '#66852880'
+  diffEditor.removedTextBackground: '#90274A80'
+  inputValidation.errorBackground: '#90274A'
+  inputValidation.errorBorder: '#f92672'
+  inputValidation.warningBackground: '#848528'
+  inputValidation.warningBorder: '#e2e22e'
+  inputValidation.infoBackground: '#546190'
+  inputValidation.infoBorder: '#819aff'
+  editorHoverWidget.background: '#414339'
+  editorHoverWidget.border: '#75715E'
+  editorSuggestWidget.background: '#272822'
+  editorSuggestWidget.border: '#75715E'
+  editorGroup.border: '#414339'
+  peekView.border: '#75715E'
+  peekViewEditor.background: '#272822'
+  peekViewResult.background: '#1e1f1c'
+  peekViewTitle.background: '#1e1f1c'
+  peekViewResult.selectionBackground: '#414339'
+  peekViewResult.matchHighlightBackground: '#75715E'
+  peekViewEditor.matchHighlightBackground: '#75715E'
diff --git a/packages/renderer/themes/simple.scss b/packages/renderer/themes/simple/index.scss
similarity index 100%
rename from packages/renderer/themes/simple.scss
rename to packages/renderer/themes/simple/index.scss
diff --git a/packages/renderer/themes/simple/monaco.yaml b/packages/renderer/themes/simple/monaco.yaml
new file mode 100644
index 0000000..8652b36
--- /dev/null
+++ b/packages/renderer/themes/simple/monaco.yaml
@@ -0,0 +1,76 @@
+base: vs
+rules: []
+inherit: true
+
+colors:
+  dropdown.background: '#ffffff'
+  list.activeSelectionBackground: '#75715E'
+  list.focusBackground: '#ffffff'
+  dropdown.listBackground: '#efeff2'
+  list.inactiveSelectionBackground: '#E5EBF1'
+  list.hoverBackground: '#E8E8E8'
+  list.dropBackground: '#ffffff'
+  list.highlightForeground: '#007acc'
+  button.background: '#75715E'
+  editor.background: '#ffffff'
+  editor.foreground: '#24292e'
+  selection.background: '#ccccc7'
+  editor.selectionHighlightBackground: '#ADD6FF4D'
+  editor.selectionBackground: '#5badff80'
+  editor.wordHighlightBackground: '#4a4a7680'
+  editor.wordHighlightStrongBackground: '#6a6a9680'
+  editor.lineHighlightBackground: '#fffbdd'
+  editorLineNumber.activeForeground: '#0b0b59'
+  editorCursor.foreground: '#000000'
+  editorWhitespace.foreground: '#464741'
+  editorIndentGuide.background: '#eeeeee'
+  editorIndentGuide.activeBackground: '#939393'
+  editorGroupHeader.tabsBackground: '#efeff2'
+  editorGroup.dropBackground: '#41433980'
+  tab.inactiveBackground: '#fafbfc'
+  tab.border: '#efeff2'
+  tab.inactiveForeground: '#ccccc7'
+  widget.shadow: '#808080'
+  progressBar.background: '#75715E'
+  badge.background: '#75715E'
+  badge.foreground: '#f8f8f2'
+  editorLineNumber.foreground: '#cccccc'
+  panelTitle.activeForeground: '#f8f8f2'
+  panelTitle.activeBorder: '#75715E'
+  panelTitle.inactiveForeground: '#75715E'
+  panel.border: '#ffffff'
+  titleBar.activeBackground: '#fafbfc'
+  statusBar.background: '#fafbfc'
+  statusBar.noFolderBackground: '#fafbfc'
+  statusBar.debuggingBackground: '#fafbfc'
+  activityBar.background: '#24292e'
+  activityBar.foreground: '#fafbfc'
+  activityBar.dropBackground: '#ffffff'
+  sideBar.background: '#fafbfc'
+  sideBarSectionHeader.background: '#F1F2F3'
+  pickerGroup.foreground: '#75715E'
+  input.background: '#ffffff'
+  inputOption.activeBorder: '#75715E'
+  focusBorder: '#fafbfc'
+  editorWidget.background: '#efeff2'
+  debugToolBar.background: '#efeff2'
+  diffEditor.insertedTextBackground: '#66852880'
+  diffEditor.removedTextBackground: '#90274A80'
+  inputValidation.errorBackground: '#90274A'
+  inputValidation.errorBorder: '#f92672'
+  inputValidation.warningBackground: '#848528'
+  inputValidation.warningBorder: '#e2e22e'
+  inputValidation.infoBackground: '#546190'
+  inputValidation.infoBorder: '#819aff'
+  editorHoverWidget.background: '#ffffff'
+  editorHoverWidget.border: '#75715E'
+  editorSuggestWidget.background: '#F3F3F3'
+  editorSuggestWidget.border: '#75715E'
+  editorGroup.border: '#ffffff'
+  peekView.border: '#75715E'
+  peekViewEditor.background: '#272822'
+  peekViewResult.background: '#efeff2'
+  peekViewTitle.background: '#efeff2'
+  peekViewResult.selectionBackground: '#ffffff'
+  peekViewResult.matchHighlightBackground: '#75715E'
+  peekViewEditor.matchHighlightBackground: '#75715E'

From f24bf5390e0309ff7839faffe8cf6dab24e21d4f Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 10 Oct 2018 21:36:50 +0800
Subject: [PATCH 08/30] monaco in dev server

---
 .gitignore                                    |   3 +-
 build/build.js                                |  55 +++++--
 package.json                                  |   2 +-
 packages/dev-server/comp/edit.vue             | 154 +++++++++++++++++-
 packages/dev-server/package.json              |   1 +
 packages/dev-server/src/client.ts             |   9 +-
 packages/dev-server/src/index.html            |  14 +-
 packages/dev-server/src/server.ts             |   4 +-
 .../themes/dark.yaml}                         |   0
 .../themes/simple.yaml}                       |   0
 packages/renderer/src/index.js                |   1 +
 .../themes/{dark/index.scss => dark.scss}     |   0
 packages/renderer/themes/index.json           |  10 ++
 .../themes/{simple/index.scss => simple.scss} |   0
 14 files changed, 220 insertions(+), 33 deletions(-)
 rename packages/{renderer/themes/dark/monaco.yaml => dev-server/themes/dark.yaml} (100%)
 rename packages/{renderer/themes/simple/monaco.yaml => dev-server/themes/simple.yaml} (100%)
 rename packages/renderer/themes/{dark/index.scss => dark.scss} (100%)
 create mode 100644 packages/renderer/themes/index.json
 rename packages/renderer/themes/{simple/index.scss => simple.scss} (100%)

diff --git a/.gitignore b/.gitignore
index 407a7d3..1e5f855 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,5 @@ temp
 *.cache.*
 packages/app/main.js
 packages/app/index.html
-packages/monaco/index.css
\ No newline at end of file
+packages/monaco/index.css
+packages/dev-server/themes/*.json
\ No newline at end of file
diff --git a/build/build.js b/build/build.js
index 943fe09..ded393c 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,15 +1,18 @@
-const util = require('./util')
+const themes = require('../packages/renderer/themes')
+const { exec, resolve } = require('./util')
 const { minify } = require('html-minifier')
 const program = require('commander')
 const webpack = require('webpack')
 const sfc2js = require('sfc2js')
+const sass = require('node-sass')
+const yaml = require('js-yaml')
 const fs = require('fs')
 
 sfc2js.install(require('@sfc2js/sass'))
 sfc2js.install(require('@sfc2js/clean-css'))
 
 function mkdirIfNotExists(name) {
-  fs.existsSync(util.resolve(name)) || fs.mkdirSync(util.resolve(name))
+  fs.existsSync(resolve(name)) || fs.mkdirSync(resolve(name))
 }
 
 program
@@ -31,14 +34,14 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
   const compiler = webpack({
     target: 'web',
     mode: env,
-    entry: util.resolve(name, options.entry),
+    entry: resolve(name, options.entry),
     resolve: {
       alias: {
-        '@': util.resolve(name, 'temp')
+        '@': resolve(name, 'temp')
       }
     },
     output: {
-      path: util.resolve(name, 'dist'),
+      path: resolve(name, 'dist'),
       filename: options.output,
       library: 'Marklet',
       libraryTarget: 'umd',
@@ -69,16 +72,33 @@ Promise.resolve().then(() => {
 
     sfc2js.transpile({
       ...sfc2jsOptions,
-      baseDir: util.resolve('renderer'),
+      baseDir: resolve('renderer'),
       outCSSFile: '../dist/marklet.min.css',
       defaultScript: {
         props: ['node'],
       },
     })
 
-    return bundle('renderer', {
-      entry: 'src/index.js',
-      output: 'renderer.min.js',
+    let css = ''
+    return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
+      const filepath = resolve('renderer/themes', key + '.scss')
+      sass.render({
+        data: `.${key}.marklet{${fs.readFileSync(filepath).toString()}}`,
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) {
+          reject(error)
+        } else {
+          css += result.css.toString()
+          resolve()
+        }
+      })
+    }))).then(() => {
+      fs.writeFileSync(resolve('renderer/dist/themes.min.css'), css)
+      return bundle('renderer', {
+        entry: 'src/index.js',
+        output: 'renderer.min.js',
+      })
     })
   }
 }).then(() => {
@@ -86,30 +106,35 @@ Promise.resolve().then(() => {
     mkdirIfNotExists('dev-server/dist')
   
     if (program.tsc) {
-      util.exec('tsc -p packages/dev-server')
+      exec('tsc -p packages/dev-server')
     }
 
     if (program.prod) {
       fs.writeFileSync(
-        util.resolve('dev-server/dist/index.html'),
-        minify(fs.readFileSync(util.resolve('dev-server/src/index.html')).toString(), {
+        resolve('dev-server/dist/index.html'),
+        minify(fs.readFileSync(resolve('dev-server/src/index.html')).toString(), {
           collapseWhitespace: true,
           removeAttributeQuotes: true,
         })
       )
     } else {
       fs.copyFileSync(
-        util.resolve('dev-server/src/index.html'),
-        util.resolve('dev-server/dist/index.html')
+        resolve('dev-server/src/index.html'),
+        resolve('dev-server/dist/index.html')
       )
     }
   
     sfc2js.transpile({
       ...sfc2jsOptions,
-      baseDir: util.resolve('dev-server'),
+      baseDir: resolve('dev-server'),
       outCSSFile: '../dist/client.min.css',
     })
 
+    themes.forEach(({ key }) => {
+      const options = yaml.safeLoad(fs.readFileSync(resolve(`dev-server/themes/${key}.yaml`)))
+      fs.writeFileSync(resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
+    })
+
     return bundle('dev-server', {
       entry: 'dist/client.js',
       output: 'client.min.js',
diff --git a/package.json b/package.json
index 8578516..98281a5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "scripts": {
     "start": "npm run build && node packages/cli -m edit",
-    "bootstrap": "lerna bootstrap --hoist --no-ci",
+    "bootstrap": "lerna bootstrap --no-ci",
     "build": "tsc -b && node build/build -sr",
     "build:prod": "tsc -b && node build/build -psr",
     "build:renderer": "node build/build -r",
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 8fe1e49..9e8aeaa 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -1,26 +1,166 @@
 <script>
 
+const { DocumentLexer } = require('@marklet/parser')
+
+const themes = ['simple', 'dark']
+
 module.exports = {
+  el: '#app',
+
   data: () => ({
+    themeInput: '',
+    theme: 'dark',
+    origin: '',
     source: '',
     nodes: [],
+    loading: 3,
+    changed: false,
   }),
+
   watch: {
     source(value) {
-      this.nodes = window.Marklet.parse(value)
-    }
+      this.nodes = this._lexer.parse(value)
+    },
+    loading(value) {
+      if (!value) {
+        this._editor.setModel(this._model)
+        this.layout()
+      }
+    },
+    theme(value) {
+      if (window.monaco) {
+        window.monaco.editor.setTheme(value)
+      }
+    },
+    themeInput(value) {
+      if (themes.includes(value)) this.theme = value
+    },
+  },
+
+  created() {
+    const source = localStorage.getItem('source')
+    if (typeof source === 'string') this.source = source
+    
+    this._lexer = new DocumentLexer()
+
+    this.$eventBus.$on('monaco.loaded', (monaco) => {
+      themes.forEach((name) => {
+        monaco.editor.defineTheme(name, 'simple')
+      })
+      const model = monaco.editor.createModel(this.source, 'marklet')
+      model.onDidChangeContent(() => this.checkChange())
+      const nodes = this.nodes
+      this.nodes = []
+      this.$nextTick(() => this.nodes = nodes)
+      this._model = model
+      this.loading ^= 1
+    })
+  },
+
+  mounted() {
+    window.vm = this
+    
+    this.$eventBus.$on('monaco.loaded', (monaco) => {
+      monaco.editor.setTheme(this.theme)
+      this._editor = monaco.editor.create(this.$refs.input, {
+        model: null,
+        language: 'marklet',
+        lineDecorationsWidth: 4,
+        scrollBeyondLastLine: false,
+        minimap: { enabled: false },
+        scrollbar: {
+          verticalScrollbarSize: 20,
+          verticalSliderSize: 12,
+        },
+      })
+      this._editor.onDidChangeCursorPosition((event) => {
+        this.row = event.position.lineNumber
+        this.column = event.position.column
+      })
+      this.loading ^= 2
+    })
+
+    addEventListener('resize', () => {
+      this.$refs.input.classList.add('no-transition')
+      this.layout()
+      this.$refs.input.classList.remove('no-transition')
+    }, { passive: true })
+
+    addEventListener('beforeunload', () => {
+      localStorage.setItem('source', this.source)
+    })
   },
+
+  methods: {
+    checkChange(data) {
+      if (data !== undefined) this.origin = data
+      this.source = this._model.getValue()
+      this.changed = this.origin !== this.source
+    },
+    layout(deltaTime = 0) {
+      const now = performance.now(), self = this
+      this._editor._configuration.observeReferenceElement()
+      this._editor._view._actualRender()
+      if (!deltaTime) return
+      requestAnimationFrame(function layout(newTime) {
+        self._editor._configuration.observeReferenceElement()
+        self._editor._view._actualRender()
+        if (newTime - now < deltaTime) requestAnimationFrame(layout)
+      })
+    },
+  }
 }
 
 </script>
 
 <template>
-  <div>
-    <textarea v-model="source"/>
-    <mkl-nodes :content="nodes"/>
+  <div :class="theme">
+    <div class="navbar">
+      <mkl-input v-model="themeInput" placeholder="input theme"/>
+    </div>
+    <div class="input" ref="input"/>
+    <mkl-scroll class="document" :margin="4" :radius="6">
+      <mkl-nodes ref="nodes" :content="nodes"/>
+    </mkl-scroll>
   </div>
 </template>
 
-<style>
+<style lang="scss" scoped>
+
+> .navbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  box-sizing: border-box;
+  border-bottom: 2px solid;
+
+  .mkl-input {
+    font-size: 14px;
+    padding: 6px 16px;
+    max-width: 200px;
+  }
+}
+
+> .input, > .document {
+  position: absolute;
+  top: 40px;
+  bottom: 0;
+}
+
+> .input {
+  left: 0;
+  width: 50%;
+}
+
+> .mkl-scroll {
+  left: 50%;
+  right: 0;
+
+  > .container {
+    padding: 0 24px;
+  }
+}
 
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index a0e9c11..755979e 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1",
+    "monaco-editor": "^0.14.3",
     "vue": "^2.5.17",
     "ws": "^6.0.0"
   }
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 169cdd6..f851a7e 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -1,11 +1,9 @@
-import Vue from 'vue'
+import VueConstructor from 'vue'
 import * as renderer from '@marklet/renderer'
 import { DocumentLexer, LexerConfig } from '@marklet/parser'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    $eventBus: Vue
-  }
+declare global {
+  export const Vue: typeof VueConstructor
 }
 
 const eventBus = new Vue()
@@ -26,7 +24,6 @@ const client = new class WatchClient {
     this.url = url
     this.retry = retry
     this.timeout = timeout
-
     this.createWebSocket()
   }
 
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/index.html
index acb3782..edaab62 100644
--- a/packages/dev-server/src/index.html
+++ b/packages/dev-server/src/index.html
@@ -4,12 +4,24 @@
     <meta charset="utf-8">
     <title>Marklet</title>
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <link href="@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
+    <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
+    <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
+    <script src="~/vue/dist/vue.runtime.min.js"></script>
     <link href="client.min.css" rel="stylesheet">
     <script src="client.min.js"></script>
+    <script src="~/monaco-editor/min/vs/loader.js"></script>
   </head>
   <body>
     <div id="app"></div>
     <script src="start"></script>
+    <script>
+      require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
+      require(['vs/editor/editor.main'], () => {
+        Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
+        if (!Vue.prototype.$colorize) {
+          Vue.prototype.$colorize = (code, lang) => monaco.editor.colorize(code, lang)
+        }
+      })
+    </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index cd365c8..318ef3d 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -30,8 +30,8 @@ function createServer(type: 'edit' | 'watch') {
     let pathname = url.parse(request.url).pathname.slice(1)
     if (!pathname) {
       pathname = 'index.html'
-    } else if (pathname.startsWith('@marklet')) {
-      pathname = '../node_modules/' + pathname
+    } else if (pathname.startsWith('~/')) {
+      pathname = '../node_modules/' + pathname.slice(1)
     } else if (pathname === 'start') {
       response.writeHead(200, { 'Content-Type': 'text/javascript' })
       response.write(`Marklet.start({ el: '#app', type: '${type}' })`)
diff --git a/packages/renderer/themes/dark/monaco.yaml b/packages/dev-server/themes/dark.yaml
similarity index 100%
rename from packages/renderer/themes/dark/monaco.yaml
rename to packages/dev-server/themes/dark.yaml
diff --git a/packages/renderer/themes/simple/monaco.yaml b/packages/dev-server/themes/simple.yaml
similarity index 100%
rename from packages/renderer/themes/simple/monaco.yaml
rename to packages/dev-server/themes/simple.yaml
diff --git a/packages/renderer/src/index.js b/packages/renderer/src/index.js
index 08a702c..2af613f 100644
--- a/packages/renderer/src/index.js
+++ b/packages/renderer/src/index.js
@@ -1,6 +1,7 @@
 let _Vue = null, ASTNodes = null
 
 const Renderer = {
+  themes: require('../themes'),
   install(Vue) {
     _Vue = Vue
     Vue.component('collapse-transition', require('../temp/transitions/collapse-transition.vue'))
diff --git a/packages/renderer/themes/dark/index.scss b/packages/renderer/themes/dark.scss
similarity index 100%
rename from packages/renderer/themes/dark/index.scss
rename to packages/renderer/themes/dark.scss
diff --git a/packages/renderer/themes/index.json b/packages/renderer/themes/index.json
new file mode 100644
index 0000000..733e5cb
--- /dev/null
+++ b/packages/renderer/themes/index.json
@@ -0,0 +1,10 @@
+[
+  {
+    "key": "dark",
+    "name": "暗色"
+  },
+  {
+    "key": "simple",
+    "name": "简约"
+  }
+]
\ No newline at end of file
diff --git a/packages/renderer/themes/simple/index.scss b/packages/renderer/themes/simple.scss
similarity index 100%
rename from packages/renderer/themes/simple/index.scss
rename to packages/renderer/themes/simple.scss

From de39a71db53bf9e50ee1215dad06e94a85ee6003 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 10 Oct 2018 22:36:10 +0800
Subject: [PATCH 09/30] emmmmm

---
 build/build.js                                | 151 ++++++++++--------
 packages/dev-server/comp/edit.vue             |  10 +-
 packages/dev-server/src/client.ts             |   9 +-
 packages/dev-server/src/index.html            |   1 +
 packages/dev-server/src/language.ts           |  22 +++
 .../index.scss => dev-server/src/monaco.scss} |   0
 packages/dev-server/src/server.ts             |   1 +
 packages/monaco/marklet.js                    |  15 --
 packages/renderer/index.d.ts                  |   6 +
 9 files changed, 121 insertions(+), 94 deletions(-)
 create mode 100644 packages/dev-server/src/language.ts
 rename packages/{monaco/index.scss => dev-server/src/monaco.scss} (100%)
 delete mode 100644 packages/monaco/marklet.js

diff --git a/build/build.js b/build/build.js
index ded393c..e4b25f7 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,5 +1,5 @@
 const themes = require('../packages/renderer/themes')
-const { exec, resolve } = require('./util')
+const util = require('./util')
 const { minify } = require('html-minifier')
 const program = require('commander')
 const webpack = require('webpack')
@@ -12,7 +12,7 @@ sfc2js.install(require('@sfc2js/sass'))
 sfc2js.install(require('@sfc2js/clean-css'))
 
 function mkdirIfNotExists(name) {
-  fs.existsSync(resolve(name)) || fs.mkdirSync(resolve(name))
+  fs.existsSync(util.resolve(name)) || fs.mkdirSync(util.resolve(name))
 }
 
 program
@@ -34,14 +34,14 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
   const compiler = webpack({
     target: 'web',
     mode: env,
-    entry: resolve(name, options.entry),
+    entry: util.resolve(name, options.entry),
     resolve: {
       alias: {
-        '@': resolve(name, 'temp')
+        '@': util.resolve(name, 'temp')
       }
     },
     output: {
-      path: resolve(name, 'dist'),
+      path: util.resolve(name, 'dist'),
       filename: options.output,
       library: 'Marklet',
       libraryTarget: 'umd',
@@ -67,80 +67,89 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
 })
 
 Promise.resolve().then(() => {
-  if (program.renderer) {
-    mkdirIfNotExists('renderer/dist')
-
-    sfc2js.transpile({
-      ...sfc2jsOptions,
-      baseDir: resolve('renderer'),
-      outCSSFile: '../dist/marklet.min.css',
-      defaultScript: {
-        props: ['node'],
-      },
+  if (!program.renderer) return
+  
+  mkdirIfNotExists('renderer/dist')
+
+  sfc2js.transpile({
+    ...sfc2jsOptions,
+    baseDir: util.resolve('renderer'),
+    outCSSFile: '../dist/marklet.min.css',
+    defaultScript: {
+      props: ['node'],
+    },
+  })
+
+  let css = ''
+  return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
+    const filepath = util.resolve('renderer/themes', key + '.scss')
+    sass.render({
+      data: `.${key}.marklet{${fs.readFileSync(filepath).toString()}}`,
+      outputStyle: 'compressed',
+    }, (error, result) => {
+      if (error) {
+        reject(error)
+      } else {
+        css += result.css.toString()
+        resolve()
+      }
+    })
+  }))).then(() => {
+    fs.writeFileSync(util.resolve('renderer/dist/themes.min.css'), css)
+    return bundle('renderer', {
+      entry: 'src/index.js',
+      output: 'renderer.min.js',
     })
+  })
+}).then(() => {
+  if (!program.server) return
 
-    let css = ''
-    return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
-      const filepath = resolve('renderer/themes', key + '.scss')
-      sass.render({
-        data: `.${key}.marklet{${fs.readFileSync(filepath).toString()}}`,
-        outputStyle: 'compressed',
-      }, (error, result) => {
-        if (error) {
-          reject(error)
-        } else {
-          css += result.css.toString()
-          resolve()
-        }
-      })
-    }))).then(() => {
-      fs.writeFileSync(resolve('renderer/dist/themes.min.css'), css)
-      return bundle('renderer', {
-        entry: 'src/index.js',
-        output: 'renderer.min.js',
+  mkdirIfNotExists('dev-server/dist')
+
+  if (program.tsc) {
+    util.exec('tsc -p packages/dev-server')
+  }
+
+  if (program.prod) {
+    fs.writeFileSync(
+      util.resolve('dev-server/dist/index.html'),
+      minify(fs.readFileSync(util.resolve('dev-server/src/index.html')).toString(), {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
       })
-    })
+    )
+  } else {
+    fs.copyFileSync(
+      util.resolve('dev-server/src/index.html'),
+      util.resolve('dev-server/dist/index.html')
+    )
   }
-}).then(() => {
-  if (program.server) {
-    mkdirIfNotExists('dev-server/dist')
-  
-    if (program.tsc) {
-      exec('tsc -p packages/dev-server')
-    }
 
-    if (program.prod) {
-      fs.writeFileSync(
-        resolve('dev-server/dist/index.html'),
-        minify(fs.readFileSync(resolve('dev-server/src/index.html')).toString(), {
-          collapseWhitespace: true,
-          removeAttributeQuotes: true,
-        })
-      )
-    } else {
-      fs.copyFileSync(
-        resolve('dev-server/src/index.html'),
-        resolve('dev-server/dist/index.html')
-      )
-    }
-  
-    sfc2js.transpile({
-      ...sfc2jsOptions,
-      baseDir: resolve('dev-server'),
-      outCSSFile: '../dist/client.min.css',
-    })
+  sfc2js.transpile({
+    ...sfc2jsOptions,
+    baseDir: util.resolve('dev-server'),
+    outCSSFile: '../dist/client.min.css',
+  })
 
-    themes.forEach(({ key }) => {
-      const options = yaml.safeLoad(fs.readFileSync(resolve(`dev-server/themes/${key}.yaml`)))
-      fs.writeFileSync(resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
-    })
+  themes.forEach(({ key }) => {
+    const options = yaml.safeLoad(fs.readFileSync(util.resolve(`dev-server/themes/${key}.yaml`)))
+    fs.writeFileSync(util.resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
+  })
 
-    return bundle('dev-server', {
-      entry: 'dist/client.js',
-      output: 'client.min.js',
-      libraryExport: 'Marklet',
+  return new Promise((resolve, reject) => {
+    sass.render({
+      data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
+      outputStyle: 'compressed',
+    }, (error, result) => {
+      if (error) reject(error)
+      fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), result.css.toString())
+      resolve()
     })
-  }
+  }).then(() => bundle('dev-server', {
+    entry: 'dist/client.js',
+    output: 'client.min.js',
+    libraryExport: 'Marklet',
+  }))
 }).catch((error) => {
   console.log(error)
 })
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 9e8aeaa..d01ff25 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -1,8 +1,7 @@
 <script>
 
 const { DocumentLexer } = require('@marklet/parser')
-
-const themes = ['simple', 'dark']
+const { themes } = require('@marklet/renderer')
 
 module.exports = {
   el: '#app',
@@ -33,7 +32,7 @@ module.exports = {
       }
     },
     themeInput(value) {
-      if (themes.includes(value)) this.theme = value
+      if (themes.find(({ key }) => key === value)) this.theme = value
     },
   },
 
@@ -44,9 +43,6 @@ module.exports = {
     this._lexer = new DocumentLexer()
 
     this.$eventBus.$on('monaco.loaded', (monaco) => {
-      themes.forEach((name) => {
-        monaco.editor.defineTheme(name, 'simple')
-      })
       const model = monaco.editor.createModel(this.source, 'marklet')
       model.onDidChangeContent(() => this.checkChange())
       const nodes = this.nodes
@@ -114,7 +110,7 @@ module.exports = {
 </script>
 
 <template>
-  <div :class="theme">
+  <div :class="theme" class="marklet">
     <div class="navbar">
       <mkl-input v-model="themeInput" placeholder="input theme"/>
     </div>
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index f851a7e..6ebba5b 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -1,4 +1,5 @@
 import VueConstructor from 'vue'
+import Monaco from 'monaco-editor'
 import * as renderer from '@marklet/renderer'
 import { DocumentLexer, LexerConfig } from '@marklet/parser'
 
@@ -6,9 +7,15 @@ declare global {
   export const Vue: typeof VueConstructor
 }
 
+Vue.use(renderer)
 const eventBus = new Vue()
 Vue.prototype.$eventBus = eventBus
-Vue.use(renderer)
+
+eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
+  renderer.themes.forEach(({ key }) => {
+    monaco.editor.defineTheme(key, require('../themes/' + key))
+  })
+})
 
 const client = new class WatchClient {
   private url: string
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/index.html
index edaab62..8c97d52 100644
--- a/packages/dev-server/src/index.html
+++ b/packages/dev-server/src/index.html
@@ -7,6 +7,7 @@
     <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
     <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
     <script src="~/vue/dist/vue.runtime.min.js"></script>
+    <link href="monaco.min.css" rel="stylesheet">
     <link href="client.min.css" rel="stylesheet">
     <script src="client.min.js"></script>
     <script src="~/monaco-editor/min/vs/loader.js"></script>
diff --git a/packages/dev-server/src/language.ts b/packages/dev-server/src/language.ts
new file mode 100644
index 0000000..4f2cdac
--- /dev/null
+++ b/packages/dev-server/src/language.ts
@@ -0,0 +1,22 @@
+import { LexerConfig } from '@marklet/parser'
+import Monaco from 'monaco-editor'
+
+export default function(config: LexerConfig = {}) {
+  const language: Monaco.languages.IMonarchLanguage = {
+    tokenizer: {
+      root: [
+        { include: 'topLevel' },
+      ],
+      topLevel: [
+        {
+          regex: /(#{1,4}) +([^\n]+?)( +#)?/,
+          action: {
+            token: 'heading'
+          }
+        }
+      ],
+    },
+  }
+
+  return language
+}
diff --git a/packages/monaco/index.scss b/packages/dev-server/src/monaco.scss
similarity index 100%
rename from packages/monaco/index.scss
rename to packages/dev-server/src/monaco.scss
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 318ef3d..018f696 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -39,6 +39,7 @@ function createServer(type: 'edit' | 'watch') {
       return
     }
     fs.readFile(path.join(__dirname, pathname), (error, data) => {
+      if (pathname.endsWith('edit.vue.js')) console.log(data)
       if (error) {
         console.log(error)
         response.writeHead(404, { 'Content-Type': 'text/html' })
diff --git a/packages/monaco/marklet.js b/packages/monaco/marklet.js
deleted file mode 100644
index 37e2cc4..0000000
--- a/packages/monaco/marklet.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = {
-  tokenizer: {
-    root: [
-      { include: 'topLevel' },
-    ],
-    topLevel: [
-      {
-        regex: /(#{1,4}) +([^\n]+?)( +#)?/,
-        action: {
-          token: 'heading'
-        }
-      }
-    ],
-  },
-}
diff --git a/packages/renderer/index.d.ts b/packages/renderer/index.d.ts
index b11a64e..2f2a0f7 100644
--- a/packages/renderer/index.d.ts
+++ b/packages/renderer/index.d.ts
@@ -1,5 +1,11 @@
 import { VueConstructor } from 'vue'
 import { TokenLike } from '@marklet/core'
 
+interface MarkletTheme {
+  key: string
+  name: string
+}
+
+export const themes: MarkletTheme[]
 export function install(Vue: VueConstructor): void
 export function embed(element: string | HTMLElement, content?: TokenLike[]): void

From c01d6a5bd0bf39d9a3701aebade17ab0525e0a83 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 17 Oct 2018 16:12:41 +0800
Subject: [PATCH 10/30] fix monaco loading failure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

虽然暂时还不知道为什么
 mounted 钩子会被调用 2 次
---
 packages/dev-server/comp/edit.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index d01ff25..0757469 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -23,7 +23,7 @@ module.exports = {
     loading(value) {
       if (!value) {
         this._editor.setModel(this._model)
-        this.layout()
+        this.$nextTick(() => this.layout())
       }
     },
     theme(value) {
@@ -57,6 +57,7 @@ module.exports = {
     window.vm = this
     
     this.$eventBus.$on('monaco.loaded', (monaco) => {
+      if (this._editor) return
       monaco.editor.setTheme(this.theme)
       this._editor = monaco.editor.create(this.$refs.input, {
         model: null,
@@ -123,6 +124,15 @@ module.exports = {
 
 <style lang="scss" scoped>
 
+& {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  position: absolute;
+}
+
 > .navbar {
   position: absolute;
   top: 0;

From d2568f1fe4544927632f963564aa4c25f6986efa Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Fri, 19 Oct 2018 00:22:44 +0800
Subject: [PATCH 11/30] update

---
 .eslintignore  |  3 +-
 build/build.js | 75 +++++++++++++++++++++++++++-----------------------
 package.json   | 27 +++++++++---------
 3 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index bdf4165..0469a4a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 dist/
 temp/
-*.min.js
\ No newline at end of file
+*.min.js
+node_modules
\ No newline at end of file
diff --git a/build/build.js b/build/build.js
index e4b25f7..986504b 100644
--- a/build/build.js
+++ b/build/build.js
@@ -8,7 +8,7 @@ const sass = require('node-sass')
 const yaml = require('js-yaml')
 const fs = require('fs')
 
-sfc2js.install(require('@sfc2js/sass'))
+sfc2js.install(require('@sfc2js/node-sass'))
 sfc2js.install(require('@sfc2js/clean-css'))
 
 function mkdirIfNotExists(name) {
@@ -71,30 +71,33 @@ Promise.resolve().then(() => {
   
   mkdirIfNotExists('renderer/dist')
 
-  sfc2js.transpile({
+  let css = ''
+  return sfc2js.transpile({
     ...sfc2jsOptions,
     baseDir: util.resolve('renderer'),
     outCSSFile: '../dist/marklet.min.css',
     defaultScript: {
       props: ['node'],
     },
-  })
-
-  let css = ''
-  return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
-    const filepath = util.resolve('renderer/themes', key + '.scss')
-    sass.render({
-      data: `.${key}.marklet{${fs.readFileSync(filepath).toString()}}`,
-      outputStyle: 'compressed',
-    }, (error, result) => {
-      if (error) {
-        reject(error)
-      } else {
-        css += result.css.toString()
-        resolve()
-      }
-    })
-  }))).then(() => {
+  }).then((result) => {
+    if (result.errors.length) {
+      throw result.errors.join('\n')
+    }
+    return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
+      const filepath = util.resolve('renderer/themes', key + '.scss')
+      sass.render({
+        data: `.${key}.marklet{${fs.readFileSync(filepath).toString()}}`,
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) {
+          reject(error)
+        } else {
+          css += result.css.toString()
+          resolve()
+        }
+      })
+    })))
+  }).then(() => {
     fs.writeFileSync(util.resolve('renderer/dist/themes.min.css'), css)
     return bundle('renderer', {
       entry: 'src/index.js',
@@ -125,25 +128,29 @@ Promise.resolve().then(() => {
     )
   }
 
-  sfc2js.transpile({
-    ...sfc2jsOptions,
-    baseDir: util.resolve('dev-server'),
-    outCSSFile: '../dist/client.min.css',
-  })
-
   themes.forEach(({ key }) => {
     const options = yaml.safeLoad(fs.readFileSync(util.resolve(`dev-server/themes/${key}.yaml`)))
     fs.writeFileSync(util.resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
   })
-
-  return new Promise((resolve, reject) => {
-    sass.render({
-      data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
-      outputStyle: 'compressed',
-    }, (error, result) => {
-      if (error) reject(error)
-      fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), result.css.toString())
-      resolve()
+  
+  return sfc2js.transpile({
+    ...sfc2jsOptions,
+    useCache: false,
+    baseDir: util.resolve('dev-server'),
+    outCSSFile: '../dist/client.min.css',
+  }).then((result) => {
+    if (result.errors.length) {
+      throw result.errors.join('\n')
+    }
+    return new Promise((resolve, reject) => {
+      sass.render({
+        data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) reject(error)
+        fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), result.css.toString())
+        resolve()
+      })
     })
   }).then(() => bundle('dev-server', {
     entry: 'dist/client.js',
diff --git a/package.json b/package.json
index 98281a5..2de9854 100644
--- a/package.json
+++ b/package.json
@@ -11,29 +11,30 @@
     "lint": "tslint packages/**/src/*.ts && eslint ."
   },
   "devDependencies": {
-    "@octokit/rest": "^15.13.0",
+    "@octokit/rest": "^15.15.1",
     "@sfc2js/clean-css": "^1.1.1",
-    "@sfc2js/sass": "^1.0.1",
+    "@sfc2js/node-sass": "^2.0.0",
+    "@sfc2js/sass": "^2.0.0",
     "@types/cheerio": "^0.22.9",
     "@types/js-yaml": "^3.11.2",
-    "@types/node": "^10.11.4",
+    "@types/node": "^10.12.0",
     "@types/ws": "^6.0.1",
     "ajv": "^6.5.4",
     "chalk": "^2.4.1",
     "cheerio": "^1.0.0-rc.2",
-    "commander": "^2.18.0",
-    "electron": "^3.0.2",
-    "eslint": "^5.6.1",
+    "commander": "^2.19.0",
+    "electron": "^3.0.4",
+    "eslint": "^5.7.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
     "fast-deep-equal": "^2.0.1",
     "html-minifier": "^3.5.20",
-    "lerna": "^3.4.1",
-    "node-sass": "^4.9.3",
-    "sass": "^1.14.1",
-    "semver": "^5.5.1",
-    "sfc2js": "^3.3.2",
+    "lerna": "^3.4.3",
+    "node-sass": "^4.9.4",
+    "sass": "^1.14.3",
+    "semver": "^5.6.0",
+    "sfc2js": "^4.0.0-beta.0",
     "tslint": "^5.11.0",
-    "typescript": "^3.1.1",
-    "webpack": "^4.20.2"
+    "typescript": "^3.1.3",
+    "webpack": "^4.21.0"
   }
 }

From d0e46471acb72e443d80bbd0e003b049d2223d7f Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Fri, 19 Oct 2018 22:09:10 +0800
Subject: [PATCH 12/30] menu framework

---
 build/build.js                         | 38 +++++++++++++++++------
 package.json                           |  4 +--
 packages/dev-server/comp/edit.vue      | 33 ++++++++------------
 packages/dev-server/comp/menu.js       | 25 +++++++++++++++
 packages/dev-server/comp/menu.vue      |  3 ++
 packages/dev-server/comp/menubar.vue   | 42 ++++++++++++++++++++++++++
 packages/dev-server/package.json       |  1 +
 packages/dev-server/src/client.ts      |  1 +
 packages/dev-server/themes/dark.scss   |  4 +++
 packages/dev-server/themes/simple.scss |  4 +++
 packages/renderer/package.json         |  7 +++--
 11 files changed, 128 insertions(+), 34 deletions(-)
 create mode 100644 packages/dev-server/comp/menu.js
 create mode 100644 packages/dev-server/comp/menu.vue
 create mode 100644 packages/dev-server/comp/menubar.vue
 create mode 100644 packages/dev-server/themes/dark.scss
 create mode 100644 packages/dev-server/themes/simple.scss

diff --git a/build/build.js b/build/build.js
index 986504b..c197f77 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,11 +1,11 @@
 const themes = require('../packages/renderer/themes')
-const util = require('./util')
 const { minify } = require('html-minifier')
 const program = require('commander')
 const webpack = require('webpack')
 const sfc2js = require('sfc2js')
 const sass = require('node-sass')
 const yaml = require('js-yaml')
+const util = require('./util')
 const fs = require('fs')
 
 sfc2js.install(require('@sfc2js/node-sass'))
@@ -68,7 +68,6 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
 
 Promise.resolve().then(() => {
   if (!program.renderer) return
-  
   mkdirIfNotExists('renderer/dist')
 
   let css = ''
@@ -80,9 +79,7 @@ Promise.resolve().then(() => {
       props: ['node'],
     },
   }).then((result) => {
-    if (result.errors.length) {
-      throw result.errors.join('\n')
-    }
+    if (result.errors.length) throw result.errors.join('\n')
     return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
       const filepath = util.resolve('renderer/themes', key + '.scss')
       sass.render({
@@ -106,7 +103,6 @@ Promise.resolve().then(() => {
   })
 }).then(() => {
   if (!program.server) return
-
   mkdirIfNotExists('dev-server/dist')
 
   if (program.tsc) {
@@ -128,6 +124,7 @@ Promise.resolve().then(() => {
     )
   }
 
+  let css = ''
   themes.forEach(({ key }) => {
     const options = yaml.safeLoad(fs.readFileSync(util.resolve(`dev-server/themes/${key}.yaml`)))
     fs.writeFileSync(util.resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
@@ -139,16 +136,37 @@ Promise.resolve().then(() => {
     baseDir: util.resolve('dev-server'),
     outCSSFile: '../dist/client.min.css',
   }).then((result) => {
-    if (result.errors.length) {
-      throw result.errors.join('\n')
-    }
+    if (result.errors.length) throw result.errors.join('\n')
+    return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
+      const filepath = util.resolve('dev-server/themes/' + key)
+
+      try {
+        const options = yaml.safeLoad(fs.readFileSync(filepath + '.yaml'))
+        fs.writeFileSync(filepath + '.json', JSON.stringify(options))
+      } catch (error) {
+        reject(error)
+      }
+
+      sass.render({
+        data: `.${key}.marklet{${fs.readFileSync(filepath + '.scss')}}`,
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) {
+          reject(error)
+        } else {
+          css += result.css
+          resolve()
+        }
+      })
+    })))
+  }).then(() => {
     return new Promise((resolve, reject) => {
       sass.render({
         data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
         outputStyle: 'compressed',
       }, (error, result) => {
         if (error) reject(error)
-        fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), result.css.toString())
+        fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), css + result.css)
         resolve()
       })
     })
diff --git a/package.json b/package.json
index 2de9854..e4a94b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "npm run build && node packages/cli -m edit",
+    "start": "node build/build -r && node packages/cli -m edit",
     "bootstrap": "lerna bootstrap --no-ci",
     "build": "tsc -b && node build/build -sr",
     "build:prod": "tsc -b && node build/build -psr",
@@ -32,7 +32,7 @@
     "node-sass": "^4.9.4",
     "sass": "^1.14.3",
     "semver": "^5.6.0",
-    "sfc2js": "^4.0.0-beta.0",
+    "sfc2js": "^4.0.0-beta.1",
     "tslint": "^5.11.0",
     "typescript": "^3.1.3",
     "webpack": "^4.21.0"
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 0757469..7c2832f 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -41,6 +41,17 @@ module.exports = {
     if (typeof source === 'string') this.source = source
     
     this._lexer = new DocumentLexer()
+    this.$menu.register([
+      {
+        name: '文件',
+        bind: 'F',
+        content: [
+          {
+            name: '保存'
+          }
+        ]
+      }
+    ])
 
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       const model = monaco.editor.createModel(this.source, 'marklet')
@@ -112,9 +123,7 @@ module.exports = {
 
 <template>
   <div :class="theme" class="marklet">
-    <div class="navbar">
-      <mkl-input v-model="themeInput" placeholder="input theme"/>
-    </div>
+    <mkl-menubar class="menubar" :content="[{ name: '文件', bind: 'F' }]"/>
     <div class="input" ref="input"/>
     <mkl-scroll class="document" :margin="4" :radius="6">
       <mkl-nodes ref="nodes" :content="nodes"/>
@@ -133,25 +142,9 @@ module.exports = {
   position: absolute;
 }
 
-> .navbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  box-sizing: border-box;
-  border-bottom: 2px solid;
-
-  .mkl-input {
-    font-size: 14px;
-    padding: 6px 16px;
-    max-width: 200px;
-  }
-}
-
 > .input, > .document {
   position: absolute;
-  top: 40px;
+  top: 32px;
   bottom: 0;
 }
 
diff --git a/packages/dev-server/comp/menu.js b/packages/dev-server/comp/menu.js
new file mode 100644
index 0000000..cf660f5
--- /dev/null
+++ b/packages/dev-server/comp/menu.js
@@ -0,0 +1,25 @@
+const Mousetrap = require('mousetrap')
+const menu = require('./menu.vue')
+const menubar = require('./menubar.vue')
+
+// TODO: improve this pattern maybe. 
+// Cause: firing event inside textarea is blocked by mousetrap by default.
+Mousetrap.prototype.stopCallback = () => false
+
+function toKebab(camel) {
+  return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
+}
+
+module.exports = (Vue) => {
+  const MenuVue = Vue.extend(menu)
+
+  const $menu = {
+    register() {
+      MenuVue
+      toKebab
+    }
+  }
+
+  Vue.prototype.$menu = $menu
+  Vue.component('mkl-menubar', menubar)
+}
diff --git a/packages/dev-server/comp/menu.vue b/packages/dev-server/comp/menu.vue
new file mode 100644
index 0000000..220670b
--- /dev/null
+++ b/packages/dev-server/comp/menu.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>1</div>
+</template>
diff --git a/packages/dev-server/comp/menubar.vue b/packages/dev-server/comp/menubar.vue
new file mode 100644
index 0000000..b674a32
--- /dev/null
+++ b/packages/dev-server/comp/menubar.vue
@@ -0,0 +1,42 @@
+<script>
+
+module.exports = {
+  props: {
+    content: { default: [] },
+  }
+}
+
+</script>
+
+<template>
+  <div class="marklet-menubar">
+    <div v-for="(menu, index) in content" :key="index"
+      @click.stop="$menu.show(index, $event)"
+      @mouseover.stop="$menu.hover(index, $event)"
+      @contextmenu.stop>
+      {{ menu.name }} (<span>{{ menu.bind }}</span>)
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  left: 0;
+  width: 100%;
+  height: 32px;
+  float: left;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  font-size: 14px;
+
+  > div {
+    line-height: 24px;
+    padding: 4px;
+    transition: 0.3s;
+    display: inline-block;
+  }
+}
+
+</style>
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 755979e..c7a880b 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -24,6 +24,7 @@
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1",
     "monaco-editor": "^0.14.3",
+    "mousetrap": "^1.6.2",
     "vue": "^2.5.17",
     "ws": "^6.0.0"
   }
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 6ebba5b..23b9f0e 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -8,6 +8,7 @@ declare global {
 }
 
 Vue.use(renderer)
+Vue.use(require('@/menu'))
 const eventBus = new Vue()
 Vue.prototype.$eventBus = eventBus
 
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
new file mode 100644
index 0000000..39dfd04
--- /dev/null
+++ b/packages/dev-server/themes/dark.scss
@@ -0,0 +1,4 @@
+.marklet-menubar {
+  color: #c8c8c8;
+  background-color: #212220;
+}
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
new file mode 100644
index 0000000..3359dee
--- /dev/null
+++ b/packages/dev-server/themes/simple.scss
@@ -0,0 +1,4 @@
+.marklet-menubar {
+  color: #4d4d4d;
+  background-color: #fafbfc;
+}
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 9a77942..cbf0bf5 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -21,10 +21,13 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/core": "^3.2.2"
+    "@marklet/core": "^3.2.2",
+    "neat-scroll": "^2.0.1"
+  },
+  "devDependencies": {
+    "vue": "^2.5.17"
   },
   "peerDependencies": {
-    "neat-scroll": "^2.0.1",
     "vue": "^2.5.17"
   }
 }
\ No newline at end of file

From 47a051e14b775149be3c744c35d50d044829db6e Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 01:55:10 +0800
Subject: [PATCH 13/30] menubar

---
 build/build.js                         |   2 +-
 packages/dev-server/comp/command.json  |  85 +++++++
 packages/dev-server/comp/edit.vue      |  43 +++-
 packages/dev-server/comp/menu.js       |  25 --
 packages/dev-server/comp/menu.vue      | 333 ++++++++++++++++++++++++-
 packages/dev-server/comp/menubar.vue   |  42 ----
 packages/dev-server/comp/menus.json    |  33 +++
 packages/dev-server/src/client.ts      |   1 -
 packages/dev-server/src/index.html     |   2 +-
 packages/dev-server/themes/dark.scss   |  32 ++-
 packages/dev-server/themes/simple.scss |  32 ++-
 packages/renderer/themes/dark.scss     |   2 +-
 12 files changed, 544 insertions(+), 88 deletions(-)
 create mode 100644 packages/dev-server/comp/command.json
 delete mode 100644 packages/dev-server/comp/menu.js
 delete mode 100644 packages/dev-server/comp/menubar.vue
 create mode 100644 packages/dev-server/comp/menus.json

diff --git a/build/build.js b/build/build.js
index c197f77..24d7500 100644
--- a/build/build.js
+++ b/build/build.js
@@ -166,7 +166,7 @@ Promise.resolve().then(() => {
         outputStyle: 'compressed',
       }, (error, result) => {
         if (error) reject(error)
-        fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), css + result.css)
+        fs.writeFileSync(util.resolve('dev-server/dist/editor.min.css'), css + result.css)
         resolve()
       })
     })
diff --git a/packages/dev-server/comp/command.json b/packages/dev-server/comp/command.json
new file mode 100644
index 0000000..1b2c964
--- /dev/null
+++ b/packages/dev-server/comp/command.json
@@ -0,0 +1,85 @@
+[
+  {
+    "method": "openFile",
+    "bind": "ctrl+o",
+    "name": "打开 ..."
+  },
+  {
+    "method": "save",
+    "bind": "ctrl+s",
+    "name": "保存"
+  },
+  {
+    "method": "saveAs",
+    "bind": "ctrl+shift+s",
+    "name": "另存为 ..."
+  },
+  {
+    "method": "saveAll",
+    "bind": "ctrl+a",
+    "name": "全部保存"
+  },
+  {
+    "method": "executeTrigger",
+    "arguments": "undo",
+    "key": "undo",
+    "bind": "!ctrl+z",
+    "name": "撤销"
+  },
+  {
+    "method": "executeTrigger",
+    "arguments": "redo",
+    "key": "redo",
+    "bind": "!ctrl+y",
+    "name": "恢复"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.clipboardCutAction",
+    "key": "cut",
+    "bind": "!ctrl+x",
+    "name": "剪切"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.clipboardCopyAction",
+    "key": "copy",
+    "bind": "!ctrl+c",
+    "name": "复制"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.clipboardPasteAction",
+    "key": "paste",
+    "bind": "!ctrl+v",
+    "name": "粘贴"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.quickCommand",
+    "key": "command-palette",
+    "bind": "!f1",
+    "name": "命令面板"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "actions.find",
+    "key": "find",
+    "bind": "!ctrl+f",
+    "name": "查找"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.nextMatchFindAction",
+    "key": "find-next",
+    "bind": "!f3",
+    "name": "查找下一个"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.previoustMatchFindAction",
+    "key": "find-previous",
+    "bind": "!shift+f3",
+    "name": "查找上一个"
+  }
+]
\ No newline at end of file
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 7c2832f..4b3a2e5 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -16,6 +16,8 @@ module.exports = {
     changed: false,
   }),
 
+  extends: require('./menu.vue'),
+
   watch: {
     source(value) {
       this.nodes = this._lexer.parse(value)
@@ -41,17 +43,6 @@ module.exports = {
     if (typeof source === 'string') this.source = source
     
     this._lexer = new DocumentLexer()
-    this.$menu.register([
-      {
-        name: '文件',
-        bind: 'F',
-        content: [
-          {
-            name: '保存'
-          }
-        ]
-      }
-    ])
 
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       const model = monaco.editor.createModel(this.source, 'marklet')
@@ -122,12 +113,20 @@ module.exports = {
 </script>
 
 <template>
-  <div :class="theme" class="marklet">
-    <mkl-menubar class="menubar" :content="[{ name: '文件', bind: 'F' }]"/>
+  <div :class="theme" class="marklet"
+    @click="hideContextMenus" @contextmenu="hideContextMenus">
+    <div class="menubar">
+      <div v-for="(menu, index) in menuData.menubar.content" :key="index" class="item"
+        @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
+        :class="{ active: menuData.menubar.embed[index] }" @contextmenu.stop>
+        {{ menu.name }} (<span>{{ menu.bind }}</span>)
+      </div>
+    </div>
     <div class="input" ref="input"/>
     <mkl-scroll class="document" :margin="4" :radius="6">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
+    <mkl-menus ref="menus" :keys="menuKeys" :data="menuData"/>
   </div>
 </template>
 
@@ -142,6 +141,24 @@ module.exports = {
   position: absolute;
 }
 
+> .menubar {
+  overflow: hidden;
+  font-size: 14px;
+  left: 0;
+  height: 32px;
+  width: 100%;
+  float: left;
+  user-select: none;
+  position: relative;
+
+  > div {
+    line-height: 24px;
+    padding: 4px;
+    transition: 0.3s;
+    display: inline-block;
+  }
+}
+
 > .input, > .document {
   position: absolute;
   top: 32px;
diff --git a/packages/dev-server/comp/menu.js b/packages/dev-server/comp/menu.js
deleted file mode 100644
index cf660f5..0000000
--- a/packages/dev-server/comp/menu.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const Mousetrap = require('mousetrap')
-const menu = require('./menu.vue')
-const menubar = require('./menubar.vue')
-
-// TODO: improve this pattern maybe. 
-// Cause: firing event inside textarea is blocked by mousetrap by default.
-Mousetrap.prototype.stopCallback = () => false
-
-function toKebab(camel) {
-  return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
-}
-
-module.exports = (Vue) => {
-  const MenuVue = Vue.extend(menu)
-
-  const $menu = {
-    register() {
-      MenuVue
-      toKebab
-    }
-  }
-
-  Vue.prototype.$menu = $menu
-  Vue.component('mkl-menubar', menubar)
-}
diff --git a/packages/dev-server/comp/menu.vue b/packages/dev-server/comp/menu.vue
index 220670b..8895744 100644
--- a/packages/dev-server/comp/menu.vue
+++ b/packages/dev-server/comp/menu.vue
@@ -1,3 +1,332 @@
-<template>
-  <div>1</div>
+<script>
+
+const Mousetrap = require('mousetrap')
+
+// TODO: improve this pattern maybe. 
+// Cause: firing event inside textarea is blocked by mousetrap by default.
+Mousetrap.prototype.stopCallback = () => false
+
+function toKebab(camel) {
+  return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
+}
+
+const commandData = require('./command.json')
+const menus = require('./menus.json')
+
+const commands = {}
+for (const command of commandData) {
+  const key = command.key ? command.key : toKebab(command.method)
+  if (command.caption && !(command.caption instanceof Array)) {
+    command.caption = [command.caption]
+  }
+  commands[key] = command
+}
+
+const menuData = {}
+const menuKeys = Object.keys(menus)
+for (const key of menuKeys) {
+  menuData[key] = {
+    show: false,
+    content: menus[key],
+    embed: new Array(menus[key].length).fill(false)
+  }
+}
+
+module.exports = {
+  data() {
+    return {
+      menuData,
+      menuKeys,
+      menubarMove: 0,
+      menubarActive: false,
+      altKey: false,
+    }
+  },
+
+  provide() {
+    return {
+      execute: this.executeMethod,
+    }
+  },
+
+  mounted() {
+    for (const key in commands) {
+      if (!commands[key].bind || commands[key].bind.startsWith('!')) continue
+      Mousetrap.bind(commands[key].bind, () => {
+        this.executeCommand(key)
+        return false
+      })
+    }
+    this.menuReference = {}
+    for (let index = 0; index < menuKeys.length; index++) {
+      this.menuReference[menuKeys[index]] = this.$refs.menus.$el.children[index]
+    }
+  },
+
+  methods: {
+    executeMethod(method, ...args) {
+      if (method in this) this[method](...args)
+    },
+    executeCommand(key) {
+      if (commands[key].method in this) {
+        let args = commands[key].arguments
+        if (args === undefined) args = []
+        if (!(args instanceof Array)) args = [args]
+        this[commands[key].method](...args.map(arg => {
+          if (typeof arg === 'string' && arg.startsWith('$')) {
+            return this[arg.slice(1)]
+          } else {
+            return arg
+          }
+        }))
+      } else {
+        this.$message.error(`No command ${key} was found!`)
+      }
+    },
+    hideContextMenus() {
+      this.menubarActive = false
+      for (const key in this.menuData) {
+        this.menuData[key].show = false
+        for (let index = 0; index < this.menuData[key].embed.length; index++) {
+          this.menuData[key].embed.splice(index, 1, false)
+        }
+      }
+    },
+    showContextMenu(key, event) {
+      const style = this.menuReference[key].style
+      this.hideContextMenus()
+      this.locateMenuAtClient(event, style)
+      this.menuData[key].show = true
+    },
+    locateMenuAtClient(event, style) {
+      if (event.clientX + 200 > this.width) {
+        style.left = event.clientX - 200 - this.left + 'px'
+      } else {
+        style.left = event.clientX - this.left + 'px'
+      }
+      if (event.clientY - this.top > this.height / 2) {
+        style.top = ''
+        style.bottom = this.top + this.height - event.clientY + 'px'
+      } else {
+        style.top = event.clientY - this.top + 'px'
+        style.bottom = ''
+      }
+    },
+    hoverMenu(index, event) {
+      if (this.menubarActive && !this.menuData.menubar.embed[index]) {
+        this.showMenu(index, event)
+      }
+    },
+    showButtonMenu(key, event) {
+      const style = this.menuReference[key].style
+      this.hideContextMenus()
+      this.locateMenuAtButton(event, style)
+      this.menuData[key].show = true
+    },
+    showMenu(index, event) {
+      const style = this.menuReference.menubar.style
+      const last = this.menuData.menubar.embed.indexOf(true)
+      if (last === index) {
+        this.menubarActive = false
+        this.menuData.menubar.show = false
+        this.menuData.menubar.embed.splice(index, 1, false)
+        return
+      } else if (last === -1) {
+        this.menubarMove = 0
+      } else {
+        this.menubarMove = index - last
+      }
+      this.hideContextMenus()
+      this.locateMenuAtButton(event, style)
+      this.menubarActive = true
+      this.menuData.menubar.show = true
+      this.menuData.menubar.embed.splice(index, 1, true)
+    },
+    locateMenuAtButton(event, style) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      if (rect.left + 200 > this.width) {
+        style.left = rect.left + rect.width - 200 + 'px'
+      } else {
+        style.left = rect.left + 'px'
+      }
+      style.top = rect.top + rect.height + 'px'
+    },
+  },
+
+  components: {
+    mklMenus: {
+      props: {
+        keys: {
+          type: Array,
+          required: true
+        },
+        data: {
+          type: Object,
+          required: true
+        },
+      },
+      components: {
+        mklMenu: {
+          name: 'mkl-menu',
+          inject: ['execute'],
+          props: {
+            data: {
+              type: Array,
+              required: true
+            },
+            embed: {
+              type: Array,
+              default: () => []
+            },
+          },
+          methods: {
+            getBinding(key) {
+              let binding = commands[key].bind
+              if (!binding) return ''
+              if (binding.charAt(0) === '!') binding = binding.slice(1)
+              return binding.replace(/[a-z]+/g, word => {
+                return word.charAt(0).toUpperCase() + word.slice(1)
+              }).replace(/ /g, ', ')
+            },
+            getCaption(key) {
+              return commands[key].name || commands[key].key
+            },
+            getContext(key) {
+              if (commands[key].enabled) {
+                return !this.getValue(commands[key].enabled)
+              } else {
+                return false
+              }
+            },
+            getValue(data) {
+              // FIXME: optimize value pattern
+              return this.$parent[data.slice(1)]
+            },
+          },
+        }
+      },
+    }
+  }
+}
+
+</script>
+
+<template name="mkl-menus">
+  <div class="marklet-menus">
+    <transition name="el-zoom-in-top" v-for="key in keys" :key="key">
+      <ul v-show="data[key].show" class="marklet-menu">
+        <mkl-menu :data="data[key].content" :embed="data[key].embed"/>
+      </ul>
+    </transition>
+  </div>
 </template>
+
+<template name="mkl-menus.mkl-menu">
+  <div class="content marklet-menu">
+    <li v-for="(item, index) in data" :key="index">
+      <div v-if="(item instanceof Object)">
+        <mkl-menu v-show="embed[index]" :data="item.content"/>
+      </div>
+      <div v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
+        <a class="separator"/>
+      </div>
+      <div v-else-if="getContext(item)" class="menu-item disabled" @click.stop>
+        <a class="label">{{ getCaption(item) }}</a>
+        <span class="binding">{{ getBinding(item) }}</span>
+      </div>
+      <div v-else class="menu-item" @click="execute('executeCommand', item)">
+        <a class="label">{{ getCaption(item) }}</a>
+        <span class="binding">{{ getBinding(item) }}</span>
+      </div>
+    </li>
+  </div>
+</template>
+
+<style lang="scss">
+
+.marklet-menus {
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+
+  ul {
+    z-index: 10;
+    padding: 0;
+    margin: 0;
+    outline: 0;
+    border: none;
+    transition: 0.3s ease;
+    position: absolute;
+    list-style-type: none;
+  }
+}
+
+.marklet-menu-enter-active, .marklet-menu-leave-active { 
+  transition: 0.3s ease;
+  position: absolute;
+}
+
+.marklet-menu .content { min-width: 200px }
+
+.marklet-menu .menu-item {
+  padding: 0;
+  -webkit-user-select: none;
+  display: -webkit-flex;
+  cursor: pointer;
+}
+
+.marklet-menu .menu-item.disabled { cursor: default }
+
+.marklet-menu .menu-item .label {
+	flex: 1 1 auto;
+	text-decoration: none;
+	padding: 0.8em 1em;
+	line-height: 1.1em;
+  background: none;
+  font-size: 12px;
+	display: inline-block;
+	box-sizing:	border-box;
+	margin: 0;
+}
+
+.marklet-menu .menu-item .label.active { font-weight: bold }
+
+.marklet-menu .menu-item .binding {
+  display: inline-block;
+	flex: 2 1 auto;
+	padding: 0.8em 1em;
+	line-height: 1.1em;
+	font-size: 12px;
+	text-align: right;
+}
+
+.marklet-menu .menu-item .binding i {
+  font-size: 9px;
+  vertical-align: 1px;
+}
+
+.marklet-menu .menu-item .separator {
+	flex: 1 1 auto;
+  display: block;
+  margin: 0.3em 0.5em;
+	padding: 1px 0 0 0;
+	border-bottom: 1px solid;
+	width: 100%;
+}
+
+.marklet-menu-list-enter-active, .marklet-menu-list-leave-active {
+  transition: 0.3s ease;
+}
+
+.marklet-menu-list-enter-active .menu-item, .marklet-menu-list-leave-active .menu-item {
+  color: inherit !important;
+  background-color: inherit !important;
+}
+
+.marklet-menu-list-enter, .marklet-menu-list-leave-to {
+  opacity: 0;
+  transform: translateX(200px);
+}
+
+</style>
diff --git a/packages/dev-server/comp/menubar.vue b/packages/dev-server/comp/menubar.vue
deleted file mode 100644
index b674a32..0000000
--- a/packages/dev-server/comp/menubar.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-
-module.exports = {
-  props: {
-    content: { default: [] },
-  }
-}
-
-</script>
-
-<template>
-  <div class="marklet-menubar">
-    <div v-for="(menu, index) in content" :key="index"
-      @click.stop="$menu.show(index, $event)"
-      @mouseover.stop="$menu.hover(index, $event)"
-      @contextmenu.stop>
-      {{ menu.name }} (<span>{{ menu.bind }}</span>)
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-& {
-  left: 0;
-  width: 100%;
-  height: 32px;
-  float: left;
-  overflow: hidden;
-  position: relative;
-  user-select: none;
-  font-size: 14px;
-
-  > div {
-    line-height: 24px;
-    padding: 4px;
-    transition: 0.3s;
-    display: inline-block;
-  }
-}
-
-</style>
diff --git a/packages/dev-server/comp/menus.json b/packages/dev-server/comp/menus.json
new file mode 100644
index 0000000..1bb74fc
--- /dev/null
+++ b/packages/dev-server/comp/menus.json
@@ -0,0 +1,33 @@
+{
+  "menubar": [
+    {
+      "key": "file",
+      "name": "文件",
+      "bind": "F",
+      "content": [
+        "open-file",
+        "@separator",
+        "save",
+        "save-as",
+        "save-all"
+      ]
+    },
+    {
+      "key": "edit",
+      "name": "编辑",
+      "bind": "E",
+      "content": [
+        "undo",
+        "redo",
+        "@separator",
+        "cut",
+        "copy",
+        "paste",
+        "@separator",
+        "find",
+        "find-next",
+        "find-previous"
+      ]
+    }
+  ]
+}
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 23b9f0e..6ebba5b 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -8,7 +8,6 @@ declare global {
 }
 
 Vue.use(renderer)
-Vue.use(require('@/menu'))
 const eventBus = new Vue()
 Vue.prototype.$eventBus = eventBus
 
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/index.html
index 8c97d52..45442ab 100644
--- a/packages/dev-server/src/index.html
+++ b/packages/dev-server/src/index.html
@@ -7,7 +7,7 @@
     <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
     <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
     <script src="~/vue/dist/vue.runtime.min.js"></script>
-    <link href="monaco.min.css" rel="stylesheet">
+    <link href="editor.min.css" rel="stylesheet">
     <link href="client.min.css" rel="stylesheet">
     <script src="client.min.js"></script>
     <script src="~/monaco-editor/min/vs/loader.js"></script>
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index 39dfd04..3e054e7 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -1,4 +1,34 @@
-.marklet-menubar {
+> .menubar {
   color: #c8c8c8;
   background-color: #212220;
+
+  .item:hover { background-color: #3A3A3A }
+  .item.active { background-color: #252525 }
+}
+
+.marklet-menu {
+  background-color: #2D2F31;
+  box-shadow: 0 2px 8px #000000;
+
+  .menu-item {
+    .label { color: #bbbbbb }
+    .binding { color: #a5a5a5 }
+    .binding i:hover { color: #fafaf5 }
+    .separator { border-bottom-color: #888888 }
+
+    &:hover {
+      &:not(.disabled) { background-color: #3A3A3A }
+      .label { color: #e1e4e8 }
+      .binding { color: #c6cbd1 }
+    }
+
+    &.active {
+      .label { color: #ACDDFF; text-shadow: 0 0 0.15px #ACDDFF }
+    }
+
+    &.disabled {
+      .label { color: #777777 !important }
+      .binding { color: #666666 !important }
+    }
+  }
 }
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 3359dee..065278b 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -1,4 +1,34 @@
-.marklet-menubar {
+> .menubar {
   color: #4d4d4d;
   background-color: #fafbfc;
+
+  .item:hover { background-color: #c0c0c0 }
+  .item.active { background-color: #e0e0e0 }
+}
+
+.marklet-menu {
+  background-color: #ffffff;
+  box-shadow: 0 2px 8px #888888;
+
+  .menu-item {
+    .label { color: #383838 }
+    .binding { color: #808080 }
+    .binding i:hover { color: #000000 }
+    .separator { border-bottom-color: #b0b0b0 }
+
+    &:hover {
+      &:not(.disabled) { background-color: #e8e8e8 }
+      .label { color: #24292e }
+      .binding { color: #606060 }
+    }
+
+    &.active {
+      .label { color: #409eff; text-shadow: 0 0 0.15px #ACDDFF }
+    }
+
+    &.disabled {
+      .label { color: #bababa !important }
+      .binding { color: #c8c8c8 !important }
+    }
+  }
 }
diff --git a/packages/renderer/themes/dark.scss b/packages/renderer/themes/dark.scss
index 29eff71..e898a76 100644
--- a/packages/renderer/themes/dark.scss
+++ b/packages/renderer/themes/dark.scss
@@ -1,7 +1,7 @@
 & {
   .document {
     color: #fafaf5;
-    background-color: #282828;
+    background-color: #272822;
 
     blockquote {
       color: #c6cbd1;

From 573bd9f92537a359a0c1ca5d2e6531f5e836288f Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 11:00:05 +0800
Subject: [PATCH 14/30] add some adjustments

---
 packages/dev-server/comp/edit.vue      |  52 +++++---
 packages/dev-server/comp/menu.vue      | 174 +++++++++++++++----------
 packages/dev-server/comp/menus.json    |   9 ++
 packages/dev-server/src/monaco.scss    |   2 +-
 packages/dev-server/themes/dark.scss   |   1 +
 packages/dev-server/themes/simple.scss |   3 +-
 packages/renderer/comp/scroll.vue      |   2 +-
 7 files changed, 154 insertions(+), 89 deletions(-)

diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 4b3a2e5..97f5c27 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -4,10 +4,9 @@ const { DocumentLexer } = require('@marklet/parser')
 const { themes } = require('@marklet/renderer')
 
 module.exports = {
-  el: '#app',
+  extends: require('./menu.vue'),
 
   data: () => ({
-    themeInput: '',
     theme: 'dark',
     origin: '',
     source: '',
@@ -16,7 +15,16 @@ module.exports = {
     changed: false,
   }),
 
-  extends: require('./menu.vue'),
+  computed: {
+    lists() {
+      return [{
+        key: 'themes',
+        data: themes,
+        current: this.theme,
+        switch: 'setTheme',
+      }]
+    }
+  },
 
   watch: {
     source(value) {
@@ -28,14 +36,6 @@ module.exports = {
         this.$nextTick(() => this.layout())
       }
     },
-    theme(value) {
-      if (window.monaco) {
-        window.monaco.editor.setTheme(value)
-      }
-    },
-    themeInput(value) {
-      if (themes.find(({ key }) => key === value)) this.theme = value
-    },
   },
 
   created() {
@@ -91,6 +91,16 @@ module.exports = {
   },
 
   methods: {
+    openFile() {},
+    save() {},
+    saveAs() {},
+    saveAll() {},
+    setTheme(theme) {
+      this.theme = theme
+      if (window.monaco) {
+        window.monaco.editor.setTheme(theme)
+      }
+    },
     checkChange(data) {
       if (data !== undefined) this.origin = data
       this.source = this._model.getValue()
@@ -107,6 +117,15 @@ module.exports = {
         if (newTime - now < deltaTime) requestAnimationFrame(layout)
       })
     },
+    executeAction(id) {
+      if (!this._editor) return
+      const action = this._editor.getAction(id)
+      if (action) action.run(this._editor)
+    },
+    executeTrigger(id) {
+      if (!this._editor) return
+      this._editor.trigger(id, id)
+    },
   }
 }
 
@@ -119,14 +138,14 @@ module.exports = {
       <div v-for="(menu, index) in menuData.menubar.content" :key="index" class="item"
         @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
         :class="{ active: menuData.menubar.embed[index] }" @contextmenu.stop>
-        {{ menu.name }} (<span>{{ menu.bind }}</span>)
+        {{ menu.name }} (<span>{{ menu.bind }}</span>)&nbsp;
       </div>
     </div>
     <div class="input" ref="input"/>
     <mkl-scroll class="document" :margin="4" :radius="6">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
-    <mkl-menus ref="menus" :keys="menuKeys" :data="menuData"/>
+    <mkl-menus ref="menus" :keys="menuKeys" :data="menuData" :lists="lists"/>
   </div>
 </template>
 
@@ -151,10 +170,12 @@ module.exports = {
   user-select: none;
   position: relative;
 
-  > div {
+  .item {
     line-height: 24px;
     padding: 4px;
-    transition: 0.3s;
+    transition:
+      color 0.3s ease,
+      background-color 0.3s ease;
     display: inline-block;
   }
 }
@@ -163,6 +184,7 @@ module.exports = {
   position: absolute;
   top: 32px;
   bottom: 0;
+  height: auto;
 }
 
 > .input {
diff --git a/packages/dev-server/comp/menu.vue b/packages/dev-server/comp/menu.vue
index 8895744..8f233ef 100644
--- a/packages/dev-server/comp/menu.vue
+++ b/packages/dev-server/comp/menu.vue
@@ -10,18 +10,13 @@ function toKebab(camel) {
   return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
 }
 
-const commandData = require('./command.json')
-const menus = require('./menus.json')
-
 const commands = {}
-for (const command of commandData) {
+for (const command of require('./command.json')) {
   const key = command.key ? command.key : toKebab(command.method)
-  if (command.caption && !(command.caption instanceof Array)) {
-    command.caption = [command.caption]
-  }
   commands[key] = command
 }
 
+const menus = require('./menus.json')
 const menuData = {}
 const menuKeys = Object.keys(menus)
 for (const key of menuKeys) {
@@ -164,6 +159,10 @@ module.exports = {
           type: Object,
           required: true
         },
+        lists: {
+          type: Array,
+          default: () => []
+        },
       },
       components: {
         mklMenu: {
@@ -178,6 +177,22 @@ module.exports = {
               type: Array,
               default: () => []
             },
+            lists: {
+              type: Array,
+              default: () => []
+            },
+          },
+          components: {
+            mklMenuList: {
+              name: 'TmMenuList',
+              inject: ['execute'],
+              props: {
+                list: {
+                  type: Object,
+                  required: true
+                }
+              },
+            }
           },
           methods: {
             getBinding(key) {
@@ -189,9 +204,10 @@ module.exports = {
               }).replace(/ /g, ', ')
             },
             getCaption(key) {
-              return commands[key].name || commands[key].key
+              return commands[key].name
             },
             getContext(key) {
+              if (!commands[key]) console.log(key)
               if (commands[key].enabled) {
                 return !this.getValue(commands[key].enabled)
               } else {
@@ -202,6 +218,10 @@ module.exports = {
               // FIXME: optimize value pattern
               return this.$parent[data.slice(1)]
             },
+            getList(key) {
+              if (!key.startsWith('@')) return false
+              return this.lists.find(item => item.key === key.slice(1))
+            },
           },
         }
       },
@@ -213,23 +233,27 @@ module.exports = {
 
 <template name="mkl-menus">
   <div class="marklet-menus">
-    <transition name="el-zoom-in-top" v-for="key in keys" :key="key">
-      <ul v-show="data[key].show" class="marklet-menu">
-        <mkl-menu :data="data[key].content" :embed="data[key].embed"/>
+    <transition name="marklet-menus" v-for="key in keys" :key="key">
+      <ul v-show="data[key].show">
+        <mkl-menu :data="data[key].content" :embed="data[key].embed" :lists="lists"/>
       </ul>
     </transition>
   </div>
 </template>
 
 <template name="mkl-menus.mkl-menu">
-  <div class="content marklet-menu">
+  <div class="marklet-menu">
     <li v-for="(item, index) in data" :key="index">
       <div v-if="(item instanceof Object)">
-        <mkl-menu v-show="embed[index]" :data="item.content"/>
+        <mkl-menu v-show="embed[index]" :data="item.content" :lists="lists"/>
       </div>
       <div v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <a class="separator"/>
       </div>
+      <div v-else-if="item.startsWith('#')" class="menu-item disabled" @click.stop>
+        <a class="caption">{{ item.slice(1) }}</a>
+      </div>
+      <mkl-menu-list v-else-if="getList(item)" :list="getList(item)"/>
       <div v-else-if="getContext(item)" class="menu-item disabled" @click.stop>
         <a class="label">{{ getCaption(item) }}</a>
         <span class="binding">{{ getBinding(item) }}</span>
@@ -242,8 +266,34 @@ module.exports = {
   </div>
 </template>
 
+<template name="mkl-menus.mkl-menu.mkl-menu-list">
+  <transition-group name="marklet-menu-list">
+    <li v-for="(item, index) in list.data" :key="index">
+      <div class="menu-item" @click="execute(list.switch, item.key)">
+        <a class="label" :class="{ active: item.key === list.current }">{{ item.name }}</a>
+      </div>
+    </li>
+  </transition-group>
+</template>
+
 <style lang="scss">
 
+.marklet-menus-enter-active,
+.marklet-menus-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transform-origin: center top;
+  transition:
+    transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.marklet-menus-enter,
+.marklet-menus-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
 .marklet-menus {
   width: 0;
   height: 0;
@@ -262,71 +312,53 @@ module.exports = {
   }
 }
 
-.marklet-menu-enter-active, .marklet-menu-leave-active { 
-  transition: 0.3s ease;
-  position: absolute;
-}
-
-.marklet-menu .content { min-width: 200px }
-
-.marklet-menu .menu-item {
-  padding: 0;
-  -webkit-user-select: none;
-  display: -webkit-flex;
-  cursor: pointer;
-}
-
-.marklet-menu .menu-item.disabled { cursor: default }
-
-.marklet-menu .menu-item .label {
-	flex: 1 1 auto;
-	text-decoration: none;
-	padding: 0.8em 1em;
-	line-height: 1.1em;
-  background: none;
-  font-size: 12px;
-	display: inline-block;
-	box-sizing:	border-box;
-	margin: 0;
-}
+.marklet-menu {
+  min-width: 200px;
 
-.marklet-menu .menu-item .label.active { font-weight: bold }
+  .menu-item {
+    padding: 0;
+    user-select: none;
+    display: flex;
+    cursor: pointer;
+    font-size: 12px;
 
-.marklet-menu .menu-item .binding {
-  display: inline-block;
-	flex: 2 1 auto;
-	padding: 0.8em 1em;
-	line-height: 1.1em;
-	font-size: 12px;
-	text-align: right;
-}
+    .label {
+      flex: 1 1 auto;
+      text-decoration: none;
+      padding: 0.8em 1em;
+      line-height: 1.1em;
+      background: none;
+      display: inline-block;
+      box-sizing:	border-box;
+      margin: 0;
 
-.marklet-menu .menu-item .binding i {
-  font-size: 9px;
-  vertical-align: 1px;
-}
+      &.active { font-weight: bold }
+    }
 
-.marklet-menu .menu-item .separator {
-	flex: 1 1 auto;
-  display: block;
-  margin: 0.3em 0.5em;
-	padding: 1px 0 0 0;
-	border-bottom: 1px solid;
-	width: 100%;
-}
+    .binding {
+      display: inline-block;
+      flex: 2 1 auto;
+      padding: 0.8em 1em;
+      line-height: 1.1em;
+      text-align: right;
+    }
 
-.marklet-menu-list-enter-active, .marklet-menu-list-leave-active {
-  transition: 0.3s ease;
-}
+    .separator {
+      display: block;
+      margin: 0.3em 0.5em;
+      padding: 1px 0 0 0;
+      border-bottom: 1px solid;
+      width: 100%;
+    }
 
-.marklet-menu-list-enter-active .menu-item, .marklet-menu-list-leave-active .menu-item {
-  color: inherit !important;
-  background-color: inherit !important;
-}
+    .caption {
+      display: block;
+      font-size: 12px;
+      margin: 0.5em auto 0;
+    }
 
-.marklet-menu-list-enter, .marklet-menu-list-leave-to {
-  opacity: 0;
-  transform: translateX(200px);
+    &.disabled { cursor: default }
+  }
 }
 
 </style>
diff --git a/packages/dev-server/comp/menus.json b/packages/dev-server/comp/menus.json
index 1bb74fc..6c88dbe 100644
--- a/packages/dev-server/comp/menus.json
+++ b/packages/dev-server/comp/menus.json
@@ -28,6 +28,15 @@
         "find-next",
         "find-previous"
       ]
+    },
+    {
+      "key": "view",
+      "name": "视图",
+      "bind": "V",
+      "content": [
+        "#主题",
+        "@themes"
+      ]
     }
   ]
 }
diff --git a/packages/dev-server/src/monaco.scss b/packages/dev-server/src/monaco.scss
index f3e17a5..047ae73 100644
--- a/packages/dev-server/src/monaco.scss
+++ b/packages/dev-server/src/monaco.scss
@@ -11,7 +11,7 @@
         opacity: 0.5;
         cursor: pointer;
         border-radius: 6px;
-        background-color: #c0c4cc;
+        background-color: #606266 !important;
         transition: opacity 0.3s ease;
 
         &:hover {
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index 3e054e7..fd3e863 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -12,6 +12,7 @@
 
   .menu-item {
     .label { color: #bbbbbb }
+    .caption { color: #777777 }
     .binding { color: #a5a5a5 }
     .binding i:hover { color: #fafaf5 }
     .separator { border-bottom-color: #888888 }
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 065278b..7a0bdd8 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -12,6 +12,7 @@
 
   .menu-item {
     .label { color: #383838 }
+    .caption { color: #bababa }
     .binding { color: #808080 }
     .binding i:hover { color: #000000 }
     .separator { border-bottom-color: #b0b0b0 }
@@ -19,7 +20,7 @@
     &:hover {
       &:not(.disabled) { background-color: #e8e8e8 }
       .label { color: #24292e }
-      .binding { color: #606060 }
+      .binding { color: #f5eaea }
     }
 
     &.active {
diff --git a/packages/renderer/comp/scroll.vue b/packages/renderer/comp/scroll.vue
index 3200a4a..243156d 100644
--- a/packages/renderer/comp/scroll.vue
+++ b/packages/renderer/comp/scroll.vue
@@ -173,7 +173,7 @@ module.exports = {
     cursor: pointer;
     position: absolute;
     pointer-events: auto;
-    background-color: #c0c4cc;
+    background-color: #606266;
     transition: opacity 0.8s ease;
 
     &:hover, &.active { opacity: 1 }

From a212e3e9c0d847d4a901df414d131a7ab7e3396d Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 13:19:07 +0800
Subject: [PATCH 15/30] remove monaco package

---
 README.md                     |  1 -
 packages/monaco/.eslintrc.yml |  2 --
 packages/monaco/.npmignore    |  2 --
 packages/monaco/README.md     |  8 ------
 packages/monaco/index.js      | 50 -----------------------------------
 packages/monaco/package.json  | 22 ---------------
 6 files changed, 85 deletions(-)
 delete mode 100644 packages/monaco/.eslintrc.yml
 delete mode 100644 packages/monaco/.npmignore
 delete mode 100644 packages/monaco/README.md
 delete mode 100644 packages/monaco/index.js
 delete mode 100644 packages/monaco/package.json

diff --git a/README.md b/README.md
index ba2bf4f..4c5f77b 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,6 @@ A markup language designed for API manual pages.
 |[@marklet/cli](https://github.com/obstudio/Marklet/tree/master/packages/cli)|[![npm](https://img.shields.io/npm/v/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)|
 |[@marklet/core](https://github.com/obstudio/Marklet/tree/master/packages/core)|[![npm](https://img.shields.io/npm/v/@marklet/core.svg)](https://www.npmjs.com/package/@marklet/core)|
 |[@marklet/dev-server](https://github.com/obstudio/Marklet/tree/master/packages/dev-server)|[![npm](https://img.shields.io/npm/v/@marklet/dev-server.svg)](https://www.npmjs.com/package/@marklet/dev-server)|
-|[@marklet/monaco](https://github.com/obstudio/Marklet/tree/master/packages/monaco)|[![npm](https://img.shields.io/npm/v/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)|
 |[@marklet/parser](https://github.com/obstudio/Marklet/tree/master/packages/parser)|[![npm](https://img.shields.io/npm/v/@marklet/parser.svg)](https://www.npmjs.com/package/@marklet/parser)|
 |[@marklet/renderer](https://github.com/obstudio/Marklet/tree/master/packages/renderer)|[![npm](https://img.shields.io/npm/v/@marklet/renderer.svg)](https://www.npmjs.com/package/@marklet/renderer)|
 
diff --git a/packages/monaco/.eslintrc.yml b/packages/monaco/.eslintrc.yml
deleted file mode 100644
index 0ae919d..0000000
--- a/packages/monaco/.eslintrc.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-env: 
-  browser: true
\ No newline at end of file
diff --git a/packages/monaco/.npmignore b/packages/monaco/.npmignore
deleted file mode 100644
index 0e173cc..0000000
--- a/packages/monaco/.npmignore
+++ /dev/null
@@ -1,2 +0,0 @@
-.eslintrc.yml
-*.scss
\ No newline at end of file
diff --git a/packages/monaco/README.md b/packages/monaco/README.md
deleted file mode 100644
index faa16c5..0000000
--- a/packages/monaco/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# @marklet/monaco
-
-[![Build Status](https://travis-ci.com/obstudio/Marklet.svg?branch=dev)](https://travis-ci.com/obstudio/Marklet)
-[![dependency](https://img.shields.io/david/obstudio/Marklet.svg?path=packages%2Fmonaco)](https://github.com/obstudio/Marklet/blob/master/packages/monaco/package.json)
-[![npm](https://img.shields.io/npm/v/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)
-[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)
-
-A monaco plugin for marklet.
diff --git a/packages/monaco/index.js b/packages/monaco/index.js
deleted file mode 100644
index 93ac922..0000000
--- a/packages/monaco/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const loader = require('monaco-editor/min/vs/loader')
-const isBrowser = typeof window === 'object' && window
-const amdRequire = isBrowser ? loader.require : loader
-const Marklet = require('./marklet')
-const path = require('path')
-const fs = require('fs')
-
-function resolveModulePath(filepath) {
-  for (const basepath of require.resolve.paths(__dirname)) {
-    const fullpath = path.resolve(basepath, filepath)
-    if (fs.existsSync(fullpath)) {
-      return 'file:///' + fullpath
-        .split(path.sep)
-        .map(name => name.replace(/#/g, '%23').replace(/ /g, '%20'))
-        .join('/')
-    }
-  }
-  throw new Error(`Cannot find module '${filepath}'`)
-}
-
-amdRequire.config({
-  baseUrl: resolveModulePath('monaco-editor/min')
-})
-
-// workaround monaco-css not understanding the environment
-if (isBrowser) window.module = undefined
-
-let monaco = null
-
-module.exports = new Promise((resolve, reject) => {
-  try {
-    amdRequire(['vs/editor/editor.main'], () => {
-      monaco = window.monaco
-      monaco.languages.register({
-        id: 'marklet',
-        extensions: ['mkl'],
-      })
-      monaco.languages.setMonarchTokensProvider('marklet', Marklet)
-      resolve(window.monaco)
-    })
-  } catch (error) {
-    reject(error)
-  }
-})
-
-module.exports.install = async function(Vue) {
-  Object.defineProperty(Vue.prototype, '$colorize', {
-    get: () => monaco ? (code, lang) => monaco.editor.colorize(code, lang) : undefined
-  })
-}
diff --git a/packages/monaco/package.json b/packages/monaco/package.json
deleted file mode 100644
index 982a696..0000000
--- a/packages/monaco/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "@marklet/monaco",
-  "version": "1.3.0",
-  "description": "A monaco plugin for marklet.",
-  "author": "jjyyxx <1449843302@qq.com>",
-  "contributors": [
-    "shigma <1700011071@pku.edu.cn>"
-  ],
-  "homepage": "https://github.com/obstudio/Marklet/tree/dev/packages/monaco",
-  "license": "MIT",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/obstudio/Marklet.git"
-  },
-  "bugs": {
-    "url": "https://github.com/obstudio/Marklet/issues"
-  },
-  "dependencies": {
-    "monaco-editor": "^0.14.3"
-  }
-}
\ No newline at end of file

From fe0b460c0e802502a983ba41035a9169e09eac45 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 15:09:51 +0800
Subject: [PATCH 16/30] editor trigger

---
 packages/dev-server/comp/checkbox.vue  | 122 ++++++++++++++++++++
 packages/dev-server/comp/command.json  |   7 ++
 packages/dev-server/comp/edit.vue      | 122 +++++++++++++++++---
 packages/dev-server/comp/menu-item.vue |  69 ++++++++++++
 packages/dev-server/comp/menu-list.vue |  33 ++++++
 packages/dev-server/comp/menu.vue      | 149 ++++++++-----------------
 packages/dev-server/comp/menus.json    |   2 +
 packages/dev-server/src/client.ts      |   2 +
 packages/dev-server/themes/dark.scss   |   6 +
 packages/dev-server/themes/simple.scss |   6 +
 packages/renderer/themes/simple.scss   |   2 +-
 11 files changed, 397 insertions(+), 123 deletions(-)
 create mode 100644 packages/dev-server/comp/checkbox.vue
 create mode 100644 packages/dev-server/comp/menu-item.vue
 create mode 100644 packages/dev-server/comp/menu-list.vue

diff --git a/packages/dev-server/comp/checkbox.vue b/packages/dev-server/comp/checkbox.vue
new file mode 100644
index 0000000..d2306e6
--- /dev/null
+++ b/packages/dev-server/comp/checkbox.vue
@@ -0,0 +1,122 @@
+<script>
+
+module.exports = {
+  props: {
+    value: Boolean,
+    label: String,
+    disabled: Boolean,
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  data: () => ({
+    focused: false,
+  }),
+
+  methods: {
+    onFocus(event) {
+      this.focused = true
+      this.$emit('focus', event)
+    },
+    onBlur(event) {
+      this.focused = false
+      this.$emit('blur', event)
+    },
+  },
+}
+
+</script>
+
+<template>
+  <label class="marklet-checkbox" :class="{ focused, disabled, checked: value }">
+    <span class="checkbox">
+      <span class="inner"></span>
+      <input type="checkbox" :disabled="disabled" :value="label" v-model="value"
+        @change="$emit('change', $event.target.checked)" @focus="onFocus" @blur="onBlur">
+    </span>
+    <span class="label" v-if="$slots.default || label">
+      <slot/>
+      <template v-if="!$slots.default">{{ label }}</template>
+    </span>
+  </label>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  user-select: none;
+  display: inline-block;
+  transition: 0.3s ease;
+  line-height: 1em;
+
+  > .checkbox {
+    outline: 0;
+    line-height: 1em;
+    vertical-align: sub;
+
+    > span {
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+      transition: 0.3s ease;
+      background-color: #ffffff;
+      border: 0.07em solid #dcdfe6;
+      border-radius: 2px;
+      width: 1em;
+      height: 1em;
+    }
+
+    > span::after {
+      content: "";
+      box-sizing: content-box;
+      border: 0.07em solid #fff;
+      border-left: 0;
+      border-top: 0;
+      height: 0.5em;
+      left: 0.29em;
+      top: 0.08em;
+      width: 0.21em;
+      position: absolute;
+      transform: rotate(45deg) scaleY(0);
+      transition: transform .15s ease-in .05s;
+      transform-origin: center;
+    }
+
+    > input {
+      position: absolute;
+      opacity: 0;
+      outline: 0;
+      margin: 0;
+      width: 0;
+      height: 0;
+      z-index: -1;
+    }
+  }
+
+  > .label {
+    line-height: 1em;
+    margin-left: 4px;
+    vertical-align: middle;
+  }
+
+  &.focused > .checkbox > span {
+    border-color: #409EFF;
+  }
+
+  &.checked > .checkbox > span {
+    background-color: #409EFF;
+    border-color: #409EFF;
+
+    &::after { transform: rotate(45deg) scaleY(1) }
+  }
+  
+  &.checked { color: #409EFF }
+}
+
+</style>
diff --git a/packages/dev-server/comp/command.json b/packages/dev-server/comp/command.json
index 1b2c964..ba9c8e3 100644
--- a/packages/dev-server/comp/command.json
+++ b/packages/dev-server/comp/command.json
@@ -19,6 +19,13 @@
     "bind": "ctrl+a",
     "name": "全部保存"
   },
+  {
+    "method": "triggerArea",
+    "arguments": "editor",
+    "key": "trigger-editor",
+    "name": "编辑器",
+    "checked": "$display.editor.show"
+  },
   {
     "method": "executeTrigger",
     "arguments": "undo",
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 97f5c27..d793dd4 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -13,17 +13,67 @@ module.exports = {
     nodes: [],
     loading: 3,
     changed: false,
+    dragging: false,
+    display: {
+      document: {
+        show: true,
+        width: 0.4,
+      },
+      editor: {
+        show: true,
+        width: 0.4,
+      },
+      explorer: {
+        show: false,
+        width: 0.2,
+      },
+    },
   }),
 
   computed: {
     lists() {
-      return [{
-        key: 'themes',
-        data: themes,
-        current: this.theme,
-        switch: 'setTheme',
-      }]
-    }
+      return {
+        themes: {
+          data: themes,
+          current: this.theme,
+          switch: 'setTheme',
+        },
+      }
+    },
+    editorWidth() {
+      return this.display.editor.width / (
+        this.display.editor.width
+        + this.display.document.width * this.display.document.show
+        + this.display.explorer.width * this.display.explorer.show
+      ) * 100 + '%'
+    },
+    editorStyle() {
+      const width = this.editorWidth
+      const style = { width }
+      if (this.display.editor.show) {
+        style.left = '0'
+      } else {
+        style.left = '-' + width
+      }
+      return style
+    },
+    documentWidth() {
+      return this.display.document.width / (
+        this.display.document.width
+        + this.display.editor.width * this.display.editor.show
+        + this.display.explorer.width * this.display.explorer.show
+      ) * 100 + '%'
+    },
+    documentStyle() {
+      const width = this.documentWidth
+      const style = { width }
+      if (this.display.document.show) {
+        style.right = '0'
+      } else {
+        style.right = '-' + width
+      }
+      return style
+    },
   },
 
   watch: {
@@ -61,7 +111,7 @@ module.exports = {
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       if (this._editor) return
       monaco.editor.setTheme(this.theme)
-      this._editor = monaco.editor.create(this.$refs.input, {
+      this._editor = monaco.editor.create(this.$refs.monaco, {
         model: null,
         language: 'marklet',
         lineDecorationsWidth: 4,
@@ -85,6 +135,24 @@ module.exports = {
       this.$refs.input.classList.remove('no-transition')
     }, { passive: true })
 
+    addEventListener('mouseup', (event) => {
+      this.layout()
+      this.stopDrag(event)
+    }, { passive: true })
+
+    addEventListener('mousemove', (event) => {
+      if (this.dragging) {
+        this.layout()
+        event.stopPropagation()
+        const toMax = this.extensionHeight <= this.remainHeight || this.draggingLastY < event.clientY
+        const toMin = this.extensionHeight >= 36 || this.draggingLastY > event.clientY
+        if (toMax && toMin) {
+          this.extensionHeight += this.draggingLastY - event.clientY
+          this.draggingLastY = event.clientY
+        }
+      }
+    })
+
     addEventListener('beforeunload', () => {
       localStorage.setItem('source', this.source)
     })
@@ -95,6 +163,10 @@ module.exports = {
     save() {},
     saveAs() {},
     saveAll() {},
+    triggerArea(area) {
+      this.display[area].show = !this.display[area].show
+      this.$nextTick(() => this.layout(300))
+    },
     setTheme(theme) {
       this.theme = theme
       if (window.monaco) {
@@ -126,6 +198,14 @@ module.exports = {
       if (!this._editor) return
       this._editor.trigger(id, id)
     },
+    startDrag(event) {
+      this.hideContextMenus()
+      this.dragging = true
+      this.draggingLastX = event.clientX
+    },
+    stopDrag() {
+      this.dragging = false
+    },
   }
 }
 
@@ -141,8 +221,9 @@ module.exports = {
         {{ menu.name }} (<span>{{ menu.bind }}</span>)&nbsp;
       </div>
     </div>
-    <div class="input" ref="input"/>
-    <mkl-scroll class="document" :margin="4" :radius="6">
+    <div class="editor" ref="monaco" :style="editorStyle"/>
+    <div class="border" @mousedown.stop="startDrag"/>
+    <mkl-scroll class="document" :margin="4" :radius="6" :style="documentStyle">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
     <mkl-menus ref="menus" :keys="menuKeys" :data="menuData" :lists="lists"/>
@@ -180,22 +261,27 @@ module.exports = {
   }
 }
 
-> .input, > .document {
+> .editor, > .document, > .border {
   position: absolute;
   top: 32px;
   bottom: 0;
   height: auto;
+  transition:
+    left 0.3s ease,
+    right 0.3s ease,
+    width 0.3s ease;
 }
 
-> .input {
-  left: 0;
-  width: 50%;
+> .border {
+  width: 2px;
+  z-index: 100;
+  margin-left: -1px;
+  user-select: none;
+  cursor: col-resize;
+  transition: 0.3s ease;
 }
 
-> .mkl-scroll {
-  left: 50%;
-  right: 0;
-
+> .document {
   > .container {
     padding: 0 24px;
   }
diff --git a/packages/dev-server/comp/menu-item.vue b/packages/dev-server/comp/menu-item.vue
new file mode 100644
index 0000000..3d10e3e
--- /dev/null
+++ b/packages/dev-server/comp/menu-item.vue
@@ -0,0 +1,69 @@
+<script>
+
+module.exports = {
+  inject: ['parse', 'execute'],
+  props: ['command'],
+
+  computed: {
+    disabled() {
+      if (!this.command.enabled) return
+      return !this.parse(this.command.enabled)
+    },
+    binding() {
+      let binding = this.command.bind
+      if (!binding) return ''
+      if (binding.charAt(0) === '!') binding = binding.slice(1)
+      return binding.replace(/[a-z]+/g, word => {
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      }).replace(/ /g, ', ')
+    },
+  },
+
+  methods: {
+    handleClick() {
+      if (this.disabled) return
+      this.execute('executeCommand', this.command)
+    }
+  },
+}
+
+</script>
+
+<template>
+  <div class="menu-item" :class="{ disabled }" @click="handleClick">
+    <span class="label">
+      <mkl-checkbox v-if="command.checked !== undefined"
+        :value="parse(command.checked)" @change="handleClick"/>
+      {{ command.name }}
+    </span>
+    <span class="binding">{{ binding }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+> .label {
+  flex: 1 1 auto;
+  text-decoration: none;
+  padding: 0.8em 1em;
+  line-height: 1.1em;
+  background: none;
+  display: inline-block;
+  margin: 0;
+
+  .marklet-checkbox {
+    font-size: 12px;
+    margin-right: 4px;
+    vertical-align: 1px;
+  }
+}
+
+> .binding {
+  display: inline-block;
+  flex: 2 1 auto;
+  padding: 0.8em 1em;
+  line-height: 1.1em;
+  text-align: right;
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu-list.vue b/packages/dev-server/comp/menu-list.vue
new file mode 100644
index 0000000..93a8215
--- /dev/null
+++ b/packages/dev-server/comp/menu-list.vue
@@ -0,0 +1,33 @@
+<script>
+
+module.exports = {
+  inject: ['execute'],
+  props: ['list'],
+}
+
+</script>
+
+<template>
+  <transition-group name="marklet-menu-list">
+    <div v-for="(item, index) in list.data" class="menu-item"
+      @click="execute(list.switch, item.key)" :key="index">
+      <span class="label" :class="{ active: item.key === list.current }">
+        {{ item.name }}
+      </span>
+    </div>
+  </transition-group>
+</template>
+
+<style lang="scss" scoped>
+
+.label {
+  padding: 0.8em 1em;
+  line-height: 1.1em;
+  background: none;
+  display: inline-block;
+  margin: 0;
+
+  &.active { font-weight: bold }
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu.vue b/packages/dev-server/comp/menu.vue
index 8f233ef..36b75ee 100644
--- a/packages/dev-server/comp/menu.vue
+++ b/packages/dev-server/comp/menu.vue
@@ -39,16 +39,24 @@ module.exports = {
   },
 
   provide() {
+    const self = this
     return {
-      execute: this.executeMethod,
+      parse(arg) {
+        return self.parseArgument(arg)
+      },
+      execute(key, ...args) {
+        const method = self[key]
+        if (method instanceof Function) method(...args)
+      },
     }
   },
 
   mounted() {
     for (const key in commands) {
-      if (!commands[key].bind || commands[key].bind.startsWith('!')) continue
-      Mousetrap.bind(commands[key].bind, () => {
-        this.executeCommand(key)
+      const command = commands[key]
+      if (!command.bind || command.bind.startsWith('!')) continue
+      Mousetrap.bind(command.bind, () => {
+        this.executeCommand(command)
         return false
       })
     }
@@ -59,23 +67,22 @@ module.exports = {
   },
 
   methods: {
-    executeMethod(method, ...args) {
-      if (method in this) this[method](...args)
+    executeCommand(command) {
+      const method = this[command.method]
+      if (!(method instanceof Function)) {
+        console.error(`No method ${command.method} was found!`)
+        return
+      }
+      let args = command.arguments
+      if (args === undefined) args = []
+      if (!(args instanceof Array)) args = [args]
+      method(...args.map(arg => this.parseArgument(arg)))
     },
-    executeCommand(key) {
-      if (commands[key].method in this) {
-        let args = commands[key].arguments
-        if (args === undefined) args = []
-        if (!(args instanceof Array)) args = [args]
-        this[commands[key].method](...args.map(arg => {
-          if (typeof arg === 'string' && arg.startsWith('$')) {
-            return this[arg.slice(1)]
-          } else {
-            return arg
-          }
-        }))
+    parseArgument(arg) {
+      if (typeof arg === 'string' && arg.startsWith('$')) {
+        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], this)
       } else {
-        this.$message.error(`No command ${key} was found!`)
+        return arg
       }
     },
     hideContextMenus() {
@@ -167,7 +174,7 @@ module.exports = {
       components: {
         mklMenu: {
           name: 'mkl-menu',
-          inject: ['execute'],
+          inject: ['execute', 'parse'],
           props: {
             data: {
               type: Array,
@@ -183,45 +190,19 @@ module.exports = {
             },
           },
           components: {
-            mklMenuList: {
-              name: 'TmMenuList',
-              inject: ['execute'],
-              props: {
-                list: {
-                  type: Object,
-                  required: true
-                }
-              },
-            }
+            mklMenuList: require('./menu-list.vue'),
+            mklMenuItem: require('./menu-item.vue'),
           },
           methods: {
-            getBinding(key) {
-              let binding = commands[key].bind
-              if (!binding) return ''
-              if (binding.charAt(0) === '!') binding = binding.slice(1)
-              return binding.replace(/[a-z]+/g, word => {
-                return word.charAt(0).toUpperCase() + word.slice(1)
-              }).replace(/ /g, ', ')
-            },
-            getCaption(key) {
-              return commands[key].name
-            },
-            getContext(key) {
-              if (!commands[key]) console.log(key)
-              if (commands[key].enabled) {
-                return !this.getValue(commands[key].enabled)
+            getCommand(key) {
+              const command = commands[key]
+              if (!command) {
+                console.error(`key ${key} not found`)
+                return {}
               } else {
-                return false
+                return command
               }
             },
-            getValue(data) {
-              // FIXME: optimize value pattern
-              return this.$parent[data.slice(1)]
-            },
-            getList(key) {
-              if (!key.startsWith('@')) return false
-              return this.lists.find(item => item.key === key.slice(1))
-            },
           },
         }
       },
@@ -243,39 +224,22 @@ module.exports = {
 
 <template name="mkl-menus.mkl-menu">
   <div class="marklet-menu">
-    <li v-for="(item, index) in data" :key="index">
-      <div v-if="(item instanceof Object)">
+    <template v-for="(item, index) in data" :key="index">
+      <template v-if="(item instanceof Object)">
         <mkl-menu v-show="embed[index]" :data="item.content" :lists="lists"/>
-      </div>
+      </template>
       <div v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
-        <a class="separator"/>
+        <div class="separator"/>
       </div>
       <div v-else-if="item.startsWith('#')" class="menu-item disabled" @click.stop>
-        <a class="caption">{{ item.slice(1) }}</a>
-      </div>
-      <mkl-menu-list v-else-if="getList(item)" :list="getList(item)"/>
-      <div v-else-if="getContext(item)" class="menu-item disabled" @click.stop>
-        <a class="label">{{ getCaption(item) }}</a>
-        <span class="binding">{{ getBinding(item) }}</span>
+        <div class="caption">{{ item.slice(1) }}</div>
       </div>
-      <div v-else class="menu-item" @click="execute('executeCommand', item)">
-        <a class="label">{{ getCaption(item) }}</a>
-        <span class="binding">{{ getBinding(item) }}</span>
-      </div>
-    </li>
+      <mkl-menu-list v-else-if="item.startsWith('@')" :list="lists[item.slice(1)]"/>
+      <mkl-menu-item v-else :command="getCommand(item)"/>
+    </template>
   </div>
 </template>
 
-<template name="mkl-menus.mkl-menu.mkl-menu-list">
-  <transition-group name="marklet-menu-list">
-    <li v-for="(item, index) in list.data" :key="index">
-      <div class="menu-item" @click="execute(list.switch, item.key)">
-        <a class="label" :class="{ active: item.key === list.current }">{{ item.name }}</a>
-      </div>
-    </li>
-  </transition-group>
-</template>
-
 <style lang="scss">
 
 .marklet-menus-enter-active,
@@ -314,37 +278,15 @@ module.exports = {
 
 .marklet-menu {
   min-width: 200px;
+  user-select: none;
 
   .menu-item {
     padding: 0;
-    user-select: none;
     display: flex;
     cursor: pointer;
     font-size: 12px;
 
-    .label {
-      flex: 1 1 auto;
-      text-decoration: none;
-      padding: 0.8em 1em;
-      line-height: 1.1em;
-      background: none;
-      display: inline-block;
-      box-sizing:	border-box;
-      margin: 0;
-
-      &.active { font-weight: bold }
-    }
-
-    .binding {
-      display: inline-block;
-      flex: 2 1 auto;
-      padding: 0.8em 1em;
-      line-height: 1.1em;
-      text-align: right;
-    }
-
     .separator {
-      display: block;
       margin: 0.3em 0.5em;
       padding: 1px 0 0 0;
       border-bottom: 1px solid;
@@ -352,9 +294,8 @@ module.exports = {
     }
 
     .caption {
-      display: block;
       font-size: 12px;
-      margin: 0.5em auto 0;
+      margin: 0.4em auto 0.2em;
     }
 
     &.disabled { cursor: default }
diff --git a/packages/dev-server/comp/menus.json b/packages/dev-server/comp/menus.json
index 6c88dbe..c0d5e43 100644
--- a/packages/dev-server/comp/menus.json
+++ b/packages/dev-server/comp/menus.json
@@ -34,6 +34,8 @@
       "name": "视图",
       "bind": "V",
       "content": [
+        "trigger-editor",
+        "@separator",
         "#主题",
         "@themes"
       ]
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 6ebba5b..33273bc 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -8,6 +8,8 @@ declare global {
 }
 
 Vue.use(renderer)
+Vue.component('mkl-checkbox', require('@/checkbox.vue'))
+
 const eventBus = new Vue()
 Vue.prototype.$eventBus = eventBus
 
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index fd3e863..9275047 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -6,6 +6,12 @@
   .item.active { background-color: #252525 }
 }
 
+> .input > .border {
+  background-color: #666666;
+
+  &:hover { background-color: #999999 }
+}
+
 .marklet-menu {
   background-color: #2D2F31;
   box-shadow: 0 2px 8px #000000;
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 7a0bdd8..5bb189d 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -6,6 +6,12 @@
   .item.active { background-color: #e0e0e0 }
 }
 
+> .input > .border {
+  background-color: #dddddd;
+
+  &:hover { background-color: #aaaaaa }
+}
+
 .marklet-menu {
   background-color: #ffffff;
   box-shadow: 0 2px 8px #888888;
diff --git a/packages/renderer/themes/simple.scss b/packages/renderer/themes/simple.scss
index 2fdca1b..fc76774 100644
--- a/packages/renderer/themes/simple.scss
+++ b/packages/renderer/themes/simple.scss
@@ -1,7 +1,7 @@
 & {
   .document {
     color: #24292e;
-    background-color: #f0f1f2;
+    background-color: #ffffff;
 
     blockquote {
       color: #606060;

From 77285c1b1814b73ea6439cb384abab4c1b710ad3 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Sat, 20 Oct 2018 15:12:59 +0800
Subject: [PATCH 17/30] simple open save frontend ws part impl, need more
 integration

---
 packages/dev-server/comp/edit.vue | 25 ++++++++++++++++++++-----
 packages/dev-server/src/client.ts | 16 ++++++++++++++--
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 97f5c27..d778d95 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -57,7 +57,11 @@ module.exports = {
 
   mounted() {
     window.vm = this
-    
+
+    this.$eventBus.$on('server.message.document', doc => {
+      this.openFile(doc)
+    })
+
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       if (this._editor) return
       monaco.editor.setTheme(this.theme)
@@ -91,10 +95,21 @@ module.exports = {
   },
 
   methods: {
-    openFile() {},
-    save() {},
-    saveAs() {},
-    saveAll() {},
+    openFile(doc) {
+      this.source = doc // TODO: need more consideration as another listener monaco.loaded exists
+    },
+    save() {
+      this.$eventBus.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
+    },
+    saveAs() {
+      this.$eventBus.$emit('client.message', 'saveAs', {
+        source: this.source,
+        name: '' // TODO: read file name
+      })
+    },
+    saveAll() {
+      // TODO: unclear requirement
+    },
     setTheme(theme) {
       this.theme = theme
       if (window.monaco) {
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 6ebba5b..6a6e1bb 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -22,6 +22,8 @@ const client = new class WatchClient {
   private retry: boolean
   private timeout: number
   private ws: WebSocket
+  private msgQueue: string[]
+  private timerRef: number
 
   constructor({
     url = `ws://${location.host}/`,
@@ -31,7 +33,13 @@ const client = new class WatchClient {
     this.url = url
     this.retry = retry
     this.timeout = timeout
+    this.msgQueue = []
     this.createWebSocket()
+    this.timerRef = window.setInterval(() => {
+      while (this.msgQueue.length > 0 && this.ws.readyState === 1) {
+        this.ws.send(this.msgQueue.shift())
+      }
+    }, 1000) // TODO: interval can be adjusted
   }
 
   createWebSocket() {
@@ -59,14 +67,18 @@ const client = new class WatchClient {
     this.ws.addEventListener('open', () => {
       eventBus.$emit('ws.open')
     })
+    eventBus.$on('client.message', (type: string, data: string | Object) => {
+      this.msgQueue.push(JSON.stringify({ type, data }))
+    })
   }
 
-  close() {
+  dispose() {
     if (this.ws.readyState < 2) this.ws.close()
+    clearInterval(this.timerRef)
   }
 }()
 
-addEventListener('beforeunload', () => client.close())
+addEventListener('beforeunload', () => client.dispose())
 
 export const Marklet = {
   components: {

From ad7ac0a0825a0de0300d3df239508b9342d1c641 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 16:46:30 +0800
Subject: [PATCH 18/30] menu refactor

---
 packages/dev-server/comp/edit.vue             |  16 +-
 .../dev-server/comp/{ => menu}/command.json   |  16 +-
 .../comp/{menu.vue => menu/index.js}          | 168 ++----------------
 .../dev-server/comp/{ => menu}/menu-item.vue  |  26 +--
 .../dev-server/comp/{ => menu}/menu-list.vue  |  14 +-
 .../dev-server/comp/menu/menu-manager.vue     |  56 ++++++
 packages/dev-server/comp/menu/menu-view.vue   |  76 ++++++++
 .../dev-server/comp/{ => menu}/menus.json     |   3 +-
 8 files changed, 178 insertions(+), 197 deletions(-)
 rename packages/dev-server/comp/{ => menu}/command.json (83%)
 rename packages/dev-server/comp/{menu.vue => menu/index.js} (55%)
 rename packages/dev-server/comp/{ => menu}/menu-item.vue (61%)
 rename packages/dev-server/comp/{ => menu}/menu-list.vue (55%)
 create mode 100644 packages/dev-server/comp/menu/menu-manager.vue
 create mode 100644 packages/dev-server/comp/menu/menu-view.vue
 rename packages/dev-server/comp/{ => menu}/menus.json (92%)

diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 64b2183..927ecda 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -4,7 +4,7 @@ const { DocumentLexer } = require('@marklet/parser')
 const { themes } = require('@marklet/renderer')
 
 module.exports = {
-  extends: require('./menu.vue'),
+  extends: require('./menu'),
 
   data: () => ({
     theme: 'dark',
@@ -37,6 +37,7 @@ module.exports = {
           data: themes,
           current: this.theme,
           switch: 'setTheme',
+          prefix: '主题：',
         },
       }
     },
@@ -115,7 +116,7 @@ module.exports = {
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       if (this._editor) return
       monaco.editor.setTheme(this.theme)
-      this._editor = monaco.editor.create(this.$refs.monaco, {
+      this._editor = monaco.editor.create(this.$refs.editor, {
         model: null,
         language: 'marklet',
         lineDecorationsWidth: 4,
@@ -134,9 +135,9 @@ module.exports = {
     })
 
     addEventListener('resize', () => {
-      this.$refs.input.classList.add('no-transition')
+      this.$refs.editor.classList.add('no-transition')
       this.layout()
-      this.$refs.input.classList.remove('no-transition')
+      this.$refs.editor.classList.remove('no-transition')
     }, { passive: true })
 
     addEventListener('mouseup', (event) => {
@@ -180,6 +181,9 @@ module.exports = {
     },
     triggerArea(area) {
       this.display[area].show = !this.display[area].show
+      if (!this.display.editor.show && !this.display.document.show) {
+        this.display.document.show = true
+      }
       this.$nextTick(() => this.layout(300))
     },
     setTheme(theme) {
@@ -236,12 +240,12 @@ module.exports = {
         {{ menu.name }} (<span>{{ menu.bind }}</span>)&nbsp;
       </div>
     </div>
-    <div class="editor" ref="monaco" :style="editorStyle"/>
+    <div class="editor" ref="editor" :style="editorStyle"/>
     <div class="border" @mousedown.stop="startDrag"/>
     <mkl-scroll class="document" :margin="4" :radius="6" :style="documentStyle">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
-    <mkl-menus ref="menus" :keys="menuKeys" :data="menuData" :lists="lists"/>
+    <mkl-menu-manager ref="menus" :keys="menuKeys" :data="menuData"/>
   </div>
 </template>
 
diff --git a/packages/dev-server/comp/command.json b/packages/dev-server/comp/menu/command.json
similarity index 83%
rename from packages/dev-server/comp/command.json
rename to packages/dev-server/comp/menu/command.json
index ba9c8e3..8056d1d 100644
--- a/packages/dev-server/comp/command.json
+++ b/packages/dev-server/comp/menu/command.json
@@ -19,13 +19,27 @@
     "bind": "ctrl+a",
     "name": "全部保存"
   },
+  {
+    "method": "triggerArea",
+    "arguments": "explorer",
+    "key": "trigger-explorer",
+    "name": "资源管理器",
+    "checked": "$display.explorer.show"
+  },
   {
     "method": "triggerArea",
     "arguments": "editor",
     "key": "trigger-editor",
-    "name": "编辑器",
+    "name": "编辑器视图",
     "checked": "$display.editor.show"
   },
+  {
+    "method": "triggerArea",
+    "arguments": "document",
+    "key": "trigger-document",
+    "name": "预览视图",
+    "checked": "$display.document.show"
+  },
   {
     "method": "executeTrigger",
     "arguments": "undo",
diff --git a/packages/dev-server/comp/menu.vue b/packages/dev-server/comp/menu/index.js
similarity index 55%
rename from packages/dev-server/comp/menu.vue
rename to packages/dev-server/comp/menu/index.js
index 36b75ee..8ff154f 100644
--- a/packages/dev-server/comp/menu.vue
+++ b/packages/dev-server/comp/menu/index.js
@@ -1,5 +1,3 @@
-<script>
-
 const Mousetrap = require('mousetrap')
 
 // TODO: improve this pattern maybe. 
@@ -28,6 +26,10 @@ for (const key of menuKeys) {
 }
 
 module.exports = {
+  components: {
+    mklMenuManager: require('./menu-manager.vue'),
+  },
+
   data() {
     return {
       menuData,
@@ -39,15 +41,9 @@ module.exports = {
   },
 
   provide() {
-    const self = this
     return {
-      parse(arg) {
-        return self.parseArgument(arg)
-      },
-      execute(key, ...args) {
-        const method = self[key]
-        if (method instanceof Function) method(...args)
-      },
+      commands,
+      $menu: this,
     }
   },
 
@@ -67,6 +63,10 @@ module.exports = {
   },
 
   methods: {
+    executeMethod(key, ...args) {
+      const method = this[key]
+      if (method instanceof Function) method(...args)
+    },
     executeCommand(command) {
       const method = this[command.method]
       if (!(method instanceof Function)) {
@@ -154,152 +154,4 @@ module.exports = {
       style.top = rect.top + rect.height + 'px'
     },
   },
-
-  components: {
-    mklMenus: {
-      props: {
-        keys: {
-          type: Array,
-          required: true
-        },
-        data: {
-          type: Object,
-          required: true
-        },
-        lists: {
-          type: Array,
-          default: () => []
-        },
-      },
-      components: {
-        mklMenu: {
-          name: 'mkl-menu',
-          inject: ['execute', 'parse'],
-          props: {
-            data: {
-              type: Array,
-              required: true
-            },
-            embed: {
-              type: Array,
-              default: () => []
-            },
-            lists: {
-              type: Array,
-              default: () => []
-            },
-          },
-          components: {
-            mklMenuList: require('./menu-list.vue'),
-            mklMenuItem: require('./menu-item.vue'),
-          },
-          methods: {
-            getCommand(key) {
-              const command = commands[key]
-              if (!command) {
-                console.error(`key ${key} not found`)
-                return {}
-              } else {
-                return command
-              }
-            },
-          },
-        }
-      },
-    }
-  }
-}
-
-</script>
-
-<template name="mkl-menus">
-  <div class="marklet-menus">
-    <transition name="marklet-menus" v-for="key in keys" :key="key">
-      <ul v-show="data[key].show">
-        <mkl-menu :data="data[key].content" :embed="data[key].embed" :lists="lists"/>
-      </ul>
-    </transition>
-  </div>
-</template>
-
-<template name="mkl-menus.mkl-menu">
-  <div class="marklet-menu">
-    <template v-for="(item, index) in data" :key="index">
-      <template v-if="(item instanceof Object)">
-        <mkl-menu v-show="embed[index]" :data="item.content" :lists="lists"/>
-      </template>
-      <div v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
-        <div class="separator"/>
-      </div>
-      <div v-else-if="item.startsWith('#')" class="menu-item disabled" @click.stop>
-        <div class="caption">{{ item.slice(1) }}</div>
-      </div>
-      <mkl-menu-list v-else-if="item.startsWith('@')" :list="lists[item.slice(1)]"/>
-      <mkl-menu-item v-else :command="getCommand(item)"/>
-    </template>
-  </div>
-</template>
-
-<style lang="scss">
-
-.marklet-menus-enter-active,
-.marklet-menus-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transform-origin: center top;
-  transition:
-    transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
-    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
-.marklet-menus-enter,
-.marklet-menus-leave-to {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.marklet-menus {
-  width: 0;
-  height: 0;
-  top: 0;
-  left: 0;
-
-  ul {
-    z-index: 10;
-    padding: 0;
-    margin: 0;
-    outline: 0;
-    border: none;
-    transition: 0.3s ease;
-    position: absolute;
-    list-style-type: none;
-  }
-}
-
-.marklet-menu {
-  min-width: 200px;
-  user-select: none;
-
-  .menu-item {
-    padding: 0;
-    display: flex;
-    cursor: pointer;
-    font-size: 12px;
-
-    .separator {
-      margin: 0.3em 0.5em;
-      padding: 1px 0 0 0;
-      border-bottom: 1px solid;
-      width: 100%;
-    }
-
-    .caption {
-      font-size: 12px;
-      margin: 0.4em auto 0.2em;
-    }
-
-    &.disabled { cursor: default }
-  }
-}
-
-</style>
diff --git a/packages/dev-server/comp/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
similarity index 61%
rename from packages/dev-server/comp/menu-item.vue
rename to packages/dev-server/comp/menu/menu-item.vue
index 3d10e3e..04ad7d3 100644
--- a/packages/dev-server/comp/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -1,13 +1,13 @@
 <script>
 
 module.exports = {
-  inject: ['parse', 'execute'],
+  inject: ['$menu'],
   props: ['command'],
 
   computed: {
     disabled() {
       if (!this.command.enabled) return
-      return !this.parse(this.command.enabled)
+      return !this.$menu.parseArgument(this.command.enabled)
     },
     binding() {
       let binding = this.command.bind
@@ -22,7 +22,7 @@ module.exports = {
   methods: {
     handleClick() {
       if (this.disabled) return
-      this.execute('executeCommand', this.command)
+      this.$menu.executeCommand(this.command)
     }
   },
 }
@@ -30,10 +30,10 @@ module.exports = {
 </script>
 
 <template>
-  <div class="menu-item" :class="{ disabled }" @click="handleClick">
+  <div :class="['menu-item', { disabled }]" @click="handleClick">
     <span class="label">
       <mkl-checkbox v-if="command.checked !== undefined"
-        :value="parse(command.checked)" @change="handleClick"/>
+        :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
       {{ command.name }}
     </span>
     <span class="binding">{{ binding }}</span>
@@ -43,14 +43,6 @@ module.exports = {
 <style lang="scss" scoped>
 
 > .label {
-  flex: 1 1 auto;
-  text-decoration: none;
-  padding: 0.8em 1em;
-  line-height: 1.1em;
-  background: none;
-  display: inline-block;
-  margin: 0;
-
   .marklet-checkbox {
     font-size: 12px;
     margin-right: 4px;
@@ -58,12 +50,4 @@ module.exports = {
   }
 }
 
-> .binding {
-  display: inline-block;
-  flex: 2 1 auto;
-  padding: 0.8em 1em;
-  line-height: 1.1em;
-  text-align: right;
-}
-
 </style>
diff --git a/packages/dev-server/comp/menu-list.vue b/packages/dev-server/comp/menu/menu-list.vue
similarity index 55%
rename from packages/dev-server/comp/menu-list.vue
rename to packages/dev-server/comp/menu/menu-list.vue
index 93a8215..ca45c63 100644
--- a/packages/dev-server/comp/menu-list.vue
+++ b/packages/dev-server/comp/menu/menu-list.vue
@@ -1,7 +1,7 @@
 <script>
 
 module.exports = {
-  inject: ['execute'],
+  inject: ['$menu'],
   props: ['list'],
 }
 
@@ -9,10 +9,10 @@ module.exports = {
 
 <template>
   <transition-group name="marklet-menu-list">
-    <div v-for="(item, index) in list.data" class="menu-item"
-      @click="execute(list.switch, item.key)" :key="index">
+    <div v-for="(item, index) in list.data" :key="index" class="menu-item"
+      @click="$menu.executeMethod(list.switch, item.key)">
       <span class="label" :class="{ active: item.key === list.current }">
-        {{ item.name }}
+        {{ list.prefix }}{{ item.name }}{{ list.postfix }}
       </span>
     </div>
   </transition-group>
@@ -21,12 +21,6 @@ module.exports = {
 <style lang="scss" scoped>
 
 .label {
-  padding: 0.8em 1em;
-  line-height: 1.1em;
-  background: none;
-  display: inline-block;
-  margin: 0;
-
   &.active { font-weight: bold }
 }
 
diff --git a/packages/dev-server/comp/menu/menu-manager.vue b/packages/dev-server/comp/menu/menu-manager.vue
new file mode 100644
index 0000000..bc923e5
--- /dev/null
+++ b/packages/dev-server/comp/menu/menu-manager.vue
@@ -0,0 +1,56 @@
+<script>
+
+module.exports = {
+  props: ['keys', 'data'],
+  components: {
+    mklMenu: require('./menu-view.vue')
+  },
+}
+
+</script>
+
+<template>
+  <div class="marklet-menu-manager">
+    <transition name="marklet-menu" v-for="key in keys" :key="key">
+      <mkl-menu v-show="data[key].show" class="marklet-menu"
+        :data="data[key].content" :embed="data[key].embed"/>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+}
+
+.marklet-menu {
+  z-index: 10;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: none;
+  position: absolute;
+  transition: 0.3s ease;
+}
+
+.marklet-menu-enter-active,
+.marklet-menu-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transform-origin: center top;
+  transition:
+    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.marklet-menu-enter,
+.marklet-menu-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
new file mode 100644
index 0000000..13cdfa7
--- /dev/null
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -0,0 +1,76 @@
+<script>
+
+module.exports = {
+  name: 'mkl-menu',
+  inject: ['commands', '$menu'],
+  props: ['data', 'embed'],
+  components: {
+    mklMenuList: require('./menu-list.vue'),
+    mklMenuItem: require('./menu-item.vue'),
+  },
+}
+
+</script>
+
+<template>
+  <div>
+    <template v-for="(item, index) in data">
+      <template v-if="(item instanceof Object)">
+        <mkl-menu :key="index" v-show="embed[index]" :data="item.content"/>
+      </template>
+      <div :key="index" v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
+        <div class="separator"/>
+      </div>
+      <mkl-menu-item :key="index" v-else-if="!item.startsWith('@')" :command="commands[item]"/>
+      <mkl-menu-list :key="index" v-else :list="$menu.lists[item.slice(1)]"/>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  min-width: 200px;
+  user-select: none;
+}
+
+.menu-item {
+  padding: 0;
+  display: flex;
+  cursor: pointer;
+  font-size: 12px;
+
+  > .separator {
+    margin: 0.3em 0.5em;
+    padding: 1px 0 0 0;
+    border-bottom: 1px solid;
+    width: 100%;
+  }
+
+  > .caption {
+    font-size: 12px;
+    margin: 0.4em auto 0.2em;
+  }
+
+  > .label {
+    flex: 1 1 auto;
+    padding: 0.8em 1em;
+    line-height: 1.1em;
+    background: none;
+    display: inline-block;
+    margin: 0;
+  }
+
+  > .binding {
+    display: inline-block;
+    flex: 2 1 auto;
+    padding: 0.8em 1em;
+    line-height: 1.1em;
+    text-align: right;
+  }
+
+  &.disabled { cursor: default }
+}
+
+</style>
+
diff --git a/packages/dev-server/comp/menus.json b/packages/dev-server/comp/menu/menus.json
similarity index 92%
rename from packages/dev-server/comp/menus.json
rename to packages/dev-server/comp/menu/menus.json
index c0d5e43..ea5bff0 100644
--- a/packages/dev-server/comp/menus.json
+++ b/packages/dev-server/comp/menu/menus.json
@@ -34,9 +34,10 @@
       "name": "视图",
       "bind": "V",
       "content": [
+        "trigger-explorer",
         "trigger-editor",
+        "trigger-document",
         "@separator",
-        "#主题",
         "@themes"
       ]
     }

From de1937db3fe5f92e9fb985568e16eb1300ef0c51 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 21:06:05 +0800
Subject: [PATCH 19/30] add some adjustments

---
 packages/dev-server/comp/edit.vue             | 294 +++++++++---------
 packages/dev-server/comp/editor.js            | 114 +++++++
 packages/dev-server/comp/menu/index.js        |   4 +-
 packages/dev-server/comp/menu/menu-item.vue   |   8 +-
 packages/dev-server/comp/menu/menu-list.vue   |   7 +-
 .../dev-server/comp/menu/menu-manager.vue     |  10 +-
 packages/dev-server/comp/menu/menu-view.vue   |  12 +-
 packages/dev-server/themes/dark.scss          |  21 +-
 packages/dev-server/themes/simple.scss        |  21 +-
 9 files changed, 319 insertions(+), 172 deletions(-)
 create mode 100644 packages/dev-server/comp/editor.js

diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index 927ecda..cca3ae5 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -1,31 +1,30 @@
 <script>
 
-const { DocumentLexer } = require('@marklet/parser')
 const { themes } = require('@marklet/renderer')
 
+const MIN_WIDTH = 0.1
+
 module.exports = {
-  extends: require('./menu'),
+  mixins: [
+    require('./menu'),
+    require('./editor'),
+  ],
 
   data: () => ({
     theme: 'dark',
-    origin: '',
-    source: '',
-    nodes: [],
-    loading: 3,
-    changed: false,
     dragging: false,
     display: {
       document: {
         show: true,
-        width: 0.4,
+        width: 0.35,
       },
       editor: {
         show: true,
-        width: 0.4,
+        width: 0.35,
       },
       explorer: {
         show: false,
-        width: 0.2,
+        width: 0.3,
       },
     },
   }),
@@ -41,6 +40,46 @@ module.exports = {
         },
       }
     },
+    totalWidth() {
+      return this.display.editor.width * this.display.editor.show
+        + this.display.explorer.width * this.display.explorer.show
+        + this.display.document.width * this.display.document.show
+    },
+    totalShow() {
+      return this.display.editor.show
+        + this.display.document.show
+        + this.display.explorer.show
+    },
+    explorerWidth() {
+      return this.display.explorer.width / (
+        this.display.explorer.width
+        + this.display.editor.width * this.display.editor.show
+        + this.display.document.width * this.display.document.show
+      ) * 100 + '%'
+    },
+    explorerStyle() {
+      const width = this.explorerWidth
+      const style = { width }
+      if (this.display.explorer.show) {
+        style.left = '0'
+        style.zIndex = 1
+      } else {
+        style.left = '-' + width
+      }
+      if (!this.totalShow) style.opacity = '0'
+      return style
+    },
+    leftBorderStyle() {
+      const style = {}
+      if (this.display.explorer.show) {
+        style.left = this.totalShow > 1 ? this.explorerWidth : '100%'
+        if (this.totalShow > 1) {
+          style.opacity = 1
+          style.cursor = 'col-resize'
+        }
+      }
+      return style
+    },
     editorWidth() {
       return this.display.editor.width / (
         this.display.editor.width
@@ -51,10 +90,27 @@ module.exports = {
     editorStyle() {
       const width = this.editorWidth
       const style = { width }
-      if (this.display.editor.show) {
-        style.left = '0'
+      if (this.display.explorer.show) {
+        if (this.display.document.show) {
+          style.left = this.display.explorer.width * 100 + '%'
+        } else {
+          style.left = this.explorerWidth
+        }
       } else {
-        style.left = '-' + width
+        style.left = '0'
+      }
+      if (this.display.editor.show) style.zIndex = '1'
+      if (!this.totalShow) style.opacity = '0'
+      return style
+    },
+    rightBorderStyle() {
+      const style = {}
+      if (this.display.document.show) {
+        style.right = this.totalShow > 1 ? this.documentWidth : '100%'
+        if (this.totalShow > 1) {
+          style.opacity = 1
+          style.cursor = 'col-resize'
+        }
       }
       return style
     },
@@ -70,121 +126,76 @@ module.exports = {
       const style = { width }
       if (this.display.document.show) {
         style.right = '0'
+        style.zIndex = 1
       } else {
         style.right = '-' + width
       }
+      if (!this.totalShow) style.opacity = '0'
       return style
     },
   },
 
-  watch: {
-    source(value) {
-      this.nodes = this._lexer.parse(value)
-    },
-    loading(value) {
-      if (!value) {
-        this._editor.setModel(this._model)
-        this.$nextTick(() => this.layout())
-      }
-    },
-  },
-
-  created() {
-    const source = localStorage.getItem('source')
-    if (typeof source === 'string') this.source = source
-    
-    this._lexer = new DocumentLexer()
-
-    this.$eventBus.$on('monaco.loaded', (monaco) => {
-      const model = monaco.editor.createModel(this.source, 'marklet')
-      model.onDidChangeContent(() => this.checkChange())
-      const nodes = this.nodes
-      this.nodes = []
-      this.$nextTick(() => this.nodes = nodes)
-      this._model = model
-      this.loading ^= 1
-    })
-  },
-
   mounted() {
     window.vm = this
 
-    this.$eventBus.$on('server.message.document', doc => {
-      this.openFile(doc)
-    })
-
-    this.$eventBus.$on('monaco.loaded', (monaco) => {
-      if (this._editor) return
-      monaco.editor.setTheme(this.theme)
-      this._editor = monaco.editor.create(this.$refs.editor, {
-        model: null,
-        language: 'marklet',
-        lineDecorationsWidth: 4,
-        scrollBeyondLastLine: false,
-        minimap: { enabled: false },
-        scrollbar: {
-          verticalScrollbarSize: 20,
-          verticalSliderSize: 12,
-        },
-      })
-      this._editor.onDidChangeCursorPosition((event) => {
-        this.row = event.position.lineNumber
-        this.column = event.position.column
-      })
-      this.loading ^= 2
-    })
-
     addEventListener('resize', () => {
-      this.$refs.editor.classList.add('no-transition')
+      this.dragging = true
       this.layout()
-      this.$refs.editor.classList.remove('no-transition')
+      this.dragging = null
     }, { passive: true })
 
-    addEventListener('mouseup', (event) => {
+    addEventListener('mouseup', () => {
       this.layout()
-      this.stopDrag(event)
+      this.$refs.left.classList.remove('active')
+      this.$refs.right.classList.remove('active')
+      this.dragging = null
     }, { passive: true })
 
     addEventListener('mousemove', (event) => {
-      if (this.dragging) {
-        this.layout()
-        event.stopPropagation()
-        const toMax = this.extensionHeight <= this.remainHeight || this.draggingLastY < event.clientY
-        const toMin = this.extensionHeight >= 36 || this.draggingLastY > event.clientY
-        if (toMax && toMin) {
-          this.extensionHeight += this.draggingLastY - event.clientY
-          this.draggingLastY = event.clientY
-        }
-      }
-    })
+      let left, right
+      if (this.dragging === 'left') {
+        left = 'explorer'
+        if (this.display.editor.show) {
+          right = 'editor'
+        } else if (this.display.document.show) {
+          right = 'document'
+        } else return
+      } else if (this.dragging === 'right') {
+        right = 'document'
+        if (this.display.editor.show) {
+          right = 'editor'
+        } else if (this.display.explorer.show) {
+          right = 'explorer'
+        } else return
+      } else return
 
-    addEventListener('beforeunload', () => {
-      localStorage.setItem('source', this.source)
+      this.layout()
+      event.stopPropagation()
+
+      const baseWidth = innerWidth / this.totalWidth
+      const deltaX = (this.draggingLastX - event.clientX) / baseWidth
+      this.draggingLastX = event.clientX
+      if (this.display[left].width - deltaX < MIN_WIDTH) {
+        this.draggingLastX += (MIN_WIDTH - this.display[left].width + deltaX) * baseWidth
+        this.display[right].width += this.display[left].width - MIN_WIDTH
+        this.display[left].width = MIN_WIDTH
+      } else if (this.display[right].width + deltaX < MIN_WIDTH) {
+        this.draggingLastX -= (MIN_WIDTH - this.display[right].width - deltaX) * baseWidth
+        this.display[left].width -= MIN_WIDTH - this.display[right].width
+        this.display[right].width = MIN_WIDTH
+      } else {
+        this.display[left].width -= deltaX
+        this.display[right].width += deltaX
+      }
     })
   },
 
   methods: {
-    openFile(doc) {
-      this.source = doc // TODO: need more consideration as another listener monaco.loaded exists
-    },
-    save() {
-      this.$eventBus.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
-    },
-    saveAs() {
-      this.$eventBus.$emit('client.message', 'saveAs', {
-        source: this.source,
-        name: '' // TODO: read file name
-      })
-    },
-    saveAll() {
-      // TODO: unclear requirement
-    },
     triggerArea(area) {
       this.display[area].show = !this.display[area].show
-      if (!this.display.editor.show && !this.display.document.show) {
-        this.display.document.show = true
+      if (this.display.editor.show) {
+        this.$nextTick(() => this.layout(300))
       }
-      this.$nextTick(() => this.layout(300))
     },
     setTheme(theme) {
       this.theme = theme
@@ -192,46 +203,19 @@ module.exports = {
         window.monaco.editor.setTheme(theme)
       }
     },
-    checkChange(data) {
-      if (data !== undefined) this.origin = data
-      this.source = this._model.getValue()
-      this.changed = this.origin !== this.source
-    },
-    layout(deltaTime = 0) {
-      const now = performance.now(), self = this
-      this._editor._configuration.observeReferenceElement()
-      this._editor._view._actualRender()
-      if (!deltaTime) return
-      requestAnimationFrame(function layout(newTime) {
-        self._editor._configuration.observeReferenceElement()
-        self._editor._view._actualRender()
-        if (newTime - now < deltaTime) requestAnimationFrame(layout)
-      })
-    },
-    executeAction(id) {
-      if (!this._editor) return
-      const action = this._editor.getAction(id)
-      if (action) action.run(this._editor)
-    },
-    executeTrigger(id) {
-      if (!this._editor) return
-      this._editor.trigger(id, id)
-    },
-    startDrag(event) {
+    startDrag(position, event) {
       this.hideContextMenus()
-      this.dragging = true
+      this.dragging = position
+      this.$refs[position].classList.add('active')
       this.draggingLastX = event.clientX
     },
-    stopDrag() {
-      this.dragging = false
-    },
   }
 }
 
 </script>
 
 <template>
-  <div :class="theme" class="marklet"
+  <div :class="[theme, { dragging }]" class="marklet"
     @click="hideContextMenus" @contextmenu="hideContextMenus">
     <div class="menubar">
       <div v-for="(menu, index) in menuData.menubar.content" :key="index" class="item"
@@ -240,12 +224,16 @@ module.exports = {
         {{ menu.name }} (<span>{{ menu.bind }}</span>)&nbsp;
       </div>
     </div>
-    <div class="editor" ref="editor" :style="editorStyle"/>
-    <div class="border" @mousedown.stop="startDrag"/>
-    <mkl-scroll class="document" :margin="4" :radius="6" :style="documentStyle">
+    <div class="view explorer" :style="explorerStyle"/>
+    <div class="border left" ref="left" :style="leftBorderStyle"
+      @mousedown.stop="startDrag('left', $event)"/>
+    <div class="view editor" ref="editor" :style="editorStyle"/>
+    <div class="border right" ref="right" :style="rightBorderStyle"
+      @mousedown.stop="startDrag('right', $event)"/>
+    <mkl-scroll class="view document" :style="documentStyle" :margin="4" :radius="6">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
-    <mkl-menu-manager ref="menus" :keys="menuKeys" :data="menuData"/>
+    <marklet-menu ref="menus" :data="menuData"/>
   </div>
 </template>
 
@@ -267,6 +255,7 @@ module.exports = {
   height: 32px;
   width: 100%;
   float: left;
+  z-index: 11;
   user-select: none;
   position: relative;
 
@@ -280,24 +269,45 @@ module.exports = {
   }
 }
 
-> .editor, > .document, > .border {
+> .view, > .border {
   position: absolute;
   top: 32px;
   bottom: 0;
+  z-index: 0;
   height: auto;
   transition:
     left 0.3s ease,
     right 0.3s ease,
-    width 0.3s ease;
+    width 0.3s ease,
+    opacity 0.3s ease;
+}
+
+> .view {
+  opacity: 1;
+}
+
+&.dragging {
+  > .view, > .border {
+    transition: none !important;
+  }
 }
 
 > .border {
   width: 2px;
-  z-index: 100;
-  margin-left: -1px;
+  z-index: 2;
+  opacity: 0;
   user-select: none;
-  cursor: col-resize;
   transition: 0.3s ease;
+
+  &.left {
+    left: 0;
+    margin-left: -1px;
+  }
+
+  &.right {
+    right: 0;
+    margin-right: -1px;
+  }
 }
 
 > .document {
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
new file mode 100644
index 0000000..8eddb30
--- /dev/null
+++ b/packages/dev-server/comp/editor.js
@@ -0,0 +1,114 @@
+const { DocumentLexer } = require('@marklet/parser')
+
+module.exports = {
+  data: () => ({
+    nodes: [],
+    origin: '',
+    source: '',
+    loading: 3,
+    changed: false,
+  }),
+
+  watch: {
+    source(value) {
+      this.nodes = this._lexer.parse(value)
+    },
+    loading(value) {
+      if (!value) {
+        this._editor.setModel(this._model)
+        this.$nextTick(() => this.layout())
+      }
+    },
+  },
+
+  created() {
+    const source = localStorage.getItem('source')
+    if (typeof source === 'string') this.source = source
+    
+    this._lexer = new DocumentLexer()
+
+    this.$eventBus.$on('monaco.loaded', (monaco) => {
+      const model = monaco.editor.createModel(this.source, 'marklet')
+      model.onDidChangeContent(() => this.checkChange())
+      const nodes = this.nodes
+      this.nodes = []
+      this.$nextTick(() => this.nodes = nodes)
+      this._model = model
+      this.loading ^= 1
+    })
+  },
+
+  mounted() {
+    this.$eventBus.$on('server.message.document', doc => {
+      this.openFile(doc)
+    })
+
+    this.$eventBus.$on('monaco.loaded', (monaco) => {
+      if (this._editor) return
+      monaco.editor.setTheme(this.theme)
+      this._editor = monaco.editor.create(this.$refs.editor, {
+        model: null,
+        language: 'marklet',
+        lineDecorationsWidth: 4,
+        scrollBeyondLastLine: false,
+        minimap: { enabled: false },
+        scrollbar: {
+          verticalScrollbarSize: 22,
+          verticalSliderSize: 12,
+        },
+      })
+      this._editor.onDidChangeCursorPosition((event) => {
+        this.row = event.position.lineNumber
+        this.column = event.position.column
+      })
+      this.loading ^= 2
+    })
+
+    addEventListener('beforeunload', () => {
+      localStorage.setItem('source', this.source)
+    })
+  },
+
+  methods: {
+    openFile(doc) {
+      this.source = doc // TODO: need more consideration as another listener monaco.loaded exists
+    },
+    save() {
+      this.$eventBus.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
+    },
+    saveAs() {
+      this.$eventBus.$emit('client.message', 'saveAs', {
+        source: this.source,
+        name: '' // TODO: read file name
+      })
+    },
+    saveAll() {
+      // TODO: unclear requirement
+    },
+    checkChange(data) {
+      if (data !== undefined) this.origin = data
+      this.source = this._model.getValue()
+      this.changed = this.origin !== this.source
+    },
+    layout(deltaTime = 0) {
+      const now = performance.now(), self = this
+      this._editor._configuration.observeReferenceElement()
+      this._editor._view._actualRender()
+      if (!deltaTime) return
+      requestAnimationFrame(function layout(newTime) {
+        self._editor._configuration.observeReferenceElement()
+        self._editor._view._actualRender()
+        if (newTime - now < deltaTime) requestAnimationFrame(layout)
+      })
+    },
+    executeAction(id) {
+      if (!this._editor) return
+      const action = this._editor.getAction(id)
+      if (action) action.run(this._editor)
+    },
+    executeTrigger(id) {
+      if (!this._editor) return
+      this._editor.trigger(id, id)
+    },
+  }
+}
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 8ff154f..9fe9b7a 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -27,13 +27,12 @@ for (const key of menuKeys) {
 
 module.exports = {
   components: {
-    mklMenuManager: require('./menu-manager.vue'),
+    MarkletMenu: require('./menu-manager.vue'),
   },
 
   data() {
     return {
       menuData,
-      menuKeys,
       menubarMove: 0,
       menubarActive: false,
       altKey: false,
@@ -42,6 +41,7 @@ module.exports = {
 
   provide() {
     return {
+      menuKeys,
       commands,
       $menu: this,
     }
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 04ad7d3..e15f7df 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -31,18 +31,18 @@ module.exports = {
 
 <template>
   <div :class="['menu-item', { disabled }]" @click="handleClick">
-    <span class="label">
+    <span class="label">{{ command.name }}</span>
+    <span class="binding">
       <mkl-checkbox v-if="command.checked !== undefined"
         :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
-      {{ command.name }}
+      <template v-else>{{ binding }}</template>
     </span>
-    <span class="binding">{{ binding }}</span>
   </div>
 </template>
 
 <style lang="scss" scoped>
 
-> .label {
+> .binding {
   .marklet-checkbox {
     font-size: 12px;
     margin-right: 4px;
diff --git a/packages/dev-server/comp/menu/menu-list.vue b/packages/dev-server/comp/menu/menu-list.vue
index ca45c63..2abfeff 100644
--- a/packages/dev-server/comp/menu/menu-list.vue
+++ b/packages/dev-server/comp/menu/menu-list.vue
@@ -9,11 +9,10 @@ module.exports = {
 
 <template>
   <transition-group name="marklet-menu-list">
-    <div v-for="(item, index) in list.data" :key="index" class="menu-item"
+    <div v-for="(item, index) in list.data" :key="index"
+      :class="['menu-item', { active: item.key === list.current }]"
       @click="$menu.executeMethod(list.switch, item.key)">
-      <span class="label" :class="{ active: item.key === list.current }">
-        {{ list.prefix }}{{ item.name }}{{ list.postfix }}
-      </span>
+      <span class="label">{{ list.prefix }}{{ item.name }}{{ list.postfix }}</span>
     </div>
   </transition-group>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-manager.vue b/packages/dev-server/comp/menu/menu-manager.vue
index bc923e5..0518850 100644
--- a/packages/dev-server/comp/menu/menu-manager.vue
+++ b/packages/dev-server/comp/menu/menu-manager.vue
@@ -1,9 +1,10 @@
 <script>
 
 module.exports = {
-  props: ['keys', 'data'],
+  props: ['data'],
+  inject: ['menuKeys'],
   components: {
-    mklMenu: require('./menu-view.vue')
+    MarkletMenuView: require('./menu-view.vue'),
   },
 }
 
@@ -11,8 +12,8 @@ module.exports = {
 
 <template>
   <div class="marklet-menu-manager">
-    <transition name="marklet-menu" v-for="key in keys" :key="key">
-      <mkl-menu v-show="data[key].show" class="marklet-menu"
+    <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
+      <marklet-menu-view class="marklet-menu" v-show="data[key].show"
         :data="data[key].content" :embed="data[key].embed"/>
     </transition>
   </div>
@@ -33,6 +34,7 @@ module.exports = {
   margin: 0;
   outline: 0;
   border: none;
+  padding: 4px 0;
   position: absolute;
   transition: 0.3s ease;
 }
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 13cdfa7..6ce7275 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -1,12 +1,12 @@
 <script>
 
 module.exports = {
-  name: 'mkl-menu',
+  name: 'marklet-menu-view',
   inject: ['commands', '$menu'],
   props: ['data', 'embed'],
   components: {
-    mklMenuList: require('./menu-list.vue'),
-    mklMenuItem: require('./menu-item.vue'),
+    MarkletMenuList: require('./menu-list.vue'),
+    MarkletMenuItem: require('./menu-item.vue'),
   },
 }
 
@@ -16,13 +16,13 @@ module.exports = {
   <div>
     <template v-for="(item, index) in data">
       <template v-if="(item instanceof Object)">
-        <mkl-menu :key="index" v-show="embed[index]" :data="item.content"/>
+        <marklet-menu-view :key="index" v-show="embed[index]" :data="item.content"/>
       </template>
       <div :key="index" v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <div class="separator"/>
       </div>
-      <mkl-menu-item :key="index" v-else-if="!item.startsWith('@')" :command="commands[item]"/>
-      <mkl-menu-list :key="index" v-else :list="$menu.lists[item.slice(1)]"/>
+      <marklet-menu-item :key="index" v-else-if="!item.startsWith('@')" :command="commands[item]"/>
+      <marklet-menu-list :key="index" v-else :list="$menu.lists[item.slice(1)]"/>
     </template>
   </div>
 </template>
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index 9275047..be0fc97 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -1,20 +1,31 @@
+$menu-bgcolor: #2d2f31;
+$menu-shadow: #000000;
+
+&, > .explorer {
+  background-color: #272822;
+}
+
 > .menubar {
   color: #c8c8c8;
   background-color: #212220;
 
   .item:hover { background-color: #3A3A3A }
-  .item.active { background-color: #252525 }
+
+  .item.active {
+    background-color: $menu-bgcolor;
+    box-shadow: 0 0 8px $menu-shadow;
+  }
 }
 
-> .input > .border {
+> .border {
   background-color: #666666;
 
-  &:hover { background-color: #999999 }
+  &:hover, &.active { background-color: #999999 }
 }
 
 .marklet-menu {
-  background-color: #2D2F31;
-  box-shadow: 0 2px 8px #000000;
+  background-color: $menu-bgcolor;
+  box-shadow: 0 2px 8px $menu-shadow;
 
   .menu-item {
     .label { color: #bbbbbb }
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 5bb189d..1873265 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -1,20 +1,31 @@
+$menu-bgcolor: #ffffff;
+$menu-shadow: #888888;
+
+&, > .explorer {
+  background-color: #ffffff;
+}
+
 > .menubar {
   color: #4d4d4d;
   background-color: #fafbfc;
 
   .item:hover { background-color: #c0c0c0 }
-  .item.active { background-color: #e0e0e0 }
+
+  .item.active {
+    background-color: $menu-bgcolor;
+    box-shadow: 0 0 8px $menu-shadow;
+  }
 }
 
-> .input > .border {
+> .border {
   background-color: #dddddd;
 
-  &:hover { background-color: #aaaaaa }
+  &:hover, &.active { background-color: #aaaaaa }
 }
 
 .marklet-menu {
-  background-color: #ffffff;
-  box-shadow: 0 2px 8px #888888;
+  background-color: $menu-bgcolor;
+  box-shadow: 0 2px 8px $menu-shadow;
 
   .menu-item {
     .label { color: #383838 }

From eaccaea475deeb2e855eb4ab0444c5eb8d49a440 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 20 Oct 2018 21:30:33 +0800
Subject: [PATCH 20/30] dev server v1.1

---
 packages/cli/index.js                         |  2 +-
 packages/cli/package.json                     |  4 +--
 packages/dev-server/comp/checkbox.vue         | 27 +++++---------
 packages/dev-server/comp/menu/menu-item.vue   |  2 --
 .../dev-server/comp/menu/menu-manager.vue     |  2 +-
 packages/dev-server/package.json              |  2 +-
 packages/dev-server/src/client.ts             |  5 ++-
 packages/dev-server/themes/dark.scss          | 35 ++++++++++++++++++-
 packages/dev-server/themes/simple.scss        | 35 ++++++++++++++++++-
 packages/marklet/package.json                 |  4 +--
 10 files changed, 85 insertions(+), 33 deletions(-)

diff --git a/packages/cli/index.js b/packages/cli/index.js
index 74da93d..ad5203f 100644
--- a/packages/cli/index.js
+++ b/packages/cli/index.js
@@ -68,7 +68,7 @@ case 'parse': {
     config: {
       header_align: program.headerAlign,
       allow_section: program.section,
-      default_language: program.defaultLanguage
+      default_language: program.defaultLanguage,
     },
   })
   if (!program.dest) {
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 609cf87..04c703d 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/cli",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "A command line interface for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -19,7 +19,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/dev-server": "^1.0.22",
+    "@marklet/dev-server": "^1.1.0",
     "@marklet/parser": "^1.5.1",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
diff --git a/packages/dev-server/comp/checkbox.vue b/packages/dev-server/comp/checkbox.vue
index d2306e6..1bb74d2 100644
--- a/packages/dev-server/comp/checkbox.vue
+++ b/packages/dev-server/comp/checkbox.vue
@@ -32,7 +32,7 @@ module.exports = {
 
 <template>
   <label class="marklet-checkbox" :class="{ focused, disabled, checked: value }">
-    <span class="checkbox">
+    <span class="box">
       <span class="inner"></span>
       <input type="checkbox" :disabled="disabled" :value="label" v-model="value"
         @change="$emit('change', $event.target.checked)" @focus="onFocus" @blur="onBlur">
@@ -48,34 +48,32 @@ module.exports = {
 
 & {
   font-size: 14px;
-  color: #606266;
   cursor: pointer;
   user-select: none;
   display: inline-block;
   transition: 0.3s ease;
   line-height: 1em;
 
-  > .checkbox {
+  > .box {
     outline: 0;
     line-height: 1em;
     vertical-align: sub;
 
-    > span {
+    > .inner {
       position: relative;
       display: inline-block;
       box-sizing: border-box;
       transition: 0.3s ease;
-      background-color: #ffffff;
-      border: 0.07em solid #dcdfe6;
+      border: 0.07em solid;
       border-radius: 2px;
       width: 1em;
       height: 1em;
     }
 
-    > span::after {
+    > .inner::after {
       content: "";
       box-sizing: content-box;
-      border: 0.07em solid #fff;
+      border: 0.07em solid;
       border-left: 0;
       border-top: 0;
       height: 0.5em;
@@ -105,18 +103,9 @@ module.exports = {
     vertical-align: middle;
   }
 
-  &.focused > .checkbox > span {
-    border-color: #409EFF;
+  &.checked > .box > .inner::after {
+    transform: rotate(45deg) scaleY(1);
   }
-
-  &.checked > .checkbox > span {
-    background-color: #409EFF;
-    border-color: #409EFF;
-
-    &::after { transform: rotate(45deg) scaleY(1) }
-  }
-  
-  &.checked { color: #409EFF }
 }
 
 </style>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index e15f7df..2305989 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -45,8 +45,6 @@ module.exports = {
 > .binding {
   .marklet-checkbox {
     font-size: 12px;
-    margin-right: 4px;
-    vertical-align: 1px;
   }
 }
 
diff --git a/packages/dev-server/comp/menu/menu-manager.vue b/packages/dev-server/comp/menu/menu-manager.vue
index 0518850..0d3c409 100644
--- a/packages/dev-server/comp/menu/menu-manager.vue
+++ b/packages/dev-server/comp/menu/menu-manager.vue
@@ -34,7 +34,7 @@ module.exports = {
   margin: 0;
   outline: 0;
   border: none;
-  padding: 4px 0;
+  padding: 2px 0;
   position: absolute;
   transition: 0.3s ease;
 }
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index c7a880b..6d85a79 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/dev-server",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "description": "A develop server for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 3ec2e04..634c2f9 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -14,9 +14,8 @@ const eventBus = new Vue()
 Vue.prototype.$eventBus = eventBus
 
 eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
-  renderer.themes.forEach(({ key }) => {
-    monaco.editor.defineTheme(key, require('../themes/' + key))
-  })
+  monaco.editor.defineTheme('dark', require('../themes/dark'))
+  monaco.editor.defineTheme('simple', require('../themes/simple'))
 })
 
 const client = new class WatchClient {
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index be0fc97..8e25583 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -1,5 +1,6 @@
 $menu-bgcolor: #2d2f31;
 $menu-shadow: #000000;
+$active-color: #acdeff;
 
 &, > .explorer {
   background-color: #272822;
@@ -41,7 +42,10 @@ $menu-shadow: #000000;
     }
 
     &.active {
-      .label { color: #ACDDFF; text-shadow: 0 0 0.15px #ACDDFF }
+      .label {
+        color: #acdeff;
+        text-shadow: 0 0 0.15px #ACDDFF;
+      }
     }
 
     &.disabled {
@@ -50,3 +54,32 @@ $menu-shadow: #000000;
     }
   }
 }
+
+.marklet-checkbox {
+  color: #666666;
+
+  > .box {
+    > .inner {
+      background-color: #666666;
+      border-color: #444444;
+
+      &::after {
+        border-color: #666666;
+      }
+    }
+  }
+  
+  &.checked, &.focused {
+    > .box > .inner {
+      border-color: $active-color;
+    }
+  }
+
+  &.checked {
+    color: $active-color;
+
+    > .box > .inner {
+      background-color: $active-color;
+    }
+  }
+}
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 1873265..99fec64 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -1,5 +1,6 @@
 $menu-bgcolor: #ffffff;
 $menu-shadow: #888888;
+$active-color: #409eff;
 
 &, > .explorer {
   background-color: #ffffff;
@@ -41,7 +42,10 @@ $menu-shadow: #888888;
     }
 
     &.active {
-      .label { color: #409eff; text-shadow: 0 0 0.15px #ACDDFF }
+      .label {
+        color: $active-color;
+        text-shadow: 0 0 0.15px #ACDDFF;
+      }
     }
 
     &.disabled {
@@ -50,3 +54,32 @@ $menu-shadow: #888888;
     }
   }
 }
+
+.marklet-checkbox {
+  color: #606266;
+
+  > .box {
+    > .inner {
+      background-color: #ffffff;
+      border-color: #dcdfe6;
+
+      &::after {
+        border-color: #ffffff;
+      }
+    }
+  }
+  
+  &.checked, &.focused {
+    > .box > .inner {
+      border-color: $active-color;
+    }
+  }
+
+  &.checked {
+    color: $active-color;
+
+    > .box > .inner {
+      background-color: $active-color;
+    }
+  }
+}
diff --git a/packages/marklet/package.json b/packages/marklet/package.json
index 147cebe..5fb6055 100644
--- a/packages/marklet/package.json
+++ b/packages/marklet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markletjs",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A markup language designed for API manual pages.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -28,7 +28,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/cli": "^1.1.15",
+    "@marklet/cli": "^1.1.16",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1"
   }

From 6f4fdc813d1373b17ebb9729fd38ed0940982204 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 01:00:18 +0800
Subject: [PATCH 21/30] new cli

---
 packages/cli/index.js            | 222 +++++++++++++++++++++----------
 packages/cli/package.json        |   7 +-
 packages/dev-server/package.json |   2 +-
 packages/marklet/package.json    |   4 +-
 4 files changed, 162 insertions(+), 73 deletions(-)

diff --git a/packages/cli/index.js b/packages/cli/index.js
index ad5203f..4b66d42 100644
--- a/packages/cli/index.js
+++ b/packages/cli/index.js
@@ -1,87 +1,175 @@
 #!/usr/bin/env node
 
 const fs = require('fs')
+const open = require('opn')
 const path = require('path')
 const chalk = require('chalk')
 const yaml = require('js-yaml')
 const program = require('commander')
-const { parse } = require('@marklet/parser')
-const { edit, watch } = require('@marklet/dev-server')
-const { description, version } = require('./package.json')
-const Marklet = { parse, edit, watch }
+const pj = require('./package.json')
+const parser = require('@marklet/parser')
+const server = require('@marklet/dev-server')
 
-program
-  .name('marklet')
-  .version(version, '-v, --version')
-  .description(description)
-  .usage('marklet [filepath|dirpath] [options]')
-  .option('-m, --mode [mode]', 'Choose between parse, watch and edit mode', /^(parse|watch|edit)$/i, 'parse')
-  .option('-s, --source [path]', 'Read text from file')
-  .option('-i, --input [text]', 'Read text directly from stdin', '')
-  .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
-  .option('-p, --port [port]', 'Port for the development server', parseInt)
-  .option('-l, --default-language [language]', 'Default language in code block', '')
-  .option('-H, --no-header-align', 'Disable header to align at center')
-  .option('-S, --no-section', 'Disallow section syntax')
-  .parse(process.argv)
+const JS_TYPES = ['.json', '.js']
+const YAML_TYPES = ['.yml', '.yaml']
+const ALL_TYPES = [
+  ...JS_TYPES,
+  ...YAML_TYPES,
+]
 
-let basePath
-if (!program.args.length) {
-  basePath = process.cwd()
-} else {
-  basePath = path.resolve(process.cwd(), program.args[0])
+function handleError(message) {
+  console.error(chalk.redBright('error:'), message)
+  process.exit(1)
 }
 
-function loadFromFile(filepath) {
-  try {
-    if (['.yml', '.yaml'].includes(path.extname(filepath))) {
-      return yaml.safeLoad(fs.readFileSync(filepath).toString())
-    } else {
-      return require(filepath)
-    }
-  } catch (error) {
-    if (program.args.length) {
-      process.stderr.write(chalk.red('ERROR: '))
-      console.error(error)
-    }
-    return {}
+function tryFindFile(filepath) {
+  if (fs.existsSync(path.resolve(process.cwd(), filepath))) return
+  if (!filepath) {
+    handleError('a filepath is required.')
+  } else {
+    handleError(`file ${filepath} was not found.`)
   }
 }
 
-let options = {}
-if (fs.existsSync(basePath)) {
-  const stat = fs.statSync(basePath)
-  if (stat.isFile()) {
-    options = loadFromFile(basePath)
+function isFileExist(filepath) {
+  if (!fs.existsSync(filepath)) return false
+  return fs.statSync(filepath).isFile()
+}
+
+function loadFromFile(filepath) {
+  const ext = path.extname(filepath)
+  if (YAML_TYPES.includes(ext)) {
+    return yaml.safeLoad(fs.readFileSync(filepath).toString())
+  } else if (JS_TYPES.includes(ext)) {
+    return require(filepath)
+  } else if (ext) {
+    throw new Error(`error: cannot recognize file extension '${ext}'.`)
   } else {
-    options = loadFromFile(path.join(basePath, 'marklet'))
+    throw new Error('error: cannot recognize file with no extenstion.')
   }
 }
 
-switch (program.mode) {
-case 'parse': {
-  const result = Marklet.parse({
-    ...options,
-    source: program.source,
-    input: program.input,
-    dest: program.dest,
-    config: {
-      header_align: program.headerAlign,
-      allow_section: program.section,
-      default_language: program.defaultLanguage,
-    },
-  })
-  if (!program.dest) {
-    console.log(JSON.stringify(result, null, 2))
+Object.assign(Object.getPrototypeOf(program), {
+  allowConfig() {
+    this._allowConfig = true
+    return this
+      .option('-l, --default-lang [lang]', 'Default language in code block', '')
+      .option('-H, --no-header-align', 'Disable header to align at center')
+      .option('-S, --no-section', 'Disallow section syntax')
+  },
+  allowPort() {
+    this._allowPort = true
+    return this
+      .option('-o, --open', 'open in the default browser')
+      .option('-p, --port [port]', 'port for the development server', parseInt)
+  },
+  getConfig() {
+    return {
+      header_align: this.headerAlign,
+      allow_section: this.section,
+      default_language: this.defaultLang,
+    }
+  },
+  getOptions(filepath = '', forced = true) {
+    filepath = path.resolve(filepath)
+    let basePath = path.resolve(process.cwd(), filepath)
+    let options = {}
+    try {
+      tryFindFile(filepath)
+      if (fs.statSync(basePath).isFile()) {
+        options = loadFromFile(basePath)
+      } else {
+        let matchFound = false
+        basePath = path.join(basePath, 'marklet')
+        for (const type of ALL_TYPES) {
+          if (isFileExist(basePath + type)) {
+            options = loadFromFile(basePath + type)
+            matchFound = true
+            break
+          }
+        }
+        if (!matchFound && forced) {
+          throw new Error(`no config file was found in ${basePath}.`)
+        }
+      }
+      if (this._allowPort) {
+        if (this.port) options.port = this.port
+      }
+      if (this._allowConfig) {
+        if (!options.config) options.config = {}
+        Object.assign(options.config, this.getConfig())
+      }
+    } catch (error) {
+      handleError(error.message)
+    }
+    return options
   }
-  break
-}
-case 'watch':
-case 'edit': {
-  Marklet[program.mode]({
-    ...options,
-    source: program.source,
-    port: program.port,
+})
+
+program
+  .name('marklet')
+  .version(pj.version, '-v, --version')
+  .description(pj.description)
+
+program
+  .command('parse [filepath]')
+  .usage('<filepath>')
+  .description('Parse a marklet file into marklet AST.')
+  .allowConfig()
+  .action(function(filepath = '') {
+    const basePath = path.resolve(process.cwd(), filepath)
+    tryFindFile(filepath)
+    if (!fs.statSync(basePath).isFile()) {
+      handleError(filepath + ' is not a file.')
+    }
+    console.log(JSON.stringify(parser.parse({
+      input: fs.readFileSync(basePath).toString(),
+      config: this.getConfig(),
+    }), null, 2))
+  })
+
+program
+  .command('build [filepath|dirpath]')
+  .description('Build a marklet project into a website.')
+  // .option('-s, --source [path]', 'Read text from file')
+  // .option('-i, --input [text]', 'Read text directly from stdin', '')
+  // .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath)
+    console.log(options)
+  })
+
+program
+  .command('edit [filepath|dirpath]')
+  .description('Edit a marklet file or project.')
+  .allowPort()
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath, false)
+    server.edit(options)
+    if (this.open) {
+      open(`http://localhost:${options.port || 8080}`)
+    }
+  })
+
+program
+  .command('watch [filepath|dirpath]')
+  .description('Watch a marklet file or project.')
+  .allowPort()
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath)
+    server.watch(options)
+    if (this.open) {
+      open(`http://localhost:${options.port || 8080}`)
+    }
   })
-  break
-}}
+
+program.on('command:*', (cmd) => {
+  console.error(`error: invalid command '${cmd}'.`)
+  console.log('See --help for a list of available commands.')
+  process.exit(1)
+})
+
+program.parse(process.argv)
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 04c703d..ca8078c 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/cli",
-  "version": "1.1.16",
+  "version": "2.0.0",
   "description": "A command line interface for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -19,10 +19,11 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/dev-server": "^1.1.0",
+    "@marklet/dev-server": "^1.1.1",
     "@marklet/parser": "^1.5.1",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
-    "js-yaml": "^3.12.0"
+    "js-yaml": "^3.12.0",
+    "opn": "^5.4.0"
   }
 }
\ No newline at end of file
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 6d85a79..4722992 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/dev-server",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A develop server for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
diff --git a/packages/marklet/package.json b/packages/marklet/package.json
index 5fb6055..fb58dd8 100644
--- a/packages/marklet/package.json
+++ b/packages/marklet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markletjs",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A markup language designed for API manual pages.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -28,7 +28,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/cli": "^1.1.16",
+    "@marklet/cli": "^2.0.0",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1"
   }

From aaf11abe2d02163b2a938a6de3182467983e2047 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 01:54:54 +0800
Subject: [PATCH 22/30] v1.3

---
 README.md                         |  22 ++--
 packages/cli/README.md            |  70 ++++++++++++
 packages/cli/commands/build.js    |  11 ++
 packages/cli/commands/edit.js     |  15 +++
 packages/cli/commands/parse.js    |  32 ++++++
 packages/cli/commands/watch.js    |  15 +++
 packages/cli/index.js             | 174 ++----------------------------
 packages/cli/package.json         |   4 +-
 packages/cli/program.js           |  91 ++++++++++++++++
 packages/cli/util.js              |  27 +++++
 packages/dev-server/package.json  |   2 +-
 packages/dev-server/src/server.ts |   6 +-
 packages/marklet/README.md        |  22 ++--
 packages/marklet/package.json     |   4 +-
 14 files changed, 302 insertions(+), 193 deletions(-)
 create mode 100644 packages/cli/commands/build.js
 create mode 100644 packages/cli/commands/edit.js
 create mode 100644 packages/cli/commands/parse.js
 create mode 100644 packages/cli/commands/watch.js
 create mode 100644 packages/cli/program.js
 create mode 100644 packages/cli/util.js

diff --git a/README.md b/README.md
index 4c5f77b..a61ceda 100644
--- a/README.md
+++ b/README.md
@@ -20,22 +20,22 @@ A markup language designed for API manual pages.
 ## Usage: CLI
 
 ```
-Usage: marklet [filepath|dirpath] [options]
+Usage: marklet [options] [command]
+
+A command line interface for marklet.
 
 Options:
+  -v, --version                       output the version number
+  -h, --help                          output usage information
 
-  -v, --version                      output the version number
-  -m, --mode [mode]                  Choose between parse, watch and edit mode (default: parse)
-  -s, --source [path]                Read text from file
-  -i, --input [text]                 Read text directly from stdin
-  -d, --dest [path]                  Write parsed data to file instead of stdin
-  -p, --port [port]                  Port for the development server
-  -l, --default-language [language]  Default language in code block
-  -H, --no-header-align              Disable header to align at center
-  -S, --no-section                   Disallow section syntax
-  -h, --help                         output usage information
+Commands:
+  parse [options] [filepath]          Parse a marklet file into marklet AST.
+  edit [options] [filepath|dirpath]   Edit a marklet file or project.
+  watch [options] [filepath|dirpath]  Watch a marklet file or project.
 ```
 
+See details [here](https://github.com/obstudio/Marklet/blob/master/packages/cli/README.md).
+
 ## Usage: Node
 
 ```shell
diff --git a/packages/cli/README.md b/packages/cli/README.md
index d58cf6b..dc2b1ea 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -6,3 +6,73 @@
 [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)
 
 A command line interface for marklet.
+
+```
+Usage: marklet [options] [command]
+
+A command line interface for marklet.
+
+Options:
+  -v, --version                       output the version number
+  -h, --help                          output usage information
+
+Commands:
+  parse [options] [filepath]          Parse a marklet file into marklet AST.
+  edit [options] [filepath|dirpath]   Edit a marklet file or project.
+  watch [options] [filepath|dirpath]  Watch a marklet file or project.
+```
+
+## General options
+
+### config options
+
+```
+  -l, --language [lang]  default language in codeblocks (default: "")
+  -H, --no-header-align  disable header to align at center
+  -S, --no-section       disallow section syntax
+```
+
+### server options
+
+```
+  -o, --open             open in the default browser
+  -p, --port [port]      port for the development server (default: 10826)
+```
+
+## CLI Commands
+
+### parse
+
+```
+Usage: marklet parse [options] <filepath>
+
+Parse a marklet file into marklet AST.
+
+Options:
+  (support config options)
+  -f, --format [format]  the output format (default: "json")
+```
+
+### edit
+
+```
+Usage: marklet edit [options] [filepath|dirpath]
+
+Edit a marklet file or project.
+
+Options:
+  (support config options)
+  (support server options)
+```
+
+### watch
+
+```
+Usage: marklet watch [options] [filepath|dirpath]
+
+Watch a marklet file or project.
+
+Options:
+  (support config options)
+  (support server options)
+```
diff --git a/packages/cli/commands/build.js b/packages/cli/commands/build.js
new file mode 100644
index 0000000..de3fac8
--- /dev/null
+++ b/packages/cli/commands/build.js
@@ -0,0 +1,11 @@
+module.exports = program => program
+  .command('build [filepath|dirpath]')
+  .description('Build a marklet project into a website.')
+  // .option('-s, --source [path]', 'Read text from file')
+  // .option('-i, --input [text]', 'Read text directly from stdin', '')
+  // .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath)
+    console.log(options)
+  })
diff --git a/packages/cli/commands/edit.js b/packages/cli/commands/edit.js
new file mode 100644
index 0000000..49f59dd
--- /dev/null
+++ b/packages/cli/commands/edit.js
@@ -0,0 +1,15 @@
+const open = require('opn')
+const server = require('@marklet/dev-server')
+
+module.exports = program => program
+  .command('edit [filepath|dirpath]')
+  .description('Edit a marklet file or project.')
+  .allowPort()
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath, false)
+    server.edit(options)
+    if (this.open) {
+      open(`http://localhost:${options.port || 8080}`)
+    }
+  })
diff --git a/packages/cli/commands/parse.js b/packages/cli/commands/parse.js
new file mode 100644
index 0000000..f95da36
--- /dev/null
+++ b/packages/cli/commands/parse.js
@@ -0,0 +1,32 @@
+const fs = require('fs')
+const util = require('../util')
+const yaml = require('js-yaml')
+const parser = require('@marklet/parser')
+
+module.exports = program => program
+  .command('parse [filepath]')
+  .usage('[options] <filepath>')
+  .description('Parse a marklet file into marklet AST.')
+  .allowConfig()
+  .option('-f, --format [format]', 'the output format', 'json')
+  .action(function(filepath = '') {
+    const basePath = util.fullPath(filepath)
+    util.tryFindFile(filepath)
+    if (!fs.statSync(basePath).isFile()) {
+      util.handleError(filepath + ' is not a file.')
+    }
+    const result = parser.parse({
+      input: fs.readFileSync(basePath).toString(),
+      config: this.getConfig(),
+    })
+    switch (this.format || 'json') {
+    case 'json':
+      console.log(JSON.stringify(result, null, 2))
+      break
+    case 'yaml':
+      console.log(yaml.safeDump(result))
+      break
+    default:
+      util.handleError(this.format + ' is not a supported format.')
+    }
+  })
diff --git a/packages/cli/commands/watch.js b/packages/cli/commands/watch.js
new file mode 100644
index 0000000..66c975a
--- /dev/null
+++ b/packages/cli/commands/watch.js
@@ -0,0 +1,15 @@
+const open = require('opn')
+const server = require('@marklet/dev-server')
+
+module.exports = program => program
+  .command('watch [filepath|dirpath]')
+  .description('Watch a marklet file or project.')
+  .allowPort()
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath)
+    server.watch(options)
+    if (this.open) {
+      open(`http://localhost:${options.port || 8080}`)
+    }
+  })
diff --git a/packages/cli/index.js b/packages/cli/index.js
index 4b66d42..bfcd197 100644
--- a/packages/cli/index.js
+++ b/packages/cli/index.js
@@ -1,175 +1,21 @@
 #!/usr/bin/env node
 
-const fs = require('fs')
-const open = require('opn')
-const path = require('path')
-const chalk = require('chalk')
-const yaml = require('js-yaml')
-const program = require('commander')
+const program = require('./program')
 const pj = require('./package.json')
-const parser = require('@marklet/parser')
-const server = require('@marklet/dev-server')
-
-const JS_TYPES = ['.json', '.js']
-const YAML_TYPES = ['.yml', '.yaml']
-const ALL_TYPES = [
-  ...JS_TYPES,
-  ...YAML_TYPES,
-]
-
-function handleError(message) {
-  console.error(chalk.redBright('error:'), message)
-  process.exit(1)
-}
-
-function tryFindFile(filepath) {
-  if (fs.existsSync(path.resolve(process.cwd(), filepath))) return
-  if (!filepath) {
-    handleError('a filepath is required.')
-  } else {
-    handleError(`file ${filepath} was not found.`)
-  }
-}
-
-function isFileExist(filepath) {
-  if (!fs.existsSync(filepath)) return false
-  return fs.statSync(filepath).isFile()
-}
-
-function loadFromFile(filepath) {
-  const ext = path.extname(filepath)
-  if (YAML_TYPES.includes(ext)) {
-    return yaml.safeLoad(fs.readFileSync(filepath).toString())
-  } else if (JS_TYPES.includes(ext)) {
-    return require(filepath)
-  } else if (ext) {
-    throw new Error(`error: cannot recognize file extension '${ext}'.`)
-  } else {
-    throw new Error('error: cannot recognize file with no extenstion.')
-  }
-}
-
-Object.assign(Object.getPrototypeOf(program), {
-  allowConfig() {
-    this._allowConfig = true
-    return this
-      .option('-l, --default-lang [lang]', 'Default language in code block', '')
-      .option('-H, --no-header-align', 'Disable header to align at center')
-      .option('-S, --no-section', 'Disallow section syntax')
-  },
-  allowPort() {
-    this._allowPort = true
-    return this
-      .option('-o, --open', 'open in the default browser')
-      .option('-p, --port [port]', 'port for the development server', parseInt)
-  },
-  getConfig() {
-    return {
-      header_align: this.headerAlign,
-      allow_section: this.section,
-      default_language: this.defaultLang,
-    }
-  },
-  getOptions(filepath = '', forced = true) {
-    filepath = path.resolve(filepath)
-    let basePath = path.resolve(process.cwd(), filepath)
-    let options = {}
-    try {
-      tryFindFile(filepath)
-      if (fs.statSync(basePath).isFile()) {
-        options = loadFromFile(basePath)
-      } else {
-        let matchFound = false
-        basePath = path.join(basePath, 'marklet')
-        for (const type of ALL_TYPES) {
-          if (isFileExist(basePath + type)) {
-            options = loadFromFile(basePath + type)
-            matchFound = true
-            break
-          }
-        }
-        if (!matchFound && forced) {
-          throw new Error(`no config file was found in ${basePath}.`)
-        }
-      }
-      if (this._allowPort) {
-        if (this.port) options.port = this.port
-      }
-      if (this._allowConfig) {
-        if (!options.config) options.config = {}
-        Object.assign(options.config, this.getConfig())
-      }
-    } catch (error) {
-      handleError(error.message)
-    }
-    return options
-  }
-})
 
 program
   .name('marklet')
   .version(pj.version, '-v, --version')
   .description(pj.description)
-
-program
-  .command('parse [filepath]')
-  .usage('<filepath>')
-  .description('Parse a marklet file into marklet AST.')
-  .allowConfig()
-  .action(function(filepath = '') {
-    const basePath = path.resolve(process.cwd(), filepath)
-    tryFindFile(filepath)
-    if (!fs.statSync(basePath).isFile()) {
-      handleError(filepath + ' is not a file.')
-    }
-    console.log(JSON.stringify(parser.parse({
-      input: fs.readFileSync(basePath).toString(),
-      config: this.getConfig(),
-    }), null, 2))
+  .on('command:*', (cmd) => {
+    console.error(`error: invalid command '${cmd}'.`)
+    console.log('See --help for a list of available commands.')
+    process.exit(1)
   })
 
 program
-  .command('build [filepath|dirpath]')
-  .description('Build a marklet project into a website.')
-  // .option('-s, --source [path]', 'Read text from file')
-  // .option('-i, --input [text]', 'Read text directly from stdin', '')
-  // .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
-  .allowConfig()
-  .action(function(filepath = '') {
-    const options = this.getOptions(filepath)
-    console.log(options)
-  })
-
-program
-  .command('edit [filepath|dirpath]')
-  .description('Edit a marklet file or project.')
-  .allowPort()
-  .allowConfig()
-  .action(function(filepath = '') {
-    const options = this.getOptions(filepath, false)
-    server.edit(options)
-    if (this.open) {
-      open(`http://localhost:${options.port || 8080}`)
-    }
-  })
-
-program
-  .command('watch [filepath|dirpath]')
-  .description('Watch a marklet file or project.')
-  .allowPort()
-  .allowConfig()
-  .action(function(filepath = '') {
-    const options = this.getOptions(filepath)
-    server.watch(options)
-    if (this.open) {
-      open(`http://localhost:${options.port || 8080}`)
-    }
-  })
-
-program.on('command:*', (cmd) => {
-  console.error(`error: invalid command '${cmd}'.`)
-  console.log('See --help for a list of available commands.')
-  process.exit(1)
-})
-
-program.parse(process.argv)
+  .apply(require('./commands/parse'))
+  .apply(require('./commands/edit'))
+  .apply(require('./commands/watch'))
+  .apply(require('./commands/build'))
+  .parse(process.argv)
diff --git a/packages/cli/package.json b/packages/cli/package.json
index ca8078c..1e639c2 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/cli",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A command line interface for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -19,7 +19,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/dev-server": "^1.1.1",
+    "@marklet/dev-server": "^1.1.2",
     "@marklet/parser": "^1.5.1",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
diff --git a/packages/cli/program.js b/packages/cli/program.js
new file mode 100644
index 0000000..c326e00
--- /dev/null
+++ b/packages/cli/program.js
@@ -0,0 +1,91 @@
+const fs = require('fs')
+const path = require('path')
+const yaml = require('js-yaml')
+const util = require('./util')
+const program = require('commander')
+const { DEFAULT_PORT } = require('@marklet/dev-server')
+
+const JS_TYPES = ['.json', '.js']
+const YAML_TYPES = ['.yml', '.yaml']
+const ALL_TYPES = [
+  ...JS_TYPES,
+  ...YAML_TYPES,
+]
+
+function loadFromFile(filepath) {
+  const ext = path.extname(filepath)
+  if (YAML_TYPES.includes(ext)) {
+    return yaml.safeLoad(fs.readFileSync(filepath).toString())
+  } else if (JS_TYPES.includes(ext)) {
+    return require(filepath)
+  } else if (ext) {
+    throw new Error(`error: cannot recognize file extension '${ext}'.`)
+  } else {
+    throw new Error('error: cannot recognize file with no extenstion.')
+  }
+}
+
+Object.assign(Object.getPrototypeOf(program), {
+  apply(install) {
+    install(program)
+    return program
+  },
+  allowConfig() {
+    this._allowConfig = true
+    return this
+      .option('-l, --language [lang]', 'default language in codeblocks', '')
+      .option('-H, --no-header-align', 'disable header to align at center')
+      .option('-S, --no-section', 'disallow section syntax')
+  },
+  allowPort() {
+    this._allowPort = true
+    return this
+      .option('-o, --open', 'open in the default browser')
+      .option('-p, --port [port]', 'port for the development server', parseInt, DEFAULT_PORT)
+  },
+  getConfig() {
+    return {
+      header_align: this.headerAlign,
+      allow_section: this.section,
+      default_language: this.language,
+    }
+  },
+  getOptions(filepath = '', forced = true) {
+    filepath = path.resolve(filepath)
+    let basePath = path.resolve(process.cwd(), filepath)
+    let options = {}
+    try {
+      util.tryFindFile(filepath)
+      if (fs.statSync(basePath).isFile()) {
+        options = loadFromFile(basePath)
+      } else {
+        let matchFound = false
+        basePath = path.join(basePath, 'marklet')
+        for (const type of ALL_TYPES) {
+          const filename = basePath + type
+          if (!fs.existsSync(filename)) continue
+          if (fs.statSync(filename).isFile()) {
+            options = loadFromFile(filename)
+            matchFound = true
+            break
+          }
+        }
+        if (!matchFound && forced) {
+          throw new Error(`no config file was found in ${basePath}.`)
+        }
+      }
+      if (this._allowPort) {
+        if (this.port) options.port = this.port
+      }
+      if (this._allowConfig) {
+        if (!options.config) options.config = {}
+        Object.assign(options.config, this.getConfig())
+      }
+    } catch (error) {
+      util.handleError(error.message)
+    }
+    return options
+  }
+})
+
+module.exports = program
diff --git a/packages/cli/util.js b/packages/cli/util.js
new file mode 100644
index 0000000..1bfd57f
--- /dev/null
+++ b/packages/cli/util.js
@@ -0,0 +1,27 @@
+const fs = require('fs')
+const path = require('path')
+const chalk = require('chalk')
+
+function fullPath(filepath) {
+  return path.resolve(process.cwd(), filepath)
+}
+
+function handleError(message) {
+  console.error(chalk.redBright('error:'), message)
+  process.exit(1)
+}
+
+function tryFindFile(filepath) {
+  if (fs.existsSync(fullPath(filepath))) return
+  if (!filepath) {
+    handleError('a filepath is required.')
+  } else {
+    handleError(`file ${filepath} was not found.`)
+  }
+}
+
+module.exports = {
+  fullPath,
+  handleError,
+  tryFindFile,
+}
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 4722992..46086e8 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/dev-server",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A develop server for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 018f696..6f07140 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -77,8 +77,10 @@ interface WatchOptions {
   port?: number
 }
 
+export const DEFAULT_PORT = 10826
+
 export function watch(options: WatchOptions): void {
-  const port = options.port || 8080
+  const port = options.port || DEFAULT_PORT
   const { httpServer, wsServer } = createServer('watch')
   httpServer.listen(port)
   wsServer.on('connection', (ws) => {
@@ -96,7 +98,7 @@ interface EditOptions {
 }
 
 export function edit(options: EditOptions): void {
-  const port = options.port || 8080
+  const port = options.port || DEFAULT_PORT
   const { httpServer } = createServer('edit')
   httpServer.listen(port)
   console.log(`Server running at http://localhost:${port}/`)
diff --git a/packages/marklet/README.md b/packages/marklet/README.md
index 1f9910c..9ea7a4c 100644
--- a/packages/marklet/README.md
+++ b/packages/marklet/README.md
@@ -10,22 +10,22 @@ A markup language designed for API manual pages.
 ## Usage: CLI
 
 ```
-Usage: marklet [filepath|dirpath] [options]
+Usage: marklet [options] [command]
+
+A command line interface for marklet.
 
 Options:
+  -v, --version                       output the version number
+  -h, --help                          output usage information
 
-  -v, --version                      output the version number
-  -m, --mode [mode]                  Choose between parse, watch and edit mode (default: parse)
-  -s, --source [path]                Read text from file
-  -i, --input [text]                 Read text directly from stdin
-  -d, --dest [path]                  Write parsed data to file instead of stdin
-  -p, --port [port]                  Port for the development server
-  -l, --default-language [language]  Default language in code block
-  -H, --no-header-align              Disable header to align at center
-  -S, --no-section                   Disallow section syntax
-  -h, --help                         output usage information
+Commands:
+  parse [options] [filepath]          Parse a marklet file into marklet AST.
+  edit [options] [filepath|dirpath]   Edit a marklet file or project.
+  watch [options] [filepath|dirpath]  Watch a marklet file or project.
 ```
 
+See details [here](https://github.com/obstudio/Marklet/blob/master/packages/cli/README.md).
+
 ## Usage: Node
 
 ```shell
diff --git a/packages/marklet/package.json b/packages/marklet/package.json
index fb58dd8..437fc02 100644
--- a/packages/marklet/package.json
+++ b/packages/marklet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markletjs",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "A markup language designed for API manual pages.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -28,7 +28,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/cli": "^2.0.0",
+    "@marklet/cli": "^2.0.1",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1"
   }

From ca0419a60d344cb5748b0ba2e1673002a3dc4b40 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 13:03:47 +0800
Subject: [PATCH 23/30] require.resolve

---
 packages/dev-server/src/client.ts |   2 +-
 packages/dev-server/src/server.ts | 135 +++++++++++++++++-------------
 2 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 634c2f9..20af578 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -18,7 +18,7 @@ eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
   monaco.editor.defineTheme('simple', require('../themes/simple'))
 })
 
-const client = new class WatchClient {
+const client = new class MarkletClient {
   private url: string
   private retry: boolean
   private timeout: number
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 6f07140..a4ad501 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -1,8 +1,10 @@
-import { Server as WSServer, OPEN as WSOPEN } from 'ws'
 import * as path from 'path'
 import * as http from 'http'
 import * as url from 'url'
 import * as fs from 'fs'
+import * as ws from 'ws'
+
+export const DEFAULT_PORT = 10826
 
 declare module 'ws' {
   interface Server {
@@ -10,9 +12,9 @@ declare module 'ws' {
   }
 }
 
-WSServer.prototype.broadcast = function (data) {
+ws.Server.prototype.broadcast = function (data) {
   this.clients.forEach((client) => {
-    if (client.readyState === WSOPEN) {
+    if (client.readyState === ws.OPEN) {
       client.send(data)
     }
   })
@@ -25,81 +27,94 @@ function toDocMessage(filename: string) {
   })
 }
 
-function createServer(type: 'edit' | 'watch') {
-  const httpServer = http.createServer((request, response) => {
-    let pathname = url.parse(request.url).pathname.slice(1)
-    if (!pathname) {
-      pathname = 'index.html'
-    } else if (pathname.startsWith('~/')) {
-      pathname = '../node_modules/' + pathname.slice(1)
-    } else if (pathname === 'start') {
-      response.writeHead(200, { 'Content-Type': 'text/javascript' })
-      response.write(`Marklet.start({ el: '#app', type: '${type}' })`)
-      response.end()
-      return
-    }
-    fs.readFile(path.join(__dirname, pathname), (error, data) => {
-      if (pathname.endsWith('edit.vue.js')) console.log(data)
-      if (error) {
-        console.log(error)
+type ServerType = 'watch' | 'edit'
+
+interface ServerOptions {
+  port?: number
+}
+
+class MarkletServer<T extends ServerType> {
+  type: T
+  port: number
+  wsServer: ws.Server
+  httpServer: http.Server
+
+  constructor(type: T, options: ServerOptions = {}) {
+    this.type = type
+    this.port = options.port || DEFAULT_PORT
+
+    this.httpServer = http.createServer((request, response) => {
+      function handleError(error: Error) {
+        console.error(error)
         response.writeHead(404, { 'Content-Type': 'text/html' })
+        response.end()
+      }
+      
+      function handleData(data: any, type: string) {
+        response.writeHead(200, { 'Content-Type': type })
+        response.write(data)
+        response.end()
+      }
+      
+      let pathname = url.parse(request.url).pathname.slice(1)
+      let filepath: string
+      if (pathname.startsWith('~/')) {
+        try {
+          filepath = require.resolve(pathname.slice(2))
+        } catch (error) {
+          handleError(error)
+          return
+        }
+      } else if (pathname === 'start') {
+        handleData(`Marklet.start({ el: '#app', type: '${type}' })`, 'text/javascript')
+        return
       } else {
-        const ext = path.extname(pathname)
+        filepath = path.join(__dirname, pathname || 'index.html')
+      }
+      fs.readFile(filepath, (error, data) => {
+        if (error) {
+          handleError(error)
+          return
+        }
+
+        const ext = path.extname(filepath)
         let contentType: string
         switch (ext) {
-          case '.css':
-            contentType = 'text/css'
-            break
-          case '.js':
-            contentType = 'text/javascript'
-            break
-          case '.html':
-            contentType = 'text/html'
-            break
-          default:
-            contentType = 'application/octet-stream'
+          case '.css': contentType = 'text/css'; break
+          case '.js': contentType = 'text/javascript'; break
+          case '.html': contentType = 'text/html'; break
+          default: contentType = 'application/octet-stream'
         }
-        response.writeHead(200, { 'Content-Type': contentType })
-        response.write(data.toString())
-      }
-      response.end()
-    })
-  })
-  const wsServer = new WSServer({ server: httpServer })
-  return {
-    httpServer,
-    wsServer
+        handleData(data.toString(), contentType)
+      })
+    }).listen(this.port)
+    this.wsServer = new ws.Server({ server: this.httpServer })
+    console.log(`Server running at http://localhost:${this.port}/`)
   }
 }
 
-interface WatchOptions {
+export { MarkletServer as Server }
+
+export interface WatchOptions extends ServerOptions {
   source: string
-  port?: number
 }
 
-export const DEFAULT_PORT = 10826
-
-export function watch(options: WatchOptions): void {
-  const port = options.port || DEFAULT_PORT
-  const { httpServer, wsServer } = createServer('watch')
-  httpServer.listen(port)
-  wsServer.on('connection', (ws) => {
+export function watch(options: WatchOptions): MarkletServer<'watch'> {
+  const server = new MarkletServer('watch', options)
+  server.wsServer.on('connection', (ws) => {
     ws.send(toDocMessage(options.source))
   })
   fs.watch(options.source, () => {
-    wsServer.broadcast(toDocMessage(options.source))
+    server.wsServer.broadcast(toDocMessage(options.source))
   })
-  console.log(`Server running at http://localhost:${port}/`)
+  return server
 }
 
-interface EditOptions {
+export interface EditOptions extends ServerOptions {
   source?: string
-  port?: number
 }
 
-export function edit(options: EditOptions): void {
-  const port = options.port || DEFAULT_PORT
-  const { httpServer } = createServer('edit')
-  httpServer.listen(port)
-  console.log(`Server running at http://localhost:${port}/`)
+export function edit(options: EditOptions): MarkletServer<'edit'> {
+  const server = new MarkletServer('edit', options)
+  return server
 }

From fad3992fd8d30ed032fd7f14644435e39177d677 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 14:36:26 +0800
Subject: [PATCH 24/30] send config

---
 packages/cli/program.js            | 10 ++++-----
 packages/dev-server/comp/editor.js | 22 +++++++++++++-----
 packages/dev-server/src/client.ts  | 36 ++++++++++++++++++++----------
 packages/dev-server/src/server.ts  | 14 +++++++++++-
 packages/parser/src/index.ts       |  6 +++++
 5 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index c326e00..581f65e 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -44,11 +44,11 @@ Object.assign(Object.getPrototypeOf(program), {
       .option('-p, --port [port]', 'port for the development server', parseInt, DEFAULT_PORT)
   },
   getConfig() {
-    return {
-      header_align: this.headerAlign,
-      allow_section: this.section,
-      default_language: this.language,
-    }
+    const config = {}
+    if (!this.headerAlign) config.header_align = false
+    if (!this.section) config.allow_section = false
+    if (this.language) config.default_language = this.language
+    return config
   },
   getOptions(filepath = '', forced = true) {
     filepath = path.resolve(filepath)
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 8eddb30..e28a391 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -1,4 +1,4 @@
-const { DocumentLexer } = require('@marklet/parser')
+const { DocumentLexer, defaultConfig } = require('@marklet/parser')
 
 module.exports = {
   data: () => ({
@@ -7,12 +7,17 @@ module.exports = {
     source: '',
     loading: 3,
     changed: false,
+    config: defaultConfig,
   }),
 
   watch: {
     source(value) {
       this.nodes = this._lexer.parse(value)
     },
+    config(value) {
+      this._lexer = new DocumentLexer(value)
+      this.nodes = this._lexer.parse(this.source)
+    },
     loading(value) {
       if (!value) {
         this._editor.setModel(this._model)
@@ -22,10 +27,14 @@ module.exports = {
   },
 
   created() {
+    this._lexer = new DocumentLexer(defaultConfig)
+
     const source = localStorage.getItem('source')
     if (typeof source === 'string') this.source = source
-    
-    this._lexer = new DocumentLexer()
+
+    this.$eventBus.$on('server.config', (config) => {
+      this.config = Object.assign(defaultConfig, config)
+    })
 
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       const model = monaco.editor.createModel(this.source, 'marklet')
@@ -39,13 +48,16 @@ module.exports = {
   },
 
   mounted() {
-    this.$eventBus.$on('server.message.document', doc => {
+    this.$eventBus.$on('server.document', (doc) => {
       this.openFile(doc)
     })
 
+    this.$eventBus.$on('monaco.theme.loaded', (monaco) => {
+      monaco.editor.setTheme(this.theme)
+    })
+
     this.$eventBus.$on('monaco.loaded', (monaco) => {
       if (this._editor) return
-      monaco.editor.setTheme(this.theme)
       this._editor = monaco.editor.create(this.$refs.editor, {
         model: null,
         language: 'marklet',
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 20af578..aba58e4 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -16,12 +16,14 @@ Vue.prototype.$eventBus = eventBus
 eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
   monaco.editor.defineTheme('dark', require('../themes/dark'))
   monaco.editor.defineTheme('simple', require('../themes/simple'))
+  eventBus.$emit('monaco.theme.loaded', monaco)
 })
 
 const client = new class MarkletClient {
   private url: string
   private retry: boolean
-  private timeout: number
+  private _timeout: number
+  private _interval: number
   private ws: WebSocket
   private msgQueue: string[]
   private timerRef: number
@@ -29,26 +31,37 @@ const client = new class MarkletClient {
   constructor({
     url = `ws://${location.host}/`,
     retry = true,
-    timeout = 5000
+    timeout = 5000,
+    interval = 1000,
   } = {}) {
     this.url = url
     this.retry = retry
-    this.timeout = timeout
+    this._timeout = timeout
     this.msgQueue = []
     this.createWebSocket()
+    this.interval = interval
+  }
+
+  get interval() {
+    return this._interval
+  }
+
+  set interval(value: number) {
+    this._interval = value
+    window.clearInterval(this.timerRef)
     this.timerRef = window.setInterval(() => {
       while (this.msgQueue.length > 0 && this.ws.readyState === 1) {
         this.ws.send(this.msgQueue.shift())
       }
-    }, 1000) // TODO: interval can be adjusted
+    }, 1000)
   }
 
   createWebSocket() {
     this.ws = new WebSocket(this.url)
-    this.ws.addEventListener('close', (e) => {
-      if (e.code !== 1000 && this.retry) {
+    this.ws.addEventListener('close', (event) => {
+      if (event.code !== 1000 && this.retry) {
         eventBus.$emit('ws.reconnect')
-        setTimeout(() => this.createWebSocket(), this.timeout)
+        setTimeout(() => this.createWebSocket(), this._timeout)
       } else {
         eventBus.$emit('ws.close')
       }
@@ -56,13 +69,12 @@ const client = new class MarkletClient {
     this.ws.addEventListener('error', () => {
       eventBus.$emit('ws.error')
     })
-    this.ws.addEventListener('message', e => {
+    this.ws.addEventListener('message', (event) => {
       try {
-        const { type, data } = JSON.parse(e.data)
-        eventBus.$emit('server.message', type, data)
-        eventBus.$emit('server.message.' + type, data)
+        const { type, data } = JSON.parse(event.data)
+        eventBus.$emit('server.' + type, data)
       } catch (error) {
-        eventBus.$emit('server.error')
+        eventBus.$emit('server.error', error)
       }
     })
     this.ws.addEventListener('open', () => {
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index a4ad501..cc69a65 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -2,7 +2,9 @@ import * as path from 'path'
 import * as http from 'http'
 import * as url from 'url'
 import * as fs from 'fs'
-import * as ws from 'ws'
+import ws from 'ws'
+
+import { LexerConfig } from '@marklet/parser'
 
 export const DEFAULT_PORT = 10826
 
@@ -20,6 +22,10 @@ ws.Server.prototype.broadcast = function (data) {
   })
 }
 
+function sendMsg(this: ws, type: string, data: object) {
+  this.send(JSON.stringify({ type, data }))
+}
+
 function toDocMessage(filename: string) {
   return JSON.stringify({
     type: 'document',
@@ -31,6 +37,7 @@ type ServerType = 'watch' | 'edit'
 
 interface ServerOptions {
   port?: number
+  config?: LexerConfig
 }
 
 class MarkletServer<T extends ServerType> {
@@ -88,7 +95,12 @@ class MarkletServer<T extends ServerType> {
         handleData(data.toString(), contentType)
       })
     }).listen(this.port)
+
     this.wsServer = new ws.Server({ server: this.httpServer })
+    this.wsServer.on('connection', (ws) => {
+      sendMsg.call(ws, 'config', options.config)
+    })
+
     console.log(`Server running at http://localhost:${this.port}/`)
   }
 }
diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts
index b4d73b6..fec9dea 100644
--- a/packages/parser/src/index.ts
+++ b/packages/parser/src/index.ts
@@ -11,6 +11,12 @@ interface MarkletLexerConfig extends LexerConfig {
   default_language?: string
 }
 
+export const defaultConfig: MarkletLexerConfig = {
+  header_align: true,
+  allow_section: true,
+  default_language: '',
+}
+
 export interface ParseOptions {
   input: string
   config?: MarkletLexerConfig

From 31a4d0ccd288fd26e9d947c61dda93d51e7173fc Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 15:45:36 +0800
Subject: [PATCH 25/30] merge vm and split html

---
 build/build.js                                | 33 ++++++++-------
 packages/dev-server/.npmignore                |  2 -
 .../dev-server/comp/{edit.vue => app.vue}     |  0
 packages/dev-server/comp/editor.js            |  9 ++--
 packages/dev-server/comp/watch.vue            | 24 -----------
 packages/dev-server/package.json              |  7 +++-
 packages/dev-server/src/client.ts             | 20 ++++-----
 .../dev-server/src/{index.html => edit.html}  |  5 ++-
 packages/dev-server/src/server.ts             |  7 +---
 packages/dev-server/src/watch.html            | 20 +++++++++
 packages/renderer/src/index.js                | 41 +++++++++++--------
 11 files changed, 89 insertions(+), 79 deletions(-)
 delete mode 100644 packages/dev-server/.npmignore
 rename packages/dev-server/comp/{edit.vue => app.vue} (100%)
 delete mode 100644 packages/dev-server/comp/watch.vue
 rename packages/dev-server/src/{index.html => edit.html} (86%)
 create mode 100644 packages/dev-server/src/watch.html

diff --git a/build/build.js b/build/build.js
index 24d7500..682d6a5 100644
--- a/build/build.js
+++ b/build/build.js
@@ -109,21 +109,25 @@ Promise.resolve().then(() => {
     util.exec('tsc -p packages/dev-server')
   }
 
-  if (program.prod) {
-    fs.writeFileSync(
-      util.resolve('dev-server/dist/index.html'),
-      minify(fs.readFileSync(util.resolve('dev-server/src/index.html')).toString(), {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-      })
-    )
-  } else {
-    fs.copyFileSync(
-      util.resolve('dev-server/src/index.html'),
-      util.resolve('dev-server/dist/index.html')
-    )
+  function minifyHTML(type) {
+    const srcPath = util.resolve(`dev-server/src/${type}.html`)
+    const distPath = util.resolve(`dev-server/dist/${type}.html`)
+    if (program.prod) {
+      fs.writeFileSync(
+        distPath,
+        minify(fs.readFileSync(srcPath).toString(), {
+          collapseWhitespace: true,
+          removeAttributeQuotes: true,
+        })
+      )
+    } else {
+      fs.copyFileSync(srcPath, distPath)
+    }
   }
 
+  minifyHTML('edit')
+  minifyHTML('watch')
+
   let css = ''
   themes.forEach(({ key }) => {
     const options = yaml.safeLoad(fs.readFileSync(util.resolve(`dev-server/themes/${key}.yaml`)))
@@ -160,13 +164,14 @@ Promise.resolve().then(() => {
       })
     })))
   }).then(() => {
+    fs.writeFileSync(util.resolve('dev-server/dist/themes.min.css'), css)
     return new Promise((resolve, reject) => {
       sass.render({
         data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
         outputStyle: 'compressed',
       }, (error, result) => {
         if (error) reject(error)
-        fs.writeFileSync(util.resolve('dev-server/dist/editor.min.css'), css + result.css)
+        fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), result.css)
         resolve()
       })
     })
diff --git a/packages/dev-server/.npmignore b/packages/dev-server/.npmignore
deleted file mode 100644
index b19bd72..0000000
--- a/packages/dev-server/.npmignore
+++ /dev/null
@@ -1,2 +0,0 @@
-dist/client.js
-dist/client.d.ts
\ No newline at end of file
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/app.vue
similarity index 100%
rename from packages/dev-server/comp/edit.vue
rename to packages/dev-server/comp/app.vue
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index e28a391..7da34de 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -14,9 +14,12 @@ module.exports = {
     source(value) {
       this.nodes = this._lexer.parse(value)
     },
-    config(value) {
-      this._lexer = new DocumentLexer(value)
-      this.nodes = this._lexer.parse(this.source)
+    config: {
+      deep: true,
+      handler(value) {
+        this._lexer = new DocumentLexer(value)
+        this.nodes = this._lexer.parse(this.source)
+      },
     },
     loading(value) {
       if (!value) {
diff --git a/packages/dev-server/comp/watch.vue b/packages/dev-server/comp/watch.vue
deleted file mode 100644
index 2ddfe7b..0000000
--- a/packages/dev-server/comp/watch.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-
-module.exports = {
-  data: () => ({
-    nodes: []
-  }),
-  created() {
-    this.$eventBus.$on('server.message.document', (data) => {
-      this.nodes = window.Marklet.parse(data)
-    })
-  }
-}
-
-</script>
-
-<template>
-  <div>
-    <mkl-nodes :content="nodes"/>
-  </div>
-</template>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 46086e8..e4b48cd 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -11,7 +11,12 @@
   "main": "dist/server.js",
   "typings": "dist/server.d.ts",
   "files": [
-    "dist"
+    "dist/server.js",
+    "dist/server.d.ts",
+    "dist/client.min.js",
+    "dist/client.min.css",
+    "dist/themes.min.css",
+    "dist/monaco.min.css"
   ],
   "repository": {
     "type": "git",
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index aba58e4..4b3d0e2 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -1,7 +1,6 @@
 import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
 import * as renderer from '@marklet/renderer'
-import { DocumentLexer, LexerConfig } from '@marklet/parser'
 
 declare global {
   export const Vue: typeof VueConstructor
@@ -93,16 +92,15 @@ const client = new class MarkletClient {
 
 addEventListener('beforeunload', () => client.dispose())
 
+const typeMap = {
+  edit: '编辑',
+  watch: '监视',
+}
+
 export const Marklet = {
-  components: {
-    watch: require('@/watch.vue'),
-    edit: require('@/edit.vue'),
-  },
-  parse(source: string, config: LexerConfig) {
-    return new DocumentLexer(config).parse(source)
-  },
-  start({ el, type }: { el: string | HTMLElement, type: 'watch' | 'edit' }) {
-    document.title = 'Marklet - ' + type
-    new Vue(this.components[type]).$mount(el)
+  app: require('@/app.vue'),
+  start(type: keyof typeof typeMap) {
+    document.title = 'Marklet - ' + typeMap[type]
+    return new Vue(this.app)
   }
 }
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/edit.html
similarity index 86%
rename from packages/dev-server/src/index.html
rename to packages/dev-server/src/edit.html
index 45442ab..350a7f8 100644
--- a/packages/dev-server/src/index.html
+++ b/packages/dev-server/src/edit.html
@@ -7,15 +7,16 @@
     <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
     <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
     <script src="~/vue/dist/vue.runtime.min.js"></script>
-    <link href="editor.min.css" rel="stylesheet">
     <link href="client.min.css" rel="stylesheet">
+    <link href="themes.min.css" rel="stylesheet">
+    <link href="monaco.min.css" rel="stylesheet">
     <script src="client.min.js"></script>
     <script src="~/monaco-editor/min/vs/loader.js"></script>
   </head>
   <body>
     <div id="app"></div>
-    <script src="start"></script>
     <script>
+      Marklet.start('edit').$mount('#app')
       require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
       require(['vs/editor/editor.main'], () => {
         Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index cc69a65..7bf48c2 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -33,7 +33,7 @@ function toDocMessage(filename: string) {
   })
 }
 
-type ServerType = 'watch' | 'edit'
+export type ServerType = 'watch' | 'edit'
 
 interface ServerOptions {
   port?: number
@@ -72,11 +72,8 @@ class MarkletServer<T extends ServerType> {
           handleError(error)
           return
         }
-      } else if (pathname === 'start') {
-        handleData(`Marklet.start({ el: '#app', type: '${type}' })`, 'text/javascript')
-        return
       } else {
-        filepath = path.join(__dirname, pathname || 'index.html')
+        filepath = path.join(__dirname, pathname || type + '.html')
       }
       fs.readFile(filepath, (error, data) => {
         if (error) {
diff --git a/packages/dev-server/src/watch.html b/packages/dev-server/src/watch.html
new file mode 100644
index 0000000..8772b2d
--- /dev/null
+++ b/packages/dev-server/src/watch.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Marklet</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
+    <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
+    <script src="~/vue/dist/vue.runtime.min.js"></script>
+    <link href="client.min.css" rel="stylesheet">
+    <link href="themes.min.css" rel="stylesheet">
+    <script src="client.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      Marklet.start('edit').$mount('#app')
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/renderer/src/index.js b/packages/renderer/src/index.js
index 2af613f..e513cc4 100644
--- a/packages/renderer/src/index.js
+++ b/packages/renderer/src/index.js
@@ -1,25 +1,32 @@
 let _Vue = null, ASTNodes = null
 
+const components = {
+  'collapse-transition': require('@/transitions/collapse-transition.vue'),
+  'mkl-codeblock': require('@/codeblock.vue'),
+  'mkl-collapse': require('@/collapse.vue'),
+  'mkl-heading': require('@/heading.vue'),
+  'mkl-inlinelist': require('@/inlinelist.vue'),
+  'mkl-input': require('@/input.vue'),
+  'mkl-list-item': require('@/list-item.vue'),
+  'mkl-list': require('@/list.vue'),
+  'mkl-nodes': require('@/nodes.vue'),
+  'mkl-paragraph': require('@/paragraph.vue'),
+  'mkl-quote': require('@/quote.vue'),
+  'mkl-scroll': require('@/scroll.vue'),
+  'mkl-section': require('@/section.vue'),
+  'mkl-separator': require('@/separator.vue'),
+  'mkl-table': require('@/table.vue'),
+  'mkl-usages': require('@/usages.vue'),
+}
+
 const Renderer = {
+  components,
   themes: require('../themes'),
   install(Vue) {
     _Vue = Vue
-    Vue.component('collapse-transition', require('../temp/transitions/collapse-transition.vue'))
-    Vue.component('mkl-codeblock', require('../temp/codeblock.vue'))
-    Vue.component('mkl-collapse', require('../temp/collapse.vue'))
-    Vue.component('mkl-heading', require('../temp/heading.vue'))
-    Vue.component('mkl-inlinelist', require('../temp/inlinelist.vue'))
-    Vue.component('mkl-input', require('../temp/input.vue'))
-    Vue.component('mkl-list-item', require('../temp/list-item.vue'))
-    Vue.component('mkl-list', require('../temp/list.vue'))
-    Vue.component('mkl-nodes', require('../temp/nodes.vue'))
-    Vue.component('mkl-paragraph', require('../temp/paragraph.vue'))
-    Vue.component('mkl-quote', require('../temp/quote.vue'))
-    Vue.component('mkl-scroll', require('../temp/scroll.vue'))
-    Vue.component('mkl-section', require('../temp/section.vue'))
-    Vue.component('mkl-separator', require('../temp/separator.vue'))
-    Vue.component('mkl-table', require('../temp/table.vue'))
-    Vue.component('mkl-usages', require('../temp/usages.vue'))
+    for (const key in components) {
+      Vue.component(key, components[key])
+    }
   },
   embed(element, content = []) {
     if (!_Vue) {
@@ -29,7 +36,7 @@ const Renderer = {
         throw new Error('No vue constructor was found.')
       }
     }
-    if (!ASTNodes) ASTNodes = _Vue.extend(require('../temp/nodes.vue'))
+    if (!ASTNodes) ASTNodes = _Vue.extend(components['mkl-nodes'])
     new ASTNodes({ propsData: { content } }).$mount(element)
   }
 }

From e6c68d049f3f7dee005aa07d33d215502c98213e Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 16:02:02 +0800
Subject: [PATCH 26/30] add some adjustments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修复了一个 typo
2. 增加了一个“源代码仓库”按钮
---
 packages/dev-server/comp/edit.vue          | 7 +++++--
 packages/dev-server/comp/menu/command.json | 6 ++++++
 packages/dev-server/comp/menu/menus.json   | 8 ++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
index cca3ae5..7a7932b 100644
--- a/packages/dev-server/comp/edit.vue
+++ b/packages/dev-server/comp/edit.vue
@@ -163,9 +163,9 @@ module.exports = {
       } else if (this.dragging === 'right') {
         right = 'document'
         if (this.display.editor.show) {
-          right = 'editor'
+          left = 'editor'
         } else if (this.display.explorer.show) {
-          right = 'explorer'
+          left = 'explorer'
         } else return
       } else return
 
@@ -191,6 +191,9 @@ module.exports = {
   },
 
   methods: {
+    windowOpen(url) {
+      window.open(url)
+    },
     triggerArea(area) {
       this.display[area].show = !this.display[area].show
       if (this.display.editor.show) {
diff --git a/packages/dev-server/comp/menu/command.json b/packages/dev-server/comp/menu/command.json
index 8056d1d..04bf83c 100644
--- a/packages/dev-server/comp/menu/command.json
+++ b/packages/dev-server/comp/menu/command.json
@@ -40,6 +40,12 @@
     "name": "预览视图",
     "checked": "$display.document.show"
   },
+  {
+    "method": "windowOpen",
+    "arguments": "https://github.com/obstudio/Marklet",
+    "key": "open-repository",
+    "name": "源代码仓库"
+  },
   {
     "method": "executeTrigger",
     "arguments": "undo",
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menu/menus.json
index ea5bff0..f27d715 100644
--- a/packages/dev-server/comp/menu/menus.json
+++ b/packages/dev-server/comp/menu/menus.json
@@ -40,6 +40,14 @@
         "@separator",
         "@themes"
       ]
+    },
+    {
+      "key": "link",
+      "name": "链接",
+      "bind": "L",
+      "content": [
+        "open-repository"
+      ]
     }
   ]
 }

From 2f5b0a48deaea98160c8900ab6158997cc4718f2 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 21 Oct 2018 22:47:23 +0800
Subject: [PATCH 27/30] add some adjustments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. parse 命令增加了 -B 和 -p 选项
2. 支持 parser 传入 require_bound
3. 支持 mocro 使用工厂函数生成
---
 packages/cli/commands/parse.js  | 69 +++++++++++++++++++++++++++++----
 packages/cli/util.js            | 10 +++--
 packages/core/src/document.ts   |  4 +-
 packages/core/src/lexer.ts      |  6 ++-
 packages/parser/src/document.ts |  1 +
 packages/parser/src/index.ts    |  2 +
 packages/test/data/demo.mkl     | 27 ++++++++++++-
 7 files changed, 103 insertions(+), 16 deletions(-)

diff --git a/packages/cli/commands/parse.js b/packages/cli/commands/parse.js
index f95da36..c182286 100644
--- a/packages/cli/commands/parse.js
+++ b/packages/cli/commands/parse.js
@@ -1,30 +1,83 @@
 const fs = require('fs')
 const util = require('../util')
 const yaml = require('js-yaml')
+const chalk = require('chalk')
 const parser = require('@marklet/parser')
 
+function printNode(node, indent = 2, back = 1) {
+  const space = ' '.repeat(indent - 2 * back)
+  const prefix = '- '.repeat(back)
+  if (typeof node === 'string') {
+    return console.log(prefix + chalk.yellow(node))
+  } else if (node instanceof Array) {
+    return node.forEach((node, index) => {
+      if (node instanceof Array) {
+        printNode(node, indent + 2, back + 1)
+      } else {
+        process.stdout.write(space + '  '.repeat(index ? back : 1))
+        printNode(node, indent + 2, index ? 1 : back)
+      }
+    })
+  }
+  let firstLine = !node.type
+  if (node.type) {
+    console.log(chalk.greenBright('# ' + node.type))
+  }
+  for (const key in node) {
+    if (key === 'type') continue
+    if (firstLine) {
+      process.stdout.write(prefix)
+      firstLine = false
+    } else {
+      process.stdout.write(space + '  ')
+    }
+    process.stdout.write(chalk`{cyanBright ${key}}: `)
+    if (typeof node[key] === 'string') {
+      console.log(chalk.yellow(node[key]))
+    } else if (typeof node[key] !== 'object') {
+      console.log(chalk.magentaBright(node[key]))
+    } else {
+      process.stdout.write('\n')
+      if (node[key] instanceof Array) {
+        printNode(node[key], indent + 2 * back, 1)
+      } else {
+        process.stdout.write(space + '    ')
+        printNode(node[key], indent + 2 * back - 2, 0)
+      }
+    }
+  }
+}
+
 module.exports = program => program
   .command('parse [filepath]')
   .usage('[options] <filepath>')
   .description('Parse a marklet file into marklet AST.')
   .allowConfig()
-  .option('-f, --format [format]', 'the output format', 'json')
+  .option('-B, --no-bound', 'prevent from recording token bounds')
+  .option('-f, --format [format]', 'set the output format', 'json')
+  .option('-i, --indent [length]', 'set the indent length', 2)
+  .option('-p, --pretty', 'pretty printed (it overrides all other options)')
   .action(function(filepath = '') {
     const basePath = util.fullPath(filepath)
-    util.tryFindFile(filepath)
-    if (!fs.statSync(basePath).isFile()) {
-      util.handleError(filepath + ' is not a file.')
-    }
+    util.tryFindFile(filepath, true)
+    const indent = this.indent || 2
     const result = parser.parse({
       input: fs.readFileSync(basePath).toString(),
-      config: this.getConfig(),
+      config: {
+        ...this.getConfig(),
+        require_bound: this.bound && !this.pretty,
+      },
     })
+    if (this.pretty) {
+      result.forEach(node => printNode(node))
+      return
+    }
     switch (this.format || 'json') {
     case 'json':
-      console.log(JSON.stringify(result, null, 2))
+      console.log(JSON.stringify(result, null, indent))
       break
     case 'yaml':
-      console.log(yaml.safeDump(result))
+      console.log(yaml.safeDump(result, { indent }))
       break
     default:
       util.handleError(this.format + ' is not a supported format.')
diff --git a/packages/cli/util.js b/packages/cli/util.js
index 1bfd57f..2413aa4 100644
--- a/packages/cli/util.js
+++ b/packages/cli/util.js
@@ -11,12 +11,16 @@ function handleError(message) {
   process.exit(1)
 }
 
-function tryFindFile(filepath) {
-  if (fs.existsSync(fullPath(filepath))) return
+function tryFindFile(filepath, forceFile = false) {
+  const basePath = fullPath(filepath)
+  const isExist = fs.existsSync(basePath)
+  if (isExist && (!forceFile || fs.statSync(basePath).isFile())) return
   if (!filepath) {
     handleError('a filepath is required.')
+  } else if (!isExist) {
+    handleError(chalk`file {cyanBright ${filepath}} was not found.`)
   } else {
-    handleError(`file ${filepath} was not found.`)
+    handleError(chalk`{cyanBright ${filepath}} is not a file.`)
   }
 }
 
diff --git a/packages/core/src/document.ts b/packages/core/src/document.ts
index 407ee89..e69d591 100644
--- a/packages/core/src/document.ts
+++ b/packages/core/src/document.ts
@@ -54,8 +54,8 @@ export class DocumentLexer extends Lexer<TokenLike[]> {
     this.entrance = options.entrance || 'main'
     this.inlineEntrance = options.inlineEntrance || 'text'
     this.requireBound = !!options.requireBound
-
-    this.macros = new MacroMap(options.macros || {})
+    this.macros = new MacroMap(options.macros || {}, this.config)
+    
     for (const key in contexts) {
       const context = contexts[key]
       if (context instanceof Array) {
diff --git a/packages/core/src/lexer.ts b/packages/core/src/lexer.ts
index 69e9067..eba9603 100644
--- a/packages/core/src/lexer.ts
+++ b/packages/core/src/lexer.ts
@@ -2,7 +2,8 @@ export type StringLike = string | RegExp
 export type TokenLike = string | LexerToken
 
 export type LexerConfig = Record<string, any>
-export type LexerMacros<S extends StringLike = StringLike> = Record<string, S>
+export type LexerMacrosLiteral = Record<string, StringLike>
+export type LexerMacros = LexerMacrosLiteral | ((config: LexerConfig) => LexerMacrosLiteral)
 
 export interface LexerToken {
   type?: string
@@ -71,7 +72,8 @@ export interface LexerRegexRule<
 export class MacroMap {
   private data: Record<string, { regex: RegExp, macro: string }> = {}
 
-  constructor(macros: Record<string, StringLike> = {}) {
+  constructor(macros: LexerMacros = {}, config: LexerConfig = {}) {
+    if (typeof macros === 'function') macros = macros(config)
     for (const key in macros) {
       this.data[key] = {
         regex: new RegExp(`{{${key}}}`, 'g'),
diff --git a/packages/parser/src/document.ts b/packages/parser/src/document.ts
index 572c8e8..ad126eb 100644
--- a/packages/parser/src/document.ts
+++ b/packages/parser/src/document.ts
@@ -184,6 +184,7 @@ export default class MarkletDocumentLexer extends DocumentLexer {
         eol: /[ \t]*(?:\n|$)/,
         cell: /\S(?: {0,3}\S)*/,
       },
+      requireBound: config.require_bound,
       config: {
         tab_indent: 2,
         header_align: true,
diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts
index b4d73b6..7cd1e68 100644
--- a/packages/parser/src/index.ts
+++ b/packages/parser/src/index.ts
@@ -9,6 +9,8 @@ interface MarkletLexerConfig extends LexerConfig {
   allow_section?: boolean
   /** default language in code block */
   default_language?: string
+  /** assign start/end to tokens */
+  require_bound?: boolean
 }
 
 export interface ParseOptions {
diff --git a/packages/test/data/demo.mkl b/packages/test/data/demo.mkl
index c6a57d5..612a5ea 100644
--- a/packages/test/data/demo.mkl
+++ b/packages/test/data/demo.mkl
@@ -2,4 +2,29 @@
 
 text **bold** `123`
 
-> quote
\ No newline at end of file
+> quote
+
+```c
+int code = 2;
+```
+
+-.-.-
+
++ an + inline + list
+
+^^ Section 1.1
+
+- item 1
+- item 2
+  - item 2.1
+    - item 2.1.1
+- item 3
+  1. item 3.1
+  2. item 3.2
+
+## centered #
+
+=    *<    >
+*居中*    左对齐    _右对齐_
+看上去    -很-    正确
+OH    YEAH    ♪    看不到我吧

From c4605c289bf22523958113589b587dcb5e1b7f8b Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Sun, 21 Oct 2018 23:35:01 +0800
Subject: [PATCH 28/30] fix

---
 packages/dev-server/src/client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 4b3d0e2..82c9ff6 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -52,7 +52,7 @@ const client = new class MarkletClient {
       while (this.msgQueue.length > 0 && this.ws.readyState === 1) {
         this.ws.send(this.msgQueue.shift())
       }
-    }, 1000)
+    }, this._interval)
   }
 
   createWebSocket() {

From bed10836e1ed526fadb8f4cba3ff0d2ce36958f2 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Mon, 22 Oct 2018 00:20:55 +0800
Subject: [PATCH 29/30] adjustment

---
 package.json                       |  6 +++---
 packages/dev-server/comp/editor.js | 27 ++++++++++++++-------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index e4a94b4..8050427 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "node build/build -r && node packages/cli -m edit",
+    "start": "node build/build -r && node packages/cli edit",
     "bootstrap": "lerna bootstrap --no-ci",
     "build": "tsc -b && node build/build -sr",
     "build:prod": "tsc -b && node build/build -psr",
@@ -23,7 +23,7 @@
     "chalk": "^2.4.1",
     "cheerio": "^1.0.0-rc.2",
     "commander": "^2.19.0",
-    "electron": "^3.0.4",
+    "electron": "^3.0.5",
     "eslint": "^5.7.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
     "fast-deep-equal": "^2.0.1",
@@ -35,6 +35,6 @@
     "sfc2js": "^4.0.0-beta.1",
     "tslint": "^5.11.0",
     "typescript": "^3.1.3",
-    "webpack": "^4.21.0"
+    "webpack": "^4.22.0"
   }
 }
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 7da34de..2dc2aa2 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -5,7 +5,7 @@ module.exports = {
     nodes: [],
     origin: '',
     source: '',
-    loading: 3,
+    loading: 1,
     changed: false,
     config: defaultConfig,
   }),
@@ -38,16 +38,6 @@ module.exports = {
     this.$eventBus.$on('server.config', (config) => {
       this.config = Object.assign(defaultConfig, config)
     })
-
-    this.$eventBus.$on('monaco.loaded', (monaco) => {
-      const model = monaco.editor.createModel(this.source, 'marklet')
-      model.onDidChangeContent(() => this.checkChange())
-      const nodes = this.nodes
-      this.nodes = []
-      this.$nextTick(() => this.nodes = nodes)
-      this._model = model
-      this.loading ^= 1
-    })
   },
 
   mounted() {
@@ -60,6 +50,13 @@ module.exports = {
     })
 
     this.$eventBus.$on('monaco.loaded', (monaco) => {
+      const model = monaco.editor.createModel(this.source, 'marklet')
+      model.onDidChangeContent(() => this.checkChange())
+      const nodes = this.nodes
+      this.nodes = []
+      this.$nextTick(() => this.nodes = nodes)
+      this._model = model
+
       if (this._editor) return
       this._editor = monaco.editor.create(this.$refs.editor, {
         model: null,
@@ -76,7 +73,7 @@ module.exports = {
         this.row = event.position.lineNumber
         this.column = event.position.column
       })
-      this.loading ^= 2
+      this.loading = 0
     })
 
     addEventListener('beforeunload', () => {
@@ -86,7 +83,11 @@ module.exports = {
 
   methods: {
     openFile(doc) {
-      this.source = doc // TODO: need more consideration as another listener monaco.loaded exists
+      if (this.loading) {
+        this.source = doc
+      } else {
+        this._model.setValue(doc)
+      }
     },
     save() {
       this.$eventBus.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl

From 52274ac5c42e7cd2ee6d2d1f62ec642d0409fc6f Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 02:00:24 +0800
Subject: [PATCH 30/30] cli: enable single marklet file

---
 packages/cli/program.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index 581f65e..699b6ef 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -7,6 +7,7 @@ const { DEFAULT_PORT } = require('@marklet/dev-server')
 
 const JS_TYPES = ['.json', '.js']
 const YAML_TYPES = ['.yml', '.yaml']
+const MARK_TYPES = ['.mkl', '.md']
 const ALL_TYPES = [
   ...JS_TYPES,
   ...YAML_TYPES,
@@ -53,11 +54,15 @@ Object.assign(Object.getPrototypeOf(program), {
   getOptions(filepath = '', forced = true) {
     filepath = path.resolve(filepath)
     let basePath = path.resolve(process.cwd(), filepath)
-    let options = {}
+    let options = { sourceType: 'project' }
     try {
       util.tryFindFile(filepath)
       if (fs.statSync(basePath).isFile()) {
-        options = loadFromFile(basePath)
+        if (!MARK_TYPES.includes(path.extname(basePath))) {
+          Object.assign(options, loadFromFile(basePath))
+        } else {
+          options.sourceType = 'file'
+        }
       } else {
         let matchFound = false
         basePath = path.join(basePath, 'marklet')
@@ -65,7 +70,7 @@ Object.assign(Object.getPrototypeOf(program), {
           const filename = basePath + type
           if (!fs.existsSync(filename)) continue
           if (fs.statSync(filename).isFile()) {
-            options = loadFromFile(filename)
+            Object.assign(options, loadFromFile(filename))
             matchFound = true
             break
           }