From 33683048d0f5909ed62e1a1a1ba8819d2b4d9887 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= <njourdane@irap.omp.eu>
Date: Mon, 4 Mar 2019 17:05:22 +0100
Subject: [PATCH] [wip upload-image] Add image icon to open the browse-file
 window

---
 src/js/easymde.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/js/easymde.js b/src/js/easymde.js
index bf59082..7fdaeed 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -170,6 +170,30 @@ function createTooltip(title, action, shortcuts) {
     return tooltip;
 }
 
+/**
+ * Create the input element (ie. <input type='file'>) used to open the
+ * browse-file window in order to allow the user to select an image to be
+ * imported to the server. Used among with the 'import-image' icon.
+ * @param editor {Object} the EasyMDE object
+ * @returns Node The created input DOM element.
+ */
+function createImageInput(editor) {
+    var imageInput = document.createElement('input');
+    imageInput.className = 'imageInput';
+    imageInput.type = 'file';
+    imageInput.multiple = true;
+    imageInput.name = 'image';
+    imageInput.accept = editor.options.imageAccept;
+    imageInput.style.display = 'none';
+    imageInput.style.opacity = 0;
+    imageInput.addEventListener('change', function(event) {
+        for(var i=0; i<event.target.files.length; i++) {
+            console.log('file name: ' + event.target.files[i].name);
+        }
+    });
+    return imageInput;
+}
+
 /**
  * The state of CodeMirror at the given position.
  */
@@ -686,6 +710,15 @@ function drawImage(editor) {
     _replaceSelection(cm, stat.image, options.insertTexts.image, url);
 }
 
+/**
+ * Action for opening the browse-file window to upload an image to a server.
+ */
+function drawUploadedImage(editor) {
+    // TODO: Draw the image template with a fake url, ie: '![](importing foo.png...)'
+    var imageInput = editor.gui.toolbar.getElementsByClassName('imageInput')[0];
+    imageInput.dispatchEvent(new MouseEvent('click'));
+}
+
 /**
  * Action for drawing a table.
  */
@@ -1252,6 +1285,12 @@ var toolbarBuiltInButtons = {
         title: 'Insert Image',
         default: true,
     },
+    'upload-image': {
+        name: 'upload-image',
+        action: drawUploadedImage,
+        className: 'fa fa-image',
+        title: 'Import an image',
+    },
     'table': {
         name: 'table',
         action: drawTable,
@@ -1448,6 +1487,10 @@ function EasyMDE(options) {
     options.minHeight = options.minHeight || '300px';
 
 
+    // import-image default configuration
+    options.imageAccept = options.imageAccept || 'image/png, image/jpeg';
+
+
     // Change unique_id to uniqueId for backwards compatibility
     if (options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != '')
         options.autosave.uniqueId = options.autosave.unique_id;
@@ -1844,6 +1887,9 @@ EasyMDE.prototype.createToolbar = function (items) {
 
             toolbarData[item.name || item] = el;
             bar.appendChild(el);
+            if (item.name === 'upload-image') {
+                bar.appendChild(createImageInput(self));
+            }
         })(items[i]);
     }