fix: disable block/page preview when scrolling

src/main/frontend/components/sidebar.cljs

@@ -24,6 +24,7 @@
             [frontend.handler.page :as page-handler]
             [frontend.handler.route :as route-handler]
             [frontend.handler.user :as user-handler]
+            [frontend.handler.common :as common-handler]
             [frontend.mixins :as mixins]
             [frontend.mobile.footer :as footer]
             [frontend.mobile.util :as mobile-util]
@@ -278,7 +279,8 @@
                    {:drop (fn [_e files]
                             (when-let [id (state/get-edit-input-id)]
                               (let [format (:block/format (state/get-edit-block))]
-                                (editor-handler/upload-asset id files format editor-handler/*asset-uploading? true))))}))
+                                (editor-handler/upload-asset id files format editor-handler/*asset-uploading? true))))})
+                  (common-handler/listen-to-scroll! element))
                 state)}
   [{:keys [route-match global-graph-pages? route-name indexeddb-support? db-restoring? main-content]}]
   (let [left-sidebar-open? (state/sub :ui/left-sidebar-open?)

src/main/frontend/handler/common.cljs

@@ -139,3 +139,15 @@
       (log/error :parse/config-failed e)
       (state/pub-event! [:backup/broken-config (state/get-current-repo) content])
       (rewrite/parse-string config/config-default-content))))
+
+(defn listen-to-scroll!
+  [element]
+  (let [*scroll-timer (atom nil)]
+    (.addEventListener element "scroll"
+                       (fn []
+                         (when @*scroll-timer
+                           (js/clearTimeout @*scroll-timer))
+                         (state/set-state! :ui/scrolling? true)
+                         (reset! *scroll-timer (js/setTimeout
+                                                (fn [] (state/set-state! :ui/scrolling? false)) 500)))
+                       false)))

src/main/frontend/state.cljs

@@ -89,6 +89,7 @@
      :ui/shortcut-tooltip?                  (if (false? (storage/get :ui/shortcut-tooltip?))
                                               false
                                               true)
+     :ui/scrolling?                         false
      :document/mode?                        document-mode?
 
      :config                                {}

src/main/frontend/ui.cljs

@@ -791,18 +791,27 @@
   (rum/local false ::mounted?)
   [state {:keys [fixed-position? open? in-editor?] :as opts} child]
   (let [*mounted? (::mounted? state)
-        mounted? @*mounted?
         manual (not= open? nil)
-        editing? (state/sub :editor/editing?)]
+        edit-id (ffirst (state/sub :editor/editing?))
+        editing-node (when edit-id (gdom/getElement edit-id))
+        editing? (some? editing-node)
+        scrolling? (state/sub :ui/scrolling?)
+        open? (if manual open? @*mounted?)
+        disabled? (boolean
+                   (or
+                    (and in-editor?
+                         ;; editing in non-preview containers or scrolling
+                         (not (util/rec-get-tippy-container editing-node))
+                         (or editing? scrolling?))
+                    (not (state/enable-tooltip?))))]
     (Tippy (->
             (merge {:arrow true
                     :sticky true
                     :delay 600
                     :theme "customized"
-                    :disabled (not (state/enable-tooltip?))
+                    :disabled disabled?
                     :unmountHTMLWhenHide true
-                    :open (when-not (and in-editor? editing?)
-                            (if manual open? @*mounted?))
+                    :open (if disabled? false open?)
                     :trigger (if manual "manual" "mouseenter focus")
                     ;; See https://github.com/tvkhoa/react-tippy/issues/13
                     :popperOptions {:modifiers {:flip {:enabled (not fixed-position?)}
@@ -811,18 +820,19 @@
                     :onShow #(reset! *mounted? true)
                     :onHide #(reset! *mounted? false)}
                    opts)
-            (assoc :html (if (or open? mounted?)
-                           (try
-                             (when-let [html (:html opts)]
-                               (if (fn? html)
-                                 (html)
-                                 [:div.px-2.py-1
-                                  html]))
-                             (catch js/Error e
-                               (log/error :exception e)
-                               [:div]))
-                           [:div {:key "tippy"} ""])))
-            (rum/fragment {:key "tippy-children"} child))))
+            (assoc :html (or
+                          (when open?
+                            (try
+                              (when-let [html (:html opts)]
+                                (if (fn? html)
+                                  (html)
+                                  [:div.px-2.py-1
+                                   html]))
+                              (catch js/Error e
+                                (log/error :exception e)
+                                [:div])))
+                          [:div {:key "tippy"} ""])))
+           (rum/fragment {:key "tippy-children"} child))))
 
 (defn slider
   [default-value {:keys [min max on-change]}]

src/main/frontend/util.cljc

@@ -669,6 +669,14 @@
            :up
            :down)))))
 
+#?(:cljs
+   (defn rec-get-tippy-container
+     [node]
+     (if (and node (d/has-class? node "tippy-tooltip-content"))
+       node
+       (and node
+            (rec-get-tippy-container (gobj/get node "parentNode"))))))
+
 #?(:cljs
    (defn rec-get-blocks-container
      [node]