Merge pull request #1802 from payloadcms/chore/code-field-props

chore: moves editorProps into admin property for code and json field types

Author: JarrodMFlesch

docs/fields/code.mdx

@@ -33,13 +33,16 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
 
-*\* An asterisk denotes that a property is required.*
+_\* An asterisk denotes that a property is required._
 
-### Admin config
+### Admin Config
 
-In addition to the default [field admin config](/docs/fields/overview#admin-config), the Code field type also allows for the customization of a `language` property.
+In addition to the default [field admin config](/docs/fields/overview#admin-config), you can adjust the following properties:
 
-The [monaco-react](https://github.com/suren-atoyan/monaco-react) editor supports all of the languages supported by the [monaco-editor](https://github.com/microsoft/monaco-editor). The `language` property can be set to any of the languages listed [here](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages).
+| Option                 | Description                                                                                                                                                                         |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`language`**         | This property can be set to any language listed [here](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages).                                           |
+| **`editorOptions`**    | Options that can be passed to the monaco editor, [view the full list](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IDiffEditorConstructionOptions.html).  |
 
 ### Example
 

docs/fields/json.mdx

@@ -29,9 +29,17 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`defaultValue`**   | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values) |
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
-| **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
 
-*\* An asterisk denotes that a property is required.*
+_\* An asterisk denotes that a property is required._
+
+### Admin Config
+
+In addition to the default [field admin config](/docs/fields/overview#admin-config), you can adjust the following properties:
+
+| Option                 | Description                                                                                                                                                                         |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`editorOptions`**    | Options that can be passed to the monaco editor, [view the full list](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IDiffEditorConstructionOptions.html).  |
 
 ### Example
 

src/admin/components/forms/field-types/Code/Code.tsx

@@ -32,9 +32,9 @@ const Code: React.FC<Props> = (props) => {
       language,
       description,
       condition,
+      editorOptions,
     } = {},
     label,
-    editorOptions,
   } = props;
 
   const path = pathFromProps || name;

src/admin/components/forms/field-types/JSON/JSON.tsx

@@ -26,9 +26,9 @@ const JSONField: React.FC<Props> = (props) => {
       width,
       description,
       condition,
+      editorOptions,
     } = {},
     label,
-    editorOptions,
   } = props;
 
   const path = pathFromProps || name;

src/fields/config/types.ts

@@ -251,20 +251,23 @@ export type UploadField = FieldBase & {
 
 type CodeAdmin = Admin & {
   language?: string;
+  editorOptions?: EditorProps['options'];
 }
 
 export type CodeField = Omit<FieldBase, 'admin'> & {
   admin?: CodeAdmin
   minLength?: number
   maxLength?: number
   type: 'code';
+}
+
+type JSONAdmin = Admin & {
   editorOptions?: EditorProps['options'];
 }
 
 export type JSONField = Omit<FieldBase, 'admin'> & {
-  admin?: Admin
+  admin?: JSONAdmin
   type: 'json';
-  editorOptions?: EditorProps['options'];
 }
 
 export type SelectField = FieldBase & {