diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts index 74d387c06a..7078d2318a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts @@ -32,17 +32,18 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement @property({ attribute: false }) set value(value: UmbTiptapToolbarValue | undefined) { - if (!value) { + if (!this.#isValidTiptapToolbarValue(value)) { this.#value = [[[]]]; - } else { - // TODO: This can be optimized with cashing; - this.#value = value ? value.map((rows) => rows.map((groups) => [...groups])) : [[[]]]; + return; + } + + if (value.length > 0) { + this.#value = value.map((rows) => rows.map((groups) => [...groups])); value.forEach((row) => row.forEach((group) => group.forEach((alias) => this.#inUse.add(alias)))); } } get value(): UmbTiptapToolbarValue { - // TODO: This can be optimized with cashing; - return this.#value.map((rows) => rows.map((groups) => [...groups])); + return this.#value; } #value: UmbTiptapToolbarValue = [[[]]]; @@ -55,6 +56,20 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement }); } + #isValidTiptapToolbarValue(value: unknown): value is UmbTiptapToolbarValue { + if (!Array.isArray(value)) return false; + for (const row of value) { + if (!Array.isArray(row)) return false; + for (const group of row) { + if (!Array.isArray(group)) return false; + for (const alias of group) { + if (typeof alias !== 'string') return false; + } + } + } + return true; + } + #onDragStart(event: DragEvent, alias: string, fromPos?: [number, number, number]) { event.dataTransfer!.effectAllowed = 'move'; this.#currentDragItem = { alias, fromPos };