fix: keyboard && editor toolbar blink when editing another block

src/main/frontend/components/block.cljs

@@ -2710,6 +2710,7 @@
 
                 :else
                 (let [block (or (db/entity [:block/uuid (:block/uuid block)]) block)]
+                  (mobile-util/mobile-focus-hidden-input)
                   (editor-handler/clear-selection!)
                   (editor-handler/unhighlight-blocks!)
                   (p/do!

src/main/frontend/components/editor.cljs

@@ -743,9 +743,9 @@
     (shui-editor-popups id format action nil)))
 
 (defn- editor-on-hide
-  [state type e]
+  [state type e editing-another-block?]
   (let [action (state/get-editor-action)
-        [_id config] (:rum/args state)]
+        [opts _id config] (:rum/args state)]
     (cond
       (and (= type :esc) (editor-handler/editor-commands-popup-exists?))
       nil
@@ -771,7 +771,8 @@
         (when-let [container (gdom/getElement "app-container")]
           (dom/remove-class! container "blocks-selection-mode"))
         (p/do!
-         (editor-handler/escape-editing {:select? select?})
+         (editor-handler/escape-editing {:select? select?
+                                         :editing-another-block? editing-another-block?})
          (some-> config :on-escape-editing
                  (apply [(str uuid) (= type :esc)])))))))
 
@@ -793,7 +794,8 @@
       {:node @(::ref state)
        :on-hide (fn [_state e type]
                   (when-not (= type :esc)
-                    (editor-on-hide state type e)))})))
+                    (let [editing-another-block? (.closest (.-target e) ".ls-block")]
+                      (editor-on-hide state type e editing-another-block?))))})))
   (mixins/event-mixin setup-key-listener!)
   lifecycle/lifecycle
   [state {:keys [format block parent-block]} id config]
@@ -813,7 +815,7 @@
                                     (if-let [on-key-down (:on-key-down config)]
                                       (on-key-down e)
                                       (when (= (util/ekey e) "Escape")
-                                        (editor-on-hide state :esc e))))
+                                        (editor-on-hide state :esc e false))))
                :auto-focus true
                :auto-capitalize (if (util/mobile?) "sentences" "off")
                :auto-correct (if (util/mobile?) "true" "false")

src/main/frontend/handler/editor.cljs

@@ -843,6 +843,7 @@
                                           (let [block (db/entity [:block/uuid block-id])]
                                             (seq (:block/_parent block)))))]
             (when-not (and has-children? left-has-children?)
+              (mobile-util/mobile-focus-hidden-input)
               (let [block-parent block-container
                     sibling-or-parent-block
                     (if (:embed? config)
@@ -3909,16 +3910,15 @@
             (select-all-blocks! {})))))))
 
 (defn escape-editing
-  [& {:keys [select? save-block?]
+  [& {:keys [select? save-block? editing-another-block?]
       :or {save-block? true}}]
-  (let [edit-block (state/get-edit-block)]
-    (p/do!
-     (when save-block? (save-current-block!))
-     (if select?
-       (when-let [node (some-> (state/get-input) (util/rec-get-node "ls-block"))]
-         (state/exit-editing-and-set-selected-blocks! [node]))
-       (when (= (:db/id edit-block) (:db/id (state/get-edit-block)))
-         (state/clear-edit!))))))
+  (p/do!
+   (when save-block? (save-current-block!))
+   (if select?
+     (when-let [node (some-> (state/get-input) (util/rec-get-node "ls-block"))]
+       (state/exit-editing-and-set-selected-blocks! [node]))
+     (when-not editing-another-block?
+       (state/clear-edit!)))))
 
 (defn replace-block-reference-with-content-at-point
   []

src/main/frontend/mobile/util.cljs

@@ -2,6 +2,7 @@
   (:require ["@capacitor/core" :refer [Capacitor registerPlugin]]
             ["@capacitor/splash-screen" :refer [SplashScreen]]
             [clojure.string :as string]
+            [goog.dom :as gdom]
             [promesa.core :as p]))
 
 (defn platform []
@@ -140,6 +141,17 @@
     (.hideAlert ^js ui-local)
     (p/resolved nil)))
 
+(def mobile-keyboard-anchor-id "ls-mobile-kb-anchor")
+(defonce *hidden-input-timeout (atom nil))
+(defn mobile-focus-hidden-input
+  []
+  (when-let [t @*hidden-input-timeout]
+    (js/clearTimeout t))
+  (when (native-platform?)
+    (when-let [^js anchor (gdom/getElement mobile-keyboard-anchor-id)]
+      (reset! *hidden-input-timeout (js/setTimeout #(.blur anchor) 200))
+      (.focus anchor))))
+
 (comment
   (defn app-active?
     "Whether the app is active. This function returns a promise."

src/main/mobile/components/app.cljs

@@ -135,6 +135,11 @@
      (mobile-header/header current-repo tab)
      (main-content tab route-match)]))
 
+(defonce hidden-input
+  [:input
+   {:id mobile-util/mobile-keyboard-anchor-id
+    :type "text"}])
+
 (rum/defc main < rum/reactive
   []
   (let [current-repo (state/sub :git/current-repo)
@@ -155,7 +160,6 @@
      (when show-action-bar?
        (selection-toolbar/action-bar))
      (shui-popup/install-popups)
-     ;; (ui-component/keep-keyboard-virtual-input)
      (ui-component/install-notifications)
      (shui-toaster/install-toaster)
      (shui-dialog/install-modals)
@@ -163,4 +167,5 @@
       [:a#download.hidden]
       [:a#download-as-transit-debug.hidden]
       [:a#download-as-sqlite-db.hidden]
-      [:a#download-as-zip.hidden]]]))
+      [:a#download-as-zip.hidden]]
+     hidden-input]))

src/main/mobile/components/app.css

@@ -325,3 +325,9 @@ div[data-radix-menu-content] {
 .mobile-setting-item {
     @apply rounded-2xl px-3 py-3 shadow-sm flex items-center justify-between bg-gray-03;
 }
+
+#ls-mobile-kb-anchor {
+    opacity:0;
+    position:fixed;
+    top:-9999px;
+}