yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tiptap RTE: Adds heading (h4-h6) toolbar buttons (#20243)

Browse Source 
* Register more heading icons

* TipTap heading extensions

* Change icon for headings
This commit is contained in:
Bjarne Fyrstenborg
2025-09-24 11:18:58 +02:00
committed by GitHub
parent cacd5c23bd
commit a6c92d8a91
4 changed files with 76 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading4.tiptap-toolbar-api.ts Normal file
View File

@@ -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();
}
}

12
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading5.tiptap-toolbar-api.ts Normal file
View File

@@ -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();
}
}

12
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/heading6.tiptap-toolbar-api.ts Normal file
View File

@@ -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();
}
}

41
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/manifests.ts
View File

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