From d6570ad9f2bc5b2c6c49250f823f4bdcfbdc284b Mon Sep 17 00:00:00 2001
From: Caleb James DeLisle <cjd@cjdns.fr>
Date: Tue, 3 Oct 2017 17:57:57 +0300
Subject: [PATCH] Standardize media-tag embedder and make media tags always
 absolute URL, Standardize import/export logic for codemirror apps, fix arrow
 key navigation in presentation fullscreen mode before first click.

---
 www/code/inner.js                      | 80 ++++++--------------------
 www/common/sframe-app-framework.js     | 47 +++++++++++++++
 www/common/sframe-common-codemirror.js | 41 +++++--------
 www/pad/inner.js                       | 34 ++---------
 www/slide/inner.js                     | 63 ++++++++------------
 www/slide/slide.js                     |  3 +
 6 files changed, 111 insertions(+), 157 deletions(-)

diff --git a/www/code/inner.js b/www/code/inner.js
index 97a044f4c..519e76bfa 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -204,6 +204,20 @@ define([
         updateIndentSettings();
     };
 
+    var mkFilePicker = function (framework, editor, evModeChange) {
+        evModeChange.reg(function (mode) {
+            if (MEDIA_TAG_MODES.indexOf(mode) !== -1) {
+                // Embedding is endabled
+                framework.setMediaTagEmbedder(function (mt) {
+                    editor.replaceSelection($(mt)[0].outerHTML);
+                });
+            } else {
+                // Embedding is disabled
+                framework.setMediaTagEmbedder();
+            }
+        });
+    };
+
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -211,7 +225,6 @@ define([
 
     var andThen2 = function (editor, CodeMirror, framework) {
 
-        var $toolbarContainer = $('#cme_toolbox');
         var common = framework._.sfCommon;
 
         var previewPane = mkPreviewPane(editor, CodeMirror, framework);
@@ -220,37 +233,7 @@ define([
 
         mkIndentSettings(editor, framework._.cpNfInner.metadataMgr);
         CodeMirror.init(framework.localChange, framework._.title, framework._.toolbar);
-
-        if (!framework.isReadOnly()) {
-            var fileDialogCfg = {
-                onSelect: function (data) {
-                    if (data.type === 'file') {
-                        var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
-                        editor.replaceSelection(mt);
-                        return;
-                    }
-                }
-            };
-            common.initFilePicker(fileDialogCfg);
-            var $mediaTagButton = $('<button>', {
-                title: Messages.filePickerButton,
-                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
-                style: 'font-size: 17px'
-            }).click(function () {
-                var pickerCfg = {
-                    types: ['file'],
-                    where: ['root']
-                };
-                common.openFilePicker(pickerCfg);
-            }).appendTo(framework._.toolbar.$rightside);
-            evModeChange.reg(function (mode) {
-                if (MEDIA_TAG_MODES.indexOf(mode) !== -1) {
-                    $($mediaTagButton).show();
-                } else {
-                    $($mediaTagButton).hide();
-                }
-            });
-        }
+        mkFilePicker(framework, editor, evModeChange);
 
         if (!framework.isReadOnly()) {
             CodeMirror.configureTheme(function () {
@@ -311,37 +294,8 @@ define([
              editor.setValue(Messages.codeInitialState);
         });
 
-        framework.setFileExporter(
-            function () {
-                return (Modes.extensionOf(CodeMirror.highlightMode) || '.txt').slice(1);
-            },
-            function () {
-                return new Blob([ editor.getValue() ], { type: 'text/plain;charset=utf-8' });
-            }
-        );
-
-        framework.setFileImporter({}, function (content, file) {
-            var mime = CodeMirror.findModeByMIME(file.type);
-            var mode;
-            if (!mime) {
-                var ext = /.+\.([^.]+)$/.exec(file.name);
-                if (ext[1]) {
-                    mode = CMeditor.findModeByExtension(ext[1]);
-                    mode = mode && mode.mode || null;
-                }
-            } else {
-                mode = mime && mime.mode || null;
-            }
-            if (mode && Modes.list.some(function (o) { return o.mode === mode; })) {
-                CodeMirror.setMode(mode);
-                $toolbarContainer.find('#language-mode').val(mode);
-            } else {
-                console.log("Couldn't find a suitable highlighting mode: %s", mode);
-                CodeMirror.setMode('text');
-                $toolbarContainer.find('#language-mode').val('text');
-            }
-            return content;
-        });
+        framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);
+        framework.setFileImporter({}, CodeMirror.fileImporter);
 
         framework.setNormalizer(function (c) {
             return {
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 7b3f47566..6b7bb34e2 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -52,6 +52,9 @@ define([
 
         var evStart = Util.mkEvent(true);
 
+        var mediaTagEmbedder;
+        var $embedButton;
+
         var common;
         var cpNfInner;
         var textPatcher;
@@ -302,6 +305,42 @@ define([
             common.feedback(action, force);
         };
 
+        var createFilePicker = function () {
+            common.initFilePicker({
+                onSelect: function (data) {
+                    if (data.type !== 'file') {
+                        console.log("Unexpected data type picked " + data.type);
+                        return;
+                    }
+                    if (!mediaTagEmbedder) { console.log('mediaTagEmbedder missing'); return; }
+                    if (data.type !== 'file') { console.log('unhandled embed type ' + data.type); return; } 
+                    var privateDat = cpNfInner.metadataMgr.getPrivateData();
+                    var origin = privateDat.fileHost || privateDat.origin;
+                    var src = origin + data.src;
+                    mediaTagEmbedder($('<media-tag src="' + src +
+                        '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'));
+                }
+            });
+            $embedButton = $('<button>', {
+                title: Messages.filePickerButton,
+                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
+                style: 'font-size: 17px'
+            }).click(function () {
+                common.openFilePicker({
+                    types: ['file'],
+                    where: ['root']
+                });
+            }).appendTo(toolbar.$rightside).hide();
+        };
+        var setMediaTagEmbedder = function (mte) {
+            if (!mte || readOnly) {
+                $embedButton.hide();
+                return;
+            }
+            $embedButton.show();
+            mediaTagEmbedder = mte;
+        };
+
         nThen(function (waitFor) {
             Cryptpad.addLoadingScreen();
             SFCommon.create(waitFor(function (c) { common = c; }));
@@ -424,6 +463,8 @@ define([
             var $tags = common.createButton('hashtag', true);
             toolbar.$rightside.append($tags);
 
+            createFilePicker();
+
             cb(Object.freeze({
                 // Register an event to be informed of a content update coming from remote
                 // This event will pass you the object.
@@ -475,6 +516,12 @@ define([
                 // such as removing extra fields.
                 setNormalizer: function (n) { normalize0 = n; },
 
+                // Set a function which should take a jquery element which is a media tag and place
+                // it in the document. If this is not called then there will be no embed button,
+                // if this is called a second time with a null function, it will remove the embed
+                // button from the toolbar.
+                setMediaTagEmbedder: setMediaTagEmbedder,
+
                 // Call the CryptPad feedback API.
                 feedback: feedback,
 
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index ea0eea38e..4fd5d0251 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -211,26 +211,18 @@ define([
             Common.getAttribute(themeKey, todo);
         };
 
-        exp.exportText = function () {
-            var text = editor.getValue();
-
-            var ext = Modes.extensionOf(exp.highlightMode);
-
-            var title = Cryptpad.fixFileName(Title ? Title.suggestTitle('cryptpad') : "?") + (ext || '.txt');
-
-            Cryptpad.prompt(Messages.exportPrompt, title, function (filename) {
-                if (filename === null) { return; }
-                var blob = new Blob([text], {
-                    type: 'text/plain;charset=utf-8'
-                });
-                saveAs(blob, filename);
-            });
+        exp.getContentExtension = function () {
+            console.log(Modes.extensionOf(exp.highlightMode));
+            console.log(exp.highlightMode);
+            return (Modes.extensionOf(exp.highlightMode) || '.txt').slice(1);
         };
-        exp.importText = function (content, file) {
-            var $bar = $('#cme_toolbox');
-            var mode;
+        exp.fileExporter = function () {
+            return new Blob([ editor.getValue() ], { type: 'text/plain;charset=utf-8' });
+        };
+        exp.fileImporter = function (content, file) {
+            var $toolbarContainer = $('#cme_toolbox');
             var mime = CodeMirror.findModeByMIME(file.type);
-
+            var mode;
             if (!mime) {
                 var ext = /.+\.([^.]+)$/.exec(file.name);
                 if (ext[1]) {
@@ -240,18 +232,15 @@ define([
             } else {
                 mode = mime && mime.mode || null;
             }
-
             if (mode && Modes.list.some(function (o) { return o.mode === mode; })) {
-                setMode(mode);
-                $bar.find('#language-mode').val(mode);
+                exp.setMode(mode);
+                $toolbarContainer.find('#language-mode').val(mode);
             } else {
                 console.log("Couldn't find a suitable highlighting mode: %s", mode);
-                setMode('text');
-                $bar.find('#language-mode').val('text');
+                exp.setMode('text');
+                $toolbarContainer.find('#language-mode').val('text');
             }
-
-            editor.setValue(content);
-            onLocal();
+            return { content: content };
         };
 
         var cursorToPos = function(cursor, oldText) {
diff --git a/www/pad/inner.js b/www/pad/inner.js
index 4012977ab..393cf2fa1 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -363,35 +363,11 @@ define([
             if (href) { ifrWindow.open(bounceHref, '_blank'); }
         };
 
-        if (!framework.isReadOnly()) {
-            framework.onEditableChange(function () {
-                var locked = framework.isLocked();
-                $(inner).css({ 'background-color': ((locked) ? '#aaa' : '') });
-                inner.setAttribute('contenteditable', !locked);
-            });
-
-            var fileDialogCfg = {
-                onSelect: function (data) {
-                    if (data.type === 'file') {
-                        var mt = '<media-tag contenteditable="false" src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '" tabindex="1"></media-tag>';
-                        editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt));
-                        return;
-                    }
-                }
-            };
-            framework._.sfCommon.initFilePicker(fileDialogCfg);
-            window.APP.$mediaTagButton = $('<button>', {
-                title: Messages.filePickerButton,
-                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
-                style: 'font-size: 17px'
-            }).click(function () {
-                var pickerCfg = {
-                    types: ['file'],
-                    where: ['root']
-                };
-                framework._.sfCommon.openFilePicker(pickerCfg);
-            }).appendTo(framework._.toolbar.$rightside);
-        }
+        framework.setMediaTagEmbedder(function ($mt) {
+            $mt.attr('contenteditable', 'false');
+            $mt.attr('tabindex', '1');
+            editor.insertElement(new window.CKEDITOR.dom.element($mt[0]));
+        });
 
         framework.setTitleRecommender(function () {
             var text;
diff --git a/www/slide/inner.js b/www/slide/inner.js
index e535e3f7a..43b140df3 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -241,6 +241,8 @@ define([
                             updateLocalOptions(slideOptionsTmp);
                         }
                     });
+                } else {
+                    updateLocalOptions(slideOptionsTmp);
                 }
                 $container.remove();
                 Cryptpad.stopListening(h);
@@ -348,32 +350,24 @@ define([
     };
 
     var mkFilePicker = function (framework, editor) {
-        var fileDialogCfg = {
-            onSelect: function (data) {
-                if (data.type === 'file') {
-                    var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
-                    editor.replaceSelection(mt);
-                    return;
-                }
-            }
-        };
-        framework._.sfCommon.initFilePicker(fileDialogCfg);
-        $('<button>', {
-            title: Messages.filePickerButton,
-            'class': 'cp-toolbar-rightside-button fa fa-picture-o',
-            style: 'font-size: 17px'
-        }).click(function () {
-            var pickerCfg = {
-                types: ['file'],
-                where: ['root']
-            };
-            framework._.sfCommon.openFilePicker(pickerCfg);
-        }).appendTo(framework._.toolbar.$rightside);
-
-        var $tags = framework._.sfCommon.createButton('hashtag', true);
-        framework._.toolbar.$rightside.append($tags);
+        framework.setMediaTagEmbedder(function (mt) {
+            editor.replaceSelection($(mt)[0].outerHTML);
+        });
     };
 
+    var activateLinks = function ($content) {
+        $content.click(function (e) {
+            if (!e.target) { return; }
+            var $t = $(e.target);
+            if ($t.is('a') || $t.parents('a').length) {
+                e.preventDefault();
+                var $a = $t.is('a') ? $t : $t.parents('a').first();
+                var href = $a.attr('href');
+                window.open(href);
+            }
+        });
+    }
+
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -390,17 +384,7 @@ define([
 
         var $toolbarDrawer = framework._.toolbar.$drawer;
 
-        $content.click(function (e) {
-            if (!e.target) { return; }
-            var $t = $(e.target);
-            if ($t.is('a') || $t.parents('a').length) {
-                e.preventDefault();
-                var $a = $t.is('a') ? $t : $t.parents('a').first();
-                var href = $a.attr('href');
-                window.open(href);
-            }
-        });
-
+        activateLinks($content);
         Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
         mkPrintButton(framework, editor, $content, $print, $toolbarDrawer);
         mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
@@ -410,10 +394,6 @@ define([
 
         CodeMirror.configureTheme();
 
-        var enterPresentationMode = function () { Slide.show(true, editor.getValue()); };
-
-        if (isPresentMode) { enterPresentationMode(); }
-
         framework.onContentUpdate(function (newContent) {
             CodeMirror.contentUpdate(newContent);
             Slide.update(newContent.content);
@@ -455,12 +435,17 @@ define([
 
         Slide.setTitle(framework._.title);
 
+        var enterPresentationMode = function () { Slide.show(true, editor.getValue()); };
         framework._.toolbar.$rightside.append(
             framework._.sfCommon.createButton('present', true).click(enterPresentationMode)
         );
+        if (isPresentMode) { enterPresentationMode(); }
 
         editor.on('change', framework.localChange);
 
+        framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);
+        framework.setFileImporter({}, CodeMirror.fileImporter);
+
         framework.start();
     };
 
diff --git a/www/slide/slide.js b/www/slide/slide.js
index 7fa71e5b0..492c0445c 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -115,7 +115,10 @@ define([
             Slide.update(content);
             Slide.draw(Slide.index);
             $modal.addClass('cp-app-slide-shown');
+
+            $('textarea').blur();
             $(ifrw).focus();
+
             change(null, Slide.index);
             Common.setPresentUrl(true);
             $('.cp-app-slide-present-button').hide();