diff --git a/frontend/playwright/data/render-wasm/get-file-text-tabs.json b/frontend/playwright/data/render-wasm/get-file-text-tabs.json new file mode 100644 index 0000000000..4de2da145a --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-text-tabs.json @@ -0,0 +1,133 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u6bd7c17d-4f59-815e-8006-5c1f6882469a", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "render-tabs", + "~:revn": 29, + "~:modified-at": "~m1761915941525", + "~:vern": 0, + "~:id": "~u55ed444c-1179-8175-8007-09da51f502e7", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0004-clean-shadow-color", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects" + ] + }, + "~:version": 67, + "~:project-id": "~u6bd7c17d-4f59-815e-8006-5c1f68846e43", + "~:created-at": "~m1761915495380", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u55ed444c-1179-8175-8007-09da51f502e8" + ], + "~:pages-index": { + "~u55ed444c-1179-8175-8007-09da51f502e8": { + "~:objects": { + "~#penpot/objects-map/v2": { + "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~udcfc3ac6-f952-80fb-8007-09daef8acfd3\"]]]", + "~udcfc3ac6-f952-80fb-8007-09daef8acfd3": "[\"~#shape\",[\"^ \",\"~:y\",251.00000561064954,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-height\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"ikl55x2mz5\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.5\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"sourcesanspro\",\"^8\",\"23cdre2zv22\",\"~:font-size\",\"36\",\"~:font-weight\",\"700\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"bold\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#674b47\",\"~:fill-opacity\",1]],\"~:font-family\",\"sourcesanspro\",\"~:text\",\"Install as a library\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"sourcesanspro\",\"^8\",\"3d0s9\",\"^?\",\"0\",\"^@\",\"700\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"bold\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^H\",\"sourcesanspro\"],[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"^<\",null,\"^=\",\"none\",\"^>\",\"sourcesanspro\",\"^8\",\"1kxohcz77sx\",\"^?\",\"36\",\"^@\",\"400\",\"^A\",null,\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^H\",\"sourcesanspro\",\"^I\",\" \\t• \\tClick on the \\\"Assets\\\" icon at the bottom left.\"]],\"^<\",null,\"^=\",\"none\",\"^J\",\"left\",\"^>\",\"sourcesanspro\",\"^8\",\"5fq4k\",\"^?\",\"0\",\"^@\",\"400\",\"^A\",null,\"^K\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[],\"^H\",\"sourcesanspro\"],[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"^<\",null,\"^=\",\"none\",\"^>\",\"sourcesanspro\",\"^8\",\"nv5sh3punj\",\"^?\",\"36\",\"^@\",\"400\",\"^A\",null,\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^H\",\"sourcesanspro\",\"^I\",\" \\t• \\tAt the top of the left panel, click on \\\"Libraries\\\".\"]],\"^<\",null,\"^=\",\"none\",\"^J\",\"left\",\"^>\",\"sourcesanspro\",\"^8\",\"7eugl\",\"^?\",\"0\",\"^@\",\"400\",\"^A\",null,\"^K\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[],\"^H\",\"sourcesanspro\"],[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"^<\",null,\"^=\",\"none\",\"^>\",\"sourcesanspro\",\"^8\",\"26v0iz0vdrw\",\"^?\",\"36\",\"^@\",\"400\",\"^A\",null,\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^H\",\"sourcesanspro\",\"^I\",\" \\t• \\tIn the \\\"Shared Libraries\\\", look for Avataaars. Hit the \\\"Add\\\" button.\"]],\"^<\",null,\"^=\",\"none\",\"^J\",\"left\",\"^>\",\"sourcesanspro\",\"^8\",\"ato37\",\"^?\",\"0\",\"^@\",\"400\",\"^A\",null,\"^K\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[],\"^H\",\"sourcesanspro\"],[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"^<\",null,\"^=\",\"none\",\"^>\",\"sourcesanspro\",\"^8\",\"wgbh5gihae\",\"^?\",\"36\",\"^@\",\"400\",\"^A\",null,\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^H\",\"sourcesanspro\",\"^I\",\" \\t• \\tExit the dialog button, and return to the \\\"Assets\\\" panel.\"]],\"^<\",null,\"^=\",\"none\",\"^J\",\"left\",\"^>\",\"sourcesanspro\",\"^8\",\"38h3h\",\"^?\",\"0\",\"^@\",\"400\",\"^A\",null,\"^K\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[],\"^H\",\"sourcesanspro\"],[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"^<\",null,\"^=\",\"none\",\"^>\",\"sourcesanspro\",\"^8\",\"18fk72hih25\",\"^?\",\"36\",\"^@\",\"400\",\"^A\",null,\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^H\",\"sourcesanspro\",\"^I\",\" \\t• \\tExpand the \\\"Avataaars\\\" library to see its components.\"],[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"^<\",null,\"^=\",\"none\",\"^>\",\"sourcesanspro\",\"^8\",\"1ouucj0c6w5\",\"^?\",\"0\",\"^@\",\"400\",\"^A\",null,\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[],\"^H\",\"sourcesanspro\",\"^I\",\"\"]],\"^<\",null,\"^=\",\"none\",\"^J\",\"left\",\"^>\",\"sourcesanspro\",\"^8\",\"3b2ha\",\"^?\",\"0\",\"^@\",\"400\",\"^A\",null,\"^K\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"regular\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[],\"^H\",\"sourcesanspro\"]]]],\"~:vertical-align\",\"top\"],\"~:name\",\"shape-list\",\"~:width\",1067.9999999999488,\"^7\",\"^I\",\"~:svg-attrs\",[\"^ \"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",468.99999999986494,\"~:y\",251.00001027067862]],[\"^Q\",[\"^ \",\"~:x\",1536.9999999998138,\"~:y\",251.00000095062046]],[\"^Q\",[\"^ \",\"~:x\",1536.9999999998138,\"~:y\",562.9999996098703]],[\"^Q\",[\"^ \",\"~:x\",468.99999999986494,\"~:y\",563.0000089299284]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:opacity\",0.99,\"~:id\",\"~udcfc3ac6-f952-80fb-8007-09daef8acfd3\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:position-data\",[[\"^ \",\"~:y\",291.00001519014205,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"800\",\"^N\",219.0778834995931,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"~:direction\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"~:height\",37.999964525081,\"^I\",\"Video Tutorial: \"],[\"^ \",\"~:y\",291.00001519014205,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"800\",\"^N\",810.9063412530968,\"^C\",\"none solid rgb(0, 139, 251)\",\"^D\",\"normal\",\"~:x\",688.0779282673209,\"^E\",[[\"^ \",\"^F\",\"#008bfb\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.999964525081,\"^I\",\"https://url.candide.media/avataaars-for-penpot-tutorial\"],[\"^ \",\"~:y\",335.0000593088263,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",5.640597982867348,\"^C\",\"none solid rgb(0, 0, 0)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#000000\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"sourcesanspro\",\"^10\",36.999994424899626,\"^I\",\" \"],[\"^ \",\"~:y\",378.0000685792004,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"800\",\"^N\",259.5467589214636,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.999964525081,\"^I\",\"Install as a library\"],[\"^ \",\"~:y\",423.00008279806605,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",1019.3121791820936,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",38.00002927320975,\"^I\",\"\\t• \\tOpen the file you would like to add avataaars to, or create a new one.\"],[\"^ \",\"~:y\",465.0000572201301,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",686.2498769100253,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",38.00002927320975,\"^I\",\" \\t• \\tClick on the \\\"Assets\\\" icon at the bottom left.\"],[\"^ \",\"~:y\",507.00003164219413,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",720.3278530332486,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.999964525081054,\"^I\",\" \\t• \\tAt the top of the left panel, click on \\\"Libraries\\\".\"],[\"^ \",\"~:y\",549.0000708123869,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",972.0154840888731,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",38.00002927320975,\"^I\",\" \\t• \\tIn the \\\"Shared Libraries\\\", look for Avataaars. Hit the \\\"Add\\\" button.\"],[\"^ \",\"~:y\",591.0000452344508,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",834.624875771256,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.99996452508094,\"^I\",\" \\t• \\tExit the dialog button, and return to the \\\"Assets\\\" panel.\"],[\"^ \",\"~:y\",633.0000196565148,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",815.015516495127,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.999964525081054,\"^I\",\" \\t• \\tExpand the \\\"Avataaars\\\" library to see its components.\"],[\"^ \",\"~:y\",674.0000239783975,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",5.640597982867348,\"^C\",\"none solid rgb(0, 0, 0)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#000000\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"sourcesanspro\",\"^10\",36.99999442489968,\"^I\",\" \"],[\"^ \",\"~:y\",717.0000332487716,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"800\",\"^N\",470.437371038789,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.999964525081054,\"^I\",\"Drag-and-drop in the base model\"],[\"^ \",\"~:y\",762.0000474676373,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",1013.3278981319013,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",38.00002927320975,\"^I\",\"In the Components section of the \\\"Assets\\\" panel, click and drag in \\\"Body/Skin\\\"\"],[\"^ \",\"~:y\",762.0000474676373,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",7.2657760141128165,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",1482.327942899629,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",38.00002927320975,\"^I\",\" \"],[\"^ \",\"~:y\",806.9999969383741,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",1050.3747054538762,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.99989977695225,\"^I\",\"component to start from scratch. If you would like a guide, select the component\"],[\"^ \",\"~:y\",806.9999969383741,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",7.2657760141128165,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",1519.374750221604,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.99989977695225,\"^I\",\" \"],[\"^ \",\"~:y\",851.999946409111,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",243.79664711044825,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",37.99989977695225,\"^I\",\"named \\\"Avataaar\\\".\"],[\"^ \",\"~:y\",896.000055275924,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",5.640597982867348,\"^C\",\"none solid rgb(0, 0, 0)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#000000\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"sourcesanspro\",\"^10\",37.000059173028376,\"^I\",\" \"],[\"^ \",\"~:y\",939.0000645462982,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"28px\",\"^@\",\"400\",\"^N\",967.2028851762675,\"^C\",\"none solid rgb(103, 75, 71)\",\"^D\",\"normal\",\"~:x\",469.0000447677278,\"^E\",[[\"^ \",\"^F\",\"#674b47\",\"^G\",1]],\"^[\",\"ltr\",\"^H\",\"\\\"Open Sans\\\"\",\"^10\",38.00002927320975,\"^I\",\"If you want your avataaar to be inside of a circle, select \\\"Avataaar + Circle\\\".\"]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",468.99999999986494,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",468.99999999986494,\"~:y\",251.00000561064954,\"^N\",1067.9999999999488,\"^10\",311.99999865924985,\"~:x1\",468.99999999986494,\"~:y1\",251.00000561064954,\"~:x2\",1536.9999999998138,\"~:y2\",563.0000042698994]],\"^E\",[],\"~:flip-x\",null,\"^10\",311.99999865924985,\"~:flip-y\",null]]" + } + }, + "~:id": "~u55ed444c-1179-8175-8007-09da51f502e8", + "~:name": "Page 1" + } + }, + "~:id": "~u55ed444c-1179-8175-8007-09da51f502e7", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js b/frontend/playwright/ui/render-wasm-specs/texts.spec.js index 3d9bdfabd1..7c7f33da29 100644 --- a/frontend/playwright/ui/render-wasm-specs/texts.spec.js +++ b/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(); diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-with-tabs-1.png b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-with-tabs-1.png new file mode 100644 index 0000000000..dee605a1b0 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-with-tabs-1.png differ diff --git a/frontend/playwright/ui/specs/render-wasm.spec.js b/frontend/playwright/ui/specs/render-wasm.spec.js index df33f19566..8f8e592fe4 100644 --- a/frontend/playwright/ui/specs/render-wasm.spec.js +++ b/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 }) => { diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss index 8ea188776f..f1ba49ac36 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss +++ b/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"] { diff --git a/frontend/src/app/render_wasm/api/texts.cljs b/frontend/src/app/render_wasm/api/texts.cljs index 7c8c4c5859..79eefd7668 100644 --- a/frontend/src/app/render_wasm/api/texts.cljs +++ b/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) diff --git a/render-wasm/src/shapes/text.rs b/render-wasm/src/shapes/text.rs index bc47c07e20..1e28bdf5ca 100644 --- a/render-wasm/src/shapes/text.rs +++ b/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 }