From a6cbc7cd60fa5fdce619cbb71c9ea452c87006d3 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 27 Sep 2024 23:07:32 +0200 Subject: [PATCH] feat: adds configuration to toolbar buttons --- .../input-tiptap/input-tiptap.element.ts | 1 + .../input-tiptap/tiptap-fixed-menu.element.ts | 19 +++++++------------ .../packages/rte/tiptap/extensions/types.ts | 7 ++++++- .../extensions/umb/mediapicker.extension.ts | 13 +++---------- 4 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts index b2837b223c..0e9539f206 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts +++ b/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 `, )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts index 26c0aa2030..2ed9b7774e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts +++ b/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 }}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/types.ts index d297efd984..ec2bcc1f8c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/types.ts +++ b/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. */ diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts index abc90d5d2a..cbca94f7ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/mediapicker.extension.ts +++ b/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; }