feat: draw.io editor dialog (wip)

client/components/editor.vue

@@ -84,7 +84,8 @@ export default {
     editorModalUnsaved: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-unsaved.vue'),
     editorModalMedia: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-media.vue'),
     editorModalBlocks: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-blocks.vue'),
-    editorModalConflict: () => import(/* webpackChunkName: "editor-conflict", webpackMode: "lazy" */ './editor/editor-modal-conflict.vue')
+    editorModalConflict: () => import(/* webpackChunkName: "editor-conflict", webpackMode: "lazy" */ './editor/editor-modal-conflict.vue'),
+    editorModalDrawio: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-drawio.vue')
   },
   props: {
     locale: {

client/components/editor/editor-markdown.vue

@@ -139,7 +139,7 @@
           span {{$t('editor:markup.insertVideoAudio')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalDrawio`)').mx-0
               v-icon mdi-chart-multiline
           span {{$t('editor:markup.insertDiagram')}}
         v-tooltip(right, color='teal')

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

@@ -0,0 +1,120 @@
+<template lang='pug'>
+  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'
+      frameborder='0'
+    )
+</template>
+
+<script>
+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">
+  <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>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="5gE3BTvRYS_8FoJnOusC-1" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+          <mxGeometry x="380" y="530" width="80" height="80" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+`
+
+export default {
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    editorKey: get('editor/editorKey'),
+    activeModal: sync('editor/activeModal')
+  },
+  methods: {
+    close () {
+      this.activeModal = ''
+    },
+    overwriteAndClose() {
+      this.$root.$emit('overwriteEditorContent')
+      this.$root.$emit('resetEditorConflict')
+      this.close()
+    },
+    send (msg) {
+      this.$refs.drawio.contentWindow.postMessage(JSON.stringify(msg), '*')
+    },
+    receive (evt) {
+      if (evt.frame === null || evt.source !== this.$refs.drawio.contentWindow || evt.data.length < 1) {
+        return
+      }
+      try {
+        const msg = JSON.parse(evt.data)
+        switch (msg.event) {
+          case 'init': {
+            this.send({
+              action: 'load',
+              autosave: 0,
+              saveAndExit: '0',
+              modified: 'unsavedChanges',
+              xml: xmlTest,
+              title: this.$store.get('page/title')
+            })
+            break
+          }
+          case 'save': {
+            console.info(msg)
+            if (msg.exit) {
+              this.close()
+            } else {
+              this.send({
+                action: 'status',
+                messageKey: 'allChangesSaved',
+                modified: false
+              })
+            }
+            break
+          }
+          case 'exit': {
+            this.close()
+            break
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  },
+  async mounted () {
+    window.addEventListener('message', this.receive)
+  },
+  beforeDestroy () {
+    window.removeEventListener('message', this.receive)
+  }
+}
+</script>
+
+<style lang='scss'>
+.editor-modal-drawio {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(255,255,255, 1) !important;
+  overflow: hidden;
+
+  > iframe {
+    width: 100%;
+    height: 100vh;
+    border: 0;
+    padding: 0;
+    background-color: #FFF;
+  }
+}
+</style>