Tiptap UI tweaks

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

@@ -209,7 +209,10 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 
 				h1,
 				h2,
-				h3 {
+				h3,
+				h4,
+				h5,
+				h6 {
 					margin-top: 0;
 					margin-bottom: 0.5em;
 				}
@@ -233,6 +236,13 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 					}
 				}
 
+				li {
+					> p {
+						margin: 0;
+						padding: 0;
+					}
+				}
+
 				.umb-embed-holder {
 					display: inline-block;
 					position: relative;

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

@@ -62,24 +62,19 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`${map(this.toolbar, (row, rowIndex) =>
-			map(
-				row,
-				(group, groupIndex) => html`
-					${map(group, (alias, aliasIndex) => {
-						const newRow = rowIndex !== 0 && groupIndex === 0 && aliasIndex === 0;
-						const component = this._lookup?.get(alias);
-						if (!component) return nothing;
-						return html`
-							<div class="item" ?data-new-row=${newRow} style=${newRow ? 'grid-column: 1 / span 3' : ''}>
-								${component}
-							</div>
-						`;
-					})}
-					<div class="separator"></div>
+		return html`
+			${map(
+				this.toolbar,
+				(row) => html`
+					<div class="row">
+						${map(
+							row,
+							(group) => html`<div class="group">${map(group, (alias) => this._lookup?.get(alias) ?? nothing)}</div>`,
+						)}
+					</div>
 				`,
-			),
-		)} `;
+			)}
+		`;
 	}
 
 	static override readonly styles = css`
@@ -95,30 +90,35 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 			border-bottom-right-radius: 0;
 			background-color: var(--uui-color-surface);
 			color: var(--color-text);
-			display: grid;
-			grid-template-columns: repeat(auto-fill, 10px);
-			grid-auto-flow: row;
+
+			display: flex;
+			flex-direction: column;
+
 			position: sticky;
 			top: -25px;
 			left: 0px;
 			right: 0px;
-			padding: var(--uui-size-space-3);
+			padding: var(--uui-size-3);
 			z-index: 9999999;
 		}
 
-		.item {
-			grid-column: span 3;
-		}
+		.row {
+			display: flex;
+			flex-direction: row;
 
-		.separator {
-			background-color: var(--uui-color-border);
-			width: 1px;
-			place-self: center;
-			height: 22px;
-		}
-		.separator:last-child,
-		.separator:has(+ [data-new-row]) {
-			display: none;
+			.group {
+				display: inline-flex;
+				align-items: stretch;
+
+				&:not(:last-child)::after {
+					content: '';
+					background-color: var(--uui-color-border);
+					width: 1px;
+					place-self: center;
+					height: 22px;
+					margin: 0 var(--uui-size-3);
+				}
+			}
 		}
 	`;
 }

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

@@ -109,7 +109,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 				label: 'Rich Text Essentials',
 				icon: 'icon-browser-window',
 				group: '#tiptap_extGroup_formatting',
-				description: 'This is a core extension, it must be enabled',
+				description: 'This is a core extension, it is always enabled by default.',
 			});
 
 			if (!this.value) {