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/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,
 

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) {