Add viewer pane for source document

app/server/static/components/annotation.pug

@@ -133,7 +133,12 @@ div.columns(v-cloak="")
           span.icon
             i.fas.fa-box
 
-    block annotation-area
+    div.columns
+      div.column
+        block annotation-area
+
+      div.column(v-if="documentMetadata != null && documentMetadata.documentSourceUrl != null")
+        preview(v-bind:url="documentMetadata.documentSourceUrl")
 
     div.level.mt30
       a.button.level-left(

app/server/static/components/annotationMixin.js

@@ -2,6 +2,7 @@ import * as marked from 'marked';
 import VueJsonPretty from 'vue-json-pretty';
 import isEmpty from 'lodash.isempty';
 import HTTP, { defaultHttpClient } from './http';
+import Preview from './preview.vue';
 
 const getOffsetFromUrl = (url) => {
   const offsetMatch = url.match(/[?#].*offset=(\d+)/);
@@ -36,7 +37,7 @@ const storeOffsetInUrl = (offset) => {
 };
 
 export default {
-  components: { VueJsonPretty },
+  components: { VueJsonPretty, Preview },
 
   data() {
     return {

app/server/static/components/preview.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+div.preview
+  object(v-if="isPDF", v-bind:data="url", type="application/pdf")
+    embed(v-bind:src="url", type="application/pdf")
+  iframe(v-else-if="isWord", v-bind:src="officeViewer")
+  iframe(v-else, v-bind:src="url")
+</template>
+
+<style scoped>
+.preview, object, iframe {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    fileExtension() {
+      const filename = this.url.split('/').pop();
+      const extension = filename.match(/[^#?]+/)[0].split('.').pop();
+      return extension.toLowerCase();
+    },
+
+    isPDF() {
+      return this.fileExtension === 'pdf';
+    },
+
+    isWord() {
+      return [
+        'doc',
+        'dot',
+        'docx',
+        'docm',
+        'dotm',
+      ].indexOf(this.fileExtension) !== -1;
+    },
+
+    officeViewer() {
+      return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.url)}`;
+    },
+  },
+};
+</script>