From 391308845114760e64582f02bf6b30ed4a5d0c77 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 2 Jan 2025 01:21:30 +0200
Subject: [PATCH] feat(mobile): display editor toolbar only when focused

---
 .../ribbon_widgets/classic_editor_toolbar.js  |  5 +++
 .../app/widgets/type_widgets/editable_text.js | 32 ++++++++++++-------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
index 857ef25ee..4b59e96dc 100644
--- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
+++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
@@ -23,6 +23,11 @@ const TPL = `\
     }
 
     body.mobile .classic-toolbar-widget {
+        display: none;
+    }
+
+    body.mobile .classic-toolbar-widget.visible {
+        display: block;
         position: absolute;
         left: 0;
         bottom: 0;
diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js
index 1820e9b1d..be74bea3a 100644
--- a/src/public/app/widgets/type_widgets/editable_text.js
+++ b/src/public/app/widgets/type_widgets/editable_text.js
@@ -41,41 +41,41 @@ const TPL = `
         padding-top: 10px;
         height: 100%;
     }
-    
+
     body.mobile .note-detail-editable-text {
         padding-left: 4px;
     }
-    
+
     .note-detail-editable-text a:hover {
         cursor: pointer;
     }
-    
+
     .note-detail-editable-text a[href^="http://"], .note-detail-editable-text a[href^="https://"] {
         cursor: text !important;
     }
-    
+
     .note-detail-editable-text *:not(figure, .include-note, hr):first-child {
         margin-top: 0 !important;
     }
-         
-    .note-detail-editable-text h2 { font-size: 1.6em; } 
+
+    .note-detail-editable-text h2 { font-size: 1.6em; }
     .note-detail-editable-text h3 { font-size: 1.4em; }
     .note-detail-editable-text h4 { font-size: 1.2em; }
     .note-detail-editable-text h5 { font-size: 1.1em; }
     .note-detail-editable-text h6 { font-size: 1.0em; }
-    
+
     body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
     body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
     body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
     body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
     body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
-    
+
     body.heading-style-underline .note-detail-editable-text h2 { border-bottom: 1px solid var(--main-border-color); }
     body.heading-style-underline .note-detail-editable-text h3 { border-bottom: 1px solid var(--main-border-color); }
     body.heading-style-underline .note-detail-editable-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
     body.heading-style-underline .note-detail-editable-text h5 { border-bottom: 1px solid var(--main-border-color); }
     body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px solid var(--main-border-color); }
-    
+
     .note-detail-editable-text-editor {
         padding-top: 10px;
         border: 0 !important;
@@ -108,7 +108,7 @@ function buildListOfLanguages() {
 
 /**
  * The editor can operate into two distinct modes:
- * 
+ *
  * - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph).
  * - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works.
  */
@@ -204,9 +204,19 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
                 } else {
                     $classicToolbarWidget = $("body").find(".classic-toolbar-widget");
                 }
-                
+
                 $classicToolbarWidget.empty();
                 $classicToolbarWidget[0].appendChild(editor.ui.view.toolbar.element);
+
+                if (utils.isMobile()) {
+                    this.$editor.on("focus", (e) => {
+                        $classicToolbarWidget.addClass("visible");
+                    });
+
+                    this.$editor.on("focusout", (e) => {
+                        $classicToolbarWidget.removeClass("visible");
+                    });
+                }
             }
 
             editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate());