enhance(mobile): space around for bottom bar

ios/App/Podfile

@@ -10,9 +10,10 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
   pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
+  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
-  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
 end
 
 target 'Logseq' do

src/main/frontend/components/editor.cljs

@@ -231,161 +231,160 @@
                            (:offset-top vw-state))
                         0)}
       :class (util/classnames [{:is-vw-pending (boolean vw-pending?)}])}
-     [:div.flex {:style {:overflow "overlay"}}
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (state/set-state! :editor/pos (cursor/pos (state/get-input)))
-                          (editor-handler/indent-outdent true))}
-        (ui/icon "arrow-bar-right"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (state/set-state! :editor/pos (cursor/pos (state/get-input)))
-                          (editor-handler/indent-outdent false))}
-        (ui/icon "arrow-bar-left"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          ((editor-handler/move-up-down true)))}
-        (ui/icon "arrow-bar-to-up"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          ((editor-handler/move-up-down false)))}
-        (ui/icon "arrow-bar-to-down"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (commands/simple-insert! parent-id "\n"
-                                                   {:forward-pos 1})
-                          ;; TODO: should we add this focus step to `simple-insert!`?
-                          (when-let [input (gdom/getElement parent-id)]
-                            (.focus input)))}
-        (ui/icon "arrow-back"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (editor-handler/cycle-todo!))}
-        (ui/icon "checkbox"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (commands/simple-insert!
-                           parent-id "[[]]"
-                           {:backward-pos 2
-                            :check-fn     (fn [_ _ new-pos]
-                                            (reset! commands/*slash-caret-pos new-pos)
-                                            (commands/handle-step [:editor/search-page]))})
-                          (when-let [input (gdom/getElement parent-id)]
-                            (.focus input)))}
-        (ui/icon "brackets"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (commands/simple-insert!
-                           parent-id "(())"
-                           {:backward-pos 2
-                            :check-fn     (fn [_ _ new-pos]
-                                            (reset! commands/*slash-caret-pos new-pos)
-                                            (commands/handle-step [:editor/search-block]))})
-                          (when-let [input (gdom/getElement parent-id)]
-                            (.focus input)))}
-        (ui/icon "parentheses"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (commands/simple-insert! parent-id "/" {})
-                          (when-let [input (gdom/getElement parent-id)]
-                            (.focus input)))}
-        (ui/icon "command"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (commands/simple-insert!
-                           parent-id "#"
-                           {:check-fn     (fn [_ _ new-pos]
-                                            (commands/handle-step [:editor/search-page-hashtag])
-                                            (reset! commands/*slash-caret-pos new-pos))})
-                          (when-let [input (gdom/getElement parent-id)]
-                            (.focus input)))}
-        (ui/icon "tag"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (mobile-camera/embed-photo parent-id))}
-        (ui/icon "camera"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (editor-handler/html-link-format!))}
-        (ui/icon "link"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (history/undo! e))}
-        (ui/icon "rotate"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (history/redo! e))}
-        (ui/icon "rotate-clockwise"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (editor-handler/bold-format!))}
-        (ui/icon "bold"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (editor-handler/italics-format!))}
-        (ui/icon "italic"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (editor-handler/strike-through-format!))}
-        (ui/icon "strikethrough"
-                 {:style {:fontSize ui/icon-size}})]]
-      [:div
-       [:button.bottom-action
-        {:on-mouse-down (fn [e]
-                          (util/stop e)
-                          (editor-handler/highlight-format!))}
-        (ui/icon "paint"
-                 {:style {:fontSize ui/icon-size}})]]]]))
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (state/set-state! :editor/pos (cursor/pos (state/get-input)))
+                         (editor-handler/indent-outdent true))}
+       (ui/icon "arrow-bar-right"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (state/set-state! :editor/pos (cursor/pos (state/get-input)))
+                         (editor-handler/indent-outdent false))}
+       (ui/icon "arrow-bar-left"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         ((editor-handler/move-up-down true)))}
+       (ui/icon "arrow-bar-to-up"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         ((editor-handler/move-up-down false)))}
+       (ui/icon "arrow-bar-to-down"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (commands/simple-insert! parent-id "\n"
+                                                  {:forward-pos 1})
+                         ;; TODO: should we add this focus step to `simple-insert!`?
+                         (when-let [input (gdom/getElement parent-id)]
+                           (.focus input)))}
+       (ui/icon "arrow-back"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (editor-handler/cycle-todo!))}
+       (ui/icon "checkbox"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (commands/simple-insert!
+                          parent-id "[[]]"
+                          {:backward-pos 2
+                           :check-fn     (fn [_ _ new-pos]
+                                           (reset! commands/*slash-caret-pos new-pos)
+                                           (commands/handle-step [:editor/search-page]))})
+                         (when-let [input (gdom/getElement parent-id)]
+                           (.focus input)))}
+       (ui/icon "brackets"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (commands/simple-insert!
+                          parent-id "(())"
+                          {:backward-pos 2
+                           :check-fn     (fn [_ _ new-pos]
+                                           (reset! commands/*slash-caret-pos new-pos)
+                                           (commands/handle-step [:editor/search-block]))})
+                         (when-let [input (gdom/getElement parent-id)]
+                           (.focus input)))}
+       (ui/icon "parentheses"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (commands/simple-insert! parent-id "/" {})
+                         (when-let [input (gdom/getElement parent-id)]
+                           (.focus input)))}
+       (ui/icon "command"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (commands/simple-insert!
+                          parent-id "#"
+                          {:check-fn     (fn [_ _ new-pos]
+                                           (commands/handle-step [:editor/search-page-hashtag])
+                                           (reset! commands/*slash-caret-pos new-pos))})
+                         (when-let [input (gdom/getElement parent-id)]
+                           (.focus input)))}
+       (ui/icon "tag"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (mobile-camera/embed-photo parent-id))}
+       (ui/icon "camera"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (editor-handler/html-link-format!))}
+       (ui/icon "link"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (history/undo! e))}
+       (ui/icon "rotate"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (history/redo! e))}
+       (ui/icon "rotate-clockwise"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (editor-handler/bold-format!))}
+       (ui/icon "bold"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (editor-handler/italics-format!))}
+       (ui/icon "italic"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (editor-handler/strike-through-format!))}
+       (ui/icon "strikethrough"
+                {:style {:fontSize ui/icon-size}})]]
+     [:div
+      [:button.bottom-action
+       {:on-mouse-down (fn [e]
+                         (util/stop e)
+                         (editor-handler/highlight-format!))}
+       (ui/icon "paint"
+                {:style {:fontSize ui/icon-size}})]]]))
 
 (rum/defcs input < rum/reactive
   (rum/local {} ::input-value)

src/main/frontend/components/editor.css

@@ -3,12 +3,13 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  justify-content: center;
+  justify-content: space-around;
   height: 2.5rem;
   display: flex;
   align-items: center;
   z-index: 9999;
-
+  overflow-x: overlay;
+  overflow-y: hidden;
   transition: none;
 
   button {