Attachemnts progress and past rich text

src/Mimisbrunnr.Web.Host/ClientApp/package.json

@@ -32,6 +32,7 @@
     "markdown-it-toc-and-anchor": "^4.2.0",
     "marked": "^4.0.13",
     "register-service-worker": "^1.6.2",
+    "showdown": "^2.1.0",
     "vue": "^2.6.14",
     "vue-i18n": "^8.27.1",
     "vue-router": "^3.0.3",

src/Mimisbrunnr.Web.Host/ClientApp/src/assets/lang.json

@@ -290,7 +290,8 @@
                 "upload": "Upload",
                 "browse": "Browse",
                 "placeholder": "Choose a file",
-                "empty": "No attachments on this page"
+                "empty": "No attachments on this page",
+                "uploading": "Uploading...."
             },
             "copy": {
                 "title": "Copy",
@@ -671,7 +672,8 @@
                 "upload": "Загрузить",
                 "browse": "Выбрать",
                 "placeholder": "Выберите файл",
-                "empty": "На этой странице нет вложений"
+                "empty": "На этой странице нет вложений",
+                "uploading": "Загрузка...."
             },
             "copy": {
                 "title": "Копировать",

src/Mimisbrunnr.Web.Host/ClientApp/src/components/space/modal/Attachments.vue

@@ -5,24 +5,32 @@
     centered
     :title="$t('page.attachments.title')"
   >
-    <b-alert v-if="this.attachments.length == 0" show variant="light">{{
-      $t("page.attachments.empty")
-    }}</b-alert>
-    <b-list-group-item
-      button
-      v-for="attachment in this.attachments"
-      :key="attachment.name"
-    >
-      <span v-on:click="selectAttachment(attachment)">{{
-        attachment.name
-      }}</span>
-      <span class="text-muted" style="float: right">
-        <b-icon-trash
-          v-on:click="deleteAttachment(attachment)"
-          style="cursor: pointer"
-        />
-      </span>
-    </b-list-group-item>
+    <b-overlay :show="uploadOverlay" rounded="sm">
+        <b-alert v-if="this.attachments.length == 0" show variant="light">{{
+        $t("page.attachments.empty")
+        }}</b-alert>
+        <b-list-group-item
+        button
+        v-for="attachment in this.attachments"
+        :key="attachment.name"
+        >
+        <span v-on:click="selectAttachment(attachment)">{{
+            attachment.name
+        }}</span>
+        <span class="text-muted" style="float: right">
+            <b-icon-trash
+            v-on:click="deleteAttachment(attachment)"
+            style="cursor: pointer"
+            />
+        </span>
+        </b-list-group-item>
+        <template #overlay>
+            <div class="text-center">
+                <b-progress :value="uploadProgress" variant="info" show-progress striped animated height="20px" class="mt-2"></b-progress>
+                <p>{{$t("page.attachments.uploading")}}</p>
+            </div>
+      </template>
+    </b-overlay>
     <template #modal-footer>
       <b-input-group style="width: 100%">
         <b-form-file
@@ -52,6 +60,8 @@ export default {
     return {
       newAttachment: null,
       attachments: [],
+      uploadOverlay: false,
+      uploadProgress: 0,
     };
   },
   components: {
@@ -76,6 +86,9 @@ export default {
         return;
       }
       this.attachments = attachmentRequest.data;
+      this.newAttachment = null;
+      this.uploadOverlay = false;
+      this.uploadProgress = 0;
     },
     selectAttachment: async function (attachment) {
       console.log("[select]", attachment);
@@ -100,13 +113,19 @@ export default {
       await this.init();
     },
     uploadAttachment: async function () {
+      var self = this;
+      this.uploadOverlay = true;
       var formData = new FormData();
       formData.append("attachment", this.newAttachment);
       await axios({
         method: "post",
         url: "/api/attachment/" + this.page.id,
         data: formData,
         validateStatus: false,
+        onUploadProgress: (evt) => {
+            if (evt.lengthComputable)
+                self.uploadProgress = Math.round((evt.loaded / evt.total) * 100);
+        }
       });
       await this.init();
     },

src/Mimisbrunnr.Web.Host/ClientApp/src/services/markdown/htmlToMarkdown.js

@@ -0,0 +1,160 @@
+import showdown from 'showdown';
+
+export function removeSpacesInsideTags(html) {
+    return html.replace(/<([^>]+)>/g, (match, p1) => {
+        return `<${p1.replace(/\s+/g, ' ').trim()}>`;
+    });
+}
+
+//eslint-disable-next-line
+export function sanitize(html, removeMeta, removeEmptyTags, removeAttribute, removeComments) {
+    const metaCharsetRegex = /<meta[^>]*>/g;
+    const emptyTagRegex = /<[^>]*>\s*<\/[^>]*>/g;
+    const attributesRegex = /<[^>]*>/g;
+    const commentRegex = /<!--[^>]*>/g;
+
+    function removeAttributes(match) {
+        return match.replace(/<[^>]*>/g, (tag) => {
+            return tag.replace(/[^<>\s]+="[^"]*"/g, '');
+        });
+    }
+
+    if(removeMeta)
+        html = html.replace(metaCharsetRegex, '');
+    if(removeEmptyTags)
+        html = html.replace(emptyTagRegex, '');
+    if(removeAttribute)
+        html = removeSpacesInsideTags(html.replace(attributesRegex, removeAttributes));
+    if(removeComments)
+        html = html.replace(commentRegex, '');
+    return html;
+}
+
+//eslint-disable-next-line
+export function fixShowdownNodeSubParser(){
+    showdown.subParser('makeMarkdown.node', function (node, globals, spansOnly) {
+        'use strict';
+
+        spansOnly = spansOnly || false;
+
+        let txt = '';
+
+        // edge case of text without wrapper paragraph
+        if (node.nodeType === 3) {
+          return showdown.subParser('makeMarkdown.txt')(node, globals);
+        }
+
+        // HTML comment
+        if (node.nodeType === 8) {
+          return '<!--' + node.data + '-->\n\n';
+        }
+
+        // process only node elements
+        if (node.nodeType !== 1) {
+          return '';
+        }
+
+        const tagName = node.tagName.toLowerCase();
+
+        switch (tagName) {
+
+          //
+          // BLOCKS
+          //
+          case 'h1':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 1) + '\n\n'; }
+            break;
+          case 'h2':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 2) + '\n\n'; }
+            break;
+          case 'h3':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 3) + '\n\n'; }
+            break;
+          case 'h4':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 4) + '\n\n'; }
+            break;
+          case 'h5':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 5) + '\n\n'; }
+            break;
+          case 'h6':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 6) + '\n\n'; }
+            break;
+
+          case 'p':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.paragraph')(node, globals) + '\n\n'; }
+            break;
+
+          case 'blockquote':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.blockquote')(node, globals) + '\n\n'; }
+            break;
+
+          case 'hr':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.hr')(node, globals) + '\n\n'; }
+            break;
+
+          case 'ol':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.list')(node, globals, 'ol') + '\n\n'; }
+            break;
+
+          case 'ul':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.list')(node, globals, 'ul') + '\n\n'; }
+            break;
+
+          case 'precode':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.codeBlock')(node, globals) + '\n\n'; }
+            break;
+
+          case 'pre':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.pre')(node, globals) + '\n\n'; }
+            break;
+
+          case 'table':
+            if (!spansOnly) { txt = showdown.subParser('makeMarkdown.table')(node, globals) + '\n\n'; }
+            break;
+
+          //
+          // SPANS
+          //
+          case 'code':
+            txt = showdown.subParser('makeMarkdown.codeSpan')(node, globals);
+            break;
+
+          case 'em':
+          case 'i':
+            txt = showdown.subParser('makeMarkdown.emphasis')(node, globals);
+            break;
+
+          case 'strong':
+          case 'b':
+            txt = showdown.subParser('makeMarkdown.strong')(node, globals);
+            break;
+
+          case 'del':
+            txt = showdown.subParser('makeMarkdown.strikethrough')(node, globals);
+            break;
+
+          case 'a':
+            txt = showdown.subParser('makeMarkdown.links')(node, globals);
+            break;
+
+          case 'img':
+            txt = showdown.subParser('makeMarkdown.image')(node, globals);
+            break;
+          case 'br':
+            txt = node.outerHTML + '\n';
+            break;
+          default:
+            txt = node.outerHTML + ' ';
+        }
+        return txt;
+      });
+}
+
+
+export function htmlToMarkdown(html) {
+    var sanitizedHtml = sanitize(html, true, false, true, false);
+    fixShowdownNodeSubParser();
+    var converter = new showdown.Converter();
+    var markdown = converter.makeMarkdown(sanitizedHtml);
+    return sanitize(markdown, false, true, false, true);
+}

src/Mimisbrunnr.Web.Host/ClientApp/src/views/Wiki/PageEdit.vue

@@ -64,6 +64,7 @@ const VueMarkdown = () =>
 import axios from "axios";
 import { debounce, isImageFile } from "@/services/Utils.js";
 import { formatMarkdownTables, insertMarkdownTableColumn, insertMarkdownTableRow } from "@/services/markdown/tableUtils";
+import { htmlToMarkdown } from "@/services/markdown/htmlToMarkdown";
 import DraftModal from "@/components/pageEditor/DraftModal.vue";
 import GuideModal from "@/components/pageEditor/GuideModal.vue";
 import ProfileService from "@/services/profileService";
@@ -269,13 +270,17 @@ export default {
         this.formatTables();
     },
     paste: async function (codeMirror, pasteEvent) {
+        pasteEvent.preventDefault();
         var data = (pasteEvent.clipboardData || window.clipboardData).items;
+        var imageData = null;
         var pasted = "";
-
         for (var i = 0; i < data.length; i++) {
-            if (data[i].type.indexOf("image") !== -1) {
-            var file = data[i].getAsFile();
+            if(data[i].type.indexOf("image") !== -1)
+                imageData = data[i];
+        }
 
+        if(imageData){
+            let file = imageData.getAsFile();
             var formData = new FormData();
             formData.append("attachment", file);
             await axios({
@@ -285,15 +290,18 @@ export default {
                 validateStatus: false,
             });
             this.addAttachmentLink({ name: file.name });
-
-            } else if (data[i].type.indexOf("text/plain") !== -1) {
-                try{
-                    pasted += data[i].getAsString();
-                }catch (e) {
-                    //nothing
-                }
-            }
+            return;
+        }
+        try{
+            pasted = pasteEvent.clipboardData.getData('text/html');
+            pasted = htmlToMarkdown(pasted);
+            if (!pasted)
+                pasted = pasteEvent.clipboardData.getData('text/plain');
+        }catch(e) {
+            console.error(e);
+            pasted = pasteEvent.clipboardData.getData('text/plain');
         }
+
         if (pasted.length === 0) 
             return;
 
@@ -452,7 +460,7 @@ export default {
 }
 .editor-preview-side {
   height: calc(100vh - var(--page-edit-height, 240px));
-  top: 152.75px;
+  top: 161.75px;
 }
 .side-by-side-switch {
   display: inline-block;