wip

packages/web-app-markdown-editor/src/App.vue

@@ -29,7 +29,7 @@
       </div>
       <div class="oc-container oc-width-1-2">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div id="markdown-editor-preview" v-html="renderedMarkdown" />
+        <div v-if="config.showPreview" id="markdown-editor-preview" v-html="renderedMarkdown" />
       </div>
     </div>
   </main>
@@ -40,13 +40,45 @@ import { useAppDefaults } from 'web-pkg/src/composables'
 import { marked } from 'marked'
 import sanitizeHtml from 'sanitize-html'
 import { useTask } from 'vue-concurrency'
-import { computed, getCurrentInstance, onMounted, ref, unref } from '@vue/composition-api'
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  unref
+} from '@vue/composition-api'
+import { mapActions } from 'vuex'
 
 export default {
   name: 'MarkdownEditor',
   components: {
     MarkdownEditorAppBar
   },
+  beforeRouteLeave(to, from, next) {
+    if (this.isDirty) {
+      const modal = {
+        variation: 'danger',
+        icon: 'warning',
+        title: this.$gettext('Changes not saved'),
+        message: this.$gettext('Your changes were not saved. Do you want to save them?'),
+        cancelText: this.$gettext('Not Save'),
+        confirmText: this.$gettext('Save'),
+        onCancel: () => {
+          this.hideModal()
+          next()
+        },
+        onConfirm: () => {
+          this.save()
+          this.hideModal()
+          next()
+        }
+      }
+      this.createModal(modal)
+    } else {
+      next()
+    }
+  },
   setup() {
     const serverContent = ref()
     const currentContent = ref()
@@ -76,7 +108,20 @@ export default {
             currentETag.value = response.ETag
           },
           (error) => {
-            lastError.value = error.message
+            switch (error.statusCode) {
+              case 412:
+                lastError.value =
+                  'This file was updated outside this window. Please refresh the page (all changes will be lost).'
+                break
+              case 500:
+                lastError.value = 'Error when contacting the server'
+                break
+              case 401:
+                lastError.value = "You're not authorized to save this file"
+                break
+              default:
+                lastError.value = error.message || error
+            }
           }
         )
     }).restartable()
@@ -98,14 +143,44 @@ export default {
       return loadFileTask.isRunning || saveFileTask.isRunning
     })
 
+    const config = computed(() => {
+      const { showPreview = true } = getCurrentInstance().proxy.applicationConfig
+      return { showPreview }
+    })
+
     onMounted(() => {
-      loadFileTask.perform(getCurrentInstance().proxy)
+      const that = getCurrentInstance().proxy
+      loadFileTask.perform(that)
+
+      // Enable ctrl/cmd + s
+      document.addEventListener('keydown', handleSKey, false)
+      // Ensure reload is not possible if there are changes
+      window.addEventListener('beforeunload', handleUnload)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('beforeunload', handleUnload)
+      document.removeEventListener('keydown', handleSKey, false)
     })
 
     const save = function () {
       saveFileTask.perform(this)
     }
 
+    const handleSKey = function (e) {
+      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
+        e.preventDefault()
+        // TODO call save
+      }
+    }
+
+    const handleUnload = function (e) {
+      if (unref(isDirty)) {
+        e.preventDefault()
+        e.returnValue = ''
+      }
+    }
+
     return {
       ...useAppDefaults({
         applicationName: 'markdown-editor'
@@ -121,11 +196,17 @@ export default {
       currentContent,
       lastError,
       renderedMarkdown,
+      config,
 
       // methods
       clearLastError,
-      save
+      save,
+      handleSKey,
+      handleUnload
     }
+  },
+  methods: {
+    ...mapActions(['createModal', 'hideModal']),
   }
 }
 </script>