✨ Moved text styles to css when generating code

common/src/app/common/text.cljc

@@ -286,3 +286,19 @@
 
     (-> (rec-style-text-map [] node {})
         reverse)))
+
+(defn index-content
+  "Adds a property `$id` that identifies the current node inside"
+  ([content]
+   (index-content content nil 0))
+  ([node path index]
+   (let [cur-path (if path (dm/str path "-") (dm/str ""))
+         cur-path (dm/str cur-path (d/name (:type node :text)) "-" index)]
+     (-> node
+         (assoc :$id cur-path)
+         (update :children
+                 (fn [children]
+                   (->> children
+                        (d/enumerate)
+                        (mapv (fn [[idx node]]
+                                (index-content node cur-path idx))))))))))

frontend/src/app/main/ui/shapes/text/html_text.cljs

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.text :as txt]
    [app.main.ui.shapes.text.styles :as sts]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -18,11 +19,14 @@
   (let [node   (obj/get props "node")
         parent (obj/get props "parent")
         shape  (obj/get props "shape")
+        code?  (obj/get props "code?")
         text   (:text node)
-        style  (if (= text "")
+        style  (when-not code?
-                 (sts/generate-text-styles shape parent)
+                 (if (= text "")
-                 (sts/generate-text-styles shape node))]
+                   (sts/generate-text-styles shape parent)
-    [:span.text-node {:style style}
+                   (sts/generate-text-styles shape node)))
+        class  (when code? (:$id node))]
+    [:span.text-node {:style style :class class}
      (if (= text "") "\u00A0" text)]))
 
 (mf/defc render-root
@@ -31,19 +35,25 @@
   (let [node     (obj/get props "node")
         children (obj/get props "children")
         shape    (obj/get props "shape")
-        style    (sts/generate-root-styles shape node)]
+        code?    (obj/get props "code?")
+        style    (when-not code? (sts/generate-root-styles shape node))
+        class  (when code? (:$id node))]
     [:div.root.rich-text
      {:style style
+      :class class
       :xmlns "http://www.w3.org/1999/xhtml"}
      children]))
 
 (mf/defc render-paragraph-set
   {::mf/wrap-props false}
   [props]
-  (let [children (obj/get props "children")
+  (let [node     (obj/get props "node")
+        children (obj/get props "children")
         shape    (obj/get props "shape")
-        style    (sts/generate-paragraph-set-styles shape)]
+        code?    (obj/get props "code?")
-    [:div.paragraph-set {:style style} children]))
+        style    (when-not code? (sts/generate-paragraph-set-styles shape))
+        class    (when code? (:$id node))]
+    [:div.paragraph-set {:style style :class class} children]))
 
 (mf/defc render-paragraph
   {::mf/wrap-props false}
@@ -51,9 +61,11 @@
   (let [node     (obj/get props "node")
         shape    (obj/get props "shape")
         children (obj/get props "children")
-        style    (sts/generate-paragraph-styles shape node)
+        code?    (obj/get props "code?")
+        style    (when-not code? (sts/generate-paragraph-styles shape node))
+        class    (when code? (:$id node))
         dir      (:text-direction node "auto")]
-    [:p.paragraph {:style style :dir dir} children]))
+    [:p.paragraph {:style style :dir dir :class class} children]))
 
 ;; -- Text nodes
 (mf/defc render-node
@@ -88,6 +100,8 @@
         code?     (obj/get props "code?")
         {:keys [id x y width height content]} shape
 
+        content (if code? (txt/index-content content) content)
+
         style
         (when-not code?
           #js {:position "fixed"
@@ -107,7 +121,7 @@
      ;; `background-clip`
      (when (not code?)
        [:style ".text-node { background-clip: text;
-                           -webkit-background-clip: text; }" ])
+                             -webkit-background-clip: text; }" ])
      [:& render-node {:index 0
                       :shape shape
                       :node content

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.text.styles
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.text :as txt]
    [app.common.transit :as transit]
    [app.main.fonts :as fonts]
@@ -17,8 +18,8 @@
 (defn generate-root-styles
   [{:keys [width height]} node]
   (let [valign (:vertical-align node "top")
-        base   #js {:height height
+        base   #js {:height (dm/str height "px")
-                    :width  width
+                    :width  (dm/str width "px")
                     :fontFamily "sourcesanspro"
                     :display "flex"
                     :whiteSpace "break-spaces"}]

frontend/src/app/util/code_gen/style_css.cljs

@@ -8,6 +8,9 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.pages.helpers :as cph]
+   [app.common.text :as txt]
+   [app.main.ui.shapes.text.styles :as sts]
    [app.util.code-gen.common :as cgc]
    [app.util.code-gen.style-css-formats :refer [format-value]]
    [app.util.code-gen.style-css-values :refer [get-value]]
@@ -43,6 +46,9 @@ svg {
   box-sizing: border-box;
 }
 
+.text-node { background-clip: text;
+             -webkit-background-clip: text; }
+
 ")
 
 (def shape-css-properties
@@ -116,8 +122,6 @@ svg {
                (when-let [value (get-value property shape objects)]
                  [property value])))))
 
-
-
 (defn format-css-value
   ([[property value] options]
    (format-css-value property value options))
@@ -139,7 +143,6 @@ svg {
        (map #(dm/str "  " (format-css-property % options)))
        (str/join "\n")))
 
-
 (defn get-shape-properties-css
   ([objects shape properties]
    (get-shape-properties-css objects shape properties nil))
@@ -149,6 +152,44 @@ svg {
        (shape->css-properties objects properties)
        (format-css-properties options))))
 
+(defn format-js-styles
+  [properties _options]
+  (format-css-properties
+   (->> (.keys js/Object properties)
+        (remove #(str/starts-with? % "--"))
+        (mapv (fn [key]
+                [(str/kebab key) (unchecked-get properties key)])))
+   nil))
+
+(defn node->css
+  [shape shape-selector node]
+  (let [properties
+        (case (:type node)
+          (:root "root")
+          (sts/generate-root-styles shape node)
+
+          (:paragraph-set "paragraph-set")
+          (sts/generate-paragraph-set-styles shape)
+
+          (:paragraph "paragraph")
+          (sts/generate-paragraph-styles shape node)
+
+          (sts/generate-text-styles shape node))]
+    (dm/fmt
+     ".% {\n%\n}"
+     (dm/str shape-selector " ." (:$id node))
+     (format-js-styles properties nil))))
+
+(defn generate-text-css
+  [shape]
+  (let [selector (cgc/shape->selector shape)]
+    (->> shape
+         :content
+         (txt/index-content)
+         (txt/node-seq)
+         (map #(node->css shape selector %))
+         (str/join "\n"))))
+
 (defn get-shape-css-selector
   ([objects shape]
    (get-shape-css-selector shape objects nil))
@@ -159,7 +200,8 @@ svg {
                         (format-css-properties options))
          selector (cgc/shape->selector shape)]
      (str/join "\n" [(str/fmt "/* %s */" (:name shape))
-                     (str/fmt ".%s {\n%s\n}" selector properties)]))))
+                     (str/fmt ".%s {\n%s\n}" selector properties)
+                     (when (cph/text-shape? shape) (generate-text-css shape))]))))
 
 (defn get-css-property
   ([objects shape property]
@@ -187,8 +229,3 @@ svg {
     (->> shapes
          (map #(get-shape-css-selector % objects options))
          (str/join "\n\n")))))
-
-
-#_(defn extract-text-css
-  [node]
-  (cg/parse-style-text-blocks (:content shape) (keys txt/default-text-attrs)))