fix: scroll up if Enter pressed at the bottom

src/main/frontend/components/block.cljs

@@ -3358,7 +3358,7 @@
                                                (not= (select-keys (first (:rum/args old-state)) config-compare-keys)
                                                      (select-keys (first (:rum/args new-state)) config-compare-keys)))]
                       (boolean result)))}
-  [config item {:keys [top? bottom?]}]
+  [config item {:keys [top? bottom? edit-block]}]
   (let [original-block item
         linked-block (:block/link item)
         item (or linked-block item)
@@ -3372,7 +3372,8 @@
                   config)
         ref? (:ref? config)
         custom-query? (boolean (:custom-query? config))
-        lazy? (:lazy? config)
+        lazy? (or ref? custom-query? (:lazy? config))
+        initial-state (= (:block/uuid item) (:block/uuid edit-block))
         cp-f (fn []
                (rum/with-key (block-container config' item)
                  (str (:blocks-container-id config')
@@ -3380,23 +3381,26 @@
                       (:block/uuid item)
                       (when linked-block
                         (str "-" (:block/uuid original-block))))))]
-    (if (or ref? custom-query? lazy?)
+    (if lazy?
       (ui/lazy-visible cp-f
                        {:debug-id (str "block-container-ref " (:db/id item))
+                        :initial-state initial-state
                         :fade-in? false})
       (cp-f))))
 
 (defn- block-list
   [config blocks]
-  (for [[idx item] (medley/indexed blocks)]
-    (let [top? (zero? idx)
-          bottom? (= (count blocks) (inc idx))]
-      (rum/with-key
-        (block-item (assoc config :idx idx) item {:top? top?
-                                                  :bottom? bottom?})
-        (str "blocks-" (:blocks-container-id config)
-             "-"
-             (:block/uuid item))))))
+  (let [edit-block (state/get-edit-block)]
+    (for [[idx item] (medley/indexed blocks)]
+      (let [top? (zero? idx)
+            bottom? (= (count blocks) (inc idx))]
+        (rum/with-key
+          (block-item (assoc config :idx idx) item {:top? top?
+                                                    :bottom? bottom?
+                                                    :edit-block edit-block})
+          (str "blocks-" (:blocks-container-id config)
+               "-"
+               (:block/uuid item)))))))
 
 (rum/defcs blocks-container <
   {:init (fn [state] (assoc state ::init-blocks-container-id (atom nil)))}

src/main/frontend/handler/editor.cljs

@@ -2447,11 +2447,22 @@
             (outdent-on-enter current-node)
 
             :else
-            (profile
-             "Insert block"
-             (outliner-tx/transact!
-              {:outliner-op :insert-blocks}
-              (insert-new-block! state)))))))))
+            (let [main-container (gdom/getElement "main-content-container")
+                  ;; Lazy blocks will not be rendered by default if it's below the screen
+                  input-top (some-> (state/get-input)
+                                    (.getBoundingClientRect)
+                                    (gobj/get "top"))
+                  bottom-reached? (when input-top
+                                    (< (- js/window.innerHeight input-top) 100))]
+              (when (and bottom-reached? main-container)
+                (util/scroll-to main-container (+ (.-scrollTop main-container)
+                                                  200)
+                                false))
+              (profile
+               "Insert block"
+               (outliner-tx/transact!
+                {:outliner-op :insert-blocks}
+                (insert-new-block! state))))))))))
 
 (defn- inside-of-single-block
   "When we are in a single block wrapper, we should always insert a new line instead of new block"

src/main/frontend/ui.cljs

@@ -478,20 +478,13 @@
     (reset! last-scroll-top scroll-top)
     down?))
 
-(defn bottom-reached?
-  [node threshold]
-  (let [full-height (gobj/get node "scrollHeight")
-        scroll-top (gobj/get node "scrollTop")
-        client-height (gobj/get node "clientHeight")]
-    (<= (- full-height scroll-top client-height) threshold)))
-
 (defn on-scroll
   [node {:keys [on-load on-top-reached threshold bottom-reached]
          :or {threshold 500}}]
   (let [scroll-top (gobj/get node "scrollTop")
         bottom-reached? (if (fn? bottom-reached)
                           (bottom-reached)
-                          (bottom-reached? node threshold))
+                          (util/bottom-reached? node threshold))
         top-reached? (= scroll-top 0)
         down? (scroll-down?)]
     (when (and bottom-reached? down? on-load)
@@ -1150,25 +1143,24 @@
 (rum/defc lazy-visible
   ([content-fn]
    (lazy-visible content-fn nil))
-  ([content-fn {:keys [initial-state trigger-once? fade-in? debug-id]
+  ([content-fn {:keys [initial-state trigger-once? fade-in? root-margin _debug-id]
                 :or {initial-state false
                      trigger-once? false
-                     fade-in? true}}]
+                     fade-in? true
+                     root-margin 100}}]
    (let [[visible? set-visible!] (rum/use-state initial-state)
-         root-margin 100
          inViewState (useInView #js {:initialInView initial-state
                                      :rootMargin (str root-margin "px")
                                      :triggerOnce trigger-once?
                                      :onChange (fn [in-view? entry]
-                                                 (when in-view?
-                                                   (prn :debug "render: " debug-id))
-                                                 (let [self-top (.-top (.-boundingClientRect entry))]
-                                                   (when (or (and (not visible?) in-view?)
-                                                             ;; hide only the components below the current top for better ux
-                                                             ;; visible?
-                                                             (and visible? (not in-view?) (> self-top root-margin))
-                                                             )
-                                                     (set-visible! in-view?))))})
+                                                 (set-visible! in-view?)
+                                                 ;; (let [self-top (.-top (.-boundingClientRect entry))]
+                                                 ;;   (when (or (and (not visible?) in-view?)
+                                                 ;;             ;; hide only the components below the current top for better ux
+                                                 ;;             ;; visible?
+                                                 ;;             (and visible? (not in-view?) (> self-top root-margin)))
+                                                 ;;     (set-visible! in-view?)))
+                                                 )})
          ref (.-ref inViewState)]
      (lazy-visible-inner visible? content-fn ref fade-in?))))
 

src/main/frontend/util.cljc

@@ -496,6 +496,14 @@
                            #js {:behavior (if animate? "smooth" "auto")
                                 :block    "center"}))))))
 
+#?(:cljs
+   (defn bottom-reached?
+     [node threshold]
+     (let [full-height (gobj/get node "scrollHeight")
+           scroll-top (gobj/get node "scrollTop")
+           client-height (gobj/get node "clientHeight")]
+       (<= (- full-height scroll-top client-height) threshold))))
+
 #?(:cljs
    (defn link?
      [node]