diff --git a/frontend/playwright/data/workspace/get-file-13958.json b/frontend/playwright/data/workspace/get-file-13958.json new file mode 100644 index 0000000000..0231434a79 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-13958.json @@ -0,0 +1,207 @@ +{ + "~: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": "~u99e49e93-362f-80ef-8007-345124cf6bc7", + "~: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": "BUG 13958", + "~:revn": 5, + "~:modified-at": "~m1775746608868", + "~:vern": 0, + "~:id": "~u89a2533f-9add-81dd-8007-d7f26e7831ce", + "~: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", + "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", + "0015-fix-text-attrs-blank-strings", + "0015-clean-shadow-color", + "0016-copy-fills-from-position-data-to-text-node", + "0017-fix-layout-flex-dir" + ] + }, + "~:version": 67, + "~:project-id": "~u99e49e93-362f-80ef-8007-345124cface8", + "~:created-at": "~m1775746242016", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u89a2533f-9add-81dd-8007-d7f26e7831cf" + ], + "~:pages-index": { + "~u89a2533f-9add-81dd-8007-d7f26e7831cf": { + "~: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\",[\"~ufa851bfb-b542-803e-8007-d7f3a49e30ac\"]]]", + "~ufa851bfb-b542-803e-8007-d7f3a49e30ac": "[\"~#shape\",[\"^ \",\"~:y\",381,\"~: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-width\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^8\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^8\",[[\"^ \",\"^9\",\"1.2\",\"^:\",\"normal\",\"~:text-transform\",\"none\",\"~:text-align\",\"left\",\"~:font-id\",\"sourcesanspro\",\"~:font-size\",\"24\",\"~:font-weight\",\"400\",\"~:text-direction\",\"ltr\",\"~:font-variant-id\",\"regular\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#ff0000\",\"~:fill-opacity\",1]],\"~:font-family\",\"sourcesanspro\",\"~:text\",\"Hola caracola\"]],\"^;\",\"none\",\"^<\",\"left\",\"^=\",\"sourcesanspro\",\"~:key\",\"3apsi\",\"^>\",\"24\",\"^?\",\"400\",\"^@\",\"ltr\",\"^7\",\"paragraph\",\"^A\",\"regular\",\"^B\",\"none\",\"^C\",\"0\",\"^D\",[[\"^ \",\"^E\",\"#ff0000\",\"^F\",1]],\"^G\",\"sourcesanspro\"]]]]],\"~:hide-in-viewer\",false,\"~:name\",\"Hola caracola\",\"~:width\",136.99999999999977,\"^7\",\"^H\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",713,\"~:y\",381]],[\"^N\",[\"^ \",\"~:x\",849.9999999999998,\"~:y\",381]],[\"^N\",[\"^ \",\"~:x\",849.9999999999998,\"~:y\",410]],[\"^N\",[\"^ \",\"~:x\",713,\"~:y\",410]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:id\",\"~ufa851bfb-b542-803e-8007-d7f3a49e30ac\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:applied-tokens\",[\"^ \",\"~:fill\",\"text-color\"],\"~:position-data\",[[\"~#rect\",[\"^ \",\"~:y\",410.5,\"^:\",\"normal\",\"^;\",\"none\",\"^>\",\"24px\",\"^?\",\"400\",\"~:y1\",-1.5,\"^L\",136.7109375,\"^B\",\"none\",\"^C\",\"normal\",\"~:x\",713,\"~:x1\",0,\"~:y2\",29.5,\"^D\",[[\"^ \",\"^E\",\"#ff0000\",\"^F\",1]],\"~:x2\",136.7109375,\"~:direction\",\"ltr\",\"^G\",\"sourcesanspro\",\"~:height\",31,\"^H\",\"Hola caracola\"]]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:x\",713,\"~:selrect\",[\"^U\",[\"^ \",\"~:x\",713,\"~:y\",381,\"^L\",136.99999999999977,\"^[\",29,\"^W\",713,\"^V\",381,\"^Y\",849.9999999999998,\"^X\",410]],\"~:flip-x\",null,\"^[\",29,\"~:flip-y\",null]]" + } + }, + "~:id": "~u89a2533f-9add-81dd-8007-d7f26e7831cf", + "~:name": "Page 1" + } + }, + "~:id": "~u89a2533f-9add-81dd-8007-d7f26e7831ce", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + }, + "~:tokens-lib": { + "~#penpot/tokens-lib": { + "~:sets": { + "~#ordered-map": [ + [ + "S-Global", + { + "~#penpot/token-set": { + "~:id": "~ufa851bfb-b542-803e-8007-d7f3b69b727e", + "~:name": "Global", + "~:description": "", + "~:modified-at": "~m1775746581056", + "~:tokens": { + "~#ordered-map": [ + [ + "text-color", + { + "~#penpot/token": { + "~:id": "~ufa851bfb-b542-803e-8007-d7f3b69aea1f", + "~:name": "text-color", + "~:type": "~:color", + "~:value": "#ff0000", + "~:description": "", + "~:modified-at": "~m1775746578027" + } + } + ] + ] + } + } + } + ] + ] + }, + "~:themes": { + "~#ordered-map": [ + [ + "", + { + "~#ordered-map": [ + [ + "__PENPOT__HIDDEN__TOKEN__THEME__", + { + "~#penpot/token-theme": { + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__", + "~:group": "", + "~:description": "", + "~:is-source": false, + "~:external-id": "", + "~:modified-at": "~m1775746581056", + "~:sets": { + "~#set": [ + "Global" + ] + } + } + } + ] + ] + } + ] + ] + }, + "~:active-themes": { + "~#set": [ + "/__PENPOT__HIDDEN__TOKEN__THEME__" + ] + } + } + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/specs/tokens/text.spec.js b/frontend/playwright/ui/specs/tokens/text.spec.js new file mode 100644 index 0000000000..0f41e7fc79 --- /dev/null +++ b/frontend/playwright/ui/specs/tokens/text.spec.js @@ -0,0 +1,27 @@ +import { test, expect } from "@playwright/test"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; + +test.beforeEach(async ({ page }) => { + await WasmWorkspacePage.init(page); +}); + +test("BUG 13958 - Fill token gets detached when editing text shape", async ({ page }) => { + const workspacePage = new WasmWorkspacePage(page); + await workspacePage.setupEmptyFile(); + // NOTE: this file has been created with the old renderer + await workspacePage.mockGetFile("workspace/get-file-13958.json"); + await workspacePage.goToWorkspace(); + + // Check token is attached to the shape + await workspacePage.clickLeafLayer("Hola Caracola"); + await expect(workspacePage.rightSidebar.getByLabel("text-color", { exact: true })).toBeVisible(); + + // Enter and exit the text editor + await workspacePage.page.keyboard.press("Enter"); + await expect(workspacePage.page.getByTestId("text-editor")).toBeVisible(); + await workspacePage.page.keyboard.press("Escape"); + await expect(workspacePage.page.getByTestId("text-editor")).not.toBeAttached(); + + // Assert token is still attached to the shape + await expect(workspacePage.rightSidebar.getByLabel("text-color", { exact: true })).toBeVisible(); +});