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
This commit is contained in:
Lee Kelleher
2025-11-03 12:49:55 +01:00
committed by GitHub
parent cfa530487b
commit c1a8500f12
4 changed files with 10 additions and 13 deletions

View File

@@ -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>
`,

View File

@@ -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>
`;
}

View File

@@ -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',

View File

@@ -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';