liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: plantuml in markdown preview

Browse Source
This commit is contained in:
NGPixel
2020-05-08 22:51:32 -04:00
parent cc9f022051
commit 53da387082
7 changed files with 224 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/components/editor/editor-markdown.vue
View File

@@ -119,7 +119,7 @@
span {{$t('editor:markup.insertAssets')}}
v-tooltip(right, color='teal')
template(v-slot:activator='{ on }')
v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)', disabled).mx-0
v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
span {{$t('editor:markup.insertBlock')}}
v-tooltip(right, color='teal')
@@ -222,6 +222,7 @@ import mdImsize from 'markdown-it-imsize'
import katex from 'katex'
import 'katex/dist/contrib/mhchem'
import twemoji from 'twemoji'
import plantuml from './markdown/plantuml'
// Prism (Syntax Highlighting)
import Prism from 'prismjs'
@@ -257,7 +258,11 @@ const md = new MarkdownIt({
linkify: true,
typography: true,
highlight(str, lang) {
return `<pre class="line-numbers"><code class="language-${lang}">${_.escape(str)}</code></pre>`
if (['mermaid', 'plantuml'].includes(lang)) {
return `<pre class="codeblock-${lang}"><code>${_.escape(str)}</code></pre>`
} else {
return `<pre class="line-numbers"><code class="language-${lang}">${_.escape(str)}</code></pre>`
}
}
})
.use(mdAttrs, {
@@ -293,6 +298,13 @@ md.renderer.rules.paragraph_open = injectLineNumbers
md.renderer.rules.heading_open = injectLineNumbers
md.renderer.rules.blockquote_open = injectLineNumbers
// ========================================
// PLANTUML
// ========================================
// TODO: Use same options as defined in backend
plantuml.init(md, {})
// ========================================
// KATEX
// ========================================
@@ -542,7 +554,7 @@ export default {
})
},
renderMermaidDiagrams () {
document.querySelectorAll('.editor-markdown-preview pre.line-numbers > code.language-mermaid').forEach(elm => {
document.querySelectorAll('.editor-markdown-preview pre.codeblock-mermaid > code').forEach(elm => {
mermaidId++
const mermaidDef = elm.innerText
const mmElm = document.createElement('div')