[6.x] Ability to cut, copy and paste between replicators

resources/js/components/fieldtypes/replicator/Replicator.vue

@@ -50,6 +50,8 @@
                                     @collapsed="collapseSet(set._id)"
                                     @expanded="expandSet(set._id)"
                                     @duplicated="duplicateSet(set._id)"
+                                    @copied="copySet(set._id)"
+                                    @cut="copySet(set._id, true)"
                                     @removed="removed(set, index)"
                                 >
                                     <template v-slot:picker>
@@ -95,6 +97,7 @@ import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
 import { data_get } from "@/bootstrap/globals.js";
+import useClipboard from '@/composables/clipboard.js';
 
 export default {
     mixins: [Fieldtype, ManagesSetMeta],
@@ -105,6 +108,11 @@ export default {
         AddSetButton,
     },
 
+    setup() {
+        const clipboard = useClipboard();
+        return { clipboard };
+    },
+
     data() {
         return {
             focused: false,
@@ -154,6 +162,14 @@ export default {
             return `${this.name}-sortable-handle`;
         },
 
+        setConfigHashes() {
+            return this.meta.setConfigHashes || {};
+        },
+
+        canPasteSets() {
+            return this.clipboard.canPaste('replicator', Object.values(this.setConfigHashes));
+        },
+
         replicatorPreview() {
             if (!this.showFieldPreviews) return;
 
@@ -187,6 +203,25 @@ export default {
                     visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
                 },
+                {
+                    title: __('Copy All Sets'),
+                    icon: 'clipboard-copy',
+                    disabled: () => this.value.length === 0,
+                    run: () => this.copySets(false),
+                },
+                {
+                    title: __('Cut All Sets'),
+                    icon: 'clipboard-cut',
+                    disabled: () => this.value.length === 0,
+                    run: () => this.copySets(true),
+                },
+                {
+                    title: __('Paste Sets'),
+                    icon: 'clipboard-paste',
+                    visible: this.canPasteSets,
+                    disabled: () => !this.canPasteSets,
+                    run: this.pasteSets,
+                },
             ];
         },
     },
@@ -289,6 +324,69 @@ export default {
                 .join('.');
         },
 
+        setConfigHash(handle) {
+            return this.setConfigHashes[handle] || null;
+        },
+
+        copySet(id, cut = false) {
+            const index = this.value.findIndex((v) => v._id === id);
+            const set = this.value[index];
+            const configHash = this.setConfigHash(set.type);
+
+            this.clipboard.set('replicator', [{
+                configHash,
+                type: set.type,
+                values: JSON.parse(JSON.stringify(set)),
+                meta: JSON.parse(JSON.stringify(this.meta.existing[id])),
+            }]);
+
+            if (cut) {
+                this.removed(set, index);
+            }
+
+            this.$toast.success(cut ? __('Set cut to clipboard') : __('Set copied to clipboard'));
+        },
+
+        copySets(cut = false) {
+            const items = this.value.map((set) => ({
+                configHash: this.setConfigHash(set.type),
+                type: set.type,
+                values: JSON.parse(JSON.stringify(set)),
+                meta: JSON.parse(JSON.stringify(this.meta.existing[set._id])),
+            }));
+
+            this.clipboard.set('replicator', items);
+
+            if (cut) {
+                this.value.forEach((set) => this.removeSetMeta(set._id));
+                this.update([]);
+            }
+
+            this.$toast.success(cut ? __('Sets cut to clipboard') : __('Sets copied to clipboard'));
+        },
+
+        pasteSets() {
+            const data = this.clipboard.get();
+            if (!data || data.type !== 'replicator') {
+                return;
+            }
+
+            const maxSets = this.config.max_sets;
+            if (maxSets && (this.value.length + data.items.length) > maxSets) {
+                this.$toast.error(__('Pasting would exceed the maximum number of sets'));
+                return;
+            }
+
+            const newSets = data.items.map((item) => {
+                const newId = uniqid();
+                this.updateSetMeta(newId, item.meta);
+                return { ...item.values, _id: newId };
+            });
+
+            this.update([...this.value, ...newSets]);
+            this.$toast.success(__('Sets pasted'));
+        },
+
         duplicateSet(old_id) {
             const index = this.value.findIndex((v) => v._id === old_id);
             const old = this.value[index];

resources/js/components/fieldtypes/replicator/Set.vue

@@ -19,7 +19,7 @@ import FieldAction from '@/components/field-actions/FieldAction.js';
 import toFieldActions from '@/components/field-actions/toFieldActions.js';
 import { reveal } from '@api';
 
-const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed']);
+const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'copied', 'cut', 'removed']);
 
 const replicatorSets = inject('replicatorSets');
 
@@ -191,6 +191,8 @@ reveal.use(rootEl, () => emit('expanded'));
                                 @click="toggleCollapsedState"
                             />
                             <DropdownItem :text="__('Duplicate Set')" @click="emit('duplicated')" />
+                            <DropdownItem :text="__('Copy Set')" @click="emit('copied')" />
+                            <DropdownItem :text="__('Cut Set')" @click="emit('cut')" />
                             <DropdownItem
                                 :text="__('Delete Set')"
                                 variant="destructive"

resources/js/composables/clipboard.js

@@ -0,0 +1,72 @@
+import { reactive } from 'vue';
+
+const STORAGE_KEY = 'statamic.clipboard';
+const DEFAULT_TTL = 10 * 60 * 1000;
+
+const state = reactive({
+    data: null,
+    expiresAt: null,
+});
+
+function loadFromStorage() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw) {
+            state.data = null;
+            state.expiresAt = null;
+            return;
+        }
+
+        const parsed = JSON.parse(raw);
+        state.expiresAt = parsed.expiresAt;
+        state.data = parsed.payload;
+    } catch {
+        state.data = null;
+        state.expiresAt = null;
+    }
+}
+
+function isExpired() {
+    return !state.expiresAt || Date.now() > state.expiresAt;
+}
+
+loadFromStorage();
+
+window.addEventListener('storage', (event) => {
+    if (event.key === STORAGE_KEY) {
+        loadFromStorage();
+    }
+});
+
+export default function useClipboard() {
+    const get = () => {
+        if (isExpired()) {
+            return null;
+        }
+
+        return state.data;
+    };
+
+    const set = (type, items, ttl = DEFAULT_TTL) => {
+        const expiresAt = Date.now() + ttl;
+        localStorage.setItem(STORAGE_KEY, JSON.stringify({ expiresAt, payload: { type, items } }));
+        state.expiresAt = expiresAt;
+        state.data = { type, items };
+    };
+
+    const clear = () => {
+        localStorage.removeItem(STORAGE_KEY);
+        state.data = null;
+        state.expiresAt = null;
+    };
+
+    const canPaste = (type, allowedHashes) => {
+        if (isExpired() || !state.data || state.data.type !== type) {
+            return false;
+        }
+
+        return state.data.items.every((item) => allowedHashes.includes(item.configHash));
+    };
+
+    return { state, get, set, clear, canPaste };
+}

src/Fields/Field.php

@@ -20,6 +20,7 @@ class Field implements Arrayable
     protected $handle;
     protected $prefix;
     protected $config;
+    protected $configHash;
     protected $value;
     protected $parent;
     protected $parentField;
@@ -394,6 +395,15 @@ public function config(): array
         return $this->config;
     }
 
+    public function configHash(): string
+    {
+        if (! isset($this->configHash)) {
+            $this->configHash = md5($this->handle.json_encode($this->config));
+        }
+
+        return $this->configHash;
+    }
+
     public function conditions(): array
     {
         return collect($this->config)->only([

src/Fieldtypes/Replicator.php

@@ -253,6 +253,9 @@ public function preload()
             'new' => $new ?? null,
             'defaults' => $defaults ?? null,
             'collapsed' => $this->config('collapse') ? array_keys($existing) : [],
+            'setConfigHashes' => $this->flattenedSetsConfig()
+                ->map(fn ($set) => $set['hash'])
+                ->all(),
         ];
     }
 
@@ -285,9 +288,16 @@ public function flattenedSetsConfig()
                 ]);
             }
 
-            return $sets->flatMap(function ($section) {
-                return $section['sets'];
-            });
+            return $sets
+                ->flatMap(function ($section) {
+                    return $section['sets'];
+                })
+                ->map(function ($config, $handle) {
+                    return [
+                        ...$config,
+                        'hash' => md5($handle.json_encode($config)),
+                    ];
+                });
         });
     }