Files
payload/test/fields/collections/JSON/index.tsx
Jarrod Flesch 36e152d69d fix(ui): allow json fields to be updated externally (#11371)
### What?
Unable to update json fields externally. For example, calling `setValue`
on a json field would not be reflected in the admin panel UI.

### Why?
JSON fields use the monaco editor to manage state internally, so
programmatically updating the value in state does not change the
internal value.

### How?
Set a ref when the user updates the value and then unset the ref after
the change is complete.

Inside the hook that watches `value`, if the value changed and the
change came from the system (i.e. a programmatic change) refresh the
editor by adjusting its key prop. If the change was made by the user,
there is no need to refresh the editor.

Fixes https://github.com/payloadcms/payload/issues/10819
2025-02-25 09:44:06 -05:00

87 lines
1.8 KiB
TypeScript

import type { CollectionConfig } from 'payload'
import { jsonFieldsSlug } from '../../slugs.js'
const JSON: CollectionConfig = {
slug: jsonFieldsSlug,
access: {
read: () => true,
},
fields: [
{
name: 'json',
type: 'json',
admin: {
maxHeight: 542,
},
jsonSchema: {
fileMatch: ['a://b/foo.json'],
schema: {
type: 'object',
properties: {
array: {
type: 'array',
items: {
type: 'object',
additionalProperties: false,
properties: {
object: {
type: 'object',
additionalProperties: false,
properties: {
array: {
type: 'array',
items: {
type: 'number',
},
},
text: {
type: 'string',
},
},
},
text: {
type: 'string',
},
},
},
},
foo: {
enum: ['bar', 'foobar'],
},
number: {
enum: [10, 5],
},
},
},
uri: 'a://b/foo.json',
},
},
{
name: 'group',
type: 'group',
fields: [
{
name: 'jsonWithinGroup',
type: 'json',
},
],
},
{
name: 'customJSON',
type: 'json',
admin: {
components: {
afterInput: ['./collections/JSON/AfterField#AfterField'],
},
},
label: 'Custom Json',
},
],
versions: {
maxPerDoc: 1,
},
}
export default JSON