feat(mobile): display classic toolbar above keyboard

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;
     }
 
-}
+}