Merge pull request #5520 from penpot/azazeln28-fix-text-editor-issue-9285

Fix Copy/Paste text into the text block

CHANGES.md

@@ -31,6 +31,8 @@
 ### :bug: Bugs fixed
 
 - 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
 

backend/src/app/rpc/commands/auth.clj

@@ -273,7 +273,8 @@
                       (merge {:viewed-tutorial? false
                               :viewed-walkthrough? false
                               :nudge {:big 10 :small 1}
-                              :v2-info-shown true})
+                              :v2-info-shown true
+                              :release-notes-viewed (:main cf/version)})
                       (db/tjson))
 
         password  (or (:password params) "!")

backend/src/app/rpc/commands/files_thumbnails.clj

@@ -402,7 +402,10 @@
 
   [cfg {:keys [::rpc/profile-id file-id] :as params}]
   (db/tx-run! cfg (fn [{:keys [::db/conn] :as cfg}]
-                    (files/check-edition-permissions! conn profile-id file-id)
+                    ;; TODO For now we check read permissions instead of write,
+                    ;; to allow viewer users to update thumbnails. We might
+                    ;; review this approach on the future.
+                    (files/check-read-permissions! conn profile-id file-id)
                     (when-not (db/read-only? conn)
                       (let [media (create-file-thumbnail! cfg params)]
                         {:uri (files/resolve-public-uri (:id media))

backend/src/app/rpc/commands/verify_token.clj

@@ -166,23 +166,26 @@
         ;; invited team.
         (let [props {:team-id (:team-id claims)
                      :role (:role claims)
-                     :invitation-id (:id invitation)}
+                     :invitation-id (:id invitation)}]
 
-              accept-invitation-event
-              (-> (audit/event-from-rpc-params params)
-                  (assoc ::audit/name "accept-team-invitation")
-                  (assoc ::audit/props props))
+          (audit/submit!
+           cfg
+           (-> (audit/event-from-rpc-params params)
+               (assoc ::audit/name "accept-team-invitation")
+               (assoc ::audit/props props)))
 
-              accept-invitation-from-event
-              (-> (audit/event-from-rpc-params params)
-                  (assoc ::audit/profile-id (:created-by invitation))
-                  (assoc ::audit/name "accept-team-invitation-from")
-                  (assoc ::audit/props (assoc props
-                                              :profile-id (:id profile)
-                                              :email (:email profile))))]
-
-          (audit/submit! cfg accept-invitation-event)
-          (audit/submit! cfg accept-invitation-from-event)
+          ;; NOTE: Backward compatibility; old invitations can
+          ;; have the `created-by` to be nil; so in this case we
+          ;; don't submit this event to the audit-log
+          (when-let [created-by (:created-by invitation)]
+            (audit/submit!
+             cfg
+             (-> (audit/event-from-rpc-params params)
+                 (assoc ::audit/profile-id created-by)
+                 (assoc ::audit/name "accept-team-invitation-from")
+                 (assoc ::audit/props (assoc props
+                                             :profile-id (:id profile)
+                                             :email (:email profile))))))
 
           (accept-invitation cfg claims invitation profile)
           (assoc claims :state :created))

common/src/app/common/logic/shapes.cljc

@@ -304,7 +304,9 @@
                 (->> ids
                      (mapcat #(ctn/get-child-heads objects %))
                      (map :id)))
-        cell (or cell (ctl/get-cell-by-index parent to-index))]
+
+        index-cell-data  (when to-index (ctl/get-cell-by-index parent to-index))
+        cell (or cell (and index-cell-data [(:row index-cell-data) (:column index-cell-data)]))]
 
     (-> changes
         (pcb/with-page-id page-id)

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

@@ -1479,7 +1479,7 @@
 (defn get-cell-by-index
   [parent to-index]
   (let [cells (get-cells parent {:sort? true :remove-empty? true})
-        to-index (- (count cells) to-index)]
+        to-index (- (count cells) to-index 1)]
     (nth cells to-index nil)))
 
 (defn add-children-to-index

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.
+
+

docs/user-guide/workspace-basics/index.njk

@@ -250,11 +250,6 @@ geometric structure. In Penpot there are three types of guides:
 <h4>Navigate actions</h4>
 <p>To navigate through the actions press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
 <p>You can also press any item of the actions list to get to this specific state.</p>
-<figure>
-  <video title="Navigate history" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/history-navigate.webp" height="auto">
-    <source src="/img/workspace-basics/history-navigate.mp4" type="video/mp4">
-  </video>
-</figure>
 
 <h2 id="comments">Comments</h2>
 <p>Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>

frontend/externs/worker.txt

@@ -0,0 +1 @@
+main.txt

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.cljs

@@ -67,6 +67,7 @@
 
         show-release-modal?
         (and (contains? cf/flags :onboarding)
+             (not (contains? cf/flags :hide-release-modal))
              (:onboarding-viewed props)
              (not= (:release-notes-viewed props) (:main cf/version))
              (not= "0.0" (:main cf/version)))]

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

@@ -89,6 +89,9 @@
         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))
+
         toggle-ordering
         (mf/use-fn
          (mf/deps ordering)
@@ -157,8 +160,7 @@
     [:article  {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
-        (if (and (cf/external-feature-flag "templates-02" "test")
-                 (zero? num-libs))
+        (if show-templates-02-test?
           [:button {:class (stl/css :add-library-button)
                     :on-click show-libraries-dialog
                     :data-testid "libraries"}
@@ -170,31 +172,32 @@
             i/library]
            (tr "workspace.assets.libraries")]))
 
-      [: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")}]]]
+      (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")}]])]
 
      [:& (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/parser.cljs

@@ -340,76 +340,6 @@
   (when (some? guides)
     (into [] (map parse-frame-guide) guides)))
 
-;;interface PathCommand {
-;;  command:
-;;    | 'M' | 'move-to'
-;;    | 'Z' | 'close-path'
-;;    | 'L' | 'line-to'
-;;    | 'H' | 'line-to-horizontal'
-;;    | 'V' | 'line-to-vertical'
-;;    | 'C' | 'curve-to'
-;;    | 'S' | 'smooth-curve-to'
-;;    | 'Q' | 'quadratic-bezier-curve-to'
-;;    | 'T' | 'smooth-quadratic-bezier-curve-to'
-;;    | 'A' | 'elliptical-arc';
-;;
-;;  params?: {
-;;    x?: number;
-;;    y?: number;
-;;    c1x: number;
-;;    c1y: number;
-;;    c2x: number;
-;;    c2y: number;
-;;    rx?: number;
-;;    ry?: number;
-;;    xAxisRotation?: number;
-;;    largeArcFlag?: boolean;
-;;    sweepFlag?: boolean;
-;;  };
-;;}
-(defn parse-command-type
-  [^string command-type]
-  (case command-type
-    "M" :move-to
-    "Z" :close-path
-    "L" :line-to
-    "H" :line-to-horizontal
-    "V" :line-to-vertical
-    "C" :curve-to
-    "S" :smooth-curve-to
-    "Q" :quadratic-bezier-curve-to
-    "T" :smooth-quadratic-bezier-curve-to
-    "A" :elliptical-arc
-    (parse-keyword command-type)))
-
-(defn parse-command-params
-  [^js params]
-  (when (some? params)
-    (d/without-nils
-     {:x (obj/get params "x")
-      :y (obj/get params "y")
-      :c1x (obj/get params "c1x")
-      :c1y (obj/get params "c1y")
-      :c2x (obj/get params "c2x")
-      :c2y (obj/get params "c2y")
-      :rx (obj/get params "rx")
-      :ry (obj/get params "ry")
-      :x-axis-rotation (obj/get params "xAxisRotation")
-      :large-arc-flag (obj/get params "largeArcFlag")
-      :sweep-flag (obj/get params "sweepFlag")})))
-
-(defn parse-command
-  [^js command]
-  (when (some? command)
-    (d/without-nils
-     {:command (-> (obj/get command "command") parse-command-type)
-      :params (-> (obj/get command "params") parse-command-params)})))
-
-(defn parse-path-content
-  [^js content]
-  (when (some? content)
-    (into [] (map parse-command) content)))
-
 ;; export interface Dissolve {
 ;;   type: 'dissolve';
 ;;   duration: number;

frontend/src/app/plugins/shape.cljs

@@ -15,7 +15,7 @@
    [app.common.record :as crc]
    [app.common.schema :as sm]
    [app.common.spec :as us]
-   [app.common.svg.path.legacy-parser2 :as spp]
+   [app.common.svg.path :as path]
    [app.common.text :as txt]
    [app.common.types.component :as ctk]
    [app.common.types.container :as ctn]
@@ -1326,12 +1326,10 @@
          (cond-> (or (cfh/path-shape? data) (cfh/bool-shape? data))
            (crc/add-properties!
             {:name "content"
-             :get #(-> % u/proxy->shape :content format/format-path-content)
+             :get #(-> % u/proxy->shape :content upf/format-path)
              :set
              (fn [_ value]
-               (let [content
-                     (->> (parser/parse-path-content value)
-                          (spp/simplify-commands))]
+               (let [content (->> (path/parse value))]
                  (cond
                    (not (cfh/path-shape? data))
                    (u/display-not-valid :content-type type)

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 {