From d209a4158fbaae147f33f8cb6b30599e6e6799b9 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sun, 12 Jul 2020 13:24:10 -0400
Subject: [PATCH] feat: draw.io code insert + preview (wip)

---
 client/components/editor.vue                  |  2 +-
 client/components/editor/editor-markdown.vue  |  9 ++++++-
 .../components/editor/editor-modal-drawio.vue | 25 +++++++++++--------
 client/themes/default/scss/app.scss           |  4 +++
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/client/components/editor.vue b/client/components/editor.vue
index 0a6c61e3..15311e9b 100644
--- a/client/components/editor.vue
+++ b/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')
diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 895e0bd8..286fad7f 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/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
       }
     })
 
diff --git a/client/components/editor/editor-modal-drawio.vue b/client/components/editor/editor-modal-drawio.vue
index aafae1cd..d05319d2 100644
--- a/client/components/editor/editor-modal-drawio.vue
+++ b/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',
-                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
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index a4dcbdd9..006203e3 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -581,6 +581,10 @@
     }
   }
 
+  pre.diagram {
+    margin-top: 1rem;
+  }
+
   // ---------------------------------
   // TASK LISTS
   // ---------------------------------