From 57e9527c39771ce8bbd0bed960fddfe6b3ee01a2 Mon Sep 17 00:00:00 2001
From: Emma Hamilton <mitchell@hamil.town>
Date: Wed, 23 Nov 2022 15:51:41 +1000
Subject: [PATCH] Add new Structure field type (#7936)

Co-authored-by: Daniel Cousens <413395+dcousens@users.noreply.github.com>
Co-authored-by: Daniel Cousens <dcousens@users.noreply.github.com>
---
 .changeset/late-ties-multiply.md              |   5 +
 .changeset/late-ties-search.md                |   5 +
 docs/pages/docs/guides/document-fields.md     |   5 +-
 packages/fields-document/package.json         |  11 +-
 .../DocumentEditor/component-blocks/api.tsx   | 274 +++++++---
 .../component-blocks/form-from-preview.tsx    | 128 ++++-
 .../component-blocks/get-value.ts             | 127 +++++
 .../DocumentEditor/primitives/orderable.tsx   |  13 +-
 .../fields-document/src/component-blocks.tsx  |   1 +
 packages/fields-document/src/index.ts         |   2 +
 .../src/structure-graphql-input.tsx           | 506 ++++++++++++++++++
 .../src/structure-graphql-output.tsx          | 197 +++++++
 .../fields-document/src/structure-views.tsx   | 135 +++++
 packages/fields-document/src/structure.ts     | 143 +++++
 .../structure-views/package.json              |   4 +
 tests/sandbox/configs/all-the-things.ts       |   9 +-
 tests/sandbox/schema.graphql                  |  70 +++
 tests/sandbox/schema.prisma                   |   2 +
 tests/sandbox/structure-nested.tsx            |  40 ++
 tests/sandbox/structure.tsx                   |  14 +
 20 files changed, 1596 insertions(+), 95 deletions(-)
 create mode 100644 .changeset/late-ties-multiply.md
 create mode 100644 .changeset/late-ties-search.md
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts
 create mode 100644 packages/fields-document/src/structure-graphql-input.tsx
 create mode 100644 packages/fields-document/src/structure-graphql-output.tsx
 create mode 100644 packages/fields-document/src/structure-views.tsx
 create mode 100644 packages/fields-document/src/structure.ts
 create mode 100644 packages/fields-document/structure-views/package.json
 create mode 100644 tests/sandbox/structure-nested.tsx
 create mode 100644 tests/sandbox/structure.tsx

diff --git a/.changeset/late-ties-multiply.md b/.changeset/late-ties-multiply.md
new file mode 100644
index 00000000000..ee1aee3fb05
--- /dev/null
+++ b/.changeset/late-ties-multiply.md
@@ -0,0 +1,5 @@
+---
+"@keystone-6/fields-document": minor
+---
+
+Adds a new `integer` component field type
diff --git a/.changeset/late-ties-search.md b/.changeset/late-ties-search.md
new file mode 100644
index 00000000000..1a543d1c0b1
--- /dev/null
+++ b/.changeset/late-ties-search.md
@@ -0,0 +1,5 @@
+---
+"@keystone-6/fields-document": minor
+---
+
+Adds a new `structure` field type, a composable JSON data structure with a powerful GraphQL API
diff --git a/docs/pages/docs/guides/document-fields.md b/docs/pages/docs/guides/document-fields.md
index 2f58c83f7c7..74d97c7a6a2 100644
--- a/docs/pages/docs/guides/document-fields.md
+++ b/docs/pages/docs/guides/document-fields.md
@@ -687,6 +687,9 @@ component({
 `@keystone-6/core/component-blocks` ships with a set of form fields for common purposes:
 
 - `fields.text({ label: '...', defaultValue: '...' })`
+{% if $nextRelease %}
+- `fields.integer({ label: '...', defaultValue: '...' })`
+{% /if %}
 - `fields.url({ label: '...', defaultValue: '...' })`
 - `fields.select({ label: '...', options: [{ label:'A', value:'a' }, { label:'B', value:'b' }] defaultValue: 'a' })`
 - `fields.checkbox({ label: '...', defaultValue: false })`
@@ -869,4 +872,4 @@ heading="Document Field Demo"
 href="/docs/guides/document-field-demo" %}
 Test drive the many features of Keystone’s Document field on this website.
 {% /well %}
-{% /related-content %}
\ No newline at end of file
+{% /related-content %}
diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index e77cbf91f37..b57aa17c85a 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -18,6 +18,10 @@
       "module": "./primitives/dist/keystone-6-fields-document-primitives.esm.js",
       "default": "./primitives/dist/keystone-6-fields-document-primitives.cjs.js"
     },
+    "./structure-views": {
+      "module": "./structure-views/dist/keystone-6-fields-document-structure-views.esm.js",
+      "default": "./structure-views/dist/keystone-6-fields-document-structure-views.cjs.js"
+    },
     "./component-blocks": {
       "module": "./component-blocks/dist/keystone-6-fields-document-component-blocks.esm.js",
       "default": "./component-blocks/dist/keystone-6-fields-document-component-blocks.cjs.js"
@@ -28,14 +32,16 @@
     "dist",
     "component-blocks",
     "primitives",
-    "views"
+    "views",
+    "structure-views"
   ],
   "preconstruct": {
     "entrypoints": [
       "component-blocks.tsx",
       "index.ts",
       "primitives.ts",
-      "views.tsx"
+      "views.tsx",
+      "structure-views.tsx"
     ]
   },
   "peerDependencies": {
@@ -53,6 +59,7 @@
     "@keystone-ui/core": "^5.0.2",
     "@keystone-ui/fields": "^7.1.2",
     "@keystone-ui/icons": "^6.0.2",
+    "@keystone-ui/modals": "^6.0.2",
     "@keystone-ui/popover": "^6.0.2",
     "@keystone-ui/tooltip": "^6.0.2",
     "@types/react": "^18.0.9",
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 4b2fd78a7cb..387dfa03791 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { graphql } from '@keystone-6/core';
 import { jsx } from '@keystone-ui/core';
 import {
   FieldContainer,
@@ -52,6 +53,21 @@ export type FormField<Value extends FormFieldValue, Options> = {
   validate(value: unknown): boolean;
 };
 
+export type FormFieldWithGraphQLField<Value extends FormFieldValue, Options> = FormField<
+  Value,
+  Options
+> & {
+  graphql: {
+    output: graphql.Field<
+      { value: Value },
+      Record<string, graphql.Arg<graphql.InputType, boolean>>,
+      graphql.OutputType,
+      'value'
+    >;
+    input: graphql.NullableInputType;
+  };
+};
+
 type InlineMarksConfig =
   | 'inherit'
   | {
@@ -100,6 +116,8 @@ export type ChildField = {
 export type ArrayField<ElementField extends ComponentSchema> = {
   kind: 'array';
   element: ElementField;
+  // this is written with unknown to avoid typescript being annoying about circularity or variance things
+  label?(props: unknown): string;
 };
 
 export type RelationshipField<Many extends boolean> = {
@@ -128,14 +146,39 @@ export type ConditionalField<
   values: ConditionalValues;
 };
 
+// this is written like this rather than ArrayField<ComponentSchema> to avoid TypeScript erroring about circularity
+type ArrayFieldInComponentSchema = {
+  kind: 'array';
+  element: ComponentSchema;
+  // this is written with unknown to avoid typescript being annoying about circularity or variance things
+  label?(props: unknown): string;
+};
+
 export type ComponentSchema =
   | ChildField
   | FormField<any, any>
   | ObjectField
   | ConditionalField<FormField<any, any>, { [key: string]: ComponentSchema }>
   | RelationshipField<boolean>
-  // this is written like this rather than ArrayField<ComponentSchema> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentSchema };
+  | ArrayFieldInComponentSchema;
+
+// this is written like this rather than ArrayField<ComponentSchemaForGraphQL> to avoid TypeScript erroring about circularity
+type ArrayFieldInComponentSchemaForGraphQL = {
+  kind: 'array';
+  element: ComponentSchemaForGraphQL;
+  // this is written with unknown to avoid typescript being annoying about circularity or variance things
+  label?(props: unknown): string;
+};
+
+export type ComponentSchemaForGraphQL =
+  | FormFieldWithGraphQLField<any, any>
+  | ObjectField<Record<string, ComponentSchemaForGraphQL>>
+  | ConditionalField<
+      FormFieldWithGraphQLField<any, any>,
+      { [key: string]: ComponentSchemaForGraphQL }
+    >
+  | RelationshipField<boolean>
+  | ArrayFieldInComponentSchemaForGraphQL;
 
 export const fields = {
   text({
@@ -144,7 +187,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+  }): FormFieldWithGraphQLField<string, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -166,6 +209,57 @@ export const fields = {
       validate(value) {
         return typeof value === 'string';
       },
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({ type: graphql.String }),
+      },
+    };
+  },
+  integer({
+    label,
+    defaultValue = 0,
+  }: {
+    label: string;
+    defaultValue?: number;
+  }): FormFieldWithGraphQLField<number, undefined> {
+    const validate = (value: unknown) => {
+      return typeof value === 'number' && Number.isFinite(value);
+    };
+    return {
+      kind: 'form',
+      Input({ value, onChange, autoFocus, forceValidation }) {
+        const [blurred, setBlurred] = useState(false);
+        const [inputValue, setInputValue] = useState(String(value));
+        const showValidation = forceValidation || (blurred && !validate(value));
+
+        return (
+          <FieldContainer>
+            <FieldLabel>{label}</FieldLabel>
+            <TextInput
+              onBlur={() => setBlurred(true)}
+              autoFocus={autoFocus}
+              value={inputValue}
+              onChange={event => {
+                const raw = event.target.value;
+                setInputValue(raw);
+                if (/^[+-]?\d+$/.test(raw)) {
+                  onChange(Number(raw));
+                } else {
+                  onChange(NaN);
+                }
+              }}
+            />
+            {showValidation && <span css={{ color: 'red' }}>Please specify an integer</span>}
+          </FieldContainer>
+        );
+      },
+      options: undefined,
+      defaultValue,
+      validate,
+      graphql: {
+        input: graphql.Int,
+        output: graphql.field({ type: graphql.Int }),
+      },
     };
   },
   url({
@@ -174,7 +268,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+  }): FormFieldWithGraphQLField<string, undefined> {
     const validate = (value: unknown) => {
       return typeof value === 'string' && (value === '' || isValidURL(value));
     };
@@ -187,9 +281,7 @@ export const fields = {
           <FieldContainer>
             <FieldLabel>{label}</FieldLabel>
             <TextInput
-              onBlur={() => {
-                setBlurred(true);
-              }}
+              onBlur={() => setBlurred(true)}
               autoFocus={autoFocus}
               value={value}
               onChange={event => {
@@ -203,6 +295,10 @@ export const fields = {
       options: undefined,
       defaultValue,
       validate,
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({ type: graphql.String }),
+      },
     };
   },
   select<Option extends { label: string; value: string }>({
@@ -213,7 +309,7 @@ export const fields = {
     label: string;
     options: readonly Option[];
     defaultValue: Option['value'];
-  }): FormField<Option['value'], readonly Option[]> {
+  }): FormFieldWithGraphQLField<Option['value'], readonly Option[]> {
     const optionValuesSet = new Set(options.map(x => x.value));
     if (!optionValuesSet.has(defaultValue)) {
       throw new Error(
@@ -244,6 +340,16 @@ export const fields = {
       validate(value) {
         return typeof value === 'string' && optionValuesSet.has(value);
       },
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({
+          type: graphql.String,
+          // TODO: investigate why this resolve is required here
+          resolve({ value }) {
+            return value;
+          },
+        }),
+      },
     };
   },
   multiselect<Option extends { label: string; value: string }>({
@@ -254,7 +360,7 @@ export const fields = {
     label: string;
     options: readonly Option[];
     defaultValue: readonly Option['value'][];
-  }): FormField<readonly Option['value'][], readonly Option[]> {
+  }): FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]> {
     const valuesToOption = new Map(options.map(x => [x.value, x]));
     return {
       kind: 'form',
@@ -281,6 +387,16 @@ export const fields = {
           value.every(value => typeof value === 'string' && valuesToOption.has(value))
         );
       },
+      graphql: {
+        input: graphql.list(graphql.nonNull(graphql.String)),
+        output: graphql.field({
+          type: graphql.list(graphql.nonNull(graphql.String)),
+          // TODO: investigate why this resolve is required here
+          resolve({ value }) {
+            return value;
+          },
+        }),
+      },
     };
   },
   checkbox({
@@ -289,7 +405,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: boolean;
-  }): FormField<boolean, undefined> {
+  }): FormFieldWithGraphQLField<boolean, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -312,6 +428,10 @@ export const fields = {
       validate(value) {
         return typeof value === 'boolean';
       },
+      graphql: {
+        input: graphql.Boolean,
+        output: graphql.field({ type: graphql.Boolean }),
+      },
     };
   },
   empty(): FormField<null, undefined> {
@@ -430,8 +550,11 @@ export const fields = {
       many: (many ? true : false) as any,
     };
   },
-  array<ElementField extends ComponentSchema>(element: ElementField): ArrayField<ElementField> {
-    return { kind: 'array', element };
+  array<ElementField extends ComponentSchema>(
+    element: ElementField,
+    opts?: { label?: (props: GenericPreviewProps<ElementField, unknown>) => string }
+  ): ArrayField<ElementField> {
+    return { kind: 'array', element, label: opts?.label };
   },
 };
 
@@ -457,69 +580,88 @@ export type ComponentBlock<
     }
 );
 
+type ChildFieldPreviewProps<Schema extends ChildField, ChildFieldElement> = {
+  readonly element: ChildFieldElement;
+  readonly schema: Schema;
+};
+
+type FormFieldPreviewProps<Schema extends FormField<any, any>> = {
+  readonly value: Schema['defaultValue'];
+  onChange(value: Schema['defaultValue']): void;
+  readonly options: Schema['options'];
+  readonly schema: Schema;
+};
+
+type ObjectFieldPreviewProps<Schema extends ObjectField<any>, ChildFieldElement> = {
+  readonly fields: {
+    readonly [Key in keyof Schema['fields']]: GenericPreviewProps<
+      Schema['fields'][Key],
+      ChildFieldElement
+    >;
+  };
+  onChange(value: {
+    readonly [Key in keyof Schema['fields']]?: InitialOrUpdateValueFromComponentPropField<
+      Schema['fields'][Key]
+    >;
+  }): void;
+  readonly schema: Schema;
+};
+
+type ConditionalFieldPreviewProps<
+  Schema extends ConditionalField<FormField<string | boolean, any>, any>,
+  ChildFieldElement
+> = {
+  readonly [Key in keyof Schema['values']]: {
+    readonly discriminant: DiscriminantStringToDiscriminantValue<Schema['discriminant'], Key>;
+    onChange<Discriminant extends Schema['discriminant']['defaultValue']>(
+      discriminant: Discriminant,
+      value?: InitialOrUpdateValueFromComponentPropField<Schema['values'][`${Discriminant}`]>
+    ): void;
+    readonly options: Schema['discriminant']['options'];
+    readonly value: GenericPreviewProps<Schema['values'][Key], ChildFieldElement>;
+    readonly schema: Schema;
+  };
+}[keyof Schema['values']];
+
+// this is a separate type so that this is distributive
+type RelationshipDataType<Many extends boolean> = Many extends true
+  ? readonly HydratedRelationshipData[]
+  : HydratedRelationshipData | null;
+
+type RelationshipFieldPreviewProps<Schema extends RelationshipField<boolean>> = {
+  readonly value: RelationshipDataType<Schema['many']>;
+  onChange(relationshipData: RelationshipDataType<Schema['many']>): void;
+  readonly schema: Schema;
+};
+
+type ArrayFieldPreviewProps<Schema extends ArrayField<ComponentSchema>, ChildFieldElement> = {
+  readonly elements: readonly (GenericPreviewProps<Schema['element'], ChildFieldElement> & {
+    readonly key: string;
+  })[];
+  readonly onChange: (
+    value: readonly {
+      key: string | undefined;
+      value?: InitialOrUpdateValueFromComponentPropField<Schema['element']>;
+    }[]
+  ) => void;
+  readonly schema: Schema;
+};
+
 export type GenericPreviewProps<
   Schema extends ComponentSchema,
   ChildFieldElement
 > = Schema extends ChildField
-  ? {
-      readonly element: ChildFieldElement;
-      readonly schema: Schema;
-    }
+  ? ChildFieldPreviewProps<Schema, ChildFieldElement>
   : Schema extends FormField<infer Value, infer Options>
-  ? {
-      readonly value: Value;
-      onChange(value: Value): void;
-      readonly options: Options;
-      readonly schema: Schema;
-    }
+  ? FormFieldPreviewProps<Schema>
   : Schema extends ObjectField<infer Value>
-  ? {
-      readonly fields: {
-        readonly [Key in keyof Value]: GenericPreviewProps<Value[Key], ChildFieldElement>;
-      };
-      onChange(value: {
-        readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
-      }): void;
-      readonly schema: Schema;
-    }
+  ? ObjectFieldPreviewProps<Schema, ChildFieldElement>
   : Schema extends ConditionalField<infer DiscriminantField, infer Values>
-  ? {
-      readonly [Key in keyof Values]: {
-        readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-        onChange<Discriminant extends DiscriminantField['defaultValue']>(
-          discriminant: Discriminant,
-          value?: InitialOrUpdateValueFromComponentPropField<Values[`${Discriminant}`]>
-        ): void;
-        readonly options: DiscriminantField['options'];
-        readonly value: GenericPreviewProps<Values[Key], ChildFieldElement>;
-        readonly schema: Schema;
-      };
-    }[keyof Values]
+  ? ConditionalFieldPreviewProps<Schema, ChildFieldElement>
   : Schema extends RelationshipField<infer Many>
-  ? {
-      readonly value: Many extends true
-        ? readonly HydratedRelationshipData[]
-        : HydratedRelationshipData | null;
-      onChange(
-        relationshipData: Many extends true
-          ? readonly HydratedRelationshipData[]
-          : HydratedRelationshipData | null
-      ): void;
-      readonly schema: Schema;
-    }
+  ? RelationshipFieldPreviewProps<Schema>
   : Schema extends ArrayField<infer ElementField>
-  ? {
-      readonly elements: readonly (GenericPreviewProps<ElementField, ChildFieldElement> & {
-        readonly key: string;
-      })[];
-      readonly onChange: (
-        value: readonly {
-          key: string | undefined;
-          value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
-        }[]
-      ) => void;
-      readonly schema: Schema;
-    }
+  ? ArrayFieldPreviewProps<Schema, ChildFieldElement>
   : never;
 
 export type PreviewProps<Schema extends ComponentSchema> = GenericPreviewProps<Schema, ReactNode>;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
index 33dddc903e5..8cc57dc84af 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
@@ -3,9 +3,11 @@
 import { useKeystone } from '@keystone-6/core/admin-ui/context';
 import { RelationshipSelect } from '@keystone-6/core/fields/types/relationship/views/RelationshipSelect';
 import { Button } from '@keystone-ui/button';
-import { Box, jsx, Stack } from '@keystone-ui/core';
+import { jsx, Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import { memo, useMemo } from 'react';
+import { PlusCircleIcon } from '@keystone-ui/icons/icons/PlusCircleIcon';
+import { AlertDialog } from '@keystone-ui/modals';
+import { memo, useCallback, useMemo, useState, MemoExoticComponent, ReactElement } from 'react';
 import { DragHandle, OrderableItem, OrderableList, RemoveButton } from '../primitives/orderable';
 import {
   ArrayField,
@@ -17,7 +19,9 @@ import {
   RelationshipData,
   RelationshipField,
 } from './api';
-import { assertNever } from './utils';
+import { previewPropsToValue, setValueToPreviewProps } from './get-value';
+import { createGetPreviewProps } from './preview-props';
+import { assertNever, clientSideValidateProp } from './utils';
 
 type DefaultFieldProps<Key> = GenericPreviewProps<
   Extract<ComponentSchema, { kind: Key }>,
@@ -32,7 +36,13 @@ function ArrayFieldPreview(props: DefaultFieldProps<'array'>) {
     <Stack gap="medium">
       <OrderableList {...props}>
         {props.elements.map(val => {
-          return <OrderableItemInForm elementKey={val.key} {...val} />;
+          return (
+            <OrderableItemInForm
+              elementKey={val.key}
+              label={props.schema.label?.(val) ?? 'Item'}
+              {...val}
+            />
+          );
         })}
       </OrderableList>
       <Button
@@ -40,8 +50,11 @@ function ArrayFieldPreview(props: DefaultFieldProps<'array'>) {
         onClick={() => {
           props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
         }}
+        tone="active"
       >
-        Add
+        <Stack gap="small" across>
+          <PlusCircleIcon size="smallish" /> <span>Add</span>
+        </Stack>
       </Button>
     </Stack>
   );
@@ -179,12 +192,14 @@ const fieldRenderers = {
   conditional: ConditionalFieldPreview,
 };
 
-export const FormValueContentFromPreviewProps = memo(function FormValueContentFromPreview(
-  props: GenericPreviewProps<NonChildFieldComponentSchema, unknown> & {
-    autoFocus?: boolean;
-    forceValidation?: boolean;
-  }
-) {
+export const FormValueContentFromPreviewProps: MemoExoticComponent<
+  (
+    props: GenericPreviewProps<NonChildFieldComponentSchema, unknown> & {
+      autoFocus?: boolean;
+      forceValidation?: boolean;
+    }
+  ) => ReactElement
+> = memo(function FormValueContentFromPreview(props) {
   const Comp = fieldRenderers[props.schema.kind];
   return <Comp {...(props as any)} />;
 });
@@ -192,21 +207,98 @@ export const FormValueContentFromPreviewProps = memo(function FormValueContentFr
 const OrderableItemInForm = memo(function OrderableItemInForm(
   props: GenericPreviewProps<ComponentSchema, unknown> & {
     elementKey: string;
+    label: string;
   }
 ) {
+  const [modalState, setModalState] = useState<
+    { state: 'open'; value: unknown; forceValidation: boolean } | { state: 'closed' }
+  >({ state: 'closed' });
+  const onModalChange = useCallback(
+    (cb: (value: unknown) => unknown) => {
+      setModalState(state => {
+        if (state.state === 'open') {
+          return { state: 'open', forceValidation: state.forceValidation, value: cb(state.value) };
+        }
+        return state;
+      });
+    },
+    [setModalState]
+  );
   return (
     <OrderableItem elementKey={props.elementKey}>
-      <div css={{ display: 'flex', justifyContent: 'space-between' }}>
-        <DragHandle />
-        <RemoveButton />
-      </div>
-      <Box paddingX="medium" paddingBottom="medium">
-        {isNonChildFieldPreviewProps(props) && <FormValueContentFromPreviewProps {...props} />}
-      </Box>
+      <Stack gap="medium">
+        <div css={{ display: 'flex', gap: 4 }}>
+          <Stack across gap="xsmall" align="center" css={{ cursor: 'pointer' }}>
+            <DragHandle />
+          </Stack>
+          <Button
+            weight="none"
+            onClick={() => {
+              setModalState({
+                state: 'open',
+                value: previewPropsToValue(props),
+                forceValidation: false,
+              });
+            }}
+            css={{ flexGrow: 1, justifyContent: 'start' }}
+          >
+            <span css={{ fontSize: 16, fontWeight: 'bold', textAlign: 'start' }}>
+              {props.label}
+            </span>
+          </Button>
+          <RemoveButton />
+        </div>
+        {isNonChildFieldPreviewProps(props) && (
+          <AlertDialog
+            title={`Edit Item`}
+            actions={{
+              confirm: {
+                action: () => {
+                  if (modalState.state !== 'open') return;
+                  if (!clientSideValidateProp(props.schema, modalState.value)) {
+                    setModalState(state => ({ ...state, forceValidation: true }));
+                    return;
+                  }
+                  setValueToPreviewProps(modalState.value, props);
+                  setModalState({ state: 'closed' });
+                },
+                label: 'Done',
+              },
+              cancel: {
+                action: () => {
+                  setModalState({ state: 'closed' });
+                },
+                label: 'Cancel',
+              },
+            }}
+            isOpen={modalState.state === 'open'}
+          >
+            {modalState.state === 'open' && (
+              <ArrayFieldItemModalContent
+                onChange={onModalChange}
+                schema={props.schema}
+                value={modalState.value}
+              />
+            )}
+          </AlertDialog>
+        )}
+      </Stack>
     </OrderableItem>
   );
 });
 
+function ArrayFieldItemModalContent(props: {
+  schema: NonChildFieldComponentSchema;
+  value: unknown;
+  onChange: (cb: (value: unknown) => unknown) => void;
+}) {
+  const previewProps = useMemo(
+    () => createGetPreviewProps(props.schema, props.onChange, () => undefined),
+    [props.schema, props.onChange]
+  )(props.value);
+  return <FormValueContentFromPreviewProps {...previewProps} />;
+}
+
 function findFocusableObjectFieldKey(schema: ObjectField): string | undefined {
   for (const [key, innerProp] of Object.entries(schema.fields)) {
     const childFocusable = canFieldBeFocused(innerProp);
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts b/packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts
new file mode 100644
index 00000000000..118ba896b54
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts
@@ -0,0 +1,127 @@
+import {
+  ComponentSchema,
+  GenericPreviewProps,
+  InitialOrUpdateValueFromComponentPropField,
+  ValueForComponentSchema,
+} from './api';
+import { getKeysForArrayValue, setKeysForArrayValue } from './preview-props';
+import { assertNever } from './utils';
+
+const previewPropsToValueConverter: {
+  [Kind in ComponentSchema['kind']]: (
+    props: GenericPreviewProps<Extract<ComponentSchema, { kind: Kind }>, unknown>
+  ) => ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>;
+} = {
+  child() {
+    return null;
+  },
+  form(props) {
+    return props.value;
+  },
+  array(props) {
+    const values = props.elements.map(x => previewPropsToValue(x));
+    setKeysForArrayValue(
+      values,
+      props.elements.map(x => x.key)
+    );
+    return values;
+  },
+  conditional(props) {
+    return {
+      discriminant: props.discriminant,
+      value: previewPropsToValue(props.value),
+    };
+  },
+  object(props) {
+    return Object.fromEntries(
+      Object.entries(props.fields).map(([key, val]) => [key, previewPropsToValue(val)])
+    );
+  },
+  relationship(props) {
+    return props.value;
+  },
+};
+
+export function previewPropsToValue<Schema extends ComponentSchema>(
+  props: GenericPreviewProps<ComponentSchema, unknown>
+): ValueForComponentSchema<Schema> {
+  return (previewPropsToValueConverter[props.schema.kind] as any)(props);
+}
+
+const valueToUpdaters: {
+  [Kind in ComponentSchema['kind']]: (
+    value: ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>,
+    schema: Extract<ComponentSchema, { kind: Kind }>
+  ) => InitialOrUpdateValueFromComponentPropField<Extract<ComponentSchema, { kind: Kind }>>;
+} = {
+  child() {
+    return undefined;
+  },
+  form(value) {
+    return value;
+  },
+  array(value, schema) {
+    const keys = getKeysForArrayValue(value);
+    return value.map((x, i) => ({
+      key: keys[i],
+      value: valueToUpdater(x, schema.element),
+    }));
+  },
+  conditional(value, schema) {
+    return {
+      discriminant: value.discriminant,
+      value: valueToUpdater(value.value, schema.values[value.discriminant.toString()]),
+    };
+  },
+  object(value, schema) {
+    return Object.fromEntries(
+      Object.entries(schema.fields).map(([key, schema]) => [
+        key,
+        valueToUpdater(value[key], schema),
+      ])
+    );
+  },
+  relationship(value) {
+    return value;
+  },
+};
+
+function valueToUpdater<Schema extends ComponentSchema>(
+  value: ValueForComponentSchema<Schema>,
+  schema: ComponentSchema
+): InitialOrUpdateValueFromComponentPropField<Schema> {
+  return (valueToUpdaters[schema.kind] as any)(value, schema);
+}
+
+export function setValueToPreviewProps<Schema extends ComponentSchema>(
+  value: ValueForComponentSchema<Schema>,
+  props: GenericPreviewProps<ComponentSchema, unknown>
+) {
+  if (isKind(props, 'child')) {
+    // child fields can't be updated through preview props, so we don't do anything here
+    return;
+  }
+  if (
+    isKind(props, 'form') ||
+    isKind(props, 'relationship') ||
+    isKind(props, 'object') ||
+    isKind(props, 'array')
+  ) {
+    props.onChange(valueToUpdater(value, props.schema));
+    return;
+  }
+  if (isKind(props, 'conditional')) {
+    const updater = valueToUpdater(value, props.schema);
+    props.onChange(updater.discriminant, updater.value);
+    return;
+  }
+  assertNever(props);
+}
+
+// this exists because for props.schema.kind === 'form', ts doesn't narrow props, only props.schema
+function isKind<Kind extends ComponentSchema['kind']>(
+  props: GenericPreviewProps<ComponentSchema, unknown>,
+  kind: Kind
+): props is GenericPreviewProps<Extract<ComponentSchema, { kind: Kind }>, unknown> {
+  return props.schema.kind === kind;
+}
diff --git a/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx b/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
index b39d59a63d3..7eeadeafa81 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
@@ -57,13 +57,13 @@ export function OrderableList(props: {
         modifiers={[restrictToVerticalAxis]}
         onDragEnd={({ over, active }) => {
           if (over && over.id !== active.id) {
-            const activeIndex = props.elements.findIndex(
-              x => (typeof x === 'string' ? x : x.key) === active.id
+            const activeIndex = props.elements.findIndex(x => x.key === active.id);
+            const overIndex = props.elements.findIndex(x => x.key === over.id);
+            const newValue = arrayMove(
+              props.elements.map(x => ({ key: x.key })),
+              activeIndex,
+              overIndex
             );
-            const overIndex = props.elements.findIndex(
-              x => (typeof x === 'string' ? x : x.key) === over.id
-            );
-            const newValue = arrayMove(props.elements as { key: string }[], activeIndex, overIndex);
             props.onChange(newValue);
           }
         }}
@@ -156,7 +156,6 @@ export function RemoveButton() {
 
   return (
     <Button
-      size="small"
       weight="none"
       css={{ padding: 7 }}
       onClick={() => onRemove(sortable.index)}
diff --git a/packages/fields-document/src/component-blocks.tsx b/packages/fields-document/src/component-blocks.tsx
index 6e131eec1d3..ac7af409f40 100644
--- a/packages/fields-document/src/component-blocks.tsx
+++ b/packages/fields-document/src/component-blocks.tsx
@@ -10,4 +10,5 @@ export type {
   RelationshipField,
   InferRenderersForComponentBlocks,
   ArrayField,
+  ComponentSchemaForGraphQL,
 } from './DocumentEditor/component-blocks/api';
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index dae0e709b4b..ca54b7d2c11 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -275,3 +275,5 @@ function normaliseDocumentFeatures(
   };
   return documentFeatures;
 }
+
+export { structure } from './structure';
diff --git a/packages/fields-document/src/structure-graphql-input.tsx b/packages/fields-document/src/structure-graphql-input.tsx
new file mode 100644
index 00000000000..4864da3427e
--- /dev/null
+++ b/packages/fields-document/src/structure-graphql-input.tsx
@@ -0,0 +1,506 @@
+import { graphql } from '@keystone-6/core';
+import { BaseItem, FieldData, GraphQLTypesForList, KeystoneContext } from '@keystone-6/core/types';
+import { GraphQLResolveInfo } from 'graphql';
+
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { assertNever, ReadonlyPropPath } from './DocumentEditor/component-blocks/utils';
+
+export function getGraphQLInputType(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  operation: 'create' | 'update',
+  cache: Map<ComponentSchemaForGraphQL, graphql.InputType>,
+  meta: FieldData
+) {
+  if (!cache.has(schema)) {
+    const res = getGraphQLInputTypeInner(name, schema, operation, cache, meta);
+    cache.set(schema, res);
+  }
+  return cache.get(schema)!;
+}
+
+function getGraphQLInputTypeInner(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  operation: 'create' | 'update',
+  cache: Map<ComponentSchemaForGraphQL, graphql.InputType>,
+  meta: FieldData
+): graphql.InputType {
+  if (schema.kind === 'form') {
+    return schema.graphql.input;
+  }
+  if (schema.kind === 'object') {
+    return graphql.inputObject({
+      name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
+      fields: () =>
+        Object.fromEntries(
+          Object.entries(schema.fields).map(
+            ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+              const type = getGraphQLInputType(
+                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                val,
+                operation,
+                cache,
+                meta
+              );
+              return [key, graphql.arg({ type })];
+            }
+          )
+        ),
+    });
+  }
+  if (schema.kind === 'array') {
+    const innerType = getGraphQLInputType(name, schema.element, operation, cache, meta);
+    return graphql.list(innerType);
+  }
+  if (schema.kind === 'conditional') {
+    return graphql.inputObject({
+      name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
+      fields: () =>
+        Object.fromEntries(
+          Object.entries(schema.values).map(
+            ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+              const type = getGraphQLInputType(
+                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                val,
+                operation,
+                cache,
+                meta
+              );
+              return [key, graphql.arg({ type })];
+            }
+          )
+        ),
+    });
+  }
+
+  if (schema.kind === 'relationship') {
+    const inputType =
+      meta.lists[schema.listKey].types.relateTo[schema.many ? 'many' : 'one'][operation];
+    // there are cases where this won't exist
+    // for example if gql omit is enabled on the related field
+    if (inputType === undefined) {
+      throw new Error('');
+    }
+    return inputType;
+  }
+
+  assertNever(schema);
+}
+
+export async function getValueForUpdate(
+  schema: ComponentSchemaForGraphQL,
+  value: any,
+  prevValue: any,
+  context: KeystoneContext,
+  path: ReadonlyPropPath
+): Promise<any> {
+  if (value === undefined) {
+    return prevValue;
+  }
+  if (prevValue === undefined) {
+    prevValue = getInitialPropsValue(schema);
+  }
+
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
+      return value;
+    }
+    throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
+  }
+  if (value === null) {
+    throw new Error(
+      `${
+        schema.kind[0].toUpperCase() + schema.kind.slice(1)
+      } fields cannot be set to null but the field at '${path.join('.')}' is null`
+    );
+  }
+  if (schema.kind === 'object') {
+    return Object.fromEntries(
+      await Promise.all(
+        Object.entries(schema.fields).map(async ([key, val]) => {
+          return [
+            key,
+            await getValueForUpdate(val, value[key], prevValue[key], context, path.concat(key)),
+          ];
+        })
+      )
+    );
+  }
+  if (schema.kind === 'array') {
+    return Promise.all(
+      (value as any[]).map((val, i) =>
+        getValueForUpdate(schema.element, val, prevValue[i], context, path.concat(i))
+      )
+    );
+  }
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['update']>>
+      >)!;
+      return resolveRelateToManyForUpdateInput(val, context, schema.listKey, prevValue);
+    } else {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['update']>>
+      >)!;
+
+      return resolveRelateToOneForUpdateInput(val, context, schema.listKey);
+    }
+  }
+  if (schema.kind === 'conditional') {
+    const conditionalValueKeys = Object.keys(value);
+    if (conditionalValueKeys.length !== 1) {
+      throw new Error(
+        `Conditional field inputs must set exactly one of the fields but the field at ${path.join(
+          '.'
+        )} has ${conditionalValueKeys.length} fields set`
+      );
+    }
+    const key = conditionalValueKeys[0];
+    let discriminant: string | boolean = key;
+    if ((key === 'true' || key === 'false') && !schema.discriminant.validate(key)) {
+      discriminant = key === 'true';
+    }
+    return {
+      discriminant,
+      value: await getValueForUpdate(
+        (schema.values as any)[key],
+        value[key],
+        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(schema),
+        context,
+        path.concat('value')
+      ),
+    };
+  }
+
+  assertNever(schema);
+}
+
+export async function getValueForCreate(
+  schema: ComponentSchemaForGraphQL,
+  value: any,
+  context: KeystoneContext,
+  path: ReadonlyPropPath
+): Promise<any> {
+  // If value is undefined, get the specified defaultValue
+  if (value === undefined) {
+    return getInitialPropsValue(schema);
+  }
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
+      return value;
+    }
+    throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
+  }
+  if (value === null) {
+    throw new Error(
+      `${
+        schema.kind[0].toUpperCase() + schema.kind.slice(1)
+      } fields cannot be set to null but the field at '${path.join('.')}' is null`
+    );
+  }
+  if (schema.kind === 'array') {
+    return Promise.all(
+      (value as any[]).map((val, i) =>
+        getValueForCreate(schema.element, val, context, path.concat(i))
+      )
+    );
+  }
+  if (schema.kind === 'object') {
+    return Object.fromEntries(
+      await Promise.all(
+        Object.entries(schema.fields).map(async ([key, val]) => {
+          return [key, await getValueForCreate(val, value[key], context, path.concat(key))];
+        })
+      )
+    );
+  }
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['create']>>
+      >)!;
+
+      return resolveRelateToManyForCreateInput(val, context, schema.listKey);
+    } else {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['create']>>
+      >)!;
+
+      return resolveRelateToOneForCreateInput(val, context, schema.listKey);
+    }
+  }
+  if (schema.kind === 'conditional') {
+    if (value === null) {
+      throw new Error();
+    }
+    const conditionalValueKeys = Object.keys(value);
+    if (conditionalValueKeys.length !== 1) {
+      throw new Error();
+    }
+    const key = conditionalValueKeys[0];
+    let discriminant: string | boolean = key;
+    if ((key === 'true' || key === 'false') && !schema.discriminant.validate(key)) {
+      discriminant = key === 'true';
+    }
+
+    return {
+      discriminant,
+      value: await getValueForCreate(
+        (schema.values as any)[key],
+        value[key],
+        context,
+        path.concat('value')
+      ),
+    };
+  }
+
+  assertNever(schema);
+}
+/** MANY */
+
+type _CreateValueManyType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<Exclude<GraphQLTypesForList['relateTo']['many']['create'], undefined>>
+  >,
+  null | undefined
+>;
+
+type _UpdateValueManyType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<Exclude<GraphQLTypesForList['relateTo']['many']['update'], undefined>>
+  >,
+  null | undefined
+>;
+
+export class RelationshipErrors extends Error {
+  errors: { error: Error; tag: string }[];
+  constructor(errors: { error: Error; tag: string }[]) {
+    super('Multiple relationship errors');
+    this.errors = errors;
+  }
+}
+
+function getResolvedUniqueWheres(
+  uniqueInputs: Record<string, any>[],
+  context: KeystoneContext,
+  foreignListKey: string,
+  operation: string
+) {
+  return uniqueInputs.map(uniqueInput =>
+    checkUniqueItemExists(uniqueInput, foreignListKey, context, operation)
+  );
+}
+
+// these aren't here out of thinking this is better syntax(i do not think it is),
+// it's just because TS won't infer the arg is X bit
+export const isFulfilled = <T,>(arg: PromiseSettledResult<T>): arg is PromiseFulfilledResult<T> =>
+  arg.status === 'fulfilled';
+export const isRejected = (arg: PromiseSettledResult<any>): arg is PromiseRejectedResult =>
+  arg.status === 'rejected';
+
+export async function resolveRelateToManyForCreateInput(
+  value: _CreateValueManyType,
+  context: KeystoneContext,
+  foreignListKey: string,
+  tag?: string
+) {
+  if (!Array.isArray(value.connect) && !Array.isArray(value.create)) {
+    throw new Error(
+      `You must provide "connect" or "create" in to-many relationship inputs for "create" operations.`
+    );
+  }
+
+  // Perform queries for the connections
+  const connects = Promise.allSettled(
+    getResolvedUniqueWheres(value.connect || [], context, foreignListKey, 'connect')
+  );
+
+  // Perform nested mutations for the creations
+  const creates = Promise.allSettled(
+    (value.create || []).map(x => resolveCreateMutation(x, context, foreignListKey))
+  );
+
+  const [connectResult, createResult] = await Promise.all([connects, creates]);
+
+  // Collect all the errors
+  const errors = [...connectResult, ...createResult].filter(isRejected);
+  if (errors.length) {
+    // readd tag
+    throw new RelationshipErrors(errors.map(x => ({ error: x.reason, tag: tag || '' })));
+  }
+
+  // Perform queries for the connections
+  return [...connectResult, ...createResult].filter(isFulfilled).map(x => x.value);
+}
+
+export async function resolveRelateToManyForUpdateInput(
+  value: _UpdateValueManyType,
+  context: KeystoneContext,
+  foreignListKey: string,
+  prevVal: { id: string }[]
+) {
+  if (
+    !Array.isArray(value.connect) &&
+    !Array.isArray(value.create) &&
+    !Array.isArray(value.disconnect) &&
+    !Array.isArray(value.set)
+  ) {
+    throw new Error(
+      `You must provide at least one of "set", "connect", "create" or "disconnect" in to-many relationship inputs for "update" operations.`
+    );
+  }
+  if (value.set && value.disconnect) {
+    throw new Error(
+      `The "set" and "disconnect" fields cannot both be provided to to-many relationship inputs for "update" operations.`
+    );
+  }
+
+  // Perform queries for the connections
+  const connects = Promise.allSettled(
+    getResolvedUniqueWheres(value.connect || [], context, foreignListKey, 'connect')
+  );
+
+  const disconnects = Promise.allSettled(
+    getResolvedUniqueWheres(value.disconnect || [], context, foreignListKey, 'disconnect')
+  );
+
+  const sets = Promise.allSettled(
+    getResolvedUniqueWheres(value.set || [], context, foreignListKey, 'set')
+  );
+
+  // Perform nested mutations for the creations
+  const creates = Promise.allSettled(
+    (value.create || []).map(x => resolveCreateMutation(x, context, foreignListKey))
+  );
+
+  const [connectResult, createResult, disconnectResult, setResult] = await Promise.all([
+    connects,
+    creates,
+    disconnects,
+    sets,
+  ]);
+
+  // Collect all the errors
+  const errors = [...connectResult, ...createResult, ...disconnectResult, ...setResult].filter(
+    isRejected
+  );
+  if (errors.length) {
+    throw new RelationshipErrors(errors.map(x => ({ error: x.reason, tag: '' })));
+  }
+
+  let values = prevVal;
+
+  if (value.set) {
+    values = setResult.filter(isFulfilled).map(x => x.value);
+  }
+
+  const idsToDisconnect = new Set(disconnectResult.filter(isFulfilled).map(x => x.value.id));
+  values = values.filter(x => !idsToDisconnect.has(x.id));
+  values.push(...connectResult.filter(isFulfilled).map(x => x.value));
+  values.push(...createResult.filter(isFulfilled).map(x => x.value));
+
+  return values;
+}
+
+/** ONE */
+
+type _CreateValueType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<Exclude<GraphQLTypesForList['relateTo']['one']['create'], undefined>>
+  >,
+  null | undefined
+>;
+type _UpdateValueType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<
+      graphql.NonNullType<Exclude<GraphQLTypesForList['relateTo']['one']['update'], undefined>>
+    >
+  >,
+  null | undefined
+>;
+
+const missingItem = (operation: string, uniqueWhere: Record<string, any>) => {
+  throw new Error(
+    `You cannot perform the '${operation}' operation on the item '${JSON.stringify(
+      uniqueWhere
+    )}'. It may not exist.`
+  );
+};
+
+export async function checkUniqueItemExists(
+  uniqueInput: Record<string, unknown>,
+  listKey: string,
+  context: KeystoneContext,
+  operation: string
+) {
+  // Check whether the item exists (from this users POV).
+  const item = await context.db[listKey].findOne({ where: uniqueInput });
+  if (item === null) {
+    throw missingItem(operation, uniqueInput);
+  }
+
+  return { id: item.id.toString() };
+}
+
+async function handleCreateAndUpdate(
+  value: _CreateValueType,
+  context: KeystoneContext,
+  foreignListKey: string
+) {
+  if (value.connect) {
+    return checkUniqueItemExists(value.connect, foreignListKey, context, 'connect');
+  } else if (value.create) {
+    return resolveCreateMutation(value, context, foreignListKey);
+  }
+}
+
+async function resolveCreateMutation(value: any, context: KeystoneContext, foreignListKey: string) {
+  const mutationType = context.graphql.schema.getMutationType()!;
+  const { id } = (await mutationType.getFields()[
+    context.gqlNames(foreignListKey).createMutationName
+  ].resolve!(
+    {},
+    { data: value.create },
+    context,
+    // we happen to know this isn't used
+    // no one else should rely on that though
+    // it could change in the future
+    {} as GraphQLResolveInfo
+  )) as BaseItem;
+  return { id: id.toString() };
+}
+
+export function resolveRelateToOneForCreateInput(
+  value: _CreateValueType,
+  context: KeystoneContext,
+  foreignListKey: string
+) {
+  const numOfKeys = Object.keys(value).length;
+  if (numOfKeys !== 1) {
+    throw new Error(
+      `You must provide "connect" or "create" in to-one relationship inputs for "create" operations.`
+    );
+  }
+  return handleCreateAndUpdate(value, context, foreignListKey);
+}
+
+export function resolveRelateToOneForUpdateInput(
+  value: _UpdateValueType,
+  context: KeystoneContext,
+  foreignListKey: string
+) {
+  if (Object.keys(value).length !== 1) {
+    throw new Error(
+      `You must provide one of "connect", "create" or "disconnect" in to-one relationship inputs for "update" operations.`
+    );
+  }
+
+  if (value.connect || value.create) {
+    return handleCreateAndUpdate(value, context, foreignListKey);
+  } else if (value.disconnect) {
+    return null;
+  }
+}
diff --git a/packages/fields-document/src/structure-graphql-output.tsx b/packages/fields-document/src/structure-graphql-output.tsx
new file mode 100644
index 00000000000..dab1726f485
--- /dev/null
+++ b/packages/fields-document/src/structure-graphql-output.tsx
@@ -0,0 +1,197 @@
+import { graphql } from '@keystone-6/core';
+import { FieldData } from '@keystone-6/core/types';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import { assertNever } from './DocumentEditor/component-blocks/utils';
+
+function wrapGraphQLFieldInResolver<InputSource, OutputSource>(
+  inputField: graphql.Field<
+    { value: InputSource },
+    Record<string, graphql.Arg<graphql.InputType, boolean>>,
+    graphql.OutputType,
+    'value'
+  >,
+  getVal: (outputSource: OutputSource) => InputSource
+): graphql.Field<
+  OutputSource,
+  Record<string, graphql.Arg<graphql.InputType, boolean>>,
+  graphql.OutputType,
+  string
+> {
+  return graphql.field({
+    type: inputField.type,
+    args: inputField.args,
+    deprecationReason: inputField.deprecationReason,
+    description: inputField.description,
+    extensions: inputField.extensions as any,
+    resolve(value, args, context, info) {
+      const val = getVal(value);
+      if (!inputField.resolve) {
+        return val;
+      }
+      return inputField.resolve({ value: val }, args, context, info);
+    },
+  });
+}
+
+type OutputField = graphql.Field<
+  { value: unknown },
+  Record<string, graphql.Arg<graphql.InputType, boolean>>,
+  graphql.OutputType,
+  string
+>;
+
+export function getOutputGraphQLField(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[],
+  cache: Map<ComponentSchemaForGraphQL, OutputField>,
+  meta: FieldData
+) {
+  if (!cache.has(schema)) {
+    const res = getOutputGraphQLFieldInner(name, schema, interfaceImplementations, cache, meta);
+    cache.set(schema, res);
+  }
+  return cache.get(schema)!;
+}
+
+function getOutputGraphQLFieldInner(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[],
+  cache: Map<ComponentSchemaForGraphQL, OutputField>,
+  meta: FieldData
+): OutputField {
+  if (schema.kind === 'form') {
+    return wrapGraphQLFieldInResolver(schema.graphql.output, x => x);
+  }
+  if (schema.kind === 'object') {
+    return graphql.field({
+      type: graphql.object<unknown>()({
+        name,
+        fields: () =>
+          Object.fromEntries(
+            Object.entries(schema.fields).map(
+              ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
+                const field = getOutputGraphQLField(
+                  `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                  val,
+                  interfaceImplementations,
+                  cache,
+                  meta
+                );
+                return [key, wrapGraphQLFieldInResolver(field, source => (source as any)[key])];
+              }
+            )
+          ),
+      }),
+      resolve({ value }) {
+        return value;
+      },
+    });
+  }
+  if (schema.kind === 'array') {
+    const innerField = getOutputGraphQLField(
+      name,
+      schema.element,
+      interfaceImplementations,
+      cache,
+      meta
+    );
+    const resolve = innerField.resolve;
+
+    return graphql.field({
+      type: graphql.list(innerField.type),
+      args: innerField.args,
+      deprecationReason: innerField.deprecationReason,
+      description: innerField.description,
+      extensions: innerField.extensions,
+      resolve({ value }, args, context, info) {
+        if (!resolve) {
+          return value as unknown[];
+        }
+        return (value as unknown[]).map(val => resolve({ value: val }, args, context, info));
+      },
+    });
+  }
+  if (schema.kind === 'conditional') {
+    let discriminantField: OutputField;
+
+    const getDiscriminantField = () => {
+      if (!discriminantField) {
+        discriminantField = getOutputGraphQLField(
+          name + 'Discriminant',
+          schema.discriminant,
+          interfaceImplementations,
+          cache,
+          meta
+        );
+      }
+      return discriminantField;
+    };
+    type SourceType = { discriminant: string | boolean; value: unknown };
+
+    const interfaceType = graphql.interface<SourceType>()({
+      name,
+      resolveType: value => {
+        const stringifiedDiscriminant = value.discriminant.toString();
+        return name + stringifiedDiscriminant[0].toUpperCase() + stringifiedDiscriminant.slice(1);
+      },
+      fields: () => ({
+        discriminant: getDiscriminantField(),
+      }),
+    });
+
+    interfaceImplementations.push(
+      ...Object.entries(schema.values).map(([key, val]): graphql.ObjectType<SourceType> => {
+        const innerName = name + key[0].toUpperCase() + key.slice(1);
+        return graphql.object<SourceType>()({
+          name: innerName,
+          interfaces: [interfaceType],
+          fields: () => ({
+            discriminant: wrapGraphQLFieldInResolver(getDiscriminantField(), x => x.discriminant),
+            value: getOutputGraphQLField(
+              `${innerName}Value`,
+              val,
+              interfaceImplementations,
+              cache,
+              meta
+            ),
+          }),
+        });
+      })
+    );
+
+    return graphql.field({
+      type: interfaceType,
+      resolve({ value }) {
+        return value as SourceType;
+      },
+    });
+  }
+
+  if (schema.kind === 'relationship') {
+    const listOutputType = meta.lists[schema.listKey].types.output;
+    return graphql.field({
+      type: schema.many ? graphql.list(listOutputType) : listOutputType,
+      resolve({ value }, args, context) {
+        if (Array.isArray(value)) {
+          return context.db[schema.listKey].findMany({
+            where: {
+              id: { in: (value as { id: string }[]).map(x => x.id) },
+            },
+          });
+        }
+        if ((value as any)?.id == null) {
+          return null;
+        }
+        return context.db[schema.listKey].findOne({
+          where: {
+            id: (value as { id: string }).id,
+          },
+        });
+      },
+    });
+  }
+
+  assertNever(schema);
+}
diff --git a/packages/fields-document/src/structure-views.tsx b/packages/fields-document/src/structure-views.tsx
new file mode 100644
index 00000000000..74da3603ee5
--- /dev/null
+++ b/packages/fields-document/src/structure-views.tsx
@@ -0,0 +1,135 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import { jsx } from '@keystone-ui/core';
+import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
+
+import {
+  CardValueComponent,
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '@keystone-6/core/types';
+import { useEffect, useMemo, useRef } from 'react';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import { assertNever, clientSideValidateProp } from './DocumentEditor/component-blocks/utils';
+import { FormValueContentFromPreviewProps } from './DocumentEditor/component-blocks/form-from-preview';
+import { createGetPreviewProps } from './DocumentEditor/component-blocks/preview-props';
+
+export const Field = ({
+  field,
+  value,
+  onChange,
+  autoFocus,
+  forceValidation,
+}: FieldProps<typeof controller>) => {
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  });
+  const createPreviewProps = useMemo(() => {
+    return createGetPreviewProps(
+      field.schema,
+      getNewVal => {
+        onChange?.({ kind: valueRef.current.kind, value: getNewVal(valueRef.current.value) });
+      },
+      () => undefined
+    );
+  }, [field.schema, onChange]);
+  return (
+    <FieldContainer>
+      <FieldLabel>{field.label}</FieldLabel>
+      <FormValueContentFromPreviewProps
+        forceValidation={forceValidation}
+        autoFocus={autoFocus}
+        {...createPreviewProps(value.value)}
+      />
+    </FieldContainer>
+  );
+};
+
+export const Cell: CellComponent = ({}) => {
+  return null;
+};
+
+export const CardValue: CardValueComponent = ({}) => {
+  return null as any;
+};
+
+export const allowedExportsOnCustomViews = ['schema'];
+
+export const controller = (
+  config: FieldControllerConfig
+): FieldController<{ kind: 'create' | 'update'; value: unknown }> & {
+  schema: ComponentSchemaForGraphQL;
+} => {
+  if (!config.customViews.schema) {
+    throw new Error(
+      `No schema in custom view. Did you forgot to set \`views\` to a file that exports a \`schema\` on ${config.listKey}.${config.path}`
+    );
+  }
+  return {
+    path: config.path,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: `${config.path} { json(hydrateRelationships: true) }`,
+    schema: config.customViews.schema,
+    defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.schema) },
+    validate: value => clientSideValidateProp(config.customViews.schema, value.value),
+    deserialize: data => {
+      return {
+        kind: 'update',
+        value: data[`${config.path}`]?.json ?? null,
+      };
+    },
+    serialize: value => {
+      return {
+        [config.path]: serializeValue(config.customViews.schema, value.value, value.kind),
+      };
+    },
+  };
+};
+
+function serializeValue(
+  schema: ComponentSchemaForGraphQL,
+  value: any,
+  kind: 'update' | 'create'
+): any {
+  if (schema.kind === 'conditional') {
+    return {
+      [value.discriminant]: serializeValue(schema.values[value.discriminant], value.value, kind),
+    };
+  }
+  if (schema.kind === 'array') {
+    return (value as any[]).map(a => serializeValue(schema.element, a, kind));
+  }
+  if (schema.kind === 'form') {
+    return value;
+  }
+  if (schema.kind === 'object') {
+    return Object.fromEntries(
+      Object.entries(schema.fields).map(([key, val]) => {
+        return [key, serializeValue(val, value[key], kind)];
+      })
+    );
+  }
+  if (schema.kind === 'relationship') {
+    if (Array.isArray(value)) {
+      return {
+        [kind === 'create' ? 'connect' : 'set']: value.map(x => ({ id: x.id })),
+      };
+    }
+    if (value === null) {
+      if (kind === 'create') {
+        return undefined;
+      }
+      return { disconnect: true };
+    }
+    return {
+      connect: { id: value.id },
+    };
+  }
+  assertNever(schema);
+}
diff --git a/packages/fields-document/src/structure.ts b/packages/fields-document/src/structure.ts
new file mode 100644
index 00000000000..f6769a26f01
--- /dev/null
+++ b/packages/fields-document/src/structure.ts
@@ -0,0 +1,143 @@
+import {
+  BaseListTypeInfo,
+  FieldTypeFunc,
+  CommonFieldConfig,
+  jsonFieldTypePolyfilledForSQLite,
+  JSONValue,
+} from '@keystone-6/core/types';
+import { graphql } from '@keystone-6/core';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { getOutputGraphQLField } from './structure-graphql-output';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import {
+  getGraphQLInputType,
+  getValueForCreate,
+  getValueForUpdate,
+} from './structure-graphql-input';
+import { assertValidComponentSchema } from './DocumentEditor/component-blocks/field-assertions';
+import { addRelationshipDataToComponentProps, fetchRelationshipData } from './relationship-data';
+
+export type StructureFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
+  CommonFieldConfig<ListTypeInfo> & {
+    db?: { map?: string };
+    schema: ComponentSchemaForGraphQL;
+  };
+
+export const structure =
+  <ListTypeInfo extends BaseListTypeInfo>({
+    schema,
+    ...config
+  }: StructureFieldConfig<ListTypeInfo>): FieldTypeFunc<ListTypeInfo> =>
+  meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type structure");
+    }
+    const lists = new Set(Object.keys(meta.lists));
+    try {
+      assertValidComponentSchema(schema, lists);
+    } catch (err) {
+      throw new Error(`${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`);
+    }
+
+    const defaultValue = getInitialPropsValue(schema);
+
+    const unreferencedConcreteInterfaceImplementations: graphql.ObjectType<any>[] = [];
+
+    const name = meta.listKey + meta.fieldKey[0].toUpperCase() + meta.fieldKey.slice(1);
+    return jsonFieldTypePolyfilledForSQLite(
+      meta.provider,
+      {
+        ...config,
+        hooks: {
+          ...config.hooks,
+          async resolveInput(args) {
+            let val = args.resolvedData[meta.fieldKey];
+            if (args.operation === 'update') {
+              let prevVal = args.item[meta.fieldKey];
+              if (meta.provider === 'sqlite') {
+                prevVal = JSON.parse(prevVal as any);
+                val = args.inputData[meta.fieldKey];
+              }
+              val = await getValueForUpdate(schema, val, prevVal, args.context, []);
+              if (meta.provider === 'sqlite') {
+                val = JSON.stringify(val);
+              }
+            }
+
+            return config.hooks?.resolveInput
+              ? config.hooks.resolveInput({
+                  ...args,
+                  resolvedData: { ...args.resolvedData, [meta.fieldKey]: val },
+                })
+              : val;
+          },
+        },
+        input: {
+          create: {
+            arg: graphql.arg({
+              type: getGraphQLInputType(name, schema, 'create', new Map(), meta),
+            }),
+            async resolve(val, context) {
+              return await getValueForCreate(schema, val, context, []);
+            },
+          },
+          update: {
+            arg: graphql.arg({
+              type: getGraphQLInputType(name, schema, 'update', new Map(), meta),
+            }),
+          },
+        },
+        output: graphql.field({
+          type: graphql.object<{ value: JSONValue }>()({
+            name: `${name}Output`,
+            fields: {
+              structure: getOutputGraphQLField(
+                name,
+                schema,
+                unreferencedConcreteInterfaceImplementations,
+                new Map(),
+                meta
+              ),
+              json: graphql.field({
+                type: graphql.JSON,
+                args: {
+                  hydrateRelationships: graphql.arg({
+                    type: graphql.nonNull(graphql.Boolean),
+                    defaultValue: false,
+                  }),
+                },
+                resolve({ value }, args, context) {
+                  if (args.hydrateRelationships) {
+                    return addRelationshipDataToComponentProps(schema, value, (schema, value) =>
+                      fetchRelationshipData(
+                        context,
+                        schema.listKey,
+                        schema.many,
+                        schema.selection || '',
+                        value
+                      )
+                    );
+                  }
+                  return value;
+                },
+              }),
+            },
+          }),
+          resolve(source) {
+            return source;
+          },
+        }),
+        views: '@keystone-6/fields-document/structure-views',
+        getAdminMeta: () => ({}),
+        unreferencedConcreteInterfaceImplementations,
+      },
+      {
+        default: {
+          kind: 'literal',
+          value: JSON.stringify(defaultValue),
+        },
+        map: config.db?.map,
+        mode: 'required',
+      }
+    );
+  };
diff --git a/packages/fields-document/structure-views/package.json b/packages/fields-document/structure-views/package.json
new file mode 100644
index 00000000000..518f3725b9a
--- /dev/null
+++ b/packages/fields-document/structure-views/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/keystone-6-fields-document-structure-views.cjs.js",
+  "module": "dist/keystone-6-fields-document-structure-views.esm.js"
+}
diff --git a/tests/sandbox/configs/all-the-things.ts b/tests/sandbox/configs/all-the-things.ts
index 659af8f09ae..c2fd4305026 100644
--- a/tests/sandbox/configs/all-the-things.ts
+++ b/tests/sandbox/configs/all-the-things.ts
@@ -17,8 +17,10 @@ import {
   calendarDay,
   multiselect,
 } from '@keystone-6/core/fields';
-import { document } from '@keystone-6/fields-document';
+import { document, structure } from '@keystone-6/fields-document';
 import { componentBlocks } from '../component-blocks';
+import { schema as structureSchema } from '../structure';
+import { schema as structureNestedSchema } from '../structure-nested';
 import { dbConfig, localStorageConfig, trackingFields } from '../utils';
 
 const description =
@@ -28,6 +30,11 @@ export const lists = {
   Thing: list({
     access: allowAll,
     fields: {
+      structure: structure({ schema: structureSchema, ui: { views: './structure' } }),
+      structureNested: structure({
+        schema: structureNestedSchema,
+        ui: { views: './structure-nested' },
+      }),
       ...group({
         label: 'Some group',
         description: 'Some group description',
diff --git a/tests/sandbox/schema.graphql b/tests/sandbox/schema.graphql
index 606fe608c45..75cb55d2d6d 100644
--- a/tests/sandbox/schema.graphql
+++ b/tests/sandbox/schema.graphql
@@ -3,6 +3,8 @@
 
 type Thing {
   id: ID!
+  structure: ThingStructureOutput
+  structureNested: ThingStructureNestedOutput
   checkbox: Boolean
   password: PasswordState
   toOneRelationship: User
@@ -30,6 +32,20 @@ type Thing {
   document: Thing_document_Document
 }
 
+type ThingStructureOutput {
+  structure: [Int]
+  json(hydrateRelationships: Boolean! = false): JSON
+}
+
+type ThingStructureNestedOutput {
+  structure: [ThingStructureNested]
+  json(hydrateRelationships: Boolean! = false): JSON
+}
+
+interface ThingStructureNested {
+  discriminant: String
+}
+
 type PasswordState {
   isSet: Boolean!
 }
@@ -70,6 +86,26 @@ input ThingWhereUniqueInput {
   id: ID
 }
 
+type ThingStructureNestedLeaf implements ThingStructureNested {
+  discriminant: String
+  value: ThingStructureNestedLeafValue
+}
+
+type ThingStructureNestedLeafValue {
+  label: String
+  url: String
+}
+
+type ThingStructureNestedGroup implements ThingStructureNested {
+  discriminant: String
+  value: ThingStructureNestedGroupValue
+}
+
+type ThingStructureNestedGroupValue {
+  label: String
+  children: [ThingStructureNested]
+}
+
 input ThingWhereInput {
   AND: [ThingWhereInput!]
   OR: [ThingWhereInput!]
@@ -252,6 +288,8 @@ enum OrderDirection {
 }
 
 input ThingUpdateInput {
+  structure: [Int]
+  structureNested: [ThingStructureNestedUpdateInput]
   checkbox: Boolean
   password: String
   toOneRelationship: UserRelateToOneForUpdateInput
@@ -276,6 +314,21 @@ input ThingUpdateInput {
   document: JSON
 }
 
+input ThingStructureNestedUpdateInput {
+  leaf: ThingStructureNestedLeafUpdateInput
+  group: ThingStructureNestedGroupUpdateInput
+}
+
+input ThingStructureNestedLeafUpdateInput {
+  label: String
+  url: String
+}
+
+input ThingStructureNestedGroupUpdateInput {
+  label: String
+  children: [ThingStructureNestedUpdateInput]
+}
+
 input UserRelateToOneForUpdateInput {
   create: UserCreateInput
   connect: UserWhereUniqueInput
@@ -306,6 +359,8 @@ input ThingUpdateArgs {
 }
 
 input ThingCreateInput {
+  structure: [Int]
+  structureNested: [ThingStructureNestedCreateInput]
   checkbox: Boolean
   password: String
   toOneRelationship: UserRelateToOneForCreateInput
@@ -330,6 +385,21 @@ input ThingCreateInput {
   document: JSON
 }
 
+input ThingStructureNestedCreateInput {
+  leaf: ThingStructureNestedLeafCreateInput
+  group: ThingStructureNestedGroupCreateInput
+}
+
+input ThingStructureNestedLeafCreateInput {
+  label: String
+  url: String
+}
+
+input ThingStructureNestedGroupCreateInput {
+  label: String
+  children: [ThingStructureNestedCreateInput]
+}
+
 input UserRelateToOneForCreateInput {
   create: UserCreateInput
   connect: UserWhereUniqueInput
diff --git a/tests/sandbox/schema.prisma b/tests/sandbox/schema.prisma
index 59f4288553e..cd41682a2a0 100644
--- a/tests/sandbox/schema.prisma
+++ b/tests/sandbox/schema.prisma
@@ -14,6 +14,8 @@ generator client {
 
 model Thing {
   id                                String    @id @default(cuid())
+  structure                         String    @default("[]")
+  structureNested                   String    @default("[]")
   checkbox                          Boolean   @default(false)
   password                          String?
   toOneRelationship                 User?     @relation("Thing_toOneRelationship", fields: [toOneRelationshipId], references: [id])
diff --git a/tests/sandbox/structure-nested.tsx b/tests/sandbox/structure-nested.tsx
new file mode 100644
index 00000000000..dc5451c460b
--- /dev/null
+++ b/tests/sandbox/structure-nested.tsx
@@ -0,0 +1,40 @@
+import {
+  ArrayField,
+  ComponentSchemaForGraphQL,
+  fields,
+} from '@keystone-6/fields-document/component-blocks';
+
+export const schema: ArrayField<ComponentSchemaForGraphQL> = fields.array(
+  fields.conditional(
+    fields.select({
+      defaultValue: 'leaf',
+      label: 'Type',
+      options: [
+        { label: 'Leaf', value: 'leaf' },
+        { label: 'Group', value: 'group' },
+      ] as const,
+    }),
+    {
+      leaf: fields.object({
+        label: fields.text({ label: 'Label' }),
+        url: fields.url({ label: 'URL' }),
+      }),
+      group: fields.object({
+        label: fields.text({ label: 'Label' }),
+        get children() {
+          return schema;
+        },
+      }),
+    }
+  ),
+  {
+    label: props =>
+      `${
+        props.schema.discriminant.options.find(option => props.discriminant === option.value)?.label
+      } - ${props.value.fields.label.value}${
+        props.discriminant === 'group'
+          ? ` (${props.value.fields.children.elements.length} Items)`
+          : ''
+      }`,
+  }
+);
diff --git a/tests/sandbox/structure.tsx b/tests/sandbox/structure.tsx
new file mode 100644
index 00000000000..a19fa55f627
--- /dev/null
+++ b/tests/sandbox/structure.tsx
@@ -0,0 +1,14 @@
+import {
+  ArrayField,
+  ComponentSchemaForGraphQL,
+  fields,
+} from '@keystone-6/fields-document/component-blocks';
+
+export const schema: ArrayField<ComponentSchemaForGraphQL> = fields.array(
+  fields.integer({ label: 'My integer units' }),
+  {
+    label: props => {
+      return `${props.value} units`;
+    },
+  }
+);