From faa150be90aa1f58a35cf5f097098cb4514e48ac Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 29 May 2020 17:13:10 +0200
Subject: [PATCH] Kanban improvements (images, autobrackets)

---
 www/common/common-thumbnail.js         |  1 -
 www/common/sframe-common-codemirror.js |  4 +--
 www/kanban/inner.js                    | 44 ++++++++++++++++++++------
 www/kanban/jkanban_cp.js               | 10 ++++--
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/www/common/common-thumbnail.js b/www/common/common-thumbnail.js
index 3f359d425..8c78d9d6d 100644
--- a/www/common/common-thumbnail.js
+++ b/www/common/common-thumbnail.js
@@ -200,7 +200,6 @@ define([
         // The blob is already in memory, it should be super-fast to make a thumbnail
         // ==> 1s timeout
         setTimeout(function () {
-            console.error("Thumbnail timeout");
             cb('TIMEOUT');
         }, 1000);
         try {
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index 02e3867ec..c3e3b2566 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -176,14 +176,14 @@ define([
         updateIndentSettings();
     };
 
-    module.create = function (defaultMode, CMeditor) {
+    module.create = function (defaultMode, CMeditor, textarea) {
         var exp = {};
 
         var CodeMirror = exp.CodeMirror = CMeditor;
         CodeMirror.modeURL = "cm/mode/%N/%N";
 
         var $pad = $('#pad-iframe');
-        var $textarea = exp.$textarea = $('#editor1');
+        var $textarea = exp.$textarea = textarea ? $(textarea) : $('#editor1');
         if (!$textarea.length) { $textarea = exp.$textarea = $pad.contents().find('#editor1'); }
 
         var Title;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index f5f7c4ac3..41176d090 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -21,6 +21,12 @@ define([
     '/kanban/jkanban_cp.js',
 
     'cm/mode/gfm/gfm',
+    'cm/addon/edit/closebrackets',
+    'cm/addon/edit/matchbrackets',
+    'cm/addon/edit/trailingspace',
+    'cm/addon/selection/active-line',
+    'cm/addon/search/search',
+    'cm/addon/search/match-highlighter',
 
     'css!/bower_components/codemirror/lib/codemirror.css',
     'css!/bower_components/codemirror/addon/dialog/dialog.css',
@@ -211,15 +217,11 @@ define([
         };
 
         // Body
-        var editor = CodeMirror.fromTextArea(text, {
-            allowDropFileTypes: [],
-            lineWrapping: true,
-            styleActiveLine: true,
-            autoCloseBrackets: true,
-            inputStyle: 'contenteditable',
-            extraKeys: {"Shift-Ctrl-R": undefined},
-            mode: "gfm"
-        });
+        var cm = SFCodeMirror.create("gfm", CodeMirror, text);
+        var editor = cm.editor;
+        editor.setOption('gutters', []);
+        editor.setOption('lineNumbers', false);
+        editor.setOption('readOnly', false);
         editor.on('keydown', function (editor, e) {
             if (e.which === 27) {
                 // Focus the next form element but don't close the modal (stopPropagation)
@@ -257,6 +259,25 @@ define([
             commit();
         });
 
+        setTimeout(function () {
+            var privateData = framework._.cpNfInner.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 = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + key + '"></media-tag>';
+                    editor.replaceSelection(mt);
+                }
+            };
+            common.createFileManager(fmConfig);
+        });
+
+
         // Tags
         var _field, initialTags;
         var tags = {
@@ -775,8 +796,11 @@ define([
                     }
                 });
             },
+            applyHtml: function (html, node) {
+                DiffMd.apply(html, $(node),framework._.sfCommon);
+            },
             renderMd: function (md) {
-                return DiffMd.render(md, true, false);
+                return DiffMd.render(md);
             },
             addItemButton: true,
             getTextColor: getTextColor,
diff --git a/www/kanban/jkanban_cp.js b/www/kanban/jkanban_cp.js
index d366a7fad..061b5f06b 100644
--- a/www/kanban/jkanban_cp.js
+++ b/www/kanban/jkanban_cp.js
@@ -50,6 +50,7 @@ define([
             boardTitleclick: function (/*el, boardId*/) {},
             addItemClick: function (/*el, boardId*/) {},
             renderMd: function (/*md*/) {},
+            applyHtml: function (/*html, node*/) {},
             refresh: function () {},
             onChange: function () {}
         };
@@ -522,7 +523,7 @@ define([
                     };
                 }
                 var nodeBody = document.createElement('div');
-                nodeBody.classList.add('kanban-item-body');
+                nodeBody.setAttribute('id', 'kanban-body-' + element.id);
                 $(nodeBody).on('click', 'a', function (e) {
                     e.preventDefault();
                     var a = e.target;
@@ -533,7 +534,9 @@ define([
                 nodeBody.onclick = function (e) {
                     e.preventDefault();
                 };
-                nodeBody.innerHTML = html;
+                //nodeBody.innerHTML = html;
+                self.applyHtml(html, nodeBody);
+                nodeBody.classList.add('kanban-item-body');
                 nodeItem.appendChild(nodeBody);
             }
             if (Array.isArray(element.tags)) {
@@ -796,6 +799,9 @@ define([
             return self;
         };
 
+        this.applyHtml = function (html, node) {
+            return self.options.applyHtml(html, node);
+        };
         this.renderMd = function (md) {
             return self.options.renderMd(md);
         };