Tiptap RTE: Localizes property editor UI label (removes "[Tiptap]" from label) (closes #20439) (#20713)

* Localized RTE property-editor UI label, removing "[Tiptap]"

* Updated acceptance test

* Localized the button label in the data-type and property-editor picker modals

* Based on @copilot suggestion, localized the property-editor UI label in the other places

Author: leekelleher

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts

@@ -116,7 +116,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 						<li class="item" ?selected=${this.value.selection.includes(propertyEditorUI.alias)}>
 							<button type="button" @click=${() => this.#handleClick(propertyEditorUI)}>
 								<umb-icon name=${propertyEditorUI.meta.icon} class="icon"></umb-icon>
-								${propertyEditorUI.meta.label || propertyEditorUI.name}
+								${this.localize.string(propertyEditorUI.meta.label || propertyEditorUI.name)}
 							</button>
 						</li>
 					`,

src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts

@@ -347,30 +347,27 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	}
 
 	#renderDataTypeButton(propertyEditorUI: ManifestPropertyEditorUi, createAsNewOnPick?: boolean) {
+		const label = this.localize.string(propertyEditorUI.meta.label || propertyEditorUI.name);
 		if (createAsNewOnPick) {
 			return html`
-				<uui-button
-					label=${propertyEditorUI.meta.label || propertyEditorUI.name}
-					@click=${() => this.#createDataType(propertyEditorUI.alias)}>
-					${this.#renderItemContent(propertyEditorUI)}
+				<uui-button label=${label} @click=${() => this.#createDataType(propertyEditorUI.alias)}>
+					${this.#renderItemContent(label, propertyEditorUI)}
 				</uui-button>
 			`;
 		} else {
 			return html`
-				<uui-button
-					label=${propertyEditorUI.meta.label || propertyEditorUI.name}
-					href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
-					${this.#renderItemContent(propertyEditorUI)}
+				<uui-button label=${label} href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
+					${this.#renderItemContent(label, propertyEditorUI)}
 				</uui-button>
 			`;
 		}
 	}
 
-	#renderItemContent(propertyEditorUI: ManifestPropertyEditorUi) {
+	#renderItemContent(label: string, propertyEditorUI: ManifestPropertyEditorUi) {
 		return html`
 			<div class="item-content">
 				<umb-icon name=${propertyEditorUI.meta.icon} class="icon"></umb-icon>
-				${propertyEditorUI.meta.label || propertyEditorUI.name}
+				${label}
 			</div>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap-rte/manifests.ts

@@ -7,7 +7,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 		name: 'Rich Text Editor [Tiptap] Property Editor UI',
 		element: () => import('./property-editor-ui-tiptap.element.js'),
 		meta: {
-			label: 'Rich Text Editor [Tiptap]',
+			label: '#rte_label',
 			propertyEditorSchemaAlias: 'Umbraco.RichText',
 			icon: 'icon-browser-window',
 			group: 'richContent',

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/Tiptap.spec.ts

@@ -15,7 +15,7 @@ test.afterEach(async ({umbracoApi}) => {
 
 test('can create a rich text editor with tiptap', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
   //  Arrange
-  const tipTapLocatorName = 'Rich Text Editor [Tiptap]';
+  const tipTapLocatorName = 'Rich Text Editor';
   const tipTapAlias = 'Umbraco.RichText';
   const tipTapUiAlias = 'Umb.PropertyEditorUi.Tiptap';