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
@@ -32,6 +38,7 @@
 
 - Fix problem with some texts desynchronization [Taiga #9379](https://tree.taiga.io/project/penpot/issue/9379)
 - Fix problem with reoder grid layers [#5446](https://github.com/penpot/penpot/issues/5446)
+- Fix problem with swap component style [#9542](https://tree.taiga.io/project/penpot/issue/9542)
 
 ## 2.3.3
 

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"}

docker/devenv/files/nginx.conf

@@ -90,6 +90,7 @@ http {
             proxy_hide_header x-amz-meta-server-side-encryption;
             proxy_hide_header x-amz-server-side-encryption;
             proxy_pass $redirect_uri;
+            proxy_ssl_server_name on;
 
             add_header x-internal-redirect "$redirect_uri";
             add_header x-cache-control "$redirect_cache_control";

docker/images/files/nginx.conf

@@ -92,6 +92,7 @@ http {
             proxy_hide_header x-amz-request-id;
             proxy_hide_header x-amz-meta-server-side-encryption;
             proxy_hide_header x-amz-server-side-encryption;
+            proxy_ssl_server_name on;
             proxy_pass $redirect_uri;
 
             add_header x-internal-redirect "$redirect_uri";

docs/plugins/deployment.md

@@ -216,3 +216,9 @@ Success! - Published to example-plugin-penpot.surge.sh
 ```
 
 5. Done!
+
+## 3.5. Submitting to Penpot
+
+To make your finished plugin available in our catalog, submit in on the [plugin submission page](https://penpot.app/penpothub/plugins/create-plugin). Once it becomes available any Penpot user will be able to install and use it.
+
+

frontend/src/app/config.cljs

@@ -143,6 +143,11 @@
   (let [f (obj/get global "externalSessionId")]
     (when (fn? f) (f))))
 
+(defn external-context-info
+  []
+  (let [f (obj/get global "externalContextInfo")]
+    (when (fn? f) (f))))
+
 ;; --- Helper Functions
 
 (defn ^boolean check-browser? [candidate]

frontend/src/app/main/data/events.cljs

@@ -8,6 +8,7 @@
   (:require
    ["ua-parser-js" :as ua]
    [app.common.data :as d]
+   [app.common.json :as json]
    [app.common.logging :as l]
    [app.config :as cf]
    [app.main.repo :as rp]
@@ -93,6 +94,11 @@
              data
              data))
 
+(defn add-external-context-info
+  [context]
+  (let [external-context-info  (json/->clj (cf/external-context-info))]
+    (merge context external-context-info)))
+
 (defn- process-event-by-proto
   [event]
   (let [data    (d/deep-merge (-data event) (meta event))
@@ -102,6 +108,7 @@
                     (assoc :event-origin (::origin data))
                     (assoc :event-namespace (namespace type))
                     (assoc :event-symbol ev-name)
+                    (add-external-context-info)
                     (d/without-nils))
         props   (-> data d/without-qualified simplify-props)]
 
@@ -119,6 +126,7 @@
       (let [type    (::type data "action")
             context (-> (::context data)
                         (assoc :event-origin (::origin data))
+                        (add-external-context-info)
                         (d/without-nils))
             props   (-> data d/without-qualified simplify-props)]
         {:type    type

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

@@ -52,6 +52,11 @@
 (defonce queue
   (q/create find-request (/ 1000 30)))
 
+(defn clear-queue!
+  []
+  (l/dbg :hint "clearing thumbnail queue")
+  (q/clear! queue))
+
 ;; This function first renders the HTML calling `render/render-frame` that
 ;; returns HTML as a string, then we send that data to the iframe rasterizer
 ;; that returns the image as a Blob. Finally we create a URI for that blob.

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

@@ -11,6 +11,7 @@
    [app.main.data.events :as ev]
    [app.main.data.persistence :as dwp]
    [app.main.data.workspace :as dw]
+   [app.main.data.workspace.thumbnails :as th]
    [app.main.refs :as refs]
    [app.main.repo :as rp]
    [app.util.time :as dt]
@@ -132,6 +133,7 @@
             (rx/filter #(or (nil? %) (= :saved %)))
             (rx/take 1)
             (rx/mapcat #(rp/cmd! :restore-file-snapshot {:file-id file-id :id id}))
+            (rx/tap #(th/clear-queue!))
             (rx/map #(dw/initialize-file project-id file-id)))
        (case origin
          :version

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/src/app/main/ui/workspace/sidebar/options/menus/component.scss

@@ -402,6 +402,7 @@
 
 .component-swap {
   padding-top: $s-12;
+  max-width: $s-248;
 }
 
 .component-swap-content {

frontend/src/app/plugins/user.cljs

@@ -18,26 +18,24 @@
 
 (defn- add-session-properties
   [user-proxy session-id]
-  (let [plugin-id (obj/get user-proxy "$plugin")]
-    (crc/add-properties!
-     user-proxy
-     {:name "$plugin" :enumerable false :get (constantly plugin-id)}
-     {:name "$session" :enumerable false :get (constantly session-id)}
+  (crc/add-properties!
+   user-proxy
+   {:name "$session" :enumerable false :get (constantly session-id)}
 
-     {:name "id"
-      :get (fn [_] (-> (u/locate-profile session-id) :id str))}
+   {:name "id"
+    :get (fn [_] (-> (u/locate-profile session-id) :id str))}
 
-     {:name "name"
-      :get (fn [_] (-> (u/locate-profile session-id) :fullname))}
+   {:name "name"
+    :get (fn [_] (-> (u/locate-profile session-id) :fullname))}
 
-     {:name "avatarUrl"
-      :get (fn [_] (cfg/resolve-profile-photo-url (u/locate-profile session-id)))}
+   {:name "avatarUrl"
+    :get (fn [_] (cfg/resolve-profile-photo-url (u/locate-profile session-id)))}
 
-     {:name "color"
-      :get (fn [_] (-> (u/locate-presence session-id) :color))}
+   {:name "color"
+    :get (fn [_] (-> (u/locate-presence session-id) :color))}
 
-     {:name "sessionId"
-      :get (fn [_] (str session-id))})))
+   {:name "sessionId"
+    :get (fn [_] (str session-id))}))
 
 
 (defn current-user-proxy? [p]
@@ -46,7 +44,8 @@
 (defn current-user-proxy
   [plugin-id session-id]
   (-> (obj/reify {:name "CurrentUserProxy"}
-        :$plugin {:enumerable false :get (fn [] plugin-id)})
+        :$plugin
+        {:enumerable false :get (fn [] plugin-id)})
       (add-session-properties session-id)))
 
 (defn active-user-proxy? [p]
@@ -55,7 +54,8 @@
 (defn active-user-proxy
   [plugin-id session-id]
   (-> (obj/reify {:name "ActiveUserProxy"}
-        :$plugin {:enumerable false :get (fn [] plugin-id)}
+        :$plugin
+        {:enumerable false :get (fn [] plugin-id)}
 
         :position
         {:get (fn [] (-> (u/locate-presence session-id) :point format/format-point))}
@@ -66,19 +66,16 @@
 
 (defn- add-user-properties
   [user-proxy data]
-  (let [plugin-id (obj/get user-proxy "$plugin")]
-    (crc/add-properties!
-     user-proxy
-     {:name "$plugin" :enumerable false :get (constantly plugin-id)}
+  (crc/add-properties!
+   user-proxy
+   {:name "id"
+    :get (fn [_] (-> data :id str))}
 
-     {:name "id"
-      :get (fn [_] (-> data :id str))}
+   {:name "name"
+    :get (fn [_] (-> data :fullname))}
 
-     {:name "name"
-      :get (fn [_] (-> data :fullname))}
-
-     {:name "avatarUrl"
-      :get (fn [_] (cfg/resolve-profile-photo-url data))})))
+   {:name "avatarUrl"
+    :get (fn [_] (cfg/resolve-profile-photo-url data))}))
 
 (defn user-proxy
   [plugin-id data]

frontend/src/app/util/queue.cljs

@@ -9,6 +9,7 @@
   (:require
    [app.common.logging :as l]
    [app.common.math :as mth]
+   [app.util.object :as obj]
    [app.util.time :as t]
    [beicon.v2.core :as rx]))
 
@@ -47,13 +48,14 @@
 
 ;; NOTE: Right now there are no cases where we need to cancel a process
 ;;       but if we do, we can use this function
-;; (defn- cancel-process
-;;   [queue]
-;;   (l/dbg :hint "queue::cancel-process")
-;;   (let [timeout (unchecked-get queue "timeout")]
-;;     (when (some? timeout)
-;;       (js/clearTimeout timeout))
-;;     (unchecked-set queue "timeout" nil)))
+(defn- cancel-process!
+  [queue]
+  (l/dbg :hint "queue::cancel-process")
+  (let [timeout (unchecked-get queue "timeout")]
+    (when (some? timeout)
+      (js/clearTimeout timeout))
+    (unchecked-set queue "timeout" nil))
+  queue)
 
 (defn- process
   [queue iterations]
@@ -131,3 +133,10 @@
           (enqueue-last queue request))))
 
     (rx/to-observable result)))
+
+(defn clear!
+  [queue]
+  (-> queue
+      (cancel-process!)
+      (obj/set! "items" #js [])
+      (obj/set! "time" 0)))

frontend/text-editor/src/editor/content/dom/Style.js

@@ -139,7 +139,7 @@ export function normalizeStyles(node, styleDefaults = getStyleDefaultsDeclaratio
   // a --fills CSS variable property.
   const fills = styleDeclaration.getPropertyValue("--fills");
   const color = styleDeclaration.getPropertyValue("color");
-  if (color) {
+  if (color && !fills) {
     styleDeclaration.removeProperty("color");
     styleDeclaration.setProperty("--fills", getFills(color));
   } else {

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');
     }