@umbraco-cms/backoffice 15.0.0-rc1 → 15.0.0-rc2

package/dist-cms/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.js

@@ -4,59 +4,58 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, css, html, property, state, repeat, nothing } from '../../../../../external/lit/index.js';
-import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
+import { UmbTiptapToolbarConfigurationContext } from '../contexts/tiptap-toolbar-configuration.context.js';
+import { customElement, css, html, property, repeat, state, when, nothing } from '../../../../../external/lit/index.js';
+import { debounce } from '../../../../core/utils/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 const elementName = 'umb-property-editor-ui-tiptap-toolbar-configuration';
 let UmbPropertyEditorUiTiptapToolbarConfigurationElement = class UmbPropertyEditorUiTiptapToolbarConfigurationElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        this.#inUse = new Set();
-        this._extensions = [];
-        this.#value = [[[]]];
-    }
-    #inUse;
+    #context;
     #currentDragItem;
-    #lookup;
+    #debouncedFilter;
     set value(value) {
-        if (!this.#isValidTiptapToolbarValue(value)) {
-            this.#value = [[[]]];
+        if (!value)
+            value = [[[]]];
+        if (value === this.#value)
             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))));
-        }
+        this.#context.setToolbar(value);
     }
     get value() {
-        return this.#value;
+        return this.#value?.map((rows) => rows.map((groups) => [...groups]));
     }
     #value;
-    async firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        this.observe(umbExtensionsRegistry.byType('tiptapToolbarExtension'), (extensions) => {
-            this._extensions = extensions.map((ext) => ({ alias: ext.alias, label: ext.meta.label, icon: ext.meta.icon }));
-            this.#lookup = new Map(this._extensions.map((ext) => [ext.alias, ext]));
+    constructor() {
+        super();
+        this.#context = new UmbTiptapToolbarConfigurationContext(this);
+        this.#debouncedFilter = debounce((query) => {
+            this._availableExtensions = this.#context.filterExtensions(query);
+        }, 250);
+        this._availableExtensions = [];
+        this._toolbar = [];
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
+            this.observe(this.#context.extensions, (extensions) => {
+                this._availableExtensions = extensions;
+            });
+            this.observe(this.#context.reload, (reload) => {
+                if (reload) {
+                    this.requestUpdate();
+                }
+            });
+            this.observe(this.#context.toolbar, (toolbar) => {
+                if (!toolbar.length)
+                    return;
+                this._toolbar = toolbar;
+                this.#value = toolbar.map((rows) => rows.data.map((groups) => [...groups.data]));
+                propertyContext.setValue(this.#value);
+            });
         });
     }
-    #isValidTiptapToolbarValue(value) {
-        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;
+    #onClick(item) {
+        const lastRow = (this.#value?.length ?? 1) - 1;
+        const lastGroup = (this.#value?.[lastRow].length ?? 1) - 1;
+        const lastItem = this.#value?.[lastRow][lastGroup].length ?? 0;
+        this.#context.insertToolbarItem(item.alias, [lastRow, lastGroup, lastItem]);
     }
     #onDragStart(event, alias, fromPos) {
         event.dataTransfer.effectAllowed = 'move';
@@ -72,7 +71,7 @@ let UmbPropertyEditorUiTiptapToolbarConfigurationElement = class UmbPropertyEdit
             const { fromPos } = this.#currentDragItem ?? {};
             if (!fromPos)
                 return;
-            this.#removeItem(fromPos);
+            this.#context.removeToolbarItem(fromPos);
         }
     }
     #onDrop(event, toPos) {
@@ -80,221 +79,328 @@ let UmbPropertyEditorUiTiptapToolbarConfigurationElement = class UmbPropertyEdit
         const { alias, fromPos } = this.#currentDragItem ?? {};
         // Remove item if no destination position is provided
         if (fromPos && !toPos) {
-            this.#removeItem(fromPos);
+            this.#context.removeToolbarItem(fromPos);
             return;
         }
         // Move item if both source and destination positions are available
         if (fromPos && toPos) {
-            this.#moveItem(fromPos, toPos);
+            this.#context.moveToolbarItem(fromPos, toPos);
             return;
         }
         // Insert item if an alias and a destination position are provided
         if (alias && toPos) {
-            this.#insertItem(alias, toPos);
+            this.#context.insertToolbarItem(alias, toPos);
         }
     }
-    #moveItem(from, to) {
-        const [rowIndex, groupIndex, itemIndex] = from;
-        // Get the item to move from the 'from' position
-        const itemToMove = this.#value[rowIndex][groupIndex][itemIndex];
-        // Remove the item from the original position
-        this.#value[rowIndex][groupIndex].splice(itemIndex, 1);
-        this.#insertItem(itemToMove, to);
-    }
-    #insertItem(alias, toPos) {
-        const [rowIndex, groupIndex, itemIndex] = toPos;
-        // Insert the item into the new position
-        const inserted = this.#value[rowIndex][groupIndex].splice(itemIndex, 0, alias);
-        inserted.forEach((alias) => this.#inUse.add(alias));
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
-    }
-    #removeItem(from) {
-        const [rowIndex, groupIndex, itemIndex] = from;
-        const removed = this.#value[rowIndex][groupIndex].splice(itemIndex, 1);
-        removed.forEach((alias) => this.#inUse.delete(alias));
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    #onFilterInput(event) {
+        const query = (event.target.value ?? '').toLocaleLowerCase();
+        this.#debouncedFilter(query);
     }
-    #addGroup(rowIndex, groupIndex) {
-        this.#value[rowIndex].splice(groupIndex, 0, []);
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
-    }
-    #removeGroup(rowIndex, groupIndex) {
-        if (this.#value[rowIndex].length > groupIndex) {
-            const removed = this.#value[rowIndex].splice(groupIndex, 1);
-            removed.forEach((group) => group.forEach((alias) => this.#inUse.delete(alias)));
-        }
-        // Prevent leaving an empty group
-        if (this.#value[rowIndex].length === 0) {
-            this.#value[rowIndex][groupIndex] = [];
-        }
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
-    }
-    #addRow(rowIndex) {
-        this.#value.splice(rowIndex, 0, [[]]);
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    render() {
+        return html `${this.#renderAvailableItems()} ${this.#renderDesigner()}`;
     }
-    #removeRow(rowIndex) {
-        if (this.#value.length > rowIndex) {
-            const removed = this.#value.splice(rowIndex, 1);
-            removed.forEach((row) => row.forEach((group) => group.forEach((alias) => this.#inUse.delete(alias))));
-        }
-        // Prevent leaving an empty row
-        if (this.#value.length === 0) {
-            this.#value[rowIndex] = [[]];
-        }
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    #renderAvailableItems() {
+        return html `
+			<uui-box class="minimal" headline=${this.localize.term('tiptap_toobar_availableItems')}>
+				<div slot="header-actions">
+					<uui-input
+						type="search"
+						autocomplete="off"
+						placeholder=${this.localize.term('placeholders_filter')}
+						@input=${this.#onFilterInput}>
+						<div slot="prepend">
+							<uui-icon name="search"></uui-icon>
+						</div>
+					</uui-input>
+				</div>
+				<div class="available-items" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
+					${when(this._availableExtensions.length === 0, () => html `<umb-localize key="tiptap_toobar_availableItemsEmpty"
+								>There are no toolbar extensions to show</umb-localize
+							>`, () => repeat(this._availableExtensions, (item) => this.#renderAvailableItem(item)))}
+				</div>
+			</uui-box>
+		`;
     }
-    render() {
+    #renderAvailableItem(item) {
+        const forbidden = !this.#context.isExtensionEnabled(item.alias);
+        const inUse = this.#context.isExtensionInUse(item.alias);
         return html `
-			${repeat(this.#value, (row, rowIndex) => this.#renderRow(row, rowIndex))}
-			<uui-button look="secondary" @click=${() => this.#addRow(this.#value.length)}>
-				<uui-icon name="add"></uui-icon>
-				<span>Add row</span>
+			<uui-button
+				compact
+				class=${forbidden ? 'forbidden' : ''}
+				draggable="true"
+				look=${forbidden ? 'placeholder' : 'outline'}
+				?disabled=${forbidden || inUse}
+				@click=${() => this.#onClick(item)}
+				@dragstart=${(e) => this.#onDragStart(e, item.alias)}
+				@dragend=${this.#onDragEnd}>
+				<div class="inner">
+					${when(item.icon, () => html `<umb-icon .name=${item.icon}></umb-icon>`)}
+					<span>${this.localize.string(item.label)}</span>
+				</div>
 			</uui-button>
-			${this.#renderExtensions()}
 		`;
     }
-    #renderRow(row, rowIndex) {
+    #renderDesigner() {
         return html `
-			<div class="row">
-				${repeat(row, (group, groupIndex) => this.#renderGroup(group, rowIndex, groupIndex))}
-				<uui-button look="secondary" @click=${() => this.#addGroup(rowIndex, row.length)}>
-					<uui-icon name="add"></uui-icon>
-					<span>Add group</span>
-				</uui-button>
+			<uui-box class="minimal" headline=${this.localize.term('tiptap_toolbar_designer')}>
+				<div id="rows">
+					${repeat(this._toolbar, (row) => row.unique, (row, idx) => this.#renderRow(row, idx))}
+				</div>
 				<uui-button
-					compact
-					color="danger"
-					look="primary"
-					class="remove-row-button ${rowIndex === 0 && row.length === 1 && row[0].length === 0 ? 'hidden' : undefined}"
-					@click=${() => this.#removeRow(rowIndex)}>
-					<umb-icon name="icon-trash"></umb-icon>
-				</uui-button>
+					id="btnAddRow"
+					look="placeholder"
+					label=${this.localize.term('tiptap_toolbar_addRow')}
+					@click=${() => this.#context.insertToolbarRow(this._toolbar.length)}></uui-button>
+			</uui-box>
+		`;
+    }
+    #renderRow(row, rowIndex = 0) {
+        if (!row)
+            return nothing;
+        const hideActionBar = this._toolbar.length === 1;
+        return html `
+			<uui-button-inline-create
+				label=${this.localize.term('tiptap_toolbar_addRow')}
+				@click=${() => this.#context?.insertToolbarRow(rowIndex)}></uui-button-inline-create>
+			<div class="row">
+				<div class="groups">
+					<uui-button-inline-create
+						vertical
+						label=${this.localize.term('tiptap_toolbar_addGroup')}
+						@click=${() => this.#context?.insertToolbarGroup(rowIndex, 0)}></uui-button-inline-create>
+					${repeat(row.data, (group) => group.unique, (group, idx) => this.#renderGroup(group, rowIndex, idx))}
+				</div>
+				${when(!hideActionBar, () => html `
+						<uui-action-bar>
+							<uui-button
+								color="danger"
+								look="secondary"
+								label=${this.localize.term('tiptap_toolbar_removeRow')}
+								@click=${() => this.#context?.removeToolbarRow(rowIndex)}>
+								<uui-icon name="icon-trash"></uui-icon>
+							</uui-button>
+						</uui-action-bar>
+					`)}
 			</div>
 		`;
     }
-    #renderGroup(group, rowIndex, groupIndex) {
+    #renderGroup(group, rowIndex = 0, groupIndex = 0) {
+        if (!group)
+            return nothing;
+        const hideActionBar = this._toolbar[rowIndex].data.length === 1 && group.data.length === 0;
         return html `
 			<div
 				class="group"
 				dropzone="move"
 				@dragover=${this.#onDragOver}
-				@drop=${(e) => this.#onDrop(e, [rowIndex, groupIndex, group.length])}>
-				${group.map((alias, itemIndex) => this.#renderItem(alias, rowIndex, groupIndex, itemIndex))}
-				<uui-button
-					compact
-					color="danger"
-					look="primary"
-					class="remove-group-button ${groupIndex === 0 && group.length === 0 ? 'hidden' : undefined}"
-					@click=${() => this.#removeGroup(rowIndex, groupIndex)}>
-					<umb-icon name="icon-trash"></umb-icon>
-				</uui-button>
+				@drop=${(e) => this.#onDrop(e, [rowIndex, groupIndex, group.data.length - 1])}>
+				<div class="items">
+					${when(group?.data.length === 0, () => html `<em><umb-localize key="tiptap_toolbar_addItems">Add items</umb-localize></em>`, () => html `${group.data.map((alias, idx) => this.#renderItem(alias, rowIndex, groupIndex, idx))}`)}
+				</div>
+				${when(!hideActionBar, () => html `
+						<uui-action-bar>
+							<uui-button
+								color="danger"
+								look="secondary"
+								label=${this.localize.term('tiptap_toolbar_removeGroup')}
+								@click=${() => this.#context?.removeToolbarGroup(rowIndex, groupIndex)}>
+								<uui-icon name="icon-trash"></uui-icon>
+							</uui-button>
+						</uui-action-bar>
+					`)}
 			</div>
+			<uui-button-inline-create
+				vertical
+				label=${this.localize.term('tiptap_toolbar_addGroup')}
+				@click=${() => this.#context?.insertToolbarGroup(rowIndex, groupIndex + 1)}></uui-button-inline-create>
 		`;
     }
-    #renderItem(alias, rowIndex, groupIndex, itemIndex) {
-        const extension = this.#lookup?.get(alias);
-        if (!extension)
+    #renderItem(alias, rowIndex = 0, groupIndex = 0, itemIndex = 0) {
+        const item = this.#context?.getExtensionByAlias(alias);
+        if (!item)
             return nothing;
+        const forbidden = !this.#context?.isExtensionEnabled(item.alias);
         return html `
-			<div
-				title=${this.localize.string(extension.label)}
-				class="item"
+			<uui-button
+				compact
+				class=${forbidden ? 'forbidden' : ''}
 				draggable="true"
+				look=${forbidden ? 'placeholder' : 'outline'}
+				title=${this.localize.string(item.label)}
+				?disabled=${forbidden}
+				@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
 				@dragend=${this.#onDragEnd}
 				@dragstart=${(e) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
-				<umb-icon name=${extension.icon ?? ''}></umb-icon>
-			</div>
-		`;
-    }
-    #renderExtensions() {
-        return html `
-			<div class="extensions" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
-				${repeat(this._extensions.filter((ext) => !this.#inUse.has(ext.alias)), (extension) => html `
-						<div
-							class="item"
-							draggable="true"
-							title=${this.localize.string(extension.label)}
-							@dragstart=${(e) => this.#onDragStart(e, extension.alias)}
-							@dragend=${this.#onDragEnd}>
-							<umb-icon name=${extension.icon ?? ''}></umb-icon>
-						</div>
-					`)}
-			</div>
+				<div class="inner">
+					${when(item.icon, () => html `<umb-icon .name=${item.icon}></umb-icon>`, () => html `<span>${this.localize.string(item.label)}</span>`)}
+				</div>
+			</uui-button>
 		`;
     }
     static { this.styles = [
-        UmbTextStyles,
         css `
 			:host {
 				display: flex;
 				flex-direction: column;
-				gap: 6px;
+				gap: var(--uui-size-1);
+			}
+
+			uui-box.minimal {
+				--uui-box-header-padding: 0;
+				--uui-box-default-padding: var(--uui-size-2) 0;
+				--uui-box-box-shadow: none;
+
+				[slot='header-actions'] {
+					margin-bottom: var(--uui-size-2);
+
+					uui-icon {
+						color: var(--uui-color-border);
+					}
+				}
 			}
-			.extensions {
+
+			.available-items {
 				display: flex;
 				flex-wrap: wrap;
-				gap: 3px;
-				border-radius: var(--uui-border-radius);
+				gap: var(--uui-size-3);
 				background-color: var(--uui-color-surface-alt);
-				padding: 6px;
-				min-height: 30px;
-				min-width: 30px;
-			}
-			.row {
-				position: relative;
-				display: flex;
-				gap: 12px;
-			}
-			.group {
-				position: relative;
-				display: flex;
-				gap: 3px;
 				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-surface-alt);
-				padding: 6px;
-				min-height: 32px;
-				min-width: 32px;
+				padding: var(--uui-size-3);
+
+				uui-button {
+					--uui-button-font-weight: normal;
+
+					&[draggable='true'],
+					&[draggable='true'] > .inner {
+						cursor: move;
+					}
+
+					&[disabled],
+					&[disabled] > .inner {
+						cursor: not-allowed;
+					}
+
+					&.forbidden {
+						--color: var(--uui-color-danger);
+						--color-standalone: var(--uui-color-danger-standalone);
+						--color-emphasis: var(--uui-color-danger-emphasis);
+						--color-contrast: var(--uui-color-danger);
+						--uui-button-contrast-disabled: var(--uui-color-danger);
+						--uui-button-border-color-disabled: var(--uui-color-danger);
+						opacity: 0.5;
+					}
+
+					div {
+						display: flex;
+						gap: var(--uui-size-1);
+					}
+				}
 			}
-			.item {
-				padding: var(--uui-size-space-2);
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-surface);
-				cursor: move;
+
+			#rows {
 				display: flex;
-				box-sizing: border-box;
-				width: 32px;
-				height: 32px;
-				justify-content: center;
-			}
+				flex-direction: column;
+				gap: var(--uui-size-1);
 
-			.remove-row-button,
-			.remove-group-button {
-				display: none;
-			}
-			.remove-group-button {
-				position: absolute;
-				top: -26px;
-				left: 50%;
-				transform: translateX(-50%);
-				z-index: 1;
+				.row {
+					display: flex;
+					align-items: flex-start;
+					justify-content: space-between;
+					gap: var(--uui-size-3);
+					border: 1px solid var(--uui-color-border);
+					border-radius: var(--uui-border-radius);
+					padding: var(--uui-size-3) var(--uui-size-2);
+
+					&:hover {
+						border-color: var(--uui-button-contrast-hover);
+					}
+
+					.groups {
+						flex: 1;
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						align-items: center;
+						justify-content: flex-start;
+						gap: var(--uui-size-1);
+
+						uui-button-inline-create {
+							height: 40px;
+						}
+
+						.group {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							justify-content: space-between;
+							gap: var(--uui-size-3);
+
+							border: 1px dashed var(--uui-color-border-standalone);
+							border-radius: var(--uui-border-radius);
+							padding: var(--uui-size-3);
+
+							&:hover {
+								border-color: var(--uui-button-contrast-hover);
+							}
+
+							.items {
+								display: flex;
+								flex-direction: row;
+								flex-wrap: wrap;
+								gap: var(--uui-size-1);
+
+								uui-button {
+									--uui-button-font-weight: normal;
+
+									&[draggable='true'],
+									&[draggable='true'] > .inner {
+										cursor: move;
+									}
+
+									&[disabled],
+									&[disabled] > .inner {
+										cursor: not-allowed;
+									}
+
+									&.forbidden {
+										--color: var(--uui-color-danger);
+										--color-standalone: var(--uui-color-danger-standalone);
+										--color-emphasis: var(--uui-color-danger-emphasis);
+										--color-contrast: var(--uui-color-danger);
+										--uui-button-contrast-disabled: var(--uui-color-danger);
+										--uui-button-border-color-disabled: var(--uui-color-danger);
+										opacity: 0.5;
+									}
+
+									div {
+										display: flex;
+										gap: var(--uui-size-1);
+									}
+								}
+							}
+						}
+					}
+				}
 			}
 
-			.row:hover .remove-row-button:not(.hidden),
-			.group:hover .remove-group-button:not(.hidden) {
-				display: flex;
+			#btnAddRow {
+				display: block;
+				margin-top: var(--uui-size-1);
 			}
-			umb-icon {
-				/* Prevents titles from bugging out */
-				pointer-events: none;
+
+			.handle {
+				cursor: move;
 			}
 		`,
     ]; }
 };
 __decorate([
     state()
-], UmbPropertyEditorUiTiptapToolbarConfigurationElement.prototype, "_extensions", void 0);
+], UmbPropertyEditorUiTiptapToolbarConfigurationElement.prototype, "_availableExtensions", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUiTiptapToolbarConfigurationElement.prototype, "_toolbar", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUiTiptapToolbarConfigurationElement.prototype, "value", null);

package/dist-cms/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.d.ts

@@ -0,0 +1,27 @@
+import type { UmbTiptapToolbarValue } from '../../../components/types.js';
+import type { UmbTiptapToolbarExtension, UmbTiptapToolbarGroupViewModel, UmbTiptapToolbarRowViewModel } from '../types.js';
+import { UmbContextBase } from '../../../../../libs/class-api/index.js';
+import { UmbContextToken } from '../../../../../libs/context-api/index.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+export declare class UmbTiptapToolbarConfigurationContext extends UmbContextBase<UmbTiptapToolbarConfigurationContext> {
+    #private;
+    readonly extensions: import("rxjs/internal/Observable").Observable<UmbTiptapToolbarExtension[]>;
+    readonly reload: import("rxjs/internal/Observable").Observable<boolean>;
+    readonly toolbar: import("rxjs/internal/Observable").Observable<UmbTiptapToolbarRowViewModel[]>;
+    constructor(host: UmbControllerHost);
+    filterExtensions(query: string): Array<UmbTiptapToolbarExtension>;
+    getExtensionByAlias(alias: string): UmbTiptapToolbarExtension | undefined;
+    isExtensionEnabled(alias: string): boolean;
+    isExtensionInUse(alias: string): boolean;
+    isValidToolbarValue(value: unknown): value is UmbTiptapToolbarValue;
+    insertToolbarItem(alias: string, to: [number, number, number]): void;
+    insertToolbarGroup(rowIndex: number, groupIndex: number): void;
+    insertToolbarRow(rowIndex: number): void;
+    moveToolbarItem(from: [number, number, number], to: [number, number, number]): void;
+    removeToolbarItem(from: [number, number, number]): void;
+    removeToolbarGroup(rowIndex: number, groupIndex: number): void;
+    removeToolbarRow(rowIndex: number): void;
+    setToolbar(value?: UmbTiptapToolbarValue | null): void;
+    updateToolbarRow(rowIndex: number, groups: Array<UmbTiptapToolbarGroupViewModel>): void;
+}
+export declare const UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT: UmbContextToken<UmbTiptapToolbarConfigurationContext, UmbTiptapToolbarConfigurationContext>;