🔧 Fix tab rendering with the text editor

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

@@ -347,6 +347,26 @@ test("Renders a file with texts with with text spans of different sizes", async
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
+test("Renders a file with texts with tabs", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-text-tabs.json");
+
+  await workspace.goToWorkspace({
+    id: "55ed444c-1179-8175-8007-09da51f502e7",
+    pageId: "55ed444c-1179-8175-8007-09da51f502e8",
+  });
+
+  await workspace.waitForFirstRender({ hideUI: false });
+  await workspace.clickLeafLayer("shape-list");
+  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/playwright/ui/specs/render-wasm.spec.js

@@ -3,6 +3,7 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
 });
 
 test("BUG 10867 - Crash when loading comments", async ({ page }) => {

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

@@ -35,9 +35,18 @@
   }
 
   [data-itype="inline"] {
+    display: inline-block;
     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;
   }
 
   [data-itype="root"] {

frontend/src/app/render_wasm/api/texts.cljs

@@ -55,7 +55,7 @@
         text-direction  (sr/translate-text-direction (get paragraph :text-direction))
         text-decoration (sr/translate-text-decoration (get paragraph :text-decoration))
         text-transform  (sr/translate-text-transform (get paragraph :text-transform))
-        line-height     (get paragraph :line-height)
+        line-height     (get paragraph :line-height 1.2)
         letter-spacing  (get paragraph :letter-spacing)]
 
     (-> offset
@@ -73,7 +73,7 @@
   [offset dview spans paragraph]
   (let [paragraph-font-size (get paragraph :font-size)
         paragraph-font-weight (-> paragraph :font-weight f/serialize-font-weight)
-        paragraph-line-height (get paragraph :line-height)]
+        paragraph-line-height (get paragraph :line-height 1.2)]
     (reduce (fn [offset span]
               (let [font-style  (sr/translate-font-style (get span :font-style "normal"))
                     font-size   (get span :font-size paragraph-font-size)

render-wasm/src/shapes/text.rs

@@ -603,8 +603,10 @@ impl Paragraph {
     pub fn paragraph_to_style(&self) -> ParagraphStyle {
         let mut style = ParagraphStyle::default();
 
+        style.set_height(self.line_height);
         style.set_text_align(self.text_align);
         style.set_text_direction(self.text_direction);
+        style.set_replace_tab_characters(true);
         style.set_text_height_behavior(skia::textlayout::TextHeightBehavior::All);
         style
     }