feat: draw.io code insert + preview (wip)

This commit is contained in:
NGPixel 2020-07-12 13:24:10 -04:00
parent b2ff064d34
commit d209a4158f
4 changed files with 28 additions and 12 deletions

View File

@ -44,7 +44,7 @@
v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') mdi-close
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }}
v-divider.ml-3(vertical)
v-content
v-main
component(:is='currentEditor', :save='save')
editor-modal-properties(v-model='dialogProps')
editor-modal-editorselect(v-model='dialogEditorSelector')

View File

@ -272,7 +272,9 @@ const md = new MarkdownIt({
linkify: true,
typography: true,
highlight(str, lang) {
if (['mermaid', 'plantuml'].includes(lang)) {
if (lang === 'diagram') {
return `<pre class="diagram">` + Buffer.from(str, 'base64').toString() + `</pre>`
} else 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>`
@ -766,6 +768,11 @@ export default {
content: `[${opts.text}](${opts.path})`
})
break
case 'DIAGRAM':
this.insertAtCursor({
content: '```diagram\n' + opts.text + '\n```'
})
break
}
})

View File

@ -2,7 +2,7 @@
v-card.editor-modal-drawio.animated.fadeIn(flat, tile)
iframe(
ref='drawio'
src='https://embed.diagrams.net/?embed=1&proto=json&spin=1&saveAndExit=0'
src='https://embed.diagrams.net/?embed=1&proto=json&spin=1&saveAndExit=1&noSaveBtn=1&noExitBtn=0'
frameborder='0'
)
</template>
@ -11,7 +11,7 @@
import { sync, get } from 'vuex-pathify'
const xmlTest = `<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2020-07-10T23:41:09.492Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.61" etag="nuFLQDTKlZwSpOz4sG5q" version="13.4.2">
<mxfile version="13.4.2">
<diagram id="SgbkCjxR32CZT1FvBvkp" name="Page-1">
<mxGraphModel dx="2062" dy="1123" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
@ -29,7 +29,7 @@ const xmlTest = `<?xml version="1.0" encoding="UTF-8"?>
export default {
data() {
return {
content: ''
}
},
computed: {
@ -59,7 +59,6 @@ export default {
this.send({
action: 'load',
autosave: 0,
saveAndExit: '0',
modified: 'unsavedChanges',
xml: xmlTest,
title: this.$store.get('page/title')
@ -67,18 +66,24 @@ export default {
break
}
case 'save': {
console.info(msg)
if (msg.exit) {
this.close()
} else {
this.send({
action: 'status',
messageKey: 'allChangesSaved',
modified: false
action: 'export',
format: 'xmlsvg'
})
}
break
}
case 'export': {
const svgDataStart = msg.data.indexOf('base64,') + 7
this.$root.$emit('editorInsert', {
kind: 'DIAGRAM',
text: msg.data.slice(svgDataStart)
// text: msg.xml.replace(/ agent="(.*?)"/, '').replace(/ host="(.*?)"/, '').replace(/ etag="(.*?)"/, '')
})
this.close()
break
}
case 'exit': {
this.close()
break

View File

@ -581,6 +581,10 @@
}
}
pre.diagram {
margin-top: 1rem;
}
// ---------------------------------
// TASK LISTS
// ---------------------------------