integrate file embed into code editor

www/code/code.less

@@ -1,6 +1,7 @@
 @import "/customize/src/less/variables.less";
 @import "/customize/src/less/mixins.less";
 @import "/common/markdown.less";
+@import "/common/file-dialog.less";
 
 html, body{
     height: 100%;

www/code/main.js

@@ -147,6 +147,17 @@ define([
                 }
             };
 
+            var mediaTagModes = [
+                'markdown',
+                'html',
+                'htmlembedded',
+                'htmlmixed',
+                'index.html',
+                'php',
+                'velocity',
+                'xml',
+            ];
+
             var onModeChanged = function (mode) {
                 var $codeMirror = $iframe.find('.CodeMirror');
                 window.clearTimeout(APP.previewTo);
@@ -154,6 +165,10 @@ define([
                 APP.previewTo = window.setTimeout(function () {
                     $codeMirror.removeClass('transition');
                 }, 500);
+                if (mediaTagModes.indexOf(mode) !== -1) {
+                    APP.$mediaTagButton.show();
+                } else { APP.$mediaTagButton.hide(); }
+
                 if (mode === "markdown") {
                     APP.$previewButton.show();
                     Cryptpad.getPadAttribute('previewMode', function (e, data) {
@@ -253,6 +268,25 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
+                var fileDialogCfg = {
+                    $body: $iframe.find('body'),
+                    onSelect: function (href) {
+                        var parsed = Cryptpad.parsePadUrl(href);
+                        var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+                        var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                        var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+                        editor.replaceSelection(mt);
+                    },
+                    data: APP
+                };
+                APP.$mediaTagButton = $('<button>', {
+                    title: Messages.filePickerButton,
+                    'class': 'rightside-button fa fa-picture-o',
+                    style: 'font-size: 17px'
+                }).click(function () {
+                    Cryptpad.createFileDialog(fileDialogCfg);
+                }).appendTo($rightside);
+
                 var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
                 $previewButton.removeClass('fa-question').addClass('fa-eye');
                 $previewButton.attr('title', Messages.previewButtonTitle);

www/common/file-dialog.less

@@ -0,0 +1,39 @@
+#fileDialog {
+    position: absolute;
+    background-color: rgba(200, 200, 200, 0.8);
+    top: 15vh; bottom: 15vh;
+    left: 10vw; right: 10vw;
+    border: 1px solid black;
+    z-index: 100000;
+    overflow: auto;
+    display: none;
+    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    font-size: 16px;
+    text-align: center;
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 5px;
+        cursor: pointer;
+    }
+    .element {
+        cursor: pointer;
+        display: inline-flex;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #ccc;
+        margin: 5px;
+        overflow: hidden;
+        word-wrap: break-word;
+        background-color: white;
+        padding: 5px;
+        align-items: center;
+        span {
+            width: 100px;
+            text-align: center;
+        }
+    }
+}
+
+

www/slide/slide.less

@@ -366,43 +366,7 @@ div#modal #content, #print {
 }
 }
 
-#fileDialog {
+@import "/common/file-dialog.less";
-    position: absolute;
-    background-color: rgba(200, 200, 200, 0.8);
-    top: 15vh; bottom: 15vh;
-    left: 10vw; right: 10vw;
-    border: 1px solid black;
-    z-index: 100000;
-    overflow: auto;
-    display: none;
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-    font-size: 16px;
-    text-align: center;
-    .close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 5px;
-        cursor: pointer;
-    }
-    .element {
-        cursor: pointer;
-        display: inline-flex;
-        width: 100px;
-        height: 100px;
-        border: 1px solid #ccc;
-        margin: 5px;
-        overflow: hidden;
-        word-wrap: break-word;
-        background-color: white;
-        padding: 5px;
-        align-items: center;
-        span {
-            width: 100px;
-            text-align: center;
-        }
-    }
-}
 
 .slide-frame * {
   max-width: 100%;