diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar.element.ts index 50e548eec36b..0627c2c3e7ac 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar.element.ts @@ -92,11 +92,11 @@ export class UmbTiptapToolbarElement extends UmbLitElement { } #renderActions(aliases: Array) { - return repeat(aliases, (alias) => this.#lookup?.get(alias) ?? this.#renderActionPlaceholder()); + return repeat(aliases, (alias) => this.#lookup?.get(alias) ?? this.#renderActionPlaceholder(alias)); } - #renderActionPlaceholder() { - return html``; + #renderActionPlaceholder(alias: string) { + return html``; } static override readonly styles = css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/horizontal-rule/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/horizontal-rule/manifests.ts index 47523bb921b5..86ec324126d4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/horizontal-rule/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/horizontal-rule/manifests.ts @@ -16,6 +16,7 @@ export const manifests: Array = [ alias: 'Umb.Tiptap.Toolbar.HorizontalRule', name: 'Horizontal Rule Tiptap Toolbar Extension', api: () => import('./horizontal-rule.tiptap-toolbar-api.js'), + forExtensions: ['Umb.Tiptap.HorizontalRule'], meta: { alias: 'horizontalRule', icon: 'icon-horizontal-rule', diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts index 60c0894e842a..b6a98f1ddf5f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts @@ -4,6 +4,7 @@ export const manifests: Array = [ kind: 'styleMenu', alias: 'Umb.Tiptap.Toolbar.StyleSelect', name: 'Style Select Tiptap Extension', + forExtensions: ['Umb.Tiptap.Heading', 'Umb.Tiptap.Blockquote', 'Umb.Tiptap.CodeBlock'], items: [ { label: 'Headers', diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/extensions-configuration/property-editor-ui-tiptap-extensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/extensions-configuration/property-editor-ui-tiptap-extensions-configuration.element.ts index ad71fe55681f..89ac81a68f9b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/extensions-configuration/property-editor-ui-tiptap-extensions-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/extensions-configuration/property-editor-ui-tiptap-extensions-configuration.element.ts @@ -1,14 +1,4 @@ -import { - css, - customElement, - html, - ifDefined, - nothing, - property, - state, - repeat, - when, -} from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, nothing, property, state, repeat, when } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; @@ -166,7 +156,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement ${repeat( group.extensions, (item) => html` -
  • +
  • this.#context.removeStatusbarItem([areaIndex, itemIndex])} - @dragend=${this.#onDragEnd} - @dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [areaIndex, itemIndex])}> -
    - ${when(item.icon, (icon) => html``)} - ${label} -
    - - `; + const label = this.localize.string(item.label) || item.alias; + + switch (item.kind) { + case 'unknown': + return html` + this.#context.removeStatusbarItem([areaIndex, itemIndex])}> + `; + + default: + return html` + this.#context.removeStatusbarItem([areaIndex, itemIndex])} + @dragend=${this.#onDragEnd} + @dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [areaIndex, itemIndex])}> +
    + ${when(item.icon, (icon) => html``)} + ${label} +
    +     + `; + } } static override readonly styles = [ @@ -303,8 +317,8 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement --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); + --uui-button-contrast: var(--uui-color-danger); + --uui-button-border-color: var(--uui-color-danger); } div { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/tiptap-statusbar-configuration.context.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/tiptap-statusbar-configuration.context.ts index 8b3e29cf6eae..84844d673f7a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/tiptap-statusbar-configuration.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/tiptap-statusbar-configuration.context.ts @@ -31,6 +31,7 @@ export class UmbTiptapStatusbarConfigurationContext extends UmbContextBase { const _extensions = extensions .sort((a, b) => a.alias.localeCompare(b.alias)) .map((ext) => ({ + kind: 'default', alias: ext.alias, label: ext.meta.label, icon: ext.meta.icon, @@ -75,8 +76,8 @@ export class UmbTiptapStatusbarConfigurationContext extends UmbContextBase { .filter((ext) => ext.alias?.toLowerCase().includes(query) || ext.label?.toLowerCase().includes(query)); } - public getExtensionByAlias(alias: string): UmbTiptapStatusbarExtension | undefined { - return this.#lookup?.get(alias); + public getExtensionByAlias(alias: string): UmbTiptapStatusbarExtension { + return this.#lookup?.get(alias) ?? { label: '', alias, icon: '', kind: 'unknown' }; } public isExtensionEnabled(alias: string): boolean { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts index bb000b6d7c96..cebfc2463c07 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts @@ -255,9 +255,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement #renderGroup(group?: UmbTiptapToolbarGroupViewModel, rowIndex = 0, groupIndex = 0) { if (!group) return nothing; const showActionBar = this._toolbar[rowIndex].data.length > 1 && group.data.length === 0; - const items: UmbTiptapToolbarExtension[] = group!.data - .map((alias) => this.#context?.getExtensionByAlias(alias)) - .filter((item): item is UmbTiptapToolbarExtension => !!item); + const items = group.data.map((alias) => this.#context?.getExtensionByAlias(alias)); return html`
    ext.alias?.toLowerCase().includes(query) || ext.label?.toLowerCase().includes(query)); } - public getExtensionByAlias(alias: string): UmbTiptapToolbarExtension | undefined { - return this.#lookup?.get(alias); + public getExtensionByAlias(alias: string): UmbTiptapToolbarExtension { + return this.#lookup?.get(alias) ?? { label: '', alias, icon: '', kind: 'unknown' }; } public isExtensionEnabled(alias: string): boolean { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts index cc7b02d45c37..dd8eba4ac8da 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts @@ -10,9 +10,9 @@ export class UmbTiptapToolbarGroupConfigurationElement< TiptapToolbarItem extends UmbTiptapToolbarExtension = UmbTiptapToolbarExtension, > extends UmbLitElement { #sorter = new UmbSorterController(this, { - getUniqueOfElement: (element) => element.getAttribute('tiptap-toolbar-alias'), - getUniqueOfModel: (modelEntry) => modelEntry.alias!, - itemSelector: 'uui-button', + getUniqueOfElement: (element) => element.dataset.mark, + getUniqueOfModel: (modelEntry) => `tiptap-toolbar-item:${modelEntry.alias}`, + itemSelector: '.draggable', identifier: 'umb-tiptap-toolbar-sorter', containerSelector: '.items', resolvePlacement: UmbSorterResolvePlacementAsGrid, @@ -71,7 +71,7 @@ export class UmbTiptapToolbarGroupConfigurationElement< } #renderItem(item: TiptapToolbarItem, index = 0) { - const label = this.localize.string(item.label); + const label = this.localize.string(item.label) || item.alias; const forbidden = !this.#context?.isExtensionEnabled(item.alias); switch (item.kind) { @@ -80,13 +80,11 @@ export class UmbTiptapToolbarGroupConfigurationElement< return html` this.#onRequestRemove(item, index)}>
    ${label} @@ -95,18 +93,29 @@ export class UmbTiptapToolbarGroupConfigurationElement< `; + case 'unknown': + return html` + this.#onRequestRemove(item, index)}> + `; + case 'button': + case 'colorPickerButton': default: return html` this.#onRequestRemove(item, index)}>
    ${when( @@ -131,23 +140,18 @@ export class UmbTiptapToolbarGroupConfigurationElement< uui-button { --uui-button-font-weight: normal; - &[draggable='true'], - &[draggable='true'] > .inner { + &.draggable, + &.draggable > .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); + --uui-button-contrast: var(--uui-color-danger); + --uui-button-border-color: var(--uui-color-danger); } div { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/types.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/types.ts index c7c80b8c23a9..a6572054c925 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/types.ts @@ -1,17 +1,18 @@ export type UmbTiptapSortableViewModel = { unique: string; data: T }; -export type UmbTiptapStatusbarExtension = { +export type UmbTiptapExtensionBase = { + kind?: string; alias: string; label: string; icon: string; dependencies?: Array; }; +export type UmbTiptapStatusbarExtension = UmbTiptapExtensionBase; + export type UmbTiptapStatusbarViewModel = UmbTiptapSortableViewModel>; -export type UmbTiptapToolbarExtension = UmbTiptapStatusbarExtension & { - kind?: string; -}; +export type UmbTiptapToolbarExtension = UmbTiptapExtensionBase; export type UmbTiptapToolbarRowViewModel = UmbTiptapSortableViewModel>; export type UmbTiptapToolbarGroupViewModel = UmbTiptapSortableViewModel>;