diff --git a/README.md b/README.md index a577765b..f74247be 100644 --- a/README.md +++ b/README.md @@ -49,13 +49,14 @@ + 样式风格：Markdown 使用 GitHub 风格样式和特性 + 数据仓库：可定义多个数据位置以便文档分类 + 外链转换：将外链或 BASE64 图片转换为本地图片：`Ctrl + Shift + 单击图片` `Ctrl + Alt + L` 转换所有外链图片到本地 -+ HTML 解析：可以直接在文档里面使用 HTML 代码，也可以使用快捷键 `Ctrl + B + V` 粘贴复制 HTMl 为 Markdown ++ HTML 解析：可以直接在文档里面使用 HTML 代码，也可以使用快捷键 `Ctrl + B + V` 粘贴复制 HTML 为 Markdown + docx 导出：后端使用 pandoc 做转换器 + TOC 支持：生成 TOC 在需要生成目录的地方写入 `[toc]{type: "ol", level: [1,2,3]}` 即可，，示例见 FEATURE.md + 嵌入小工具：文档支持内嵌 HTML 小工具，示例见 FEATURE.md + 嵌入 Plantuml 图形：需要安装 Java，graphviz ，示例见 FEATURE.md + 嵌入 drawio 图形：文档支持内嵌 drawio 图形，示例见 FEATURE.md + 嵌入 ECharts 图形：在文档中嵌入 Echarts 图形，示例见 FEATURE.md ++ 嵌入 Mermaid 图形：在文档中嵌入 Mermaid 图形，示例见 FEATURE.md + 元素属性书写：可自定义元素的任意属性，示例见 FEATURE.md + 表格解析增强：表格支持表格标题多行文本，列表等特性，示例见 FEATURE.md @@ -147,7 +148,7 @@ yarn run start ## 更新日志 [最新发布](https://github.com/purocean/yn/releases) -### [v2.0.0-beta8.4](https://github.com/purocean/yn/releases/tag/v2.0.0-beta8.4) 2019-08-28 +### [v2.0.0-beta9.0](https://github.com/purocean/yn/releases/tag/v2.0.0-beta9.0) 2019-09-02 1. 增加 2.0 计划 1. Electron 打包 1. 增加 HTML 小工具渲染 diff --git a/frontend/package.json b/frontend/package.json index 2e812039..6cc2eb0e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,6 +21,7 @@ "markdown-it-katex": "^2.0.3", "markdown-it-multimd-table": "^3.1.3", "markdown-it-task-lists": "^2.1.1", + "mermaid": "^8.2.6", "mime-types": "^2.1.24", "monaco-editor": "^0.17.1", "normalize.css": "^8.0.1", diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue index d3b98ed8..44ce6986 100644 --- a/frontend/src/components/Editor.vue +++ b/frontend/src/components/Editor.vue @@ -3,7 +3,7 @@ { + let value = model.getValue() + const eol = model.getEOL() + if (!value.endsWith(eol)) { + value += eol + model.setValue(value) + } + this.$emit('change', { uri, value }) + }) + } + + // TODO 不用 set value 保留编辑状态 + model.setValue(value) + + // TODO 缓存 model + models[uri] = model + + return model + }, recordKeys (e) { if (e.type === 'keydown') { keys[e.key] = true @@ -56,9 +75,12 @@ export default { }) }, initMonaco () { + window.supportedExtensions = window.monaco.languages.getLanguages().flatMap(x => x.extensions) + + const model = this.getModel('yank-note://system/blank.md', '') + this.editor = window.monaco.editor.create(window.document.getElementById('editor'), { - value: this.value, - language: 'markdown', + value: '', theme: 'vs-dark', fontSize: 18, wordWrap: false, @@ -73,23 +95,14 @@ export default { scrollbar: { vertical: 'hidden', verticalScrollbarSize: 0 - } + }, + model, }) this.editor.onDidChangeCursorSelection(e => { this.$emit('change-document', this.getDucumentInfo()) }) - this.editor.onDidChangeModelContent(e => { - let val = this.getValue() - const eol = this.editor.getModel().getEOL() - if (!val.endsWith(eol)) { - val += eol - this.setValue(val) - } - this.$emit('change', val) - }) - this.editor.onDidScrollChange(e => { const line = this.editor.getVisibleRanges()[0].startLineNumber const top = this.editor.getScrollTop() @@ -248,11 +261,12 @@ export default { getValue () { return this.editor.getModel().getValue(window.monaco.editor.DefaultEndOfLine.LF) }, - setValue (val) { - this.editor.getModel().setValue(val) + setModel (uri, value) { + const model = this.getModel(uri, value || '') + this.editor.setModel(model) }, replaceValue (oldValue, newValue) { - this.setValue(this.getValue().replace(oldValue, newValue)) + this.editor.getModel().setValue(this.getValue().replace(oldValue, newValue)) }, getDucumentInfo () { const selection = this.editor.getSelection() @@ -269,7 +283,7 @@ export default { const isWrapping = this.editor.getConfiguration().wrappingInfo.isViewportWrapping this.editor.updateOptions({ wordWrap: !isWrapping }) } - } + }, } diff --git a/frontend/src/components/Preview.vue b/frontend/src/components/Preview.vue index 6f958e4a..8fe42683 100644 --- a/frontend/src/components/Preview.vue +++ b/frontend/src/components/Preview.vue @@ -57,6 +57,7 @@ import SourceLinePlugin from '../plugins/SourceLinePlugin' import LinkTargetPlugin from '../plugins/LinkTargetPlugin' import DrawioPlugin from '../plugins/DrawioPlugin' import PlantumlPlugin from '../plugins/PlantumlPlugin' +import MermaidPlugin from '../plugins/MermaidPlugin' import file from '@/lib/file' import env from '@/lib/env' @@ -91,6 +92,7 @@ const markdown = Markdown({ .use(MultimdTable, { enableMultilineRows: true }) .use(MarkdownItToc) .use(MarkdownItECharts) + .use(MermaidPlugin) export default { name: 'xview', @@ -115,13 +117,18 @@ export default { }, 1000, { leading: true }) this.render = _.debounce(() => { - this.$refs.view.innerHTML = markdown.render(this.replaceRelativeLink(this.currentContent)) - MarkdownItECharts.update() + // 编辑非 markdown 文件预览直接显示代码 + const content = (this.filePath || '').endsWith('.md') + ? this.currentContent + : '```' + file.extname(this.fileName || '').replace(/^\./, '') + '\n' + this.currentContent + '```' + this.$refs.view.innerHTML = markdown.render(this.replaceRelativeLink(content)) this.runAppletScriptDebounce() this.initDrawio() this.updateOutline() this.updateTodoCount() this.updatePlantumlDebounce() + MarkdownItECharts.update() + MermaidPlugin.update() for (let ele of document.querySelectorAll('code[class^="language-"]')) { HighlightLineNumber.lineNumbersBlock(ele) @@ -282,7 +289,6 @@ export default { env.require && env.require('opn')(link.href) e.preventDefault() e.stopPropagation() - return } } @@ -416,6 +422,7 @@ export default { background: #303133; } + .markdown-body /deep/ div.mermaid, .markdown-body /deep/ div.drawio-wrapper, .markdown-body /deep/ input, .markdown-body /deep/ img @@ -424,6 +431,7 @@ export default { filter: brightness(70%); } + .markdown-body /deep/ div.mermaid:hover, .markdown-body /deep/ div.drawio-wrapper:hover, .markdown-body /deep/ img:hover { @@ -683,4 +691,8 @@ button:hover { .view .hljs-ln td.hljs-ln-code { padding-left: 10px; } + +.view .mermaid { + background: #fff; +} diff --git a/frontend/src/components/TreeNode.vue b/frontend/src/components/TreeNode.vue index b2429268..803f9a14 100644 --- a/frontend/src/components/TreeNode.vue +++ b/frontend/src/components/TreeNode.vue @@ -43,6 +43,7 @@