fix: don't exit editor until another block's editor is ready

This fixes flickering or hiding of the system keyboard between input
transitions on mobile.

src/main/frontend/components/block.cljs

@@ -3050,6 +3050,24 @@
                                                                                            :container-id (:container-id config)}))}})])
      (block-content config block edit-input-id block-id *show-query?))))
 
+(rum/defc block-content-wrapper
+  [block editor-box edit? type-block-editor? editor-cp content-cp]
+  (let [[editing? set-editing!] (hooks/use-state edit?)
+        editing-block (state/get-edit-block)
+        next-edit-block-id (:db/id editing-block)]
+    (hooks/use-effect!
+     (fn []
+       (if (and editing? (false? edit?) next-edit-block-id
+                (not= next-edit-block-id (:db/id block)))
+         ;; editing another block, need to wait another block's editor to be ready
+         (util/schedule #(set-editing! false))
+         (set-editing! edit?))
+       (fn []))
+     [edit?])
+    (if (and editor-box editing? (not type-block-editor?))
+      editor-cp
+      content-cp)))
+
 (rum/defcs ^:large-vars/cleanup-todo block-content-or-editor < rum/reactive
   [state config {:block/keys [uuid] :as block} {:keys [edit-input-id block-id edit? hide-block-refs-count? refs-count *hide-block-refs? *show-query?]}]
   (let [format (if (config/db-based-graph? (state/get-current-repo))
@@ -3075,46 +3093,46 @@
      (when (and db-based? (not table?)) (block-positioned-properties config block :block-left))
      [:div.block-content-or-editor-inner
       [:div.block-row.flex.flex-1.flex-row.gap-1.items-center
-       (if (and editor-box edit? (not type-block-editor?))
-         [:div.editor-wrapper.flex.flex-1.w-full
-          {:id editor-id
-           :class (util/classnames [{:opacity-50 (boolean (or (ldb/built-in? block) (ldb/journal? block)))}])}
-          (ui/catch-error
-           (ui/block-error "Something wrong in the editor" {})
-           (editor-box {:block block
-                        :block-id uuid
-                        :block-parent-id block-id
-                        :format format}
-                       edit-input-id
-                       config))]
-         [:div.flex.flex-1.w-full.block-content-wrapper
-          {:style {:display "flex"}}
-          (when-let [actions-cp (:page-title-actions-cp config)]
-            (actions-cp block))
-          (block-content-with-error config block edit-input-id block-id *show-query? editor-box)
-
-          (when (and (not hide-block-refs-count?)
-                     (not named?)
-                     (not (:table-block-title? config)))
-            [:div.flex.flex-row.items-center
-             (when (and (:embed? config)
-                        (:embed-parent config))
-               [:a.opacity-70.hover:opacity-100.svg-small.inline
-                {:on-pointer-down (fn [e]
-                                    (util/stop e)
-                                    (when-let [block (:embed-parent config)]
-                                      (editor-handler/edit-block! block :max)))}
-                svg/edit])
-
-             (when block-reference-only?
-               [:a.opacity-70.hover:opacity-100.svg-small.inline
-                {:on-pointer-down (fn [e]
-                                    (util/stop e)
-                                    (editor-handler/edit-block! block :max))}
-                svg/edit])])
-
-          (when-not (or (:table? config) (:property? config) (:page-title? config))
-            (block-refs-count block refs-count *hide-block-refs?))])
+       (let [content-cp [:div.flex.flex-1.w-full.block-content-wrapper
+                         {:style {:display "flex"}}
+                         (when-let [actions-cp (:page-title-actions-cp config)]
+                           (actions-cp block))
+                         (block-content-with-error config block edit-input-id block-id *show-query? editor-box)
+
+                         (when (and (not hide-block-refs-count?)
+                                    (not named?)
+                                    (not (:table-block-title? config)))
+                           [:div.flex.flex-row.items-center
+                            (when (and (:embed? config)
+                                       (:embed-parent config))
+                              [:a.opacity-70.hover:opacity-100.svg-small.inline
+                               {:on-pointer-down (fn [e]
+                                                   (util/stop e)
+                                                   (when-let [block (:embed-parent config)]
+                                                     (editor-handler/edit-block! block :max)))}
+                               svg/edit])
+
+                            (when block-reference-only?
+                              [:a.opacity-70.hover:opacity-100.svg-small.inline
+                               {:on-pointer-down (fn [e]
+                                                   (util/stop e)
+                                                   (editor-handler/edit-block! block :max))}
+                               svg/edit])])
+
+                         (when-not (or (:table? config) (:property? config) (:page-title? config))
+                           (block-refs-count block refs-count *hide-block-refs?))]
+             editor-cp [:div.editor-wrapper.flex.flex-1.w-full
+                        {:id editor-id
+                         :class (util/classnames [{:opacity-50 (boolean (or (ldb/built-in? block) (ldb/journal? block)))}])}
+                        (ui/catch-error
+                         (ui/block-error "Something wrong in the editor" {})
+                         (editor-box {:block block
+                                      :block-id uuid
+                                      :block-parent-id block-id
+                                      :format format}
+                                     edit-input-id
+                                     config))]]
+         (block-content-wrapper block editor-box edit? type-block-editor? editor-cp content-cp))
 
        (when-not (:table-block-title? config)
          [:div.ls-block-right.flex.flex-row.items-center.self-start.gap-1

src/main/frontend/components/editor.cljs

@@ -800,6 +800,8 @@
                                       (when (= (util/ekey e) "Escape")
                                         (editor-on-hide state :esc e))))
                :auto-focus true
+               :autocapitalize "off"
+               :autocorrect "off"
                :class heading-class}
                (some? parent-block)
                (assoc :parentblockid (str (:block/uuid parent-block)))

src/main/frontend/state.cljs

@@ -1991,11 +1991,11 @@ Similar to re-frame subscriptions"
         (assert (and container-id (:block/uuid block))
                 "container-id or block uuid is missing")
         (set-state! :editor/block-refs #{})
+        (set-state! :editor/block block)
         (if property-block
           (set-editing-block-id! [container-id (:block/uuid property-block) (:block/uuid block)])
           (set-editing-block-id! [container-id (:block/uuid block)]))
         (set-state! :editor/container-id container-id)
-        (set-state! :editor/block block)
         (set-state! :editor/content content :path-in-sub-atom (:block/uuid block))
         (set-state! :editor/last-key-code nil)
         (set-state! :editor/set-timestamp-block nil)