From 3864b30d965df574fbd3b22b31501c0e7c0b609f Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 8 Jul 2020 18:55:42 +0200 Subject: [PATCH 1/4] Upload pasted images in codemirror --- www/common/sframe-common-codemirror.js | 13 +++++++++++++ www/common/sframe-common-file.js | 20 ++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js index c3e3b2566..3e391fa63 100644 --- a/www/common/sframe-common-codemirror.js +++ b/www/common/sframe-common-codemirror.js @@ -234,6 +234,19 @@ define([ editor.scrollIntoView(cursor); }); + // Don't paste file path in the users wants to paste a file + editor.on('paste', function (editor, ev) { + try { + if (!ev.clipboardData.items) { return; } + var items = Array.prototype.slice.apply(ev.clipboardData.items); + var hasFile = items.some(function (el) { + return el.kind === "file"; + }); + if (!hasFile) { return; } + ev.preventDefault(); + } catch (e) { console.error(e); } + }); + var setMode = exp.setMode = function (mode, cb) { exp.highlightMode = mode; if (mode === 'markdown') { mode = 'gfm'; } diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js index 90ca5e256..f7a1c17ff 100644 --- a/www/common/sframe-common-file.js +++ b/www/common/sframe-common-file.js @@ -528,6 +528,26 @@ define([ $hoverArea.removeClass('cp-fileupload-hovering'); onFileDrop(dropped, e); }); + + + // Upload files on paste + $area.on('paste', function (e) { + try { + var ev = e.originalEvent; + if (!ev.clipboardData.items) { return; } + var items = Array.prototype.slice.apply(ev.clipboardData.items); + var hasFile = items.some(function (el) { + return el.kind === "file"; + }); + if (!hasFile) { return; } + ev.preventDefault(); + items.forEach(function (el) { + if (el.kind !== "file") { return; } + var file = el.getAsFile(); + handleFile(file, e); + }); + } catch (e) { console.error(e); } + }); }; var createCkeditorDropHandler = function () { var editor = config.ckeditor; From 896a1b1dddd17d1825c76bf1aece8219aa8ec83a Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 9 Jul 2020 12:40:31 +0200 Subject: [PATCH 2/4] Add support for drop & paste in rich text and polls --- www/pad/inner.js | 20 +++++++++++++++++++- www/poll/inner.js | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/www/pad/inner.js b/www/pad/inner.js index 0ab12ddb3..73dc00e75 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -725,6 +725,7 @@ define([ var fmConfig = { ckeditor: editor, + dropArea: $inner, body: $('body'), onUploaded: function(ev, data) { var parsed = Hash.parsePadUrl(data.url); @@ -743,7 +744,24 @@ define([ editor.widgets.initOn(element, 'mediatag'); } }; - window.APP.FM = framework._.sfCommon.createFileManager(fmConfig); + var FM = window.APP.FM = framework._.sfCommon.createFileManager(fmConfig); + + editor.on('paste', function (ev) { + try { + var files = ev.data.dataTransfer._.files; + files.forEach(function (f) { + FM.handleFile(f); + }); + // If the paste data contains files, don't use the ckeditor default handlers + // ==> they would try to include either a remote image URL or a base64 image + if (files.length) { + ev.cancel(); + ev.preventDefault(); + } + } catch (e) { + console.error(e); + } + }); framework._.sfCommon.getAttribute(['pad', 'spellcheck'], function(err, data) { if (framework.isReadOnly()) { return; } diff --git a/www/poll/inner.js b/www/poll/inner.js index 0dd4409ce..ae99ac9cd 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -2,6 +2,7 @@ define([ 'jquery', '/common/toolbar.js', '/common/common-util.js', + '/common/common-hash.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/common-realtime.js', @@ -32,6 +33,7 @@ define([ $, Toolbar, Util, + Hash, nThen, SFCommon, CommonRealtime, @@ -940,6 +942,23 @@ define([ $('.CodeMirror').parent().prepend(markdownTb.toolbar); APP.toolbar.$bottomL.append(markdownTb.button); + // Add drop and paste handlers + var privateData = metadataMgr.getPrivateData(); + var fmConfig = { + dropArea: $('.CodeMirror'), + body: $('body'), + onUploaded: function (ev, data) { + var parsed = Hash.parsePadUrl(data.url); + var secret = Hash.getSecrets('file', parsed.hash, data.password); + var fileHost = privateData.fileHost || privateData.origin; + var src = fileHost + Hash.getBlobPathFromHex(secret.channel); + var key = Hash.encodeBase64(secret.keys.cryptKey); + var mt = ''; + APP.editor.replaceSelection(mt); + } + }; + common.createFileManager(fmConfig); + // Initialize author name for comments. // Disable name modification for logged in users var $cName = APP.$addComment.find('.cp-app-poll-comments-add-name') From dcaa898310335ad80e8d0accde2a2e98e815d3f7 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 9 Jul 2020 12:41:22 +0200 Subject: [PATCH 3/4] lint compliance --- www/common/sframe-common-file.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js index f7a1c17ff..c9e2eeacd 100644 --- a/www/common/sframe-common-file.js +++ b/www/common/sframe-common-file.js @@ -546,7 +546,7 @@ define([ var file = el.getAsFile(); handleFile(file, e); }); - } catch (e) { console.error(e); } + } catch (err) { console.error(err); } }); }; var createCkeditorDropHandler = function () { From fa6f47068880e15e4a13218a4a59dfdbd092ce0e Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 9 Jul 2020 17:03:43 +0200 Subject: [PATCH 4/4] Fix image paste in polls --- www/common/sframe-common-codemirror.js | 28 +++++++++++++++----------- www/poll/inner.js | 2 ++ 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js index 3e391fa63..e04dc9c2e 100644 --- a/www/common/sframe-common-codemirror.js +++ b/www/common/sframe-common-codemirror.js @@ -75,6 +75,21 @@ define([ } }; + module.handleImagePaste = function (editor) { + // Don't paste file path in the users wants to paste a file + editor.on('paste', function (editor, ev) { + try { + if (!ev.clipboardData.items) { return; } + var items = Array.prototype.slice.apply(ev.clipboardData.items); + var hasFile = items.some(function (el) { + return el.kind === "file"; + }); + if (!hasFile) { return; } + ev.preventDefault(); + } catch (e) { console.error(e); } + }); + }; + module.getHeadingText = function (editor) { var lines = editor.getValue().split(/\n/); @@ -234,18 +249,7 @@ define([ editor.scrollIntoView(cursor); }); - // Don't paste file path in the users wants to paste a file - editor.on('paste', function (editor, ev) { - try { - if (!ev.clipboardData.items) { return; } - var items = Array.prototype.slice.apply(ev.clipboardData.items); - var hasFile = items.some(function (el) { - return el.kind === "file"; - }); - if (!hasFile) { return; } - ev.preventDefault(); - } catch (e) { console.error(e); } - }); + module.handleImagePaste(editor); var setMode = exp.setMode = function (mode, cb) { exp.highlightMode = mode; diff --git a/www/poll/inner.js b/www/poll/inner.js index ae99ac9cd..b36466a13 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -959,6 +959,8 @@ define([ }; common.createFileManager(fmConfig); + SframeCM.handleImagePaste(APP.editor); + // Initialize author name for comments. // Disable name modification for logged in users var $cName = APP.$addComment.find('.cp-app-poll-comments-add-name')