improve cursor scroll

src/main/frontend/components/sidebar.cljs

@@ -314,7 +314,7 @@
 (defn mobile-bar-commands
   [parent-id]
   (let [viewport-fn (fn [] (when-let [input (gdom/getElement parent-id)]
-                             (util/scroll-editor-cursor input :move-to-one-quarter? true)
+                             (util/scroll-editor-cursor input :to-vw-one-quarter? true)
                              (.focus input)))]
     (zipmap mobile-bar-icons-keywords
             [(mobile-bar-command editor-handler/cycle-todo! "checkbox" true)

src/main/frontend/handler/editor.cljs

@@ -1681,7 +1681,8 @@
             (move-nodes blocks))
           (when-let [input-id (state/get-edit-input-id)]
             (when-let [input (gdom/getElement input-id)]
-              (.focus input))))
+              (.focus input)
+              (js/setTimeout #(util/scroll-editor-cursor input) 100))))
         (let [ids (state/get-selection-block-ids)]
           (when (seq ids)
             (let [lookup-refs (map (fn [id] [:block/uuid id]) ids)

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

@@ -19,8 +19,8 @@
     (js/setTimeout #(keyboards-handler/esc-save! state) 100)
 
     (when-let [element (gdom/getElement id)]
-      (util/scroll-editor-cursor element :to-vw-center? true)
-      (.focus element)))
+      (.focus element)
+      (js/setTimeout #(util/scroll-editor-cursor element :to-vw-center? true) 50)))
   state)
 
 (defn did-remount!

src/main/frontend/util.cljc

@@ -1341,44 +1341,47 @@
 (def keyboard-height (atom nil))
 #?(:cljs
    (defn scroll-editor-cursor
-     [^js/HTMLElement el & {:keys [to-vw-one-quarter? to-vw-center?]}]
+     [^js/HTMLElement el & {:keys [to-vw-one-quarter?]}]
      (when (and el (native-platform?))
        (let [box-rect    (.getBoundingClientRect el)
              box-top     (.-top box-rect)
              box-bottom  (.-bottom box-rect)
 
+             header-height (-> (gdom/getElementByClass "cp__header")
+                               .-clientHeight)
+
              main-node   (app-scroll-container-node)
              scroll-top  (.-scrollTop main-node)
 
              current-pos (get-selection-start el)
-             cursor-top  (some-> (gdom/getElement "mock-text")
+             mock-text   (some-> (gdom/getElement "mock-text")
                                  gdom/getChildren
                                  array-seq
-                                 (nth-safe current-pos)
-                                 .-offsetTop)
+                                 (nth-safe current-pos))
+             offset-top   (and mock-text (.-offsetTop mock-text))
+             offset-height (and mock-text (.-offsetHeight mock-text))
 
-             cursor-y    (if cursor-top (+ cursor-top box-top) box-bottom)
+             cursor-y    (if offset-top (+ offset-top box-top offset-height 2) box-bottom)
              vw-height   (or (.-height js/window.visualViewport)
                              (.-clientHeight js/document.documentElement))
+             ;; mobile toolbar height: 40px
              scroll      (- cursor-y (- vw-height (+ @keyboard-height 40)))]
          (cond
            (and to-vw-one-quarter? (> cursor-y (* vw-height 0.4)))
            (set! (.-scrollTop main-node) (+ scroll-top (- cursor-y (/ vw-height 4))))
 
-           (and to-vw-center? (> cursor-y (/ vw-height 2)))
-           (.scrollBy main-node (bean/->js {:top (- cursor-y (/ vw-height 2))}))
-
-           (and (< cursor-y 86) (>= cursor-y 62))
-           (.scrollBy main-node (bean/->js {:top -24}))
+           (and (< cursor-y (+ header-height offset-height 4)) ;; 4 is top+bottom padding for per line
+                (>= cursor-y header-height))
+           (.scrollBy main-node (bean/->js {:top (- (+ offset-height 4))}))
 
-           (< cursor-y 56)
+           (< cursor-y header-height)
            (let [_ (.scrollIntoView el true)
                  main-node (app-scroll-container-node)
                  scroll-top (.-scrollTop main-node)]
              (set! (.-scrollTop main-node) (- scroll-top (/ vw-height 4))))
 
            (> scroll 0)
-           (set! (.-scrollTop main-node) (+ scroll-top 24))
+           (set! (.-scrollTop main-node) (+ scroll-top scroll))
 
            :else
            nil)))))