From d91a7e2a1123383fca7319c1dcadca93133940a2 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 23 Sep 2025 22:40:10 +0200 Subject: [PATCH 1/3] Register more heading icons --- .../packages/core/icon-registry/icon-dictionary.json | 12 ++++++++++++ .../src/packages/core/icon-registry/icons.ts | 9 +++++++++ .../core/icon-registry/icons/icon-heading-5.ts | 1 + .../core/icon-registry/icons/icon-heading-6.ts | 1 + .../core/icon-registry/icons/icon-heading.ts | 1 + 5 files changed, 24 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-5.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading-6.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-heading.ts 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 From 11b18808a6cdf056bacad1329d7c8524c5ecc4ba Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 24 Sep 2025 00:00:38 +0200 Subject: [PATCH 2/3] TipTap heading extensions --- .../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 | 39 +++++++++++++++++++ 4 files changed, 75 insertions(+) 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 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..1044f10dc873 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 @@ -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', + }, + }, ]; From 00b411198c070c5e092decdc59e2881293d8a436 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 24 Sep 2025 00:04:10 +0200 Subject: [PATCH 3/3] Change icon for headings --- .../src/packages/tiptap/extensions/heading/manifests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1044f10dc873..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', },