From 018f71df049159fb024cab3dd751f2e2c43757e4 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 18 Sep 2017 10:59:40 +0200
Subject: [PATCH] Add drop handlers for mediatags in ckeditor

---
 www/common/sframe-common-file.js | 14 +++++++++++++-
 www/pad/inner.js                 | 16 ++++++++++++++--
 www/pad/links.js                 |  3 +--
 www/pad/mediatag-plugin.js       |  3 +++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js
index e90d75a4c..8093db836 100644
--- a/www/common/sframe-common-file.js
+++ b/www/common/sframe-common-file.js
@@ -290,10 +290,22 @@ define([
                 onFileDrop(dropped, e);
             });
         };
+        var createCkeditorDropHandler = function () {
+            var editor = config.ckeditor;
+            editor.document.on('drop', function (ev) {
+                var dropped = ev.data.$.dataTransfer.files;
+                onFileDrop(dropped, ev);
+                ev.data.preventDefault(true);
+            });
+        };
 
         var createUploader = function ($area, $hover, $body) {
             if (!config.noHandlers) {
-                createAreaHandlers($area, null);
+                if (config.ckeditor) {
+                    createCkeditorDropHandler();
+                } else {
+                    createAreaHandlers($area, null);
+                }
             }
             createTableContainer($body);
         };
diff --git a/www/pad/inner.js b/www/pad/inner.js
index e4c3f3975..b114a0ac7 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -762,6 +762,20 @@ define([
             }
 
             onLocal();
+
+            var fmConfig = {
+                ckeditor: editor,
+                body: $('body'),
+                onUploaded: function (ev, data) {
+                    var parsed = Cryptpad.parsePadUrl(data.url);
+                    var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+                    var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                    var mt = '<media-tag contenteditable="false" src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '" tabindex="1"></media-tag>';
+                    editor.insertElement(CKEDITOR.dom.element.createFromHtml(mt));
+                }
+            };
+            APP.FM = common.createFileManager(fmConfig);
+
             editor.focus();
             if (newPad) {
                 cursor.setToEnd();
@@ -772,10 +786,8 @@ define([
 
         realtimeOptions.onConnectionChange = function (info) {
             setEditable(info.state);
-            //toolbar.failed(); TODO
             if (info.state) {
                 initializing = true;
-                //toolbar.reconnecting(info.myId); // TODO
                 Cryptpad.findOKButton().click();
             } else {
                 Cryptpad.alert(Messages.common_connectionLost, undefined, true);
diff --git a/www/pad/links.js b/www/pad/links.js
index 4a2fc57d8..bc582f959 100644
--- a/www/pad/links.js
+++ b/www/pad/links.js
@@ -1,7 +1,6 @@
-define(['/common/cryptpad-common.js'], function (Cryptpad) {
+define(['/customize/messages.js'], function (Messages) {
     // Adds a context menu entry to open the selected link in a new tab.
     // See https://github.com/xwiki-contrib/application-ckeditor/commit/755d193497bf23ed874d874b4ae92fbee887fc10
-    var Messages = Cryptpad.Messages;
     return {
         addSupportForOpeningLinksInNewTab : function (Ckeditor) {
                 // Returns the DOM element of the active (currently focused) link. It has also support for linked image widgets.
diff --git a/www/pad/mediatag-plugin.js b/www/pad/mediatag-plugin.js
index 9b8f1261d..c20066937 100644
--- a/www/pad/mediatag-plugin.js
+++ b/www/pad/mediatag-plugin.js
@@ -25,6 +25,9 @@
             'media-tag iframe{' +
                 'border: 6px solid #eee;' +
             '}' +
+            'media-tag img{' +
+                'vertical-align: top;' +
+            '}' +
             'media-tag *{' +
                 'width:100%; height:100%;' +
             '}');