diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
index d4534b46debc..32568953f548 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
@@ -978,6 +978,10 @@
"file": "hard-drive.svg",
"legacy": true
},
+ {
+ "name": "icon-heading",
+ "file": "heading.svg"
+ },
{
"name": "icon-heading-1",
"file": "heading-1.svg"
@@ -994,6 +998,14 @@
"name": "icon-heading-4",
"file": "heading-4.svg"
},
+ {
+ "name": "icon-heading-5",
+ "file": "heading-5.svg"
+ },
+ {
+ "name": "icon-heading-6",
+ "file": "heading-6.svg"
+ },
{
"name": "icon-headphones",
"file": "headphones.svg"
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
index 0f83d371847c..735f7aca1765 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
@@ -769,6 +769,9 @@ legacy: true,
hidden: true,
path: () => import("./icons/icon-hard-drive.js"),
},{
+name: "icon-heading",
+path: () => import("./icons/icon-heading.js"),
+},{
name: "icon-heading-1",
path: () => import("./icons/icon-heading-1.js"),
},{
@@ -781,6 +784,12 @@ path: () => import("./icons/icon-heading-3.js"),
name: "icon-heading-4",
path: () => import("./icons/icon-heading-4.js"),
},{
+name: "icon-heading-5",
+path: () => import("./icons/icon-heading-5.js"),
+},{
+name: "icon-heading-6",
+path: () => import("./icons/icon-heading-6.js"),
+},{
name: "icon-headphones",
path: () => import("./icons/icon-headphones.js"),
},{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-5.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-5.ts
new file mode 100644
index 000000000000..ee81cce068a0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-5.ts
@@ -0,0 +1 @@
+export default ``;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-6.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-6.ts
new file mode 100644
index 000000000000..1ef9984dcf93
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-6.ts
@@ -0,0 +1 @@
+export default ``;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading.ts
new file mode 100644
index 000000000000..ee931a06a45d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading.ts
@@ -0,0 +1 @@
+export default ``;
\ No newline at end of file
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 000000000000..4618088bf3e7
--- /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 000000000000..8bc7e87d5501
--- /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 000000000000..712c929e2fc6
--- /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 8655614e0350..a7f2f60c066f 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 = [
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 = [
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',
+ },
+ },
];