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