From 62696a4e0a67420974ddad439c9acc67389c0a72 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 28 Dec 2024 14:58:33 +0200
Subject: [PATCH] feat(mobile): display classic toolbar above keyboard

---
 .../ribbon_widgets/classic_editor_toolbar.js  | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 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 7adbf9a8f..47bc87909 100644
--- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
+++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
@@ -1,5 +1,6 @@
 import { t } from "../../services/i18n.js";
 import options from "../../services/options.js";
+import utils from "../../services/utils.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `\
@@ -8,7 +9,7 @@ const TPL = `\
 <style>
     .classic-toolbar-widget {
         --ck-color-toolbar-background: transparent;
-        --ck-color-button-default-background: transparent;        
+        --ck-color-button-default-background: transparent;
         --ck-color-button-default-disabled-background: transparent;
         min-height: 39px;
     }
@@ -22,8 +23,12 @@ const TPL = `\
     }
 
     body.mobile .classic-toolbar-widget {
-        position: relative;
+        position: fixed;
+        left: 0;
+        bottom: var(--launcher-pane-size);
+        right: 0;
         overflow-x: auto;
+        background: var(--main-background-color);
     }
 
     body.mobile .classic-toolbar-widget .ck.ck-toolbar {
@@ -34,10 +39,10 @@ const TPL = `\
 
 /**
  * Handles the editing toolbar when the CKEditor is in decoupled mode.
- * 
+ *
  * <p>
  * This toolbar is only enabled if the user has selected the classic CKEditor.
- * 
+ *
  * <p>
  * The ribbon item is active by default for text notes, as long as they are not in read-only mode.
  */
@@ -53,6 +58,22 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();
+
+        if (utils.isMobile()) {
+            let originalHeight = window.visualViewport.height;
+            let originalBottom = this.$widget[0].style.bottom;
+            window.visualViewport.addEventListener("resize", () => {
+                const keyboardSize = originalHeight - window.visualViewport.height;
+                const bottom = Math.max(keyboardSize, originalBottom);
+
+                if (keyboardSize !== 0) {
+                    this.$widget.css("bottom", `${bottom}px`);``
+                } else {
+                    const style = window.getComputedStyle(this.$widget[0]);
+                    this.$widget.css("bottom", style.getPropertyValue("--launcher-pane-size"));
+                }
+            });
+        }
     }
 
     async getTitle() {
@@ -80,4 +101,4 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
         return true;
     }
 
-}
\ No newline at end of file
+}