### 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
87 lines
1.8 KiB
TypeScript
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
|