From ebfe4ec5699d6895e029bae2a340f9543d4f106c Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 13 Nov 2025 16:35:40 +0000
Subject: [PATCH 1/4] Ability to drag and drop between replicators

---
 .../css/components/fieldtypes/replicator.css  | 18 ++++
 resources/js/bootstrap/globals.js             | 19 ++++
 .../fieldtypes/replicator/Replicator.vue      | 72 +++++++++++++--
 .../components/fieldtypes/replicator/Set.vue  |  3 +-
 .../js/components/sortable/SortableList.vue   | 88 +++++++++++++++----
 src/Fields/Field.php                          | 10 +++
 src/Fieldtypes/Replicator.php                 | 38 +++++---
 7 files changed, 209 insertions(+), 39 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index cbf0f8dc3bf..542ee844648 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -1,3 +1,21 @@
 /* ==========================================================================
    REPLICATOR FIELDTYPE
    ========================================================================== */
+
+@scope (.replicator-droppable) to (.replicator-fieldtype) {
+    :scope {
+        cursor: auto;
+    }
+    * {
+        pointer-events: auto;
+    }
+}
+
+@scope (.replicator-not-droppable) to (.replicator-fieldtype) {
+    :scope {
+        cursor: not-allowed;
+    }
+    * {
+        pointer-events: none;
+    }
+}
\ No newline at end of file
diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index f8e79def259..89f520bf2b3 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -157,3 +157,22 @@ export function str_slug(string) {
 export function snake_case(string) {
     return Statamic.$slug.separatedBy('_').create(string);
 }
+
+export function arrayAdd(items, item, index) {
+    return [
+        ...items.slice(0, index),
+        item,
+        ...items.slice(index, items.length)
+    ]
+}
+
+export function arrayRemove(items, index) {
+    return [
+        ...items.slice(0, index),
+        ...items.slice(index + 1, items.length)
+    ]
+}
+
+export function arrayMove(items, oldIndex, newIndex) {
+    return arrayAdd(arrayRemove(items, oldIndex), items[oldIndex], newIndex);
+}
\ No newline at end of file
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 9626e8cf9a3..44e9f9eaf56 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -7,7 +7,11 @@
             <div :class="{ wrapperClasses: fullScreenMode }">
                 <div
                     class="replicator-fieldtype-container"
-                    :class="{ 'replicator-fullscreen fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 dark:bg-gray-800': fullScreenMode }"
+                    :class="{
+                        'replicator-fullscreen fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 dark:bg-gray-800': fullScreenMode,
+                        'replicator-droppable': canDropSet === true,
+                        'replicator-not-droppable': canDropSet === false,
+                    }"
                 >
                     <publish-field-fullscreen-header
                         v-if="fullScreenMode"
@@ -20,11 +24,17 @@
                         <sortable-list
                             :model-value="value"
                             :vertical="true"
-                            :item-class="sortableItemClass"
-                            :handle-class="sortableHandleClass"
+                            :owner="this"
+                            group="replicator-fieldtype"
+                            :group-validator="sortableGroupValidator"
+                            class="min-h-px"
+                            item-class="replicator-sortable-item"
+                            handle-class="replicator-sortable-handle"
                             append-to="body"
                             constrain-dimensions
                             @update:model-value="sorted($event)"
+                            @groupstart="sortableGroupStart"
+                            @groupend="sortableGroupEnd"
                             @dragstart="$emit('focus')"
                             @dragend="$emit('blur')"
                             v-slot="{}"
@@ -39,8 +49,9 @@
                                     :meta-path="setMetaPathPrefix"
                                     :values="set"
                                     :config="setConfig(set.type)"
-                                    :sortable-item-class="sortableItemClass"
-                                    :sortable-handle-class="sortableHandleClass"
+                                    :config-hash="setConfigHash(set.type)"
+                                    sortable-item-class="replicator-sortable-item"
+                                    sortable-handle-class="replicator-sortable-handle"
                                     :collapsed="collapsed.includes(set._id)"
                                     :enabled="set.enabled"
                                     :read-only
@@ -105,6 +116,7 @@ export default {
             focused: false,
             collapsed: clone(this.meta.collapsed),
             fullScreenMode: false,
+            canDropSet: null,
             provide: {
                 replicatorSets: this.config.sets,
                 showReplicatorFieldPreviews: this.config.previews,
@@ -134,6 +146,10 @@ export default {
             }, []);
         },
 
+        setConfigHashes() {
+            return this.meta.setConfigHashes;
+        },
+
         groupConfigs() {
             return this.config.sets;
         },
@@ -184,6 +200,10 @@ export default {
             return this.setConfigs.find((c) => c.handle === handle) || {};
         },
 
+        setConfigHash(handle) {
+            return this.setConfigHashes[handle];
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },
@@ -194,9 +214,31 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
-        sorted(value) {
-            this.update(value);
-        },
+        sorted({ operation, oldIndex, newIndex, oldList }) {
+            if (operation === 'move') {
+                // Move set within this replicator
+                this.update(arrayMove(this.value, oldIndex, newIndex));
+            } else if (operation === 'add') {
+                // Add set to this replicator
+                const oldReplicator = oldList.owner;
+                const set = oldReplicator.value[oldIndex];
+                const meta = oldReplicator.meta.existing[set._id];
+                this.updateSetMeta(set._id, meta);
+                this.update(arrayAdd(this.value, set, newIndex));
+                if (oldReplicator.collapsed.includes(set._id)) {
+                    this.collapseSet(set._id);
+                } else {
+                    this.expandSet(set._id);
+                }
+                // Remove set from old replicator
+                // Do this from the target replicator in order to avoid race conditions with nested
+                // replicators both trying to update their parent's value at the same time.
+                this.$nextTick(() => {
+                    oldReplicator.removeSetMeta(set._id);
+                    oldReplicator.update(arrayRemove(oldReplicator.value, oldIndex)); 
+                });
+            }
+        },        
 
         addSet(handle, index) {
             const set = {
@@ -273,6 +315,20 @@ export default {
 
             return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
         },
+
+        sortableGroupValidator({ source }) {
+            this.canDropSet = this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
+            return this.canDropSet;
+        },
+
+        sortableGroupStart({ valid }) {
+            this.canDropSet = valid;
+        },
+        
+        sortableGroupEnd() {
+            this.canDropSet = null;
+        },
+
     },
 
     mounted() {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 240641ca93a..ca8a537897f 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -25,6 +25,7 @@ const replicatorSets = inject('replicatorSets');
 
 const props = defineProps({
     config: Object,
+    configHash: String,
     id: String,
     fieldPath: String,
     metaPath: String,
@@ -120,7 +121,7 @@ function destroy() {
 </script>
 
 <template>
-    <div :class="sortableItemClass">
+    <div :class="sortableItemClass" :data-config-hash="configHash">
         <slot name="picker" />
         <div
             layout
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index ef6d2b5129d..849e8501e47 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,15 +1,8 @@
 <script>
 import { Sortable, Plugins, Draggable } from '@shopify/draggable';
 
-function move(items, oldIndex, newIndex) {
-    const itemRemovedArray = [...items.slice(0, oldIndex), ...items.slice(oldIndex + 1, items.length)];
-
-    return [
-        ...itemRemovedArray.slice(0, newIndex),
-        items[oldIndex],
-        ...itemRemovedArray.slice(newIndex, itemRemovedArray.length),
-    ];
-}
+const groups = {};
+const lists = {};
 
 export default {
     emits: ['dragstart', 'dragend', 'update:model-value'],
@@ -18,6 +11,15 @@ export default {
         modelValue: {
             required: true,
         },
+        owner: {
+            default: null,
+        },
+        group: {
+            default: null,
+        },
+        groupValidator: {
+            default: null,
+        },
         itemClass: {
             default: 'sortable-item',
         },
@@ -61,6 +63,8 @@ export default {
     data() {
         return {
             sortable: null,
+            groupId: this.group || uniqid(),
+            listId: uniqid(),
         };
     },
 
@@ -127,22 +131,74 @@ export default {
 
     methods: {
         setupSortableList() {
-            this.sortable = new Sortable(this.$el, this.computedOptions);
-
+            this.sortable = this.connectSortable();
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
-
-            this.sortable.on('sortable:stop', ({ oldIndex, newIndex }) => {
-                this.$emit('update:model-value', move(this.modelValue, oldIndex, newIndex));
+            this.sortable.on('sortable:stop', (event) => {
+                const { oldIndex, newIndex, oldContainer, newContainer } = event;
+                if (!this.group) {
+                    this.$emit('update:model-value', arrayMove(this.value, oldIndex, newIndex));
+                    return;           
+                }
+                const payload = { oldIndex, newIndex };
+                if (newContainer === this.$el && oldContainer === this.$el) {
+                    this.$emit('update:model-value', { operation: 'move', oldList: this, newList: this, ...payload });
+                } else if (newContainer === this.$el) {
+                    this.$emit('update:model-value', { operation: 'add', oldList: lists[oldContainer.dataset.listId], newList: this, ...payload });
+                } else if (oldContainer === this.$el) {
+                    this.$emit('update:model-value', { operation: 'remove', oldList: this, newList: lists[newContainer.dataset.listId], ...payload });
+                }
             });
-
+            if (this.group && this.groupValidator) {
+                this.sortable.on('sortable:sort', (event) => {
+                    const { dragEvent } = event;
+                    const { sourceContainer, overContainer, source } = dragEvent;
+                    if (overContainer !== this.$el || sourceContainer === this.$el) {
+                        return;
+                    }
+                    if (!this.groupValidator({ source })) {
+                        event.cancel();
+                    }
+                });
+                this.sortable.on('sortable:start', (event) => {
+                    const { dragEvent } = event;
+                    const { source } = dragEvent;
+                    const valid = this.groupValidator({ source });
+                    this.$emit('groupstart', { valid });
+                });
+                this.sortable.on('sortable:stop', () => {
+                    this.$emit('groupend');
+                });
+            }
             if (this.mirror === false) {
                 this.sortable.on('mirror:create', (e) => e.cancel());
             }
         },
 
         destroySortableList() {
-            this.sortable?.destroy();
+            this.disconnectSortable();
+        },
+
+        connectSortable() {
+            this.$el.dataset.listId = this.listId;
+            lists[this.listId] = this;
+            if (!groups[this.groupId]) {
+                groups[this.groupId] = new Sortable(this.$el, this.computedOptions);
+            } else {
+                groups[this.groupId].addContainer(this.$el);
+            }
+            return groups[this.groupId];
+        },
+
+        disconnectSortable() {
+            delete lists[this.listId];
+            if (groups[this.groupId]) {
+                groups[this.groupId].removeContainer(this.$el);
+                if (groups[this.groupId].containers.length === 0) {
+                    groups[this.groupId].destroy();
+                    delete groups[this.groupId];
+                }
+            }
         },
     },
 
diff --git a/src/Fields/Field.php b/src/Fields/Field.php
index 44169f28192..5ed15662af7 100644
--- a/src/Fields/Field.php
+++ b/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;
@@ -470,6 +471,15 @@ public function form(): ?Form
         return $this->form;
     }
 
+    public function configHash(): string
+    {
+        if (! isset($this->configHash)) {
+            $this->configHash = md5($this->handle.json_encode($this->config));
+        }
+
+        return $this->configHash;
+    }
+
     public static function commonFieldOptions(): Fields
     {
         $reserved = [
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index ad8d3ed6c9b..fcea0286a45 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -131,12 +131,13 @@ protected function preProcessRow($row, $index)
 
     public function fields($set, $index = -1)
     {
-        $config = Arr::get($this->flattenedSetsConfig(), "$set.fields");
-        $hash = md5($this->field->fieldPathPrefix().$index.json_encode($config));
+        $config = Arr::get($this->flattenedSetsConfig(), $set);
+        $configHash = $config['hash'] ?? 'invalid_set';
+        $itemHash = md5($this->field->fieldPathPrefix().'.'.$index);
 
-        return Blink::once($hash, function () use ($config, $index) {
+        return Blink::once('replicator-'.$configHash.'-'.$itemHash, function () use ($config, $index) {
             return new Fields(
-                $config,
+                $config['fields'] ?? [],
                 $this->field()->parent(),
                 $this->field(),
                 $index
@@ -162,7 +163,6 @@ protected function setRules($handle, $data, $index)
             ->withContext([
                 'prefix' => $this->field->validationContext('prefix').$this->setRuleFieldPrefix($index).'.',
             ]);
-
         $rules = $this
             ->addEntryValidationReplacements($this->field, $rules)
             ->rules();
@@ -224,13 +224,13 @@ protected function performAugmentation($values, $shallow)
 
     public function preload()
     {
+        $configHash = $this->field->configHash();
+
         $existing = collect($this->field->value())->mapWithKeys(function ($set, $index) {
             return [$set['_id'] => $this->fields($set['type'], $index)->addValues($set)->meta()->put('_', '_')];
         })->toArray();
 
-        $blink = md5(json_encode($this->flattenedSetsConfig()));
-
-        $defaults = Blink::once($blink.'-defaults', function () {
+        $defaults = Blink::once('replicator-'.$configHash.'-defaults', function () {
             return collect($this->flattenedSetsConfig())->map(function ($set, $handle) {
                 return $this->fields($handle)->all()->map(function ($field) {
                     return $field->fieldtype()->preProcess($field->defaultValue());
@@ -238,7 +238,7 @@ public function preload()
             })->all();
         });
 
-        $new = Blink::once($blink.'-new', function () use ($defaults) {
+        $new = Blink::once('replicator-'.$configHash.'-new', function () use ($defaults) {
             return collect($this->flattenedSetsConfig())->map(function ($set, $handle) use ($defaults) {
                 return $this->fields($handle)->addValues($defaults[$handle])->meta()->put('_', '_');
             })->toArray();
@@ -249,14 +249,17 @@ public function preload()
             'new' => $new,
             'defaults' => $defaults,
             'collapsed' => [],
+            'setConfigHashes' => $this->flattenedSetsConfig()
+                ->map(fn ($set) => $set['hash'])
+                ->all(),
         ];
     }
 
     public function flattenedSetsConfig()
     {
-        $blink = md5($this->field?->handle().json_encode($this->field?->config()));
+        $configHash = $this->field->configHash();
 
-        return Blink::once($blink, function () {
+        return Blink::once('replicator-'.$configHash.'-sets', function () {
             $sets = collect($this->config('sets'));
 
             // If the first set doesn't have a nested "set" key, it would be the legacy format.
@@ -270,9 +273,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)),
+                    ];
+                });
         });
     }
 

From 215ecd1499543ee314ef4c1b888e4868d9d13c84 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 13 Nov 2025 16:59:42 +0000
Subject: [PATCH 2/4] Cleanup and fixes

---
 .../css/components/fieldtypes/replicator.css  | 20 +------------------
 .../fieldtypes/replicator/Replicator.vue      |  6 +-----
 .../js/components/sortable/SortableList.vue   |  1 +
 3 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 542ee844648..96b7b3ccce4 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -1,21 +1,3 @@
 /* ==========================================================================
    REPLICATOR FIELDTYPE
-   ========================================================================== */
-
-@scope (.replicator-droppable) to (.replicator-fieldtype) {
-    :scope {
-        cursor: auto;
-    }
-    * {
-        pointer-events: auto;
-    }
-}
-
-@scope (.replicator-not-droppable) to (.replicator-fieldtype) {
-    :scope {
-        cursor: not-allowed;
-    }
-    * {
-        pointer-events: none;
-    }
-}
\ No newline at end of file
+   ========================================================================== */
\ No newline at end of file
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 44e9f9eaf56..7b53b475508 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -7,11 +7,7 @@
             <div :class="{ wrapperClasses: fullScreenMode }">
                 <div
                     class="replicator-fieldtype-container"
-                    :class="{
-                        'replicator-fullscreen fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 dark:bg-gray-800': fullScreenMode,
-                        'replicator-droppable': canDropSet === true,
-                        'replicator-not-droppable': canDropSet === false,
-                    }"
+                    :class="{ 'replicator-fullscreen fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 dark:bg-gray-800': fullScreenMode }"
                 >
                     <publish-field-fullscreen-header
                         v-if="fullScreenMode"
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 849e8501e47..ef2aaf4adca 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,5 +1,6 @@
 <script>
 import { Sortable, Plugins, Draggable } from '@shopify/draggable';
+import uniqid from 'uniqid';
 
 const groups = {};
 const lists = {};

From 09282b020ac9d56c4f20d01c3fd462301a7362a7 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 13 Nov 2025 17:11:55 +0000
Subject: [PATCH 3/4] Reapply mark test fix

---
 tests/Modifiers/MarkTest.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/Modifiers/MarkTest.php b/tests/Modifiers/MarkTest.php
index 5f4f865bb08..8582319a0a7 100644
--- a/tests/Modifiers/MarkTest.php
+++ b/tests/Modifiers/MarkTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Modifiers;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fields\Field;
 use Statamic\Fields\Value;
 use Statamic\Fieldtypes\Bard;
 use Statamic\Fieldtypes\Markdown;
@@ -78,7 +79,7 @@ public function it_marks_bard_value()
                     ['type' => 'text', 'text' => 'amet', 'marks' => [['type' => 'bold']]],
                 ],
             ],
-        ], 'content', new Bard());
+        ], 'content', (new Bard)->setField(new Field('test', [])));
         $words = 'elüt amet';
 
         $expected = '<p>Lorem, ipsum <mark>el&uuml;t</mark> sit <strong><mark>amet</mark></strong></p>';

From f9c4c69a9bc4323ba1259bdd55dacb41a15c6756 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 13 Nov 2025 17:55:54 +0000
Subject: [PATCH 4/4] Revert file

---
 resources/css/components/fieldtypes/replicator.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 96b7b3ccce4..cbf0f8dc3bf 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -1,3 +1,3 @@
 /* ==========================================================================
    REPLICATOR FIELDTYPE
-   ========================================================================== */
\ No newline at end of file
+   ========================================================================== */