[5.x] Fix replicator preview for Group fields (statamic#11280)

Co-authored-by: Jason Varga <[email protected]>

resources/js/components/fieldtypes/GroupFieldtype.vue

@@ -30,10 +30,12 @@
                                 :errors="errors(field.handle)"
                                 :field-path="fieldPath(field.handle)"
                                 :read-only="isReadOnly"
+                                :show-field-previews="config.replicator_preview"
                                 @updated="updated(field.handle, $event)"
                                 @meta-updated="updateMeta(field.handle, $event)"
                                 @focus="$emit('focus')"
                                 @blur="$emit('blur')"
+                                @replicator-preview-updated="previewUpdated(field.handle, $event)"
                             />
                         </div>
                     </div>
@@ -57,18 +59,21 @@
 import Fieldtype from './Fieldtype.vue';
 import SetField from './replicator/Field.vue';
 import { ValidatesFieldConditions } from '../field-conditions/FieldConditions.js';
+import ManagesPreviewText from "./replicator/ManagesPreviewText";
 
 export default {
     mixins: [
         Fieldtype,
         ValidatesFieldConditions,
+        ManagesPreviewText,
     ],
     components: { SetField },
     data() {
         return {
             containerWidth: null,
             focused: false,
             fullScreenMode: false,
+            previews: {},
             provide: {
                 group: this.makeGroupProvide(),
                 storeName: this.storeName,
@@ -86,7 +91,7 @@ export default {
         replicatorPreview() {
             if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
 
-            return Object.values(this.value).join(', ');
+            return replicatorPreviewHtml(this.previewText);
         },
         internalFieldActions() {
             return [
@@ -150,6 +155,10 @@ export default {
             this.$emit('meta-updated', { ...this.meta, [handle]: value });
         },
 
+        previewUpdated(handle, value) {
+            this.previews = { ...this.previews, [handle]: value };
+        },
+
         fieldPath(handle) {
             return (this.fieldPathPrefix || this.handle) + '.' + handle;
         },