From a6c92d8a91d1ef8a4e2d368f64b278230d362363 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Wed, 24 Sep 2025 11:18:58 +0200
Subject: [PATCH] Tiptap RTE: Adds heading (h4-h6) toolbar buttons (#20243)

* Register more heading icons

* TipTap heading extensions

* Change icon for headings
---
 .../heading/heading4.tiptap-toolbar-api.ts    | 12 ++++++
 .../heading/heading5.tiptap-toolbar-api.ts    | 12 ++++++
 .../heading/heading6.tiptap-toolbar-api.ts    | 12 ++++++
 .../tiptap/extensions/heading/manifests.ts    | 41 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading4.tiptap-toolbar-api.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading5.tiptap-toolbar-api.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading6.tiptap-toolbar-api.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading4.tiptap-toolbar-api.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading4.tiptap-toolbar-api.ts
new file mode 100644
index 0000000000..4618088bf3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading4.tiptap-toolbar-api.ts
@@ -0,0 +1,12 @@
+import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarHeading4ExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override isActive(editor?: Editor) {
+		return editor?.isActive('heading', { level: 4 }) === true;
+	}
+
+	override execute(editor?: Editor) {
+		editor?.chain().focus().toggleHeading({ level: 4 }).run();
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading5.tiptap-toolbar-api.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading5.tiptap-toolbar-api.ts
new file mode 100644
index 0000000000..8bc7e87d55
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading5.tiptap-toolbar-api.ts
@@ -0,0 +1,12 @@
+import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarHeading5ExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override isActive(editor?: Editor) {
+		return editor?.isActive('heading', { level: 5 }) === true;
+	}
+
+	override execute(editor?: Editor) {
+		editor?.chain().focus().toggleHeading({ level: 5 }).run();
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading6.tiptap-toolbar-api.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading6.tiptap-toolbar-api.ts
new file mode 100644
index 0000000000..712c929e2f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading6.tiptap-toolbar-api.ts
@@ -0,0 +1,12 @@
+import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarHeading3ExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override isActive(editor?: Editor) {
+		return editor?.isActive('heading', { level: 6 }) === true;
+	}
+
+	override execute(editor?: Editor) {
+		editor?.chain().focus().toggleHeading({ level: 6 }).run();
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/manifests.ts
index 8655614e03..a7f2f60c06 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/manifests.ts
@@ -5,7 +5,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Headings Tiptap Extension',
 		api: () => import('./heading.tiptap-api.js'),
 		meta: {
-			icon: 'icon-heading-1',
+			icon: 'icon-heading',
 			label: 'Headings',
 			group: '#tiptap_extGroup_formatting',
 		},
@@ -49,4 +49,43 @@ export const manifests: Array<UmbExtensionManifest> = [
 			label: 'Heading 3',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Heading4',
+		name: 'Heading 4 Tiptap Toolbar Extension',
+		api: () => import('./heading4.tiptap-toolbar-api.js'),
+		forExtensions: ['Umb.Tiptap.Heading'],
+		meta: {
+			alias: 'heading4',
+			icon: 'icon-heading-4',
+			label: 'Heading 4',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Heading5',
+		name: 'Heading 5 Tiptap Toolbar Extension',
+		api: () => import('./heading5.tiptap-toolbar-api.js'),
+		forExtensions: ['Umb.Tiptap.Heading'],
+		meta: {
+			alias: 'heading5',
+			icon: 'icon-heading-5',
+			label: 'Heading 5',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Heading6',
+		name: 'Heading 6 Tiptap Toolbar Extension',
+		api: () => import('./heading6.tiptap-toolbar-api.js'),
+		forExtensions: ['Umb.Tiptap.Heading'],
+		meta: {
+			alias: 'heading6',
+			icon: 'icon-heading-6',
+			label: 'Heading 6',
+		},
+	},
 ];