Feature: Clipboard

src/Umbraco.Web.UI.Client/package.json

@@ -25,6 +25,7 @@
 		"./block-rte": "./dist-cms/packages/block/block-rte/index.js",
 		"./block-type": "./dist-cms/packages/block/block-type/index.js",
 		"./block": "./dist-cms/packages/block/block/index.js",
+		"./clipboard": "./dist-cms/packages/clipboard/index.js",
 		"./code-editor": "./dist-cms/packages/code-editor/index.js",
 		"./collection": "./dist-cms/packages/core/collection/index.js",
 		"./components": "./dist-cms/packages/core/components/index.js",

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -13,6 +13,7 @@ import './components/index.js';
 
 const CORE_PACKAGES = [
 	import('../../packages/block/umbraco-package.js'),
+	import('../../packages/clipboard/umbraco-package.js'),
 	import('../../packages/code-editor/umbraco-package.js'),
 	import('../../packages/data-type/umbraco-package.js'),
 	import('../../packages/dictionary/umbraco-package.js'),

src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.ts

@@ -163,6 +163,11 @@ export class UmbExtensionRegistry<
 		return !this.#exclusions.includes(ext.alias);
 	};
 
+	/**
+	 * Register an extension.
+	 * @param {(ManifestTypes | ManifestKind<ManifestTypes>)} manifest - The extension to register.
+	 * @memberof UmbExtensionRegistry
+	 */
 	register(manifest: ManifestTypes | ManifestKind<ManifestTypes>): void {
 		const isValid = this.#validateExtension(manifest);
 		if (!isValid) {
@@ -185,19 +190,39 @@ export class UmbExtensionRegistry<
 		]);
 	}
 
+	/**
+	 * Get all registered extensions.
+	 * @returns {Array<ManifestTypes>} - All registered extensions.
+	 * @memberof UmbExtensionRegistry
+	 */
 	getAllExtensions(): Array<ManifestTypes> {
 		return this._extensions.getValue();
 	}
 
+	/**
+	 * Register many extensions.
+	 * @param {(Array<ManifestTypes | ManifestKind<ManifestTypes>>)} manifests - The extensions to register.
+	 * @memberof UmbExtensionRegistry
+	 */
 	registerMany(manifests: Array<ManifestTypes | ManifestKind<ManifestTypes>>): void {
 		// we have to register extensions individually, so we ensure a manifest is valid before continuing to the next one
 		manifests.forEach((manifest) => this.register(manifest));
 	}
 
+	/**
+	 * Unregister many extensions with the given aliases.
+	 * @param {Array<string>} aliases - The aliases of the extensions to unregister.
+	 * @memberof UmbExtensionRegistry
+	 */
 	unregisterMany(aliases: Array<string>): void {
 		aliases.forEach((alias) => this.unregister(alias));
 	}
 
+	/**
+	 * Unregister an extension with the given alias.
+	 * @param {string} alias - The alias of the extension to unregister.
+	 * @memberof UmbExtensionRegistry
+	 */
 	unregister(alias: string): void {
 		const newKindsValues = this._kinds.getValue().filter((kind) => kind.alias !== alias);
 		const newExtensionsValues = this._extensions.getValue().filter((extension) => extension.alias !== alias);
@@ -206,6 +231,12 @@ export class UmbExtensionRegistry<
 		this._extensions.setValue(newExtensionsValues);
 	}
 
+	/**
+	 * Check if an extension with the given alias is registered.
+	 * @param {string} alias - The alias of the extension to check.
+	 * @returns {boolean} - true if an extension with the given alias is registered.
+	 * @memberof UmbExtensionRegistry
+	 */
 	isRegistered(alias: string): boolean {
 		if (this._extensions.getValue().find((ext) => ext.alias === alias)) {
 			return true;
@@ -218,6 +249,15 @@ export class UmbExtensionRegistry<
 		return false;
 	}
 
+	/**
+	 * Clears all extensions and kinds from the registry.
+	 * @memberof UmbExtensionRegistry
+	 */
+	clear(): void {
+		this._extensions.setValue([]);
+		this._kinds.setValue([]);
+	}
+
 	#validateExtension(manifest: ManifestTypes | ManifestKind<ManifestTypes>): boolean {
 		if (!manifest.type) {
 			console.error(`Extension is missing type`, manifest);

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/copy/block-grid-to-block-copy-translator.test.ts

@@ -0,0 +1,85 @@
+import { expect } from '@open-wc/testing';
+import { customElement } from 'lit/decorators.js';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../property-editors/constants.js';
+import { UmbBlockGridToBlockClipboardCopyPropertyValueTranslator } from './block-grid-to-block-copy-translator.js';
+import type { UmbBlockGridValueModel } from '../../../types.js';
+import type { UmbBlockClipboardEntryValueModel } from '@umbraco-cms/backoffice/block';
+
+@customElement('test-controller-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+
+describe('UmbBlockListToBlockClipboardCopyPropertyValueTranslator', () => {
+	let hostElement: UmbTestControllerHostElement;
+	let copyTranslator: UmbBlockGridToBlockClipboardCopyPropertyValueTranslator;
+
+	const blockGridPropertyValue: UmbBlockGridValueModel = {
+		contentData: [
+			{
+				key: 'contentKey',
+				contentTypeKey: 'contentTypeKey',
+				values: [
+					{
+						culture: null,
+						segment: null,
+						alias: 'headline',
+						editorAlias: 'Umbraco.TextBox',
+						value: 'Headline value',
+					},
+				],
+			},
+		],
+		layout: {
+			[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
+				{
+					columnSpan: 12,
+					rowSpan: 1,
+					areas: [],
+					contentKey: 'contentKey',
+					settingsKey: null,
+				},
+			],
+		},
+		settingsData: [],
+		expose: [
+			{
+				contentKey: 'contentKey',
+				culture: null,
+				segment: null,
+			},
+		],
+	};
+
+	const blockClipboardEntryValue: UmbBlockClipboardEntryValueModel = {
+		contentData: blockGridPropertyValue.contentData,
+		layout: [
+			{
+				contentKey: 'contentKey',
+				settingsKey: null,
+			},
+		],
+		settingsData: blockGridPropertyValue.settingsData,
+	};
+
+	beforeEach(async () => {
+		hostElement = new UmbTestControllerHostElement();
+		copyTranslator = new UmbBlockGridToBlockClipboardCopyPropertyValueTranslator(hostElement);
+		document.body.innerHTML = '';
+		document.body.appendChild(hostElement);
+	});
+
+	describe('Public API', () => {
+		describe('methods', () => {
+			it('has a translate method', () => {
+				expect(copyTranslator).to.have.property('translate').that.is.a('function');
+			});
+		});
+	});
+
+	describe('translate', () => {
+		it('returns the block clipboard entry value', async () => {
+			const result = await copyTranslator.translate(blockGridPropertyValue);
+			expect(result).to.deep.equal(blockClipboardEntryValue);
+		});
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/copy/block-grid-to-block-copy-translator.ts

@@ -0,0 +1,56 @@
+import type { UmbBlockGridValueModel } from '../../../types.js';
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../property-editors/constants.js';
+import type { UmbGridBlockClipboardEntryValueModel } from '../../types.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbClipboardCopyPropertyValueTranslator } from '@umbraco-cms/backoffice/clipboard';
+import type { UmbBlockClipboardEntryValueModel } from '@umbraco-cms/backoffice/block';
+
+export class UmbBlockGridToBlockClipboardCopyPropertyValueTranslator
+	extends UmbControllerBase
+	implements UmbClipboardCopyPropertyValueTranslator<UmbBlockGridValueModel, UmbBlockClipboardEntryValueModel>
+{
+	/**
+	 * Translates a Block Grid property value to a Block clipboard entry value.
+	 * @param {UmbBlockGridValueModel} propertyValue - The Block Grid property value.
+	 * @returns {Promise<UmbBlockClipboardEntryValueModel>} - The Block clipboard entry value.
+	 * @memberof UmbBlockGridToBlockClipboardCopyPropertyValueTranslator
+	 */
+	async translate(propertyValue: UmbBlockGridValueModel): Promise<UmbBlockClipboardEntryValueModel> {
+		if (!propertyValue) {
+			throw new Error('Property value is missing.');
+		}
+
+		return this.#constructBlockValue(propertyValue);
+	}
+
+	#constructGridBlockValue(propertyValue: UmbBlockGridValueModel): UmbGridBlockClipboardEntryValueModel {
+		const valueClone = structuredClone(propertyValue);
+
+		const gridBlockValue: UmbGridBlockClipboardEntryValueModel = {
+			contentData: valueClone.contentData,
+			layout: valueClone.layout?.[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS] ?? undefined,
+			settingsData: valueClone.settingsData,
+		};
+
+		return gridBlockValue;
+	}
+
+	#constructBlockValue(propertyValue: UmbBlockGridValueModel): UmbBlockClipboardEntryValueModel {
+		const gridBlockValue = this.#constructGridBlockValue(propertyValue);
+
+		const layout: UmbBlockClipboardEntryValueModel['layout'] = gridBlockValue.layout?.map((gridLayout) => {
+			return {
+				contentKey: gridLayout.contentKey,
+				settingsKey: gridLayout.settingsKey,
+			};
+		});
+
+		return {
+			contentData: gridBlockValue.contentData,
+			layout: layout,
+			settingsData: gridBlockValue.settingsData,
+		};
+	}
+}
+
+export { UmbBlockGridToBlockClipboardCopyPropertyValueTranslator as api };

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/manifests.ts

@@ -0,0 +1,22 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../../property-editors/constants.js';
+import { UMB_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE } from '@umbraco-cms/backoffice/block';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'clipboardCopyPropertyValueTranslator',
+		alias: 'Umb.ClipboardCopyPropertyValueTranslator.BlockGridToBlock',
+		name: 'Block Grid to Block Clipboard Copy Property Value Translator',
+		api: () => import('./copy/block-grid-to-block-copy-translator.js'),
+		fromPropertyEditorUi: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
+		toClipboardEntryValueType: UMB_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE,
+	},
+	{
+		type: 'clipboardPastePropertyValueTranslator',
+		alias: 'Umb.ClipboardPastePropertyValueTranslator.BlockToBlockGrid',
+		name: 'Block To Block Grid Clipboard Paste Property Value Translator',
+		weight: 900,
+		api: () => import('./paste/block-to-block-grid-paste-translator.js'),
+		fromClipboardEntryValueType: UMB_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE,
+		toPropertyEditorUi: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/paste/block-to-block-grid-paste-translator.test.ts

@@ -0,0 +1,113 @@
+import { expect } from '@open-wc/testing';
+import { customElement } from 'lit/decorators.js';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../property-editors/constants.js';
+import type { UmbBlockGridValueModel } from '../../../types.js';
+import { UmbBlockToBlockGridClipboardPastePropertyValueTranslator } from './block-to-block-grid-paste-translator.js';
+import type { UmbBlockClipboardEntryValueModel } from '@umbraco-cms/backoffice/block';
+
+@customElement('test-controller-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+
+describe('UmbBlockToBlockGridClipboardPastePropertyValueTranslator', () => {
+	let hostElement: UmbTestControllerHostElement;
+	let copyTranslator: UmbBlockToBlockGridClipboardPastePropertyValueTranslator;
+
+	const blockGridPropertyValue: UmbBlockGridValueModel = {
+		contentData: [
+			{
+				key: 'contentKey',
+				contentTypeKey: 'contentTypeKey',
+				values: [
+					{
+						culture: null,
+						segment: null,
+						alias: 'headline',
+						editorAlias: 'Umbraco.TextBox',
+						value: 'Headline value',
+					},
+				],
+			},
+		],
+		layout: {
+			[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
+				{
+					columnSpan: 12,
+					rowSpan: 1,
+					areas: [],
+					contentKey: 'contentKey',
+					settingsKey: null,
+				},
+			],
+		},
+		settingsData: [],
+		expose: [],
+	};
+
+	const blockClipboardEntryValue: UmbBlockClipboardEntryValueModel = {
+		contentData: blockGridPropertyValue.contentData,
+		layout: [
+			{
+				contentKey: 'contentKey',
+				settingsKey: null,
+			},
+		],
+		settingsData: blockGridPropertyValue.settingsData,
+	};
+
+	const config1: Array<{ alias: string; value: [{ contentElementTypeKey: string }] }> = [
+		{
+			alias: 'blocks',
+			value: [
+				{
+					contentElementTypeKey: 'contentTypeKey',
+				},
+			],
+		},
+	];
+
+	const config2: Array<{ alias: string; value: [{ contentElementTypeKey: string }] }> = [
+		{
+			alias: 'blocks',
+			value: [
+				{
+					contentElementTypeKey: 'contentTypeKey2',
+				},
+			],
+		},
+	];
+
+	beforeEach(async () => {
+		hostElement = new UmbTestControllerHostElement();
+		copyTranslator = new UmbBlockToBlockGridClipboardPastePropertyValueTranslator(hostElement);
+		document.body.innerHTML = '';
+		document.body.appendChild(hostElement);
+	});
+
+	describe('Public API', () => {
+		describe('methods', () => {
+			it('has a translate method', () => {
+				expect(copyTranslator).to.have.property('translate').that.is.a('function');
+			});
+		});
+	});
+
+	describe('translate', () => {
+		it('returns the block grid property value', async () => {
+			const result = await copyTranslator.translate(blockClipboardEntryValue);
+			expect(result).to.deep.equal(blockGridPropertyValue);
+		});
+	});
+
+	describe('isCompatibleValue', () => {
+		it('returns true if the value is compatible', async () => {
+			const result = await copyTranslator.isCompatibleValue(blockClipboardEntryValue, config1);
+			expect(result).to.be.true;
+		});
+
+		it('returns false if the value is not compatible', async () => {
+			const result = await copyTranslator.isCompatibleValue(blockClipboardEntryValue, config2);
+			expect(result).to.be.false;
+		});
+	});
+});