Merge pull request #5537 from penpot/azazeln28-fix-text-editor-issue-9716

🐛 Fix text editor issue 9716

CHANGES.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.4.1
+
+### :bug: Bugs fixed
+
+- Fix error when importing files with touched components [Taiga #9625](https://tree.taiga.io/project/penpot/issue/9625)
+
 ## 2.4.0
 
 ### :rocket: Epics and highlights

common/src/app/common/files/defaults.cljc

@@ -6,4 +6,4 @@
 
 (ns app.common.files.defaults)
 
-(def version 57)
+(def version 59)

common/src/app/common/files/migrations.cljc

@@ -1130,6 +1130,21 @@
         (update :pages-index dissoc nil)
         (update :pages-index update-vals update-page))))
 
+(defn migrate-up-59
+  [data]
+  (letfn [(fix-touched [elem]
+            (cond-> elem (string? elem) keyword))
+
+          (update-shape [shape]
+            (d/update-when shape :touched #(into #{} (map fix-touched) %)))
+
+          (update-container [container]
+            (d/update-when container :objects update-vals update-shape))]
+
+    (-> data
+        (update :pages-index update-vals update-container)
+        (update :components update-vals update-container))))
+
 (def migrations
   "A vector of all applicable migrations"
   [{:id 2 :migrate-up migrate-up-2}
@@ -1178,5 +1193,6 @@
    {:id 54 :migrate-up migrate-up-54}
    {:id 55 :migrate-up migrate-up-55}
    {:id 56 :migrate-up migrate-up-56}
-   {:id 57 :migrate-up migrate-up-57}])
+   {:id 57 :migrate-up migrate-up-57}
+   {:id 59 :migrate-up migrate-up-59}])
 

common/src/app/common/types/shape.cljc

@@ -191,7 +191,8 @@
    [:grow-type {:optional true}
     [::sm/one-of grow-types]]
    [:applied-tokens {:optional true} ::cto/applied-tokens]
-   [:plugin-data {:optional true} ::ctpg/plugin-data]])
+   [:plugin-data {:optional true} ::ctpg/plugin-data]
+   [:touched {:optional true} [:maybe [:set :keyword]]]])
 
 (def schema:group-attrs
   [:map {:title "GroupAttrs"}

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

@@ -89,8 +89,11 @@
         reverse-sort?  (= :desc ordering)
         num-libs       (count (mf/deref refs/workspace-libraries))
 
-        show-templates-02-test?
-        (and (cf/external-feature-flag "templates-02" "test") (zero? num-libs))
+        show-templates-04-test1?
+        (and (cf/external-feature-flag "templates-04" "test1") (zero? num-libs))
+
+        show-templates-04-test2?
+        (and (cf/external-feature-flag "templates-04" "test2") (zero? num-libs))
 
         toggle-ordering
         (mf/use-fn
@@ -160,11 +163,18 @@
     [:article  {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
-        (if show-templates-02-test?
+        (cond
+          show-templates-04-test1?
+          [:button {:class (stl/css :libraries-button)
+                    :on-click show-libraries-dialog
+                    :data-testid "libraries"}
+           (tr "workspace.assets.add-library")]
+          show-templates-04-test2?
           [:button {:class (stl/css :add-library-button)
                     :on-click show-libraries-dialog
                     :data-testid "libraries"}
            (tr "workspace.assets.add-library")]
+          :else
           [:button {:class (stl/css :libraries-button)
                     :on-click show-libraries-dialog
                     :data-testid "libraries"}
@@ -172,32 +182,32 @@
             i/library]
            (tr "workspace.assets.libraries")]))
 
-      (when-not show-templates-02-test?
-        [:div {:class (stl/css :search-wrapper)}
-         [:& search-bar {:on-change on-search-term-change
-                         :value term
-                         :placeholder (tr "workspace.assets.search")}
-          [:button
-           {:on-click on-open-menu
-            :title (tr "workspace.assets.filter")
-            :class (stl/css-case :section-button true
-                                 :opened menu-open?)}
-           i/filter-icon]]
-         [:> context-menu*
-          {:on-close on-menu-close
-           :selectable true
-           :selected section
-           :show menu-open?
-           :fixed true
-           :min-width true
-           :width size
-           :top 158
-           :left 18
-           :options options}]
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "workspace.assets.sort")
-                           :on-click toggle-ordering
-                           :icon (if reverse-sort? "asc-sort" "desc-sort")}]])]
+
+      [:div {:class (stl/css :search-wrapper)}
+       [:& search-bar {:on-change on-search-term-change
+                       :value term
+                       :placeholder (tr "workspace.assets.search")}
+        [:button
+         {:on-click on-open-menu
+          :title (tr "workspace.assets.filter")
+          :class (stl/css-case :section-button true
+                               :opened menu-open?)}
+         i/filter-icon]]
+       [:> context-menu*
+        {:on-close on-menu-close
+         :selectable true
+         :selected section
+         :show menu-open?
+         :fixed true
+         :min-width true
+         :width size
+         :top 158
+         :left 18
+         :options options}]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "workspace.assets.sort")
+                         :on-click toggle-ordering
+                         :icon (if reverse-sort? "asc-sort" "desc-sort")}]]]
 
      [:& (mf/provider cmm/assets-filters) {:value filters}
       [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}

frontend/text-editor/src/editor/controllers/SelectionController.js

@@ -30,6 +30,7 @@ import {
   splitParagraph,
   mergeParagraphs,
   fixParagraph,
+  createParagraph,
 } from "../content/dom/Paragraph.js";
 import {
   removeBackward,
@@ -42,7 +43,7 @@ import { getTextNodeLength, getClosestTextNode, isTextNode } from "../content/do
 import TextNodeIterator from "../content/dom/TextNodeIterator.js";
 import TextEditor from "../TextEditor.js";
 import CommandMutations from "../commands/CommandMutations.js";
-import { setRootStyles } from "../content/dom/Root.js";
+import { isRoot, setRootStyles } from "../content/dom/Root.js";
 import { SelectionDirection } from "./SelectionDirection.js";
 import SafeGuard from "./SafeGuard.js";
 
@@ -946,6 +947,15 @@ export class SelectionController extends EventTarget {
     );
   }
 
+  /**
+   * Is true if the current focus node is a root.
+   *
+   * @type {boolean}
+   */
+  get isRootFocus() {
+    return isRoot(this.focusNode)
+  }
+
   /**
    * Indicates that we have multiple nodes selected.
    *
@@ -1201,6 +1211,16 @@ export class SelectionController extends EventTarget {
       );
     } else if (this.isLineBreakFocus) {
       this.focusNode.replaceWith(new Text(newText));
+    } else if (this.isRootFocus) {
+      const newTextNode = new Text(newText);
+      const newInline = createInline(newTextNode, this.#currentStyle);
+      const newParagraph = createParagraph([
+        newInline
+      ], this.#currentStyle)
+      this.focusNode.replaceChildren(
+        newParagraph
+      );
+      return this.collapse(newTextNode, newText.length + 1);
     } else {
       throw new Error('Unknown node type');
     }