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:
@@ -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>
|
||||
`,
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user