Tiptap RTE: Capabilities Tidy-up (#20078)

leekelleher · web-flow · commit 1b5734d1c8fc · 2025-09-04T15:20:06.000+02:00
* Updates RTE mock data * UFM: Adds fallback for "monospace" font-family * Removes the Font Family/Sizes Menu extension This feature is not ready yet. * Tighten up Tiptap config buttons style * Fixes bug with Collections context-token Unrelated to Tiptap, but causes data-types to throw an error. Bug introduced in PR #20033 * Deprecations for v17
diff --git a/src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts b/src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts
@@ -127,7 +127,7 @@ export {
 	Underline,
 } from '@tiptap/extension-underline';
 
-/** @deprecated No longer used internally. This will be removed in Umbraco 18. [LK] */
+/** @deprecated No longer used internally. This will be removed in Umbraco 17. [LK] */
 export { StarterKit } from '@tiptap/starter-kit';
 
 // CUSTOM EXTENSIONS
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
@@ -1070,17 +1070,35 @@ export const data: Array<UmbMockDataTypeModel> = [
 				alias: 'extensions',
 				value: [
 					'Umb.Tiptap.RichTextEssentials',
+					'Umb.Tiptap.Anchor',
+					'Umb.Tiptap.Block',
+					'Umb.Tiptap.Blockquote',
+					'Umb.Tiptap.Bold',
+					'Umb.Tiptap.BulletList',
+					'Umb.Tiptap.CodeBlock',
 					'Umb.Tiptap.Embed',
 					'Umb.Tiptap.Figure',
+					'Umb.Tiptap.Heading',
+					'Umb.Tiptap.HorizontalRule',
+					'Umb.Tiptap.HtmlAttributeClass',
+					'Umb.Tiptap.HtmlAttributeDataset',
+					'Umb.Tiptap.HtmlAttributeId',
+					'Umb.Tiptap.HtmlAttributeStyle',
+					'Umb.Tiptap.HtmlTagDiv',
+					'Umb.Tiptap.HtmlTagSpan',
 					'Umb.Tiptap.Image',
+					'Umb.Tiptap.Italic',
 					'Umb.Tiptap.Link',
 					'Umb.Tiptap.MediaUpload',
+					'Umb.Tiptap.OrderedList',
+					'Umb.Tiptap.Strike',
 					'Umb.Tiptap.Subscript',
 					'Umb.Tiptap.Superscript',
 					'Umb.Tiptap.Table',
 					'Umb.Tiptap.TextAlign',
 					'Umb.Tiptap.TextDirection',
 					'Umb.Tiptap.TextIndent',
+					'Umb.Tiptap.TrailingNode',
 					'Umb.Tiptap.Underline',
 					'Umb.Tiptap.WordCount',
 				],
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
@@ -968,7 +968,7 @@ export const data: Array<UmbMockDocumentModel> = [
 <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</p>
 
 <p>The following tests the embed plugin:</p>
-<p><div class="umb-embed-holder" data-embed-height="240" data-embed-width="360" data-embed-constrain="false" data-embed-url="https://www.youtube.com/watch?v=QRIWz9SotY4"><iframe width="360" height="240" src="https://www.youtube.com/embed/QRIWz9SotY4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" title="Deep dive into Rich Text Editor"></iframe></div></p>
+<p><span class="umb-embed-holder" data-embed-height="240" data-embed-width="360" data-embed-constrain="false" data-embed-url="https://www.youtube.com/watch?v=QRIWz9SotY4"><iframe width="360" height="240" src="https://www.youtube.com/embed/QRIWz9SotY4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" title="Deep dive into Rich Text Editor"></iframe></span></p>
 
 <p><span id="foo">Some</span> value for the RTE with an <a target="" data-router-slot="disabled" href="https://google.com" type="external">external link</a> and an <a target="" data-router-slot="disabled" href="/{localLink:c05da24d-7740-447b-9cdc-bd8ce2172e38}" type="document">internal link</a>.</p>
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/content/content/collection/content-collection-workspace.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/content/content/collection/content-collection-workspace.context-token.ts
@@ -10,5 +10,5 @@ export const UMB_CONTENT_COLLECTION_WORKSPACE_CONTEXT = new UmbContextToken<
 	'UmbWorkspaceContext',
 	undefined,
 	(context): context is UmbContentCollectionWorkspaceContext<UmbContentTypeModel> =>
-		(context as UmbContentCollectionWorkspaceContext<UmbContentTypeModel>).collection.hasCollection !== undefined,
+		(context as UmbContentCollectionWorkspaceContext<UmbContentTypeModel>).collection?.hasCollection !== undefined,
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/font-family/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/font-family/manifests.ts
@@ -1,14 +1,4 @@
-const UMB_MENU_TIPTAP_FONT_FAMILY_ALIAS = 'Umb.Menu.Tiptap.FontFamily';
-
-const menu: Array<UmbExtensionManifest> = [
-	{
-		type: 'menu',
-		alias: UMB_MENU_TIPTAP_FONT_FAMILY_ALIAS,
-		name: 'Tiptap Font Family Menu',
-	},
-];
-
-const toolbarExtensions: Array<UmbExtensionManifest> = [
+export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'menu',
@@ -23,13 +13,10 @@ const toolbarExtensions: Array<UmbExtensionManifest> = [
 			{ label: 'Cursive', appearance: { style: 'font-family: cursive;' }, data: 'cursive' },
 			{ label: 'Fantasy', appearance: { style: 'font-family: fantasy;' }, data: 'fantasy' },
 		],
-		menu: UMB_MENU_TIPTAP_FONT_FAMILY_ALIAS,
 		meta: {
 			alias: 'umbFontFamily',
 			icon: 'icon-ruler-alt',
 			label: 'Font family',
 		},
 	},
 ];
-
-export const manifests: Array<UmbExtensionManifest> = [...menu, ...toolbarExtensions];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/font-size/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/font-size/manifests.ts
@@ -1,14 +1,4 @@
-const UMB_MENU_TIPTAP_FONT_SIZE_ALIAS = 'Umb.Menu.Tiptap.FontSize';
-
-const menu: Array<UmbExtensionManifest> = [
-	{
-		type: 'menu',
-		alias: UMB_MENU_TIPTAP_FONT_SIZE_ALIAS,
-		name: 'Tiptap Font Size Menu',
-	},
-];
-
-const toolbarExtensions: Array<UmbExtensionManifest> = [
+export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'menu',
@@ -27,13 +17,10 @@ const toolbarExtensions: Array<UmbExtensionManifest> = [
 			{ label: '26pt', data: '26pt' },
 			{ label: '48pt', data: '48pt' },
 		],
-		menu: UMB_MENU_TIPTAP_FONT_SIZE_ALIAS,
 		meta: {
 			alias: 'umbFontSize',
 			icon: 'icon-ruler',
 			label: 'Font size',
 		},
 	},
 ];
-
-export const manifests: Array<UmbExtensionManifest> = [...menu, ...toolbarExtensions];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/property-editor-ui-tiptap-statusbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/property-editor-ui-tiptap-statusbar-configuration.element.ts
@@ -310,6 +310,7 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 					div {
 						display: flex;
 						gap: var(--uui-size-1);
+						align-items: flex-end;
 					}
 				}
 			}
@@ -369,6 +370,7 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 							div {
 								display: flex;
 								gap: var(--uui-size-1);
+								align-items: flex-end;
 							}
 						}
 					}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts
@@ -364,6 +364,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 					div {
 						display: flex;
 						gap: var(--uui-size-1);
+						align-items: flex-end;
 					}
 				}
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts
@@ -153,6 +153,7 @@ export class UmbTiptapToolbarGroupConfigurationElement<
 					div {
 						display: flex;
 						gap: var(--uui-size-1);
+						align-items: flex-end;
 					}
 
 					uui-symbol-expand {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/types.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/types.ts
@@ -3,7 +3,7 @@ import type { UmbBlockRteLayoutModel } from '@umbraco-cms/backoffice/block-rte';
 
 export type * from './extensions/types.js';
 
-// TODO: Rename this type:
+/** @deprecated No longer used internally. This will be removed in Umbraco 17. [LK] */
 export interface UmbPropertyEditorUiValueType {
 	markup: string;
 	blocks: UmbBlockValueType<UmbBlockRteLayoutModel>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
@@ -64,7 +64,7 @@ export class UmbUfmRenderElement extends UmbLitElement {
 			}
 
 			code {
-				font-family: var(--uui-font-monospace);
+				font-family: var(--uui-font-monospace, monospace);
 				white-space: pre-wrap;
 				background-color: var(--uui-color-background);
 				border-radius: var(--uui-border-radius);

Original file line number	Diff line number	Diff line change
`@@ -310,6 +310,7 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement`
`310`	`310`	`div {`
`311`	`311`	`display: flex;`
`312`	`312`	`gap: var(--uui-size-1);`
	`313`	`+ align-items: flex-end;`
`313`	`314`	`}`
`314`	`315`	`}`
`315`	`316`	`}`
`@@ -369,6 +370,7 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement`
`369`	`370`	`div {`
`370`	`371`	`display: flex;`
`371`	`372`	`gap: var(--uui-size-1);`
	`373`	`+ align-items: flex-end;`
`372`	`374`	`}`
`373`	`375`	`}`
`374`	`376`	`}`
Original file line number	Diff line number	Diff line change
`@@ -364,6 +364,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement`
`364`	`364`	`div {`
`365`	`365`	`display: flex;`
`366`	`366`	`gap: var(--uui-size-1);`
	`367`	`+ align-items: flex-end;`
`367`	`368`	`}`
`368`	`369`	`}`
`369`	`370`	`}`
Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,7 @@ export class UmbTiptapToolbarGroupConfigurationElement<`
`153`	`153`	`div {`
`154`	`154`	`display: flex;`
`155`	`155`	`gap: var(--uui-size-1);`
	`156`	`+ align-items: flex-end;`
`156`	`157`	`}`
`157`	`158`
`158`	`159`	`uui-symbol-expand {`