From 7165217d00d0e24938e2c2eec87f832feaa7ff2a Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 29 Apr 2025 18:22:45 +0300
Subject: [PATCH] Add toggle markdown toolbar button to kanban and escape key
 for it #1831

---
 www/kanban/app-kanban.less | 28 ++++++++++++++++++++++++++++
 www/kanban/inner.js        | 32 ++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 700712758..b08f1f56c 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -120,9 +120,37 @@
         }
         margin-bottom: 5px;
     }
+    .markdown-label-row {
+        margin-bottom: 0.5rem;
+        position: relative;
+    }
+    .markdown-label-row label {
+        display: inline-block;
+        margin: 0;
+        vertical-align: middle;
+    }
+    
+    .cp-markdown-toolbar-toggle-button {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 3px 10px;
+        height: 32px;
+        margin: 0;
+        line-height: 1;
+        border-radius: @variables_radius;
+        display: inline-flex;
+    }
+
+    .cp-markdown-toolbar-toggle-button i.fa {
+        margin: 0 !important;
+    }
+        
     #cp-kanban-edit-body {
         border: 1px solid @cp_forms-border;
         border-radius: @variables_radius;
+        overflow: hidden; 
         .CodeMirror {
             height: 105px;
             resize: vertical;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index cdd22176c..2ca8f7ddc 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -199,7 +199,23 @@ define([
             dataObject.color = color;
             commit();
         });
-
+        var toggleButton = $(h('button.btn.btn-toolbar-alt.cp-markdown-toolbar-toggle-button.cp-toolbar-small-button', {
+            'aria-label': Messages.toolbar_tools,
+            'title': Messages.toolbar_tools,
+            'aria-pressed': false
+        }, [
+            h('i.fa.fa-wrench')
+        ])).on('click', function () {
+            var isExpanded = $(markdownTb?.toolbar).is(':visible');
+            $(this).attr('aria-pressed', String(!isExpanded));
+            $(markdownTb?.toolbar).toggle();
+        });
+        
+        var markdownEditorWrapper = h('div.markdown-label-row', [
+            h('label', { for: 'cp-kanban-edit-body' }, Messages.kanban_body),
+            toggleButton[0]
+        ]);
+        
         var conflicts, conflictContainer, titleInput, tagsDiv, text;
         var content = h('div', [
             conflictContainer = h('div#cp-kanban-edit-conflicts', [
@@ -208,10 +224,10 @@ define([
             ]),
             h('label', {for:'cp-kanban-edit-title'}, Messages.kanban_title),
             titleInput = h('input#cp-kanban-edit-title'),
-            h('label', {for:'cp-kanban-edit-body'}, Messages.kanban_body),
+            markdownEditorWrapper,
             h('div#cp-kanban-edit-body', [
                 text = h('textarea')
-            ]),
+            ]),            
             h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
             tagsDiv = h('div#cp-kanban-edit-tags'),
             h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
@@ -282,8 +298,16 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
+        $(markdownTb.toolbar).on('keydown', function (e) {
+            if (e.which === 27) { // Escape key
+                e.preventDefault();
+                e.stopPropagation();
+                editor.focus(); // Focus the editor instead of closing the modal
+            }
+        });        
         $(text).before(markdownTb.toolbar);
-        $(markdownTb.toolbar).show();
+        // Initially hide the toolbar
+        $(markdownTb.toolbar).hide();
         editor.refresh();
         var body = {
             getValue: function () {