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] 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);