Feature: update tiptap styling

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;
 	}
 }