Renamed "Category" to "Group" in the code

Author: leekelleher

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[] = [];
@@ -93,12 +93,12 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 		this._extensionCategories = Object.keys(grouped)
 			.sort((a, b) => a.localeCompare(b))
 			.map((key) => ({
-				category: key,
+				group: key,
 				extensions: grouped[key],
 			}));
 	}
 
-	#onExtensionClick(item: ExtensionCategoryItem) {
+	#onExtensionClick(item: ExtensionGroupItem) {
 		item.selected = !item.selected;
 
 		if (!this.value) {
@@ -120,11 +120,11 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 			<div class="extensions">
 				${repeat(
 					this._extensionCategories,
-					(category) => html`
-						<div class="category">
-							<p class="category-name">${this.localize.string(category.category)}</p>
+					(group) => html`
+						<div class="group">
+							<p class="group-name">${this.localize.string(group.group)}</p>
 							${repeat(
-								category.extensions,
+								group.extensions,
 								(item) => html`
 									<div class="extension-item">
 										<uui-button
@@ -161,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;
 			}
 		`,
 	];

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

@@ -65,7 +65,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 					alias: ext.alias,
 					label: ext.meta.label,
 					icon: ext.meta.icon,
-					category: '',
 				};
 			});
 
@@ -175,14 +174,16 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	#renderItem(alias: string, rowIndex: number, groupIndex: number, itemIndex: number) {
 		const extension = this._extensions.find((ext) => ext.alias === alias);
 		if (!extension) return nothing;
-		return html`<div
-			title=${extension.label}
-			class="item"
-			draggable="true"
-			@dragend=${this.#onDragEnd}
-			@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
-			<umb-icon name=${extension.icon ?? ''}></umb-icon>
-		</div>`;
+		return html`
+			<div
+				title=${extension.label}
+				class="item"
+				draggable="true"
+				@dragend=${this.#onDragEnd}
+				@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
+				<umb-icon name=${extension.icon ?? ''}></umb-icon>
+			</div>
+		`;
 	}
 
 	#renderGroup(group: string[], rowIndex: number, groupIndex: number) {
@@ -232,21 +233,23 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 
 	#renderExtensions() {
 		// TODO: Can we avoid using a flat here? or is it okay for performance?
-		return html`<div class="extensions" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
-			${repeat(
-				this._extensions.filter((ext) => !this.#value.flat(2).includes(ext.alias)),
-				(extension) => html`
-					<div
-						title=${extension.label}
-						class="item"
-						draggable="true"
-						@dragend=${this.#onDragEnd}
-						@dragstart=${(e: DragEvent) => this.#onDragStart(e, extension.alias)}>
-						<umb-icon name=${extension.icon ?? ''}></umb-icon>
-					</div>
-				`,
-			)}
-		</div>`;
+		return html`
+			<div class="extensions" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
+				${repeat(
+					this._extensions.filter((ext) => !this.#value.flat(2).includes(ext.alias)),
+					(extension) => html`
+						<div
+							title=${extension.label}
+							class="item"
+							draggable="true"
+							@dragend=${this.#onDragEnd}
+							@dragstart=${(e: DragEvent) => this.#onDragStart(e, extension.alias)}>
+							<umb-icon name=${extension.icon ?? ''}></umb-icon>
+						</div>
+					`,
+				)}
+			</div>
+		`;
 	}
 
 	static override styles = [