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', + }, + }, ];