Feature: Clipboard (#17820)

* wip clipboard context + tests

* clean up property action module + register copy action

* split manifests

* add clipboard module

* import type

* export type

* mark all methods async

* scaffold copy + paste property actions

* scaffold workspace, collection, repo + data sources

* remove references to language

* register detail manifests

* call repo when creating

* load clipboard collection data

* remove debugger

* register clipboard item picker modal

* return value from picker

* accept native error

* clean up data source

* add tests for error states

* make clipboard local storage manager

* add clip entry entity type

* create unique in scaffold

* add clipboard entry item data

* align naming

* move around

* name alignment

* fix imports

* fix missing entityType

* clean up

* use picker input context

* remove unused context

* Update clipboard.context.ts

* map to item model

* poc paste property action

* register copy/paste as kinds

* lint fix

* add tests

* rename test

* add repository tests

* register delete clipboard action + enable action dropdown outside of context menu

* remove notifcation

* export entity type

* temp use repo instead of context

* delete unused copy property action

* make data source non breaking

* Update vite.config.ts

* add icons for clipboard copy, paste + entry

* remove unused

* return if there is no property value

* add kind interfaces

* pass entry type for copy and paste

* register clipboard for block list

* implement filter on entry type

* delete unused context

* remove references

* rename data to value and don't force an array

* make icons and single value

* allow to add create and update dates for clipboard entries

* use clipboard icon

* add create and update dates

* export constants

* don't set as an array

* reload picker content

* add copy to clipboard button to block list entry

* make picker element

* allow to pick multiple

* remove generic block list clipboard actions

* Revert "remove generic block list clipboard actions"

This reverts commit 6ea65a0.

* add get methods

* wip construct block clipboard entry value

* add method to get exposes + add jsdocs

* add expose

* remove todo + add jsdocs

* move clipboard out of core package

* add package files

* load package again

* render entry icon

* render correct icon

* remove clipboard from core vite.config

* Update package-lock.json

* wip copy/paste resolvers

* allow multiple accepted entry types

* move logic to resolvers

* transforming clipboard block value to fit block list

* wip copy/paste resolvers

* clean up

* remove unused

* fix missing exports

* fix tests

* return clipboard entry unique from modal

* Update block-list-entries.context.ts

* clipboard feature: clipboard property value cloner (#17824)

* restructure of property package

* content data merge controller tests

* deprecate meta from propertyValueResolver

* temp work

* temp

* poc

* rename to cloner

* stached block value cloner work

* block list implementation

* correct property value implementation

* RTE Block Property Value Cloner

* Block Grid Value Cloner

* update with comments

* try out cloner

* wip translators

* Revert "delete unused context"

This reverts commit ec31ae5.

* move translator + cloner logic to context

* clean up

* implement read from clipboard in block list property editor

* remove debugger

* values array

* handle paste

* Update types.ts

* move files

* Update clipboard-local-storage.manager.ts

* set both create and update date when creating a clipboard entry

* align naming

* handle paste

* clean up + wip block grid translators

* updates types

* add grid block copy translator

* only allow paste translator to handle a single value

* align copy and paste translators

* remove debugger

* move to folders

* add block const

* rename

* add tests

* Update index.ts

* use correct type

* add tests for UmbBlockListToBlockClipboardCopyTranslator

* fix tests

* add translator tests

* add tests

* organize

* organize

* clean up translator tests

* align naming

* remove unused button

* only render copy property action if property has a value

* use constants

* copy single grid block

* get block grid property value from clipboard entry

* add clear method to extension registry + add js docs

* Update index.ts

* add tests for copy value resolver

* add icon for clipboard

* use clipboard icon in modal

* add tests

* remove unused setting

* fix log

* only create array once

* filter for supported paste translators

* use write method instead of duplicating the code

* add condition config type

* use config type

* Update manifests.ts

* add support for multi picker

* move multiple look up logic to context

* add js docs

* add js docs

* remove unused

* remove unused

* remove unused

* implement paste translator filtering for block catalogue modal

* temp color translator

* adding a UmbPropertyValueDataPotentiallyWithEditorAlias

* simplify observer

* append user unique to local storage key

* remove temp color picker clipboard implementations

* more explicit extension type name

* more renaming

* type specifications

* fix test and missing type

* more types for test

* renaming of paste translators

* rename folder

* rename value resolvers

* correct variable name

* wip tests for clipboard context

* clean up tests correctly

* add more tests for clipboard context

* Update clipboard.context.test.ts

* use after each for clean up

* fix test that times out

* correct name

* optimize

* remove webkit

* newest first when picking

* use fingerprint local storage key to obfuscate user id

* rename method

* use const

* set content max length

* return object including the selection uniques

* show confirm dialog before pasting value

* only show confirm dialog if there is a value

* Feature: clipboard block insert (#17935)

* insert methods

* fix originData

* move logic to base class

* progress on Grid and RTE

* correct for Block Grid paste implementation

* update async across

* remove expose from block clipboard entry model

* remove expose from grid block clipboard entry

* remove todo

* wip move value expand responsibility

* wip split clipboard context

* experiment with an extendable property context

* create propertyContexts + proxy events

* rename methods

* move proxy to context + update grid copy logic

* split tests

* remove unused

* add property context extension type

* fix tests

* fix tests

* reorganize

* Update clipboard.property-context.ts

* use context

* register property context clipboard kind

* register for block grid

* remove redundant code

* rename to replace

* Revert "rename to replace"

This reverts commit eb0535e.

* rename prop

* rename label

* improve block clean-up abilities

* Update rte-base.element.ts

* make local get of clipboard context

* add asyncFilter option to the type

* add is compatible method to the interface

* support asyncFilter in picker

* add compatability check for block list

* more explicit name

* wip implementation of filter

* add compatability checks

* add temp types

* add clipboard filtering for grid and list

* lint corrections

---------

Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/package-lock.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/package.json

@@ -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/apps/backoffice/backoffice.element.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/libs/extension-api/registry/extension.registry.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.test.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/copy/block-grid-to-block-copy-translator.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/manifests.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;
+		});
+	});
+});