Merge pull request #7674 from penpot/elenatorro-12478-fix-new-lines

🐛 Fix new lines issues

frontend/playwright/ui/render-wasm-specs/texts.spec.js

@@ -367,6 +367,26 @@ test("Renders a file with texts with tabs", async ({
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
+test("Renders a file with texts with empty lines", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-empty-lines.json");
+
+  await workspace.goToWorkspace({
+    id: "58c5cc60-d124-81bd-8007-0ecbaf9da983",
+    pageId: "15222a7a-d3bc-80f1-8007-0d8e166e650f",
+  });
+
+  await workspace.waitForFirstRender({ hideUI: false });
+  await workspace.clickLeafLayer("text-with-empty-lines-2");
+  await workspace.hideUI();
+  await workspace.page.keyboard.press("Enter");
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
 test.skip("Updates text alignment edition - part 1", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss

@@ -35,15 +35,10 @@
   }
 
   [data-itype="inline"] {
-    display: inline-block;
+    display: inline;
     line-break: auto;
     line-height: inherit;
     caret-color: var(--text-editor-caret-color);
-
-    // firefox-only
-    white-space: preserve-spaces;
-
-    // others
     white-space-collapse: pre;
     tab-size: 2;
     -o-tab-size: 2;

frontend/src/app/util/text/content/to_dom.cljs

@@ -99,8 +99,9 @@
     (dissoc styles :line-height)))
 
 (defn get-inline-children
-  [inline]
+  [inline paragraph]
-  [(if (= "" (:text inline))
+  [(if (and (= "" (:text inline))
+            (= 1 (count (:children paragraph))))
      (dom/create-element "br")
      (dom/create-text (:text inline)))])
 
@@ -108,6 +109,17 @@
   []
   (.toString (.floor js/Math (* (.random js/Math) (.-MAX_SAFE_INTEGER js/Number))) 36))
 
+(defn has-content?
+  [paragraph]
+  (some #(not= "" (:text % "")) (:children paragraph)))
+
+(defn should-filter-empty-paragraph?
+  [paragraphs index]
+  (and (not (has-content? (nth paragraphs index)))
+       (< index (count paragraphs))
+       (some has-content? (drop (inc index) paragraphs))
+       (every? #(not (has-content? %)) (take (inc index) paragraphs))))
+
 (defn create-inline
   [inline paragraph]
   (create-element
@@ -115,7 +127,7 @@
    {:id (or (:key inline) (create-random-key))
     :data {:itype "inline"}
     :style (get-inline-styles inline paragraph)}
-   (get-inline-children inline)))
+   (get-inline-children inline paragraph)))
 
 (defn create-paragraph
   [paragraph]
@@ -128,10 +140,15 @@
 
 (defn create-root
   [root]
-  (let [root-styles (get-root-styles root)]
+  (let [root-styles (get-root-styles root)
+        paragraphs (get-in root [:children 0 :children])
+        filtered-paragraphs (->> paragraphs
+                                 (map-indexed vector)
+                                 (remove (fn [[index _]] (should-filter-empty-paragraph? paragraphs index)))
+                                 (mapv second))]
     (create-element
      "div"
      {:id (or (:key root) (create-random-key))
       :data {:itype "root"}
       :style root-styles}
-     (mapv create-paragraph (get-in root [:children 0 :children])))))
+     (mapv create-paragraph filtered-paragraphs))))

render-wasm/src/render/text.rs

@@ -205,10 +205,9 @@ fn draw_text(
     paragraph_builder_groups: &mut [Vec<ParagraphBuilder>],
 ) {
     let text_content = shape.get_text_content();
-    // FIXME: this does not always return the height we need
+    let selrect_width = shape.selrect().width();
-    // let text_height = text_content.size.height;
+    let text_width = text_content.get_width(selrect_width);
-    let text_width = text_content.get_width();
+    let text_height = text_content.get_height(selrect_width);
-    let text_height = text_content.get_height(text_width);
     let selrect_height = shape.selrect().height();
     let mut global_offset_y = match shape.vertical_align() {
         VerticalAlign::Center => (selrect_height - text_height) / 2.0,

render-wasm/src/shapes.rs

@@ -330,7 +330,7 @@ impl Shape {
         self.selrect.set_ltrb(left, top, right, bottom);
         if let Type::Text(ref mut text) = self.shape_type {
             text.update_layout(self.selrect);
-            text.set_xywh(left, top, right - left, bottom - top);
+            text.set_xywh(left, top, self.selrect.width(), self.selrect.height());
         }
     }
 

render-wasm/src/shapes/text.rs

@@ -403,13 +403,14 @@ impl TextContent {
         let mut paragraph_builders = self.paragraph_builder_group_from_text(None);
         let paragraphs =
             self.build_paragraphs_from_paragraph_builders(&mut paragraph_builders, f32::MAX);
+
         let (width, height) =
             paragraphs
                 .iter()
                 .flatten()
                 .fold((0.0, 0.0), |(auto_width, auto_height), paragraph| {
                     (
-                        f32::max(paragraph.max_intrinsic_width(), auto_width),
+                        f32::max(paragraph.longest_line(), auto_width),
                         auto_height + paragraph.height(),
                     )
                 });
@@ -452,11 +453,11 @@ impl TextContent {
         TextContentLayoutResult(paragraph_builders, paragraphs, size)
     }
 
-    pub fn get_width(&self) -> f32 {
+    pub fn get_width(&self, width: f32) -> f32 {
         if self.grow_type() == GrowType::AutoWidth {
             self.size.width
         } else {
-            self.bounds.width()
+            width
         }
     }
 
@@ -599,7 +600,6 @@ impl Paragraph {
         self.line_height
     }
 
-    // FIXME: move serialization to wasm module
     pub fn paragraph_to_style(&self) -> ParagraphStyle {
         let mut style = ParagraphStyle::default();
 
@@ -711,7 +711,7 @@ impl TextSpan {
         style.set_font_families(&font_families);
         style.set_font_size(self.font_size);
         style.set_letter_spacing(self.letter_spacing);
-        style.set_half_leading(true);
+        style.set_half_leading(false);
 
         style
     }
@@ -753,12 +753,18 @@ impl TextSpan {
         format!("{}", self.font_family)
     }
 
+    fn remove_ignored_chars(text: &str) -> String {
+        text.chars()
+            .filter(|&c| c >= '\u{0020}' && c != '\u{2028}' && c != '\u{2029}')
+            .collect()
+    }
+
     pub fn apply_text_transform(&self) -> String {
+        let text = Self::remove_ignored_chars(&self.text);
         match self.text_transform {
-            Some(TextTransform::Uppercase) => self.text.to_uppercase(),
+            Some(TextTransform::Uppercase) => text.to_uppercase(),
-            Some(TextTransform::Lowercase) => self.text.to_lowercase(),
+            Some(TextTransform::Lowercase) => text.to_lowercase(),
-            Some(TextTransform::Capitalize) => self
+            Some(TextTransform::Capitalize) => text
-                .text
                 .split_whitespace()
                 .map(|word| {
                     let mut chars = word.chars();
@@ -769,7 +775,7 @@ impl TextSpan {
                 })
                 .collect::<Vec<_>>()
                 .join(" "),
-            None => self.text.clone(),
+            None => text,
         }
     }