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