feat: Implement copy paste functionality for feedbacks/actions

companion/lib/Controls/Entities/EntityInstance.ts

@@ -570,9 +570,9 @@ export class ControlEntityInstance {
 	/**
 	 * Add a child entity to this entity
 	 */
-	addChild(groupId: string, entityModel: SomeEntityModel): ControlEntityInstance {
+	addChild(groupId: string, entityModel: SomeEntityModel, isCloned?: boolean): ControlEntityInstance {
 		const childGroup = this.#getOrCreateChildGroup(groupId)
-		return childGroup.addEntity(entityModel)
+		return childGroup.addEntity(entityModel, isCloned)
 	}
 
 	/**

companion/lib/Controls/Entities/EntityListPoolBase.ts

@@ -286,6 +286,41 @@ export abstract class ControlEntityListPoolBase {
 		return true
 	}
 
+	/**
+	 * Paste one or more entities into this control, regenerating IDs
+	 */
+	entityPaste(
+		listId: SomeSocketEntityLocation,
+		ownerId: EntityOwner | null,
+		...entityModels: SomeEntityModel[]
+	): boolean {
+		if (entityModels.length === 0) return false
+
+		const entityList = this.getEntityList(listId)
+		if (!entityList) return false
+
+		let newEntities: ControlEntityInstance[]
+		if (ownerId) {
+			const parent = entityList.findById(ownerId.parentId)
+			if (!parent) throw new Error(`Failed to find parent entity ${ownerId.parentId} when pasting child entity`)
+
+			newEntities = entityModels.map((entity) => parent.addChild(ownerId.childGroup, entity, true))
+		} else {
+			newEntities = entityModels.map((entity) => entityList.addEntity(entity, true))
+		}
+
+		// Inform relevant module
+		for (const entity of newEntities) {
+			entity.subscribe(true)
+		}
+
+		this.tryTriggerLocalVariablesChanged(...newEntities)
+
+		this.commitChange()
+
+		return true
+	}
+
 	/**
 	 * Duplicate an entity on this control
 	 */

companion/lib/Controls/EntitiesTrpcRouter.ts

@@ -2,7 +2,12 @@ import z from 'zod'
 import { publicProcedure, router } from '../UI/TRPC.js'
 import type { SomeControl } from './IControlFragments.js'
 import type { InstanceDefinitions } from '../Instance/Definitions.js'
-import { EntityModelType, zodEntityLocation, type EntityOwner } from '@companion-app/shared/Model/EntityModel.js'
+import {
+	EntityModelType,
+	zodEntityLocation,
+	zodSomeEntityModel,
+	type EntityOwner,
+} from '@companion-app/shared/Model/EntityModel.js'
 import type { ActiveLearningStore } from '../Resources/ActiveLearningStore.js'
 import LogController from '../Log/Controller.js'
 import type { VariableValues } from '@companion-app/shared/Model/Variables.js'
@@ -157,6 +162,26 @@ export function createEntitiesTrpcRouter(
 				return control.entities.entityDuplicate(entityLocation, entityId)
 			}),
 
+		paste: publicProcedure
+			.input(
+				z.object({
+					controlId: z.string(),
+					entityLocation: zodEntityLocation,
+					ownerId: zodEntityOwner.nullable(),
+					entities: z.array(zodSomeEntityModel),
+				})
+			)
+			.mutation(async ({ input }) => {
+				const { controlId, entityLocation, ownerId, entities } = input
+
+				const control = controlsMap.get(controlId)
+				if (!control) return false
+
+				if (!control.supportsEntities) throw new Error(`Control "${controlId}" does not support entities`)
+
+				return control.entities.entityPaste(entityLocation, ownerId, ...entities)
+			}),
+
 		setOption: publicProcedure
 			.input(
 				z.object({

shared-lib/lib/Model/EntityModel.ts

@@ -1,7 +1,12 @@
 import z from 'zod'
 import type { ActionSetId } from './ActionModel.js'
 import type { ButtonStyleProperties } from './StyleModel.js'
-import type { ExpressionableOptionsObject, ExpressionOrValue } from './Options.js'
+import {
+	ExpressionableOptionsObjectSchema,
+	createExpressionOrValueSchema,
+	type ExpressionableOptionsObject,
+	type ExpressionOrValue,
+} from './Options.js'
 import type { VariableValue } from './Variables.js'
 import type { CompanionFeedbackButtonStyleResult } from '@companion-module/host'
 
@@ -119,3 +124,29 @@ export function stringifySocketEntityLocation(location: SomeSocketEntityLocation
 	if (typeof location === 'string') return location
 	return `${location.stepId}_${location.setId}`
 }
+
+const zodEntityModelBase = z.object({
+	id: z.string(),
+	definitionId: z.string(),
+	connectionId: z.string(),
+	headline: z.string().optional(),
+	options: ExpressionableOptionsObjectSchema,
+	disabled: z.boolean().optional(),
+	upgradeIndex: z.union([z.number(), z.undefined()]),
+})
+
+export const zodSomeEntityModel: z.ZodType<SomeEntityModel> = z.lazy(() =>
+	z.union([
+		zodEntityModelBase.extend({
+			type: z.literal(EntityModelType.Action),
+			children: z.record(z.string(), z.array(zodSomeEntityModel).optional()).optional(),
+		}),
+		zodEntityModelBase.extend({
+			type: z.literal(EntityModelType.Feedback),
+			isInverted: createExpressionOrValueSchema(z.boolean()).optional(),
+			variableName: z.string().optional(),
+			style: z.record(z.string(), z.any()).optional(),
+			children: z.record(z.string(), z.array(zodSomeEntityModel).optional()).optional(),
+		}),
+	])
+)

webui/src/ContextData.tsx

@@ -26,6 +26,7 @@ import { useModuleStoreRefreshProgressSubscription } from './Hooks/useModuleStor
 import { useModuleStoreListSubscription } from './Hooks/useModuleStoreListSubscription.js'
 import { HelpModal, type HelpModalRef } from './Instances/HelpModal.js'
 import { ViewControlStore } from '~/Stores/ViewControlStore.js'
+import { EntityClipboardStore } from '~/Stores/EntityClipboardStore.js'
 import { WhatsNewModal, type WhatsNewModalRef } from './WhatsNewModal/WhatsNew.js'
 import { useGenericCollectionsSubscription } from './Hooks/useCollectionsSubscription.js'
 import { useCustomVariableCollectionsSubscription } from './Hooks/useCustomVariableCollectionsSubscription.js'
@@ -95,6 +96,8 @@ export function ContextData({ children }: Readonly<ContextDataProps>): React.JSX
 			showWizard: () => showWizardEvent.dispatchEvent(new Event('show')),
 
 			viewControl: new ViewControlStore(),
+
+			entityClipboard: new EntityClipboardStore(),
 		} satisfies RootAppStore
 	}, [notifierObj, helpModalRef, whatsNewModalRef])
 

webui/src/Controls/Components/AddEntityPanel.tsx

@@ -1,13 +1,15 @@
 import { CButton } from '@coreui/react'
-import { faFolderOpen } from '@fortawesome/free-solid-svg-icons'
+import { faFolderOpen, faPaste } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useCallback, useRef } from 'react'
+import { useCallback, useContext, useRef } from 'react'
 import { AddEntitiesModal, type AddEntitiesModalRef } from './AddEntitiesModal.js'
 import { MyErrorBoundary } from '~/Resources/Error.js'
 import type { EntityModelType, EntityOwner, FeedbackEntitySubType } from '@companion-app/shared/Model/EntityModel.js'
 import { AddEntityDropdown } from './AddEntityDropdown.js'
 import { usePanelCollapseHelperContext } from '~/Helpers/CollapseHelper.js'
 import { useEntityEditorContext } from './EntityEditorContext.js'
+import { observer } from 'mobx-react-lite'
+import { RootAppStoreContext } from '~/Stores/RootAppStore.js'
 
 interface AddEntityPanelProps {
 	ownerId: EntityOwner | null
@@ -16,13 +18,14 @@ interface AddEntityPanelProps {
 	entityTypeLabel: string
 }
 
-export function AddEntityPanel({
+export const AddEntityPanel = observer(function AddEntityPanel({
 	ownerId,
 	entityType,
 	feedbackListType,
 	entityTypeLabel,
 }: AddEntityPanelProps): React.JSX.Element {
 	const { serviceFactory, readonly } = useEntityEditorContext()
+	const { entityClipboard } = useContext(RootAppStoreContext)
 
 	const addEntitiesRef = useRef<AddEntitiesModalRef>(null)
 	const showAddModal = useCallback(() => addEntitiesRef.current?.show(), [])
@@ -46,6 +49,14 @@ export function AddEntityPanel({
 		[serviceFactory, entityType, ownerId, panelCollapseHelper]
 	)
 
+	const canPaste = entityClipboard.copiedEntityType === entityType
+
+	const handlePaste = useCallback(() => {
+		const entity = entityClipboard.copiedEntity
+		if (!entity) return
+		serviceFactory.performPaste(ownerId, [entity])
+	}, [entityClipboard, serviceFactory, ownerId])
+
 	return (
 		<div className="add-dropdown-wrapper">
 			<AddEntityDropdown
@@ -67,6 +78,17 @@ export function AddEntityPanel({
 			>
 				<FontAwesomeIcon icon={faFolderOpen} />
 			</CButton>
+			{canPaste && (
+				<CButton
+					color="success"
+					onClick={handlePaste}
+					disabled={readonly}
+					title={`Paste ${entityTypeLabel} from clipboard`}
+					style={{ marginLeft: 4 }}
+				>
+					<FontAwesomeIcon icon={faPaste} />
+				</CButton>
+			)}
 
 			<MyErrorBoundary>
 				<AddEntitiesModal
@@ -79,4 +101,4 @@ export function AddEntityPanel({
 			</MyErrorBoundary>
 		</div>
 	)
-}
+})

webui/src/Controls/Components/EntityCellControls.tsx

@@ -1,11 +1,19 @@
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 import { CButtonGroup, CButton, CFormSwitch } from '@coreui/react'
-import { faPencil, faExpandArrowsAlt, faCompressArrowsAlt, faClone, faTrash } from '@fortawesome/free-solid-svg-icons'
+import {
+	faCopy,
+	faPencil,
+	faExpandArrowsAlt,
+	faCompressArrowsAlt,
+	faClone,
+	faTrash,
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { IEntityEditorActionService } from '~/Services/Controls/ControlEntitiesService.js'
 import { EntityModelType, type EntityOwner, type SomeEntityModel } from '@companion-app/shared/Model/EntityModel.js'
 import { TextInputField } from '~/Components/TextInputField.js'
 import { observer } from 'mobx-react-lite'
+import { RootAppStoreContext } from '~/Stores/RootAppStore.js'
 
 interface EntityCellControlProps {
 	service: IEntityEditorActionService
@@ -36,6 +44,12 @@ export const EntityRowHeader = observer(function EntityRowHeader({
 	readonly,
 	localVariablePrefix,
 }: EntityCellControlProps) {
+	const { entityClipboard } = useContext(RootAppStoreContext)
+
+	const handleCopy = useCallback(() => {
+		entityClipboard.copyEntity(entity)
+	}, [entityClipboard, entity])
+
 	const innerSetEnabled = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => service.setEnabled?.(e.target.checked),
 		[service]
@@ -82,6 +96,9 @@ export const EntityRowHeader = observer(function EntityRowHeader({
 							<FontAwesomeIcon icon={faCompressArrowsAlt} />
 						</CButton>
 					)}
+					<CButton size="sm" onClick={handleCopy} title={`Copy ${entityTypeLabel} to clipboard`}>
+						<FontAwesomeIcon icon={faCopy} />
+					</CButton>
 					<CButton
 						size="sm"
 						disabled={readonly}

webui/src/Services/Controls/ControlActionsService.ts

@@ -68,6 +68,10 @@ export function useActionRecorderActionService(sessionId: string): IEntityEditor
 				})
 			},
 
+			performPaste: (_ownerId: EntityOwner | null, _entities: SomeEntityModel[]) => {
+				// Not supported in action recorder
+			},
+
 			performLearn: undefined,
 			setEnabled: undefined,
 			setHeadline: undefined,

webui/src/Services/Controls/ControlEntitiesService.ts

@@ -31,6 +31,7 @@ export interface IEntityEditorService {
 	) => void
 	performDelete: (entityId: string, entityTypeLabel: string) => void
 	performDuplicate: (entityId: string) => void
+	performPaste: (ownerId: EntityOwner | null, entities: SomeEntityModel[]) => void
 	setConnection: (entityId: string, connectionId: string) => void
 	moveCard: (
 		dragListId: SomeSocketEntityLocation,
@@ -76,6 +77,7 @@ export function useControlEntitiesEditorService(
 	const setConnectionMutation = useMutationExt(trpc.controls.entities.setConnection.mutationOptions())
 	const removeMutation = useMutationExt(trpc.controls.entities.remove.mutationOptions())
 	const duplicateMutation = useMutationExt(trpc.controls.entities.duplicate.mutationOptions())
+	const pasteMutation = useMutationExt(trpc.controls.entities.paste.mutationOptions())
 	const learnOptionsMutation = useMutationExt(trpc.controls.entities.learnOptions.mutationOptions())
 	const setEnabledMutation = useMutationExt(trpc.controls.entities.setEnabled.mutationOptions())
 	const setHeadlineMutation = useMutationExt(trpc.controls.entities.setHeadline.mutationOptions())
@@ -186,6 +188,19 @@ export function useControlEntitiesEditorService(
 					})
 			},
 
+			performPaste: (ownerId: EntityOwner | null, entities: SomeEntityModel[]) => {
+				pasteMutation
+					.mutateAsync({
+						controlId,
+						entityLocation: listId,
+						ownerId,
+						entities,
+					})
+					.catch((e) => {
+						console.error('Failed to paste control entity', e)
+					})
+			},
+
 			performLearn: (entityId: string) => {
 				learnOptionsMutation
 					.mutateAsync({
@@ -296,6 +311,7 @@ export function useControlEntitiesEditorService(
 			setConnectionMutation,
 			removeMutation,
 			duplicateMutation,
+			pasteMutation,
 			learnOptionsMutation,
 			setEnabledMutation,
 			setHeadlineMutation,

webui/src/Stores/EntityClipboardStore.ts

@@ -0,0 +1,28 @@
+import { action, makeObservable, observable } from 'mobx'
+import type { SomeEntityModel, EntityModelType } from '@companion-app/shared/Model/EntityModel.js'
+
+export class EntityClipboardStore {
+	protected _copiedEntity: SomeEntityModel | null = null
+
+	constructor() {
+		makeObservable<EntityClipboardStore, '_copiedEntity'>(this, {
+			_copiedEntity: observable,
+		})
+	}
+
+	get copiedEntity(): SomeEntityModel | null {
+		return this._copiedEntity
+	}
+
+	get copiedEntityType(): EntityModelType | null {
+		return this._copiedEntity?.type ?? null
+	}
+
+	copyEntity = action((entity: SomeEntityModel): void => {
+		this._copiedEntity = structuredClone(entity)
+	})
+
+	clear = action((): void => {
+		this._copiedEntity = null
+	})
+}

webui/src/Stores/RootAppStore.tsx

@@ -12,6 +12,7 @@ import type { VariablesStore } from './VariablesStore.js'
 import type { ConnectionsStore } from './ConnectionsStore.js'
 import type { HelpModalRef } from '~/Instances/HelpModal.js'
 import type { ViewControlStore } from './ViewControlStore.js'
+import type { EntityClipboardStore } from './EntityClipboardStore.js'
 import type { WhatsNewModalRef } from '~/WhatsNewModal/WhatsNew.js'
 import type { ExpressionVariablesListStore } from './ExpressionVariablesListStore.js'
 import type { SurfaceInstancesStore } from './SurfaceInstancesStore.js'
@@ -51,4 +52,6 @@ export interface RootAppStore {
 	readonly showWizard: () => void
 
 	readonly viewControl: ViewControlStore
+
+	readonly entityClipboard: EntityClipboardStore
 }