Tiptap RTE: Text color/background-color toolbar items

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

@@ -1048,27 +1048,30 @@ export const data: Array<UmbMockDataTypeModel> = [
 							'Umb.Tiptap.Toolbar.SourceEditor',
 							'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.StyleSelect', 'Umb.Tiptap.Toolbar.FontFamily', 'Umb.Tiptap.Toolbar.FontSize'],
+						[
 							'Umb.Tiptap.Toolbar.Bold',
 							'Umb.Tiptap.Toolbar.Italic',
+							'Umb.Tiptap.Toolbar.Underline',
+							'Umb.Tiptap.Toolbar.Strike',
+						],
+						['Umb.Tiptap.Toolbar.TextColorForeground', 'Umb.Tiptap.Toolbar.TextColorBackground'],
+						[
 							'Umb.Tiptap.Toolbar.TextAlignLeft',
 							'Umb.Tiptap.Toolbar.TextAlignCenter',
 							'Umb.Tiptap.Toolbar.TextAlignRight',
-							'Umb.Tiptap.Toolbar.TextDirectionRtl',
-							'Umb.Tiptap.Toolbar.TextDirectionLtr',
+						],
+						['Umb.Tiptap.Toolbar.TextDirectionRtl', 'Umb.Tiptap.Toolbar.TextDirectionLtr'],
+						[
 							'Umb.Tiptap.Toolbar.BulletList',
 							'Umb.Tiptap.Toolbar.OrderedList',
 							'Umb.Tiptap.Toolbar.Blockquote',
-							'Umb.Tiptap.Toolbar.Link',
-							'Umb.Tiptap.Toolbar.Unlink',
 							'Umb.Tiptap.Toolbar.HorizontalRule',
-							'Umb.Tiptap.Toolbar.Table',
-							'Umb.Tiptap.Toolbar.MediaPicker',
-							'Umb.Tiptap.Toolbar.EmbeddedMedia',
 						],
+						['Umb.Tiptap.Toolbar.Link', 'Umb.Tiptap.Toolbar.Unlink'],
+						['Umb.Tiptap.Toolbar.Table', 'Umb.Tiptap.Toolbar.MediaPicker', 'Umb.Tiptap.Toolbar.EmbeddedMedia'],
 					],
 				],
 			},
@@ -1112,18 +1115,28 @@ export const data: Array<UmbMockDataTypeModel> = [
 					'styles',
 					'fontfamily',
 					'fontsize',
+					'forecolor',
+					'backcolor',
+					'blockquote',
+					'removeformat',
 					'bold',
 					'italic',
+					'underline',
+					'strikethrough',
 					'alignleft',
 					'aligncenter',
 					'alignright',
+					'alignjustify',
 					'bullist',
 					'numlist',
 					'outdent',
 					'indent',
 					'link',
 					'unlink',
 					'anchor',
+					'hr',
+					'subscript',
+					'superscript',
 					'charmap',
 					'rtl',
 					'ltr',

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-color-picker-button.element.ts

@@ -0,0 +1,80 @@
+import { UmbTiptapToolbarButtonElement } from '../../components/toolbar/tiptap-toolbar-button.element.js';
+import { css, customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
+
+@customElement('umb-tiptap-toolbar-color-picker-button')
+export class UmbTiptapToolbarColorPickerButtonElement extends UmbTiptapToolbarButtonElement {
+	#onChange(event: UUIColorPickerChangeEvent) {
+		this._selectedColor = event.target.value;
+		this.api?.execute(this.editor, this._selectedColor);
+	}
+
+	@state()
+	private _selectedColor?: string;
+
+	override render() {
+		const label = this.localize.string(this.manifest?.meta.label);
+		return html`
+			<uui-button-group>
+				<uui-button
+					compact
+					label=${label}
+					popovertarget=${!this._selectedColor ? 'color-picker-popover' : ''}
+					title=${label}
+					?disabled=${this.api && this.editor && this.api.isDisabled(this.editor)}
+					@click=${() => this.api?.execute(this.editor, this._selectedColor)}>
+					<div>
+						${when(
+							this.manifest?.meta.icon,
+							(icon) => html`<umb-icon name=${icon}></umb-icon>`,
+							() => html`<span>${label}</span>`,
+						)}
+						<div id="color-selected" style="background-color:${this._selectedColor ?? '#000'};"></div>
+					</div>
+				</uui-button>
+				<uui-button compact popovertarget="color-picker-popover" label="Open color picker">
+					<uui-symbol-expand open></uui-symbol-expand>
+				</uui-button>
+				<uui-popover-container id="color-picker-popover" placement="bottom-end">
+					<umb-popover-layout>
+						<uui-scroll-container>
+							<uui-color-picker inline @change=${this.#onChange}></uui-color-picker>
+						</uui-scroll-container>
+					</umb-popover-layout>
+				</uui-popover-container>
+			</uui-button-group>
+		`;
+	}
+
+	static override readonly styles = [
+		css`
+			uui-button-group:hover {
+				background-color: var(--uui-color-background);
+				border-radius: var(--uui-border-radius);
+			}
+
+			uui-scroll-container {
+				border-radius: var(--uui-border-radius);
+				overflow-x: hidden;
+			}
+
+			umb-icon {
+				height: 1em;
+				width: 1em;
+				margin-bottom: 1px;
+			}
+
+			#color-selected {
+				height: var(--uui-size-1);
+			}
+		`,
+	];
+}
+
+export { UmbTiptapToolbarColorPickerButtonElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tiptap-toolbar-color-picker-button': UmbTiptapToolbarColorPickerButtonElement;
+	}
+}

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

@@ -2,7 +2,6 @@ import { manifests as blockExtensions } from './block/manifests.js';
 import { manifests as styleSelectExtensions } from './style-select/manifests.js';
 import { manifests as tableExtensions } from './table/manifests.js';
 import type { ManifestTiptapExtension } from './tiptap.extension.js';
-import type { ManifestTiptapToolbarExtension } from './tiptap-toolbar.extension.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 const kinds: Array<UmbExtensionManifestKind> = [
@@ -15,6 +14,15 @@ const kinds: Array<UmbExtensionManifestKind> = [
 			element: () => import('../components/toolbar/tiptap-toolbar-button.element.js'),
 		},
 	},
+	{
+		type: 'kind',
+		alias: 'Umb.Kind.TiptapToolbar.ColorPickerButton',
+		matchKind: 'colorPickerButton',
+		matchType: 'tiptapToolbarExtension',
+		manifest: {
+			element: () => import('../components/toolbar/tiptap-toolbar-color-picker-button.element.js'),
+		},
+	},
 ];
 
 const coreExtensions: Array<ManifestTiptapExtension> = [
@@ -146,7 +154,7 @@ const coreExtensions: Array<ManifestTiptapExtension> = [
 	},
 ];
 
-const toolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
+const toolbarExtensions: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',
@@ -272,6 +280,30 @@ const toolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
 			label: 'Text Align Justify',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'colorPickerButton',
+		alias: 'Umb.Tiptap.Toolbar.TextColorBackground',
+		name: 'Text Color Background Tiptap Extension',
+		api: () => import('./toolbar/text-color-background.tiptap-toolbar-api.js'),
+		meta: {
+			alias: 'text-color-background',
+			icon: 'icon-color-bucket',
+			label: 'Background color',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'colorPickerButton',
+		alias: 'Umb.Tiptap.Toolbar.TextColorForeground',
+		name: 'Text Color Foreground Tiptap Extension',
+		api: () => import('./toolbar/text-color-foreground.tiptap-toolbar-api.js'),
+		meta: {
+			alias: 'text-color-foreground',
+			icon: 'icon-colorpicker',
+			label: 'Color',
+		},
+	},
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-toolbar.extension.ts

@@ -23,8 +23,18 @@ export interface ManifestTiptapToolbarExtensionButtonKind<
 	kind: 'button';
 }
 
+export interface ManifestTiptapToolbarExtensionColorPickerButtonKind<
+	MetaType extends MetaTiptapToolbarExtension = MetaTiptapToolbarExtension,
+> extends ManifestTiptapToolbarExtension<MetaType> {
+	type: 'tiptapToolbarExtension';
+	kind: 'colorPickerButton';
+}
+
 declare global {
 	interface UmbExtensionManifestMap {
-		umbTiptapToolbarExtension: ManifestTiptapToolbarExtension | ManifestTiptapToolbarExtensionButtonKind;
+		umbTiptapToolbarExtension:
+			| ManifestTiptapToolbarExtension
+			| ManifestTiptapToolbarExtensionButtonKind
+			| ManifestTiptapToolbarExtensionColorPickerButtonKind
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-color-background.tiptap-toolbar-api.ts

@@ -0,0 +1,8 @@
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarTextColorBackgroundExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override execute(editor?: Editor, selectedColor?: string) {
+		editor?.chain().focus().setSpanStyle(`background-color: ${selectedColor};`).run();
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-color-foreground.tiptap-toolbar-api.ts

@@ -0,0 +1,8 @@
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarTextColorForegroundExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override execute(editor?: Editor, selectedColor?: string) {
+		editor?.chain().focus().setSpanStyle(`color: ${selectedColor};`).run();
+	}
+}

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

@@ -48,7 +48,7 @@ export interface UmbTiptapToolbarElementApi extends UmbApi, UmbTiptapExtensionAr
 	/**
 	 * Executes the toolbar element action.
 	 */
-	execute(editor?: Editor): void;
+	execute(editor?: Editor, ...args: Array<unknown>): void;
 
 	/**
 	 * Checks if the toolbar element is active.