diff --git a/packages/core/src/extensions/Blocks/api/block.ts b/packages/core/src/extensions/Blocks/api/block.ts index acbad0307..ec8a07e8b 100644 --- a/packages/core/src/extensions/Blocks/api/block.ts +++ b/packages/core/src/extensions/Blocks/api/block.ts @@ -38,7 +38,39 @@ export function propsToAttributes< // Props are displayed in kebab-case as HTML attributes. If a prop's // value is the same as its default, we don't display an HTML // attribute for it. - parseHTML: (element) => element.getAttribute(camelToDataKebab(name)), + parseHTML: (element) => { + const value = element.getAttribute(camelToDataKebab(name)); + + if (value === null) { + return null; + } + + if (typeof spec.default === "boolean") { + if (value === "true") { + return true; + } + + if (value === "false") { + return false; + } + + return null; + } + + if (typeof spec.default === "number") { + const asNumber = parseFloat(value); + const isNumeric = + !Number.isNaN(asNumber) && Number.isFinite(asNumber); + + if (isNumeric) { + return asNumber; + } + + return null; + } + + return value; + }, renderHTML: (attributes) => attributes[name] !== spec.default ? { diff --git a/tests/end-to-end/copypaste/copypaste.test.ts b/tests/end-to-end/copypaste/copypaste.test.ts index be053aa55..ff7ced83c 100644 --- a/tests/end-to-end/copypaste/copypaste.test.ts +++ b/tests/end-to-end/copypaste/copypaste.test.ts @@ -9,6 +9,7 @@ import { insertNestedListItems, insertParagraph, } from "../../utils/copypaste"; +import { executeSlashCommand } from "../../utils/slashmenu"; test.describe.configure({ mode: "serial" }); @@ -135,4 +136,59 @@ test.describe("Check Copy/Paste Functionality", () => { await compareDocToSnapshot(page, "nestedOrderedLists.json"); }); + + test("Images should keep props", async ({ page, browserName }) => { + test.skip( + browserName === "firefox" || browserName === "webkit", + "Firefox doesn't yet support the async clipboard API. Webkit copy/paste stopped working after updating to Playwright 1.33." + ); + + await focusOnEditor(page); + await page.keyboard.type("paragraph"); + + const IMAGE_EMBED_URL = + "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg"; + await executeSlashCommand(page, "image"); + + await page.click(`[data-test="embed-tab"]`); + await page.click(`[data-test="embed-input"]`); + await page.keyboard.type(IMAGE_EMBED_URL); + await page.click(`[data-test="embed-input-button"]`); + await page.waitForSelector(`img[src="${IMAGE_EMBED_URL}"]`); + + await page.click(`img`); + + await page.waitForSelector(`[class*="resizeHandle"][style*="right"]`); + const resizeHandle = page.locator( + `[class*="resizeHandle"][style*="right"]` + ); + const resizeHandleBoundingBox = await resizeHandle.boundingBox(); + await page.mouse.move( + resizeHandleBoundingBox.x + resizeHandleBoundingBox.width / 2, + resizeHandleBoundingBox.y + resizeHandleBoundingBox.height / 2, + { + steps: 5, + } + ); + await page.mouse.down(); + + await page.mouse.move( + resizeHandleBoundingBox.x + resizeHandleBoundingBox.width / 2 - 50, + resizeHandleBoundingBox.y + resizeHandleBoundingBox.height / 2, + { + steps: 5, + } + ); + + await page.mouse.up(); + + await page.click(`img`); + await page.keyboard.press("ArrowDown"); + await page.pause(); + + await copyPasteAll(page); + await page.pause(); + + await compareDocToSnapshot(page, "images.json"); + }); }); diff --git a/tests/end-to-end/copypaste/copypaste.test.ts-snapshots/images-json-chromium-linux.json b/tests/end-to-end/copypaste/copypaste.test.ts-snapshots/images-json-chromium-linux.json new file mode 100644 index 000000000..8ddb0e9f2 --- /dev/null +++ b/tests/end-to-end/copypaste/copypaste.test.ts-snapshots/images-json-chromium-linux.json @@ -0,0 +1,126 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "0", + "textColor": "default", + "backgroundColor": "default" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlignment": "left" + }, + "content": [ + { + "type": "text", + "text": "paragraph" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "2", + "textColor": "default", + "backgroundColor": "default" + }, + "content": [ + { + "type": "image", + "attrs": { + "textAlignment": "left", + "backgroundColor": "default", + "url": "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg", + "caption": "", + "width": 462 + } + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1", + "textColor": "default", + "backgroundColor": "default" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlignment": "left" + } + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "4", + "textColor": "default", + "backgroundColor": "default" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlignment": "left" + }, + "content": [ + { + "type": "text", + "text": "paragraph" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "5", + "textColor": "default", + "backgroundColor": "default" + }, + "content": [ + { + "type": "image", + "attrs": { + "textAlignment": "left", + "backgroundColor": "default", + "url": "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg", + "caption": "", + "width": 462 + } + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "6", + "textColor": "default", + "backgroundColor": "default" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file