Merge branch 'release/1.17.0'

README.md

@@ -66,6 +66,7 @@
     + `Ctrl + J` 连接行 join lines
     + `Ctrl + K, Ctrl + U` 转换大写
     + `Ctrl + K, Ctrl + L` 转换小写
+    + `Ctrl + Alt + R` 在内置终端里面运行选中内容
 
 ## 功能
 + 同步预览滚动，实现得较粗糙
@@ -75,19 +76,20 @@
 + 列表自动补全
 + 粘贴剪切板里面的图片
 + 添加附件到文档
-+ 运行 PHP，nodejs，Python，bash 代码，代码块第一行需要包含以 `--run--` 字符串，示例见下面截图，当然需要安装相关环境
++ 运行 PHP，nodejs，Python，bash 代码，**代码块第一行需要包含以 `--run--` 字符串，示例见下面截图，当然需要安装相关环境**
 + 开启了 HTML 解析，可以直接在文档里面使用 HTML 代码
 + 待办进度条
 + 快速跳转文件，全文搜索文件内容
 + 多仓库切换
 + 生成 TOC 在需要生成目录的地方写入 `[toc]{type: "ol", level: [1,2,3]}` 即可
-+ docx 格式导出，需要安装 [pandoc](https://pandoc.org/)
++ docx 格式导出，**需要安装 [pandoc](https://pandoc.org/)**
++ ECharts 图形支持装 [ECharts](https://echarts.baidu.com/) **Js 代码块第一行需要包含以 `--echarts--` 字符串，示例见下面截图**
 + markdown 编辑器 [monaco-editor](https://github.com/Microsoft/monaco-editor)
 + markdown 解析 [markdown-it](https://github.com/markdown-it/markdown-it)
 + GitHub 风格样式和特性 [GitHub Flavored Markdown Spec](https://github.github.com/gfm/)
 + 待办列表 [GitHub-style task lists](https://github.com/revin/markdown-it-task-lists)
 + mermaid 图形 [mermaid](https://github.com/knsv/mermaid)
-+ Plantuml 图形，需要安装 Java，graphviz [markdown-it-plantuml](https://github.com/gmunguia/markdown-it-plantuml)
++ Plantuml 图形，**需要安装 Java，graphviz [markdown-it-plantuml](https://github.com/gmunguia/markdown-it-plantuml)**
 + katex 公式解析 [markdown-it-katex](https://github.com/waylonflinn/markdown-it-katex)
 + 元素属性书写 [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs)
 + 表格解析增强，支持表格标题多行文本，列表等特性 [markdown-it-multimd-table](https://github.com/RedBug312/markdown-it-multimd-table)
@@ -129,6 +131,7 @@
 + [x] 状态栏
 + [x] toc 生成
 + [x] 内置终端
++ [x] EChart 图表
 + [ ] 代码块渲染增加行号
 + [ ] 信息流，定时任务
 + [ ] 标签支持
@@ -143,5 +146,4 @@
 ![截图](./1.png)
 ![截图](./2.png)
 ![截图](./3.png)
-![截图](./5.gif)
-![截图](./6.png)
+![截图](./4.gif)

frontend/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "crypto-js": "^3.1.9-1",
     "dayjs": "^1.6.6",
+    "echarts": "^4.1.0",
     "github-markdown-css": "^2.10.0",
     "highlight.js": "^9.12.0",
     "lodash": "^4.17.10",

frontend/src/components/EChartsPlugin.js

@@ -0,0 +1,85 @@
+import echarts from 'echarts'
+import CryptoJS from 'crypto-js'
+
+const renderHtml = code => {
+  const id = `echart-${CryptoJS.MD5(code).toString()}-${Math.random().toString(36).substr(2)}`
+
+  return `<div class="echarts" id="${id}" data-code="${encodeURIComponent(code)}"></div>`
+}
+
+const EChartsPlugin = md => {
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules)
+
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx]
+    const code = token.content.trim()
+    if (token.info === 'js' && code.split(/\n/)[0].trim().includes('--echarts--')) {
+      return renderHtml(code)
+    }
+
+    return temp(tokens, idx, options, env, slf)
+  }
+}
+
+let charts = {}
+
+EChartsPlugin.update = (theme = 'dark', animation = undefined, renderImg = false) => {
+  Object.values(charts).forEach(x => x.chart.dispose())
+  charts = {}
+
+  for (let ele of document.getElementsByClassName('echarts')) {
+    try {
+      const id = ele.getAttribute('id')
+      const code = ele.dataset['code']
+
+      if (code) {
+        const chart = echarts.init(ele, theme)
+        // eslint-disable-next-line
+        eval(`(${decodeURIComponent(code)})(chart)`)
+
+        if (animation !== undefined) {
+          chart.setOption({animation})
+        }
+
+        let img = null
+
+        if (renderImg) {
+          img = new Image()
+          img.width = ele.clientWidth
+          img.height = ele.clientHeight
+          img.src = chart.getDataURL()
+        }
+
+        charts[id] = { chart, img }
+      }
+    } catch (error) {
+      ele.innerText = error
+    }
+  }
+}
+
+EChartsPlugin.preparePrint = () => {
+  EChartsPlugin.update('light', false, true)
+
+  for (let ele of document.getElementsByClassName('echarts')) {
+    while (ele.firstChild) {
+      ele.firstChild.remove()
+    }
+
+    const id = ele.getAttribute('id')
+
+    if (charts[id] && charts[id].img) {
+      ele.appendChild(charts[id].img)
+    }
+  }
+}
+
+window.addEventListener('resize', () => {
+  Object.values(charts).forEach(x => x.chart.resize())
+})
+
+window.addEventListener('beforeprint', () => {
+  EChartsPlugin.update('light', false)
+})
+
+export default EChartsPlugin

frontend/src/components/Editor.vue

@@ -103,6 +103,10 @@ export default {
         this.insert(dayjs().format('HH:mm:ss'))
       })
 
+      this.editor.addCommand(KM.CtrlCmd | KM.Alt | KC.KEY_R, () => {
+        this.$bus.emit('run-in-terminal', this.editor.getModel().getValueInRange(this.editor.getSelection()))
+      })
+
       this.editor.addCommand(KM.CtrlCmd | KC.Enter, () => {
         this.insert(this.editor.getModel().getEOL())
       })

frontend/src/components/View.vue

@@ -46,6 +46,7 @@ import MultimdTable from 'markdown-it-multimd-table'
 import Highlight from 'highlight.js'
 
 import MarkdownItToc from './TocPlugin'
+import MarkdownItECharts from './EChartsPlugin'
 import RunPlugin from './RunPlugin'
 import SourceLinePlugin from './SourceLinePlugin'
 import LinkTargetPlugin from './LinkTargetPlugin'
@@ -95,6 +96,7 @@ export default {
         .use(LinkTargetPlugin)
         .use(MultimdTable, {enableMultilineRows: true})
         .use(MarkdownItToc)
+        .use(MarkdownItECharts)
     }
   },
   mounted () {
@@ -105,6 +107,7 @@ export default {
     this.render = _.debounce(() => {
       this.$refs.view.innerHTML = this.markdown.render(this.replaceRelativeLink(this.value))
       MermaidPlugin.update()
+      MarkdownItECharts.update()
       this.updateOutline()
       this.updateTodoCount()
       this.updatePlantumlDebounce()
@@ -239,6 +242,8 @@ export default {
       }
     },
     convertFile (type) {
+      MarkdownItECharts.preparePrint()
+
       const baseUrl = location.origin + location.pathname.substring(0, location.pathname.lastIndexOf('/')) + '/'
 
       this.convert = {
@@ -246,6 +251,7 @@ export default {
         html: this.$refs.view.outerHTML.replace(/src="api/g, `src="${baseUrl}api`),
         type
       }
+      MarkdownItECharts.update()
       setTimeout(() => {
         this.$refs.convertForm.submit()
       }, 300)
@@ -267,6 +273,13 @@ export default {
 }
 </script>
 
+<style>
+.echarts {
+  width: 100%;
+  height: 350px;
+}
+</style>
+
 <style scoped>
 .markdown-body {
   position: relative;

frontend/src/components/Xterm.vue

@@ -19,6 +19,12 @@ export default {
   name: 'xterm',
   created () {
     window.runInXterm = this.runInXterm
+    this.$bus.on('run-in-terminal', this.handleRunInXterm)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.fitXterm)
+    window.runInXterm = null
+    this.$bus.off('run-in-terminal', this.handleRunInXterm)
   },
   methods: {
     init () {
@@ -67,6 +73,9 @@ export default {
     focus () {
       xterm.focus()
     },
+    handleRunInXterm (code) {
+      this.runInXterm(null, code, false)
+    },
     runInXterm (language, code, exit = true) {
       this.$bus.emit('toggle-xterm', true)
       this.$nextTick(() => {
@@ -81,16 +90,22 @@ export default {
           js: {start: 'node', exit: '.exit', eol: '\n'}
         }
 
-        if (map[language]) {
+        const run = (code, eol) => {
+          code.split('\n').forEach((x, i) => {
+            this.input(x.trim())
+            this.input(eol)
+          })
+        }
+
+        if (!language) {
+          run(code, '\n')
+        } else if (map[language]) {
           this.input(map[language].start)
           this.input(map[language].eol)
 
           // 延迟一下等待子进程启动
           setTimeout(() => {
-            code.split('\n').forEach((x, i) => {
-              this.input(x.trim())
-              this.input(map[language].eol)
-            })
+            run(code, map[language].eol)
 
             if (exit) {
               this.input(map[language].exit)
@@ -102,10 +117,6 @@ export default {
         }
       })
     }
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.fitXterm)
-    window.runInXterm = null
   }
 }
 </script>

frontend/src/pages/Home.vue

@@ -323,6 +323,10 @@ export default {
 }
 
 @media print {
+  .content {
+    width: 100%;
+  }
+
   .editor, .header, .tree, .status-bar {
     display: none;
   }

frontend/yarn.lock

@@ -2065,6 +2065,12 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+echarts@^4.1.0:
+  version "4.1.0"
+  resolved "http://registry.npm.taobao.org/echarts/download/echarts-4.1.0.tgz#d588c95f73c1a9928b9c73d5b769751c3185bcdc"
+  dependencies:
+    zrender "4.0.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6630,3 +6636,7 @@ yargs@~3.10.0:
 yeast@0.1.2:
   version "0.1.2"
   resolved "http://registry.npm.taobao.org/yeast/download/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+zrender@4.0.4:
+  version "4.0.4"
+  resolved "http://registry.npm.taobao.org/zrender/download/zrender-4.0.4.tgz#910e60d888f00c9599073f23758dd23345fe48fd"