Refactored default Tiptap toolbar configuration

Removed the `isDefault` property, replaced with property-editor's `defaultData`.

Author: leekelleher

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

@@ -44,7 +44,6 @@ const umbToolbarExtensions: Array<ManifestTiptapToolbarExtension | ManifestTipta
 			alias: 'umbLink',
 			icon: 'icon-link',
 			label: '#defaultdialogs_urlLinkPicker',
-			isDefault: true,
 		},
 	},
 	{
@@ -58,7 +57,6 @@ const umbToolbarExtensions: Array<ManifestTiptapToolbarExtension | ManifestTipta
 			alias: 'umbMedia',
 			icon: 'icon-picture',
 			label: 'Media picker',
-			isDefault: true,
 		},
 	},
 	{

src/packages/rte/tiptap/extensions/tiptap-toolbar-extension.ts

@@ -13,7 +13,6 @@ export interface MetaTiptapToolbarExtension {
 	alias: string;
 	icon: string;
 	label: string;
-	isDefault?: boolean;
 }
 
 export interface ManifestTiptapToolbarExtensionButtonKind<

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

@@ -15,7 +15,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'blockquote',
 			icon: 'icon-blockquote',
 			label: 'Blockquote',
-			isDefault: true,
 		},
 	},
 	{
@@ -29,7 +28,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'bold',
 			icon: 'icon-bold',
 			label: 'Bold',
-			isDefault: true,
 		},
 	},
 	{
@@ -43,7 +41,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'codeBlock',
 			icon: 'icon-code',
 			label: 'Code Block',
-			isDefault: true,
 		},
 	},
 	{
@@ -57,7 +54,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'bulletList',
 			icon: 'icon-bulleted-list',
 			label: 'Bullet List',
-			isDefault: true,
 		},
 	},
 	{
@@ -71,7 +67,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'orderedList',
 			icon: 'icon-ordered-list',
 			label: 'Ordered List',
-			isDefault: true,
 		},
 	},
 	{
@@ -99,7 +94,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'strike',
 			icon: 'icon-strikethrough',
 			label: 'Strike',
-			isDefault: true,
 		},
 	},
 	{
@@ -113,7 +107,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'subscript',
 			icon: 'icon-subscript',
 			label: 'Subscript',
-			isDefault: true,
 		},
 	},
 	{
@@ -127,7 +120,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'superscript',
 			icon: 'icon-superscript',
 			label: 'Superscript',
-			isDefault: true,
 		},
 	},
 	{
@@ -154,7 +146,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'heading1',
 			icon: 'icon-heading-1',
 			label: 'Heading 1',
-			isDefault: true,
 		},
 	},
 	{
@@ -168,7 +159,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'heading2',
 			icon: 'icon-heading-2',
 			label: 'Heading 2',
-			isDefault: true,
 		},
 	},
 	{
@@ -182,7 +172,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'heading3',
 			icon: 'icon-heading-3',
 			label: 'Heading 3',
-			isDefault: true,
 		},
 	},
 	{
@@ -209,7 +198,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'italic',
 			icon: 'icon-italic',
 			label: 'Italic',
-			isDefault: true,
 		},
 	},
 	{
@@ -223,7 +211,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'text-align-center',
 			icon: 'icon-text-align-center',
 			label: 'Text Align Center',
-			isDefault: true,
 		},
 	},
 	{
@@ -250,7 +237,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'text-align-left',
 			icon: 'icon-text-align-left',
 			label: 'Text Align Left',
-			isDefault: true,
 		},
 	},
 	{
@@ -264,7 +250,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'text-align-right',
 			icon: 'icon-text-align-right',
 			label: 'Text Align Right',
-			isDefault: true,
 		},
 	},
 	{
@@ -278,7 +263,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'underline',
 			icon: 'icon-underline',
 			label: 'Underline',
-			isDefault: true,
 		},
 	},
 	{
@@ -307,7 +291,6 @@ export const manifests: Array<ManifestTiptapToolbarExtension | ManifestTiptapToo
 			alias: 'unlink',
 			icon: 'icon-unlink',
 			label: 'Unlink',
-			isDefault: true,
 		},
 	},
 ];

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

@@ -9,48 +9,43 @@ import {
 	type UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
 
-type ExtensionConfig = {
+type UmbTiptapExtensionConfig = {
 	alias: string;
 	label: string;
 	icon?: string;
 	group: string;
 };
 
-type ExtensionGroupItem = {
+type UmbTiptapExtensionGroupItem = {
 	alias: string;
 	label: string;
 	icon?: string;
 	selected: boolean;
 };
 
-type ExtensionGroup = {
+type UmbTiptapExtensionGroup = {
 	group: string;
-	extensions: ExtensionGroupItem[];
+	extensions: UmbTiptapExtensionGroupItem[];
 };
 
-@customElement('umb-property-editor-ui-tiptap-extensions-configuration')
+const elementName = 'umb-property-editor-ui-tiptap-extensions-configuration';
+
+@customElement(elementName)
 export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
 	@property({ attribute: false })
-	set value(value: string[] | undefined) {
-		this.#value = value;
-	}
-	get value(): string[] | undefined {
-		return this.#value;
-	}
-
-	#value?: string[] = [];
+	value?: Array<string> = [];
 
 	@property({ attribute: false })
 	config?: UmbPropertyEditorConfigCollection;
 
 	@state()
-	private _extensionCategories: ExtensionGroup[] = [];
+	private _extensionCategories: UmbTiptapExtensionGroup[] = [];
 
 	@state()
-	private _extensionConfigs: ExtensionConfig[] = [];
+	private _extensionConfigs: UmbTiptapExtensionConfig[] = [];
 
 	protected override async firstUpdated(_changedProperties: PropertyValueMap<unknown>) {
 		super.firstUpdated(_changedProperties);
@@ -69,7 +64,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 
 			if (!this.value) {
 				// The default value is all extensions enabled
-				this.#value = this._extensionConfigs.map((ext) => ext.alias);
+				this.value = this._extensionConfigs.map((ext) => ext.alias);
 				this.dispatchEvent(new UmbPropertyValueChangeEvent());
 			}
 
@@ -88,7 +83,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		const grouped = Object.groupBy(withSelectedProperty, (item: ExtensionConfig) => item.group || 'Uncategorized');
+		const grouped = Object.groupBy(withSelectedProperty, (item: UmbTiptapExtensionConfig) => item.group || 'Uncategorized');
 
 		this._extensionCategories = Object.keys(grouped)
 			.sort((a, b) => a.localeCompare(b))
@@ -98,17 +93,17 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 			}));
 	}
 
-	#onExtensionClick(item: ExtensionGroupItem) {
+	#onExtensionClick(item: UmbTiptapExtensionGroupItem) {
 		item.selected = !item.selected;
 
 		if (!this.value) {
 			this.value = [];
 		}
 
 		if (item.selected) {
-			this.#value = [...this.value, item.alias];
+			this.value = [...this.value, item.alias];
 		} else {
-			this.#value = this.value.filter((alias) => alias !== item.alias);
+			this.value = this.value.filter((alias) => alias !== item.alias);
 		}
 
 		this.requestUpdate('_extensionCategories');
@@ -203,10 +198,10 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 	];
 }
 
-export default UmbPropertyEditorUiTiptapExtensionsConfigurationElement;
+export { UmbPropertyEditorUiTiptapExtensionsConfigurationElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-ui-tiptap-extensions-configuration': UmbPropertyEditorUiTiptapExtensionsConfigurationElement;
+		[elementName]: UmbPropertyEditorUiTiptapExtensionsConfigurationElement;
 	}
 }