feat: adds configuration to toolbar buttons

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -140,6 +140,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 					<umb-tiptap-fixed-menu
 						.toolbar=${this._toolbar}
 						.editor=${this._editor}
+						.configuration=${this.configuration}
 						?readonly=${this.readonly}></umb-tiptap-fixed-menu>
 				`,
 			)}

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts

@@ -2,6 +2,7 @@ import type { ManifestTiptapToolbarExtension } from '../../extensions/tiptap-too
 import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 import '../toolbar/tiptap-toolbar-dropdown-base.element.js';
 
@@ -13,17 +14,10 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
 	readonly = false;
 
 	@property({ attribute: false })
-	set editor(value) {
-		const oldValue = this.#editor;
-		if (value === oldValue) {
-			return;
-		}
-		this.#editor = value;
-	}
-	get editor() {
-		return this.#editor;
-	}
-	#editor?: Editor;
+	editor?: Editor;
+
+	@property({ attribute: false })
+	configuration?: UmbPropertyEditorConfigCollection;
 
 	@property({ attribute: false })
 	toolbar: string[][][] = [[[]]];
@@ -34,7 +28,8 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
 				type="tiptapToolbarExtension"
 				.filter=${(ext: ManifestTiptapToolbarExtension) =>
 					this.toolbar.flat(2).includes(ext.alias) && (!!ext.kind || !!ext.element)}
-				.elementProps=${{ editor: this.editor }}>
+				.elementProps=${{ editor: this.editor, configuration: this.configuration }}
+				.apiProps=${{ configuration: this.configuration }}>
 			</umb-extension-with-api-slot>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/types.ts

@@ -55,7 +55,7 @@ export interface UmbTiptapExtensionArgs {
 	configuration?: UmbPropertyEditorConfigCollection;
 }
 
-export interface UmbTiptapToolbarElementApi extends UmbApi {
+export interface UmbTiptapToolbarElementApi extends UmbApi, UmbTiptapExtensionArgs {
 	/**
 	 * The manifest for the extension.
 	 */
@@ -78,6 +78,11 @@ export abstract class UmbTiptapToolbarElementApiBase extends UmbControllerBase i
 	 */
 	manifest?: ManifestTiptapToolbarExtension;
 
+	/**
+	 * The data type configuration for the property editor that the editor is used for.
+	 */
+	configuration?: UmbPropertyEditorConfigCollection;
+
 	/**
 	 * A method to execute the toolbar element action.
 	 */

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts

@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase, type UmbTiptapExtensionArgs } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../types.js';
 import {
 	UMB_MEDIA_CAPTION_ALT_TEXT_MODAL,
 	UMB_MEDIA_PICKER_MODAL,
@@ -8,18 +8,16 @@ import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { getGuidFromUdi, getProcessedImageUrl, imageSize } from '@umbraco-cms/backoffice/utils';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api';
 
-export default class UmbTiptapMediaPickerExtensionApi extends UmbTiptapToolbarElementApiBase {
+export default class UmbTiptapMediaPickerToolbarExtensionApi extends UmbTiptapToolbarElementApiBase {
 	#modalManager?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
-	#configuration?: UmbPropertyEditorConfigCollection;
 
 	/**
 	 * @returns {number} The maximum width of uploaded images
 	 */
 	get maxWidth(): number {
-		const maxImageSize = parseInt(this.#configuration?.getValueByAlias('maxImageSize') ?? '', 10);
+		const maxImageSize = parseInt(this.configuration?.getValueByAlias('maxImageSize') ?? '', 10);
 		return isNaN(maxImageSize) ? 500 : maxImageSize;
 	}
 
@@ -31,11 +29,6 @@ export default class UmbTiptapMediaPickerExtensionApi extends UmbTiptapToolbarEl
 		});
 	}
 
-	getTiptapExtensions(args: UmbTiptapExtensionArgs) {
-		this.#configuration = args?.configuration;
-		return [];
-	}
-
 	override isActive(editor?: Editor) {
 		return editor?.isActive('image') === true || editor?.isActive('figure') === true;
 	}