diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts index 22c06fcb87..f1a2209417 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts @@ -354,13 +354,14 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert :host { position: relative; display: block; - user-select: none; + user-select: all; user-drag: auto; white-space: nowrap; } + :host(.ProseMirror-selectednode) { umb-ref-rte-block { - cursor: not-allowed; + --uui-color-default-contrast: initial; outline: 3px solid var(--uui-color-focus); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts index ff927ad854..002b82272a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts @@ -49,6 +49,7 @@ export class UmbRefRteBlockElement extends UmbLitElement { const blockValue = { ...this.content, $settings: this.settings }; return html` + @@ -60,13 +61,34 @@ export class UmbRefRteBlockElement extends UmbLitElement { :host { display: block; } + uui-ref-node { min-height: var(--uui-size-16); } + :host([unpublished]) umb-icon, :host([unpublished]) umb-ufm-render { opacity: 0.6; } + + /* HACK: Stretches a space character ( ) to be full-width to make the RTE block appear text-selectable. [LK,NL] */ + .selection-background { + position: absolute; + pointer-events: none; + font-size: 100vw; + inset: 0; + overflow: hidden; + z-index: 0; + } + + umb-icon, + umb-ufm-render { + z-index: 1; + + &::selection { + color: var(--uui-color-default-contrast); + } + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts index 4ef5cf573e..f0337968d1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts @@ -50,6 +50,10 @@ export class UmbUfmRenderElement extends UmbLitElement { static override styles = [ UmbTextStyles, css` + :host { + position: relative; + } + * { max-width: 100%; word-wrap: break-word; diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 905449f0db..28a3acbf03 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json @@ -8,7 +8,7 @@ "hasInstallScript": true, "dependencies": { "@umbraco/json-models-builders": "^2.0.37", - "@umbraco/playwright-testhelpers": "^16.0.29", + "@umbraco/playwright-testhelpers": "^16.0.32", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" @@ -66,9 +66,9 @@ } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "16.0.29", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.29.tgz", - "integrity": "sha512-Zk0Ip2rZO0T15mbjQqu9SXI9TFckja/Y4KpHCRzwRgTbkDKr9pT7TENCcvegymVX2GpH6Cs9fu7OPvUABLK9cg==", + "version": "16.0.32", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.32.tgz", + "integrity": "sha512-HB/xHnu36XOyQjNnpSe1j9DoZ61tY7OvnkNQT73MhGcrhfnNdn/Hf+6nFN7gutUTcxn+L6COeXzexQclSjYr+g==", "dependencies": { "@umbraco/json-models-builders": "2.0.37", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index e2fe7731bc..4a143b243c 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@umbraco/json-models-builders": "^2.0.37", - "@umbraco/playwright-testhelpers": "^16.0.29", + "@umbraco/playwright-testhelpers": "^16.0.32", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/BlockGrid/ComplexBlockGridTest.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/BlockGrid/ComplexBlockGridTest.spec.ts index fba0b3acf2..910c19994a 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/BlockGrid/ComplexBlockGridTest.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/BlockGrid/ComplexBlockGridTest.spec.ts @@ -108,7 +108,7 @@ test('can update property value nested in a block grid area with an RTE with a b await umbracoUi.content.isFailedStateButtonVisible(); await umbracoUi.content.doesErrorNotificationHaveText(NotificationConstantHelper.error.documentCouldNotBePublished, true, true); // Updates the textstring block with the correct value - await umbracoUi.content.clickBlockElementWithName(blockListElementTypeName); + await umbracoUi.content.clickBlockElementInRTEWithName(blockListElementTypeName); await umbracoUi.content.clickEditBlockListEntryWithName(textStringElementTypeName); await umbracoUi.content.enterPropertyValue(textStringElementDataTypeName, correctPropertyValue); await umbracoUi.content.clickUpdateButtonForModalWithElementTypeNameAndGroupName(textStringElementTypeName, textStringElementGroupName); @@ -124,7 +124,7 @@ test('can update property value nested in a block grid area with an RTE with a b await umbracoUi.reloadPage(); // Waits to make sure the page has loaded await umbracoUi.waitForTimeout(2000); - await umbracoUi.content.clickBlockElementWithName(blockListElementTypeName); + await umbracoUi.content.clickBlockElementInRTEWithName(blockListElementTypeName); // Needs to wait to make sure it has loaded await umbracoUi.waitForTimeout(2000); await umbracoUi.content.clickEditBlockListEntryWithName(textStringElementTypeName); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/VariantTipTapBlocks.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/VariantTipTapBlocks.spec.ts index e52c3f502b..a15238c55e 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/VariantTipTapBlocks.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/VariantTipTapBlocks.spec.ts @@ -61,7 +61,7 @@ test('invariant document type with invariant tiptap RTE with invariant block wit await umbracoUi.content.isSuccessStateVisibleForSaveAndPublishButton(); expect(await umbracoApi.document.isDocumentPublished(contentId)).toBeTruthy(); await umbracoUi.reloadPage(); - await umbracoUi.content.clickBlockElementWithName(blockName); + await umbracoUi.content.clickBlockElementInRTEWithName(blockName); await umbracoUi.content.doesPropertyContainValue(textStringName, textStringText); }); @@ -128,7 +128,7 @@ test('variant document type with variant tiptap RTE with variant block with an v await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.published); expect(await umbracoApi.document.isDocumentPublished(contentId)).toBeTruthy(); await umbracoUi.reloadPage(); - await umbracoUi.content.clickBlockElementWithName(blockName); + await umbracoUi.content.clickBlockElementInRTEWithName(blockName); await umbracoUi.content.doesPropertyContainValue(textStringName, textStringText); }); @@ -154,7 +154,7 @@ test('variant document type with invariant tiptap RTE with variant block with an await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.published); expect(await umbracoApi.document.isDocumentPublished(contentId)).toBeTruthy(); await umbracoUi.reloadPage(); - await umbracoUi.content.clickBlockElementWithName(blockName); + await umbracoUi.content.clickBlockElementInRTEWithName(blockName); await umbracoUi.content.doesPropertyContainValue(textStringName, textStringText); }); @@ -180,6 +180,6 @@ test('variant document type with invariant tiptap RTE with variant block with an await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.published); expect(await umbracoApi.document.isDocumentPublished(contentId)).toBeTruthy(); await umbracoUi.reloadPage(); - await umbracoUi.content.clickBlockElementWithName(blockName); + await umbracoUi.content.clickBlockElementInRTEWithName(blockName); await umbracoUi.content.doesPropertyContainValue(textStringName, textStringText); });