Merge pull request #2371 from umbraco/v15/feature/rte/tiptap/toolbar-manifest-tweaks

Tiptap: Toolbar manifest tweaks

Author: iOvergaard

src/assets/lang/en.ts

@@ -2628,4 +2628,10 @@ export default {
 		wordWrapConfigLabel: 'Word wrap',
 		wordWrapConfigDescription: 'Enable word wrapping in the code editor.',
 	},
+	tiptap: {
+		extGroup_formatting: 'Text formatting',
+		extGroup_interactive: 'Interactive elements',
+		extGroup_media: 'Embeds and media',
+		extGroup_structure: 'Content structure',
+	}
 } as UmbLocalizationDictionary;

src/packages/rte/tiptap/extensions/core/manifests.ts

@@ -11,7 +11,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-blockquote',
 			label: 'Blockquote',
-			group: 'Content Structure',
+			group: '#tiptap_extGroup_structure',
 		},
 	},
 	{
@@ -24,7 +24,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-bold',
 			label: 'Bold',
-			group: 'Text Formatting',
+			group: '#tiptap_extGroup_formatting',
 		},
 	},
 	{
@@ -37,7 +37,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-code',
 			label: 'Code Block',
-			group: 'Content Structure',
+			group: '#tiptap_extGroup_structure',
 		},
 	},
 	{
@@ -49,7 +49,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-embed',
 			label: '#general_embed',
-			group: 'Media and Embeds',
+			group: '#tiptap_extGroup_media',
 		},
 	},
 	{
@@ -61,7 +61,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-link',
 			label: '#defaultdialogs_urlLinkPicker',
-			group: 'Interactive Elements',
+			group: '#tiptap_extGroup_interactive',
 		},
 	},
 	{
@@ -73,7 +73,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-frame',
 			label: 'Figure',
-			group: 'Media and Embeds',
+			group: '#tiptap_extGroup_media',
 		},
 	},
 	{
@@ -86,7 +86,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-horizontal-rule',
 			label: 'Horizontal Rule',
-			group: 'Content Structure',
+			group: '#tiptap_extGroup_structure',
 		},
 	},
 	{
@@ -97,7 +97,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-picture',
 			label: 'Image',
-			group: 'Media and Embeds',
+			group: '#tiptap_extGroup_media',
 		},
 	},
 	{
@@ -110,7 +110,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-italic',
 			label: 'Italic',
-			group: 'Text Formatting',
+			group: '#tiptap_extGroup_formatting',
 		},
 	},
 	{
@@ -123,7 +123,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-strikethrough',
 			label: 'Strike',
-			group: 'Text Formatting',
+			group: '#tiptap_extGroup_formatting',
 		},
 	},
 	{
@@ -162,7 +162,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-table',
 			label: 'Table',
-			group: 'Interactive Elements',
+			group: '#tiptap_extGroup_interactive',
 		},
 	},
 	{
@@ -175,7 +175,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-underline',
 			label: 'Underline',
-			group: 'Text Formatting',
+			group: '#tiptap_extGroup_formatting',
 		},
 	},
 	{
@@ -186,7 +186,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-heading-1',
 			label: 'Heading',
-			group: 'Text Formatting',
+			group: '#tiptap_extGroup_formatting',
 		},
 	},
 	{
@@ -197,7 +197,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-ordered-list',
 			label: 'Ordered List',
-			group: 'Content Structure',
+			group: '#tiptap_extGroup_structure',
 		},
 	},
 	{
@@ -208,7 +208,7 @@ export const manifests: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-text-align-justify',
 			label: 'Text Align',
-			group: 'Content Structure',
+			group: '#tiptap_extGroup_structure',
 		},
 	},
 ];

src/packages/rte/tiptap/extensions/manifests.ts

@@ -85,7 +85,7 @@ const umbExtensions: Array<ManifestTiptapExtension> = [
 		meta: {
 			icon: 'icon-image-up',
 			label: 'Media upload',
-			group: 'Media and Embeds',
+			group: '#tiptap_extGroup_media',
 		},
 	},
 ];

src/packages/rte/tiptap/plugins/manifests.ts

@@ -8,9 +8,9 @@ export const manifests: Array<ManifestTiptapExtension | ManifestTiptapToolbarExt
 		name: 'Block Tiptap Extension',
 		api: () => import('./block.extension.js'),
 		meta: {
-			icon: 'icon-block',
+			icon: 'icon-plugin',
 			label: 'Block',
-			group: 'Interactive Elements',
+			group: '#tiptap_extGroup_interactive',
 		},
 	},
 	{

src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-extensions-configuration.element.ts

@@ -16,16 +16,16 @@ type ExtensionConfig = {
 	group: string;
 };
 
-type ExtensionCategoryItem = {
+type ExtensionGroupItem = {
 	alias: string;
 	label: string;
 	icon?: string;
 	selected: boolean;
 };
 
-type ExtensionCategory = {
-	category: string;
-	extensions: ExtensionCategoryItem[];
+type ExtensionGroup = {
+	group: string;
+	extensions: ExtensionGroupItem[];
 };
 
 @customElement('umb-property-editor-ui-tiptap-extensions-configuration')
@@ -47,7 +47,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 	config?: UmbPropertyEditorConfigCollection;
 
 	@state()
-	private _extensionCategories: ExtensionCategory[] = [];
+	private _extensionCategories: ExtensionGroup[] = [];
 
 	@state()
 	private _extensionConfigs: ExtensionConfig[] = [];
@@ -56,14 +56,16 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 		super.firstUpdated(_changedProperties);
 
 		this.observe(umbExtensionsRegistry.byType('tiptapExtension'), (extensions) => {
-			this._extensionConfigs = extensions.map((ext) => {
-				return {
-					alias: ext.alias,
-					label: ext.meta.label,
-					icon: ext.meta.icon,
-					group: ext.meta.group,
-				};
-			});
+			this._extensionConfigs = extensions
+				.sort((a, b) => a.alias.localeCompare(b.alias))
+				.map((ext) => {
+					return {
+						alias: ext.alias,
+						label: ext.meta.label,
+						icon: ext.meta.icon,
+						group: ext.meta.group,
+					};
+				});
 
 			if (!this.value) {
 				// The default value is all extensions enabled
@@ -84,21 +86,19 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 			};
 		});
 
-		const grouped = withSelectedProperty.reduce((acc: any, item) => {
-			const group = item.group || 'Uncategorized'; // Assign to "Uncategorized" if no group
-			if (!acc[group]) {
-				acc[group] = [];
-			}
-			acc[group].push(item);
-			return acc;
-		}, {});
-		this._extensionCategories = Object.keys(grouped).map((group) => ({
-			category: group.charAt(0).toUpperCase() + group.slice(1).replace(/-/g, ' '),
-			extensions: grouped[group],
-		}));
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		const grouped = Object.groupBy(withSelectedProperty, (item: ExtensionConfig) => item.group || 'Uncategorized');
+
+		this._extensionCategories = Object.keys(grouped)
+			.sort((a, b) => a.localeCompare(b))
+			.map((key) => ({
+				group: key,
+				extensions: grouped[key],
+			}));
 	}
 
-	#onExtensionClick(item: ExtensionCategoryItem) {
+	#onExtensionClick(item: ExtensionGroupItem) {
 		item.selected = !item.selected;
 
 		if (!this.value) {
@@ -120,29 +120,34 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 			<div class="extensions">
 				${repeat(
 					this._extensionCategories,
-					(category) => html`
-						<div class="category">
-							<p class="category-name">${category.category}</p>
+					(group) => html`
+						<div class="group">
+							<p class="group-name">${this.localize.string(group.group)}</p>
 							${repeat(
-								category.extensions,
-								(item) =>
-									html`<div class="extension-item">
+								group.extensions,
+								(item) => html`
+									<div class="extension-item">
 										<uui-button
 											compact
-											look="outline"
 											class=${item.selected ? 'selected' : ''}
-											label=${item.label}
+											label=${this.localize.string(item.label)}
+											look="outline"
 											.value=${item.alias}
-											@click=${() => this.#onExtensionClick(item)}
-											><umb-icon name=${item.icon ?? ''}></umb-icon
-										></uui-button>
-										<span>${item.label}</span>
-									</div>`,
+											@click=${() => this.#onExtensionClick(item)}>
+											<umb-icon name=${item.icon ?? ''}></umb-icon>
+										</uui-button>
+										<uui-button
+											compact
+											label=${this.localize.string(item.label)}
+											look="default"
+											style="--uui-button-content-align:left;"
+											@click=${() => this.#onExtensionClick(item)}></uui-button>
+									</div>
+								`,
 							)}
 						</div>
 					`,
 				)}
-					</div>
 			</div>
 		`;
 	}
@@ -156,38 +161,43 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 				display: flex;
 				vertical-align: unset;
 			}
+
 			uui-button.selected {
 				--uui-button-border-color: var(--uui-color-selected);
 				--uui-button-border-width: 2px;
 			}
+
 			.extensions {
 				display: flex;
 				flex-wrap: wrap;
 				gap: 16px;
 				margin-top: 16px;
 			}
+
 			.extension-item {
 				display: grid;
 				grid-template-columns: 36px 1fr;
 				grid-template-rows: 1fr;
 				align-items: center;
 				gap: 9px;
 			}
-			.category {
+
+			.group {
 				flex: 1;
-				background-color: var(--uui-color-surface-alt);
-				padding: 12px;
-				border-radius: 6px;
 				display: flex;
 				flex-direction: column;
 				gap: 6px;
+				padding: 12px;
+				background-color: var(--uui-color-surface-alt);
 				border: 1px solid var(--uui-color-border);
+				border-radius: 6px;
 			}
-			.category-name {
+
+			.group-name {
 				grid-column: 1 / -1;
-				margin: 0;
-				font-weight: bold;
 				display: flex;
+				font-weight: bold;
+				margin: 0;
 			}
 		`,
 	];