fix: bad performance due to ui/tippy sub state

src/main/frontend/components/block.cljs

@@ -639,7 +639,7 @@
                                     (fn []
                                       (let [el-popup (rum/deref *el-popup)
                                             cb (fn [^js e]
-                                                 (when-not (:editor/editing @state/state)
+                                                 (when-not @state/*editor-editing-ref
                                            ;; Esc
                                                    (and (= e.which 27)
                                                         (when-let [tp (rum/deref *tippy-ref)]
@@ -2223,7 +2223,7 @@
                     (when block-id (state/set-selection-start-block! block-id))))))))))))
 
 (rum/defc dnd-separator-wrapper < rum/reactive
-  [block block-id slide? top? block-content?]
+  [block children block-id slide? top? block-content?]
   (let [dragging? (rum/react *dragging?)
         drag-to-block (rum/react *drag-to-block)]
     (when (and
@@ -2237,9 +2237,9 @@
              (and (not top?) (= move-to :top))
              (and block-content? (not= move-to :nested))
              (and (not block-content?)
-                  (seq (:block/_parent block))
+                  (first children)
                   (= move-to :nested)))
-         (dnd-separator move-to block-content?))))))
+          (dnd-separator move-to block-content?))))))
 
 (defn clock-summary-cp
   [block body]
@@ -2820,7 +2820,7 @@
   (let [linked-block (:block/link (db/entity (:db/id block*)))
         block (cond
                 (or (and (:custom-query? config)
-                         (empty? (:block/_parent block*))
+                         (nil? (first (:block/_parent block*)))
                          (not (and (:dsl-query? config)
                                    (string/includes? (:query config) "not"))))
                     navigated?)
@@ -2881,11 +2881,11 @@
    :did-mount (fn [state]
                 (when @(::hidden? state)
                   (reset! (::hidden? state) (hide-block? @(::ref state))))
-                (when-let [editing-node @(:editor/editing @state/state)]
+                (when-let [editing-node @state/*editor-editing-ref]
                   (let [*ref (::ref state)
                         ref @*ref
-                        editing-prev-node (:editor/editing-prev-node @state/state)
-                        editing-parent-node (:editor/editing-parent-node @state/state)]
+                        editing-prev-node @(:editor/editing-prev-node @state/state)
+                        editing-parent-node @(:editor/editing-parent-node @state/state)]
                     (when (and ref
                                (not= editing-node ref)
                                (= (gobj/get ref "id") (.-id editing-node))
@@ -2938,7 +2938,8 @@
         own-number-list? (:own-order-number-list? config)
         order-list? (boolean own-number-list?)
         selected? (when-not (:slide? config)
-                    (state/sub-block-selected? uuid))]
+                    (state/sub-block-selected? uuid))
+        children (:block/_parent block)]
     [:div.ls-block
      (cond->
       {:blockid (str uuid)
@@ -3021,12 +3022,12 @@
                            :in-block-container? true})])
 
      (when-not (or (:hide-children? config) in-whiteboard?)
-       (let [children (db/sort-by-left (:block/_parent block) block)
+       (let [children' (db/sort-by-left children block)
              config' (-> (update config :level inc)
                          (dissoc :original-block))]
-         (block-children config' block children collapsed?)))
+         (block-children config' block children' collapsed?)))
 
-     (when-not in-whiteboard? (dnd-separator-wrapper block block-id slide? false false))]))
+     (when-not in-whiteboard? (dnd-separator-wrapper block children block-id slide? false false))]))
 
 (defn- block-changed?
   [old-block new-block]

src/main/frontend/components/container.cljs

@@ -678,7 +678,7 @@
                                   (and
                                    ;; FIXME: this does not work on CI tests
                                    util/node-test?
-                                   (:editor/editing @state/state))))
+                                   state/*editor-editing-ref)))
                           (state/close-modal!)
                           (hide-context-menu-and-clear-selection e)))))))
   [state route-match main-content]
@@ -703,7 +703,7 @@
         home? (= :home route-name)
         native-titlebar? (state/sub [:electron/user-cfgs :window/native-titlebar?])
         window-controls? (and (util/electron?) (not util/mac?) (not native-titlebar?))
-        edit? (:editor/editing @state/state)
+        edit? (some? @state/*editor-editing-ref)
         default-home (get-default-home-if-valid)
         logged? (user-handler/logged-in?)
         fold-button-on-right? (state/enable-fold-button-right?)

src/main/frontend/handler/block.cljs

@@ -107,7 +107,7 @@
   (when-let [touches (.-targetTouches event)]
     (let [selection-type (.-type (.getSelection js/document))]
       (when-not (= selection-type "Range")
-        (when (or (not (state/sub :editor/editing))
+        (when (or (not @state/*editor-editing-ref)
                   (< (- (js/Date.now) @*touch-start) 600))
           (when (and (= (.-length touches) 1) @*swipe)
             (let [{:keys [x0 xi direction]} @*swipe

src/main/frontend/mobile/footer.cljs

@@ -51,7 +51,7 @@
 (rum/defc footer < rum/reactive
   []
   (when (and (#{:page :home} (state/sub [:route-match :data :name]))
-             (not (state/sub :editor/editing))
+             (not (rum/react state/*editor-editing-ref))
              (state/sub :mobile/show-tabbar?)
              (state/get-current-repo))
     [:div.cp__footer.w-full.bottom-0.justify-between

src/main/frontend/mobile/mobile_bar.cljs

@@ -77,7 +77,7 @@
 
 (rum/defc mobile-bar < rum/reactive
   []
-  (when (and (state/sub :editor/editing)
+  (when (and (rum/react state/*editor-editing-ref)
              (or (state/sub :mobile/show-toolbar?)
                  (mobile-util/native-ipad?)))
     (let [parent-id (state/get-edit-input-id)

src/main/frontend/state.cljs

@@ -22,6 +22,8 @@
 (defonce *profile-state
   (atom {}))
 
+(defonce *editor-editing-ref (atom nil))
+
 ;; Stores main application state
 (defonce ^:large-vars/data-var state
   (let [document-mode? (or (storage/get :document/mode?) false)
@@ -119,7 +121,9 @@
       :editor/action-data                    nil
       ;; With label or other data
       :editor/last-saved-cursor              nil
-      :editor/editing                        (atom nil)
+      :editor/ref->editing?                  (atom {})
+      :editor/editing-prev-node              (atom nil)
+      :editor/editing-parent-node            (atom nil)
       :editor/in-composition?                false
       :editor/content                        (atom {})
       :editor/block                          (atom nil)
@@ -588,11 +592,12 @@ Similar to re-frame subscriptions"
       :else    (util/react (rum/cursor state ks)))))
 
 (defn sub-editing?
-  [block-node]
-  (when block-node
+  [block-ref]
+  (when block-ref
+    (when (nil? (get @(:editor/ref->editing? @state) block-ref))
+      (swap! (:editor/ref->editing? @state) assoc block-ref (atom false)))
     (rum/react
-     (rum/derived-atom [(:editor/editing @state)] [:ui/editing block-node]
-       (fn [editing-node] (= editing-node block-node))))))
+     (get @(:editor/ref->editing? @state) block-ref))))
 
 (defn sub-config
   "Sub equivalent to get-config which should handle all sub user-config access"
@@ -944,7 +949,7 @@ Similar to re-frame subscriptions"
 
 (defn get-edit-input-id
   []
-  (when-let [node @(:editor/editing @state)]
+  (when-let [node @*editor-editing-ref]
     (some-> (dom/sel1 node "textarea")
             (gobj/get "id"))))
 
@@ -955,7 +960,7 @@ Similar to re-frame subscriptions"
 
 (defn get-edit-block-node
   []
-  @(:editor/editing @state))
+  @*editor-editing-ref)
 
 (defn editing?
   []
@@ -1250,7 +1255,9 @@ Similar to re-frame subscriptions"
 
 (defn clear-edit!
   []
-  (set-state! :editor/editing nil)
+  (when-let [prev-ref @*editor-editing-ref]
+    (reset! (get @(:editor/ref->editing? @state) prev-ref) false))
+  (reset! *editor-editing-ref nil)
   (set-state! :editor/editing-prev-node nil)
   (set-state! :editor/editing-parent-node nil)
   (swap! state merge {:cursor-range    nil
@@ -1261,7 +1268,9 @@ Similar to re-frame subscriptions"
 
 (defn into-code-editor-mode!
   []
-  (set-state! :editor/editing nil)
+  (when-let [prev-ref @*editor-editing-ref]
+    (reset! (get @(:editor/ref->editing? @state) prev-ref) false))
+  (reset! *editor-editing-ref nil)
   (swap! state merge {:cursor-range      nil
                       :editor/code-mode? true}))
 
@@ -1964,7 +1973,13 @@ Similar to re-frame subscriptions"
 
 (defn set-editing-ref!
   [ref]
-  (set-state! :editor/editing ref)
+  (let [prev-ref @*editor-editing-ref]
+    (when (and prev-ref (not= ref prev-ref))
+      (reset! (get @(:editor/ref->editing? @state) prev-ref) false)))
+  (if-let [*state (get @(:editor/ref->editing? @state) ref)]
+    (reset! *state true)
+    (swap! (:editor/ref->editing? @state) assoc ref (atom true)))
+  (reset! *editor-editing-ref ref)
   (when ref
     (when-let [prev (.-previousSibling ref)]
       (set-state! :editor/editing-prev-node prev))

src/main/frontend/ui.cljs

@@ -962,22 +962,13 @@
           :checked selected}]
         label])]))
 
-(rum/defcs tippy < rum/reactive
+(rum/defcs tippy < rum/static
   (rum/local false ::mounted?)
-  [state {:keys [fixed-position? open? in-editor? html] :as opts} child]
+  [state {:keys [fixed-position? open? html] :as opts} child]
   (let [*mounted? (::mounted? state)
         manual (not= open? nil)
-        editing-node (state/sub :editor/editing)
-        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?))))]
+        disabled? (not (state/enable-tooltip?))]
     (Tippy (->
             (merge {:arrow true
                     :sticky true
@@ -991,7 +982,9 @@
                     :popperOptions {:modifiers {:flip {:enabled (not fixed-position?)}
                                                 :hide {:enabled false}
                                                 :preventOverflow {:enabled false}}}
-                    :onShow #(reset! *mounted? true)
+                    :onShow #(when-not (or (some? @state/*editor-editing-ref)
+                                           @(:ui/scrolling? @state/state))
+                               (reset! *mounted? true))
                     :onHide #(reset! *mounted? false)}
                    opts)
             (assoc :html (or
@@ -1137,18 +1130,7 @@
 
 (rum/defc lazy-loading-placeholder
   [height]
-  [:div {:style {:height height}}]
-  ;; [:div.shadow.rounded-md.p-4.w-full.mx-auto.mb-5.opacity-70 {:style {:height height}}
-  ;;  ;; [:div.animate-pulse.flex.space-x-4
-  ;;  ;;  [:div.flex-1.space-y-3.py-1
-  ;;  ;;   [:div.h-2.rounded]
-  ;;  ;;   [:div.space-y-3
-  ;;  ;;    [:div.grid.grid-cols-3.gap-4
-  ;;  ;;     [:div.h-2.rounded.col-span-2]
-  ;;  ;;     [:div.h-2.rounded.col-span-1]]
-  ;;  ;;    [:div.h-2.rounded]]]]
-  ;;  ]
-  )
+  [:div {:style {:height height}}])
 
 (rum/defc lazy-visible-inner
   [visible? content-fn ref fade-in?]