diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-extensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-extensions-configuration.element.ts index b513b99415..40649ae3d3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-extensions-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-extensions-configuration.element.ts @@ -33,15 +33,14 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement implements UmbPropertyEditorUiElement { @property({ attribute: false }) - set value(value: string[]) { - if (!value) value = []; + set value(value: string[] | undefined) { this.#value = value; } - get value(): string[] { + get value(): string[] | undefined { return this.#value; } - #value: string[] = []; + #value?: string[] = []; @property({ attribute: false }) config?: UmbPropertyEditorConfigCollection; @@ -64,15 +63,23 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement group: ext.meta.group, }; }); + + if (!this.value) { + // The default value is all extensions enabled + this.#value = this._extensionConfigs.map((ext) => ext.alias); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + this.#setupExtensionCategories(); }); } #setupExtensionCategories() { + const useDefault = !this.value; // The default value is all extensions enabled const withSelectedProperty = this._extensionConfigs.map((extensionConfig) => { return { ...extensionConfig, - selected: this.value.includes(extensionConfig.alias), + selected: useDefault ? true : this.value!.includes(extensionConfig.alias), }; }); @@ -93,6 +100,10 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement #onExtensionClick(item: ExtensionCategoryItem) { item.selected = !item.selected; + if (!this.value) { + this.value = []; + } + if (item.selected) { this.#value = [...this.value, item.alias]; } else { diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-toolbar-configuration.element.ts index e56361410f..fdc4b089a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-toolbar-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-toolbar-configuration.element.ts @@ -26,8 +26,12 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement implements UmbPropertyEditorUiElement { @property({ attribute: false }) - set value(value: string[][][]) { - // TODO: Make sure that value has at least one row and one group + set value(value: string[][][] | undefined) { + if (!value) { + this.#value = [[[]]]; + return; + } + // TODO: This can be optimized with cashing; this.#value = value.map((rows) => rows.map((groups) => [...groups])); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/manifests.ts index 1adc57a016..906c3b67b7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/manifests.ts @@ -13,18 +13,18 @@ export const manifests: Array = [ group: 'richContent', settings: { properties: [ - { - alias: 'extensions', - label: 'Extensions', - description: 'Extensions to enable', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ExtensionsConfiguration', - weight: 5, - }, { alias: 'toolbar', label: 'Toolbar', description: 'Pick the toolbar items that should be available when editing', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration', + weight: 5, + }, + { + alias: 'extensions', + label: 'Extensions', + description: 'Extensions to enable', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ExtensionsConfiguration', weight: 10, }, {