perf: slow switch to the editor mode for long pages

src/main/frontend/components/block.cljs

@@ -632,7 +632,7 @@
                                     (fn []
                                       (let [el-popup (rum/deref *el-popup)
                                             cb (fn [^js e]
-                                                 (when-not (:editor/editing? @state/state)
+                                                 (when-not (:editor/editing @state/state)
                                            ;; Esc
                                                    (and (= e.which 27)
                                                         (when-let [tp (rum/deref *tippy-ref)]
@@ -2528,7 +2528,7 @@
                 :block? true
                 :editor-box (state/get-component :editor/box)}
         edit-input-id (str "edit-block-" blocks-container-id "-" uuid)
-        edit? (state/sub [:editor/editing? edit-input-id])
+        edit? (state/sub-editing? edit-input-id)
         block (block/parse-title-and-body block)]
     (when (:block/content block)
       [:div.single-block.ls-block
@@ -2986,7 +2986,7 @@
                       config)
                     (assoc :blocks-container-id @*blocks-container-id))
         edit-input-id (str "edit-block-" @*blocks-container-id "-" (:block/uuid block))
-        edit? (state/sub [:editor/editing? edit-input-id])
+        edit? (state/sub-editing? edit-input-id)
         opts {:edit? edit?
               :edit-input-id edit-input-id}]
     (if unloaded?

src/main/frontend/components/container.cljs

@@ -717,7 +717,7 @@
                                   (and
                                    ;; FIXME: this does not work on CI tests
                                    util/node-test?
-                                   (:editor/editing? @state/state))))
+                                   (:editor/editing @state/state))))
                           (state/close-modal!)
                           (hide-context-menu-and-clear-selection e)))))))
   [state route-match main-content]
@@ -742,7 +742,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? (:editor/editing @state/state)
         default-home (get-default-home-if-valid)
         logged? (user-handler/logged-in?)
         fold-button-on-right? (state/enable-fold-button-right?)

src/main/frontend/components/content.cljs

@@ -436,7 +436,7 @@
 
 (rum/defc non-hiccup-content < rum/reactive
   [id content on-click on-hide config format]
-  (let [edit? (state/sub [:editor/editing? id])]
+  (let [edit? (state/sub-editing? id)]
     (if edit?
       (editor/box {:on-hide on-hide
                    :format format}

src/main/frontend/components/editor.cljs

@@ -459,10 +459,10 @@
                                     max-height))
                                 max-height)
 
-                              (= modal-name "commands")
-                              (min 500))
+                        (= modal-name "commands")
+                        (min 500))
         right-sidebar? (:ui/sidebar-open? @state/state)
-        editing-key    (first (keys (:editor/editing? @state/state)))
+        editing-key    (:editor/editing @state/state)
         *el (rum/use-ref nil)
         _ (rum/use-effect! (fn []
                              (when-let [^js/HTMLElement cnt

src/main/frontend/components/property/value.cljs

@@ -311,7 +311,7 @@
         type (:type schema)
         multiple-values? (= :many (:cardinality schema))
         editor-id (or editor-id (str "ls-property-" blocks-container-id "-" (:db/id block) "-" (:db/id property)))
-        editing? (or editing? (state/sub [:editor/editing? editor-id]))
+        editing? (or editing? (state/sub-editing? editor-id))
         select-opts {:on-chosen (fn []
                                   ;; (when *configure-show? (reset! *configure-show? false))
                                   (when *add-new-item? (reset! *add-new-item? false)))}]
@@ -406,7 +406,7 @@
 
 (rum/defc multiple-blocks-add-button < rum/reactive
   [block property opts]
-  (let [editing? (state/sub :editor/editing?)]
+  (let [editing? (state/sub :editor/editing)]
     (when-not editing?
       [:div.absolute.fade-in
        {:style {:left "-1.75rem"
@@ -425,7 +425,7 @@
 
 (rum/defc delete-value-button < rum/reactive
   [entity property item]
-  (let [editing? (state/sub :editor/editing?)]
+  (let [editing? (state/sub :editor/editing)]
     (when-not (or editing? config/publishing?)
       [:a.close.fade-in
        {:class "absolute top-0 right-0"
@@ -444,7 +444,7 @@
                                :or {show-close-button? true}
                                :as opts}]
   (let [*show-close? (::show-close? state)
-        editing? (state/sub [:editor/editing? editor-id])]
+        editing? (state/sub-editing? editor-id)]
     [:div (cond->
            {:on-mouse-over #(reset! *show-close? true)
             :on-mouse-out  #(reset! *show-close? false)}

src/main/frontend/handler/block.cljs

@@ -108,7 +108,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/sub :editor/editing))
                   (< (- (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 (state/sub :editor/editing))
              (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 (state/sub :editor/editing)
              (or (state/sub :mobile/show-toolbar?)
                  (mobile-util/native-ipad?)))
     (let [parent-id (state/get-edit-input-id)

src/main/frontend/state.cljs

@@ -117,7 +117,7 @@
       :editor/action-data                    nil
       ;; With label or other data
       :editor/last-saved-cursor              nil
-      :editor/editing?                       nil
+      :editor/editing                        (atom nil)
       :editor/in-composition?                false
       :editor/content                        (atom {})
       :editor/block                          (atom nil)
@@ -570,6 +570,13 @@ Similar to re-frame subscriptions"
       ks-coll? (util/react (rum/cursor-in state ks))
       :else    (util/react (rum/cursor state ks)))))
 
+(defn sub-editing?
+  [editor-id]
+  (when editor-id
+    (rum/react
+     (rum/derived-atom [(:editor/editing @state)] [:ui/editing editor-id]
+                       (fn [id] (= editor-id id))))))
+
 (defn sub-config
   "Sub equivalent to get-config which should handle all sub user-config access"
   ([] (sub-config (get-current-repo)))
@@ -913,7 +920,7 @@ Similar to re-frame subscriptions"
 
 (defn get-edit-input-id
   []
-  (ffirst (:editor/editing? @state)))
+  @(:editor/editing @state))
 
 (defn get-input
   []
@@ -1002,9 +1009,7 @@ Similar to re-frame subscriptions"
 
 (defn set-edit-input-id!
   [input-id]
-  (swap! state update :editor/editing?
-         (fn [_m]
-           (and input-id {input-id true}))))
+  (set-state! :editor/editing input-id))
 
 (defn get-edit-pos
   []
@@ -1215,16 +1220,16 @@ Similar to re-frame subscriptions"
 
 (defn clear-edit!
   []
-  (swap! state merge {:editor/editing? nil
-                      :cursor-range    nil
+  (set-state! :editor/editing nil)
+  (swap! state merge {:cursor-range    nil
                       :editor/last-saved-cursor nil})
   (set-state! :editor/content {})
   (set-state! :editor/block nil))
 
 (defn into-code-editor-mode!
   []
-  (swap! state merge {:editor/editing?   nil
-                      :cursor-range      nil
+  (set-state! :editor/editing nil)
+  (swap! state merge {:cursor-range      nil
                       :editor/code-mode? true}))
 
 (defn set-editor-last-pos!
@@ -1892,8 +1897,9 @@ Similar to re-frame subscriptions"
   ([edit-input-id content block cursor-range]
    (set-editing! edit-input-id content block cursor-range true))
   ([edit-input-id content block cursor-range move-cursor?]
-   (util/profile "set-editing!"
-                 (if (> (count content)
+   (util/profile
+    "set-editing!"
+    (if (> (count content)
            (block-content-max-length (get-current-repo)))
       (let [elements (array-seq (js/document.getElementsByClassName (str "id" (:block/uuid block))))]
         (when (first elements)
@@ -1910,11 +1916,11 @@ Similar to re-frame subscriptions"
                              :block.temp/container (gobj/get container "id"))
                       block)
               content (string/trim (or content ""))]
+          (set-state! :editor/editing edit-input-id)
           (swap! state
                  (fn [state]
                    (-> state
                        (assoc
-                        :editor/editing? {edit-input-id true}
                         :editor/set-timestamp-block nil
                         :cursor-range cursor-range))))
           (set-state! :editor/block block)

src/main/frontend/ui.cljs

@@ -952,7 +952,7 @@
   [state {:keys [fixed-position? open? in-editor? html] :as opts} child]
   (let [*mounted? (::mounted? state)
         manual (not= open? nil)
-        edit-id (ffirst (state/sub :editor/editing?))
+        edit-id (state/sub :editor/editing)
         editing-node (when edit-id (gdom/getElement edit-id))
         editing? (some? editing-node)
         scrolling? (state/sub :ui/scrolling?)