enhance: cache container id so that it works when undo/redo

src/main/frontend/components/block.cljs

@@ -27,6 +27,7 @@
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.db.model :as model]
+            [frontend.mixins :as mixins]
             [frontend.db-mixins :as db-mixins]
             [frontend.extensions.highlight :as highlight]
             [frontend.extensions.latex :as latex]
@@ -2513,11 +2514,8 @@
             (when-let [refs-cp (state/get-component :block/linked-references)]
               (refs-cp uuid)))]))]))
 
-(rum/defcs single-block-cp <
-  {:init (fn [state]
-           (let [container-id (swap! (:ui/container-id @state/state) inc)]
-             (assoc state ::container-id container-id)))}
-  [state block-uuid]
+(rum/defcs single-block-cp < mixins/container-id
+  [state block-uuid _config]
   (let [uuid (if (string? block-uuid) (uuid block-uuid) block-uuid)
         block (db/entity [:block/uuid uuid])
         config {:id (str uuid)
@@ -3459,16 +3457,13 @@
             (str (:container-id config) "-" (:db/id item)))
           (block-render))))))
 
-(rum/defcs blocks-container < rum/static
-  {:init (fn [state]
-           (let [container-id (swap! (:ui/container-id @state/state) inc)]
-             (assoc state ::container-id container-id)))}
+(rum/defcs blocks-container < mixins/container-id rum/static
   [state blocks config]
   (let [doc-mode? (:document/mode? config)]
     (when (seq blocks)
       [:div.blocks-container.flex-1
        {:class (when doc-mode? "document-mode")}
-       (block-list (assoc config :container-id (::container-id state))
+       (block-list (assoc config :container-id (:container-id state))
                    blocks)])))
 
 (rum/defcs breadcrumb-with-container < rum/reactive db-mixins/query

src/main/frontend/extensions/tldraw.cljs

@@ -40,7 +40,9 @@
 
 (rum/defc block-cp
   [props]
-  ((state/get-component :block/single-block) (uuid (gobj/get props "blockId"))))
+  (let [block-id (uuid (gobj/get props "blockId"))]
+    ((state/get-component :block/single-block) block-id {:id (str block-id)
+                                                         :whiteboard? true})))
 
 (rum/defc breadcrumb
   [props]

src/main/frontend/mixins.cljs

@@ -143,6 +143,14 @@
      (state/set-block-component-editing-mode! false)
      state)})
 
+(def container-id
+  "Notice: the last parameter needs to be a `config` with `id`, optional `sidebar?`, `whiteboard?`"
+  {:init (fn [state]
+           (let [config (last (:rum/args state))
+                 key (select-keys config [:id :sidebar? :whiteboard?])
+                 container-id (state/get-container-id key)]
+             (assoc state :container-id container-id)))})
+
 (defn perf-measure-mixin
   "Does performance measurements in development."
   [desc]

src/main/frontend/state.cljs

@@ -296,6 +296,7 @@
 
       :ui/loading?                           {}
       :ui/container-id                       (atom 0)
+      :ui/cached-key->container-id           (atom {})
       :feature/enable-sync?                  (storage/get :logseq-sync-enabled)
       :feature/enable-sync-diff-merge?       ((fnil identity true) (storage/get :logseq-sync-diff-merge-enabled))
 
@@ -2401,6 +2402,20 @@ Similar to re-frame subscriptions"
   []
   (swap! (:ui/container-id @state) inc))
 
+(defn get-container-id
+  "Either cached container-id or a new id"
+  [key]
+  (when (seq key)
+    (or (get @(:ui/cached-key->container-id @state) key)
+        (let [id (get-next-container-id)]
+          (swap! (:ui/cached-key->container-id @state) assoc key id)
+          id))))
+
+(comment
+  (defn remove-container-key!
+    [key]
+    (swap! (:ui/cached-key->container-id @state) dissoc key)))
+
 (defn get-editor-info
   []
   (when-let [edit-block (get-edit-block)]