diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts index 9103803b11..4308cf874a 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts @@ -1049,6 +1049,7 @@ export const data: Array = [ 'Umb.Tiptap.Toolbar.Redo', 'Umb.Tiptap.Toolbar.StyleSelect', 'Umb.Tiptap.Toolbar.FontFamily', + 'Umb.Tiptap.Toolbar.FontSize', 'Umb.Tiptap.Toolbar.Bold', 'Umb.Tiptap.Toolbar.Italic', 'Umb.Tiptap.Toolbar.TextAlignLeft', diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts index 3481077c1f..5f0c360227 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts @@ -473,6 +473,17 @@ const toolbarExtensions: Array = [ label: 'Font family', }, }, + { + type: 'tiptapToolbarExtension', + alias: 'Umb.Tiptap.Toolbar.FontSize', + name: 'Font Size Tiptap Extension', + element: () => import('./toolbar/font-size-tiptap-toolbar.element.js'), + meta: { + alias: 'umbFontSize', + icon: 'icon-palette', + label: 'Font size', + }, + }, ]; const extensions = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-size-tiptap-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-size-tiptap-toolbar.element.ts new file mode 100644 index 0000000000..8fc96a23c0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-size-tiptap-toolbar.element.ts @@ -0,0 +1,54 @@ +import { UmbTiptapToolbarButtonElement } from '../../components/toolbar/tiptap-toolbar-button.element.js'; +import type { UmbCascadingMenuItem } from '../../components/cascading-menu-popover/cascading-menu-popover.element.js'; +import { css, customElement, html, ifDefined } from '@umbraco-cms/backoffice/external/lit'; + +import '../../components/cascading-menu-popover/cascading-menu-popover.element.js'; + +@customElement('umb-tiptap-font-size-toolbar-element') +export class UmbTiptapToolbarFontSizeToolbarElement extends UmbTiptapToolbarButtonElement { + #fontSizes = [8, 10, 12, 14, 16, 18, 24, 36, 48]; + + #menu: Array = this.#fontSizes.map((fontSize) => ({ + unique: `font-size-${fontSize}pt`, + label: `${fontSize}pt`, + execute: () => + this.editor + ?.chain() + .focus() + .setMark('textStyle', { style: `font-size: ${fontSize}pt;` }) + .run(), + })); + + override render() { + const label = this.localize.string(this.manifest?.meta.label); + return html` + + ${label} + + + + + `; + } + + static override readonly styles = [ + css` + :host { + --uui-button-font-weight: normal; + --uui-menu-item-flat-structure: 1; + } + + uui-button > uui-symbol-expand { + margin-left: var(--uui-size-space-4); + } + `, + ]; +} + +export { UmbTiptapToolbarFontSizeToolbarElement as element }; + +declare global { + interface HTMLElementTagNameMap { + 'umb-tiptap-font-size-toolbar-element': UmbTiptapToolbarFontSizeToolbarElement; + } +}