✨ open file dialog and upload images via editor toolbar (#685)

no issue

- adds a hidden file input to the `gh-markdown-editor` component
- when the editor image toolbar button is clicked, capture the current selection (it gets during the file upload), trigger the file dialog then when files are selected initiate the same upload+insert process as drag/drop image uploads

ghost/admin/app/components/gh-editor.js

@@ -147,6 +147,10 @@ export default Component.extend({
             run.scheduleOnce('afterRender', this, this._setHeaderClass);
         },
 
+        uploadImages(fileList) {
+            this.set('droppedFiles', fileList);
+        },
+
         uploadComplete(uploads) {
             this.set('uploadedImageUrls', uploads.mapBy('url'));
             this.set('droppedFiles', null);

ghost/admin/app/components/gh-markdown-editor.js

@@ -30,6 +30,7 @@ export default Component.extend({
 
     // Public attributes
     autofocus: false,
+    imageMimeTypes: null,
     isFullScreen: false,
     mobiledoc: null,
     options: null,
@@ -39,6 +40,7 @@ export default Component.extend({
     // Closure actions
     onChange() {},
     onFullScreen() {},
+    onImageFilesSelected() {},
     onSplitScreen() {},
     showMarkdownHelp() {},
 
@@ -62,7 +64,16 @@ export default Component.extend({
             toolbar: [
                 'bold', 'italic', 'heading', '|',
                 'quote', 'unordered-list', 'ordered-list', '|',
-                'link', 'image', '|',
+                'link',
+                {
+                    name: 'image',
+                    action: () => {
+                        this._openImageFileDialog();
+                    },
+                    className: 'fa fa-picture-o',
+                    title: 'Upload Image(s)'
+                },
+                '|',
                 'preview',
                 {
                     name: 'side-by-side',
@@ -90,6 +101,10 @@ export default Component.extend({
                     title: 'Markdown Guide'
                 }
             ],
+            shortcuts: {
+                toggleSideBySide: null,
+                toggleFullScreen: null
+            },
             status: ['words']
         };
 
@@ -109,6 +124,8 @@ export default Component.extend({
             // a single render
             run.scheduleOnce('afterRender', this, () => {
                 this._insertImages(uploadedImageUrls);
+                // reset the file input so the same file can be selected again
+                this.$('input[type=file]').val('');
             });
         }
 
@@ -136,6 +153,21 @@ export default Component.extend({
         });
         let text = images.join(' ');
 
+        // clicking the image toolbar button will lose the selection so we use
+        // the captured selection to re-select here
+        if (this._imageInsertSelection) {
+            // we want to focus but not re-position
+            this.send('focusEditor', null);
+
+            // re-select and clear the captured selection so drag/drop still
+            // inserts at the correct place
+            cm.setSelection(
+                this._imageInsertSelection.anchor,
+                this._imageInsertSelection.head
+            );
+            this._imageInsertSelection = null;
+        }
+
         // focus editor and place cursor at end if not already focused
         if (!cm.hasFocus()) {
             this.send('focusEditor');
@@ -232,6 +264,19 @@ export default Component.extend({
         delete this._onEditorPaneScroll;
     },
 
+    _openImageFileDialog() {
+        // capture the current selection before it's lost by clicking the
+        // file input button
+        this._imageInsertSelection = {
+            anchor: this._editor.codemirror.getCursor('anchor'),
+            head: this._editor.codemirror.getCursor('head')
+        };
+
+        // trigger the dialog via gh-file-input, when a file is selected it will
+        // trigger the onImageFilesSelected closure action
+        this.$('input[type="file"]').click();
+    },
+
     willDestroyElement() {
         if (this.get('_isSplitScreen')) {
             this._disconnectSplitPreview();

ghost/admin/app/components/gh-simplemde.js

@@ -31,10 +31,6 @@ export default TextArea.extend({
             autofocus: this.get('autofocus'),
             indentWithTabs: false,
             placeholder: this.get('placeholder'),
-            shortcuts: {
-                toggleSideBySide: null,
-                toggleFullScreen: null
-            },
             tabSize: 4
         };
     }),

ghost/admin/app/templates/components/gh-editor.hbs

@@ -10,4 +10,5 @@
     toggleSplitScreen=(action "toggleSplitScreen")
     uploadComplete=(action "uploadComplete")
     uploadCancelled=(action "uploadCancelled")
+    uploadImages=(action "uploadImages")
 )}}

ghost/admin/app/templates/components/gh-markdown-editor.hbs

@@ -11,3 +11,7 @@
     isSplitScreen=_isSplitScreen
     focus=(action "focusEditor")
 )}}
+
+<div style="display:none">
+    {{gh-file-input multiple=true action=(action onImageFilesSelected) accept=imageMimeTypes}}
+</div>

ghost/admin/app/templates/editor/edit.hbs

@@ -43,7 +43,9 @@
         onChange=(action "updateScratch")
         onFullScreen=(action editor.toggleFullScreen)
         onSplitScreen=(action editor.toggleSplitScreen)
+        onImageFilesSelected=(action editor.uploadImages)
         showMarkdownHelp=(route-action "toggleMarkdownHelpModal")
+        imageMimeTypes=editor.imageMimeTypes
         as |markdown|
     }}
         <div class="gh-markdown-editor-pane">