Feature: update tiptap styling (#17728)

* clean-up styling

* fix element names

* fix isEmpty method

* updated text

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -2568,4 +2568,21 @@ export default {
 		wordWrapConfigDescription:
 			'Slå ordbrydning til eller fra, så tekst automatisk brydes ved vinduets kant i stedet for at skabe en horisontal scrollbar.',
 	},
+	tiptap: {
+		extGroup_formatting: 'Text formattering',
+		extGroup_interactive: 'Inaktive elementer',
+		extGroup_media: 'Medier',
+		extGroup_structure: 'Indholds struktur',
+		extGroup_unknown: 'Ukategoriseret',
+		toobar_availableItems: 'Tilgængelige handlinger',
+		toobar_availableItemsEmpty: 'Ingen handler at vise',
+		toolbar_designer: 'Handlings designer',
+		toolbar_addRow: 'Tilføj række',
+		toolbar_addGroup: 'Tilføj gruppe',
+		toolbar_addItems: 'Tilføj handlinger',
+		toolbar_removeRow: 'Fjern række',
+		toolbar_removeGroup: 'Fjern gruppe',
+		toolbar_removeItem: 'Fjern handling',
+		toolbar_emptyGroup: 'Tom',
+	},
 } as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2654,14 +2654,15 @@ export default {
 		extGroup_media: 'Embeds and media',
 		extGroup_structure: 'Content structure',
 		extGroup_unknown: 'Uncategorized',
-		toobar_availableItems: 'Available toolbar items',
+		toobar_availableItems: 'Available actions',
 		toobar_availableItemsEmpty: 'There are no toolbar extensions to show',
 		toolbar_designer: 'Toolbar designer',
-		toolbar_addRow: 'Add row configuration',
+		toolbar_addRow: 'Add row',
 		toolbar_addGroup: 'Add group',
-		toolbar_addItems: 'Add items',
+		toolbar_addItems: 'Add actions',
 		toolbar_removeRow: 'Remove row',
 		toolbar_removeGroup: 'Remove group',
-		toolbar_removeItem: 'Remove item',
+		toolbar_removeItem: 'Remove action',
+		toolbar_emptyGroup: 'Empty',
 	},
 } as UmbLocalizationDictionary;

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

@@ -12,9 +12,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 import './tiptap-hover-menu.element.js';
 import './tiptap-toolbar.element.js';
 
-const elementName = 'umb-input-tiptap';
-
-@customElement(elementName)
+@customElement('umb-input-tiptap')
 export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof UmbLitElement, string>(UmbLitElement) {
 	readonly #requiredExtensions = [
 		StarterKit,
@@ -58,7 +56,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 	readonly = false;
 
 	@state()
-	private _editor!: Editor;
+	private _editor?: Editor;
 
 	@state()
 	_toolbar: UmbTiptapToolbarValue = [[[]]];
@@ -69,10 +67,10 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 
 	/**
 	 * Checks if the editor is empty.
-	 * @returns {boolean}
+	 * @returns {boolean} returns true if the editor contains no markup
 	 */
 	public isEmpty(): boolean {
-		return this._editor.isEmpty;
+		return this._editor?.isEmpty ?? false;
 	}
 
 	async #loadExtensions() {
@@ -100,8 +98,12 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 		if (!element) return;
 
 		const dimensions = this.configuration?.getValueByAlias<{ width?: number; height?: number }>('dimensions');
-		if (dimensions?.width) this.setAttribute('style', `max-width: ${dimensions.width}px;`);
-		if (dimensions?.height) element.setAttribute('style', `height: ${dimensions.height}px;`);
+		if (dimensions?.width) {
+			this.setAttribute('style', `max-width: ${dimensions.width}px;`);
+		}
+		if (dimensions?.height) {
+			element.setAttribute('style', `height: ${dimensions.height}px;`);
+		}
 
 		this._toolbar = this.configuration?.getValueByAlias<UmbTiptapToolbarValue>('toolbar') ?? [[[]]];
 
@@ -344,6 +346,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbInputTiptapElement;
+		'umb-input-tiptap': UmbInputTiptapElement;
 	}
 }

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

@@ -8,9 +8,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 
 import '../toolbar/tiptap-toolbar-dropdown-base.element.js';
 
-const elementName = 'umb-tiptap-toolbar';
-
-@customElement(elementName)
+@customElement('umb-tiptap-toolbar')
 export class UmbTiptapToolbarElement extends UmbLitElement {
 	#attached = false;
 	#extensionsController?: UmbExtensionsElementAndApiInitializer;
@@ -88,12 +86,10 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 			border: 1px solid var(--uui-color-border);
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
-			box-shadow:
-				0 2px 2px -2px rgba(34, 47, 62, 0.1),
-				0 8px 8px -4px rgba(34, 47, 62, 0.07);
 
-			background-color: var(--uui-color-surface-alt);
+			background-color: var(--uui-color-surface);
 			color: var(--color-text);
+			font-size: var(--uui-type-default-size);
 
 			display: flex;
 			flex-direction: column;
@@ -104,6 +100,10 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 			right: 0px;
 			padding: var(--uui-size-3);
 			z-index: 9999999;
+
+			box-shadow:
+				0 2px 2px -2px rgba(34, 47, 62, 0.1),
+				0 8px 8px -4px rgba(34, 47, 62, 0.07);
 		}
 
 		.row {
@@ -130,6 +130,6 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbTiptapToolbarElement;
+		'umb-tiptap-toolbar': UmbTiptapToolbarElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-button-disabled.element.ts

@@ -1,9 +1,7 @@
 import { UmbTiptapToolbarButtonElement } from './tiptap-toolbar-button.element.js';
 import { customElement, html, ifDefined, when } from '@umbraco-cms/backoffice/external/lit';
 
-const elementName = 'umb-tiptap-toolbar-button-disabled';
-
-@customElement(elementName)
+@customElement('umb-tiptap-toolbar-button-disabled')
 export class UmbTiptapToolbarButtonDisabledElement extends UmbTiptapToolbarButtonElement {
 	override render() {
 		return html`
@@ -28,6 +26,6 @@ export { UmbTiptapToolbarButtonDisabledElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbTiptapToolbarButtonDisabledElement;
+		'umb-tiptap-toolbar-button-disabled': UmbTiptapToolbarButtonDisabledElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-button.element.ts

@@ -4,9 +4,7 @@ import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import { customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
-const elementName = 'umb-tiptap-toolbar-button';
-
-@customElement(elementName)
+@customElement('umb-tiptap-toolbar-button')
 export class UmbTiptapToolbarButtonElement extends UmbLitElement {
 	public api?: UmbTiptapToolbarElementApi;
 	public editor?: Editor;
@@ -62,6 +60,6 @@ export { UmbTiptapToolbarButtonElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbTiptapToolbarButtonElement;
+		'umb-tiptap-toolbar-button': UmbTiptapToolbarButtonElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts

@@ -10,10 +10,9 @@ import { debounce } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
-const elementName = 'umb-property-editor-ui-tiptap-toolbar-configuration';
-
-@customElement(elementName)
+@customElement('umb-property-editor-ui-tiptap-toolbar-configuration')
 export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
@@ -125,12 +124,12 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	}
 
 	override render() {
-		return html`${this.#renderAvailableItems()} ${this.#renderDesigner()}`;
+		return html`${this.#renderDesigner()} ${this.#renderAvailableItems()}`;
 	}
 
 	#renderAvailableItems() {
 		return html`
-			<uui-box class="minimal" headline=${this.localize.term('tiptap_toobar_availableItems')}>
+			<uui-box id="toolbox" headline=${this.localize.term('tiptap_toobar_availableItems')}>
 				<div slot="header-actions">
 					<uui-input
 						type="search"
@@ -159,27 +158,29 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	#renderAvailableItem(item: UmbTiptapToolbarExtension) {
 		const forbidden = !this.#context.isExtensionEnabled(item.alias);
 		const inUse = this.#context.isExtensionInUse(item.alias);
-		return html`
-			<uui-button
-				compact
-				class=${forbidden ? 'forbidden' : ''}
-				draggable="true"
-				look=${forbidden ? 'placeholder' : 'outline'}
-				?disabled=${forbidden || inUse}
-				@click=${() => this.#onClick(item)}
-				@dragstart=${(e: DragEvent) => 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>
-		`;
+		return inUse || forbidden
+			? nothing
+			: html`
+					<uui-button
+						compact
+						class=${forbidden ? 'forbidden' : ''}
+						draggable="true"
+						look=${forbidden ? 'placeholder' : 'outline'}
+						?disabled=${forbidden || inUse}
+						@click=${() => this.#onClick(item)}
+						@dragstart=${(e: DragEvent) => 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>
+				`;
 	}
 
 	#renderDesigner() {
 		return html`
-			<uui-box class="minimal" headline=${this.localize.term('tiptap_toolbar_designer')}>
+			<div id="toolbar">
 				<div id="rows">
 					${repeat(
 						this._toolbar,
@@ -192,7 +193,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 					look="placeholder"
 					label=${this.localize.term('tiptap_toolbar_addRow')}
 					@click=${() => this.#context.insertToolbarRow(this._toolbar.length)}></uui-button>
-			</uui-box>
+			</div>
 		`;
 	}
 
@@ -220,7 +221,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 					() => html`
 						<uui-action-bar>
 							<uui-button
-								color="danger"
 								look="secondary"
 								label=${this.localize.term('tiptap_toolbar_removeRow')}
 								@click=${() => this.#context?.removeToolbarRow(rowIndex)}>
@@ -235,7 +235,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 
 	#renderGroup(group?: UmbTiptapToolbarGroupViewModel, rowIndex = 0, groupIndex = 0) {
 		if (!group) return nothing;
-		const hideActionBar = this._toolbar[rowIndex].data.length === 1 && group.data.length === 0;
+		const showActionBar = this._toolbar[rowIndex].data.length > 1 && group.data.length === 0;
 		return html`
 			<div
 				class="group"
@@ -245,16 +245,15 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 				<div class="items">
 					${when(
 						group?.data.length === 0,
-						() => html`<em><umb-localize key="tiptap_toolbar_addItems">Add items</umb-localize></em>`,
+						() => html`<em><umb-localize key="toolbar_emptyGroup">Empty</umb-localize></em>`,
 						() => html`${group!.data.map((alias, idx) => this.#renderItem(alias, rowIndex, groupIndex, idx))}`,
 					)}
 				</div>
 				${when(
-					!hideActionBar,
+					showActionBar,
 					() => html`
 						<uui-action-bar>
 							<uui-button
-								color="danger"
 								look="secondary"
 								label=${this.localize.term('tiptap_toolbar_removeGroup')}
 								@click=${() => this.#context?.removeToolbarGroup(rowIndex, groupIndex)}>
@@ -298,11 +297,32 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	}
 
 	static override readonly styles = [
+		UmbTextStyles,
 		css`
 			:host {
 				display: flex;
 				flex-direction: column;
-				gap: var(--uui-size-1);
+				gap: var(--uui-size-space-4);
+				flex-grow: 1;
+			}
+
+			@media (min-width: 1400px) {
+				:host {
+					flex-direction: row;
+				}
+				#toolbox {
+					width: 500px;
+					max-width: 33%;
+					flex-grow: 1;
+				}
+
+				#toolbar {
+					flex-grow: 100;
+				}
+			}
+
+			#toolbox {
+				border: 1px solid var(--uui-color-border);
 			}
 
 			uui-box.minimal {
@@ -323,9 +343,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 				display: flex;
 				flex-wrap: wrap;
 				gap: var(--uui-size-3);
-				background-color: var(--uui-color-surface-alt);
-				border-radius: var(--uui-border-radius);
-				padding: var(--uui-size-3);
 
 				uui-button {
 					--uui-button-font-weight: normal;
@@ -347,7 +364,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 						--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 {
@@ -357,6 +373,10 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 				}
 			}
 
+			uui-button-inline-create:not([vertical]) {
+				margin-bottom: -4px;
+			}
+
 			#rows {
 				display: flex;
 				flex-direction: column;
@@ -367,12 +387,14 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 					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);
 
+					&:not(:last-child) {
+						border-bottom: 1px solid var(--uui-color-border);
+					}
+
+					&:focus-within,
 					&:hover {
-						border-color: var(--uui-button-contrast-hover);
+						border-color: var(--uui-color-border-standalone);
 					}
 
 					.groups {
@@ -385,7 +407,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 						gap: var(--uui-size-1);
 
 						uui-button-inline-create {
-							height: 40px;
+							height: 50px;
 						}
 
 						.group {
@@ -395,12 +417,21 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 							justify-content: space-between;
 							gap: var(--uui-size-3);
 
-							border: 1px dashed var(--uui-color-border-standalone);
+							border: 1px dashed transparent;
 							border-radius: var(--uui-border-radius);
 							padding: var(--uui-size-3);
 
+							> uui-action-bar {
+								opacity: 0;
+								transition: opacity 120ms;
+							}
+
+							&:focus-within,
 							&:hover {
-								border-color: var(--uui-button-contrast-hover);
+								border-color: var(--uui-color-border-standalone);
+								> uui-action-bar {
+									opacity: 1;
+								}
 							}
 
 							.items {
@@ -429,7 +460,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 										--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 {
@@ -459,6 +489,6 @@ export { UmbPropertyEditorUiTiptapToolbarConfigurationElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbPropertyEditorUiTiptapToolbarConfigurationElement;
+		'umb-property-editor-ui-tiptap-toolbar-configuration': UmbPropertyEditorUiTiptapToolbarConfigurationElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts

@@ -16,18 +16,18 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 					{
 						alias: 'extensions',
 						label: 'Capabilities',
-						description: `Enable extensions enhance the capabilities of the Tiptap editor.
+						description: `Choose which Tiptap extensions to enable
 
-_Once enabled, the extensions will be available in the toolbar._`,
+_Once enabled, the related actions will be available for the toolbar._`,
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ExtensionsConfiguration',
 						weight: 10,
 					},
 					{
 						alias: 'toolbar',
 						label: 'Toolbar',
-						description: `Configure the toolbar for the intended editing experience.
+						description: `Design the available actions
 
-_Drag and drop the available items onto the toolbar designer._`,
+_Drag and drop the available actions onto the toolbar._`,
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration',
 						weight: 15,
 					},