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]
-  [(if (= "" (:text inline))
+  [inline paragraph]
+  [(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))))