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

client/components/editor.vue

@@ -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')

client/components/editor/editor-markdown.vue

@@ -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
       }
     })
 

client/components/editor/editor-modal-drawio.vue

@@ -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',
+                action: 'export',
-                messageKey: 'allChangesSaved',
+                format: 'xmlsvg'
-                modified: false
               })
             }
             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

client/themes/default/scss/app.scss

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