Tiptap RTE: Font Family / Font Size toolbar items

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-html-global-attributes.extension.ts

@@ -1,4 +1,5 @@
 import { Extension } from '@tiptap/core';
+import type { Attributes } from '@tiptap/core';
 
 /**
  * Converts camelCase to kebab-case.
@@ -44,8 +45,10 @@ export const HtmlGlobalAttributes = Extension.create<HtmlGlobalAttributesOptions
 						},
 					},
 					id: {},
-					style: {},
-				},
+					style: {
+						parseHTML: (element) => (element.style.length ? element.style.cssText : null),
+					},
+				} as Attributes,
 			},
 		];
 	},

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-span.extension.ts

@@ -1,32 +1,68 @@
-import { Node, mergeAttributes } from '@tiptap/core';
+import { Mark, mergeAttributes } from '@tiptap/core';
 
 export interface SpanOptions {
 	/**
-	 * HTML attributes to add to the element.
+	 * HTML attributes to add to the span element.
 	 * @default {}
 	 * @example { class: 'foo' }
 	 */
 	HTMLAttributes: Record<string, any>;
 }
 
-export const Span = Node.create<SpanOptions>({
+export const Span = Mark.create<SpanOptions>({
 	name: 'span',
 
-	group: 'inline',
-
-	inline: true,
-
-	content: 'inline*',
-
 	addOptions() {
 		return { HTMLAttributes: {} };
 	},
 
 	parseHTML() {
-		return [{ tag: 'span' }];
+		return [{ tag: this.name }];
 	},
 
 	renderHTML({ HTMLAttributes }) {
-		return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+		return [this.name, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+	},
+
+	addCommands() {
+		return {
+			setSpanStyle:
+				(styles) =>
+				({ commands, editor, chain }) => {
+					if (!styles) return false;
+
+					const existing = editor.getAttributes(this.name)?.style as string;
+
+					if (!existing && !editor.isActive(this.name)) {
+						return commands.setMark(this.name, { style: styles });
+					}
+
+					const rules = ((existing ?? '') + ';' + styles).split(';');
+					const items: Record<string, string> = {};
+
+					rules
+						.filter((x) => x)
+						.forEach((rule) => {
+							if (rule.trim() !== '') {
+								const [key, value] = rule.split(':');
+								items[key.trim()] = value.trim();
+							}
+						});
+
+					const style = Object.entries(items)
+						.map(([key, value]) => `${key}: ${value}`)
+						.join(';');
+
+					return commands.updateAttributes(this.name, { style });
+				},
+		};
 	},
 });
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		span: {
+			setSpanStyle: (styles?: string) => ReturnType;
+		};
+	}
+}

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -1048,6 +1048,9 @@ export const data: Array<UmbMockDataTypeModel> = [
 							'Umb.Tiptap.Toolbar.Undo',
 							'Umb.Tiptap.Toolbar.Redo',
 							'Umb.Tiptap.Toolbar.StyleSelect',
+							'Umb.Tiptap.Toolbar.FontFamily',
+							'Umb.Tiptap.Toolbar.FontSize',
+							'Umb.Tiptap.Toolbar.ClearFormatting',
 							'Umb.Tiptap.Toolbar.Bold',
 							'Umb.Tiptap.Toolbar.Italic',
 							'Umb.Tiptap.Toolbar.TextAlignLeft',
@@ -1104,6 +1107,8 @@ export const data: Array<UmbMockDataTypeModel> = [
 					'undo',
 					'redo',
 					'styles',
+					'fontfamily',
+					'fontsize',
 					'bold',
 					'italic',
 					'alignleft',
@@ -1116,6 +1121,9 @@ export const data: Array<UmbMockDataTypeModel> = [
 					'link',
 					'unlink',
 					'anchor',
+					'charmap',
+					'rtl',
+					'ltr',
 					'table',
 					'umbmediapicker',
 					'umbembeddialog',

src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts

@@ -912,23 +912,31 @@ export const data: Array<UmbMockDocumentModel> = [
 					blocks: undefined,
 					markup: `
 						<p>
-							Some value for the RTE with an <a href="https://google.com">external link</a> and an <a type="document" href="/{localLink:c05da24d-7740-447b-9cdc-bd8ce2172e38}">internal link</a> foo foo
+							<span id="foo">Some</span> value for the RTE with an <a href="https://google.com">external link</a> and an <a type="document" href="/{localLink:c05da24d-7740-447b-9cdc-bd8ce2172e38}">internal link</a>.
 						</p>
+						<div data-foo-bar="123">
+							<span>This is a plain old span tag.</span>
+							<span style="color:red;">Hello <span style="color:blue;">world</span>.</span>
+						</div>
 						<table style="width: 100%;">
 							<thead>
 								<tr>
-									<th>Name</th>
-									<th>Alias</th>
+									<th>Version</th>
+									<th>Date</th>
 								</tr>
 							</thead>
 							<tbody>
 								<tr>
-									<td>Lee</td>
-									<td>lke</td>
+									<td>15.3</td>
+									<td>2025-03-20</td>
+								</tr>
+								<tr>
+									<td>16.0</td>
+									<td>2025-06-12</td>
 								</tr>
 								<tr>
-									<td>Jacob</td>
-									<td>jov</td>
+									<td>17.0</td>
+									<td>2025-11-27</td>
 								</tr>
 							</tbody>
 						</table>

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts

@@ -116,6 +116,7 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 
 			.group {
 				display: inline-flex;
+				flex-wrap: wrap;
 				align-items: stretch;
 
 				&:not(:last-child)::after {

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/rich-text-essentials.tiptap-api.ts

@@ -1,13 +1,6 @@
 import { UmbTiptapExtensionApiBase } from '../base.js';
 import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
-import {
-	Div,
-	HtmlGlobalAttributes,
-	Placeholder,
-	Span,
-	StarterKit,
-	TextStyle,
-} from '@umbraco-cms/backoffice/external/tiptap';
+import { Div, HtmlGlobalAttributes, Placeholder, Span, StarterKit } from '@umbraco-cms/backoffice/external/tiptap';
 
 export class UmbTiptapRichTextEssentialsExtensionApi extends UmbTiptapExtensionApiBase {
 	#localize = new UmbLocalizationController(this);
@@ -21,7 +14,8 @@ export class UmbTiptapRichTextEssentialsExtensionApi extends UmbTiptapExtensionA
 				);
 			},
 		}),
-		TextStyle,
+		Div,
+		Span,
 		HtmlGlobalAttributes.configure({
 			types: [
 				'bold',
@@ -46,13 +40,10 @@ export class UmbTiptapRichTextEssentialsExtensionApi extends UmbTiptapExtensionA
 				'tableHeader',
 				'tableRow',
 				'tableCell',
-				'textStyle',
 				'underline',
 				'umbLink',
 			],
 		}),
-		Div,
-		Span,
 	];
 }
 

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts

@@ -462,6 +462,28 @@ const toolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
 			label: '#general_embed',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		alias: 'Umb.Tiptap.Toolbar.FontFamily',
+		name: 'Font Family Tiptap Extension',
+		element: () => import('./toolbar/font-family-tiptap-toolbar.element.js'),
+		meta: {
+			alias: 'umbFontFamily',
+			icon: 'icon-ruler-alt',
+			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-ruler',
+			label: 'Font size',
+		},
+	},
 ];
 
 const extensions = [

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/style-select-tiptap-toolbar.element.ts

@@ -75,6 +75,8 @@ export class UmbTiptapToolbarStyleSelectToolbarElement extends UmbLitElement {
 		css`
 			:host {
 				--uui-button-font-weight: normal;
+
+				margin-inline-start: var(--uui-size-space-1);
 			}
 
 			uui-button > uui-symbol-expand {

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-family-tiptap-toolbar.element.ts

@@ -0,0 +1,88 @@
+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-family-toolbar-element')
+export class UmbTiptapToolbarFontFamilyToolbarElement extends UmbTiptapToolbarButtonElement {
+	#menu: Array<UmbCascadingMenuItem> = [
+		{
+			unique: 'font-family-sans-serif',
+			label: 'Sans serif',
+			element: this.#getElement('sans-serif', 'Sans serif'),
+		},
+		{
+			unique: 'font-family-serif',
+			label: 'Serif',
+			element: this.#getElement('serif', 'Serif'),
+		},
+		{
+			unique: 'font-family-monospace',
+			label: 'Monospace',
+			element: this.#getElement('monospace', 'Monospace'),
+		},
+		{
+			unique: 'font-family-cursive',
+			label: 'Cursive',
+			element: this.#getElement('cursive', 'Cursive'),
+		},
+		{
+			unique: 'font-family-fantasy',
+			label: 'Fantasy',
+			element: this.#getElement('fantasy', 'Fantasy'),
+		},
+	];
+
+	#getElement(fontFamily: string, label: string) {
+		const menuItem = document.createElement('uui-menu-item');
+		menuItem.addEventListener('click', () => {
+			//this.editor?.chain().focus().setMark('textStyle', { fontFamily }).run();
+			this.editor?.chain().focus().setSpanStyle(`font-family: ${fontFamily};`).run();
+		});
+
+		const element = document.createElement('span');
+		element.slot = 'label';
+		element.textContent = label;
+		element.style.fontFamily = fontFamily;
+
+		menuItem.appendChild(element);
+
+		return menuItem;
+	}
+
+	override render() {
+		const label = this.localize.string(this.manifest?.meta.label);
+		return html`
+			<uui-button compact look="secondary" label=${ifDefined(label)} popovertarget="font-family">
+				<span>${label}</span>
+				<uui-symbol-expand slot="extra" open></uui-symbol-expand>
+			</uui-button>
+			<umb-cascading-menu-popover id="font-family" placement="bottom-start" .items=${this.#menu}>
+			</umb-cascading-menu-popover>
+		`;
+	}
+
+	static override readonly styles = [
+		css`
+			:host {
+				--uui-button-font-weight: normal;
+				--uui-menu-item-flat-structure: 1;
+
+				margin-inline-start: var(--uui-size-space-1);
+			}
+
+			uui-button > uui-symbol-expand {
+				margin-left: var(--uui-size-space-4);
+			}
+		`,
+	];
+}
+
+export { UmbTiptapToolbarFontFamilyToolbarElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tiptap-font-family-toolbar-element': UmbTiptapToolbarFontFamilyToolbarElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-size-tiptap-toolbar.element.ts

@@ -0,0 +1,52 @@
+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].map((fontSize) => `${fontSize}pt`);
+
+	#menu: Array<UmbCascadingMenuItem> = this.#fontSizes.map((fontSize) => ({
+		unique: `font-size-${fontSize}`,
+		label: fontSize,
+		// execute: () => this.editor?.chain().focus().setMark('textStyle', { fontSize }).run(),
+		execute: () => this.editor?.chain().focus().setSpanStyle(`font-size: ${fontSize};`).run(),
+	}));
+
+	override render() {
+		const label = this.localize.string(this.manifest?.meta.label);
+		return html`
+			<uui-button compact look="secondary" label=${ifDefined(label)} popovertarget="font-size">
+				<span>${label}</span>
+				<uui-symbol-expand slot="extra" open></uui-symbol-expand>
+			</uui-button>
+			<umb-cascading-menu-popover id="font-size" placement="bottom-start" .items=${this.#menu}>
+			</umb-cascading-menu-popover>
+		`;
+	}
+
+	static override readonly styles = [
+		css`
+			:host {
+				--uui-button-font-weight: normal;
+				--uui-menu-item-flat-structure: 1;
+
+				margin-inline-start: var(--uui-size-space-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;
+	}
+}