Delegate copy

src/commands/view/CopyComponent.ts

@@ -3,7 +3,7 @@ import { CommandObject } from './CommandAbstract';
 export default {
   run(ed) {
     const em = ed.getModel();
-    const models = [...ed.getSelectedAll()];
+    const models = [...ed.getSelectedAll()].map(md => md.delegate?.copy?.(md) || md).filter(Boolean);
     models.length && em.set('clipboard', models);
   },
 } as CommandObject;

src/commands/view/PasteComponent.ts

@@ -5,11 +5,12 @@ import { CommandObject } from './CommandAbstract';
 export default {
   run(ed, s, opts = {}) {
     const em = ed.getModel();
-    const clp: Component[] = em.get('clipboard');
+    const clp: Component[] | null = em.get('clipboard');
     const lastSelected = ed.getSelected();
 
-    if (clp && lastSelected) {
-      ed.getSelectedAll().forEach(selected => {
+    if (clp?.length && lastSelected) {
+      ed.getSelectedAll().forEach(sel => {
+        const selected = sel.delegate?.copy?.(sel) || sel;
         const { collection } = selected;
         if (!collection) return;
 
@@ -18,13 +19,11 @@ export default {
         const addOpts = { at, action: opts.action || 'paste-component' };
 
         if (contains(clp, selected) && selected.get('copyable')) {
-          // @ts-ignore
           added = collection.add(selected.clone(), addOpts);
         } else {
           const copyable = clp.filter(cop => cop.get('copyable'));
           const pasteable = copyable.filter(cop => ed.Components.canMove(selected.parent()!, cop).result);
           added = collection.add(
-            // @ts-ignore
             pasteable.map(cop => cop.clone()),
             addOpts
           );

src/dom_components/model/Component.ts

@@ -110,6 +110,7 @@ export const keyUpdateInside = `${keyUpdate}-inside`;
  * Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`.
  * By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
  * @property {Collection<Component>} [components=null] Children components. Default: `null`
+ * @property {Object} [delegate=null] Delegate commands to other components. Available commands `remove` | `move` | `copy`. eg. `{ remove: (cmp) => cmp.closestType('other-type') }`
  *
  * @module docsjs.Component
  */

src/dom_components/model/types.ts

@@ -14,9 +14,34 @@ export type DragMode = 'translate' | 'absolute' | '';
 
 export type DraggableDroppableFn = (source: Component, target: Component, index?: number) => boolean | void;
 
+/**
+ * Delegate commands to other components.
+ */
 export interface ComponentDelegateProps {
+  /**
+   * Delegate remove command to another component.
+   * @example
+   * delegate: {
+   *  remove: (cmp) => cmp.closestType('other-type'),
+   * }
+   */
   remove?: (cmp: Component) => Component | Nullable;
+  /**
+   * Delegate move command to another component.
+   * @example
+   * delegate: {
+   *  move: (cmp) => cmp.closestType('other-type'),
+   * }
+   */
   move?: (cmp: Component) => Component | Nullable;
+  /**
+   * Delegate copy command to another component.
+   * @example
+   * delegate: {
+   *  copy: (cmp) => cmp.closestType('other-type'),
+   * }
+   */
+  copy?: (cmp: Component) => Component | Nullable;
 }
 
 export interface ComponentProperties {
@@ -175,7 +200,7 @@ export interface ComponentProperties {
   toolbar?: ToolbarButtonProps[];
 
   /**
-   * Delegate actions to other components.
+   * Delegate commands to other components.
    */
   delegate?: ComponentDelegateProps;