enhance(mobile): make editing into viewport when insert new line

src/main/frontend/components/editor.cljs

@@ -20,6 +20,7 @@
             [frontend.modules.shortcut.core :as shortcut]
             [frontend.state :as state]
             [frontend.ui :as ui]
+            [frontend.handler.ui :as ui-handler]
             [frontend.util :as util]
             [frontend.util.cursor :as cursor]
             [frontend.util.keycode :as keycode]
@@ -269,7 +270,8 @@
                                                   {:forward-pos 1})
                          ;; TODO: should we add this focus step to `simple-insert!`?
                          (when-let [input (gdom/getElement parent-id)]
-                           (.focus input)))}
+                           (.focus input)
+                           (ui-handler/try-to-editing-input-into-viewport!)))}
        (ui/icon "arrow-back"
                 {:style {:fontSize ui/icon-size}})]]
      [:div

src/main/frontend/handler/editor.cljs

@@ -2375,7 +2375,8 @@
 
 (defn- keydown-new-line
   []
-  (insert "\n"))
+  (insert "\n")
+  (ui-handler/try-to-editing-input-into-viewport!))
 
 (declare delete-and-update)
 

src/main/frontend/handler/editor/lifecycle.cljs

@@ -23,7 +23,7 @@
       (.focus element)
       (when (or (mobile-util/is-native-platform?)
                 (util/mobile?))
-        (js/setTimeout #(util/make-el-into-viewport element 60) 64))))
+        (util/make-el-into-viewport element 60))))
   state)
 
 (defn did-remount!

src/main/frontend/handler/events.cljs

@@ -228,7 +228,7 @@
 
 (defmethod handle :mobile/keyboard-did-show [[_]]
   (when-let [input (state/get-input)]
-    (js/setTimeout #(util/make-el-into-viewport input 60) 64)))
+    (util/make-el-into-viewport input 60)))
 
 (defn run!
   []

src/main/frontend/handler/ui.cljs

@@ -283,3 +283,10 @@
 (defn open-new-window!
   []
   (ipc/ipc "openNewWindow"))
+
+(defn try-to-editing-input-into-viewport!
+  []
+  (when-let [input (state/get-input)]
+    (if (or (mobile/is-native-platform?)
+            (util/mobile?))
+      (util/make-el-into-viewport input 60))))

src/main/frontend/util.cljc

@@ -1490,13 +1490,19 @@
 
 #?(:cljs
    (defn make-el-into-viewport
-     [^js/HTMLElement el offset]
-     (let [viewport-height (or (.-height js/window.visualViewport)
-                               (.-clientHeight js/document.documentElement))
-           target-bottom (.-bottom (.getBoundingClientRect el))]
-       (when (> (+ target-bottom (or (safe-parse-int offset) 0))
-                viewport-height)
-         (.scrollIntoView el #js {:block "center" :behavior "smooth"})))))
+     ([^js/HTMLElement el offset]
+      (make-el-into-viewport el offset true))
+     ([^js/HTMLElement el offset async?]
+      (let [handle #(let [viewport-height (or (.-height js/window.visualViewport)
+                                              (.-clientHeight js/document.documentElement))
+                          target-bottom (.-bottom (.getBoundingClientRect el))]
+                      (when (> (+ target-bottom (or (safe-parse-int offset) 0))
+                               viewport-height)
+                        (.scrollIntoView el #js {:block "center" :behavior "smooth"})))]
+
+        (if async?
+          (js/setTimeout #(handle) 64)
+          (handle))))))
 
 #?(:cljs
    (defn sm-breakpoint?