diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 42741a4aae..8413860b97 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/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) diff --git a/src/main/frontend/handler/editor.cljs b/src/main/frontend/handler/editor.cljs index 146e4f2132..118c4f2c71 100644 --- a/src/main/frontend/handler/editor.cljs +++ b/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) diff --git a/src/main/frontend/handler/editor/lifecycle.cljs b/src/main/frontend/handler/editor/lifecycle.cljs index 2a8a096ba0..ceac60dcfb 100644 --- a/src/main/frontend/handler/editor/lifecycle.cljs +++ b/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! diff --git a/src/main/frontend/util.cljc b/src/main/frontend/util.cljc index 994e7c13c2..3d26f00257 100644 --- a/src/main/frontend/util.cljc +++ b/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 (+ 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))})) - (and (< cursor-y 86) (>= cursor-y 62)) - (.scrollBy main-node (bean/->js {:top -24})) - - (< 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)))))