From c010cfdf2a662cb40b1e3d4b7284df974e520dcf Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Thu, 27 Mar 2025 17:12:39 +0200
Subject: [PATCH 01/39] Make toolbar wrap #1831

---
 customize.dist/src/less2/include/toolbar.less | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index b904d26d8..7020b63ae 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -64,7 +64,10 @@
     }
 
     .cp-markdown-toolbar {
-        height: @toolbar_line-height;
+        min-height: @toolbar_line-height;
+        height: auto;
+        display: flex;
+        flex-wrap: wrap;
         background-color: @cp_toolbar-bg;
         color: @cp_toolbar-fg;
         display: none;
@@ -85,6 +88,12 @@
         button:nth-of-type(1) {
             margin-left: 0.3rem;
         }
+        
+        @media screen and (max-width: @browser_media-medium-screen) {
+            button:nth-of-type(1) {
+                margin-left: 0;
+            }
+        }
     }
 
     .cp-toolbar-container {

From 332d658abcfe1af8536cdb044e74d0ab76d939da Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Mon, 31 Mar 2025 12:04:56 +0300
Subject: [PATCH 02/39] Keep margin on small screens #1831

---
 customize.dist/src/less2/include/toolbar.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 7020b63ae..2a45d72e0 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -93,6 +93,7 @@
             button:nth-of-type(1) {
                 margin-left: 0;
             }
+            margin-left: 0.3rem;
         }
     }
 

From 16e162a15a5e0db7c0639444b1952d23c1e7b2b7 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Mon, 31 Mar 2025 12:16:10 +0300
Subject: [PATCH 03/39] Remove media-query #1831

---
 customize.dist/src/less2/include/toolbar.less | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 2a45d72e0..8d7894b2c 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -66,11 +66,11 @@
     .cp-markdown-toolbar {
         min-height: @toolbar_line-height;
         height: auto;
-        display: flex;
         flex-wrap: wrap;
         background-color: @cp_toolbar-bg;
         color: @cp_toolbar-fg;
         display: none;
+        margin-left: 0.3rem;
         button {
             height: @toolbar_line-height !important;
             outline: 0;
@@ -85,16 +85,6 @@
                 outline: @variables_focus_style;
             }
         }
-        button:nth-of-type(1) {
-            margin-left: 0.3rem;
-        }
-        
-        @media screen and (max-width: @browser_media-medium-screen) {
-            button:nth-of-type(1) {
-                margin-left: 0;
-            }
-            margin-left: 0.3rem;
-        }
     }
 
     .cp-toolbar-container {

From 20f3ff43feac6b135a89aceb18c94500dbdacf6d Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Mon, 31 Mar 2025 12:18:01 +0300
Subject: [PATCH 04/39] Remove redundat profile handling of markdown toolbar
 #1831

---
 www/profile/app-profile.less | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 70747493f..7662b80f6 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -203,11 +203,6 @@
         //margin-bottom: 20px;
         .cp-app-profile-description-code {
             display: none;
-            .cp-markdown-toolbar {
-                display: flex;
-                height: auto;
-                flex-wrap: wrap;
-            }
         }
         #cp-app-profile-description-info {
             overflow-wrap: anywhere;

From b0d543b5fb3589c16f43e61ccbdfbb79e7a7ec80 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Mon, 14 Apr 2025 13:19:26 +0300
Subject: [PATCH 05/39] Add escape key to markdown toolbar #1831

---
 www/common/common-ui-elements.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c3de21053..2a00c5321 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1171,6 +1171,14 @@ define([
             var href = Messages.mdToolbar_tutorial;
             common.openUnsafeURL(href);
         }).appendTo($toolbar);
+
+        $toolbar.on('keydown', function (e) {
+            if (e.key === 'Escape' || e.keyCode === 27) {
+                editor.focus();
+                e.preventDefault();
+            }
+        });
+
         return $toolbar;
     };
     UIElements.createMarkdownToolbar = function (common, editor, opts) {

From 8640bf51ddf4620fd59f74f32e622c7f96204464 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Sat, 19 Apr 2025 13:58:04 +0300
Subject: [PATCH 06/39] Remove lingering tooltips + fix profile desc editor esc
 #1831

---
 www/common/common-ui-elements.js | 8 ++++++++
 www/profile/inner.js             | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 2a00c5321..000bf4ae4 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1161,6 +1161,14 @@ define([
                 'class': 'pure-button fa ' + actions[k].icon,
                 title: Messages['mdToolbar_' + k] || k
             }).click(onClick);
+            $b.on('mouseenter focus', function () {
+                $('[aria-describedby]').each(function () {
+                    const tip = document.getElementById(this.getAttribute('aria-describedby'));
+                    if (tip && tip._tippy) {
+                        tip._tippy.hide(); // hide tooltips on unfocused elements
+                    }
+                });
+            });
             if (k === "embed") { $toolbar.prepend($b); }
             else { $toolbar.append($b); }
         }
diff --git a/www/profile/inner.js b/www/profile/inner.js
index 455595286..bccf79888 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -533,7 +533,7 @@ define([
         cm.configureTheme(common, function () {});
         editor.setOption("extraKeys", {
             "Esc": function () {
-                cm.getInputField().blur();
+                editor.getInputField().blur();
                 $(save).focus();
             }
         });

From 8334d787128b40ffaeda28e184a7391ff71b5cc5 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Sat, 19 Apr 2025 14:07:49 +0300
Subject: [PATCH 07/39] Make toolbar button outline fully visible #1831

---
 customize.dist/src/less2/include/toolbar.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 8d7894b2c..bd34a597c 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -65,6 +65,7 @@
 
     .cp-markdown-toolbar {
         min-height: @toolbar_line-height;
+        padding: 0.1rem 0;
         height: auto;
         flex-wrap: wrap;
         background-color: @cp_toolbar-bg;

From 518b36ea325589520403539db928ce8c7670576e Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Sat, 19 Apr 2025 14:18:04 +0300
Subject: [PATCH 08/39] More robust way to handle tooltips + fast movement
 #1831

---
 www/common/common-ui-elements.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 000bf4ae4..13c8cacdc 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1011,6 +1011,29 @@ define([
         return button;
     };
 
+    let hideTooltipsTimer;
+    const hideOtherTooltips = (except) => {
+        clearTimeout(hideTooltipsTimer);
+        hideTooltipsTimer = setTimeout(() => {
+            if (typeof tippy !== 'undefined' && typeof tippy.hideAll === 'function') {
+                tippy.hideAll({ exclude: except });
+            } else {
+                $('[aria-describedby]').each(function () {
+                    const tooltipId = this.getAttribute('aria-describedby');
+                    const tooltip = document.getElementById(tooltipId);
+                    if (
+                        tooltip &&
+                        tooltip._tippy &&
+                        tooltip._tippy.reference !== except
+                    ) {
+                        tooltip._tippy.hide();
+                    }
+                });
+            }
+        }, 60); // ~1 frame delay to buffer fast movement
+    };
+
+
     var createMdToolbar = function (common, editor, cfg) {
         cfg = cfg || {};
         var $toolbar = $('<div>', {
@@ -1162,12 +1185,7 @@ define([
                 title: Messages['mdToolbar_' + k] || k
             }).click(onClick);
             $b.on('mouseenter focus', function () {
-                $('[aria-describedby]').each(function () {
-                    const tip = document.getElementById(this.getAttribute('aria-describedby'));
-                    if (tip && tip._tippy) {
-                        tip._tippy.hide(); // hide tooltips on unfocused elements
-                    }
-                });
+                hideOtherTooltips(this);
             });
             if (k === "embed") { $toolbar.prepend($b); }
             else { $toolbar.append($b); }

From 56a408ea997081c64d128f09ff533543eba5d289 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Sat, 19 Apr 2025 14:40:19 +0300
Subject: [PATCH 09/39] Add escape key to code editor #1831

---
 www/code/inner.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/www/code/inner.js b/www/code/inner.js
index b445aaa20..fcad5e5c0 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -578,6 +578,24 @@ define([
         framework.setCursorGetter(CodeMirror.getCursor);
         editor.on('cursorActivity', updateCursor);
 
+        editor.setOption("extraKeys", {
+            "Esc": function() {
+                const $toolbar = $('.cp-markdown-toolbar:visible'); 
+                if ($toolbar.length) {
+                    const $btn = $toolbar.find('button:visible').first();
+                    if ($btn.length) {
+                        setTimeout(() => {
+                            $btn[0].focus();
+                            $btn[0].scrollIntoView({ block: 'center', behavior: 'smooth' }); // if toolbar is visible then escape key focuses on first button of toolbar
+                        }, 0);
+                    }
+                }
+                else {
+                    $(body).focus(); //fallback
+                }
+            }
+        });
+        
         framework.onEditableChange(function () {
             editor.setOption('readOnly', framework.isLocked() || framework.isReadOnly());
         });

From 21b722e3ddf3c61ab59b8f514fce2351998b8d9a Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 22 Apr 2025 10:54:53 +0300
Subject: [PATCH 10/39] Fix UI for kanban as well #1831

---
 customize.dist/src/less2/include/toolbar.less | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index bd34a597c..a56cba125 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -71,7 +71,6 @@
         background-color: @cp_toolbar-bg;
         color: @cp_toolbar-fg;
         display: none;
-        margin-left: 0.3rem;
         button {
             height: @toolbar_line-height !important;
             outline: 0;
@@ -86,6 +85,14 @@
                 outline: @variables_focus_style;
             }
         }
+        button:nth-of-type(1) {
+            margin-left: 0.3rem;
+        }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            button:nth-of-type(1) {
+                margin-left: 0;
+            }
+        }
     }
 
     .cp-toolbar-container {

From 5b748c26ecca9bd6b23302033d46a28ef9bd5871 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 22 Apr 2025 19:30:26 +0300
Subject: [PATCH 11/39] Refactor of markdown toolbar buttons #1831

---
 customize.dist/src/less2/include/toolbar.less |  5 +-
 www/common/common-ui-elements.js              | 55 +++++++------------
 www/form/app-form.less                        |  1 +
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index a56cba125..923604a0a 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -77,7 +77,10 @@
             border-radius: @variables_radius;
             color: @toolbar-color;
             .toolbar_button;
-            font: normal normal normal 14px/1 FontAwesome;
+            .fa {
+                font: normal normal normal 14px/1 FontAwesome;
+                font-family: FontAwesome;
+            }
             &:hover {
                 background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%));
             }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 13c8cacdc..c22f7dccf 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -905,7 +905,8 @@ define([
             case 'toggle':
                 button = $(h('button.cp-toolbar-tools', {
                     //title: data.title || '', // TODO display if the label text is collapsed
-                    'aria-label': data.text || Messages.toolbar_tools // Fallback
+                    'aria-label': data.text || Messages.toolbar_tools, // Fallback
+                    'aria-pressed': false
                 }, [
                     h('i.fa.' + (data.icon || 'fa-wrench')),
                     h('span.cp-toolbar-name', data.text || Messages.toolbar_tools)
@@ -923,6 +924,7 @@ define([
                 button.click(function (e) {
                     data.element.toggle();
                     var isVisible = data.element.is(':visible');
+                    button.attr('aria-pressed', isVisible ? 'true' : 'false');
                     if (callback) { callback(isVisible); }
                     if (isVisible) {
                         button.addClass('cp-toolbar-button-active');
@@ -1011,29 +1013,6 @@ define([
         return button;
     };
 
-    let hideTooltipsTimer;
-    const hideOtherTooltips = (except) => {
-        clearTimeout(hideTooltipsTimer);
-        hideTooltipsTimer = setTimeout(() => {
-            if (typeof tippy !== 'undefined' && typeof tippy.hideAll === 'function') {
-                tippy.hideAll({ exclude: except });
-            } else {
-                $('[aria-describedby]').each(function () {
-                    const tooltipId = this.getAttribute('aria-describedby');
-                    const tooltip = document.getElementById(tooltipId);
-                    if (
-                        tooltip &&
-                        tooltip._tippy &&
-                        tooltip._tippy.reference !== except
-                    ) {
-                        tooltip._tippy.hide();
-                    }
-                });
-            }
-        }, 60); // ~1 frame delay to buffer fast movement
-    };
-
-
     var createMdToolbar = function (common, editor, cfg) {
         cfg = cfg || {};
         var $toolbar = $('<div>', {
@@ -1180,20 +1159,28 @@ define([
         };
         for (var k in actions) {
             let $b = $('<button>', {
-                'data-type': k,
-                'class': 'pure-button fa ' + actions[k].icon,
-                title: Messages['mdToolbar_' + k] || k
-            }).click(onClick);
-            $b.on('mouseenter focus', function () {
-                hideOtherTooltips(this);
-            });
+                'data-notippy':1,
+                'class': 'pure-button cp-markdown-' + k,
+                'title': Messages['mdToolbar_' + k] || k,
+                'aria-label': Messages['mdToolbar_' + k] || k
+                }).append(
+                $('<i>', {
+                    'class': 'fa ' + actions[k].icon,
+                    'aria-hidden': 'true'
+                })).click(onClick);
             if (k === "embed") { $toolbar.prepend($b); }
             else { $toolbar.append($b); }
         }
         $('<button>', {
-            'class': 'pure-button fa fa-question cp-markdown-help',
-            title: Messages.mdToolbar_help
-        }).click(function () {
+            'data-notippy':1,
+            'class': 'pure-button cp-markdown-help',
+            'title': Messages.mdToolbar_help,
+            'aria-label': Messages.mdToolbar_help
+        }).append(
+            $('<i>', {
+                'class': 'fa fa-question',
+                'aria-hidden': 'true'
+            })).click(function () {
             var href = Messages.mdToolbar_tutorial;
             common.openUnsafeURL(href);
         }).appendTo($toolbar);
diff --git a/www/form/app-form.less b/www/form/app-form.less
index 1e9ae02a5..1319abd1e 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -834,6 +834,7 @@
                     }
                     .cp-markdown-toolbar {
                         display: block;
+                        background-color: transparent;
                     }
                 }
                 .cp-form-edit-block {

From 3002877418b44c052ddbbc6f52ff9fe0ee29175b Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 22 Apr 2025 19:40:09 +0300
Subject: [PATCH 12/39] Fix #1831

---
 www/code/inner.js                | 15 ++-------------
 www/common/common-ui-elements.js |  1 +
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/www/code/inner.js b/www/code/inner.js
index fcad5e5c0..ddf595abc 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -580,19 +580,8 @@ define([
 
         editor.setOption("extraKeys", {
             "Esc": function() {
-                const $toolbar = $('.cp-markdown-toolbar:visible'); 
-                if ($toolbar.length) {
-                    const $btn = $toolbar.find('button:visible').first();
-                    if ($btn.length) {
-                        setTimeout(() => {
-                            $btn[0].focus();
-                            $btn[0].scrollIntoView({ block: 'center', behavior: 'smooth' }); // if toolbar is visible then escape key focuses on first button of toolbar
-                        }, 0);
-                    }
-                }
-                else {
-                    $(body).focus(); //fallback
-                }
+                e.preventDefault();
+                $(body).focus();
             }
         });
         
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c22f7dccf..c1619fa66 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1160,6 +1160,7 @@ define([
         for (var k in actions) {
             let $b = $('<button>', {
                 'data-notippy':1,
+                'data-type': k,
                 'class': 'pure-button cp-markdown-' + k,
                 'title': Messages['mdToolbar_' + k] || k,
                 'aria-label': Messages['mdToolbar_' + k] || k

From 0c6bbd9507398ae8ea1d93fbae5a2a81898642c0 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 22 Apr 2025 19:53:15 +0300
Subject: [PATCH 13/39] Make forms textarea similar to kanban layout #1831

---
 www/form/app-form.less | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index 1319abd1e..81309c2f6 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -819,6 +819,9 @@
                     display: flex;
                     flex-wrap: wrap;
                     align-items: baseline;
+                    border: 1px solid @cp_forms-border;
+                    border-radius: @variables_radius;
+                    margin-top: 0.5rem;
                     .CodeMirror {
                         cursor: default;
                         flex: 1;
@@ -827,13 +830,15 @@
                         width: 80%;
                         min-height: 200px;
                         height: 200px;
-                        border: 1px solid @cp_forms-border;
                         .CodeMirror-placeholder {
                             color: #777;
                         }
                     }
                     .cp-markdown-toolbar {
                         display: block;
+                        padding: 0.1rem 0;
+                        border-radius: @variables_radius 0;
+                        width: 100%;
                         background-color: transparent;
                     }
                 }

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 14/39] 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 () {

From b3964d5b614ae843d740de9b62d0d1d8da3d5841 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 29 Apr 2025 19:17:17 +0300
Subject: [PATCH 15/39] Make toggle button creation a UIElements function to be
 reused #1831

---
 www/common/common-ui-elements.js | 35 ++++++++++++++++++++++++++++++++
 www/kanban/inner.js              | 24 +++++++---------------
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c1619fa66..a2fb77a5b 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1341,6 +1341,41 @@ define([
         };
     };
 
+    UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
+        var $button = $('<button>', {
+            'class': 'btn btn-toolbar-alt cp-markdown-toolbar-toggle-button',
+            'aria-label': Messages.toolbar_tools,
+            'data-notippy':1,
+            'title': Messages.toolbar_tools,
+            'aria-pressed': false,
+            'type': 'button'
+        }).append(
+            $('<i>', {
+                'class': 'fa fa-wrench',
+                'aria-hidden': true
+            })
+        );
+    
+        $button.on('click', function () {
+            var isExpanded = $(toolbarElement).is(':visible');
+            $(this).attr('aria-pressed', String(!isExpanded));
+            $(toolbarElement).toggle();
+        });
+    
+        $(toolbarElement).on('keydown', function (e) {
+            if (e.key === 'Escape' || e.which === 27) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (editor && editor.focus) {
+                    editor.focus();
+                }
+            }
+        });
+    
+        return $button;
+    };
+    
+
     /*  Create a usage bar which keeps track of how much storage space is used
         by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
         so we throttle its usage. Clients will not update more than once per
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 2ca8f7ddc..79ec0d479 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -199,21 +199,9 @@ 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]
+            h('label', { for: 'cp-kanban-edit-body' }, Messages.kanban_body)
         ]);
         
         var conflicts, conflictContainer, titleInput, tagsDiv, text;
@@ -290,7 +278,7 @@ define([
                 $tags.find('.token-input').focus();
             }
             e.stopPropagation();
-        });
+        });  
         var common = framework._.sfCommon;
         var markdownTb = common.createMarkdownToolbar(editor, {
             embed: function (mt) {
@@ -298,16 +286,18 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
+        var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
+        $(markdownEditorWrapper).append(toggleButton);
         $(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);
         // Initially hide the toolbar
-        $(markdownTb.toolbar).hide();
+        $(markdownTb.toolbar).hide(); 
         editor.refresh();
         var body = {
             getValue: function () {

From babbac95821bc6fd1c1babc872d79e8fd01d26fb Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 29 Apr 2025 19:43:22 +0300
Subject: [PATCH 16/39] Handle screen width changes #1831

---
 www/kanban/inner.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 79ec0d479..9149bf8d1 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -175,6 +175,19 @@ define([
         _updateBoardsThrottle(framework, kanban, boards);
     };
 
+    var updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
+        if (Util.isSmallScreen()) {
+            if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
+                var toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
+                $(markdownEditorWrapper).append(toggleButton);
+            }
+            $(toolbar).hide();
+        } else {
+            $(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
+            $(toolbar).show();
+        }
+    };
+    
     var editModal;
     var PROPERTIES = ['title', 'body', 'tags', 'color'];
     var BOARD_PROPERTIES = ['title', 'color'];
@@ -286,8 +299,10 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
-        var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
-        $(markdownEditorWrapper).append(toggleButton);
+        updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        $(window).on('resize', function() {
+            updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        });
         $(markdownTb.toolbar).on('keydown', function (e) {
             if (e.which === 27) { // Escape key
                 e.preventDefault();
@@ -296,8 +311,6 @@ define([
             }
         });    
         $(text).before(markdownTb.toolbar);
-        // Initially hide the toolbar
-        $(markdownTb.toolbar).hide(); 
         editor.refresh();
         var body = {
             getValue: function () {

From 9b3d85a0fe4e3d8a002a61a7539ca3b65c7e240b Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Mon, 5 May 2025 18:20:21 +0300
Subject: [PATCH 17/39] Add markdown toggle button to forms #1831

---
 www/form/app-form.less     | 18 ++++++++++++++++++
 www/form/inner.js          | 19 +++++++++++++++++--
 www/kanban/app-kanban.less |  4 ++--
 www/kanban/inner.js        |  2 +-
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index 81309c2f6..e092ed67c 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -431,6 +431,24 @@
                     }
                 }
 
+                .cp-editor-wrapper {
+                    .cp-markdown-toggle-row {
+                        margin: 0.5rem 0;
+                        position: relative;
+                        .cp-markdown-toolbar-toggle-button {
+                            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-form-creator-add-inline {
                     display: flex;
                     flex-flow: row;
diff --git a/www/form/inner.js b/www/form/inner.js
index 5543433ac..abb0a8878 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1125,8 +1125,17 @@ define([
                                     editor.replaceSelection($(mt)[0].outerHTML);
                                 }
                             });
+                            var toggleRow = h('div.cp-markdown-toggle-row');
                             $(block).prepend(markdownTb.toolbar);
-                            $(markdownTb.toolbar).show();
+                            if(Util.isSmallScreen()) {
+                                var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
+                                $(toggleRow).append(toggleButton);
+                                $(markdownTb.toolbar).hide();
+                            }
+                            else {
+                                $(markdownTb.toolbar).show();
+                            }
+                            $(block).prepend(toggleRow);
                             cm.configureTheme(APP.common, function () {});
                         }
 
@@ -1159,8 +1168,14 @@ define([
                             };
                         };
 
+                        var outerWrapper = h('div.cp-editor-wrapper', [
+                            toggleRow,
+                            block
+                        ]);
+                        
+
                         return [
-                            block,
+                            outerWrapper,
                             cancelBlock
                         ];
                     },
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index b08f1f56c..4e909c07b 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -120,11 +120,11 @@
         }
         margin-bottom: 5px;
     }
-    .markdown-label-row {
+    .cp-markdown-label-row {
         margin-bottom: 0.5rem;
         position: relative;
     }
-    .markdown-label-row label {
+    .cp-markdown-label-row label {
         display: inline-block;
         margin: 0;
         vertical-align: middle;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 9149bf8d1..656cb72f1 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -213,7 +213,7 @@ define([
             commit();
         });
 
-        var markdownEditorWrapper = h('div.markdown-label-row', [
+        var markdownEditorWrapper = h('div.cp-markdown-label-row', [
             h('label', { for: 'cp-kanban-edit-body' }, Messages.kanban_body)
         ]);
         

From a13c354901c088f89aa0c3653fb002837232d5e5 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 6 May 2025 18:09:08 +0300
Subject: [PATCH 18/39] Add toggle button to profile #1831

---
 www/profile/app-profile.less |  3 +++
 www/profile/inner.js         | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 7662b80f6..4634f8483 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -110,6 +110,9 @@
             margin: 5px !important;
         }
     }
+    .cp-markdown-toggle-row {
+        margin-bottom: 0.5rem;
+    }
 
     .cp-app-profile-resizer {
         text-align: center;
diff --git a/www/profile/inner.js b/www/profile/inner.js
index bccf79888..bb6c08a0f 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -539,8 +539,19 @@ define([
         });
 
         var markdownTb = common.createMarkdownToolbar(editor);
+        var toggleRow = h('div.cp-markdown-toggle-row');
+        if(Util.isSmallScreen()) {
+            var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
+            $(toggleRow).append(toggleButton);
+            $(markdownTb.toolbar).hide();
+            $(toggleButton).removeClass('btn-toolbar-alt');
+            $(toggleButton).append('<span class="toggle-label">Show tools</span>');
+        }
+        else {
+            $(markdownTb.toolbar).show();
+        }
         $(code).prepend(markdownTb.toolbar);
-        $(markdownTb.toolbar).show();
+        $(code).prepend(toggleRow); 
 
         $(button).click(function () {
             $(code).show();

From f7e690e7002808eaa0631ea4251e06efec4141bc Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Fri, 9 May 2025 16:51:58 +0300
Subject: [PATCH 19/39] Fix dynamic resizing #1831

---
 www/common/common-ui-elements.js | 14 ++++++++++++++
 www/form/inner.js                | 12 ++++--------
 www/kanban/inner.js              | 18 ++----------------
 www/profile/inner.js             | 20 +++++++++-----------
 4 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index a2fb77a5b..02a351a10 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1374,6 +1374,20 @@ define([
     
         return $button;
     };
+    UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
+        let toggleButton = null;
+        if (Util.isSmallScreen()) {
+            if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
+                toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
+                $(markdownEditorWrapper).append(toggleButton);
+            }
+            $(toolbar).hide();
+        } else {
+            $(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
+            $(toolbar).show();
+        }
+        return toggleButton; // May return null if not created
+    };
     
 
     /*  Create a usage bar which keeps track of how much storage space is used
diff --git a/www/form/inner.js b/www/form/inner.js
index abb0a8878..d30cc744d 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1127,14 +1127,10 @@ define([
                             });
                             var toggleRow = h('div.cp-markdown-toggle-row');
                             $(block).prepend(markdownTb.toolbar);
-                            if(Util.isSmallScreen()) {
-                                var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
-                                $(toggleRow).append(toggleButton);
-                                $(markdownTb.toolbar).hide();
-                            }
-                            else {
-                                $(markdownTb.toolbar).show();
-                            }
+                            UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+                            $(window).on('resize', function() {
+                                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+                            });
                             $(block).prepend(toggleRow);
                             cm.configureTheme(APP.common, function () {});
                         }
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 656cb72f1..c746cb74c 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -174,20 +174,6 @@ define([
         }
         _updateBoardsThrottle(framework, kanban, boards);
     };
-
-    var updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
-        if (Util.isSmallScreen()) {
-            if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
-                var toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
-                $(markdownEditorWrapper).append(toggleButton);
-            }
-            $(toolbar).hide();
-        } else {
-            $(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
-            $(toolbar).show();
-        }
-    };
-    
     var editModal;
     var PROPERTIES = ['title', 'body', 'tags', 'color'];
     var BOARD_PROPERTIES = ['title', 'color'];
@@ -299,9 +285,9 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
-        updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
         $(window).on('resize', function() {
-            updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+            UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
         });
         $(markdownTb.toolbar).on('keydown', function (e) {
             if (e.which === 27) { // Escape key
diff --git a/www/profile/inner.js b/www/profile/inner.js
index bb6c08a0f..50608fe14 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -540,19 +540,17 @@ define([
 
         var markdownTb = common.createMarkdownToolbar(editor);
         var toggleRow = h('div.cp-markdown-toggle-row');
-        if(Util.isSmallScreen()) {
-            var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor);
-            $(toggleRow).append(toggleButton);
-            $(markdownTb.toolbar).hide();
-            $(toggleButton).removeClass('btn-toolbar-alt');
-            $(toggleButton).append('<span class="toggle-label">Show tools</span>');
-        }
-        else {
-            $(markdownTb.toolbar).show();
-        }
+        var toggleButton = UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+        $(window).on('resize', function() {
+            UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+        });
+        $(toggleButton).removeClass('btn-toolbar-alt');
+        $(toggleButton).append('<span class="toggle-label">Show tools</span>');
         $(code).prepend(markdownTb.toolbar);
         $(code).prepend(toggleRow); 
-
+        if(!Util.isSmallScreen()) {
+            $(markdownTb.toolbar).show();
+        }
         $(button).click(function () {
             $(code).show();
             APP.editor.refresh();

From d257dbab3f8f587b6bd06da50c5a62d466fd5b06 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 14 May 2025 13:24:05 +0300
Subject: [PATCH 20/39] Minor fixes + add label to all buttons #1831

---
 www/common/common-ui-elements.js | 6 +++++-
 www/form/app-form.less           | 4 +---
 www/form/inner.js                | 1 -
 www/kanban/app-kanban.less       | 5 -----
 www/profile/inner.js             | 2 --
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 02a351a10..938746da9 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1343,7 +1343,7 @@ define([
 
     UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
         var $button = $('<button>', {
-            'class': 'btn btn-toolbar-alt cp-markdown-toolbar-toggle-button',
+            'class': 'btn cp-markdown-toolbar-toggle-button',
             'aria-label': Messages.toolbar_tools,
             'data-notippy':1,
             'title': Messages.toolbar_tools,
@@ -1353,6 +1353,10 @@ define([
             $('<i>', {
                 'class': 'fa fa-wrench',
                 'aria-hidden': true
+            }),
+            $('<span>', {
+                'class': 'cp-toolbar-label',
+                'text': Messages.toolbar_tools
             })
         );
     
diff --git a/www/form/app-form.less b/www/form/app-form.less
index e092ed67c..cd74d4aa6 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -443,9 +443,6 @@
                             border-radius: @variables_radius;
                             display: inline-flex;
                         }
-                        .cp-markdown-toolbar-toggle-button i.fa {
-                            margin: 0 !important;
-                        }
                     }
                 }
 
@@ -840,6 +837,7 @@
                     border: 1px solid @cp_forms-border;
                     border-radius: @variables_radius;
                     margin-top: 0.5rem;
+                    padding: 1px; 
                     .CodeMirror {
                         cursor: default;
                         flex: 1;
diff --git a/www/form/inner.js b/www/form/inner.js
index d30cc744d..bc73bc7dd 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1127,7 +1127,6 @@ define([
                             });
                             var toggleRow = h('div.cp-markdown-toggle-row');
                             $(block).prepend(markdownTb.toolbar);
-                            UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
                             $(window).on('resize', function() {
                                 UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
                             });
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 4e909c07b..5f4edd6d4 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -142,11 +142,6 @@
         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;
diff --git a/www/profile/inner.js b/www/profile/inner.js
index 50608fe14..d6557a430 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -544,8 +544,6 @@ define([
         $(window).on('resize', function() {
             UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
         });
-        $(toggleButton).removeClass('btn-toolbar-alt');
-        $(toggleButton).append('<span class="toggle-label">Show tools</span>');
         $(code).prepend(markdownTb.toolbar);
         $(code).prepend(toggleRow); 
         if(!Util.isSmallScreen()) {

From 25720662b7a30a65e02d655ea1b4ba62514e0f45 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 14 May 2025 15:46:46 +0300
Subject: [PATCH 21/39] Final fixes #1831

---
 www/form/inner.js    | 3 +++
 www/profile/inner.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/www/form/inner.js b/www/form/inner.js
index bc73bc7dd..2eb8265ff 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1127,6 +1127,9 @@ define([
                             });
                             var toggleRow = h('div.cp-markdown-toggle-row');
                             $(block).prepend(markdownTb.toolbar);
+                            setTimeout(() => {
+                                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+                            }, 10);
                             $(window).on('resize', function() {
                                 UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
                             });
diff --git a/www/profile/inner.js b/www/profile/inner.js
index d6557a430..a99f60534 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -540,7 +540,7 @@ define([
 
         var markdownTb = common.createMarkdownToolbar(editor);
         var toggleRow = h('div.cp-markdown-toggle-row');
-        var toggleButton = UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+        UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
         $(window).on('resize', function() {
             UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
         });

From dc6acfab9ddf51d5fa0ef79c7aeeaccdd8b4a006 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 21 May 2025 15:47:39 +0300
Subject: [PATCH 22/39] Prevent default closing of modal #1831

---
 www/kanban/inner.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index c746cb74c..4cb9ab9dd 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -285,7 +285,7 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
-        UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        var toggleButtonMarkdown = UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
         $(window).on('resize', function() {
             UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
         });
@@ -295,7 +295,19 @@ define([
                 e.stopPropagation();
                 editor.focus(); // Focus the editor instead of closing the modal
             }
-        });    
+            else if (e.which == 13 || e.which == 9) { // "Enter" or "Tab" key should not close modal
+                e.stopPropagation();
+            }
+        });  
+        $(toggleButtonMarkdown).on('keydown', function (e) {
+            if (e.which === 13) { // "Enter" should toggle the toolbar, but not close the modal
+                e.preventDefault();
+                e.stopPropagation();
+                $(this).click(); // simulate click to toggle
+            } else if (e.which === 9) {
+                e.stopPropagation();
+            }
+        });
         $(text).before(markdownTb.toolbar);
         editor.refresh();
         var body = {

From 4f945fffbda71d3dc5f6957cb3ece9fa8616fc11 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 28 May 2025 15:25:42 +0300
Subject: [PATCH 23/39] Implement review fixes (all except profile) + fix issue
 with markdown toolbar not appearing

---
 .../src/less2/include/markdown.less           | 29 +++++++++++++++
 www/common/common-ui-elements.js              | 14 +++++--
 www/form/app-form.less                        | 37 ++++++++++++-------
 www/form/inner.js                             | 21 +++++++++--
 www/kanban/app-kanban.less                    | 28 +++++++++-----
 www/profile/app-profile.less                  |  3 ++
 6 files changed, 102 insertions(+), 30 deletions(-)

diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less
index 16e6654ed..42e5ea0d8 100644
--- a/customize.dist/src/less2/include/markdown.less
+++ b/customize.dist/src/less2/include/markdown.less
@@ -289,3 +289,32 @@
     }
 }
 
+//reusable styling for the markdown toggle button across all apps
+ .markdown-toolbar-button-style() {
+        padding: 3px 5px;
+        height: fit-content;
+        margin: 0;
+        line-height: 1;
+        border-radius: @variables_radius;
+        display: inline-flex;
+        background-color: @cp_toolbar-bottom-bg;
+        color: @cp_toolbar-bottom-fg;
+
+        &:hover {
+            background-color: fade(@cryptpad_text_col, 20%);
+            border-color: @cryptpad_text_col;
+            color: @cryptpad_text_col;
+        }
+
+        &.cp-toolbar-button-active {
+            background-color: @cp_toolbar-bg;
+            border-color: @cp_toolbar-fg;
+            color: @cp_toolbar-fg;
+
+            &:hover {
+                background-color: fade(@cryptpad_text_col, 20%);
+            }
+        }
+}
+
+
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 938746da9..5d5a5d940 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1343,7 +1343,7 @@ define([
 
     UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
         var $button = $('<button>', {
-            'class': 'btn cp-markdown-toolbar-toggle-button',
+            'class': 'btn cp-markdown-toggle-button',
             'aria-label': Messages.toolbar_tools,
             'data-notippy':1,
             'title': Messages.toolbar_tools,
@@ -1363,6 +1363,7 @@ define([
         $button.on('click', function () {
             var isExpanded = $(toolbarElement).is(':visible');
             $(this).attr('aria-pressed', String(!isExpanded));
+            $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
             $(toolbarElement).toggle();
         });
     
@@ -1378,16 +1379,21 @@ define([
     
         return $button;
     };
+
+    var isSmallScreenToolbar = function () {
+        return window.innerHeight < 530 || window.innerWidth < 530;
+    }
+
     UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
         let toggleButton = null;
-        if (Util.isSmallScreen()) {
-            if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
+        if (isSmallScreenToolbar()) {
+            if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
                 toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
                 $(markdownEditorWrapper).append(toggleButton);
             }
             $(toolbar).hide();
         } else {
-            $(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
+            $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
             $(toolbar).show();
         }
         return toggleButton; // May return null if not created
diff --git a/www/form/app-form.less b/www/form/app-form.less
index cd74d4aa6..1ac059965 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -176,6 +176,13 @@
         flex: 1;
         justify-content: center;
         min-width: 300px;
+        .cp-markdown-toggle-row {
+            margin: 0.5rem 0;
+            position: relative;
+            .cp-markdown-toggle-button {
+                .markdown-toolbar-button-style() !important;
+            }
+        }
 
         div.timeline-container {
             width: 100%;
@@ -381,6 +388,12 @@
                         }
                     }
                 }
+                div.cp-form-response-msg-container {
+                    .cp-markdown-toolbar {
+                        background-color: transparent;
+                        border-radius: @variables_radius @variables_radius 0 0;
+                    }
+                }
             }
             div.cp-form-creator-results {
                 .cp-form-block {
@@ -432,18 +445,12 @@
                 }
 
                 .cp-editor-wrapper {
-                    .cp-markdown-toggle-row {
-                        margin: 0.5rem 0;
-                        position: relative;
-                        .cp-markdown-toolbar-toggle-button {
-                            padding: 3px 10px;
-                            height: 32px;
-                            margin: 0;
-                            line-height: 1;
-                            border-radius: @variables_radius;
-                            display: inline-flex;
-                        }
+                    .cp-form-edit-options-block {
+                        padding: 1px;
+                        overflow: hidden;
+                        border: 1px solid @cp_forms-border;
                     }
+                   
                 }
 
                 .cp-form-creator-add-inline {
@@ -547,7 +554,6 @@
                     padding-bottom: 75px;
                     button {
                         white-space: initial;
-                        line-height: 25px;
                         padding: 5.5px 6px;
                     }
                     .cp-form-response-msg-hint {
@@ -834,7 +840,6 @@
                     display: flex;
                     flex-wrap: wrap;
                     align-items: baseline;
-                    border: 1px solid @cp_forms-border;
                     border-radius: @variables_radius;
                     margin-top: 0.5rem;
                     padding: 1px; 
@@ -1380,8 +1385,12 @@
         }
     }
     .cp-form-response-modal {
-        .CodeMirror {
+        .cp-form-markdown-editor-wrapper {
             border: 1px solid @cp_forms-border;
+            border-radius: @variables_radius; 
+        }
+        .CodeMirror {
+            border-radius: 0 0 @variables_radius @variables_radius; 
         }
     }
 
diff --git a/www/form/inner.js b/www/form/inner.js
index 2eb8265ff..f89fdf463 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -5571,30 +5571,45 @@ define([
             ]);
             var editButtons = h('div.cp-form-edit-buttons-container', [ preview, edit, del ]);
 
+            var toggleRow = h('div.cp-markdown-toggle-row'); 
+            var markdownWrapper = h('div.cp-form-markdown-editor-wrapper', t);
             var editDiv, previewDiv;
             var div = h('div.cp-form-block.editable.nodrag.cp-form-submit-message', [
                 h('div.cp-form-block-content', [
                     p,
-                    editDiv = h('div.cp-form-response-modal', t),
+                    editDiv = h('div.cp-form-response-modal', toggleRow, markdownWrapper),
                     previewDiv = h('div.cp-form-response-preview#cp-response-preview'),
                     editButtons
                 ]),
             ]);
             var cm = APP.responseCM = SFCodeMirror.create("gfm", CMeditor, t);
             var editor = APP.responseEditor = cm.editor;
-
+            editor.setOption("extraKeys", {
+                "Esc": function() {
+                    $(preview).focus();
+                }
+            });
             var markdownTb = APP.common.createMarkdownToolbar(editor, {
                 embed: function (mt) {
                     editor.focus();
                     editor.replaceSelection($(mt)[0].outerHTML);
                 }
             });
-            var $tb = $(markdownTb.toolbar).insertAfter($(p));
+            var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor)[0];
+            toggleRow.appendChild(toggleButton);
+            markdownWrapper.insertBefore(markdownTb.toolbar instanceof jQuery ? markdownTb.toolbar[0] : markdownTb.toolbar,t);
+            setTimeout(() => {
+                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+            }, 10);
+            $(window).on('resize', function () {
+                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+            });
 
             var $edit = $(editDiv);
             var $preview = $(previewDiv);
             var $p = $(preview);
             var $e = $(edit);
+            var $tb = $(markdownTb);
             var previewState = true;
 
             var updatePreview = function () {
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 5f4edd6d4..78238b478 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -130,18 +130,14 @@
         vertical-align: middle;
     }
     
-    .cp-markdown-toolbar-toggle-button {
+    .cp-markdown-toggle-button {
+        .markdown-toolbar-button-style();
         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-kanban-edit-body {
         border: 1px solid @cp_forms-border;
         border-radius: @variables_radius;
@@ -155,7 +151,7 @@
             box-sizing: content-box;
         }
         .cp-markdown-toolbar {
-            background-color: @cp_kanban-conflict-bg;
+            background-color: transparent;
             color: @cp_kanban-fg;
             border-radius: @variables_radius @variables_radius 0px 0px;
             button {
@@ -164,6 +160,20 @@
                     color: @cp_kanban-conflict-bg;
                 }
             }
+            .btn {
+            outline: 0;
+            border-radius: @variables_radius;
+            .fa {
+                font: normal normal normal 14px/1 FontAwesome;
+                font-family: FontAwesome;
+            }
+            &:hover {
+                background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%));
+            }
+            &:focus-visible {
+                outline: @variables_focus_style;
+            }
+        }
         }
         margin-bottom: 15px;
     }
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 4634f8483..bd797da58 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -112,6 +112,9 @@
     }
     .cp-markdown-toggle-row {
         margin-bottom: 0.5rem;
+        .btn.cp-markdown-toggle-button {
+            .markdown-toolbar-button-style() !important;
+        }
     }
 
     .cp-app-profile-resizer {

From 35ede22433909c3c941c0ea3ec509db219b74396 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 28 May 2025 15:44:48 +0300
Subject: [PATCH 24/39] Add review fixes for profile #1831

---
 www/profile/app-profile.less | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index bd797da58..002a17e54 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -209,6 +209,11 @@
         //margin-bottom: 20px;
         .cp-app-profile-description-code {
             display: none;
+            .cp-markdown-toolbar {
+                max-width: 31rem;
+                background-color: #323232;
+                border-radius: @variables_radius @variables_radius 0 0;
+            }
         }
         #cp-app-profile-description-info {
             overflow-wrap: anywhere;
@@ -230,6 +235,7 @@
             font-size: 16px;
             line-height: initial;
             max-width: 31rem;
+            border-radius: 0 0 @variables_radius @variables_radius;
             pre {
                 margin: 0;
                 font-family: inherit;

From c961102fc4439601355f451588330cbd8aeae367 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 4 Jun 2025 12:16:19 +0300
Subject: [PATCH 25/39] Keep state of toolbar between resizing event #1831

---
 www/common/common-ui-elements.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 5d5a5d940..cd33f9e65 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1365,6 +1365,7 @@ define([
             $(this).attr('aria-pressed', String(!isExpanded));
             $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
             $(toolbarElement).toggle();
+            toolbarVisibleOnSmallScreen = !isExpanded;
         });
     
         $(toolbarElement).on('keydown', function (e) {
@@ -1384,19 +1385,33 @@ define([
         return window.innerHeight < 530 || window.innerWidth < 530;
     }
 
+    let toolbarVisibleOnSmallScreen = false;
+    let wasSmallScreen = isSmallScreenToolbar();
+
     UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
         let toggleButton = null;
-        if (isSmallScreenToolbar()) {
+        const isSmallScreen = isSmallScreenToolbar();
+
+        if (isSmallScreen) {
             if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
                 toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
                 $(markdownEditorWrapper).append(toggleButton);
             }
-            $(toolbar).hide();
+            if (toolbarVisibleOnSmallScreen) {
+                $(toolbar).show();
+                $(markdownEditorWrapper).find('.cp-markdown-toggle-button').addClass('cp-toolbar-button-active')
+                    .attr('aria-pressed', true);
+            } else {
+                $(toolbar).hide();
+                $(markdownEditorWrapper).find('.cp-markdown-toggle-button').removeClass('cp-toolbar-button-active')
+                    .attr('aria-pressed', false);
+            }
         } else {
             $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
             $(toolbar).show();
         }
-        return toggleButton; // May return null if not created
+        wasSmallScreen = isSmallScreen;
+        return toggleButton;
     };
     
 

From a410571fe212d0240e70890faf967e083d3f2792 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 4 Jun 2025 16:48:19 +0300
Subject: [PATCH 26/39] Implement last review fixes #1831

---
 customize.dist/messages.js       |  3 +++
 www/common/common-ui-elements.js | 12 ++++++++----
 www/form/app-form.less           |  3 +++
 www/kanban/app-kanban.less       |  3 +++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index 9818e3d88..50c18df24 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -145,6 +145,9 @@ define(req, function(AppConfig, Default, Language) {
     Messages.hide_password = "Hide password";
     Messages.next_templateList = "Next template list";
     Messages.previous_templateList = "Previous template list";
+    Messages.toolbar_text_tools  = "Text tools";
+    Messages.toolbar_show_text_tools = "Show text tools";
+    Messages.toolbar_hide_text_tools = "Hide text tools";
     return Messages;
 
 });
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index cd33f9e65..90b6e5041 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1344,9 +1344,9 @@ define([
     UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
         var $button = $('<button>', {
             'class': 'btn cp-markdown-toggle-button',
-            'aria-label': Messages.toolbar_tools,
+            'aria-label': Messages.toolbar_show_text_tools,
             'data-notippy':1,
-            'title': Messages.toolbar_tools,
+            'title': Messages.toolbar_show_text_tools,
             'aria-pressed': false,
             'type': 'button'
         }).append(
@@ -1356,7 +1356,7 @@ define([
             }),
             $('<span>', {
                 'class': 'cp-toolbar-label',
-                'text': Messages.toolbar_tools
+                'text': Messages.toolbar_text_tools // XXX
             })
         );
     
@@ -1365,7 +1365,11 @@ define([
             $(this).attr('aria-pressed', String(!isExpanded));
             $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
             $(toolbarElement).toggle();
-            toolbarVisibleOnSmallScreen = !isExpanded;
+
+            const newLabel = !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools; // XXX
+            $button
+                .attr('title', newLabel)
+                .attr('aria-label', newLabel);
         });
     
         $(toolbarElement).on('keydown', function (e) {
diff --git a/www/form/app-form.less b/www/form/app-form.less
index 1ac059965..79073aebf 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -181,6 +181,9 @@
             position: relative;
             .cp-markdown-toggle-button {
                 .markdown-toolbar-button-style() !important;
+                &.cp-toolbar-button-active {
+                    background-color: transparent !important;
+                }
             }
         }
 
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 78238b478..052699803 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -136,6 +136,9 @@
         right: 0;
         top: 50%;
         transform: translateY(-50%);
+        &.cp-toolbar-button-active {
+            background-color: transparent;
+        }
     } 
 
     #cp-kanban-edit-body {

From 4d56adedf935288cb1fa3d05e195991321e13027 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 4 Jun 2025 17:04:29 +0300
Subject: [PATCH 27/39] Use hyperscript + toggle label #1831

---
 www/common/common-ui-elements.js | 32 +++++++++++++-------------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 90b6e5041..369a0990c 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1342,23 +1342,17 @@ define([
     };
 
     UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
-        var $button = $('<button>', {
-            'class': 'btn cp-markdown-toggle-button',
-            'aria-label': Messages.toolbar_show_text_tools,
-            'data-notippy':1,
-            'title': Messages.toolbar_show_text_tools,
-            'aria-pressed': false,
-            'type': 'button'
-        }).append(
-            $('<i>', {
-                'class': 'fa fa-wrench',
-                'aria-hidden': true
-            }),
-            $('<span>', {
-                'class': 'cp-toolbar-label',
-                'text': Messages.toolbar_text_tools // XXX
-            })
-        );
+        var $button = $(h('button', {
+                'class': 'btn cp-markdown-toggle-button',
+                'aria-label': Messages.toolbar_show_text_tools,
+                'aria-pressed': 'false',
+                'data-notippy':1,
+                'type': 'button',
+                'title': Messages.toolbar_show_text_tools
+            }, [
+                h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
+                h('span.cp-toolbar-label', Messages.toolbar_text_tools)
+        ]));
     
         $button.on('click', function () {
             var isExpanded = $(toolbarElement).is(':visible');
@@ -1368,8 +1362,8 @@ define([
 
             const newLabel = !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools; // XXX
             $button
-                .attr('title', newLabel)
-                .attr('aria-label', newLabel);
+            .attr('title', newLabel)
+            .attr('aria-label', newLabel);
         });
     
         $(toolbarElement).on('keydown', function (e) {

From f84a4f8cd611616d6f56707f5c63af742ed74119 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 4 Jun 2025 17:10:32 +0300
Subject: [PATCH 28/39] Remove extra spaces #1831

---
 www/common/common-ui-elements.js | 1 -
 www/form/app-form.less           | 1 -
 www/form/inner.js                | 1 -
 www/kanban/inner.js              | 4 ++--
 www/profile/app-profile.less     | 2 +-
 5 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 369a0990c..39c888ac1 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1412,7 +1412,6 @@ define([
         return toggleButton;
     };
     
-
     /*  Create a usage bar which keeps track of how much storage space is used
         by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
         so we throttle its usage. Clients will not update more than once per
diff --git a/www/form/app-form.less b/www/form/app-form.less
index 79073aebf..3aa0a86d0 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -453,7 +453,6 @@
                         overflow: hidden;
                         border: 1px solid @cp_forms-border;
                     }
-                   
                 }
 
                 .cp-form-creator-add-inline {
diff --git a/www/form/inner.js b/www/form/inner.js
index f89fdf463..240325338 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1171,7 +1171,6 @@ define([
                             block
                         ]);
                         
-
                         return [
                             outerWrapper,
                             cancelBlock
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 4cb9ab9dd..be7855004 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -214,7 +214,7 @@ define([
             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),
@@ -277,7 +277,7 @@ define([
                 $tags.find('.token-input').focus();
             }
             e.stopPropagation();
-        });  
+        });
         var common = framework._.sfCommon;
         var markdownTb = common.createMarkdownToolbar(editor, {
             embed: function (mt) {
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 002a17e54..f13f1ad4e 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -211,7 +211,7 @@
             display: none;
             .cp-markdown-toolbar {
                 max-width: 31rem;
-                background-color: #323232;
+                background-color: @cp_toolbar-bg;
                 border-radius: @variables_radius @variables_radius 0 0;
             }
         }

From ead09ca46c37b80a5e5d5ff98fe40cc502f8bbcb Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 4 Jun 2025 17:30:28 +0300
Subject: [PATCH 29/39] Keep state #1831

---
 www/common/common-ui-elements.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 39c888ac1..8c5097a01 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1340,6 +1340,7 @@ define([
             text: text
         };
     };
+    let toolbarVisibleOnSmallScreen = false;
 
     UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
         var $button = $(h('button', {
@@ -1364,6 +1365,7 @@ define([
             $button
             .attr('title', newLabel)
             .attr('aria-label', newLabel);
+            toolbarVisibleOnSmallScreen = !isExpanded;
         });
     
         $(toolbarElement).on('keydown', function (e) {
@@ -1383,9 +1385,6 @@ define([
         return window.innerHeight < 530 || window.innerWidth < 530;
     }
 
-    let toolbarVisibleOnSmallScreen = false;
-    let wasSmallScreen = isSmallScreenToolbar();
-
     UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
         let toggleButton = null;
         const isSmallScreen = isSmallScreenToolbar();
@@ -1408,7 +1407,6 @@ define([
             $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
             $(toolbar).show();
         }
-        wasSmallScreen = isSmallScreen;
         return toggleButton;
     };
     

From 96d09d5a726d5c1c61c6127442b0ec443841b18e Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Fri, 13 Jun 2025 14:29:14 +0300
Subject: [PATCH 30/39] Implement review fixes #1831

---
 customize.dist/src/less2/include/toolbar.less |  1 -
 www/kanban/inner.js                           | 28 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 923604a0a..1cda53f6b 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -409,7 +409,6 @@
 
         .fa {
             font: normal normal normal 14px/1 FontAwesome;
-            font-family: FontAwesome;
         }
 
         .tools_unselectable();
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index be7855004..a1174244f 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -214,7 +214,7 @@ define([
             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),
@@ -285,10 +285,10 @@ define([
                 editor.replaceSelection($(mt)[0].outerHTML);
             }
         });
-        var toggleButtonMarkdown = UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
-        $(window).on('resize', function() {
-            UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
-        });
+        //var toggleButtonMarkdown = UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        // $(window).on('resize', function() {
+        //     UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
+        // });
         $(markdownTb.toolbar).on('keydown', function (e) {
             if (e.which === 27) { // Escape key
                 e.preventDefault();
@@ -299,15 +299,15 @@ define([
                 e.stopPropagation();
             }
         });  
-        $(toggleButtonMarkdown).on('keydown', function (e) {
-            if (e.which === 13) { // "Enter" should toggle the toolbar, but not close the modal
-                e.preventDefault();
-                e.stopPropagation();
-                $(this).click(); // simulate click to toggle
-            } else if (e.which === 9) {
-                e.stopPropagation();
-            }
-        });
+        // $(toggleButtonMarkdown).on('keydown', function (e) {
+        //     if (e.which === 13) { // "Enter" should toggle the toolbar, but not close the modal
+        //         e.preventDefault();
+        //         e.stopPropagation();
+        //         $(this).click(); // simulate click to toggle
+        //     } else if (e.which === 9) {
+        //         e.stopPropagation();
+        //     }
+        // });
         $(text).before(markdownTb.toolbar);
         editor.refresh();
         var body = {

From 80e9f003b45cfff1c7680b4aaecc1e5da37c44d7 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Fri, 13 Jun 2025 17:19:41 +0300
Subject: [PATCH 31/39] First try #1831

---
 www/common/common-ui-elements.js | 178 ++++++++++++++++++++-----------
 1 file changed, 117 insertions(+), 61 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 8c5097a01..945f1a3f9 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1251,6 +1251,62 @@ define([
             $toolbarButton.show();
         };
 
+        function isSmallScreen() {
+            return window.innerHeight < 530 || window.innerWidth < 530;
+        }
+
+        var toolbarVisibleOnSmallScreen = false;
+        var $smallToggleButton = null;
+
+        function updateToolbarVisibility() {
+            var $wrapper = $toolbar.parent().length ? $toolbar.parent() : $('<div>').append($toolbar);
+
+            if (isSmallScreen()) {
+                if (!$smallToggleButton) {
+                    $smallToggleButton = $('<button>', {
+                        'class': 'btn cp-markdown-toggle-button',
+                        'aria-label': Messages.toolbar_show_text_tools,
+                        'aria-pressed': 'false',
+                        'data-notippy': 1,
+                        'type': 'button',
+                        'title': Messages.toolbar_show_text_tools
+                    }).append(
+                        $('<i>', { class: 'fa fa-wrench', 'aria-hidden': 'true' }),
+                        $('<span>', { class: 'cp-toolbar-label', text: Messages.toolbar_text_tools })
+                    ).on('click', function () {
+                        var isExpanded = $toolbar.is(':visible');
+                        $toolbar.toggle();
+                        $(this).toggleClass('cp-toolbar-button-active', !isExpanded)
+                            .attr('aria-pressed', String(!isExpanded))
+                            .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
+                            .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
+                        toolbarVisibleOnSmallScreen = !isExpanded;
+                    });
+
+                    $wrapper.append($smallToggleButton);
+                }
+
+                if (toolbarVisibleOnSmallScreen) {
+                    $toolbar.show();
+                    $smallToggleButton.addClass('cp-toolbar-button-active')
+                        .attr('aria-pressed', 'true');
+                } else {
+                    $toolbar.hide();
+                    $smallToggleButton.removeClass('cp-toolbar-button-active')
+                        .attr('aria-pressed', 'false');
+                }
+            } else {
+                if ($smallToggleButton) {
+                    $smallToggleButton.remove();
+                    $smallToggleButton = null;
+                }
+                $toolbar.show();
+            }
+        }
+
+        $(window).on('resize', updateToolbarVisibility);
+        updateToolbarVisibility();
+
         return {
             toolbar: $toolbar,
             button: $toolbarButton,
@@ -1340,75 +1396,75 @@ define([
             text: text
         };
     };
-    let toolbarVisibleOnSmallScreen = false;
+    // let toolbarVisibleOnSmallScreen = false;
 
-    UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
-        var $button = $(h('button', {
-                'class': 'btn cp-markdown-toggle-button',
-                'aria-label': Messages.toolbar_show_text_tools,
-                'aria-pressed': 'false',
-                'data-notippy':1,
-                'type': 'button',
-                'title': Messages.toolbar_show_text_tools
-            }, [
-                h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
-                h('span.cp-toolbar-label', Messages.toolbar_text_tools)
-        ]));
+    // UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
+    //     var $button = $(h('button', {
+    //             'class': 'btn cp-markdown-toggle-button',
+    //             'aria-label': Messages.toolbar_show_text_tools,
+    //             'aria-pressed': 'false',
+    //             'data-notippy':1,
+    //             'type': 'button',
+    //             'title': Messages.toolbar_show_text_tools
+    //         }, [
+    //             h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
+    //             h('span.cp-toolbar-label', Messages.toolbar_text_tools)
+    //     ]));
     
-        $button.on('click', function () {
-            var isExpanded = $(toolbarElement).is(':visible');
-            $(this).attr('aria-pressed', String(!isExpanded));
-            $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
-            $(toolbarElement).toggle();
+    //     $button.on('click', function () {
+    //         var isExpanded = $(toolbarElement).is(':visible');
+    //         $(this).attr('aria-pressed', String(!isExpanded));
+    //         $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
+    //         $(toolbarElement).toggle();
 
-            const newLabel = !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools; // XXX
-            $button
-            .attr('title', newLabel)
-            .attr('aria-label', newLabel);
-            toolbarVisibleOnSmallScreen = !isExpanded;
-        });
+    //         const newLabel = !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools; // XXX
+    //         $button
+    //         .attr('title', newLabel)
+    //         .attr('aria-label', newLabel);
+    //         toolbarVisibleOnSmallScreen = !isExpanded;
+    //     });
     
-        $(toolbarElement).on('keydown', function (e) {
-            if (e.key === 'Escape' || e.which === 27) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (editor && editor.focus) {
-                    editor.focus();
-                }
-            }
-        });
+    //     $(toolbarElement).on('keydown', function (e) {
+    //         if (e.key === 'Escape' || e.which === 27) {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //             if (editor && editor.focus) {
+    //                 editor.focus();
+    //             }
+    //         }
+    //     });
     
-        return $button;
-    };
+    //     return $button;
+    // };
 
-    var isSmallScreenToolbar = function () {
-        return window.innerHeight < 530 || window.innerWidth < 530;
-    }
+    // var isSmallScreenToolbar = function () {
+    //     return window.innerHeight < 530 || window.innerWidth < 530;
+    // }
 
-    UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
-        let toggleButton = null;
-        const isSmallScreen = isSmallScreenToolbar();
+    // UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
+    //     let toggleButton = null;
+    //     const isSmallScreen = isSmallScreenToolbar();
 
-        if (isSmallScreen) {
-            if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
-                toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
-                $(markdownEditorWrapper).append(toggleButton);
-            }
-            if (toolbarVisibleOnSmallScreen) {
-                $(toolbar).show();
-                $(markdownEditorWrapper).find('.cp-markdown-toggle-button').addClass('cp-toolbar-button-active')
-                    .attr('aria-pressed', true);
-            } else {
-                $(toolbar).hide();
-                $(markdownEditorWrapper).find('.cp-markdown-toggle-button').removeClass('cp-toolbar-button-active')
-                    .attr('aria-pressed', false);
-            }
-        } else {
-            $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
-            $(toolbar).show();
-        }
-        return toggleButton;
-    };
+    //     if (isSmallScreen) {
+    //         if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
+    //             toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
+    //             $(markdownEditorWrapper).append(toggleButton);
+    //         }
+    //         if (toolbarVisibleOnSmallScreen) {
+    //             $(toolbar).show();
+    //             $(markdownEditorWrapper).find('.cp-markdown-toggle-button').addClass('cp-toolbar-button-active')
+    //                 .attr('aria-pressed', true);
+    //         } else {
+    //             $(toolbar).hide();
+    //             $(markdownEditorWrapper).find('.cp-markdown-toggle-button').removeClass('cp-toolbar-button-active')
+    //                 .attr('aria-pressed', false);
+    //         }
+    //     } else {
+    //         $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
+    //         $(toolbar).show();
+    //     }
+    //     return toggleButton;
+    // };
     
     /*  Create a usage bar which keeps track of how much storage space is used
         by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,

From c43af77dc73255be18ed205ea2ab48b7216b5a51 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Sat, 14 Jun 2025 16:32:21 +0300
Subject: [PATCH 32/39] Refactor markdown toggle code #1831

---
 www/common/common-ui-elements.js | 109 +++++++------------------------
 www/form/inner.js                |  24 ++-----
 www/kanban/inner.js              |  18 +----
 www/profile/inner.js             |   6 +-
 4 files changed, 35 insertions(+), 122 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 600940ec3..0137fd2e2 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1256,14 +1256,15 @@ define([
         }
 
         var toolbarVisibleOnSmallScreen = false;
-        var $smallToggleButton = null;
+        var $toolbarToggleButton = null;
+        var appType = common.getMetadataMgr().getMetadata().type;
 
         function updateToolbarVisibility() {
-            var $wrapper = $toolbar.parent().length ? $toolbar.parent() : $('<div>').append($toolbar);
+            var $wrapper = $(opts && opts.wrapper ? opts.wrapper : $toolbar.parent());
 
             if (isSmallScreen()) {
-                if (!$smallToggleButton) {
-                    $smallToggleButton = $('<button>', {
+                if (!$toolbarToggleButton) {
+                    $toolbarToggleButton = $('<button>', {
                         'class': 'btn cp-markdown-toggle-button',
                         'aria-label': Messages.toolbar_show_text_tools,
                         'aria-pressed': 'false',
@@ -1281,31 +1282,39 @@ define([
                             .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
                             .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
                         toolbarVisibleOnSmallScreen = !isExpanded;
-                    });
-
-                    $wrapper.append($smallToggleButton);
+                    })
+                    // .on('keydown', function (e) {
+                    //     if (e.key === 'Enter' || e.which === 13) { // "Enter" should keep toggle functionality, not close the modal
+                    //         e.preventDefault();
+                    //         e.stopPropagation();
+                    //         $(this).click();
+                    //     }
+                    // });
+                    $wrapper.append($toolbarToggleButton);
                 }
 
                 if (toolbarVisibleOnSmallScreen) {
                     $toolbar.show();
-                    $smallToggleButton.addClass('cp-toolbar-button-active')
+                    $toolbarToggleButton.addClass('cp-toolbar-button-active')
                         .attr('aria-pressed', 'true');
                 } else {
                     $toolbar.hide();
-                    $smallToggleButton.removeClass('cp-toolbar-button-active')
+                    $toolbarToggleButton.removeClass('cp-toolbar-button-active')
                         .attr('aria-pressed', 'false');
                 }
             } else {
-                if ($smallToggleButton) {
-                    $smallToggleButton.remove();
-                    $smallToggleButton = null;
+                if ($toolbarToggleButton) {
+                    $toolbarToggleButton.remove();
+                    $toolbarToggleButton = null;
                 }
                 $toolbar.show();
             }
         }
-
-        $(window).on('resize', updateToolbarVisibility);
-        updateToolbarVisibility();
+        
+        if (appType != 'code') {
+            $(window).on('resize', updateToolbarVisibility);
+            updateToolbarVisibility();
+        }
 
         return {
             toolbar: $toolbar,
@@ -1396,76 +1405,6 @@ define([
             text: text
         };
     };
-    // let toolbarVisibleOnSmallScreen = false;
-
-    // UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
-    //     var $button = $(h('button', {
-    //             'class': 'btn cp-markdown-toggle-button',
-    //             'aria-label': Messages.toolbar_show_text_tools,
-    //             'aria-pressed': 'false',
-    //             'data-notippy':1,
-    //             'type': 'button',
-    //             'title': Messages.toolbar_show_text_tools
-    //         }, [
-    //             h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
-    //             h('span.cp-toolbar-label', Messages.toolbar_text_tools)
-    //     ]));
-    
-    //     $button.on('click', function () {
-    //         var isExpanded = $(toolbarElement).is(':visible');
-    //         $(this).attr('aria-pressed', String(!isExpanded));
-    //         $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
-    //         $(toolbarElement).toggle();
-
-    //         const newLabel = !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools; // XXX
-    //         $button
-    //         .attr('title', newLabel)
-    //         .attr('aria-label', newLabel);
-    //         toolbarVisibleOnSmallScreen = !isExpanded;
-    //     });
-    
-    //     $(toolbarElement).on('keydown', function (e) {
-    //         if (e.key === 'Escape' || e.which === 27) {
-    //             e.preventDefault();
-    //             e.stopPropagation();
-    //             if (editor && editor.focus) {
-    //                 editor.focus();
-    //             }
-    //         }
-    //     });
-    
-    //     return $button;
-    // };
-
-    // var isSmallScreenToolbar = function () {
-    //     return window.innerHeight < 530 || window.innerWidth < 530;
-    // }
-
-    // UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
-    //     let toggleButton = null;
-    //     const isSmallScreen = isSmallScreenToolbar();
-
-    //     if (isSmallScreen) {
-    //         if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
-    //             toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
-    //             $(markdownEditorWrapper).append(toggleButton);
-    //         }
-    //         if (toolbarVisibleOnSmallScreen) {
-    //             $(toolbar).show();
-    //             $(markdownEditorWrapper).find('.cp-markdown-toggle-button').addClass('cp-toolbar-button-active')
-    //                 .attr('aria-pressed', true);
-    //         } else {
-    //             $(toolbar).hide();
-    //             $(markdownEditorWrapper).find('.cp-markdown-toggle-button').removeClass('cp-toolbar-button-active')
-    //                 .attr('aria-pressed', false);
-    //         }
-    //     } else {
-    //         $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
-    //         $(toolbar).show();
-    //     }
-    //     return toggleButton;
-    // };
-    
     /*  Create a usage bar which keeps track of how much storage space is used
         by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
         so we throttle its usage. Clients will not update more than once per
diff --git a/www/form/inner.js b/www/form/inner.js
index 240325338..caffac8d7 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1117,22 +1117,17 @@ define([
                             editor.save();
                             editor.focus();
                         });
+                        var toggleRow = h('div.cp-markdown-toggle-row');
 
                         if (APP.common && !(tmp && tmp.block) && cm) {
                             var markdownTb = APP.common.createMarkdownToolbar(editor, {
                                 embed: function (mt) {
                                     editor.focus();
                                     editor.replaceSelection($(mt)[0].outerHTML);
-                                }
+                                },
+                                wrapper: toggleRow
                             });
-                            var toggleRow = h('div.cp-markdown-toggle-row');
                             $(block).prepend(markdownTb.toolbar);
-                            setTimeout(() => {
-                                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
-                            }, 10);
-                            $(window).on('resize', function() {
-                                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
-                            });
                             $(block).prepend(toggleRow);
                             cm.configureTheme(APP.common, function () {});
                         }
@@ -5592,17 +5587,10 @@ define([
                 embed: function (mt) {
                     editor.focus();
                     editor.replaceSelection($(mt)[0].outerHTML);
-                }
-            });
-            var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor)[0];
-            toggleRow.appendChild(toggleButton);
-            markdownWrapper.insertBefore(markdownTb.toolbar instanceof jQuery ? markdownTb.toolbar[0] : markdownTb.toolbar,t);
-            setTimeout(() => {
-                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
-            }, 10);
-            $(window).on('resize', function () {
-                UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+                },
+                wrapper: toggleRow
             });
+            $(markdownWrapper).prepend(markdownTb.toolbar);
 
             var $edit = $(editDiv);
             var $preview = $(previewDiv);
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index a1174244f..4c719d5fa 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -283,12 +283,9 @@ define([
             embed: function (mt) {
                 editor.focus();
                 editor.replaceSelection($(mt)[0].outerHTML);
-            }
+            },
+            wrapper: markdownEditorWrapper
         });
-        //var toggleButtonMarkdown = UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
-        // $(window).on('resize', function() {
-        //     UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
-        // });
         $(markdownTb.toolbar).on('keydown', function (e) {
             if (e.which === 27) { // Escape key
                 e.preventDefault();
@@ -298,16 +295,7 @@ define([
             else if (e.which == 13 || e.which == 9) { // "Enter" or "Tab" key should not close modal
                 e.stopPropagation();
             }
-        });  
-        // $(toggleButtonMarkdown).on('keydown', function (e) {
-        //     if (e.which === 13) { // "Enter" should toggle the toolbar, but not close the modal
-        //         e.preventDefault();
-        //         e.stopPropagation();
-        //         $(this).click(); // simulate click to toggle
-        //     } else if (e.which === 9) {
-        //         e.stopPropagation();
-        //     }
-        // });
+        });
         $(text).before(markdownTb.toolbar);
         editor.refresh();
         var body = {
diff --git a/www/profile/inner.js b/www/profile/inner.js
index e35b8bced..f35832555 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -538,11 +538,9 @@ define([
             }
         });
 
-        var markdownTb = common.createMarkdownToolbar(editor);
         var toggleRow = h('div.cp-markdown-toggle-row');
-        UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
-        $(window).on('resize', function() {
-            UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
+        var markdownTb = common.createMarkdownToolbar(editor, {
+            wrapper: toggleRow
         });
         $(code).prepend(markdownTb.toolbar);
         $(code).prepend(toggleRow); 

From 059a097dee06dba7189c9c1d481a72a9458092d5 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Sat, 14 Jun 2025 16:36:15 +0300
Subject: [PATCH 33/39] Remove commentaries #1831

---
 www/common/common-ui-elements.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 0137fd2e2..9dba660a1 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1282,14 +1282,7 @@ define([
                             .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
                             .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
                         toolbarVisibleOnSmallScreen = !isExpanded;
-                    })
-                    // .on('keydown', function (e) {
-                    //     if (e.key === 'Enter' || e.which === 13) { // "Enter" should keep toggle functionality, not close the modal
-                    //         e.preventDefault();
-                    //         e.stopPropagation();
-                    //         $(this).click();
-                    //     }
-                    // });
+                    });
                     $wrapper.append($toolbarToggleButton);
                 }
 

From 4f3980af4e0c82251b351006bd69d5385be51602 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 17 Jun 2025 11:42:41 +0300
Subject: [PATCH 34/39] Final fixes #1831

---
 www/common/common-ui-elements.js | 40 ++++++++++++++++----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 9dba660a1..f89d9d96b 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1257,32 +1257,32 @@ define([
 
         var toolbarVisibleOnSmallScreen = false;
         var $toolbarToggleButton = null;
-        var appType = common.getMetadataMgr().getMetadata().type;
+        var appType = common.getMetadataMgr().getPrivateData().app;
 
         function updateToolbarVisibility() {
             var $wrapper = $(opts && opts.wrapper ? opts.wrapper : $toolbar.parent());
 
             if (isSmallScreen()) {
                 if (!$toolbarToggleButton) {
-                    $toolbarToggleButton = $('<button>', {
-                        'class': 'btn cp-markdown-toggle-button',
-                        'aria-label': Messages.toolbar_show_text_tools,
-                        'aria-pressed': 'false',
-                        'data-notippy': 1,
-                        'type': 'button',
-                        'title': Messages.toolbar_show_text_tools
-                    }).append(
-                        $('<i>', { class: 'fa fa-wrench', 'aria-hidden': 'true' }),
-                        $('<span>', { class: 'cp-toolbar-label', text: Messages.toolbar_text_tools })
-                    ).on('click', function () {
-                        var isExpanded = $toolbar.is(':visible');
-                        $toolbar.toggle();
-                        $(this).toggleClass('cp-toolbar-button-active', !isExpanded)
-                            .attr('aria-pressed', String(!isExpanded))
-                            .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
-                            .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
-                        toolbarVisibleOnSmallScreen = !isExpanded;
-                    });
+                    $toolbarToggleButton = $(h('button.btn.cp-markdown-toggle-button', {
+                            'aria-label': Messages.toolbar_show_text_tools,
+                            'aria-pressed': 'false',
+                            'data-notippy': 1,
+                            'type': 'button',
+                            'title': Messages.toolbar_show_text_tools,
+                            onclick: function () {
+                                var isExpanded = $toolbar.is(':visible');
+                                $toolbar.toggle();
+                                $(this).toggleClass('cp-toolbar-button-active', !isExpanded)
+                                    .attr('aria-pressed', String(!isExpanded))
+                                    .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
+                                    .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
+                                toolbarVisibleOnSmallScreen = !isExpanded;
+                            }
+                        })).append([
+                        h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
+                        h('span.cp-toolbar-label', {}, Messages.toolbar_text_tools)
+                    ]);
                     $wrapper.append($toolbarToggleButton);
                 }
 

From d1835578289afd72c28f05544b6cd7ff6c5abe98 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 17 Jun 2025 11:47:15 +0300
Subject: [PATCH 35/39] npm lint compliance #1831

---
 www/code/inner.js                | 6 +++---
 www/common/common-ui-elements.js | 2 +-
 www/kanban/inner.js              | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/www/code/inner.js b/www/code/inner.js
index ddf595abc..b0d7dab2b 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -579,9 +579,9 @@ define([
         editor.on('cursorActivity', updateCursor);
 
         editor.setOption("extraKeys", {
-            "Esc": function() {
-                e.preventDefault();
-                $(body).focus();
+            "Esc": function(cm, event) {
+                event.preventDefault();
+                document.body.focus();
             }
         });
         
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index f89d9d96b..2813a0db4 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1304,7 +1304,7 @@ define([
             }
         }
         
-        if (appType != 'code') {
+        if (appType !== 'code') {
             $(window).on('resize', updateToolbarVisibility);
             updateToolbarVisibility();
         }
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 4c719d5fa..d90347653 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -292,7 +292,7 @@ define([
                 e.stopPropagation();
                 editor.focus(); // Focus the editor instead of closing the modal
             }
-            else if (e.which == 13 || e.which == 9) { // "Enter" or "Tab" key should not close modal
+            else if (e.which === 13 || e.which === 9) { // "Enter" or "Tab" key should not close modal
                 e.stopPropagation();
             }
         });

From 071d48072c04eae507d7a7ab1062dd4ef37d27de Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 17 Jun 2025 10:50:49 +0200
Subject: [PATCH 36/39] Fix indentation

---
 www/common/common-ui-elements.js | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 2813a0db4..71fd20c5e 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1265,24 +1265,23 @@ define([
             if (isSmallScreen()) {
                 if (!$toolbarToggleButton) {
                     $toolbarToggleButton = $(h('button.btn.cp-markdown-toggle-button', {
-                            'aria-label': Messages.toolbar_show_text_tools,
-                            'aria-pressed': 'false',
-                            'data-notippy': 1,
-                            'type': 'button',
-                            'title': Messages.toolbar_show_text_tools,
-                            onclick: function () {
-                                var isExpanded = $toolbar.is(':visible');
-                                $toolbar.toggle();
-                                $(this).toggleClass('cp-toolbar-button-active', !isExpanded)
-                                    .attr('aria-pressed', String(!isExpanded))
-                                    .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
-                                    .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
-                                toolbarVisibleOnSmallScreen = !isExpanded;
-                            }
-                        })).append([
+                        'aria-label': Messages.toolbar_show_text_tools,
+                        'aria-pressed': 'false',
+                        'data-notippy': 1,
+                        'type': 'button',
+                        'title': Messages.toolbar_show_text_tools
+                    })).append([
                         h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
                         h('span.cp-toolbar-label', {}, Messages.toolbar_text_tools)
-                    ]);
+                    ]).click(function () {
+                        var isExpanded = $toolbar.is(':visible');
+                        $toolbar.toggle();
+                        $(this).toggleClass('cp-toolbar-button-active', !isExpanded)
+                            .attr('aria-pressed', String(!isExpanded))
+                            .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
+                            .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
+                        toolbarVisibleOnSmallScreen = !isExpanded;
+                    });
                     $wrapper.append($toolbarToggleButton);
                 }
 

From 796fceebe286958e1e3aa8618d208001b6db6f08 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 17 Jun 2025 10:55:53 +0200
Subject: [PATCH 37/39] Fix propagation issue

---
 www/common/common-ui-elements.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 71fd20c5e..d02585886 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1281,6 +1281,10 @@ define([
                             .attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
                             .attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
                         toolbarVisibleOnSmallScreen = !isExpanded;
+                    }).on('keydown keyup', e => {
+                        // don't close modals when pressing Enter
+                        // on the button
+                        e.stopPropagation();
                     });
                     $wrapper.append($toolbarToggleButton);
                 }

From ac02106bea8953e1d6a201e8ddae3480bb2d1085 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 17 Jun 2025 13:55:36 +0300
Subject: [PATCH 38/39] Fix focus issues #1831

---
 www/common/common-ui-elements.js |  2 +-
 www/form/inner.js                | 17 ++++++++++++++++-
 www/profile/inner.js             |  4 ++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 2813a0db4..120b352f7 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1304,7 +1304,7 @@ define([
             }
         }
         
-        if (appType !== 'code') {
+        if (appType !== 'code' && appType !== 'slide') {
             $(window).on('resize', updateToolbarVisibility);
             updateToolbarVisibility();
         }
diff --git a/www/form/inner.js b/www/form/inner.js
index caffac8d7..bb194ee88 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1098,6 +1098,7 @@ define([
                             editor.setOption("extraKeys", {
                                 "Esc": function () {
                                     editor.display.input.blur();
+                                    $(cancelBlock).focus();
                                 },
                             });
                             editor.setOption('lineNumbers', true);
@@ -1115,7 +1116,12 @@ define([
                             }
                             editor.refresh();
                             editor.save();
-                            editor.focus();
+                            var firstBtn = $(markdownTb.toolbar).find('button').get(0);
+                            if (firstBtn) {
+                                firstBtn.focus();
+                            } else {
+                                editor.focus(); // fallback
+                            }
                         });
                         var toggleRow = h('div.cp-markdown-toggle-row');
 
@@ -5580,6 +5586,7 @@ define([
             var editor = APP.responseEditor = cm.editor;
             editor.setOption("extraKeys", {
                 "Esc": function() {
+                    editor.display.input.blur();
                     $(preview).focus();
                 }
             });
@@ -5613,6 +5620,14 @@ define([
                 $preview.hide();
                 editor.refresh();
                 $tb.show();
+                setTimeout(function () {
+                    var firstBtn = $(markdownTb.toolbar).find('button').get(0);
+                    if (firstBtn) {
+                        firstBtn.focus();
+                    } else {
+                        editor.focus(); // fallback
+                    }
+                }, 0);
             });
             APP.$e = $e;
             APP.$p = $p;
diff --git a/www/profile/inner.js b/www/profile/inner.js
index f35832555..86e863a51 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -551,6 +551,10 @@ define([
             $(code).show();
             APP.editor.refresh();
             $(button).hide();
+            var firstBtn = $(markdownTb.toolbar).find('button').get(0);
+            if (firstBtn) {
+                firstBtn.focus();
+            }
         });
         $(save).click(function () {
             $(save).hide();

From 5ea802db8ec63e4cee2f98e313d394d183dddbd3 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 18 Jun 2025 16:00:38 +0300
Subject: [PATCH 39/39] Fix for toolbar rendering issue #1831

---
 www/common/common-ui-elements.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 7ef91ce09..224af8fec 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1310,6 +1310,10 @@ define([
         if (appType !== 'code' && appType !== 'slide') {
             $(window).on('resize', updateToolbarVisibility);
             updateToolbarVisibility();
+            // Small delay to ensure the toolbar layout has rendered before checking for wrapping (ex: profile medium screen size)
+            setTimeout(() => {
+                updateToolbarVisibility();
+            }, 10);
         }
 
         return {