Use the images upload menu when an image dropped

contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue

@@ -188,6 +188,7 @@
     },
     mounted() {
       this.altText = this.alt;
+      this.$el.focus();
     },
     methods: {
       onInsertClick() {
@@ -198,6 +199,7 @@
           });
         }
       },
+      // @public
       handleFiles(files) {
         this.handleFileUpload(files).then(files => {
           const fileUpload = files[0];

contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue

@@ -28,6 +28,7 @@
     />
     <ImagesMenu
       v-if="imagesMenu.isOpen"
+      ref="imagesMenu"
       v-click-outside="onClick"
       class="images-menu"
       :anchorArrowSide="imagesMenu.anchorArrowSide"
@@ -148,13 +149,6 @@
         clickEventListener: null,
       };
     },
-    computed: {
-      // Disabling next line as it's used to watch dropped in images
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
-      file() {
-        return this.getFileUpload(this.uploadingChecksum);
-      },
-    },
     watch: {
       markdown(newMd, previousMd) {
         if (newMd !== previousMd && newMd !== this.editor.getMarkdown()) {
@@ -167,21 +161,6 @@
         this.initImageFields();
         this.cleanUpImageFields();
       },
-      'file.error'() {
-        // eslint-disable-next-line
-        console.error('The image could not be uploaded');
-      },
-      'file.progress'(progress) {
-        if (progress === 0) {
-          // eslint-disable-next-line
-          console.log('The image upload has started');
-        } else if (progress === 1) {
-          // eslint-disable-next-line
-          console.log('The image upload has finished');
-          this.insertImageToEditor({ src: this.file.url, alt: '' });
-          this.uploadingChecksum = '';
-        }
-      },
     },
     mounted() {
       this.mathQuill = MathQuill.getInterface(2);
@@ -419,28 +398,31 @@
         });
         event.fragment = fragment;
       },
-      onImageDrop(fileUpload) {
+      onImageDrop(file) {
+        this.activeImageComponent = null;
         this.highlight = false;
-        this.handleFileUpload([fileUpload])
-          .then(files => {
-            const fileUpload = files[0];
-            if (fileUpload && fileUpload.checksum) {
-              this.uploadingChecksum = fileUpload.checksum;
-            } else {
-              this.uploadingChecksum = '';
-            }
-          })
-          .catch(() => {
-            this.uploadingChecksum = '';
-          });
+
+        const cursor = this.getCursor();
+        const position = getExtensionMenuPosition({
+          editorEl: this.$el,
+          targetX: cursor.x,
+          targetY: cursor.y + cursor.height,
+        });
+        this.resetImagesMenu();
+        this.openImagesMenu({ position });
+
+        // need to wait for the images menu component
+        this.$nextTick(() => {
+          this.$refs.imagesMenu.handleFiles([file]);
+        });
       },
       onImageUploadToolbarBtnClick() {
         if (this.imagesMenu.isOpen === true) {
           return;
         }
         this.activeImageComponent = null;
 
-        const cursor = this.editor.getSquire().getCursorPosition();
+        const cursor = this.getCursor();
         const position = getExtensionMenuPosition({
           editorEl: this.$el,
           targetX: cursor.x,
@@ -454,7 +436,7 @@
           return;
         }
 
-        const cursor = this.editor.getSquire().getCursorPosition();
+        const cursor = this.getCursor();
         const formulasMenuPosition = getExtensionMenuPosition({
           editorEl: this.$el,
           targetX: cursor.x,
@@ -471,6 +453,9 @@
           tooltip.style.display = 'none';
         });
       },
+      getCursor() {
+        return this.editor.getSquire().getCursorPosition();
+      },
       fixSquireSelectionOnKeyDown(event) {
         /**
          *  On 'backspace' events, Squire doesn't behave consistently in both Chrome and FireFox,