🐛 Fix typographies grouping

CHANGES.md

@@ -7,6 +7,7 @@
 - Fix colors from unlinked libs in color selected widget [Taiga #3712](https://tree.taiga.io/project/penpot/issue/3712)
 - Fix fill information not complete when paste plain text [Taiga #3680](https://tree.taiga.io/project/penpot/issue/3680)
 - Fix problem when resizing groups [Taiga #3702](https://tree.taiga.io/project/penpot/issue/3702)
+- Fix issues on typographies assets grouping [#2073](https://github.com/penpot/penpot/issues/2073)
 
 ## 1.14.1-beta
 

frontend/src/app/main/data/workspace/libraries.cljs

@@ -233,10 +233,12 @@
 
 (defn- do-update-tipography
   [it state typography file-id]
-  (let [data    (get state :workspace-data)
+  (let [data        (get state :workspace-data)
-        changes (-> (pcb/empty-changes it)
+        [path name] (cph/parse-path-name (:name typography))
-                    (pcb/with-library-data data)
+        typography  (assoc typography :path path :name name)
-                    (pcb/update-typography typography))]
+        changes     (-> (pcb/empty-changes it)
+                        (pcb/with-library-data data)
+                        (pcb/update-typography typography))]
     (rx/of (dwu/start-undo-transaction)
            (dch/commit-changes changes)
            (sync-file (:current-file-id state) file-id)
@@ -259,9 +261,9 @@
   (ptk/reify ::rename-typography
     ptk/WatchEvent
     (watch [it state _]
-      (let [data    (get state :workspace-data)
+      (let [data        (get state :workspace-data)
             [path name] (cph/parse-path-name new-name)
-            object  (get-in data [:typographies id])
+            object      (get-in data [:typographies id])
             new-object  (assoc object :path path :name name)]
         (do-update-tipography it state new-object file-id)))))
 

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -1562,7 +1562,6 @@
          (fn [event]
            (on-drop-asset-group event dragging? prefix selected-typographies-paths selected-typographies-full move-typography)))]
 
-
     [:div {:on-drag-enter on-drag-enter
            :on-drag-leave on-drag-leave
            :on-drag-over on-drag-over
@@ -1588,6 +1587,7 @@
              [:div.drop-space])
            (for [typography typographies]
              [:& typography-item {:typography typography
+                                  :key (dm/str (:id typography))
                                   :file file
                                   :local? local?
                                   :handle-change handle-change
@@ -1605,6 +1605,7 @@
           (when-not (empty? path-item)
             [:& typographies-group {:file-id file-id
                                     :prefix (cph/merge-path-item prefix path-item)
+                                    :key (dm/str path-item)
                                     :groups content
                                     :open-groups open-groups
                                     :file file

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -468,27 +468,21 @@
          (fn [event]
            (let [name (dom/get-target-val event)]
              (when-not (str/blank? name)
-               (on-change {:name name })))))]
+               (on-change {:name name})))))]
 
-    (mf/use-effect
+    (mf/with-effect [editing?]
-     (mf/deps editing?)
+      (when editing?
-     (fn []
+        (reset! open? editing?)))
-       (when editing?
-         (reset! open? editing?))))
 
-    (mf/use-effect
+    (mf/with-effect [focus-name?]
-     (mf/deps focus-name?)
+      (when focus-name?
-     (fn []
+        (tm/schedule
-       (when focus-name?
+         #(when-let [node (mf/ref-val name-input-ref)]
-         (tm/schedule
+            (dom/focus! node)
-          #(when-let [node (mf/ref-val name-input-ref)]
+            (dom/select-text! node)))))
-             (dom/focus! node)
-             (dom/select-text! node))))))
 
-    (mf/use-effect
+    (mf/with-effect [on-change]
-     (mf/deps on-change)
+      (mf/set-ref-val! on-change-ref {:on-change on-change}))
-     (fn []
-       (mf/set-ref-val! on-change-ref {:on-change on-change})))
 
     [:*
      [:div.element-set-options-group.typography-entry