From d995cc6a37b2d48ce8aae8f40c6f12a8bc38d67f Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 7 Feb 2022 11:11:43 +1000
Subject: [PATCH 001/124] WIP

---
 .../component-views/package.json              |  4 ++
 packages/fields-document/package.json         |  8 ++-
 .../DocumentEditor/component-blocks/api.tsx   | 61 +++++++++++++++++--
 .../src/component-views/index.tsx             |  0
 packages/fields-document/src/component.ts     | 59 ++++++++++++++++++
 5 files changed, 124 insertions(+), 8 deletions(-)
 create mode 100644 packages/fields-document/component-views/package.json
 create mode 100644 packages/fields-document/src/component-views/index.tsx
 create mode 100644 packages/fields-document/src/component.ts

diff --git a/packages/fields-document/component-views/package.json b/packages/fields-document/component-views/package.json
new file mode 100644
index 00000000000..d7f7318638e
--- /dev/null
+++ b/packages/fields-document/component-views/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/keystone-6-fields-document-component-views.cjs.js",
+  "module": "dist/keystone-6-fields-document-component-views.esm.js"
+}
diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index d41ac90050a..4c3f4dc1653 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -9,14 +9,16 @@
     "dist",
     "component-blocks",
     "primitives",
-    "views"
+    "views",
+    "component-views"
   ],
   "preconstruct": {
     "entrypoints": [
       "component-blocks.tsx",
       "index.ts",
       "primitives.ts",
-      "views.tsx"
+      "views.tsx",
+      "component-views/index.tsx"
     ]
   },
   "peerDependencies": {
@@ -66,4 +68,4 @@
   "engines": {
     "node": "^14.15 || ^16.13"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index ec6477829e5..a1948efd517 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,
@@ -44,6 +45,19 @@ export type FormField<Value, Options> = {
   validate(value: unknown): boolean;
 };
 
+export type FormFieldWithGraphQLField<Value, Options> = FormField<Value, Options> & {
+  graphql: {
+    output: graphql.Field<
+      { value: Value },
+      Record<string, graphql.Arg<graphql.InputType, boolean>>,
+      graphql.OutputType,
+      'value'
+    >;
+    selection: (fieldKey: string) => string;
+    input: graphql.Arg<graphql.NullableInputType, boolean>;
+  };
+};
+
 type InlineMarksConfig =
   | 'inherit'
   | {
@@ -131,7 +145,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+  }): FormFieldWithGraphQLField<string, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -153,6 +167,11 @@ export const fields = {
       validate(value) {
         return typeof value === 'string';
       },
+      graphql: {
+        input: graphql.arg({ type: graphql.String }),
+        output: graphql.field({ type: graphql.String }),
+        selection: x => x,
+      },
     };
   },
   url({
@@ -161,7 +180,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));
     };
@@ -190,6 +209,11 @@ export const fields = {
       options: undefined,
       defaultValue,
       validate,
+      graphql: {
+        input: graphql.arg({ type: graphql.String }),
+        output: graphql.field({ type: graphql.String }),
+        selection: x => x,
+      },
     };
   },
   select<Option extends { label: string; value: string }>({
@@ -200,7 +224,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));
     return {
       kind: 'form',
@@ -226,6 +250,17 @@ export const fields = {
       validate(value) {
         return typeof value === 'string' && optionValuesSet.has(value);
       },
+      graphql: {
+        input: graphql.arg({ type: graphql.String }),
+        output: graphql.field({
+          type: graphql.String,
+          // TODO: investigate why this resolve is required here
+          resolve({ value }) {
+            return value;
+          },
+        }),
+        selection: x => x,
+      },
     };
   },
   multiselect<Option extends { label: string; value: string }>({
@@ -236,7 +271,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',
@@ -263,6 +298,17 @@ export const fields = {
           value.every(value => typeof value === 'string' && valuesToOption.has(value))
         );
       },
+      graphql: {
+        input: graphql.arg({ type: 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;
+          },
+        }),
+        selection: x => x,
+      },
     };
   },
   checkbox({
@@ -271,7 +317,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: boolean;
-  }): FormField<boolean, undefined> {
+  }): FormFieldWithGraphQLField<boolean, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -294,6 +340,11 @@ export const fields = {
       validate(value) {
         return typeof value === 'boolean';
       },
+      graphql: {
+        input: graphql.arg({ type: graphql.Boolean }),
+        output: graphql.field({ type: graphql.Boolean }),
+        selection: x => x,
+      },
     };
   },
   empty(): FormField<undefined, undefined> {
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
new file mode 100644
index 00000000000..5c2cb13c85b
--- /dev/null
+++ b/packages/fields-document/src/component.ts
@@ -0,0 +1,59 @@
+import path from 'path';
+import {
+  BaseListTypeInfo,
+  JSONValue,
+  FieldTypeFunc,
+  CommonFieldConfig,
+  jsonFieldTypePolyfilledForSQLite,
+} from '@keystone-6/core/types';
+import { graphql } from '@keystone-6/core';
+
+export type ComponentFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
+  CommonFieldConfig<ListTypeInfo> & {
+    db?: { map?: string };
+  };
+
+const views = path.join(path.dirname(__dirname), 'component-views');
+
+export const component =
+  <ListTypeInfo extends BaseListTypeInfo>({
+    ...config
+  }: ComponentFieldConfig<ListTypeInfo> = {}): FieldTypeFunc<ListTypeInfo> =>
+  meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type json");
+    }
+
+    const resolve = (val: JSONValue | undefined) =>
+      val === null && meta.provider === 'postgresql' ? 'DbNull' : val;
+
+    return jsonFieldTypePolyfilledForSQLite(
+      meta.provider,
+      {
+        ...config,
+        input: {
+          create: {
+            arg: graphql.arg({ type: graphql.JSON }),
+            resolve(val) {
+              return resolve(val === undefined ? defaultValue : val);
+            },
+          },
+          update: { arg: graphql.arg({ type: graphql.JSON }), resolve },
+        },
+        output: graphql.field({ type: graphql.JSON }),
+        views,
+        getAdminMeta: () => ({}),
+      },
+      {
+        default:
+          defaultValue === null
+            ? undefined
+            : {
+                kind: 'literal',
+                value: JSON.stringify(defaultValue),
+              },
+        map: config.db?.map,
+        mode: 'required',
+      }
+    );
+  };

From 9718214afd40291a1312da8354faf83b17188161 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 7 Feb 2022 14:45:48 +1000
Subject: [PATCH 002/124] WIP

---
 .../basic/admin/fieldViews/Blah.tsx           |  9 +++
 examples-staging/basic/schema.graphql         |  3 +
 examples-staging/basic/schema.prisma          |  1 +
 examples-staging/basic/schema.ts              |  7 +-
 .../DocumentEditor/component-blocks/form.tsx  | 12 +--
 .../DocumentEditor/component-blocks/index.tsx |  2 +-
 .../src/component-views/index.tsx             | 74 +++++++++++++++++++
 packages/fields-document/src/component.ts     | 27 ++++---
 packages/fields-document/src/index.ts         |  2 +
 9 files changed, 117 insertions(+), 20 deletions(-)
 create mode 100644 examples-staging/basic/admin/fieldViews/Blah.tsx

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
new file mode 100644
index 00000000000..ed763c87782
--- /dev/null
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -0,0 +1,9 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import { fields } from '@keystone-6/fields-document/component-blocks';
+
+export const prop = fields.object({
+  a: fields.text({ label: 'Blah A' }),
+  b: fields.text({ label: 'Blah B' }),
+});
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index 58b60875d7e..dbf04717464 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -406,6 +406,7 @@ type Post {
   id: ID!
   title: String
   status: String
+  blah: JSON
   content: Post_content_Document
   publishDate: DateTime
   author: User
@@ -454,6 +455,7 @@ input PostOrderByInput {
 input PostUpdateInput {
   title: String
   status: String
+  blah: JSON
   content: JSON
   publishDate: DateTime
   author: UserRelateToOneForUpdateInput
@@ -467,6 +469,7 @@ input PostUpdateArgs {
 input PostCreateInput {
   title: String
   status: String
+  blah: JSON
   content: JSON
   publishDate: DateTime
   author: UserRelateToOneForCreateInput
diff --git a/examples-staging/basic/schema.prisma b/examples-staging/basic/schema.prisma
index 236f81c69c0..20ef128b34a 100644
--- a/examples-staging/basic/schema.prisma
+++ b/examples-staging/basic/schema.prisma
@@ -45,6 +45,7 @@ model Post {
   id          String    @id @default(cuid())
   title       String    @default("")
   status      String    @default("draft")
+  blah        String    @default("{\"a\":\"\",\"b\":\"\"}")
   content     String    @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
   publishDate DateTime?
   author      User?     @relation("Post_author", fields: [authorId], references: [id])
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index 9d8716118b8..98107162cea 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -10,9 +10,10 @@ import {
   image,
   file,
 } from '@keystone-6/core/fields';
-import { document } from '@keystone-6/fields-document';
+import { componentThing, document } from '@keystone-6/fields-document';
 import { v4 } from 'uuid';
 import { componentBlocks } from './admin/fieldViews/Content';
+import { prop as blahProp } from './admin/fieldViews/Blah';
 import * as Keystone from '.keystone/types';
 
 type AccessArgs = {
@@ -149,6 +150,10 @@ export const lists: Keystone.Lists = {
         },
         defaultValue: 'draft',
       }),
+      blah: componentThing({
+        prop: blahProp,
+        ui: { views: require.resolve('./admin/fieldViews/Blah.tsx') },
+      }),
       content: document({
         ui: { views: require.resolve('./admin/fieldViews/Content.tsx') },
         relationships: {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index 01691a2f454..805f05015da 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -4,7 +4,7 @@ import { Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import React, { useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
-import { ComponentPropField, RelationshipData, ComponentBlock } from '../../component-blocks';
+import { ComponentPropField, RelationshipData } from '../../component-blocks';
 import { useDocumentFieldRelationships, Relationships } from '../relationship';
 import { assertNever, getPropsForConditionalChange } from './utils';
 import { RelationshipField } from './api';
@@ -175,7 +175,7 @@ function getChildProps(prop: ComponentPropField, value: any): Record<string, Com
   }
 }
 
-function findFirstFocusablePropPath(
+export function findFirstFocusablePropPath(
   props: Record<string, ComponentPropField>,
   path: (string | number)[],
   value: Record<string, any>
@@ -198,24 +198,24 @@ export function FormValue({
   value,
   onClose,
   onChange,
-  componentBlock,
+  componentBlockProps,
   isValid,
 }: {
   value: any;
   onChange(value: any): void;
   onClose(): void;
-  componentBlock: ComponentBlock;
+  componentBlockProps: Record<string, ComponentPropField>;
   isValid: boolean;
 }) {
   const [forceValidation, setForceValidation] = useState(false);
-  const focusablePath = JSON.stringify(findFirstFocusablePropPath(componentBlock.props, [], value));
+  const focusablePath = JSON.stringify(findFirstFocusablePropPath(componentBlockProps, [], value));
   return (
     <Stack gap="xlarge" contentEditable={false}>
       <FormValueContent
         forceValidation={forceValidation}
         onChange={onChange}
         path={[]}
-        prop={{ kind: 'object', value: componentBlock.props }}
+        prop={{ kind: 'object', value: componentBlockProps }}
         value={value}
         stringifiedPropPathToAutoFocus={focusablePath}
       />
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 9f0b1289d82..37a5778726d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -178,7 +178,7 @@ Content:`}
       {editMode && (
         <FormValue
           isValid={isValid}
-          componentBlock={componentBlock}
+          componentBlockProps={componentBlock.props}
           onClose={() => {
             setEditMode(false);
           }}
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index e69de29bb2d..23c9f724f5c 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -0,0 +1,74 @@
+/** @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 { FormValueContent } from '../DocumentEditor/component-blocks/form';
+import { ComponentPropField } from '../component-blocks';
+
+export const Field = ({
+  field,
+  value,
+  onChange,
+  autoFocus,
+  forceValidation,
+}: FieldProps<typeof controller>) => {
+  return (
+    <FieldContainer>
+      <FieldLabel>{field.label}</FieldLabel>
+      <FormValueContent
+        forceValidation={!!forceValidation}
+        onChange={value => {
+          onChange?.(value);
+        }}
+        path={[]}
+        prop={field.prop}
+        value={value}
+        stringifiedPropPathToAutoFocus={autoFocus ? '' : ''}
+      />
+    </FieldContainer>
+  );
+};
+
+export const Cell: CellComponent = ({}) => {
+  return null;
+};
+
+export const CardValue: CardValueComponent = ({}) => {
+  return null as any;
+};
+
+export const allowedExportsOnCustomViews = ['prop'];
+
+export const controller = (
+  config: FieldControllerConfig
+): FieldController<unknown> & {
+  prop: ComponentPropField;
+} => {
+  if (!config.customViews.prop) {
+    throw new Error(
+      `No prop in custom view. Did you forgot to set \`views\` to a file that exports a \`prop\` on ${config.listKey}.${config.path}`
+    );
+  }
+  return {
+    path: config.path,
+    label: config.label,
+    graphqlSelection: `${config.path}`,
+    prop: config.customViews.prop,
+    defaultValue: [{ type: 'paragraph', children: [{ text: '' }] }],
+    deserialize: data => {
+      return data[config.path];
+    },
+    serialize: value => ({
+      [config.path]: value,
+    }),
+  };
+};
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 5c2cb13c85b..4d7c87927b0 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -7,25 +7,31 @@ import {
   jsonFieldTypePolyfilledForSQLite,
 } from '@keystone-6/core/types';
 import { graphql } from '@keystone-6/core';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { ComponentPropField } from './component-blocks';
 
-export type ComponentFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
+export type ComponentThingFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
   CommonFieldConfig<ListTypeInfo> & {
     db?: { map?: string };
+    prop: ComponentPropField;
   };
 
 const views = path.join(path.dirname(__dirname), 'component-views');
 
-export const component =
+export const componentThing =
   <ListTypeInfo extends BaseListTypeInfo>({
+    prop,
     ...config
-  }: ComponentFieldConfig<ListTypeInfo> = {}): FieldTypeFunc<ListTypeInfo> =>
+  }: ComponentThingFieldConfig<ListTypeInfo>): FieldTypeFunc<ListTypeInfo> =>
   meta => {
     if ((config as any).isIndexed === 'unique') {
-      throw Error("isIndexed: 'unique' is not a supported option for field type json");
+      throw Error("isIndexed: 'unique' is not a supported option for field type component");
     }
 
     const resolve = (val: JSONValue | undefined) =>
-      val === null && meta.provider === 'postgresql' ? 'DbNull' : val;
+      val === null && meta.provider === 'postgresql' ? 'JsonNull' : val;
+
+    const defaultValue = getInitialPropsValue(prop, {});
 
     return jsonFieldTypePolyfilledForSQLite(
       meta.provider,
@@ -45,13 +51,10 @@ export const component =
         getAdminMeta: () => ({}),
       },
       {
-        default:
-          defaultValue === null
-            ? undefined
-            : {
-                kind: 'literal',
-                value: JSON.stringify(defaultValue),
-              },
+        default: {
+          kind: 'literal',
+          value: JSON.stringify(defaultValue),
+        },
         map: config.db?.map,
         mode: 'required',
       }
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 747a49e9f71..0b73aebe60c 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -14,6 +14,8 @@ import { DocumentFeatures } from './views';
 import { validateAndNormalizeDocument } from './validation';
 import { addRelationshipData } from './relationship-data';
 
+export { componentThing } from './component';
+
 type RelationshipsConfig = Record<
   string,
   {

From 8feb75bde51863d485cbb1c11c664ae6b6ce14a4 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 7 Feb 2022 15:45:09 +1000
Subject: [PATCH 003/124] array fields, sorta

---
 .../basic/admin/fieldViews/Blah.tsx           |  10 +-
 examples-staging/basic/schema.prisma          |   2 +-
 .../DocumentEditor/component-blocks/api.tsx   |  12 +-
 .../DocumentEditor/component-blocks/form.tsx  | 115 +++++++++++++-----
 .../DocumentEditor/component-blocks/index.tsx |  21 +---
 .../component-blocks/initial-values.ts        |   3 +
 .../DocumentEditor/component-blocks/utils.ts  |  55 +++++++--
 .../fields-document/src/relationship-data.tsx |   7 ++
 packages/fields-document/src/validation.ts    |   8 ++
 9 files changed, 168 insertions(+), 65 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index ed763c87782..0553ae92c54 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -3,7 +3,9 @@
 
 import { fields } from '@keystone-6/fields-document/component-blocks';
 
-export const prop = fields.object({
-  a: fields.text({ label: 'Blah A' }),
-  b: fields.text({ label: 'Blah B' }),
-});
+export const prop = fields.array(
+  fields.object({
+    a: fields.text({ label: 'Blah A' }),
+    b: fields.text({ label: 'Blah B' }),
+  })
+);
diff --git a/examples-staging/basic/schema.prisma b/examples-staging/basic/schema.prisma
index 20ef128b34a..07293662d37 100644
--- a/examples-staging/basic/schema.prisma
+++ b/examples-staging/basic/schema.prisma
@@ -45,7 +45,7 @@ model Post {
   id          String    @id @default(cuid())
   title       String    @default("")
   status      String    @default("draft")
-  blah        String    @default("{\"a\":\"\",\"b\":\"\"}")
+  blah        String    @default("[]")
   content     String    @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
   publishDate DateTime?
   author      User?     @relation("Post_author", fields: [authorId], references: [id])
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index a1948efd517..ea36457970f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -103,6 +103,11 @@ export type ChildField = {
       };
 };
 
+export type ArrayField<ElementField extends ComponentPropField> = {
+  kind: 'array';
+  element: ElementField;
+};
+
 export type RelationshipField<Cardinality extends 'one' | 'many'> = {
   kind: 'relationship';
   relationship: string;
@@ -136,7 +141,9 @@ export type ComponentPropField =
   | FormField<any, any>
   | ObjectField
   | ConditionalField<any, any, any>
-  | RelationshipField<'one' | 'many'>;
+  | RelationshipField<'one' | 'many'>
+  // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
+  | { kind: 'array'; element: ComponentPropField };
 
 export const fields = {
   text({
@@ -447,6 +454,9 @@ export const fields = {
   }): RelationshipField<Cardinality> {
     return { kind: 'relationship', relationship, label };
   },
+  array<ElementField extends ComponentPropField>(element: ElementField): ArrayField<ElementField> {
+    return { kind: 'array', element };
+  },
 };
 
 export type ComponentBlock<
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index 805f05015da..417476c327a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -3,11 +3,12 @@ import { RelationshipSelect } from '@keystone-6/core/fields/types/relationship/v
 import { Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import React, { useState } from 'react';
-import { Button as KeystoneUIButton } from '@keystone-ui/button';
+import { Button, Button as KeystoneUIButton } from '@keystone-ui/button';
 import { ComponentPropField, RelationshipData } from '../../component-blocks';
 import { useDocumentFieldRelationships, Relationships } from '../relationship';
 import { assertNever, getPropsForConditionalChange } from './utils';
 import { RelationshipField } from './api';
+import { getInitialPropsValue } from './initial-values';
 
 // this is in a different component to the other form inputs because it uses useKeystone
 // and we want to render the editor outside of the Admin UI on the docs site
@@ -147,6 +148,39 @@ export function FormValueContent({
       />
     );
   }
+  if (prop.kind === 'array') {
+    return (
+      <Stack gap="xlarge">
+        {(value as any[]).map((val, i) => {
+          return (
+            <div>
+              <div>{dragIcon}</div>
+              <FormValueContent
+                key={i}
+                forceValidation={forceValidation}
+                stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
+                path={path.concat(i)}
+                prop={prop.element}
+                value={val}
+                onChange={val => {
+                  const newValue = [...value];
+                  newValue[i] = val;
+                  onChange(newValue);
+                }}
+              />
+            </div>
+          );
+        })}
+        <Button
+          onClick={() => {
+            onChange([...value, getInitialPropsValue(prop.element, relationships)]);
+          }}
+        >
+          Add
+        </Button>
+      </Stack>
+    );
+  }
   return (
     <prop.Input
       autoFocus={JSON.stringify(path) === stringifiedPropPathToAutoFocus}
@@ -157,41 +191,59 @@ export function FormValueContent({
   );
 }
 
-// child as in the props are a tree and you want the children of a prop, not as in the kind === 'inline'
-function getChildProps(prop: ComponentPropField, value: any): Record<string, ComponentPropField> {
-  if (prop.kind === 'conditional') {
-    return {
-      discriminant: prop.discriminant,
-      value: prop.values[value.discriminant],
-    };
-  } else if (prop.kind === 'form' || prop.kind === 'child' || prop.kind === 'relationship') {
-    return {};
-  } else if (prop.kind === 'object') {
-    return prop.value;
-  } else {
-    assertNever(prop);
-    // TypeScript should understand that this will never happen but for some reason it doesn't
-    return {};
-  }
-}
+const dragIcon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#939393">
+      <circle cy="6" cx="6" r="2" />
+      <circle cy="6" cx="12" r="2" />
+      <circle cy="12" cx="6" r="2" />
+      <circle cy="12" cx="12" r="2" />
+      <circle cy="18" cx="6" r="2" />
+      <circle cy="18" cx="12" r="2" />
+    </g>
+  </svg>
+);
 
 export function findFirstFocusablePropPath(
-  props: Record<string, ComponentPropField>,
+  prop: ComponentPropField,
   path: (string | number)[],
-  value: Record<string, any>
+  value: any
 ): (string | number)[] | undefined {
-  for (const key of Object.keys(props)) {
-    const prop = props[key];
-    const newPath = path.concat(key);
-    if (prop.kind === 'form' || prop.kind === 'relationship') {
-      return newPath;
+  if (prop.kind === 'form' || prop.kind === 'relationship') {
+    return path;
+  }
+  if (prop.kind === 'child') {
+    return undefined;
+  }
+  if (prop.kind === 'object' || prop.kind === 'conditional') {
+    const props: Record<string, ComponentPropField> =
+      prop.kind === 'object'
+        ? prop.value
+        : {
+            discriminant: prop.discriminant,
+            value: prop.values[value.discriminant],
+          };
+    for (const key of Object.keys(props)) {
+      const prop = props[key];
+      const newPath = path.concat(key);
+      const childFocusable = findFirstFocusablePropPath(prop, newPath, value[key]);
+      if (childFocusable) {
+        return childFocusable;
+      }
     }
-    let children = getChildProps(prop, value[key]);
-    const childFocusable = findFirstFocusablePropPath(children, newPath, value[key]);
-    if (childFocusable) {
-      return childFocusable;
+    return undefined;
+  }
+  if (prop.kind === 'array') {
+    for (const [idx, val] of (value as any[]).entries()) {
+      const newPath = path.concat(idx);
+      const childFocusable = findFirstFocusablePropPath(prop, newPath, val);
+      if (childFocusable) {
+        return childFocusable;
+      }
     }
+    return undefined;
   }
+  assertNever(prop);
 }
 
 export function FormValue({
@@ -208,14 +260,15 @@ export function FormValue({
   isValid: boolean;
 }) {
   const [forceValidation, setForceValidation] = useState(false);
-  const focusablePath = JSON.stringify(findFirstFocusablePropPath(componentBlockProps, [], value));
+  const rootProp = { kind: 'object' as const, value: componentBlockProps };
+  const focusablePath = JSON.stringify(findFirstFocusablePropPath(rootProp, [], value));
   return (
     <Stack gap="xlarge" contentEditable={false}>
       <FormValueContent
         forceValidation={forceValidation}
         onChange={onChange}
         path={[]}
-        prop={{ kind: 'object', value: componentBlockProps }}
+        prop={rootProp}
         value={value}
         stringifiedPropPathToAutoFocus={focusablePath}
       />
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 37a5778726d..83fde4f638d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -19,7 +19,7 @@ import {
   useElementWithSetNodes,
   useStaticEditor,
 } from '../utils';
-import { clientSideValidateProp } from './utils';
+import { clientSideValidateProp, getChildFieldAtPropPath } from './utils';
 import { createPreviewProps } from './preview-props';
 import { getInitialValue } from './initial-values';
 import { FormValue } from './form';
@@ -33,24 +33,7 @@ export function getPlaceholderTextForPropPath(
   fields: Record<string, ComponentPropField>,
   formProps: Record<string, any>
 ): string {
-  const prop = propPath[0];
-  const field = fields[prop];
-  if (field.kind === 'relationship' || field.kind === 'form') {
-    throw new Error('unexpected prop field when finding placeholder text for child prop');
-  }
-  if (field.kind === 'object') {
-    return getPlaceholderTextForPropPath(propPath.slice(1), field.value, formProps[prop]);
-  }
-  if (field.kind === 'conditional') {
-    return getPlaceholderTextForPropPath(
-      propPath.slice(1),
-      {
-        value: field.values[formProps[prop].discriminant],
-      },
-      formProps[prop]
-    );
-  }
-  return field.options.placeholder;
+  return getChildFieldAtPropPath(propPath, fields, formProps)?.options.placeholder ?? '';
 }
 
 export function ComponentInlineProp(props: RenderElementProps) {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 2b331ca0a98..6083ca9f8fe 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -52,6 +52,9 @@ export function getInitialPropsValue(prop: ComponentPropField, relationships: Re
       });
       return obj;
     }
+    case 'array': {
+      return [];
+    }
   }
   assertNever(prop);
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index d3bbcf5a569..1d6143b91d0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -32,6 +32,13 @@ function _findChildPropPaths(
       });
       return paths;
     }
+    case 'array': {
+      let paths: PathToChildFieldWithOption[] = [];
+      (value as any[]).forEach((val, i) => {
+        paths.push(..._findChildPropPaths(val, prop.element, path.concat(i)));
+      });
+      return paths;
+    }
   }
 }
 
@@ -159,25 +166,47 @@ export function getDocumentFeaturesForChildField(
   };
 }
 
-export function getChildFieldAtPropPath(
-  [key, ...restOfPath]: (string | number)[],
-  values: Record<string, any>,
-  props: Record<string, ComponentPropField>
+function getChildFieldAtPropPathInner(
+  path: (string | number)[],
+  value: unknown,
+  prop: ComponentPropField
 ): undefined | ChildField {
-  let prop = props[key];
-  if (!prop || prop.kind === 'form' || prop.kind === 'relationship') {
+  // because we're checking the length here
+  // the non-null asserts on shift are fine
+  if (path.length === 0 || prop.kind === 'form' || prop.kind === 'relationship') {
     return;
   }
+  if (prop.kind === 'child') {
+    return prop;
+  }
   if (prop.kind === 'conditional') {
-    const propVal = prop.values[values[key].discriminant];
-    return getChildFieldAtPropPath(restOfPath, values, { value: propVal });
+    path.shift();
+    const propVal = prop.values[(value as any).discriminant];
+    return getChildFieldAtPropPathInner(path, (value as any).value, propVal);
   }
   if (prop.kind === 'object') {
-    return getChildFieldAtPropPath(restOfPath, values[key], prop.value);
+    const key = path.shift()!;
+    return getChildFieldAtPropPathInner(path, (value as any)[key], prop.value[key]);
+  }
+  if (prop.kind === 'array') {
+    const index = path.shift()!;
+    return getChildFieldAtPropPathInner(path, (value as any)[index], prop.element);
   }
+
   return prop;
 }
 
+export function getChildFieldAtPropPath(
+  path: readonly (string | number)[],
+  value: Record<string, unknown>,
+  props: Record<string, ComponentPropField>
+): undefined | ChildField {
+  return getChildFieldAtPropPathInner([...path], value, {
+    kind: 'object',
+    value: props,
+  });
+}
+
 export function clientSideValidateProp(prop: ComponentPropField, value: any): boolean {
   switch (prop.kind) {
     case 'child':
@@ -201,5 +230,13 @@ export function clientSideValidateProp(prop: ComponentPropField, value: any): bo
       }
       return true;
     }
+    case 'array': {
+      for (const innerVal of value) {
+        if (!clientSideValidateProp(prop.element, innerVal)) {
+          return false;
+        }
+      }
+      return true;
+    }
   }
 }
diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index be964949557..f230965b998 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -155,6 +155,13 @@ async function addRelationshipDataToComponentProps(
         ),
       };
     }
+    case 'array': {
+      return await Promise.all(
+        (val as any[]).map(async innerVal =>
+          addRelationshipDataToComponentProps(prop.element, innerVal, fetchData)
+        )
+      );
+    }
   }
   assertNever(prop);
 }
diff --git a/packages/fields-document/src/validation.ts b/packages/fields-document/src/validation.ts
index d645006f16f..591b3877dc4 100644
--- a/packages/fields-document/src/validation.ts
+++ b/packages/fields-document/src/validation.ts
@@ -130,6 +130,14 @@ function validateComponentBlockProps(
     }
     return val;
   }
+  if (prop.kind === 'array') {
+    if (!Array.isArray(value)) {
+      throw new PropValidationError('Array field value must be an array', path);
+    }
+    return value.map((innerVal, i) => {
+      return validateComponentBlockProps(prop.element, innerVal, relationships, path.concat(i));
+    });
+  }
   assertNever(prop);
 }
 

From 5d4f543c08fcdfa73345aff73fc6f76bac79dec9 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 10 Feb 2022 12:57:56 +1000
Subject: [PATCH 004/124] Improve conditional field types

---
 .../DocumentEditor/component-blocks/api.tsx   | 140 ++++++++++--------
 .../DocumentEditor/component-blocks/form.tsx  |   3 +-
 .../DocumentEditor/component-blocks/utils.ts  |   2 +-
 .../src/component-views/index.tsx             |   4 +-
 4 files changed, 80 insertions(+), 69 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index ea36457970f..3f51dc92fed 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -123,28 +123,42 @@ export interface ObjectField<
 }
 
 export type ConditionalField<
-  Discriminant extends string | boolean,
-  ConditionalValue extends [Discriminant] extends [boolean]
+  DiscriminantField extends FormField<string | boolean, any>,
+  ConditionalValues extends DiscriminantField['defaultValue'] extends boolean
     ? { true: ComponentPropField; false: ComponentPropField }
-    : [Discriminant] extends [string]
-    ? { [Key in Discriminant]: ComponentPropField }
-    : never,
-  DiscriminantOptions
+    : DiscriminantField['defaultValue'] extends string
+    ? { [Key in DiscriminantField['defaultValue']]: ComponentPropField }
+    : never
 > = {
   kind: 'conditional';
-  discriminant: FormField<Discriminant, DiscriminantOptions>;
-  values: ConditionalValue;
+  discriminant: DiscriminantField;
+  values: ConditionalValues;
 };
 
 export type ComponentPropField =
   | ChildField
   | FormField<any, any>
   | ObjectField
-  | ConditionalField<any, any, any>
+  | ConditionalField<FormField<any, any>, any>
   | RelationshipField<'one' | 'many'>
   // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
   | { kind: 'array'; element: ComponentPropField };
 
+export type ComponentPropFieldForGraphQL =
+  | FormFieldWithGraphQLField<any, any>
+  | ObjectField<Record<string, ComponentPropFieldForGraphQL>>
+  | ConditionalField<
+      FormFieldWithGraphQLField<string, any>,
+      { [key: string]: ComponentPropFieldForGraphQL }
+    >
+  | ConditionalField<
+      FormFieldWithGraphQLField<boolean, any>,
+      { true: ComponentPropFieldForGraphQL; false: ComponentPropFieldForGraphQL }
+    >
+  | RelationshipField<'one' | 'many'>
+  // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
+  | { kind: 'array'; element: ComponentPropFieldForGraphQL };
+
 export const fields = {
   text({
     label,
@@ -428,17 +442,24 @@ export const fields = {
     return { kind: 'object', value };
   },
   conditional<
-    Discriminant extends string | boolean,
-    ConditionalValue extends [Discriminant] extends [boolean]
+    DiscriminantField extends FormField<string | boolean, any>,
+    ConditionalValues extends DiscriminantField['defaultValue'] extends boolean
       ? { true: ComponentPropField; false: ComponentPropField }
-      : [Discriminant] extends [string]
-      ? { [Key in Discriminant]: ComponentPropField }
-      : never,
-    DiscriminantOptions
+      : DiscriminantField['defaultValue'] extends string
+      ? { [Key in DiscriminantField['defaultValue']]: ComponentPropField }
+      : never
   >(
-    discriminant: FormField<Discriminant, DiscriminantOptions>,
-    values: ConditionalValue
-  ): ConditionalField<Discriminant, ConditionalValue, DiscriminantOptions> {
+    discriminant: DiscriminantField,
+    values: ConditionalValues
+  ): ConditionalField<DiscriminantField, ConditionalValues> {
+    if (
+      (discriminant.validate('true') || discriminant.validate('false')) &&
+      (discriminant.validate(true) || discriminant.validate(false))
+    ) {
+      throw new Error(
+        'The discriminant of a conditional field must not allow both strings and booleans to be valid values. only strings or only booleans can be valid'
+      );
+    }
     return {
       kind: 'conditional',
       discriminant,
@@ -481,10 +502,6 @@ export type ComponentBlock<
     }
 );
 
-type DiscriminantToString<Discriminant extends string | boolean> = Discriminant extends boolean
-  ? 'true' | 'false'
-  : Discriminant;
-
 type CastToComponentPropField<Prop> = Prop extends ComponentPropField ? Prop : never;
 
 export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPropField> =
@@ -494,23 +511,17 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
     ? { readonly value: Value; onChange(value: Value): void; readonly options: Options }
     : Prop extends ObjectField<infer Value>
     ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> }
-    : Prop extends ConditionalField<infer Discriminant, infer Value, infer DiscriminantOptions>
+    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
-        readonly [Key in DiscriminantToString<Discriminant>]: {
-          readonly discriminant: Discriminant extends boolean
-            ? 'true' extends Key
-              ? true
-              : 'false' extends Key
-              ? false
-              : never
-            : Discriminant;
-          onChange(discriminant: Discriminant): void;
-          readonly options: DiscriminantOptions;
-          readonly value: Key extends keyof Value
-            ? ExtractPropFromComponentPropFieldForPreview<CastToComponentPropField<Value[Key]>>
-            : never;
+        readonly [Key in keyof Values]: {
+          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+          onChange(discriminant: DiscriminantField['defaultValue']): void;
+          readonly options: DiscriminantField['options'];
+          readonly value: ExtractPropFromComponentPropFieldForPreview<
+            CastToComponentPropField<Values[Key]>
+          >;
         };
-      }[DiscriminantToString<Discriminant>]
+      }[keyof Values]
     : Prop extends RelationshipField<infer Cardinality>
     ? {
         one: {
@@ -524,6 +535,17 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
       }[Cardinality]
     : never;
 
+type DiscriminantStringToDiscriminantValue<
+  DiscriminantField extends FormField<any, any>,
+  DiscriminantString extends PropertyKey
+> = DiscriminantField['defaultValue'] extends boolean
+  ? 'true' extends DiscriminantString
+    ? true
+    : 'false' extends DiscriminantString
+    ? false
+    : never
+  : DiscriminantString;
+
 type ExtractPropFromComponentPropFieldForToolbar<Prop extends ComponentPropField> =
   Prop extends ChildField
     ? undefined
@@ -531,23 +553,17 @@ type ExtractPropFromComponentPropFieldForToolbar<Prop extends ComponentPropField
     ? { readonly value: Value; onChange(value: Value): void; readonly options: Options }
     : Prop extends ObjectField<infer Value>
     ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForToolbar<Value[Key]> }
-    : Prop extends ConditionalField<infer Discriminant, infer Value, infer DiscriminantOptions>
+    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
-        readonly [Key in DiscriminantToString<Discriminant>]: {
-          readonly discriminant: Discriminant extends boolean
-            ? 'true' extends Key
-              ? true
-              : 'false' extends Key
-              ? false
-              : never
-            : Discriminant;
-          onChange(discriminant: Discriminant): void;
-          readonly options: DiscriminantOptions;
-          readonly value: Key extends keyof Value
-            ? ExtractPropFromComponentPropFieldForToolbar<CastToComponentPropField<Value[Key]>>
-            : never;
+        readonly [Key in keyof Values]: {
+          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+          onChange(discriminant: DiscriminantField['defaultValue']): void;
+          readonly options: DiscriminantField['options'];
+          readonly value: ExtractPropFromComponentPropFieldForToolbar<
+            CastToComponentPropField<Values[Key]>
+          >;
         };
-      }[DiscriminantToString<Discriminant>]
+      }[keyof Values]
     : Prop extends RelationshipField<infer Cardinality>
     ? {
         one: {
@@ -631,21 +647,15 @@ type ExtractPropFromComponentPropFieldForRendering<Prop extends ComponentPropFie
     ? Value
     : Prop extends ObjectField<infer Value>
     ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForRendering<Value[Key]> }
-    : Prop extends ConditionalField<infer Discriminant, infer Value, any>
+    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
-        readonly [Key in DiscriminantToString<Discriminant>]: {
-          readonly discriminant: Discriminant extends boolean
-            ? 'true' extends Key
-              ? true
-              : 'false' extends Key
-              ? false
-              : never
-            : Discriminant;
-          readonly value: Key extends keyof Value
-            ? ExtractPropFromComponentPropFieldForRendering<CastToComponentPropField<Value[Key]>>
-            : never;
+        readonly [Key in keyof Values]: {
+          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+          readonly value: ExtractPropFromComponentPropFieldForRendering<
+            CastToComponentPropField<Values[Key]>
+          >;
         };
-      }[DiscriminantToString<Discriminant>]
+      }[keyof Values]
     : Prop extends RelationshipField<infer Cardinality>
     ? {
         one: HydratedRelationshipData | null;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index 417476c327a..4c364322549 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -153,10 +153,9 @@ export function FormValueContent({
       <Stack gap="xlarge">
         {(value as any[]).map((val, i) => {
           return (
-            <div>
+            <div key={i}>
               <div>{dragIcon}</div>
               <FormValueContent
-                key={i}
                 forceValidation={forceValidation}
                 stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
                 path={path.concat(i)}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 1d6143b91d0..7f4ecf33a5c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -65,7 +65,7 @@ export function assertNever(arg: never) {
 export function getPropsForConditionalChange(
   newValue: Record<string, any>,
   oldValue: Record<string, any>,
-  prop: ConditionalField<any, any, any>,
+  prop: ConditionalField<any, any>,
   relationships: Relationships
 ) {
   if (newValue.discriminant !== oldValue.discriminant) {
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 23c9f724f5c..3a4f5c5570a 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -13,6 +13,7 @@ import {
 } from '@keystone-6/core/types';
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
 import { ComponentPropField } from '../component-blocks';
+import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 
 export const Field = ({
   field,
@@ -58,12 +59,13 @@ export const controller = (
       `No prop in custom view. Did you forgot to set \`views\` to a file that exports a \`prop\` on ${config.listKey}.${config.path}`
     );
   }
+  console.log(config.customViews.prop);
   return {
     path: config.path,
     label: config.label,
     graphqlSelection: `${config.path}`,
     prop: config.customViews.prop,
-    defaultValue: [{ type: 'paragraph', children: [{ text: '' }] }],
+    defaultValue: getInitialPropsValue(config.customViews.prop, {}),
     deserialize: data => {
       return data[config.path];
     },

From 3c96c1bcbbe912c57c687bbebb2a7e58d991bd9a Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 11 Feb 2022 10:00:57 +1000
Subject: [PATCH 005/124] GraphQL types

---
 .../basic/admin/fieldViews/Blah.tsx           |  23 ++-
 examples-staging/basic/schema.graphql         |  58 ++++++-
 examples-staging/basic/schema.ts              |  18 +-
 packages/fields-document/package.json         |   4 +-
 .../DocumentEditor/component-blocks/api.tsx   |  17 +-
 .../DocumentEditor/component-blocks/utils.ts  |   2 +-
 .../src/component-graphql-input.tsx           | 158 ++++++++++++++++++
 .../src/component-graphql-output.tsx          | 126 ++++++++++++++
 .../src/component-views/index.tsx             |  36 +++-
 packages/fields-document/src/component.ts     |  53 +++++-
 yarn.lock                                     |  33 +++-
 11 files changed, 495 insertions(+), 33 deletions(-)
 create mode 100644 packages/fields-document/src/component-graphql-input.tsx
 create mode 100644 packages/fields-document/src/component-graphql-output.tsx

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 0553ae92c54..3372be8b162 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -4,8 +4,23 @@
 import { fields } from '@keystone-6/fields-document/component-blocks';
 
 export const prop = fields.array(
-  fields.object({
-    a: fields.text({ label: 'Blah A' }),
-    b: fields.text({ label: 'Blah B' }),
-  })
+  fields.conditional(
+    fields.select({
+      label: 'Type',
+      options: [
+        { label: 'Group', value: 'group' },
+        { label: 'Leaf', value: 'leaf' },
+      ] as const,
+      defaultValue: 'leaf',
+    }),
+    {
+      leaf: fields.object({
+        url: fields.url({ label: 'URL' }),
+        label: fields.text({ label: 'Label' }),
+      }),
+      group: fields.object({
+        label: fields.text({ label: 'Label' }),
+      }),
+    }
+  )
 );
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index dbf04717464..5a6754c93c4 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -406,12 +406,17 @@ type Post {
   id: ID!
   title: String
   status: String
-  blah: JSON
+  blah: [PostBlah]
+  blahRaw: JSON
   content: Post_content_Document
   publishDate: DateTime
   author: User
 }
 
+interface PostBlah {
+  discriminant: String
+}
+
 type Post_content_Document {
   document(hydrateRelationships: Boolean! = false): JSON!
 }
@@ -423,6 +428,25 @@ input PostWhereUniqueInput {
   id: ID
 }
 
+type PostBlahLeaf implements PostBlah {
+  discriminant: String
+  value: PostBlahLeafValue
+}
+
+type PostBlahLeafValue {
+  url: String
+  label: String
+}
+
+type PostBlahGroup implements PostBlah {
+  discriminant: String
+  value: PostBlahGroupValue
+}
+
+type PostBlahGroupValue {
+  label: String
+}
+
 input PostWhereInput {
   AND: [PostWhereInput!]
   OR: [PostWhereInput!]
@@ -455,12 +479,26 @@ input PostOrderByInput {
 input PostUpdateInput {
   title: String
   status: String
-  blah: JSON
+  blah: [PostBlahUpdateInput]
   content: JSON
   publishDate: DateTime
   author: UserRelateToOneForUpdateInput
 }
 
+input PostBlahUpdateInput {
+  leaf: PostBlahLeafUpdateInput
+  group: PostBlahGroupUpdateInput
+}
+
+input PostBlahLeafUpdateInput {
+  url: String
+  label: String
+}
+
+input PostBlahGroupUpdateInput {
+  label: String
+}
+
 input PostUpdateArgs {
   where: PostWhereUniqueInput!
   data: PostUpdateInput!
@@ -469,12 +507,26 @@ input PostUpdateArgs {
 input PostCreateInput {
   title: String
   status: String
-  blah: JSON
+  blah: [PostBlahCreateInput]
   content: JSON
   publishDate: DateTime
   author: UserRelateToOneForCreateInput
 }
 
+input PostBlahCreateInput {
+  leaf: PostBlahLeafCreateInput
+  group: PostBlahGroupCreateInput
+}
+
+input PostBlahLeafCreateInput {
+  url: String
+  label: String
+}
+
+input PostBlahGroupCreateInput {
+  label: String
+}
+
 """
 The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
 """
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index 98107162cea..25df3733663 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -9,6 +9,7 @@ import {
   virtual,
   image,
   file,
+  decimal,
 } from '@keystone-6/core/fields';
 import { componentThing, document } from '@keystone-6/fields-document';
 import { v4 } from 'uuid';
@@ -133,7 +134,9 @@ export const lists: Keystone.Lists = {
   }),
   Post: list({
     fields: {
-      title: text({ access: {} }),
+      title: text({
+        // ui: { views: require.resolve('./admin/fieldViews/whatever.tsx') },
+      }),
       // TODO: expand this out into a proper example project
       // Enable this line to test custom field views
       // test: text({ ui: { views: require.resolve('./admin/fieldViews/Test.tsx') } }),
@@ -154,6 +157,19 @@ export const lists: Keystone.Lists = {
         prop: blahProp,
         ui: { views: require.resolve('./admin/fieldViews/Blah.tsx') },
       }),
+      // something: json({
+      //   hooks: {
+      //     validateInput({ resolvedData, addValidationError }) {
+      //       const x = resolvedData.something;
+      //       if (x !== undefined) {
+      //         const error = myIoTsSchema.validate(x);
+      //         if (error) {
+      //           addValidationError(error);
+      //         }
+      //       }
+      //     },
+      //   },
+      // }),
       content: document({
         ui: { views: require.resolve('./admin/fieldViews/Content.tsx') },
         relationships: {
diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index 4c3f4dc1653..f6597d03fbd 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -27,6 +27,8 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@braintree/sanitize-url": "^5.0.2",
+    "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/sortable": "^6.0.0",
     "@emotion/weak-memoize": "^0.2.5",
     "@keystone-6/document-renderer": "^1.0.0",
     "@keystone-ui/button": "^6.0.0",
@@ -68,4 +70,4 @@
   "engines": {
     "node": "^14.15 || ^16.13"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 3f51dc92fed..32b1bedfd7e 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -53,8 +53,7 @@ export type FormFieldWithGraphQLField<Value, Options> = FormField<Value, Options
       graphql.OutputType,
       'value'
     >;
-    selection: (fieldKey: string) => string;
-    input: graphql.Arg<graphql.NullableInputType, boolean>;
+    input: graphql.NullableInputType;
   };
 };
 
@@ -189,7 +188,7 @@ export const fields = {
         return typeof value === 'string';
       },
       graphql: {
-        input: graphql.arg({ type: graphql.String }),
+        input: graphql.String,
         output: graphql.field({ type: graphql.String }),
         selection: x => x,
       },
@@ -231,9 +230,8 @@ export const fields = {
       defaultValue,
       validate,
       graphql: {
-        input: graphql.arg({ type: graphql.String }),
+        input: graphql.String,
         output: graphql.field({ type: graphql.String }),
-        selection: x => x,
       },
     };
   },
@@ -272,7 +270,7 @@ export const fields = {
         return typeof value === 'string' && optionValuesSet.has(value);
       },
       graphql: {
-        input: graphql.arg({ type: graphql.String }),
+        input: graphql.String,
         output: graphql.field({
           type: graphql.String,
           // TODO: investigate why this resolve is required here
@@ -280,7 +278,6 @@ export const fields = {
             return value;
           },
         }),
-        selection: x => x,
       },
     };
   },
@@ -320,7 +317,7 @@ export const fields = {
         );
       },
       graphql: {
-        input: graphql.arg({ type: graphql.list(graphql.nonNull(graphql.String)) }),
+        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
@@ -328,7 +325,6 @@ export const fields = {
             return value;
           },
         }),
-        selection: x => x,
       },
     };
   },
@@ -362,9 +358,8 @@ export const fields = {
         return typeof value === 'boolean';
       },
       graphql: {
-        input: graphql.arg({ type: graphql.Boolean }),
+        input: graphql.Boolean,
         output: graphql.field({ type: graphql.Boolean }),
-        selection: x => x,
       },
     };
   },
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 7f4ecf33a5c..957ed284506 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -58,7 +58,7 @@ export function findChildPropPaths(
   return propPaths;
 }
 
-export function assertNever(arg: never) {
+export function assertNever(arg: never): never {
   throw new Error('expected to never be called but received: ' + JSON.stringify(arg));
 }
 
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
new file mode 100644
index 00000000000..9c2105a9524
--- /dev/null
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -0,0 +1,158 @@
+import { graphql } from '@keystone-6/core';
+import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { assertNever } from './DocumentEditor/component-blocks/utils';
+
+export function getGraphQLInputType(
+  name: string,
+  prop: ComponentPropFieldForGraphQL,
+  operation: 'create' | 'update'
+): graphql.InputType {
+  if (prop.kind === 'form') {
+    return prop.graphql.input;
+  }
+  if (prop.kind === 'object') {
+    return graphql.inputObject({
+      name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
+      fields: Object.fromEntries(
+        Object.entries(prop.value).map(([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+          const type = getGraphQLInputType(
+            `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+            val,
+            operation
+          );
+          return [key, graphql.arg({ type })];
+        })
+      ),
+    });
+  }
+  if (prop.kind === 'array') {
+    const innerType = getGraphQLInputType(name, prop.element, operation);
+    return graphql.list(innerType);
+  }
+  if (prop.kind === 'conditional') {
+    return graphql.inputObject({
+      name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
+      fields: Object.fromEntries(
+        Object.entries(prop.values).map(([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+          const type = getGraphQLInputType(
+            `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+            val,
+            operation
+          );
+          return [key, graphql.arg({ type })];
+        })
+      ),
+    });
+  }
+
+  assertNever(prop);
+}
+
+export function getValueForUpdate(
+  prop: ComponentPropFieldForGraphQL,
+  value: any,
+  prevValue: any
+): any {
+  if (value === undefined) {
+    value = prevValue;
+  }
+  // run validation
+  // transform the conditional field structure
+  // to
+  if (prop.kind === 'form') {
+    if (prop.validate(value)) {
+      return value;
+    }
+    throw new Error();
+  }
+  if (prop.kind === 'object') {
+    if (value === null) {
+      throw new Error();
+    }
+    return Object.fromEntries(
+      Object.entries(prop.value).map(([key, val]) => {
+        return [key, getValueForUpdate(val, value[key], prevValue[key])];
+      })
+    );
+  }
+  if (prop.kind === 'array') {
+    if (value === null) {
+      throw new Error();
+    }
+
+    return (value as any[]).map((val, i) => getValueForUpdate(prop.element, val, prevValue[i]));
+  }
+  if (prop.kind === 'relationship') {
+    // TODO handle this case
+    // throw new Error('unhandled');
+  }
+  if (prop.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') && !prop.discriminant.validate(key)) {
+      discriminant = key === 'true';
+    }
+    return {
+      discriminant,
+      value: getValueForUpdate((prop.values as any)[key], value[key], prevValue[key]),
+    };
+  }
+
+  assertNever(prop);
+}
+
+export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any): any {
+  // If  this
+  if (value === undefined) {
+    value = getInitialPropsValue(prop, {});
+  }
+  if (prop.kind === 'form') {
+    if (prop.validate(value)) {
+      return value;
+    }
+    throw new Error();
+  }
+  if (prop.kind === 'array') {
+    if (value === null) {
+      throw new Error();
+    }
+    return (value as any[]).map(val => getValueForCreate(prop.element, val));
+  }
+  if (prop.kind === 'object') {
+    if (value === null) {
+      throw new Error();
+    }
+    return Object.fromEntries(
+      Object.entries(prop.value).map(([key, val]) => {
+        return [key, getValueForCreate(val, value[key])];
+      })
+    );
+  }
+  if (prop.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') && !prop.discriminant.validate(key)) {
+      discriminant = key === 'true';
+    }
+
+    return {
+      discriminant,
+      value: getValueForCreate((prop.values as any)[key], value[key]),
+    };
+  }
+}
diff --git a/packages/fields-document/src/component-graphql-output.tsx b/packages/fields-document/src/component-graphql-output.tsx
new file mode 100644
index 00000000000..519152c1073
--- /dev/null
+++ b/packages/fields-document/src/component-graphql-output.tsx
@@ -0,0 +1,126 @@
+import { graphql } from '@keystone-6/core';
+import { ComponentPropFieldForGraphQL } 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);
+    },
+  });
+}
+
+export function getOutputGraphQLField(
+  name: string,
+  prop: ComponentPropFieldForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[]
+): graphql.Field<
+  { value: unknown },
+  Record<string, graphql.Arg<graphql.InputType, boolean>>,
+  graphql.OutputType,
+  'value'
+> {
+  if (prop.kind === 'form') {
+    return prop.graphql.output;
+  }
+  if (prop.kind === 'object') {
+    return graphql.field({
+      type: graphql.object<unknown>()({
+        name,
+        fields: Object.fromEntries(
+          Object.entries(prop.value).map(
+            ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
+              const field = getOutputGraphQLField(
+                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                val,
+                interfaceImplementations
+              );
+              return [key, wrapGraphQLFieldInResolver(field, source => (source as any)[key])];
+            }
+          )
+        ),
+      }),
+    });
+  }
+  if (prop.kind === 'array') {
+    const innerField = getOutputGraphQLField(name, prop.element, interfaceImplementations);
+    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 (prop.kind === 'conditional') {
+    const discriminantField = getOutputGraphQLField(
+      name + 'Discriminant',
+      prop.discriminant,
+      interfaceImplementations
+    );
+    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: discriminantField,
+      },
+    });
+
+    interfaceImplementations.push(
+      ...Object.entries(prop.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(discriminantField, x => x.discriminant),
+            value: getOutputGraphQLField(`${innerName}Value`, val, interfaceImplementations),
+          },
+        });
+      })
+    );
+
+    return graphql.field({
+      type: interfaceType,
+      resolve({ value }) {
+        return value as SourceType;
+      },
+    });
+  }
+
+  assertNever(prop);
+}
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 3a4f5c5570a..900db44d6fa 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -14,6 +14,8 @@ import {
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
 import { ComponentPropField } from '../component-blocks';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
+import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
+import { assertNever } from '../DocumentEditor/component-blocks/utils';
 
 export const Field = ({
   field,
@@ -52,25 +54,49 @@ export const allowedExportsOnCustomViews = ['prop'];
 export const controller = (
   config: FieldControllerConfig
 ): FieldController<unknown> & {
-  prop: ComponentPropField;
+  prop: ComponentPropFieldForGraphQL;
 } => {
   if (!config.customViews.prop) {
     throw new Error(
       `No prop in custom view. Did you forgot to set \`views\` to a file that exports a \`prop\` on ${config.listKey}.${config.path}`
     );
   }
-  console.log(config.customViews.prop);
   return {
     path: config.path,
     label: config.label,
-    graphqlSelection: `${config.path}`,
+    graphqlSelection: `${config.path}Raw`,
     prop: config.customViews.prop,
     defaultValue: getInitialPropsValue(config.customViews.prop, {}),
     deserialize: data => {
-      return data[config.path];
+      return data[config.path + 'Raw'];
     },
     serialize: value => ({
-      [config.path]: value,
+      [config.path]: serializeThing(config.customViews.prop, value),
     }),
   };
 };
+
+const serializeThing = (prop: ComponentPropFieldForGraphQL, value: any): any => {
+  if (prop.kind === 'conditional') {
+    return {
+      [value.discriminant]: serializeThing((prop.values as any)[value.discriminant], value.value),
+    };
+  }
+  if (prop.kind === 'array') {
+    return (value as any[]).map(a => serializeThing(prop.element, a));
+  }
+  if (prop.kind === 'form') {
+    return value;
+  }
+  if (prop.kind === 'object') {
+    return Object.fromEntries(
+      Object.entries(prop.value).map(([key, val]) => {
+        return [key, serializeThing(val, value[key])];
+      })
+    );
+  }
+  if (prop.kind === 'relationship') {
+    // TODO
+  }
+  assertNever(prop);
+};
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 4d7c87927b0..a70ed79d6ad 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -8,12 +8,18 @@ import {
 } from '@keystone-6/core/types';
 import { graphql } from '@keystone-6/core';
 import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
-import { ComponentPropField } from './component-blocks';
+import { getOutputGraphQLField } from './component-graphql-output';
+import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
+import {
+  getGraphQLInputType,
+  getValueForCreate,
+  getValueForUpdate,
+} from './component-graphql-input';
 
 export type ComponentThingFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
   CommonFieldConfig<ListTypeInfo> & {
     db?: { map?: string };
-    prop: ComponentPropField;
+    prop: ComponentPropFieldForGraphQL;
   };
 
 const views = path.join(path.dirname(__dirname), 'component-views');
@@ -33,22 +39,57 @@ export const componentThing =
 
     const defaultValue = getInitialPropsValue(prop, {});
 
+    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,
+          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 = getValueForUpdate(prop, val, prevVal);
+              if (val === null && meta.provider === 'postgresql') {
+                val = 'JsonNull';
+              }
+              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: graphql.JSON }),
+            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create') }),
             resolve(val) {
-              return resolve(val === undefined ? defaultValue : val);
+              return resolve(getValueForCreate(prop, val));
             },
           },
-          update: { arg: graphql.arg({ type: graphql.JSON }), resolve },
+          update: { arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'update') }) },
+        },
+        output: getOutputGraphQLField(name, prop, unreferencedConcreteInterfaceImplementations),
+        extraOutputFields: {
+          [`${meta.fieldKey}Raw`]: graphql.field({
+            type: graphql.JSON,
+          }),
         },
-        output: graphql.field({ type: graphql.JSON }),
         views,
         getAdminMeta: () => ({}),
+        unreferencedConcreteInterfaceImplementations,
       },
       {
         default: {
diff --git a/yarn.lock b/yarn.lock
index 3b44863a16c..172c728b9dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1315,6 +1315,37 @@
   resolved "https://registry.yarnpkg.com/@corex/deepmerge/-/deepmerge-2.6.148.tgz#8fa825d53ffd1cbcafce1b6a830eefd3dcc09dd5"
   integrity sha512-6QMz0/2h5C3ua51iAnXMPWFbb1QOU1UvSM4bKBw5mzdT+WtLgjbETBBIQZ+Sh9WvEcGwlAt/DEdRpIC3XlDBMA==
 
+"@dnd-kit/accessibility@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.0.0.tgz#b56e3750414fd907b7d6972b3116aa8f96d07fde"
+  integrity sha512-QwaQ1IJHQHMMuAGOOYHQSx7h7vMZPfO97aDts8t5N/MY7n2QTDSnW+kF7uRQ1tVBkr6vJ+BqHWG5dlgGvwVjow==
+  dependencies:
+    tslib "^2.0.0"
+
+"@dnd-kit/core@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-5.0.1.tgz#ae8c01ca5a91083ab31bbd8c839c552e5cf62c26"
+  integrity sha512-h02GyHb2KqbpqbELA9QW5WVLdnAQODgZs8Nv15PTg/VpEpQxEkLPn0QHqiMSSOOFBx0qJOowwYh6ggfL1ZIJPQ==
+  dependencies:
+    "@dnd-kit/accessibility" "^3.0.0"
+    "@dnd-kit/utilities" "^3.1.0"
+    tslib "^2.0.0"
+
+"@dnd-kit/sortable@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-6.0.0.tgz#289c06ec594fb519d75cdf04ac5de7359b14f068"
+  integrity sha512-Kf0HO/rbFpd7HxXGEvxXtxBgPI6+IQuxRXDdFz6XKLhylxuDMEomi1netrhS+253KrOZ68V+sjqOmfE2RreLeQ==
+  dependencies:
+    "@dnd-kit/utilities" "^3.1.0"
+    tslib "^2.0.0"
+
+"@dnd-kit/utilities@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.1.0.tgz#330ef24303da05f85ff20bb8f74b385c96caee58"
+  integrity sha512-2JBdIgjJ7xjMRpKagdMuYKWJdDoVVw9Wc6lfMrLjrq8t4QlMEjtsab5JVUlzWvHgANn7w3Y3VhalFfbp4dQrKg==
+  dependencies:
+    tslib "^2.0.0"
+
 "@emotion/babel-plugin@^11.7.1":
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.1.tgz#853fc4985d89dab0ea8e17af2858473d1b11be7e"
@@ -12711,7 +12742,7 @@ tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@~2.3.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@~2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==

From 34d3c0d05d743e9ad8b66bcf174994645b2d601d Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 11 Feb 2022 10:15:24 +1000
Subject: [PATCH 006/124] Fix things

---
 .../src/DocumentEditor/component-blocks/api.tsx    |  1 -
 .../src/component-graphql-input.tsx                | 14 +++++++++++---
 .../fields-document/src/component-views/index.tsx  |  1 -
 packages/fields-document/src/component.ts          |  1 +
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 32b1bedfd7e..2d8be724d2b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -190,7 +190,6 @@ export const fields = {
       graphql: {
         input: graphql.String,
         output: graphql.field({ type: graphql.String }),
-        selection: x => x,
       },
     };
   },
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index 9c2105a9524..f89fd888d56 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -54,6 +54,9 @@ export function getValueForUpdate(
   value: any,
   prevValue: any
 ): any {
+  if (prevValue === undefined) {
+    prevValue = getInitialPropsValue(prop, {});
+  }
   if (value === undefined) {
     value = prevValue;
   }
@@ -85,7 +88,6 @@ export function getValueForUpdate(
   }
   if (prop.kind === 'relationship') {
     // TODO handle this case
-    // throw new Error('unhandled');
   }
   if (prop.kind === 'conditional') {
     if (value === null) {
@@ -102,7 +104,11 @@ export function getValueForUpdate(
     }
     return {
       discriminant,
-      value: getValueForUpdate((prop.values as any)[key], value[key], prevValue[key]),
+      value: getValueForUpdate(
+        (prop.values as any)[key],
+        value[key],
+        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop, {})
+      ),
     };
   }
 
@@ -110,7 +116,7 @@ export function getValueForUpdate(
 }
 
 export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any): any {
-  // If  this
+  // If value is undefined, get the specified defaultValue
   if (value === undefined) {
     value = getInitialPropsValue(prop, {});
   }
@@ -155,4 +161,6 @@ export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any
       value: getValueForCreate((prop.values as any)[key], value[key]),
     };
   }
+
+  assertNever(prop);
 }
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 900db44d6fa..45a9f4b257a 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -12,7 +12,6 @@ import {
   FieldProps,
 } from '@keystone-6/core/types';
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
-import { ComponentPropField } from '../component-blocks';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
 import { assertNever } from '../DocumentEditor/component-blocks/utils';
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index a70ed79d6ad..7a645353418 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -54,6 +54,7 @@ export const componentThing =
               let prevVal = args.item[meta.fieldKey];
               if (meta.provider === 'sqlite') {
                 prevVal = JSON.parse(prevVal as any);
+                val = args.inputData[meta.fieldKey];
               }
               val = getValueForUpdate(prop, val, prevVal);
               if (val === null && meta.provider === 'postgresql') {

From 970ec8f9e18e66f787a0053ee8b17bd60fe94462 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 11 Feb 2022 14:36:45 +1000
Subject: [PATCH 007/124] Improve array field UI

---
 packages/fields-document/package.json         |   1 +
 .../component-blocks/array-form-value.tsx     | 219 ++++++++++++++++++
 .../DocumentEditor/component-blocks/form.tsx  |  53 +----
 .../src/component-views/index.tsx             |  10 +-
 yarn.lock                                     |   8 +
 5 files changed, 243 insertions(+), 48 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx

diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index f6597d03fbd..bae6b1cb7a9 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -28,6 +28,7 @@
     "@babel/runtime": "^7.16.3",
     "@braintree/sanitize-url": "^5.0.2",
     "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/modifiers": "^5.0.0",
     "@dnd-kit/sortable": "^6.0.0",
     "@emotion/weak-memoize": "^0.2.5",
     "@keystone-6/document-renderer": "^1.0.0",
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
new file mode 100644
index 00000000000..a623f044ede
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -0,0 +1,219 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Stack } from '@keystone-ui/core';
+import { Button } from '@keystone-ui/button';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  useSortable,
+  SortableContext,
+  verticalListSortingStrategy,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { useState } from 'react';
+import { useDocumentFieldRelationships } from '../relationship';
+import { getInitialPropsValue } from './initial-values';
+import { ArrayField, ComponentPropField } from './api';
+import { FormValueContent } from './form';
+
+const dragIcon = (
+  <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#939393">
+      <circle cy="6" cx="6" r="2" />
+      <circle cy="6" cx="12" r="2" />
+      <circle cy="12" cx="6" r="2" />
+      <circle cy="12" cx="12" r="2" />
+      <circle cy="18" cx="6" r="2" />
+      <circle cy="18" cx="12" r="2" />
+    </g>
+  </svg>
+);
+let keyCount = 0;
+
+export function ArrayFormValueContent({
+  prop,
+  path,
+  value,
+  onChange,
+  stringifiedPropPathToAutoFocus,
+  forceValidation,
+}: {
+  path: (string | number)[];
+  prop: ArrayField<ComponentPropField>;
+  value: any[];
+  onChange(value: any[]): void;
+  stringifiedPropPathToAutoFocus: string;
+  forceValidation: boolean;
+}) {
+  const relationships = useDocumentFieldRelationships();
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+  // this key stuff will sort of produce a less ideal experience if the value array
+  // is modified outside of this component, mainly if adding items in the middle or re-ordering
+  const [keys, setKeys] = useState(() => value.map(() => (keyCount++).toString()));
+
+  const diff = value.length - keys.length;
+
+  if (diff > 0) {
+    setKeys(keys.concat(Array.from({ length: diff }).map(() => (keyCount++).toString())));
+    return null;
+  } else if (diff < 0) {
+    setKeys(value.slice(0, keys.length - 1));
+    return null;
+  }
+
+  console.log(keys);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis]}
+      onDragEnd={({ over, active }) => {
+        if (over && over.id !== active.id) {
+          const overIndex = keys.indexOf(over.id);
+          const activeIndex = keys.indexOf(active.id);
+          setKeys(arrayMove(keys, activeIndex, overIndex));
+          onChange(arrayMove(value, activeIndex, overIndex));
+        }
+      }}
+    >
+      <SortableContext items={keys} strategy={verticalListSortingStrategy}>
+        <ul
+          css={{
+            isolation: 'isolate',
+            display: 'flex',
+            gap: 8,
+            flexDirection: 'column',
+            listStyle: 'none',
+            padding: 0,
+          }}
+        >
+          {value.map((val, i) => {
+            return (
+              <SortableItem
+                key={keys[i]}
+                id={keys[i]}
+                forceValidation={forceValidation}
+                stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
+                path={path.concat(i)}
+                prop={prop.element}
+                value={val}
+                onChange={val => {
+                  const newValue = [...value];
+                  newValue[i] = val;
+                  onChange(newValue);
+                }}
+                onRemove={() => {
+                  const newKeys = [...keys];
+                  newKeys.splice(i, 1);
+                  setKeys(newKeys);
+                  const newValue = [...value];
+                  newValue.splice(i, 1);
+                  onChange(newValue);
+                }}
+              />
+            );
+          })}
+          <Button
+            onClick={() => {
+              onChange([...value, getInitialPropsValue(prop.element, relationships)]);
+            }}
+          >
+            Add
+          </Button>
+        </ul>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function SortableItem({
+  id,
+  onRemove,
+  ...props
+}: {
+  id: string;
+  path: (string | number)[];
+  prop: ComponentPropField;
+  value: any;
+  onChange(value: any): void;
+  stringifiedPropPathToAutoFocus: string;
+  forceValidation: boolean;
+  onRemove: () => void;
+}) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id,
+  });
+
+  const style = {
+    transition,
+    zIndex: isDragging ? 2 : 1,
+    '--translate-x': `${Math.round(transform?.x ?? 0)}px`,
+    '--translate-y': `${Math.round(transform?.y ?? 0)}px`,
+    cursor: isDragging ? 'grabbing' : undefined,
+  };
+  return (
+    <li
+      ref={setNodeRef}
+      css={{ transform: `translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0))` }}
+      style={style}
+    >
+      <div
+        style={{
+          pointerEvents: isDragging ? 'none' : undefined,
+          transform: `scale(${isDragging ? '1.02' : '1'})`,
+          boxShadow: isDragging
+            ? 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 10px 5px 0px'
+            : 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
+        }}
+        css={{
+          backgroundColor: 'white',
+          borderRadius: 8,
+          padding: '8px',
+          transition: 'transform 100ms ease, box-shadow 150ms ease',
+        }}
+      >
+        <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
+          <button
+            {...attributes}
+            css={{
+              display: 'flex',
+              justifyContent: 'center',
+              cursor: isDragging ? 'grabbing' : 'grab',
+              appearance: 'none',
+              background: 'transparent',
+              borderRadius: 4,
+              padding: 0,
+              ':focus-visible': {
+                outline: ['2px solid Highlight', '2px solid -webkit-focus-ring-color'],
+              },
+            }}
+            aria-label="Drag handle"
+            {...listeners}
+          >
+            {dragIcon}
+          </button>
+          <Button tone="negative" onClick={onRemove}>
+            Remove
+          </Button>
+        </Stack>
+        <FormValueContent {...props} />
+      </div>
+    </li>
+  );
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index 4c364322549..d26f7935abb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -3,12 +3,12 @@ import { RelationshipSelect } from '@keystone-6/core/fields/types/relationship/v
 import { Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import React, { useState } from 'react';
-import { Button, Button as KeystoneUIButton } from '@keystone-ui/button';
+import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { ComponentPropField, RelationshipData } from '../../component-blocks';
 import { useDocumentFieldRelationships, Relationships } from '../relationship';
 import { assertNever, getPropsForConditionalChange } from './utils';
 import { RelationshipField } from './api';
-import { getInitialPropsValue } from './initial-values';
+import { ArrayFormValueContent } from './array-form-value';
 
 // this is in a different component to the other form inputs because it uses useKeystone
 // and we want to render the editor outside of the Admin UI on the docs site
@@ -150,34 +150,14 @@ export function FormValueContent({
   }
   if (prop.kind === 'array') {
     return (
-      <Stack gap="xlarge">
-        {(value as any[]).map((val, i) => {
-          return (
-            <div key={i}>
-              <div>{dragIcon}</div>
-              <FormValueContent
-                forceValidation={forceValidation}
-                stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-                path={path.concat(i)}
-                prop={prop.element}
-                value={val}
-                onChange={val => {
-                  const newValue = [...value];
-                  newValue[i] = val;
-                  onChange(newValue);
-                }}
-              />
-            </div>
-          );
-        })}
-        <Button
-          onClick={() => {
-            onChange([...value, getInitialPropsValue(prop.element, relationships)]);
-          }}
-        >
-          Add
-        </Button>
-      </Stack>
+      <ArrayFormValueContent
+        prop={prop}
+        path={path}
+        value={value}
+        onChange={onChange}
+        stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
+        forceValidation={forceValidation}
+      />
     );
   }
   return (
@@ -190,19 +170,6 @@ export function FormValueContent({
   );
 }
 
-const dragIcon = (
-  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#939393">
-      <circle cy="6" cx="6" r="2" />
-      <circle cy="6" cx="12" r="2" />
-      <circle cy="12" cx="6" r="2" />
-      <circle cy="12" cx="12" r="2" />
-      <circle cy="18" cx="6" r="2" />
-      <circle cy="18" cx="12" r="2" />
-    </g>
-  </svg>
-);
-
 export function findFirstFocusablePropPath(
   prop: ComponentPropField,
   path: (string | number)[],
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 45a9f4b257a..5d2597db12d 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -70,19 +70,19 @@ export const controller = (
       return data[config.path + 'Raw'];
     },
     serialize: value => ({
-      [config.path]: serializeThing(config.customViews.prop, value),
+      [config.path]: serializeValue(config.customViews.prop, value),
     }),
   };
 };
 
-const serializeThing = (prop: ComponentPropFieldForGraphQL, value: any): any => {
+const serializeValue = (prop: ComponentPropFieldForGraphQL, value: any): any => {
   if (prop.kind === 'conditional') {
     return {
-      [value.discriminant]: serializeThing((prop.values as any)[value.discriminant], value.value),
+      [value.discriminant]: serializeValue((prop.values as any)[value.discriminant], value.value),
     };
   }
   if (prop.kind === 'array') {
-    return (value as any[]).map(a => serializeThing(prop.element, a));
+    return (value as any[]).map(a => serializeValue(prop.element, a));
   }
   if (prop.kind === 'form') {
     return value;
@@ -90,7 +90,7 @@ const serializeThing = (prop: ComponentPropFieldForGraphQL, value: any): any =>
   if (prop.kind === 'object') {
     return Object.fromEntries(
       Object.entries(prop.value).map(([key, val]) => {
-        return [key, serializeThing(val, value[key])];
+        return [key, serializeValue(val, value[key])];
       })
     );
   }
diff --git a/yarn.lock b/yarn.lock
index 172c728b9dd..3f2377e086c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1331,6 +1331,14 @@
     "@dnd-kit/utilities" "^3.1.0"
     tslib "^2.0.0"
 
+"@dnd-kit/modifiers@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/modifiers/-/modifiers-5.0.0.tgz#c2ba0bfdb6bed994affcfc4c86834795b7a7f029"
+  integrity sha512-ZVOfa5dKmvAPBxjjnI4QTm8fHV4/gMdS6k0zY5Z8p/p9HkL/3QEHn2fYgqM2zVDpxf5maqrZ4MvqXILSPNQPMQ==
+  dependencies:
+    "@dnd-kit/utilities" "^3.1.0"
+    tslib "^2.0.0"
+
 "@dnd-kit/sortable@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-6.0.0.tgz#289c06ec594fb519d75cdf04ac5de7359b14f068"

From 605dde4c9b7c4b05d14f1bb2bcecd3491caa7792 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 15 Feb 2022 14:23:38 +1000
Subject: [PATCH 008/124] UI performance improvements

---
 .../packages/core/src/components/Box.tsx      |   5 +-
 .../packages/core/src/components/Stack.tsx    |  77 +++---
 .../basic/admin/fieldViews/Blah.tsx           |   6 +
 examples-staging/basic/schema.graphql         |  18 ++
 .../DocumentEditor/component-blocks/api.tsx   |  34 +--
 .../component-blocks/array-form-value.tsx     |  73 ++---
 .../DocumentEditor/component-blocks/form.tsx  | 258 ++++++++++--------
 .../DocumentEditor/component-blocks/index.tsx |  39 ++-
 .../component-blocks/preview-props.ts         |   2 +-
 .../DocumentEditor/component-blocks/utils.ts  |  12 +-
 .../src/DocumentEditor/utils.ts               |  26 +-
 .../src/component-views/index.tsx             |  18 +-
 12 files changed, 347 insertions(+), 221 deletions(-)

diff --git a/design-system/packages/core/src/components/Box.tsx b/design-system/packages/core/src/components/Box.tsx
index 5ef4d7e44a0..baa55ebd9e6 100644
--- a/design-system/packages/core/src/components/Box.tsx
+++ b/design-system/packages/core/src/components/Box.tsx
@@ -241,7 +241,10 @@ function useMargin(
 // Box Component
 // -------------
 
-export const Box = forwardRefWithAs<'div', BoxProps>(({ as: Tag = 'div', ...props }, ref) => {
+export const Box = forwardRefWithAs<'div', BoxProps>(function Box(
+  { as: Tag = 'div', ...props },
+  ref
+) {
   const {
     background,
     foreground,
diff --git a/design-system/packages/core/src/components/Stack.tsx b/design-system/packages/core/src/components/Stack.tsx
index ae06186d42a..1928596cd36 100644
--- a/design-system/packages/core/src/components/Stack.tsx
+++ b/design-system/packages/core/src/components/Stack.tsx
@@ -45,45 +45,46 @@ export type StackProps = {
   gap?: keyof Theme['spacing'];
 } & BoxProps;
 
-export const Stack = forwardRefWithAs<'div', StackProps>(
-  ({ across, align = 'stretch', children, dividers = 'none', gap = 'none', ...props }, ref) => {
-    const { spacing } = useTheme();
-    const { mq } = useMediaQuery();
+export const Stack = forwardRefWithAs<'div', StackProps>(function Stack(
+  { across, align = 'stretch', children, dividers = 'none', gap = 'none', ...props },
+  ref
+) {
+  const { spacing } = useTheme();
+  const { mq } = useMediaQuery();
 
-    const orientation = across ? 'horizontal' : 'vertical';
-    const { dimension, flexDirection, marginProperty } = orientationMap[orientation];
-    const ChildWrapper = getChildTag(props.as);
+  const orientation = across ? 'horizontal' : 'vertical';
+  const { dimension, flexDirection, marginProperty } = orientationMap[orientation];
+  const ChildWrapper = getChildTag(props.as);
 
-    return (
-      <Box
-        ref={ref}
-        css={mq({
-          alignItems: alignment[align],
-          display: 'flex',
-          flexDirection,
-          [dimension]: 'fit-content',
+  return (
+    <Box
+      ref={ref}
+      css={mq({
+        alignItems: alignment[align],
+        display: 'flex',
+        flexDirection,
+        [dimension]: 'fit-content',
 
-          '& > * + *': {
-            [marginProperty]: mapResponsiveProp(gap, spacing),
-          },
-        })}
-        {...props}
-      >
-        {['around', 'start'].includes(dividers) && <Divider orientation={orientation} />}
-        {Children.toArray(children)
-          .filter(child => isValidElement(child))
-          .map((child, index) => {
-            return (
-              <Fragment key={index}>
-                {dividers !== 'none' && index ? <Divider orientation={orientation} /> : null}
+        '& > * + *': {
+          [marginProperty]: mapResponsiveProp(gap, spacing),
+        },
+      })}
+      {...props}
+    >
+      {['around', 'start'].includes(dividers) && <Divider orientation={orientation} />}
+      {Children.toArray(children)
+        .filter(child => isValidElement(child))
+        .map((child, index) => {
+          return (
+            <Fragment key={index}>
+              {dividers !== 'none' && index ? <Divider orientation={orientation} /> : null}
 
-                {/* wrap the child to avoid unwanted or unexpected "stretch" on things like buttons */}
-                <ChildWrapper css={{ ':empty': { display: 'none' } }}>{child}</ChildWrapper>
-              </Fragment>
-            );
-          })}
-        {['around', 'end'].includes(dividers) && <Divider orientation={orientation} />}
-      </Box>
-    );
-  }
-);
+              {/* wrap the child to avoid unwanted or unexpected "stretch" on things like buttons */}
+              <ChildWrapper css={{ ':empty': { display: 'none' } }}>{child}</ChildWrapper>
+            </Fragment>
+          );
+        })}
+      {['around', 'end'].includes(dividers) && <Divider orientation={orientation} />}
+    </Box>
+  );
+});
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 3372be8b162..afccf4cc2e9 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -17,6 +17,12 @@ export const prop = fields.array(
       leaf: fields.object({
         url: fields.url({ label: 'URL' }),
         label: fields.text({ label: 'Label' }),
+        label2: fields.text({ label: 'Label2' }),
+        label3: fields.text({ label: 'Label3' }),
+        label4: fields.text({ label: 'Label4' }),
+        label5: fields.text({ label: 'Label5' }),
+        label6: fields.text({ label: 'Label6' }),
+        label7: fields.text({ label: 'Label7' }),
       }),
       group: fields.object({
         label: fields.text({ label: 'Label' }),
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index 5a6754c93c4..142be45088b 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -436,6 +436,12 @@ type PostBlahLeaf implements PostBlah {
 type PostBlahLeafValue {
   url: String
   label: String
+  label2: String
+  label3: String
+  label4: String
+  label5: String
+  label6: String
+  label7: String
 }
 
 type PostBlahGroup implements PostBlah {
@@ -493,6 +499,12 @@ input PostBlahUpdateInput {
 input PostBlahLeafUpdateInput {
   url: String
   label: String
+  label2: String
+  label3: String
+  label4: String
+  label5: String
+  label6: String
+  label7: String
 }
 
 input PostBlahGroupUpdateInput {
@@ -521,6 +533,12 @@ input PostBlahCreateInput {
 input PostBlahLeafCreateInput {
   url: String
   label: String
+  label2: String
+  label3: String
+  label4: String
+  label5: String
+  label6: String
+  label7: String
 }
 
 input PostBlahGroupCreateInput {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 2d8be724d2b..7591ed8b8c2 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -121,13 +121,19 @@ export interface ObjectField<
   value: Value;
 }
 
+type StringOrBooleanToString<Val extends string | boolean> = Val extends string
+  ? Val
+  : Val extends true
+  ? 'true'
+  : Val extends false
+  ? 'false'
+  : never;
+
 export type ConditionalField<
   DiscriminantField extends FormField<string | boolean, any>,
-  ConditionalValues extends DiscriminantField['defaultValue'] extends boolean
-    ? { true: ComponentPropField; false: ComponentPropField }
-    : DiscriminantField['defaultValue'] extends string
-    ? { [Key in DiscriminantField['defaultValue']]: ComponentPropField }
-    : never
+  ConditionalValues extends {
+    [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentPropField;
+  }
 > = {
   kind: 'conditional';
   discriminant: DiscriminantField;
@@ -138,7 +144,7 @@ export type ComponentPropField =
   | ChildField
   | FormField<any, any>
   | ObjectField
-  | ConditionalField<FormField<any, any>, any>
+  | ConditionalField<FormField<string | boolean, any>, { [key: string]: ComponentPropField }>
   | RelationshipField<'one' | 'many'>
   // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
   | { kind: 'array'; element: ComponentPropField };
@@ -147,13 +153,9 @@ export type ComponentPropFieldForGraphQL =
   | FormFieldWithGraphQLField<any, any>
   | ObjectField<Record<string, ComponentPropFieldForGraphQL>>
   | ConditionalField<
-      FormFieldWithGraphQLField<string, any>,
+      FormFieldWithGraphQLField<string | boolean, any>,
       { [key: string]: ComponentPropFieldForGraphQL }
     >
-  | ConditionalField<
-      FormFieldWithGraphQLField<boolean, any>,
-      { true: ComponentPropFieldForGraphQL; false: ComponentPropFieldForGraphQL }
-    >
   | RelationshipField<'one' | 'many'>
   // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
   | { kind: 'array'; element: ComponentPropFieldForGraphQL };
@@ -437,11 +439,9 @@ export const fields = {
   },
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
-    ConditionalValues extends DiscriminantField['defaultValue'] extends boolean
-      ? { true: ComponentPropField; false: ComponentPropField }
-      : DiscriminantField['defaultValue'] extends string
-      ? { [Key in DiscriminantField['defaultValue']]: ComponentPropField }
-      : never
+    ConditionalValues extends {
+      [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentPropField;
+    }
   >(
     discriminant: DiscriminantField,
     values: ConditionalValues
@@ -655,6 +655,8 @@ type ExtractPropFromComponentPropFieldForRendering<Prop extends ComponentPropFie
         one: HydratedRelationshipData | null;
         many: readonly HydratedRelationshipData[];
       }[Cardinality]
+    : Prop extends ArrayField<infer ElementField>
+    ? readonly ExtractPropFromComponentPropFieldForRendering<ElementField>[]
     : never;
 
 type ExtractPropsForPropsForRendering<Props extends Record<string, ComponentPropField>> = {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
index a623f044ede..22450f091cc 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -19,11 +19,11 @@ import {
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useDocumentFieldRelationships } from '../relationship';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField, ComponentPropField } from './api';
-import { FormValueContent } from './form';
+import { ComponentFieldProps, FormValueContent } from './form';
 
 const dragIcon = (
   <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
@@ -46,14 +46,7 @@ export function ArrayFormValueContent({
   onChange,
   stringifiedPropPathToAutoFocus,
   forceValidation,
-}: {
-  path: (string | number)[];
-  prop: ArrayField<ComponentPropField>;
-  value: any[];
-  onChange(value: any[]): void;
-  stringifiedPropPathToAutoFocus: string;
-  forceValidation: boolean;
-}) {
+}: ComponentFieldProps<ArrayField<ComponentPropField>>) {
   const relationships = useDocumentFieldRelationships();
   const sensors = useSensors(
     useSensor(MouseSensor),
@@ -62,6 +55,39 @@ export function ArrayFormValueContent({
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
+
+  const { length } = value;
+  // this is not ideal since every item will re-render after adding a new item
+  // and many will re-render after a re-order
+  // but it does mean not every item will be re-rendered for changes within an item
+  // which is the most performance-sensitive case since it'll be for an input or etc.
+  const memoizedPropsForItems = useMemo(() => {
+    return Array.from({ length }).map((_, i) => {
+      return {
+        onChange: (cb: (val: any) => any) => {
+          onChange(value => {
+            const newValue = [...value];
+            newValue[i] = cb(newValue[i]);
+            return newValue;
+          });
+        },
+        onRemove: () => {
+          setKeys(keys => {
+            const newKeys = [...keys];
+            newKeys.splice(i, 1);
+            return newKeys;
+          });
+          onChange(value => {
+            const newValue = [...value];
+            newValue.splice(i, 1);
+            return newValue;
+          });
+        },
+        path: path.concat(i),
+      };
+    });
+  }, [length, onChange, path]);
+
   // this key stuff will sort of produce a less ideal experience if the value array
   // is modified outside of this component, mainly if adding items in the middle or re-ordering
   const [keys, setKeys] = useState(() => value.map(() => (keyCount++).toString()));
@@ -72,12 +98,10 @@ export function ArrayFormValueContent({
     setKeys(keys.concat(Array.from({ length: diff }).map(() => (keyCount++).toString())));
     return null;
   } else if (diff < 0) {
-    setKeys(value.slice(0, keys.length - 1));
+    setKeys(keys.slice(0, keys.length - 1));
     return null;
   }
 
-  console.log(keys);
-
   return (
     <DndContext
       sensors={sensors}
@@ -88,7 +112,7 @@ export function ArrayFormValueContent({
           const overIndex = keys.indexOf(over.id);
           const activeIndex = keys.indexOf(active.id);
           setKeys(arrayMove(keys, activeIndex, overIndex));
-          onChange(arrayMove(value, activeIndex, overIndex));
+          onChange(value => arrayMove(value as any[], activeIndex, overIndex));
         }
       }}
     >
@@ -110,28 +134,15 @@ export function ArrayFormValueContent({
                 id={keys[i]}
                 forceValidation={forceValidation}
                 stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-                path={path.concat(i)}
                 prop={prop.element}
                 value={val}
-                onChange={val => {
-                  const newValue = [...value];
-                  newValue[i] = val;
-                  onChange(newValue);
-                }}
-                onRemove={() => {
-                  const newKeys = [...keys];
-                  newKeys.splice(i, 1);
-                  setKeys(newKeys);
-                  const newValue = [...value];
-                  newValue.splice(i, 1);
-                  onChange(newValue);
-                }}
+                {...memoizedPropsForItems[i]}
               />
             );
           })}
           <Button
             onClick={() => {
-              onChange([...value, getInitialPropsValue(prop.element, relationships)]);
+              onChange(value => [...value, getInitialPropsValue(prop.element, relationships)]);
             }}
           >
             Add
@@ -142,7 +153,7 @@ export function ArrayFormValueContent({
   );
 }
 
-function SortableItem({
+const SortableItem = memo(function SortableItem({
   id,
   onRemove,
   ...props
@@ -216,4 +227,4 @@ function SortableItem({
       </div>
     </li>
   );
-}
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index d26f7935abb..bc4c1e26fa9 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -2,30 +2,21 @@ import { useKeystone } from '@keystone-6/core/admin-ui/context';
 import { RelationshipSelect } from '@keystone-6/core/fields/types/relationship/views/RelationshipSelect';
 import { Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import React, { useState } from 'react';
+import React, { memo, ReactElement, useCallback, useMemo, useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { ComponentPropField, RelationshipData } from '../../component-blocks';
 import { useDocumentFieldRelationships, Relationships } from '../relationship';
 import { assertNever, getPropsForConditionalChange } from './utils';
-import { RelationshipField } from './api';
 import { ArrayFormValueContent } from './array-form-value';
+import { FormField, RelationshipField } from './api';
 
-// this is in a different component to the other form inputs because it uses useKeystone
-// and we want to render the editor outside of the Admin UI on the docs site
-// and a call to useKeystone will break on the docs site
 function RelationshipFormInput({
   prop,
   path,
   value,
   onChange,
   stringifiedPropPathToAutoFocus,
-}: {
-  path: (string | number)[];
-  prop: RelationshipField<any>;
-  value: any;
-  onChange(value: any): void;
-  stringifiedPropPathToAutoFocus: string;
-}) {
+}: ComponentFieldProps<RelationshipField<'many' | 'one'>>) {
   const relationships = useDocumentFieldRelationships();
   const keystone = useKeystone();
   const relationship = relationships[prop.relationship] as Extract<
@@ -52,7 +43,7 @@ function RelationshipFormInput({
                   label: x.label || x.id,
                   data: x.data,
                 })),
-                onChange,
+                onChange: val => onChange(() => val),
               }
             : {
                 kind: 'one',
@@ -62,7 +53,7 @@ function RelationshipFormInput({
                       label: (value as RelationshipData).label || (value as RelationshipData).id,
                     }
                   : null,
-                onChange,
+                onChange: val => onChange(() => val),
               }
         }
       />
@@ -70,105 +61,152 @@ function RelationshipFormInput({
   );
 }
 
-export function FormValueContent({
-  prop,
-  path,
-  value,
-  onChange,
-  stringifiedPropPathToAutoFocus,
-  forceValidation,
-}: {
-  path: (string | number)[];
-  prop: ComponentPropField;
-  value: any;
-  onChange(value: any): void;
+export type ComponentFieldProps<Field extends ComponentPropField> = {
+  path: readonly (string | number)[];
+  prop: Field;
+  // ExtractPropFromComponentPropFieldForRendering is not exactly correct
+  // (specifically it's wrong for child fields)
+  // but it's correct enough to be helpful and child fields do nothing here
+  value: GeneralValuesForFields[Field['kind']];
+  onChange(
+    cb: (val: GeneralValuesForFields[Field['kind']]) => GeneralValuesForFields[Field['kind']]
+  ): void;
   stringifiedPropPathToAutoFocus: string;
   forceValidation: boolean;
-}) {
-  const relationships = useDocumentFieldRelationships();
-  if (prop.kind === 'child') return null;
-  if (prop.kind === 'object') {
+};
+
+type GeneralValuesForFields = {
+  array: readonly unknown[];
+  relationship: null | RelationshipData | readonly RelationshipData[];
+  child: undefined;
+  form: unknown;
+  object: Record<string, unknown>;
+  conditional: { discriminant: string | boolean; value: unknown };
+};
+
+const fieldRenderers: {
+  [Key in ComponentPropField['kind']]: (
+    props: ComponentFieldProps<Extract<ComponentPropField, { kind: Key }>>
+  ) => ReactElement | null;
+} = {
+  array: ArrayFormValueContent,
+  relationship: RelationshipFormInput,
+  child: () => null,
+  form: function FormField(props) {
+    const { onChange } = props;
+    return (
+      <props.prop.Input
+        autoFocus={JSON.stringify(props.path) === props.stringifiedPropPathToAutoFocus}
+        value={props.value}
+        onChange={useCallback(
+          val => {
+            onChange(() => val);
+          },
+          [onChange]
+        )}
+        forceValidation={props.forceValidation && !props.prop.validate(props.value)}
+      />
+    );
+  },
+  object: function ObjectField(props) {
+    const { onChange, prop, path } = props;
+    const onChangeAndPaths = useMemo(() => {
+      return Object.fromEntries(
+        Object.keys(prop.value).map(key => {
+          return [
+            key,
+            {
+              onChange: (cb: (val: unknown) => unknown) => {
+                onChange(value => ({ ...value, [key]: cb(value[key]) }));
+              },
+              path: path.concat(key),
+            },
+          ];
+        })
+      );
+    }, [onChange, prop, path]);
     return (
       <Stack gap="xlarge">
         {Object.entries(prop.value).map(([key, propVal]) => (
           <FormValueContent
             key={key}
-            forceValidation={forceValidation}
-            stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-            path={path.concat(key)}
+            forceValidation={props.forceValidation}
+            stringifiedPropPathToAutoFocus={props.stringifiedPropPathToAutoFocus}
+            path={onChangeAndPaths[key].path}
             prop={propVal}
-            value={value[key]}
-            onChange={val => {
-              onChange({ ...value, [key]: val });
-            }}
+            value={props.value[key]}
+            onChange={onChangeAndPaths[key].onChange}
           />
         ))}
       </Stack>
     );
-  }
-  if (prop.kind === 'conditional') {
+  },
+  conditional: function ConditionalField(props) {
+    const relationships = useDocumentFieldRelationships();
+    const { onChange, prop, path } = props;
+    const discriminant = props.prop.discriminant as FormField<string | boolean, unknown>;
+    const onDiscriminantChange = useCallback(
+      discriminant => {
+        onChange(value =>
+          getPropsForConditionalChange(
+            { discriminant, value: value.value },
+            value,
+            prop,
+            relationships
+          )
+        );
+      },
+      [prop, onChange, relationships]
+    );
+    const discriminantAutoFocus =
+      JSON.stringify(path.concat('discriminant')) === props.stringifiedPropPathToAutoFocus;
     return (
       <Stack gap="xlarge">
-        <prop.discriminant.Input
-          autoFocus={JSON.stringify(path.concat('discriminant')) === stringifiedPropPathToAutoFocus}
-          value={value.discriminant}
-          onChange={discriminant => {
-            onChange(
-              getPropsForConditionalChange(
-                { discriminant, value: value.value },
-                value,
-                prop,
-                relationships
-              )
-            );
-          }}
-          forceValidation={forceValidation && !prop.discriminant.validate(value)}
-        />
+        {useMemo(
+          () => (
+            <discriminant.Input
+              autoFocus={discriminantAutoFocus}
+              value={props.value.discriminant}
+              onChange={onDiscriminantChange}
+              forceValidation={
+                props.forceValidation && !discriminant.validate(props.value.discriminant)
+              }
+            />
+          ),
+          [
+            discriminant,
+            discriminantAutoFocus,
+            props.value.discriminant,
+            props.forceValidation,
+            onDiscriminantChange,
+          ]
+        )}
         <FormValueContent
-          forceValidation={forceValidation}
-          stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-          path={path.concat('value')}
-          prop={prop.values[value.discriminant]}
-          value={value.value}
-          onChange={val => {
-            onChange({ discriminant: value.discriminant, value: val });
-          }}
+          forceValidation={props.forceValidation}
+          stringifiedPropPathToAutoFocus={props.stringifiedPropPathToAutoFocus}
+          path={useMemo(() => path.concat('value'), [path])}
+          prop={prop.values[props.value.discriminant.toString()]}
+          value={props.value.value}
+          onChange={useCallback(
+            val => {
+              onChange(value => {
+                return { discriminant: value.discriminant, value: val(value.value) };
+              });
+            },
+            [onChange]
+          )}
         />
       </Stack>
     );
-  }
-  if (prop.kind === 'relationship') {
-    return (
-      <RelationshipFormInput
-        prop={prop}
-        path={path}
-        value={value}
-        onChange={onChange}
-        stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-      />
-    );
-  }
-  if (prop.kind === 'array') {
-    return (
-      <ArrayFormValueContent
-        prop={prop}
-        path={path}
-        value={value}
-        onChange={onChange}
-        stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-        forceValidation={forceValidation}
-      />
-    );
-  }
-  return (
-    <prop.Input
-      autoFocus={JSON.stringify(path) === stringifiedPropPathToAutoFocus}
-      value={value}
-      onChange={onChange}
-      forceValidation={forceValidation && !prop.validate(value)}
-    />
-  );
-}
+  },
+};
+
+export const FormValueContent = memo(function FormValueContent(
+  props: ComponentFieldProps<ComponentPropField>
+) {
+  const Comp = fieldRenderers[props.prop.kind];
+  return <Comp {...(props as any)} />;
+});
 
 export function findFirstFocusablePropPath(
   prop: ComponentPropField,
@@ -178,21 +216,16 @@ export function findFirstFocusablePropPath(
   if (prop.kind === 'form' || prop.kind === 'relationship') {
     return path;
   }
+  if (prop.kind === 'conditional') {
+    return path.concat('discriminant');
+  }
   if (prop.kind === 'child') {
     return undefined;
   }
-  if (prop.kind === 'object' || prop.kind === 'conditional') {
-    const props: Record<string, ComponentPropField> =
-      prop.kind === 'object'
-        ? prop.value
-        : {
-            discriminant: prop.discriminant,
-            value: prop.values[value.discriminant],
-          };
-    for (const key of Object.keys(props)) {
-      const prop = props[key];
+  if (prop.kind === 'object') {
+    for (const [key, innerProp] of Object.entries(prop.value)) {
       const newPath = path.concat(key);
-      const childFocusable = findFirstFocusablePropPath(prop, newPath, value[key]);
+      const childFocusable = findFirstFocusablePropPath(innerProp, newPath, value[key]);
       if (childFocusable) {
         return childFocusable;
       }
@@ -212,6 +245,8 @@ export function findFirstFocusablePropPath(
   assertNever(prop);
 }
 
+const basePath: (string | number)[] = [];
+
 export function FormValue({
   value,
   onClose,
@@ -220,20 +255,23 @@ export function FormValue({
   isValid,
 }: {
   value: any;
-  onChange(value: any): void;
+  onChange(cb: (val: any) => any): void;
   onClose(): void;
   componentBlockProps: Record<string, ComponentPropField>;
   isValid: boolean;
 }) {
   const [forceValidation, setForceValidation] = useState(false);
-  const rootProp = { kind: 'object' as const, value: componentBlockProps };
-  const focusablePath = JSON.stringify(findFirstFocusablePropPath(rootProp, [], value));
+  const rootProp = useMemo(
+    () => ({ kind: 'object' as const, value: componentBlockProps }),
+    [componentBlockProps]
+  );
+  const focusablePath = JSON.stringify(findFirstFocusablePropPath(rootProp, basePath, value));
   return (
     <Stack gap="xlarge" contentEditable={false}>
       <FormValueContent
         forceValidation={forceValidation}
         onChange={onChange}
-        path={[]}
+        path={basePath}
         prop={rootProp}
         value={value}
         stringifiedPropPathToAutoFocus={focusablePath}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 83fde4f638d..f7af0bc3779 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -1,7 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { Fragment, ReactElement, createContext, useContext, useState, useMemo } from 'react';
+import {
+  Fragment,
+  ReactElement,
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
 import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
 import { Editor, Element, Transforms } from 'slate';
 
@@ -33,7 +41,7 @@ export function getPlaceholderTextForPropPath(
   fields: Record<string, ComponentPropField>,
   formProps: Record<string, any>
 ): string {
-  return getChildFieldAtPropPath(propPath, fields, formProps)?.options.placeholder ?? '';
+  return getChildFieldAtPropPath(propPath, formProps, fields)?.options?.placeholder ?? '';
 }
 
 export function ComponentInlineProp(props: RenderElementProps) {
@@ -101,6 +109,17 @@ export const ComponentBlocksElement = ({
       : true;
   }, [componentBlock, currentElement.props]);
   const documentFieldRelationships = useDocumentFieldRelationships();
+
+  const onCloseEditView = useCallback(() => {
+    setEditMode(false);
+  }, []);
+
+  const onPropsChange = useCallback(
+    val => {
+      setElement(element => ({ props: val(element.props) }));
+    },
+    [setElement]
+  );
   if (!componentBlock) {
     return (
       <div css={{ border: 'red 4px solid', padding: spacing.medium }}>
@@ -162,13 +181,9 @@ Content:`}
         <FormValue
           isValid={isValid}
           componentBlockProps={componentBlock.props}
-          onClose={() => {
-            setEditMode(false);
-          }}
+          onClose={onCloseEditView}
           value={currentElement.props}
-          onChange={val => {
-            setElement({ props: val });
-          }}
+          onChange={onPropsChange}
         />
       )}
       <div css={{ display: editMode ? 'none' : 'block', position: 'relative' }}>
@@ -313,7 +328,11 @@ function ComponentBlockRender({
   children,
 }: {
   element: Element & { type: 'component-block' };
-  onElementChange: (element: Partial<Element>) => void;
+  onElementChange: (
+    cb: (
+      element: Element & { type: 'component-block' }
+    ) => Partial<Element & { type: 'component-block' }>
+  ) => void;
   componentBlock: ComponentBlock;
   children: any;
 }) {
@@ -333,7 +352,7 @@ function ComponentBlockRender({
     componentBlock,
     childrenByPath,
     useDocumentFieldRelationships(),
-    onElementChange
+    props => onElementChange(() => props)
   );
 
   return (
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index 4358128ba4d..05a8d787079 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -55,7 +55,7 @@ function _getPreviewProps(
           onFormPropsChange(
             getPropsForConditionalChange(
               { discriminant: newDiscriminant, value: value.value },
-              value,
+              value as { discriminant: string | boolean; value: any },
               prop,
               relationships
             )
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 957ed284506..8cd681afe6d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -63,15 +63,15 @@ export function assertNever(arg: never): never {
 }
 
 export function getPropsForConditionalChange(
-  newValue: Record<string, any>,
-  oldValue: Record<string, any>,
+  newValue: { discriminant: string | boolean; value: any },
+  oldValue: { discriminant: string | boolean; value: any },
   prop: ConditionalField<any, any>,
   relationships: Relationships
 ) {
   if (newValue.discriminant !== oldValue.discriminant) {
     return {
       discriminant: newValue.discriminant,
-      value: getInitialPropsValue(prop.values[newValue.discriminant], relationships),
+      value: getInitialPropsValue(prop.values[newValue.discriminant.toString()], relationships),
     };
   } else {
     return newValue;
@@ -171,14 +171,14 @@ function getChildFieldAtPropPathInner(
   value: unknown,
   prop: ComponentPropField
 ): undefined | ChildField {
+  if (prop.kind === 'child') {
+    return prop;
+  }
   // because we're checking the length here
   // the non-null asserts on shift are fine
   if (path.length === 0 || prop.kind === 'form' || prop.kind === 'relationship') {
     return;
   }
-  if (prop.kind === 'child') {
-    return prop;
-  }
   if (prop.kind === 'conditional') {
     path.shift();
     const propVal = prop.values[(value as any).discriminant];
diff --git a/packages/fields-document/src/DocumentEditor/utils.ts b/packages/fields-document/src/DocumentEditor/utils.ts
index 3f0f5a3a667..55fb89edb23 100644
--- a/packages/fields-document/src/DocumentEditor/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/utils.ts
@@ -84,10 +84,28 @@ export function useElementWithSetNodes<TElement extends Element>(
   if (state.element !== element) {
     setState({ element, elementWithChanges: element });
   }
-  const setNodes = (changes: Partial<Element>) => {
-    Transforms.setNodes(editor, changes, { at: ReactEditor.findPath(editor, element) });
-    setState({ element, elementWithChanges: { ...element, ...changes } as any });
-  };
+
+  const elementRef = useRef(state.elementWithChanges);
+
+  useEffect(() => {
+    elementRef.current = element;
+  });
+
+  const setNodes = useCallback(
+    (changesOrCallback: Partial<TElement> | ((current: TElement) => Partial<TElement>)) => {
+      const currentElement = elementRef.current;
+      const changes =
+        typeof changesOrCallback === 'function'
+          ? changesOrCallback(currentElement)
+          : changesOrCallback;
+      Transforms.setNodes(editor, changes, { at: ReactEditor.findPath(editor, currentElement) });
+      setState({
+        element: currentElement,
+        elementWithChanges: { ...currentElement, ...changes } as any,
+      });
+    },
+    [editor]
+  );
   return [state.elementWithChanges, setNodes] as const;
 }
 
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 5d2597db12d..ca02144e0d9 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -11,11 +11,14 @@ import {
   FieldControllerConfig,
   FieldProps,
 } from '@keystone-6/core/types';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
 import { assertNever } from '../DocumentEditor/component-blocks/utils';
 
+const basePath: readonly (string | number)[] = [];
+
 export const Field = ({
   field,
   value,
@@ -23,15 +26,22 @@ export const Field = ({
   autoFocus,
   forceValidation,
 }: FieldProps<typeof controller>) => {
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  });
   return (
     <FieldContainer>
       <FieldLabel>{field.label}</FieldLabel>
       <FormValueContent
         forceValidation={!!forceValidation}
-        onChange={value => {
-          onChange?.(value);
-        }}
-        path={[]}
+        onChange={useCallback(
+          getNewVal => {
+            onChange?.(getNewVal(valueRef.current));
+          },
+          [onChange]
+        )}
+        path={basePath}
         prop={field.prop}
         value={value}
         stringifiedPropPathToAutoFocus={autoFocus ? '' : ''}

From ca285c2f6d208f6e44e665219a1cee9429a9156e Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 16 Feb 2022 11:01:38 +1000
Subject: [PATCH 009/124] Allow recursive props

---
 docs/components/docs/DocumentEditorDemo.tsx   |  4 +-
 .../basic/admin/fieldViews/Blah.tsx           | 64 +++++++------
 examples-staging/basic/schema.graphql         | 24 ++---
 examples-staging/basic/schema.ts              |  1 -
 .../component-blocks/initial-values.ts        |  2 +-
 .../fields-document/src/component-blocks.tsx  |  1 +
 .../src/component-graphql-input.tsx           | 67 ++++++++------
 .../src/component-graphql-output.tsx          | 89 ++++++++++++-------
 packages/fields-document/src/component.ts     | 13 ++-
 9 files changed, 159 insertions(+), 106 deletions(-)

diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index 679f9a5f5b4..a18bf71c157 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -265,7 +265,9 @@ export function DocumentFeaturesFormAndCode() {
         path={[]}
         stringifiedPropPathToAutoFocus=""
         value={formValue}
-        onChange={setFormValue}
+        onChange={getNewVal => {
+          setFormValue((getNewVal as any)(formValue));
+        }}
       />
     </div>
   );
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index afccf4cc2e9..d3c664ff25a 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -1,32 +1,44 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { fields } from '@keystone-6/fields-document/component-blocks';
+import {
+  fields,
+  ArrayField,
+  ConditionalField,
+  ObjectField,
+} from '@keystone-6/fields-document/component-blocks';
 
-export const prop = fields.array(
-  fields.conditional(
-    fields.select({
-      label: 'Type',
-      options: [
-        { label: 'Group', value: 'group' },
-        { label: 'Leaf', value: 'leaf' },
-      ] as const,
-      defaultValue: 'leaf',
+const label = fields.text({ label: 'Label' });
+
+const leaf = fields.object({
+  url: fields.url({ label: 'URL' }),
+  label,
+});
+
+const discriminant = fields.select({
+  label: 'Type',
+  options: [
+    { label: 'Group', value: 'group' },
+    { label: 'Leaf', value: 'leaf' },
+  ] as const,
+  defaultValue: 'leaf',
+});
+
+type Prop = ArrayField<
+  ConditionalField<
+    typeof discriminant,
+    { leaf: typeof leaf; group: ObjectField<{ label: typeof label; children: Prop }> }
+  >
+>;
+
+export const prop: Prop = fields.array(
+  fields.conditional(discriminant, {
+    leaf,
+    group: fields.object({
+      label,
+      get children() {
+        return prop;
+      },
     }),
-    {
-      leaf: fields.object({
-        url: fields.url({ label: 'URL' }),
-        label: fields.text({ label: 'Label' }),
-        label2: fields.text({ label: 'Label2' }),
-        label3: fields.text({ label: 'Label3' }),
-        label4: fields.text({ label: 'Label4' }),
-        label5: fields.text({ label: 'Label5' }),
-        label6: fields.text({ label: 'Label6' }),
-        label7: fields.text({ label: 'Label7' }),
-      }),
-      group: fields.object({
-        label: fields.text({ label: 'Label' }),
-      }),
-    }
-  )
+  })
 );
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index 142be45088b..6b3bdc123e5 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -436,12 +436,7 @@ type PostBlahLeaf implements PostBlah {
 type PostBlahLeafValue {
   url: String
   label: String
-  label2: String
-  label3: String
-  label4: String
-  label5: String
-  label6: String
-  label7: String
+  thing: [PostBlah]
 }
 
 type PostBlahGroup implements PostBlah {
@@ -451,6 +446,7 @@ type PostBlahGroup implements PostBlah {
 
 type PostBlahGroupValue {
   label: String
+  children: [PostBlah]
 }
 
 input PostWhereInput {
@@ -499,16 +495,12 @@ input PostBlahUpdateInput {
 input PostBlahLeafUpdateInput {
   url: String
   label: String
-  label2: String
-  label3: String
-  label4: String
-  label5: String
-  label6: String
-  label7: String
+  thing: [PostBlahUpdateInput]
 }
 
 input PostBlahGroupUpdateInput {
   label: String
+  children: [PostBlahUpdateInput]
 }
 
 input PostUpdateArgs {
@@ -533,16 +525,12 @@ input PostBlahCreateInput {
 input PostBlahLeafCreateInput {
   url: String
   label: String
-  label2: String
-  label3: String
-  label4: String
-  label5: String
-  label6: String
-  label7: String
+  thing: [PostBlahCreateInput]
 }
 
 input PostBlahGroupCreateInput {
   label: String
+  children: [PostBlahCreateInput]
 }
 
 """
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index 25df3733663..952be50f181 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -9,7 +9,6 @@ import {
   virtual,
   image,
   file,
-  decimal,
 } from '@keystone-6/core/fields';
 import { componentThing, document } from '@keystone-6/fields-document';
 import { v4 } from 'uuid';
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 6083ca9f8fe..1fc5d97c2e2 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -42,7 +42,7 @@ export function getInitialPropsValue(prop: ComponentPropField, relationships: Re
       const defaultValue = prop.discriminant.defaultValue;
       return {
         discriminant: defaultValue,
-        value: getInitialPropsValue(prop.values[defaultValue], relationships),
+        value: getInitialPropsValue(prop.values[defaultValue.toString()], relationships),
       };
     }
     case 'object': {
diff --git a/packages/fields-document/src/component-blocks.tsx b/packages/fields-document/src/component-blocks.tsx
index 84c0b5c46b7..2134531ca25 100644
--- a/packages/fields-document/src/component-blocks.tsx
+++ b/packages/fields-document/src/component-blocks.tsx
@@ -9,4 +9,5 @@ export type {
   RelationshipData,
   RelationshipField,
   InferRenderersForComponentBlocks,
+  ArrayField,
 } from './DocumentEditor/component-blocks/api';
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index f89fd888d56..3755dc0b74c 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -6,7 +6,21 @@ import { assertNever } from './DocumentEditor/component-blocks/utils';
 export function getGraphQLInputType(
   name: string,
   prop: ComponentPropFieldForGraphQL,
-  operation: 'create' | 'update'
+  operation: 'create' | 'update',
+  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>
+) {
+  if (!cache.has(prop)) {
+    const res = getGraphQLInputTypeInner(name, prop, operation, cache);
+    cache.set(prop, res);
+  }
+  return cache.get(prop)!;
+}
+
+function getGraphQLInputTypeInner(
+  name: string,
+  prop: ComponentPropFieldForGraphQL,
+  operation: 'create' | 'update',
+  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>
 ): graphql.InputType {
   if (prop.kind === 'form') {
     return prop.graphql.input;
@@ -14,35 +28,41 @@ export function getGraphQLInputType(
   if (prop.kind === 'object') {
     return graphql.inputObject({
       name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
-      fields: Object.fromEntries(
-        Object.entries(prop.value).map(([key, val]): [string, graphql.Arg<graphql.InputType>] => {
-          const type = getGraphQLInputType(
-            `${name}${key[0].toUpperCase()}${key.slice(1)}`,
-            val,
-            operation
-          );
-          return [key, graphql.arg({ type })];
-        })
-      ),
+      fields: () =>
+        Object.fromEntries(
+          Object.entries(prop.value).map(([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+            const type = getGraphQLInputType(
+              `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+              val,
+              operation,
+              cache
+            );
+            return [key, graphql.arg({ type })];
+          })
+        ),
     });
   }
   if (prop.kind === 'array') {
-    const innerType = getGraphQLInputType(name, prop.element, operation);
+    const innerType = getGraphQLInputType(name, prop.element, operation, cache);
     return graphql.list(innerType);
   }
   if (prop.kind === 'conditional') {
     return graphql.inputObject({
       name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
-      fields: Object.fromEntries(
-        Object.entries(prop.values).map(([key, val]): [string, graphql.Arg<graphql.InputType>] => {
-          const type = getGraphQLInputType(
-            `${name}${key[0].toUpperCase()}${key.slice(1)}`,
-            val,
-            operation
-          );
-          return [key, graphql.arg({ type })];
-        })
-      ),
+      fields: () =>
+        Object.fromEntries(
+          Object.entries(prop.values).map(
+            ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+              const type = getGraphQLInputType(
+                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                val,
+                operation,
+                cache
+              );
+              return [key, graphql.arg({ type })];
+            }
+          )
+        ),
     });
   }
 
@@ -60,9 +80,6 @@ export function getValueForUpdate(
   if (value === undefined) {
     value = prevValue;
   }
-  // run validation
-  // transform the conditional field structure
-  // to
   if (prop.kind === 'form') {
     if (prop.validate(value)) {
       return value;
diff --git a/packages/fields-document/src/component-graphql-output.tsx b/packages/fields-document/src/component-graphql-output.tsx
index 519152c1073..1638cc90eb3 100644
--- a/packages/fields-document/src/component-graphql-output.tsx
+++ b/packages/fields-document/src/component-graphql-output.tsx
@@ -32,16 +32,32 @@ function wrapGraphQLFieldInResolver<InputSource, OutputSource>(
   });
 }
 
-export function getOutputGraphQLField(
-  name: string,
-  prop: ComponentPropFieldForGraphQL,
-  interfaceImplementations: graphql.ObjectType<unknown>[]
-): graphql.Field<
+type OutputField = graphql.Field<
   { value: unknown },
   Record<string, graphql.Arg<graphql.InputType, boolean>>,
   graphql.OutputType,
   'value'
-> {
+>;
+
+export function getOutputGraphQLField(
+  name: string,
+  prop: ComponentPropFieldForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[],
+  cache: Map<ComponentPropFieldForGraphQL, OutputField>
+) {
+  if (!cache.has(prop)) {
+    const res = getOutputGraphQLFieldInner(name, prop, interfaceImplementations, cache);
+    cache.set(prop, res);
+  }
+  return cache.get(prop)!;
+}
+
+function getOutputGraphQLFieldInner(
+  name: string,
+  prop: ComponentPropFieldForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[],
+  cache: Map<ComponentPropFieldForGraphQL, OutputField>
+): OutputField {
   if (prop.kind === 'form') {
     return prop.graphql.output;
   }
@@ -49,23 +65,25 @@ export function getOutputGraphQLField(
     return graphql.field({
       type: graphql.object<unknown>()({
         name,
-        fields: Object.fromEntries(
-          Object.entries(prop.value).map(
-            ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
-              const field = getOutputGraphQLField(
-                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
-                val,
-                interfaceImplementations
-              );
-              return [key, wrapGraphQLFieldInResolver(field, source => (source as any)[key])];
-            }
-          )
-        ),
+        fields: () =>
+          Object.fromEntries(
+            Object.entries(prop.value).map(
+              ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
+                const field = getOutputGraphQLField(
+                  `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                  val,
+                  interfaceImplementations,
+                  cache
+                );
+                return [key, wrapGraphQLFieldInResolver(field, source => (source as any)[key])];
+              }
+            )
+          ),
       }),
     });
   }
   if (prop.kind === 'array') {
-    const innerField = getOutputGraphQLField(name, prop.element, interfaceImplementations);
+    const innerField = getOutputGraphQLField(name, prop.element, interfaceImplementations, cache);
     const resolve = innerField.resolve;
 
     return graphql.field({
@@ -83,21 +101,30 @@ export function getOutputGraphQLField(
     });
   }
   if (prop.kind === 'conditional') {
-    const discriminantField = getOutputGraphQLField(
-      name + 'Discriminant',
-      prop.discriminant,
-      interfaceImplementations
-    );
+    let discriminantField: OutputField;
+
+    const getDiscriminantField = () => {
+      if (!discriminantField) {
+        discriminantField = getOutputGraphQLField(
+          name + 'Discriminant',
+          prop.discriminant,
+          interfaceImplementations,
+          cache
+        );
+      }
+      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: discriminantField,
-      },
+      fields: () => ({
+        discriminant: getDiscriminantField(),
+      }),
     });
 
     interfaceImplementations.push(
@@ -106,10 +133,10 @@ export function getOutputGraphQLField(
         return graphql.object<SourceType>()({
           name: innerName,
           interfaces: [interfaceType],
-          fields: {
-            discriminant: wrapGraphQLFieldInResolver(discriminantField, x => x.discriminant),
-            value: getOutputGraphQLField(`${innerName}Value`, val, interfaceImplementations),
-          },
+          fields: () => ({
+            discriminant: wrapGraphQLFieldInResolver(getDiscriminantField(), x => x.discriminant),
+            value: getOutputGraphQLField(`${innerName}Value`, val, interfaceImplementations, cache),
+          }),
         });
       })
     );
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 7a645353418..1011120552f 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -75,14 +75,21 @@ export const componentThing =
         },
         input: {
           create: {
-            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create') }),
+            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create', new Map()) }),
             resolve(val) {
               return resolve(getValueForCreate(prop, val));
             },
           },
-          update: { arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'update') }) },
+          update: {
+            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'update', new Map()) }),
+          },
         },
-        output: getOutputGraphQLField(name, prop, unreferencedConcreteInterfaceImplementations),
+        output: getOutputGraphQLField(
+          name,
+          prop,
+          unreferencedConcreteInterfaceImplementations,
+          new Map()
+        ),
         extraOutputFields: {
           [`${meta.fieldKey}Raw`]: graphql.field({
             type: graphql.JSON,

From 5e01bfc6de9cf612a383d4bb2f37111b21eba4c9 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 16 Feb 2022 15:15:59 +1000
Subject: [PATCH 010/124] Check that recursive stuff is fine

---
 examples-staging/basic/schema.graphql         |   3 -
 .../component-blocks/field-assertions.test.ts | 150 ++++++++++++++++++
 .../component-blocks/field-assertions.ts      |  90 +++++++++++
 packages/fields-document/src/component.ts     |   6 +
 packages/fields-document/src/index.ts         |  10 ++
 5 files changed, 256 insertions(+), 3 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts

diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index 6b3bdc123e5..d72df3a3c11 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -436,7 +436,6 @@ type PostBlahLeaf implements PostBlah {
 type PostBlahLeafValue {
   url: String
   label: String
-  thing: [PostBlah]
 }
 
 type PostBlahGroup implements PostBlah {
@@ -495,7 +494,6 @@ input PostBlahUpdateInput {
 input PostBlahLeafUpdateInput {
   url: String
   label: String
-  thing: [PostBlahUpdateInput]
 }
 
 input PostBlahGroupUpdateInput {
@@ -525,7 +523,6 @@ input PostBlahCreateInput {
 input PostBlahLeafCreateInput {
   url: String
   label: String
-  thing: [PostBlahCreateInput]
 }
 
 input PostBlahGroupCreateInput {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
new file mode 100644
index 00000000000..4b571eb7bcc
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
@@ -0,0 +1,150 @@
+import { ArrayField, ConditionalField, fields, FormField, ObjectField } from './api';
+import { assertValidComponentPropField } from './field-assertions';
+
+type EasilyCircularObject = ObjectField<{
+  x: EasilyCircularObject;
+}>;
+const easilyCircularObject: EasilyCircularObject = fields.object({
+  get x() {
+    return easilyCircularObject;
+  },
+});
+
+const discriminant = fields.checkbox({ label: '' });
+
+test('does not allow circular object', () => {
+  expect(() => {
+    assertValidComponentPropField(easilyCircularObject);
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The field at \\"object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+  );
+});
+
+test('does not allow a circular object within an array', () => {
+  expect(() => {
+    assertValidComponentPropField(fields.array(easilyCircularObject));
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The field at \\"array.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+  );
+});
+
+test('does not allow a circular object within a value for a default discriminant of a conditional field', () => {
+  expect(() => {
+    assertValidComponentPropField(
+      fields.conditional(discriminant, {
+        true: fields.empty(),
+        false: easilyCircularObject,
+      })
+    );
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The field at \\"conditional.false.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+  );
+});
+
+test('does not allow a circular object within a value for a non-default discriminant of a conditional field', () => {
+  expect(() => {
+    assertValidComponentPropField(
+      fields.conditional(discriminant, {
+        true: easilyCircularObject,
+        false: fields.empty(),
+      })
+    );
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The field at \\"conditional.true.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+  );
+});
+
+test("does allow a circular conditional as long as it's not the default", () => {
+  type Field = ConditionalField<
+    typeof discriminant,
+    { true: Field; false: FormField<undefined, undefined> }
+  >;
+  const conditional: Field = fields.conditional(discriminant, {
+    get true() {
+      return conditional;
+    },
+    false: fields.empty(),
+  });
+  assertValidComponentPropField(conditional);
+});
+
+test("does not allow a circular conditional if it's the default", () => {
+  type Field = ConditionalField<
+    typeof discriminant,
+    { false: Field; true: FormField<undefined, undefined> }
+  >;
+  const conditional: Field = fields.conditional(discriminant, {
+    get false() {
+      return conditional;
+    },
+    true: fields.empty(),
+  });
+  expect(() => {
+    assertValidComponentPropField(conditional);
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The field at \\"conditional.false\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+  );
+});
+
+test("allows circularity if it's stopped by an array field", () => {
+  type Field = ArrayField<
+    ObjectField<{
+      blah: Field;
+    }>
+  >;
+  const blah: Field = fields.array(
+    fields.object({
+      get blah() {
+        return blah;
+      },
+    })
+  );
+  assertValidComponentPropField(blah);
+});
+
+test('does not allow a field that returns a different field from a getter each time', () => {
+  type Field = ArrayField<
+    ObjectField<{
+      blah: Field;
+    }>
+  >;
+  const blah: () => Field = () =>
+    fields.array(
+      fields.object({
+        get blah() {
+          return blah();
+        },
+      })
+    );
+  expect(() => {
+    assertValidComponentPropField(blah());
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"Fields on an object field must not change over time but the field at \\"array.object.blah\\" changes between accesses"`
+  );
+});
+
+// this is just a test to say "this is explicitly unhandled"
+// if you do this, you know you're doing Bad Things
+test('exceeds the call stack size for an infinitely recursive field where all fields are different', () => {
+  type Field = ArrayField<
+    ObjectField<{
+      blah: Field;
+    }>
+  >;
+  const blah: () => Field = () => {
+    let a: Field;
+    return fields.array(
+      fields.object({
+        get blah() {
+          if (!a) {
+            a = blah();
+          }
+          return a;
+        },
+      })
+    );
+  };
+  expect(() => {
+    assertValidComponentPropField(blah());
+  }).toThrowErrorMatchingInlineSnapshot(`"Maximum call stack size exceeded"`);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
new file mode 100644
index 00000000000..6bddb3425c8
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -0,0 +1,90 @@
+import { ComponentPropField } from './api';
+import { assertNever } from './utils';
+
+export function assertValidComponentPropField(prop: ComponentPropField) {
+  assertValidComponentPropFieldInner(prop, [], [], new Set());
+}
+
+// recursive things can exist but they have to either be:
+// - inside the non-default portion of a conditional field
+// - inside an array field
+// when we hit the non-default portion of a conditional field or an array field
+// checking inside of it essentially means pretend it's a new thing
+function assertValidComponentPropFieldInner(
+  prop: ComponentPropField,
+  propAncestors: ComponentPropField[],
+  propPath: string[],
+  seenProps: Set<ComponentPropField>
+) {
+  if (prop.kind === 'form' || prop.kind === 'child' || prop.kind === 'relationship') {
+    return;
+  }
+  const ancestor = propAncestors.indexOf(prop);
+  if (ancestor !== -1) {
+    throw new Error(
+      `The field at "${propPath.join(
+        '.'
+      )}" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure.`
+    );
+  }
+  if (seenProps.has(prop)) {
+    return;
+  }
+  propPath.push(prop.kind);
+  try {
+    seenProps.add(prop);
+    if (prop.kind === 'array') {
+      assertValidComponentPropFieldInner(prop.element, [], propPath, seenProps);
+      return;
+    }
+    if (prop.kind === 'object') {
+      propAncestors.push(prop);
+      for (const [key, innerProp] of Object.entries(prop.value)) {
+        propPath.push(key);
+        if (prop.value[key] !== innerProp) {
+          throw new Error(
+            `Fields on an object field must not change over time but the field at "${propPath.join(
+              '.'
+            )}" changes between accesses`
+          );
+        }
+        assertValidComponentPropFieldInner(innerProp, propAncestors, propPath, seenProps);
+        propPath.pop();
+      }
+      const poppedProp = propAncestors.pop();
+      if (poppedProp !== prop) {
+        throw new Error('there is an internal bug');
+      }
+      return;
+    }
+    if (prop.kind === 'conditional') {
+      propAncestors.push(prop);
+      const stringifiedDefaultDiscriminant = prop.discriminant.defaultValue.toString();
+      for (const [key, innerProp] of Object.entries(prop.values)) {
+        propPath.push(key);
+        if (prop.values[key] !== innerProp) {
+          throw new Error(
+            `Fields on a conditional field must not change over time but the field at "${propPath.join(
+              '.'
+            )}" changes between accesses`
+          );
+        }
+        assertValidComponentPropFieldInner(
+          innerProp,
+          key === stringifiedDefaultDiscriminant ? propAncestors : [],
+          propPath,
+          seenProps
+        );
+        propPath.pop();
+      }
+      const poppedProp = propAncestors.pop();
+      if (poppedProp !== prop) {
+        throw new Error('there is an internal bug');
+      }
+      return;
+    }
+  } finally {
+    propPath.pop();
+  }
+  assertNever(prop);
+}
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 1011120552f..78f25119aea 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -15,6 +15,7 @@ import {
   getValueForCreate,
   getValueForUpdate,
 } from './component-graphql-input';
+import { assertValidComponentPropField } from './DocumentEditor/component-blocks/field-assertions';
 
 export type ComponentThingFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
   CommonFieldConfig<ListTypeInfo> & {
@@ -33,6 +34,11 @@ export const componentThing =
     if ((config as any).isIndexed === 'unique') {
       throw Error("isIndexed: 'unique' is not a supported option for field type component");
     }
+    try {
+      assertValidComponentPropField(prop);
+    } catch (err) {
+      throw new Error(`${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`);
+    }
 
     const resolve = (val: JSONValue | undefined) =>
       val === null && meta.provider === 'postgresql' ? 'JsonNull' : val;
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 0b73aebe60c..7711a103b50 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -13,6 +13,7 @@ import { ComponentBlock } from './component-blocks';
 import { DocumentFeatures } from './views';
 import { validateAndNormalizeDocument } from './validation';
 import { addRelationshipData } from './relationship-data';
+import { assertValidComponentPropField } from './DocumentEditor/component-blocks/field-assertions';
 
 export { componentThing } from './component';
 
@@ -114,6 +115,15 @@ export const document =
     if ((config as any).isIndexed === 'unique') {
       throw Error("isIndexed: 'unique' is not a supported option for field type document");
     }
+    for (const [name, block] of Object.entries(componentBlocks)) {
+      try {
+        assertValidComponentPropField({ kind: 'object', value: block.props });
+      } catch (err) {
+        throw new Error(
+          `Component block ${name} in ${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`
+        );
+      }
+    }
 
     return jsonFieldTypePolyfilledForSQLite(
       meta.provider,

From e5c7c8f3f09bd1b84f40e943decced45e81bb94f Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 18 Feb 2022 14:46:09 +1000
Subject: [PATCH 011/124] Array field in document field cleanup

---
 .../basic/admin/fieldViews/Content.tsx        | 44 +++++++++++++++++
 .../DocumentEditor/component-blocks/api.tsx   | 10 ++++
 .../component-blocks/field-assertions.ts      | 10 +---
 .../component-blocks/initial-values.ts        |  2 +-
 .../component-blocks/preview-props.ts         | 47 +++++++++++++++----
 .../component-blocks/utils.test.ts            | 15 +++++-
 .../DocumentEditor/component-blocks/utils.ts  | 35 ++++++++++++++
 .../document-features-normalization.ts        |  2 +-
 packages/fields-document/src/validation.ts    |  2 +-
 9 files changed, 145 insertions(+), 22 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 637579b9dcf..ffba9b77a81 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -14,6 +14,7 @@ import {
   ToolbarGroup,
   ToolbarSeparator,
 } from '@keystone-6/fields-document/primitives';
+import { useEffect } from 'react';
 
 const noticeIconMap = {
   info: InfoIcon,
@@ -23,6 +24,49 @@ const noticeIconMap = {
 };
 
 export const componentBlocks = {
+  myList: component({
+    component: function MyList({ children }) {
+      useEffect(() => {
+        if (!children.elements.length) {
+          children.insert();
+        }
+      });
+      return (
+        <ul css={{ padding: 0 }}>
+          {children.elements.map((element, i) => (
+            <li css={{ listStyle: 'none' }} key={i}>
+              <input
+                contentEditable="false"
+                css={{ marginRight: 8 }}
+                type="checkbox"
+                checked={element.done.value}
+                onChange={event => {
+                  element.done.onChange(event.target.checked);
+                }}
+              />
+              {element.content}
+            </li>
+          ))}
+        </ul>
+      );
+    },
+    label: 'My List',
+    props: {
+      children: fields.array(
+        fields.object({
+          done: fields.checkbox({ label: 'Done' }),
+          content: fields.child({
+            kind: 'inline',
+            placeholder: '',
+            formatting: 'inherit',
+            links: 'inherit',
+            relationships: 'inherit',
+          }),
+        })
+      ),
+    },
+    chromeless: true,
+  }),
   hero: component({
     component: props => {
       return (
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 7591ed8b8c2..3da0cc5673c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -527,6 +527,11 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
           onChange(relationshipData: readonly HydratedRelationshipData[]): void;
         };
       }[Cardinality]
+    : Prop extends ArrayField<infer ElementField>
+    ? {
+        readonly elements: readonly ExtractPropFromComponentPropFieldForPreview<ElementField>[];
+        insert(): void;
+      }
     : never;
 
 type DiscriminantStringToDiscriminantValue<
@@ -569,6 +574,11 @@ type ExtractPropFromComponentPropFieldForToolbar<Prop extends ComponentPropField
           onChange(relationshipData: readonly HydratedRelationshipData[]): void;
         };
       }[Cardinality]
+    : Prop extends ArrayField<infer ElementField>
+    ? {
+        readonly elements: readonly ExtractPropFromComponentPropFieldForToolbar<ElementField>[];
+        insert(): void;
+      }
     : never;
 
 export type HydratedRelationshipData = {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
index 6bddb3425c8..87cc1b37975 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -51,10 +51,7 @@ function assertValidComponentPropFieldInner(
         assertValidComponentPropFieldInner(innerProp, propAncestors, propPath, seenProps);
         propPath.pop();
       }
-      const poppedProp = propAncestors.pop();
-      if (poppedProp !== prop) {
-        throw new Error('there is an internal bug');
-      }
+      propAncestors.pop();
       return;
     }
     if (prop.kind === 'conditional') {
@@ -77,10 +74,7 @@ function assertValidComponentPropFieldInner(
         );
         propPath.pop();
       }
-      const poppedProp = propAncestors.pop();
-      if (poppedProp !== prop) {
-        throw new Error('there is an internal bug');
-      }
+      propAncestors.pop();
       return;
     }
   } finally {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 1fc5d97c2e2..2f7f9b2f6bb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -32,7 +32,7 @@ export function getInitialPropsValue(prop: ComponentPropField, relationships: Re
     case 'form':
       return prop.defaultValue;
     case 'child':
-      return undefined;
+      return null;
     case 'relationship':
       return (relationships[prop.relationship] as Extract<Relationships[string], { kind: 'prop' }>)
         .many
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index 05a8d787079..09892e58571 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -2,12 +2,13 @@ import { Element } from 'slate';
 import { ReactElement } from 'react';
 import { ComponentBlock } from '../../component-blocks';
 import { Relationships } from '../relationship';
-import { getPropsForConditionalChange } from './utils';
+import { assertNever, getPropsForConditionalChange } from './utils';
 import { ComponentPropField } from './api';
+import { getInitialPropsValue } from './initial-values';
 
 function _getPreviewProps(
   prop: ComponentPropField,
-  value: Record<string, any>,
+  value: unknown,
   childrenByPath: Record<string, ReactElement>,
   path: (string | number)[],
   relationships: Relationships,
@@ -29,12 +30,12 @@ function _getPreviewProps(
       Object.keys(prop.value).forEach(key => {
         previewProps[key] = _getPreviewProps(
           prop.value[key],
-          value[key],
+          (value as any)[key],
           childrenByPath,
           path.concat(key),
           relationships,
           newVal => {
-            onFormPropsChange({ ...value, [key]: newVal });
+            onFormPropsChange({ ...(value as any), [key]: newVal });
           }
         );
       });
@@ -49,13 +50,14 @@ function _getPreviewProps(
       };
     }
     case 'conditional': {
+      const conditionalValue = value as { discriminant: string | boolean; value: unknown };
       return {
-        discriminant: value.discriminant,
+        discriminant: (value as any).discriminant,
         onChange(newDiscriminant: any) {
           onFormPropsChange(
             getPropsForConditionalChange(
-              { discriminant: newDiscriminant, value: value.value },
-              value as { discriminant: string | boolean; value: any },
+              { discriminant: newDiscriminant, value: conditionalValue.value },
+              conditionalValue,
               prop,
               relationships
             )
@@ -63,20 +65,45 @@ function _getPreviewProps(
         },
         options: prop.discriminant.options,
         value: _getPreviewProps(
-          prop.values[value.discriminant],
-          value.value,
+          prop.values[conditionalValue.discriminant.toString()],
+          conditionalValue.value,
           childrenByPath,
           path.concat('value'),
           relationships,
           val => {
             onFormPropsChange({
-              discriminant: value.discriminant,
+              discriminant: conditionalValue.discriminant,
               value: val,
             });
           }
         ),
       };
     }
+    case 'array': {
+      const arrayValue = value as unknown[];
+      return {
+        elements: arrayValue.map((val, i) =>
+          _getPreviewProps(
+            prop.element,
+            val,
+            childrenByPath,
+            path.concat(i),
+            relationships,
+            val => {
+              const newValue = [...(value as unknown[])];
+              newValue[i] = val;
+              onFormPropsChange(newValue);
+            }
+          )
+        ),
+        insert() {
+          onFormPropsChange([...arrayValue, getInitialPropsValue(prop.element, relationships)]);
+        },
+      };
+    }
+    default: {
+      assertNever(prop);
+    }
   }
 }
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
index d6c8b51ea38..ac386df8632 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
@@ -1,5 +1,5 @@
 import { fields } from './api';
-import { getChildFieldAtPropPath } from './utils';
+import { getAncestorFields, getChildFieldAtPropPath } from './utils';
 
 const blockChild = fields.child({ kind: 'block', placeholder: '' });
 const blockChild2 = fields.child({ kind: 'block', placeholder: '' });
@@ -18,12 +18,14 @@ const props = {
 };
 
 const falseVal = {
+  something: {},
   another: {
     discriminant: false,
   },
 };
 
 const trueVal = {
+  something: {},
   another: {
     discriminant: true,
   },
@@ -35,3 +37,14 @@ test('getChildFieldAtPath', () => {
   expect(getChildFieldAtPropPath(['another', 'value'], trueVal, props)).toBe(inlineChild);
   expect(getChildFieldAtPropPath(['inlineChild2'], falseVal, props)).toBe(inlineChild2);
 });
+
+test('getAncestorFields', () => {
+  let root = { kind: 'object' as const, value: props };
+  expect(getAncestorFields(root, ['something', 'blockChild'], falseVal)).toEqual([
+    root,
+    props.something,
+  ]);
+  expect(getAncestorFields(root, ['another', 'value'], falseVal)).toEqual([root, props.another]);
+  expect(getAncestorFields(root, ['another', 'value'], trueVal)).toEqual([root, props.another]);
+  expect(getAncestorFields(root, ['inlineChild2'], falseVal)).toEqual([root]);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 8cd681afe6d..f41f4cad5e0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -240,3 +240,38 @@ export function clientSideValidateProp(prop: ComponentPropField, value: any): bo
     }
   }
 }
+
+export function getAncestorFields(
+  rootProp: ComponentPropField,
+  path: (string | number)[],
+  value: unknown
+) {
+  const ancestors: ComponentPropField[] = [];
+  const currentPath = [...path];
+  let currentProp = rootProp;
+  let currentValue = value;
+  while (currentPath.length) {
+    ancestors.push(currentProp);
+    const key = currentPath.shift()!; // this code only runs when path.length is truthy so this non-null assertion is fine
+    if (currentProp.kind === 'array') {
+      currentProp = currentProp.element;
+      currentValue = (currentValue as any)[key];
+    } else if (currentProp.kind === 'conditional') {
+      currentProp = currentProp.values[(value as any).discriminant];
+      currentValue = (currentValue as any).value;
+    } else if (currentProp.kind === 'object') {
+      currentValue = (currentValue as any)[key];
+      currentProp = currentProp.value[key];
+    } else if (
+      currentProp.kind === 'child' ||
+      currentProp.kind === 'form' ||
+      currentProp.kind === 'relationship'
+    ) {
+      console.log(key);
+      throw new Error('unexpected prop');
+    } else {
+      assertNever(currentProp);
+    }
+  }
+  return ancestors;
+}
diff --git a/packages/fields-document/src/DocumentEditor/document-features-normalization.ts b/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
index 4b42acca07f..a532b7b9110 100644
--- a/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
+++ b/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
@@ -2,7 +2,7 @@ import { Text, Transforms, Element, NodeEntry, Editor, Node } from 'slate';
 import { DocumentFeatures } from '../views';
 import { Relationships } from './relationship';
 
-function areArraysEqual(arrA: any[], arrB: any[]) {
+export function areArraysEqual(arrA: unknown[], arrB: unknown[]) {
   if (arrA.length !== arrB.length) {
     return false;
   }
diff --git a/packages/fields-document/src/validation.ts b/packages/fields-document/src/validation.ts
index 591b3877dc4..10edff6f5b8 100644
--- a/packages/fields-document/src/validation.ts
+++ b/packages/fields-document/src/validation.ts
@@ -32,7 +32,7 @@ function validateComponentBlockProps(
     throw new PropValidationError('Invalid form prop value', path);
   }
   if (prop.kind === 'child') {
-    return undefined;
+    return null;
   }
   if (prop.kind === 'relationship') {
     // these two checks will only fail because of things done by the solution developer, not an solution user

From 6abf6f4013af765eb7ab8c1915dd2b9e0d1c8e2b Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 21 Feb 2022 10:58:43 +1000
Subject: [PATCH 012/124] Better array behaviour in the document field

---
 README.md                                     |  14 +
 .../basic/admin/fieldViews/Content.tsx        |  14 +-
 .../component-blocks/array-form-value.tsx     |   9 +-
 .../DocumentEditor/component-blocks/form.tsx  |  12 +-
 .../component-blocks/normalization.test.tsx   | 277 ++++++++++++++++++
 .../component-blocks/preview-props.ts         |   4 +-
 .../DocumentEditor/component-blocks/utils.ts  |  19 +-
 .../with-component-blocks.tsx                 | 254 +++++++++++++++-
 .../src/DocumentEditor/slate-types.ts         |   3 +-
 .../DocumentEditor/tests/jsx/namespace.d.ts   |   3 +-
 .../src/DocumentEditor/utils.ts               |   1 +
 .../src/component-views/index.tsx             |   4 +-
 .../src/structure-validation.ts               |   3 +-
 packages/fields-document/src/validation.ts    |   8 +-
 14 files changed, 581 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 41101728a4d..29d980d602b 100644
--- a/README.md
+++ b/README.md
@@ -75,3 +75,17 @@ KeystoneJS adheres to the [Contributor Covenant Code of Conduct](/CODE-OF-CONDUC
 ## License
 
 Copyright (c) 2021 Thinkmill Labs Pty Ltd. Licensed under the MIT License.
+
+[tsserver 2322] [E] Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(((users: { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | ... 1 more ... | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; }[]) => void) & (((value: string[] | null) => void) | ....‘.
+Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘((users: { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | null | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; }[]) => void) & ((value: string[] | null) => void)‘.
+Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(value: string[] | null) => void’.
+Types of parameters ‘newValue’ and ‘value’ are incompatible.
+Type ‘string[] | null’ is not assignable to type ‘(string | { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | ... 1 more ... | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; })[]’.
+Type ‘null’ is not assignable to type ‘(string | { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | ... 1 more ... | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; })[]’.
+
+[tsserver 2322] [E] Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(((users: Collaborator[]) => void) & (((value: string[] | null) => void) | ((value: string | null) => void | Promise<void>) | undefined)) | (((users: (string | Collaborator)[]) => void) & (((value: string[] | null) => void) | ... 1 more ... | undefined)) | (((user: Collaborator | null) => void) & (((value: string[] ...‘.
+Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘((users: Collaborator[]) => void) & ((value: string[] | null) => void)‘.
+Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(value: string[] | null) => void’.
+Types of parameters ‘newValue’ and ‘value’ are incompatible.
+Type ‘string[] | null’ is not assignable to type ‘(string | Collaborator)[]’.
+Type ‘null’ is not assignable to type ‘(string | Collaborator)[]’.
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index ffba9b77a81..08778fbf138 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -40,9 +40,7 @@ export const componentBlocks = {
                 css={{ marginRight: 8 }}
                 type="checkbox"
                 checked={element.done.value}
-                onChange={event => {
-                  element.done.onChange(event.target.checked);
-                }}
+                onChange={event => element.done.onChange(event.target.checked)}
               />
               {element.content}
             </li>
@@ -55,17 +53,11 @@ export const componentBlocks = {
       children: fields.array(
         fields.object({
           done: fields.checkbox({ label: 'Done' }),
-          content: fields.child({
-            kind: 'inline',
-            placeholder: '',
-            formatting: 'inherit',
-            links: 'inherit',
-            relationships: 'inherit',
-          }),
+          content: fields.child({ kind: 'inline', placeholder: '', formatting: 'inherit' }),
         })
       ),
     },
-    chromeless: true,
+    // chromeless: true,
   }),
   hero: component({
     component: props => {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
index 22450f091cc..b17dad52c2c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -24,6 +24,7 @@ import { useDocumentFieldRelationships } from '../relationship';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField, ComponentPropField } from './api';
 import { ComponentFieldProps, FormValueContent } from './form';
+import { PropPath } from './utils';
 
 const dragIcon = (
   <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
@@ -123,7 +124,6 @@ export function ArrayFormValueContent({
             display: 'flex',
             gap: 8,
             flexDirection: 'column',
-            listStyle: 'none',
             padding: 0,
           }}
         >
@@ -159,7 +159,7 @@ const SortableItem = memo(function SortableItem({
   ...props
 }: {
   id: string;
-  path: (string | number)[];
+  path: PropPath;
   prop: ComponentPropField;
   value: any;
   onChange(value: any): void;
@@ -181,7 +181,10 @@ const SortableItem = memo(function SortableItem({
   return (
     <li
       ref={setNodeRef}
-      css={{ transform: `translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0))` }}
+      css={{
+        transform: `translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0))`,
+        listStyle: 'none',
+      }}
       style={style}
     >
       <div
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index bc4c1e26fa9..96f1b13b63d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -6,7 +6,7 @@ import React, { memo, ReactElement, useCallback, useMemo, useState } from 'react
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { ComponentPropField, RelationshipData } from '../../component-blocks';
 import { useDocumentFieldRelationships, Relationships } from '../relationship';
-import { assertNever, getPropsForConditionalChange } from './utils';
+import { assertNever, getPropsForConditionalChange, PropPath, ReadonlyPropPath } from './utils';
 import { ArrayFormValueContent } from './array-form-value';
 import { FormField, RelationshipField } from './api';
 
@@ -62,7 +62,7 @@ function RelationshipFormInput({
 }
 
 export type ComponentFieldProps<Field extends ComponentPropField> = {
-  path: readonly (string | number)[];
+  path: ReadonlyPropPath;
   prop: Field;
   // ExtractPropFromComponentPropFieldForRendering is not exactly correct
   // (specifically it's wrong for child fields)
@@ -210,9 +210,9 @@ export const FormValueContent = memo(function FormValueContent(
 
 export function findFirstFocusablePropPath(
   prop: ComponentPropField,
-  path: (string | number)[],
+  path: PropPath,
   value: any
-): (string | number)[] | undefined {
+): PropPath | undefined {
   if (prop.kind === 'form' || prop.kind === 'relationship') {
     return path;
   }
@@ -235,7 +235,7 @@ export function findFirstFocusablePropPath(
   if (prop.kind === 'array') {
     for (const [idx, val] of (value as any[]).entries()) {
       const newPath = path.concat(idx);
-      const childFocusable = findFirstFocusablePropPath(prop, newPath, val);
+      const childFocusable = findFirstFocusablePropPath(prop.element, newPath, val);
       if (childFocusable) {
         return childFocusable;
       }
@@ -245,7 +245,7 @@ export function findFirstFocusablePropPath(
   assertNever(prop);
 }
 
-const basePath: (string | number)[] = [];
+const basePath: PropPath = [];
 
 export function FormValue({
   value,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
index c2ca142c540..252c34fede4 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
@@ -614,3 +614,280 @@ test('toggling to heading when in an inline prop', () => {
     </editor>
   `);
 });
+
+test('child field in array field insertBreak', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block component="myList" props={{ children: [{ content: null, done: false }] }}>
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>
+            something
+            <cursor />
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        myList: component({
+          component: () => null,
+          label: '',
+          props: {
+            children: fields.array(
+              fields.object({
+                content: fields.child({ kind: 'inline', placeholder: '' }),
+                done: fields.checkbox({ label: '' }),
+              })
+            ),
+          },
+        }),
+      },
+    }
+  );
+  editor.insertBreak();
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="myList"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "content": null,
+                "done": false,
+              },
+              Object {
+                "content": null,
+                "done": false,
+              },
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            something
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            <cursor />
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('child field in array field deleteBackward at end', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="myList"
+        props={{
+          children: [
+            { content: null, done: false },
+            { content: null, done: true },
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>something</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'content']}>
+          <text>
+            <cursor />
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      skipRenderingDOM: true,
+      componentBlocks: {
+        myList: component({
+          component: () => null,
+          label: '',
+          props: {
+            children: fields.array(
+              fields.object({
+                content: fields.child({ kind: 'inline', placeholder: '' }),
+                done: fields.checkbox({ label: '' }),
+              })
+            ),
+          },
+        }),
+      },
+    }
+  );
+  editor.deleteBackward('character');
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="myList"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "content": null,
+                "done": false,
+              },
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            something
+            <cursor />
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('child field in array field deleteBackward in middle', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="myList"
+        props={{
+          children: [
+            { content: null, something: '1' },
+            { content: null, something: '2' },
+            { content: null, something: '3' },
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'content']}>
+          <text>
+            <cursor />
+            second
+          </text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'content']}>
+          <text>third</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      skipRenderingDOM: true,
+      componentBlocks: {
+        myList: component({
+          component: () => null,
+          label: '',
+          props: {
+            children: fields.array(
+              fields.object({
+                content: fields.child({ kind: 'inline', placeholder: '' }),
+                something: fields.text({ label: '' }),
+              })
+            ),
+          },
+        }),
+      },
+    }
+  );
+  editor.deleteBackward('character');
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="myList"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "content": null,
+                "something": "1",
+              },
+              Object {
+                "content": null,
+                "something": "3",
+              },
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+            <cursor />
+            second
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            third
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index 09892e58571..a2da33db905 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -2,7 +2,7 @@ import { Element } from 'slate';
 import { ReactElement } from 'react';
 import { ComponentBlock } from '../../component-blocks';
 import { Relationships } from '../relationship';
-import { assertNever, getPropsForConditionalChange } from './utils';
+import { assertNever, getPropsForConditionalChange, PropPath } from './utils';
 import { ComponentPropField } from './api';
 import { getInitialPropsValue } from './initial-values';
 
@@ -10,7 +10,7 @@ function _getPreviewProps(
   prop: ComponentPropField,
   value: unknown,
   childrenByPath: Record<string, ReactElement>,
-  path: (string | number)[],
+  path: PropPath,
   relationships: Relationships,
   onFormPropsChange: (formProps: Record<string, any>) => void
 ): any {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index f41f4cad5e0..9fef97459ac 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -6,12 +6,12 @@ import { Mark } from '../utils';
 import { ChildField } from './api';
 import { getInitialPropsValue } from './initial-values';
 
-type PathToChildFieldWithOption = { path: (string | number)[]; options: ChildField['options'] };
+type PathToChildFieldWithOption = { path: PropPath; options: ChildField['options'] };
 
 function _findChildPropPaths(
   value: any,
   prop: ComponentPropField,
-  path: (string | number)[]
+  path: PropPath
 ): PathToChildFieldWithOption[] {
   switch (prop.kind) {
     case 'form':
@@ -45,7 +45,7 @@ function _findChildPropPaths(
 export function findChildPropPaths(
   value: Record<string, any>,
   props: Record<string, ComponentPropField>
-): { path: (string | number)[] | undefined; options: ChildField['options'] }[] {
+): { path: PropPath | undefined; options: ChildField['options'] }[] {
   let propPaths = _findChildPropPaths(value, { kind: 'object', value: props }, []);
   if (!propPaths.length) {
     return [
@@ -167,7 +167,7 @@ export function getDocumentFeaturesForChildField(
 }
 
 function getChildFieldAtPropPathInner(
-  path: (string | number)[],
+  path: PropPath,
   value: unknown,
   prop: ComponentPropField
 ): undefined | ChildField {
@@ -197,7 +197,7 @@ function getChildFieldAtPropPathInner(
 }
 
 export function getChildFieldAtPropPath(
-  path: readonly (string | number)[],
+  path: ReadonlyPropPath,
   value: Record<string, unknown>,
   props: Record<string, ComponentPropField>
 ): undefined | ChildField {
@@ -241,11 +241,7 @@ export function clientSideValidateProp(prop: ComponentPropField, value: any): bo
   }
 }
 
-export function getAncestorFields(
-  rootProp: ComponentPropField,
-  path: (string | number)[],
-  value: unknown
-) {
+export function getAncestorFields(rootProp: ComponentPropField, path: PropPath, value: unknown) {
   const ancestors: ComponentPropField[] = [];
   const currentPath = [...path];
   let currentProp = rootProp;
@@ -275,3 +271,6 @@ export function getAncestorFields(
   }
   return ancestors;
 }
+
+export type PropPath = (string | number)[];
+export type ReadonlyPropPath = readonly (string | number)[];
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index db076f20776..c5ba990ef24 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -1,20 +1,26 @@
 import { Editor, Element, Transforms, Range, NodeEntry, Path, Node, Text } from 'slate';
 
 import weakMemoize from '@emotion/weak-memoize';
-import { ChildField, ComponentBlock } from '../../component-blocks';
+import { ChildField, ComponentBlock, ComponentPropField } from '../../component-blocks';
 import { assert, moveChildren } from '../utils';
 import { DocumentFeatures } from '../../views';
 import {
+  areArraysEqual,
   normalizeElementBasedOnDocumentFeatures,
   normalizeInlineBasedOnLinksAndRelationships,
   normalizeTextBasedOnInlineMarksAndSoftBreaks,
 } from '../document-features-normalization';
 import { Relationships } from '../relationship';
 import {
+  assertNever,
   DocumentFeaturesForChildField,
   findChildPropPaths,
+  getAncestorFields,
   getDocumentFeaturesForChildField,
+  PropPath,
 } from './utils';
+import { getInitialPropsValue } from './initial-values';
+import { ArrayField } from './api';
 
 function getAncestorComponentBlock(editor: Editor) {
   if (editor.selection) {
@@ -100,6 +106,132 @@ function normalizeNodeWithinComponentProp(
   return didNormalization;
 }
 
+function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField): boolean {
+  const queue = new Set<ComponentPropField>([rootProp]);
+  let hasFoundChildField = false;
+  for (const prop of queue) {
+    if (prop.kind === 'form' || prop.kind === 'relationship') {
+    } else if (prop.kind === 'child') {
+      if (hasFoundChildField) {
+        return false;
+      }
+      hasFoundChildField = true;
+    } else if (prop.kind === 'array') {
+      queue.add(prop.element);
+    } else if (prop.kind === 'object') {
+      for (const innerProp of Object.values(prop.value)) {
+        queue.add(innerProp);
+      }
+    } else if (prop.kind === 'conditional') {
+      for (const innerProp of Object.values(prop.values)) {
+        queue.add(innerProp);
+      }
+    } else {
+      assertNever(prop);
+    }
+  }
+  return hasFoundChildField;
+}
+
+function isPropPathWithin(outer: PropPath, inner: PropPath) {
+  if (outer.length >= inner.length) {
+    return false;
+  }
+  for (const [idx, element] of outer.entries()) {
+    if (element !== inner[idx]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function findArrayFieldsWithSingleChildField(prop: ComponentPropField, value: unknown) {
+  const propPaths: [PropPath, ArrayField<ComponentPropField>][] = [];
+  transformProps(prop, value, (prop, value, path) => {
+    if (prop.kind === 'array') {
+      if (doesPropOnlyEverContainASingleChildField(prop.element)) {
+        propPaths.push([path, prop]);
+      }
+    }
+    return value;
+  });
+  return propPaths;
+}
+
+function transformProps(
+  prop: ComponentPropField,
+  value: unknown,
+  transformer: (prop: ComponentPropField, value: unknown, path: PropPath) => unknown,
+  path: PropPath = []
+): unknown {
+  if (prop.kind === 'form' || prop.kind === 'relationship' || prop.kind === 'child') {
+    return transformer(prop, value, path);
+  }
+  if (prop.kind === 'object') {
+    return transformer(
+      prop,
+      Object.fromEntries(
+        Object.entries(value as Record<string, unknown>).map(([key, val]) => {
+          return [key, transformProps(prop.value[key], val, transformer, path.concat(key))];
+        })
+      ),
+      path
+    );
+  }
+  if (prop.kind === 'array') {
+    return transformer(
+      prop,
+      (value as unknown[]).map((val, i) =>
+        transformProps(prop.element, val, transformer, path.concat(i))
+      ),
+      path
+    );
+  }
+  if (prop.kind === 'conditional') {
+    const discriminant = (value as any).discriminant;
+    return transformer(
+      prop,
+      {
+        discriminant: transformer(prop, discriminant, path.concat('discriminant')),
+        value: transformProps(
+          prop.values[discriminant.toString() as string],
+          (value as any).value,
+          transformer,
+          path.concat('value')
+        ),
+      },
+      path
+    );
+  }
+  assertNever(prop);
+}
+
+function getValueAtPropPath(value: unknown, path: PropPath) {
+  path = [...path];
+  while (path.length) {
+    const key = path.shift()!;
+    value = (value as any)[key];
+  }
+  return value;
+}
+
+function isEmptyChildFieldNode(
+  element: Element & ({ type: 'component-block-prop' } | { type: 'component-inline-prop' })
+) {
+  const firstChild = element.children[0];
+  return (
+    element.children.length === 1 &&
+    ((element.type === 'component-inline-prop' &&
+      firstChild.type === undefined &&
+      firstChild.text === '') ||
+      (element.type === 'component-block-prop' &&
+        firstChild.type === 'paragraph' &&
+        firstChild.children.length === 1 &&
+        firstChild.children[0].type === undefined &&
+        firstChild.children[0].text === ''))
+  );
+}
+
 export function withComponentBlocks(
   blockComponents: Record<string, ComponentBlock | undefined>,
   editorDocumentFeatures: DocumentFeatures,
@@ -152,8 +284,6 @@ export function withComponentBlocks(
               to: Path.next(ancestorComponentBlock.componentBlock[1]),
             });
           } else {
-            // TODO: this goes to the start of the next block, is that right?
-            // should we just insertBreak always here?
             Transforms.move(editor, { distance: 1, unit: 'line' });
             Transforms.removeNodes(editor, { at: paragraphPath });
           }
@@ -162,8 +292,49 @@ export function withComponentBlocks(
       }
       if (componentPropNode.type === 'component-inline-prop') {
         Editor.withoutNormalizing(editor, () => {
+          const componentBlock = blockComponents[componentBlockNode.component];
+          if (componentPropNode.propPath !== undefined && componentBlock !== undefined) {
+            const rootProp = { kind: 'object' as const, value: componentBlock.props };
+            const ancestorFields = getAncestorFields(
+              rootProp,
+              componentPropNode.propPath,
+              componentBlockNode.props
+            );
+            const idx = [...ancestorFields].reverse().findIndex(item => item.kind === 'array');
+            if (idx !== -1) {
+              const arrayFieldIdx = ancestorFields.length - 1 - idx;
+              const arrayField = ancestorFields[arrayFieldIdx];
+              const val = getValueAtPropPath(
+                componentBlockNode.props,
+                componentPropNode.propPath.slice(0, arrayFieldIdx)
+              ) as unknown[];
+              if (doesPropOnlyEverContainASingleChildField(arrayField)) {
+                if (
+                  Node.string(componentPropNode) === '' &&
+                  val.length - 1 === componentPropNode.propPath[arrayFieldIdx]
+                ) {
+                  Transforms.removeNodes(editor, { at: componentPropPath });
+                  if (isLastProp) {
+                    Transforms.insertNodes(
+                      editor,
+                      { type: 'paragraph', children: [{ text: '' }] },
+                      { at: Path.next(componentBlockPath) }
+                    );
+                    Transforms.select(editor, Path.next(componentBlockPath));
+                  } else {
+                    Transforms.move(editor, { distance: 1, unit: 'line' });
+                  }
+                } else {
+                  insertBreak();
+                }
+                return;
+              }
+            }
+          }
+
           Transforms.splitNodes(editor, { always: true });
           const splitNodePath = Path.next(componentPropPath);
+
           if (isLastProp) {
             Transforms.moveNodes(editor, {
               at: splitNodePath,
@@ -199,6 +370,83 @@ export function withComponentBlocks(
       if (Element.isElement(node) && node.type === 'component-block') {
         const componentBlock = blockComponents[node.component];
         if (componentBlock) {
+          const rootProp = { kind: 'object' as const, value: componentBlock.props };
+          for (const [propPath, arrayField] of findArrayFieldsWithSingleChildField(
+            rootProp,
+            node.props
+          )) {
+            if (
+              node.children.length === 1 &&
+              node.children[0].type === 'component-inline-prop' &&
+              node.children[0].propPath === undefined
+            ) {
+              break;
+            }
+            const nodesWithin: [
+              number,
+              Element & { type: 'component-block-prop' | 'component-inline-prop' }
+            ][] = [];
+            for (const [idx, childNode] of node.children.entries()) {
+              if (
+                (childNode.type === 'component-block-prop' ||
+                  childNode.type === 'component-inline-prop') &&
+                childNode.propPath !== undefined &&
+                isPropPathWithin(propPath, childNode.propPath!)
+              ) {
+                nodesWithin.push([idx, childNode]);
+              }
+            }
+            const arrVal = getValueAtPropPath(node.props, propPath) as unknown[];
+            // delete backwards
+            const alreadyUsedIndicies = new Set<number>();
+            // all of the fields are unique so we've removed/re-ordered/done nothing
+            const newVal: unknown[] = [];
+            for (const [, node] of nodesWithin) {
+              const idxFromValue = node.propPath![propPath.length] as number;
+              if (alreadyUsedIndicies.has(idxFromValue) && isEmptyChildFieldNode(node)) {
+                newVal.push(getInitialPropsValue(arrayField.element, relationships));
+              } else {
+                alreadyUsedIndicies.add(idxFromValue);
+                newVal.push(arrVal[idxFromValue]);
+              }
+            }
+            if (!areArraysEqual(arrVal, newVal)) {
+              Editor.withoutNormalizing(editor, () => {
+                const transformedProps = transformProps(
+                  rootProp,
+                  node.props,
+                  (prop, value, path) => {
+                    if (prop.kind === 'array' && areArraysEqual(path, propPath)) {
+                      return newVal;
+                    }
+                    return value;
+                  }
+                );
+                Transforms.setNodes(
+                  editor,
+                  { props: transformedProps as Record<string, unknown> },
+                  { at: path }
+                );
+                for (const [idx, [idxInChildrenOfBlock, nodeWithin]] of nodesWithin.entries()) {
+                  const newPropPath = [...nodeWithin.propPath!];
+                  newPropPath[propPath.length] = idx;
+                  Transforms.setNodes(
+                    editor,
+                    { propPath: newPropPath },
+                    { at: [...path, idxInChildrenOfBlock] }
+                  );
+                }
+              });
+              return;
+            }
+            // for (const [
+            //   idxAsChildOfArrayField,
+            //   [idxAsChildOfBlock, node],
+            // ] of nodesWithin.entries()) {
+            //   const propPathWithin = node.propPath!.slice(0, propPath.length);
+            // }
+            // console.log(nodesWithin);
+          }
           let missingKeys = new Map(
             findChildPropPaths(node.props, componentBlock.props).map(x => [
               JSON.stringify(x.path) as string | undefined,
diff --git a/packages/fields-document/src/DocumentEditor/slate-types.ts b/packages/fields-document/src/DocumentEditor/slate-types.ts
index a403eee104c..2166ebfa41a 100644
--- a/packages/fields-document/src/DocumentEditor/slate-types.ts
+++ b/packages/fields-document/src/DocumentEditor/slate-types.ts
@@ -11,6 +11,7 @@ import { BaseEditor, BaseElement, BaseRange } from 'slate';
 import { HistoryEditor } from 'slate-history';
 import { ReactEditor } from 'slate-react';
 import { RelationshipData } from './component-blocks/api';
+import { PropPath } from './component-blocks/utils';
 import { Mark } from './utils';
 
 type Link = {
@@ -60,7 +61,7 @@ type ComponentBlock = {
 
 type ComponentProp = {
   type: 'component-inline-prop' | 'component-block-prop';
-  propPath?: (string | number)[] | undefined;
+  propPath?: PropPath | undefined;
 };
 
 type Element = (
diff --git a/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts b/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
index e54fdc530d1..9fba5990115 100644
--- a/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
+++ b/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
@@ -1,4 +1,5 @@
 import { Node } from 'slate';
+import { PropPath } from '../../component-blocks/utils';
 import { Mark } from '../../utils';
 
 export const __jsx: any;
@@ -7,7 +8,7 @@ type Children = Node | string | (Node | string)[];
 
 type OnlyChildren = { children: Children };
 
-type ComponentProp = { children: Children; propPath?: (string | number)[] };
+type ComponentProp = { children: Children; propPath?: PropPath };
 declare namespace __jsx {
   namespace JSX {
     interface IntrinsicElements {
diff --git a/packages/fields-document/src/DocumentEditor/utils.ts b/packages/fields-document/src/DocumentEditor/utils.ts
index 55fb89edb23..bd6149aa61a 100644
--- a/packages/fields-document/src/DocumentEditor/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/utils.ts
@@ -210,6 +210,7 @@ export function nodeTypeMatcher<Type extends Element['type'][]>(
 
 export function assert(condition: boolean): asserts condition {
   if (!condition) {
+    debugger;
     throw new Error('failed assert');
   }
 }
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index ca02144e0d9..7184f0d3b4e 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -15,9 +15,9 @@ import { useCallback, useEffect, useRef } from 'react';
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
-import { assertNever } from '../DocumentEditor/component-blocks/utils';
+import { assertNever, ReadonlyPropPath } from '../DocumentEditor/component-blocks/utils';
 
-const basePath: readonly (string | number)[] = [];
+const basePath: ReadonlyPropPath = [];
 
 export const Field = ({
   field,
diff --git a/packages/fields-document/src/structure-validation.ts b/packages/fields-document/src/structure-validation.ts
index 1833a183eef..7cb2b47f616 100644
--- a/packages/fields-document/src/structure-validation.ts
+++ b/packages/fields-document/src/structure-validation.ts
@@ -3,6 +3,7 @@ import excess from 'io-ts-excess';
 import { RelationshipData } from './DocumentEditor/component-blocks/api';
 import { Mark } from './DocumentEditor/utils';
 import { isValidURL } from './DocumentEditor/isValidURL';
+import { PropPath } from './DocumentEditor/component-blocks/utils';
 // note that this validation isn't about ensuring that a document has nodes in the right positions and things
 // it's just about validating that it's a valid slate structure
 // we'll then run normalize on it which will enforce more things
@@ -194,7 +195,7 @@ const componentBlock: t.Type<ComponentBlock> = t.recursion('ComponentBlock', ()
 
 type ComponentProp = {
   type: 'component-inline-prop' | 'component-block-prop';
-  propPath: (string | number)[] | undefined;
+  propPath: PropPath | undefined;
   children: Children;
 };
 
diff --git a/packages/fields-document/src/validation.ts b/packages/fields-document/src/validation.ts
index 10edff6f5b8..855ecd62928 100644
--- a/packages/fields-document/src/validation.ts
+++ b/packages/fields-document/src/validation.ts
@@ -1,7 +1,7 @@
 import { Text, Editor } from 'slate';
 import { createDocumentEditor } from './DocumentEditor';
 import { ComponentBlock, ComponentPropField } from './DocumentEditor/component-blocks/api';
-import { assertNever } from './DocumentEditor/component-blocks/utils';
+import { assertNever, PropPath } from './DocumentEditor/component-blocks/utils';
 import { Relationships } from './DocumentEditor/relationship';
 import {
   ElementFromValidation,
@@ -12,8 +12,8 @@ import {
 import { DocumentFeatures } from './views';
 
 export class PropValidationError extends Error {
-  path: (string | number)[];
-  constructor(message: string, path: (string | number)[]) {
+  path: PropPath;
+  constructor(message: string, path: PropPath) {
     super(message);
     this.path = path;
   }
@@ -23,7 +23,7 @@ function validateComponentBlockProps(
   prop: ComponentPropField,
   value: unknown,
   relationships: Relationships,
-  path: (string | number)[]
+  path: PropPath
 ): any {
   if (prop.kind === 'form') {
     if (prop.validate(value)) {

From adefb987afcd8a5ff7c99146d4178186013b862c Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 22 Feb 2022 15:35:49 +1000
Subject: [PATCH 013/124] Fix more child field in array field stuff

---
 .../component-blocks/array-field.test.tsx     | 385 ++++++++++++++++++
 .../DocumentEditor/component-blocks/index.tsx |  33 +-
 .../insertion-and-preview-props.test.tsx      |   4 +-
 .../component-blocks/preview-props.ts         | 100 ++++-
 .../component-blocks/utils.test.ts            |  10 +-
 .../DocumentEditor/component-blocks/utils.ts  | 112 +++--
 .../with-component-blocks.tsx                 | 150 +++----
 .../document-features-normalization.ts        |   2 +-
 .../src/DocumentEditor/slate-types.ts         |   4 +-
 .../src/DocumentEditor/toolbar-state.tsx      |  10 +-
 10 files changed, 653 insertions(+), 157 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
new file mode 100644
index 00000000000..3d5483642cd
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -0,0 +1,385 @@
+/** @jest-environment jsdom */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import React from 'react';
+import { jsx, makeEditor } from '../tests/utils';
+import { component, fields } from '../../component-blocks';
+import { createPreviewProps } from './preview-props';
+import { ExtractPropFromComponentPropFieldForPreview } from './api';
+
+const table = component({
+  component: props =>
+    React.createElement(
+      'div',
+      null,
+      props.children.elements.map(x => {
+        return x.elements.map(x => {
+          return x.content;
+        });
+      })
+    ),
+  label: '',
+  props: {
+    children: fields.array(
+      fields.array(
+        fields.object({
+          content: fields.child({ kind: 'inline', placeholder: '' }),
+          something: fields.text({ label: '' }),
+        })
+      )
+    ),
+  },
+});
+
+test('child field in nested array', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="table"
+        props={{
+          children: [[{ content: null, something: '1' }]],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        table,
+      },
+    }
+  );
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="table"
+        props={
+          Object {
+            "children": Array [
+              Array [
+                Object {
+                  "content": null,
+                  "something": "1",
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('multiple in child field in nested array', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="table"
+        props={{
+          children: [
+            [
+              { content: null, something: '1' },
+              { content: null, something: '2' },
+            ],
+            [
+              { content: null, something: '3' },
+              { content: null, something: '4' },
+            ],
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 0, 1, 'content']}>
+          <text>second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 0, 'content']}>
+          <text>third</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 1, 'content']}>
+          <text>fourth</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        table,
+      },
+    }
+  );
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="table"
+        props={
+          Object {
+            "children": Array [
+              Array [
+                Object {
+                  "content": null,
+                  "something": "1",
+                },
+                Object {
+                  "content": null,
+                  "something": "2",
+                },
+              ],
+              Array [
+                Object {
+                  "content": null,
+                  "something": "3",
+                },
+                Object {
+                  "content": null,
+                  "something": "4",
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            second
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            third
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            fourth
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('add to multiple in child field in nested array', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="table"
+        props={{
+          children: [
+            [
+              { content: null, something: '1' },
+              { content: null, something: '2' },
+            ],
+            [
+              { content: null, something: '3' },
+              { content: null, something: '4' },
+            ],
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 0, 1, 'content']}>
+          <text>second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 0, 'content']}>
+          <text>third</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 1, 'content']}>
+          <text>fourth</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        table,
+      },
+    }
+  );
+  const previewProps: ExtractPropFromComponentPropFieldForPreview<{
+    kind: 'object';
+    value: typeof table['props'];
+  }> = createPreviewProps(
+    editor.children[0] as any,
+    table,
+    {},
+    {},
+    () => {},
+    editor,
+    editor.children[0] as any
+  ) as any;
+  previewProps.children.elements[0].insert();
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="table"
+        props={
+          Object {
+            "children": Array [
+              Array [
+                Object {
+                  "content": null,
+                  "something": "1",
+                },
+                Object {
+                  "content": null,
+                  "something": "2",
+                },
+              ],
+              Array [
+                Object {
+                  "content": null,
+                  "something": "3",
+                },
+                Object {
+                  "content": null,
+                  "something": "4",
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            second
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            third
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            fourth
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index f7af0bc3779..fb7deb4ee45 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -10,7 +10,13 @@ import {
   useMemo,
   useCallback,
 } from 'react';
-import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
+import {
+  ReactEditor,
+  RenderElementProps,
+  useFocused,
+  useSelected,
+  useSlateStatic,
+} from 'slate-react';
 import { Editor, Element, Transforms } from 'slate';
 
 import { jsx, useTheme } from '@keystone-ui/core';
@@ -27,7 +33,7 @@ import {
   useElementWithSetNodes,
   useStaticEditor,
 } from '../utils';
-import { clientSideValidateProp, getChildFieldAtPropPath } from './utils';
+import { clientSideValidateProp, getFieldAtPropPath, ReadonlyPropPath } from './utils';
 import { createPreviewProps } from './preview-props';
 import { getInitialValue } from './initial-values';
 import { FormValue } from './form';
@@ -37,11 +43,15 @@ export { withComponentBlocks } from './with-component-blocks';
 export const ComponentBlockContext = createContext<Record<string, ComponentBlock>>({});
 
 export function getPlaceholderTextForPropPath(
-  propPath: (number | string)[],
+  propPath: ReadonlyPropPath,
   fields: Record<string, ComponentPropField>,
   formProps: Record<string, any>
 ): string {
-  return getChildFieldAtPropPath(propPath, formProps, fields)?.options?.placeholder ?? '';
+  const field = getFieldAtPropPath(propPath, formProps, fields);
+  if (field?.kind === 'child') {
+    return field.options.placeholder;
+  }
+  return '';
 }
 
 export function ComponentInlineProp(props: RenderElementProps) {
@@ -195,6 +205,7 @@ Content:`}
             componentBlock={componentBlock}
             element={currentElement}
             onElementChange={setElement}
+            elementToGetPath={__elementToGetPath}
           />
         )}
         {!editMode &&
@@ -204,7 +215,9 @@ Content:`}
               componentBlock,
               {},
               documentFieldRelationships,
-              setElement
+              setElement,
+              editor,
+              __elementToGetPath
             );
             const ChromefulToolbar = componentBlock.toolbar
               ? componentBlock.toolbar
@@ -325,6 +338,7 @@ function ComponentBlockRender({
   componentBlock,
   element,
   onElementChange,
+  elementToGetPath,
   children,
 }: {
   element: Element & { type: 'component-block' };
@@ -334,8 +348,11 @@ function ComponentBlockRender({
     ) => Partial<Element & { type: 'component-block' }>
   ) => void;
   componentBlock: ComponentBlock;
+  elementToGetPath: Element & { type: 'component-block' };
   children: any;
 }) {
+  const editor = useSlateStatic();
+  const relationships = useDocumentFieldRelationships();
   const childrenByPath: Record<string, ReactElement> = {};
   let maybeChild: ReactElement | undefined;
   children.forEach((child: ReactElement) => {
@@ -351,8 +368,10 @@ function ComponentBlockRender({
     element,
     componentBlock,
     childrenByPath,
-    useDocumentFieldRelationships(),
-    props => onElementChange(() => props)
+    relationships,
+    partialElement => onElementChange(() => partialElement),
+    editor,
+    elementToGetPath
   );
 
   return (
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index 61a25b733e5..38e357a34c0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -206,7 +206,9 @@ const getPreviewProps = (
     relationships,
     data => {
       Transforms.setNodes(editor, data, { at: [0] });
-    }
+    },
+    editor,
+    editor.children[0] as Element & { type: 'component-block' }
   ) as any;
 
 const makeEditorWithComplexComponentBlock = () =>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index a2da33db905..1f036780ba5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -1,8 +1,19 @@
-import { Element } from 'slate';
+import { Editor, Element, Transforms } from 'slate';
 import { ReactElement } from 'react';
+import { ReactEditor } from 'slate-react';
 import { ComponentBlock } from '../../component-blocks';
 import { Relationships } from '../relationship';
-import { assertNever, getPropsForConditionalChange, PropPath } from './utils';
+import { areArraysEqual } from '../document-features-normalization';
+import { assert } from '../utils';
+import {
+  assertNever,
+  findChildPropPathsForProp,
+  getFieldAtPropPath,
+  getPropsForConditionalChange,
+  PropPath,
+  ReadonlyPropPath,
+  transformProps,
+} from './utils';
 import { ComponentPropField } from './api';
 import { getInitialPropsValue } from './initial-values';
 
@@ -12,7 +23,8 @@ function _getPreviewProps(
   childrenByPath: Record<string, ReactElement>,
   path: PropPath,
   relationships: Relationships,
-  onFormPropsChange: (formProps: Record<string, any>) => void
+  onFormPropsChange: (formProps: Record<string, any>) => void,
+  onAddArrayItem: (path: ReadonlyPropPath) => void
 ): any {
   switch (prop.kind) {
     case 'form':
@@ -36,7 +48,8 @@ function _getPreviewProps(
           relationships,
           newVal => {
             onFormPropsChange({ ...(value as any), [key]: newVal });
-          }
+          },
+          onAddArrayItem
         );
       });
       return previewProps;
@@ -75,7 +88,8 @@ function _getPreviewProps(
               discriminant: conditionalValue.discriminant,
               value: val,
             });
-          }
+          },
+          onAddArrayItem
         ),
       };
     }
@@ -93,11 +107,12 @@ function _getPreviewProps(
               const newValue = [...(value as unknown[])];
               newValue[i] = val;
               onFormPropsChange(newValue);
-            }
+            },
+            onAddArrayItem
           )
         ),
         insert() {
-          onFormPropsChange([...arrayValue, getInitialPropsValue(prop.element, relationships)]);
+          onAddArrayItem(path);
         },
       };
     }
@@ -112,7 +127,9 @@ export function createPreviewProps(
   componentBlock: ComponentBlock,
   childrenByPath: Record<string, ReactElement>,
   relationships: Relationships,
-  setNode: (props: Partial<Element & { type: 'component-block' }>) => void
+  setNode: (props: Partial<Element & { type: 'component-block' }>) => void,
+  editor: Editor,
+  elementToGetPropPath: Element & { type: 'component-block' }
 ) {
   return _getPreviewProps(
     { kind: 'object', value: componentBlock.props },
@@ -122,6 +139,71 @@ export function createPreviewProps(
     relationships,
     props => {
       setNode({ props });
-    }
+    },
+    propPath =>
+      onAddArrayItem(editor, propPath, element, elementToGetPropPath, componentBlock, relationships)
   );
 }
+
+function onAddArrayItem(
+  editor: Editor,
+  path: ReadonlyPropPath,
+  element: Element & { type: 'component-block' },
+  elementToGetPath: Element & { type: 'component-block' },
+  componentBlock: ComponentBlock,
+  relationships: Relationships
+) {
+  Editor.withoutNormalizing(editor, () => {
+    const arrayField = getFieldAtPropPath(path, element.props, componentBlock.props);
+    assert(arrayField?.kind === 'array');
+    const elementVal = getInitialPropsValue(arrayField.element, relationships);
+    let nextIdx = 0;
+    const newProps = transformProps(
+      { kind: 'object', value: componentBlock.props },
+      element.props,
+      (prop, value, currentPath) => {
+        if (prop.kind === 'array' && areArraysEqual(path, currentPath)) {
+          nextIdx = (value as any[]).length;
+          return [...(value as any[]), elementVal];
+        }
+        return value;
+      }
+    );
+    const componentBlockPath = ReactEditor.findPath(editor, elementToGetPath);
+
+    Transforms.setNodes(
+      editor,
+      { props: newProps as Record<string, unknown> },
+      { at: componentBlockPath }
+    );
+
+    const propPathsToInsert = findChildPropPathsForProp(
+      elementVal,
+      arrayField.element,
+      path.concat(nextIdx)
+    );
+    if (propPathsToInsert.length) {
+      const hasEmptyThing =
+        element.children.length === 1 &&
+        element.children[0].type === 'component-inline-prop' &&
+        element.children[0].propPath === undefined;
+      if (hasEmptyThing) {
+        Transforms.removeNodes(editor, { at: [...componentBlockPath, 0] });
+      }
+      console.log(propPathsToInsert);
+      for (const [idx, childFieldInfo] of propPathsToInsert.entries()) {
+        Transforms.insertNodes(
+          editor,
+          {
+            type: `component-${childFieldInfo.options.kind}-prop`,
+            propPath: childFieldInfo.path,
+            children: [{ text: '' }],
+          },
+          { at: [...componentBlockPath, (hasEmptyThing ? 0 : element.children.length) + idx] }
+        );
+      }
+    }
+    console.log('before normalization', editor.children);
+  });
+  console.log('after normalization', editor.children);
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
index ac386df8632..8bc8573acf0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
@@ -1,5 +1,5 @@
 import { fields } from './api';
-import { getAncestorFields, getChildFieldAtPropPath } from './utils';
+import { getAncestorFields, getFieldAtPropPath } from './utils';
 
 const blockChild = fields.child({ kind: 'block', placeholder: '' });
 const blockChild2 = fields.child({ kind: 'block', placeholder: '' });
@@ -32,10 +32,10 @@ const trueVal = {
 };
 
 test('getChildFieldAtPath', () => {
-  expect(getChildFieldAtPropPath(['something', 'blockChild'], falseVal, props)).toBe(blockChild);
-  expect(getChildFieldAtPropPath(['another', 'value'], falseVal, props)).toBe(blockChild2);
-  expect(getChildFieldAtPropPath(['another', 'value'], trueVal, props)).toBe(inlineChild);
-  expect(getChildFieldAtPropPath(['inlineChild2'], falseVal, props)).toBe(inlineChild2);
+  expect(getFieldAtPropPath(['something', 'blockChild'], falseVal, props)).toBe(blockChild);
+  expect(getFieldAtPropPath(['another', 'value'], falseVal, props)).toBe(blockChild2);
+  expect(getFieldAtPropPath(['another', 'value'], trueVal, props)).toBe(inlineChild);
+  expect(getFieldAtPropPath(['inlineChild2'], falseVal, props)).toBe(inlineChild2);
 });
 
 test('getAncestorFields', () => {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 9fef97459ac..83b7e83279d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -6,12 +6,12 @@ import { Mark } from '../utils';
 import { ChildField } from './api';
 import { getInitialPropsValue } from './initial-values';
 
-type PathToChildFieldWithOption = { path: PropPath; options: ChildField['options'] };
+type PathToChildFieldWithOption = { path: ReadonlyPropPath; options: ChildField['options'] };
 
-function _findChildPropPaths(
+export function findChildPropPathsForProp(
   value: any,
   prop: ComponentPropField,
-  path: PropPath
+  path: ReadonlyPropPath
 ): PathToChildFieldWithOption[] {
   switch (prop.kind) {
     case 'form':
@@ -20,7 +20,7 @@ function _findChildPropPaths(
     case 'child':
       return [{ path: path, options: prop.options }];
     case 'conditional':
-      return _findChildPropPaths(
+      return findChildPropPathsForProp(
         value.value,
         prop.values[value.discriminant],
         path.concat('value')
@@ -28,14 +28,14 @@ function _findChildPropPaths(
     case 'object': {
       let paths: PathToChildFieldWithOption[] = [];
       Object.keys(prop.value).forEach(key => {
-        paths.push(..._findChildPropPaths(value[key], prop.value[key], path.concat(key)));
+        paths.push(...findChildPropPathsForProp(value[key], prop.value[key], path.concat(key)));
       });
       return paths;
     }
     case 'array': {
       let paths: PathToChildFieldWithOption[] = [];
       (value as any[]).forEach((val, i) => {
-        paths.push(..._findChildPropPaths(val, prop.element, path.concat(i)));
+        paths.push(...findChildPropPathsForProp(val, prop.element, path.concat(i)));
       });
       return paths;
     }
@@ -45,8 +45,8 @@ function _findChildPropPaths(
 export function findChildPropPaths(
   value: Record<string, any>,
   props: Record<string, ComponentPropField>
-): { path: PropPath | undefined; options: ChildField['options'] }[] {
-  let propPaths = _findChildPropPaths(value, { kind: 'object', value: props }, []);
+): { path: ReadonlyPropPath | undefined; options: ChildField['options'] }[] {
+  let propPaths = findChildPropPathsForProp(value, { kind: 'object', value: props }, []);
   if (!propPaths.length) {
     return [
       {
@@ -166,42 +166,47 @@ export function getDocumentFeaturesForChildField(
   };
 }
 
-function getChildFieldAtPropPathInner(
+function getFieldAtPropPathInner(
   path: PropPath,
   value: unknown,
   prop: ComponentPropField
-): undefined | ChildField {
-  if (prop.kind === 'child') {
+): undefined | ComponentPropField {
+  if (path.length === 0) {
     return prop;
   }
   // because we're checking the length here
   // the non-null asserts on shift are fine
-  if (path.length === 0 || prop.kind === 'form' || prop.kind === 'relationship') {
+  if (prop.kind === 'child' || prop.kind === 'form' || prop.kind === 'relationship') {
     return;
   }
   if (prop.kind === 'conditional') {
-    path.shift();
-    const propVal = prop.values[(value as any).discriminant];
-    return getChildFieldAtPropPathInner(path, (value as any).value, propVal);
+    const key = path.shift();
+    if (key === 'discriminant') {
+      return getFieldAtPropPathInner(path, (value as any).discriminant, prop.discriminant);
+    }
+    if (key === 'value') {
+      const propVal = prop.values[(value as any).discriminant];
+      return getFieldAtPropPathInner(path, (value as any).value, propVal);
+    }
+    return;
   }
   if (prop.kind === 'object') {
     const key = path.shift()!;
-    return getChildFieldAtPropPathInner(path, (value as any)[key], prop.value[key]);
+    return getFieldAtPropPathInner(path, (value as any)[key], prop.value[key]);
   }
   if (prop.kind === 'array') {
     const index = path.shift()!;
-    return getChildFieldAtPropPathInner(path, (value as any)[index], prop.element);
+    return getFieldAtPropPathInner(path, (value as any)[index], prop.element);
   }
-
-  return prop;
+  assertNever(prop);
 }
 
-export function getChildFieldAtPropPath(
+export function getFieldAtPropPath(
   path: ReadonlyPropPath,
   value: Record<string, unknown>,
   props: Record<string, ComponentPropField>
-): undefined | ChildField {
-  return getChildFieldAtPropPathInner([...path], value, {
+): undefined | ComponentPropField {
+  return getFieldAtPropPathInner([...path], value, {
     kind: 'object',
     value: props,
   });
@@ -241,7 +246,11 @@ export function clientSideValidateProp(prop: ComponentPropField, value: any): bo
   }
 }
 
-export function getAncestorFields(rootProp: ComponentPropField, path: PropPath, value: unknown) {
+export function getAncestorFields(
+  rootProp: ComponentPropField,
+  path: ReadonlyPropPath,
+  value: unknown
+) {
   const ancestors: ComponentPropField[] = [];
   const currentPath = [...path];
   let currentProp = rootProp;
@@ -274,3 +283,60 @@ export function getAncestorFields(rootProp: ComponentPropField, path: PropPath,
 
 export type PropPath = (string | number)[];
 export type ReadonlyPropPath = readonly (string | number)[];
+
+export function getValueAtPropPath(value: unknown, inputPath: ReadonlyPropPath) {
+  const path = [...inputPath];
+  while (path.length) {
+    const key = path.shift()!;
+    value = (value as any)[key];
+  }
+  return value;
+}
+
+export function transformProps(
+  prop: ComponentPropField,
+  value: unknown,
+  transformer: (prop: ComponentPropField, value: unknown, path: PropPath) => unknown,
+  path: PropPath = []
+): unknown {
+  if (prop.kind === 'form' || prop.kind === 'relationship' || prop.kind === 'child') {
+    return transformer(prop, value, path);
+  }
+  if (prop.kind === 'object') {
+    return transformer(
+      prop,
+      Object.fromEntries(
+        Object.entries(value as Record<string, unknown>).map(([key, val]) => {
+          return [key, transformProps(prop.value[key], val, transformer, path.concat(key))];
+        })
+      ),
+      path
+    );
+  }
+  if (prop.kind === 'array') {
+    return transformer(
+      prop,
+      (value as unknown[]).map((val, i) =>
+        transformProps(prop.element, val, transformer, path.concat(i))
+      ),
+      path
+    );
+  }
+  if (prop.kind === 'conditional') {
+    const discriminant = (value as any).discriminant;
+    return transformer(
+      prop,
+      {
+        discriminant: transformer(prop, discriminant, path.concat('discriminant')),
+        value: transformProps(
+          prop.values[discriminant.toString() as string],
+          (value as any).value,
+          transformer,
+          path.concat('value')
+        ),
+      },
+      path
+    );
+  }
+  assertNever(prop);
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index c5ba990ef24..1a913130d7f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -17,7 +17,9 @@ import {
   findChildPropPaths,
   getAncestorFields,
   getDocumentFeaturesForChildField,
+  getValueAtPropPath,
   PropPath,
+  transformProps,
 } from './utils';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField } from './api';
@@ -117,6 +119,9 @@ function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField):
       }
       hasFoundChildField = true;
     } else if (prop.kind === 'array') {
+      if (doesPropOnlyEverContainASingleChildField(prop.element)) {
+        return false;
+      }
       queue.add(prop.element);
     } else if (prop.kind === 'object') {
       for (const innerProp of Object.values(prop.value)) {
@@ -133,18 +138,6 @@ function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField):
   return hasFoundChildField;
 }
 
-function isPropPathWithin(outer: PropPath, inner: PropPath) {
-  if (outer.length >= inner.length) {
-    return false;
-  }
-  for (const [idx, element] of outer.entries()) {
-    if (element !== inner[idx]) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function findArrayFieldsWithSingleChildField(prop: ComponentPropField, value: unknown) {
   const propPaths: [PropPath, ArrayField<ComponentPropField>][] = [];
   transformProps(prop, value, (prop, value, path) => {
@@ -158,63 +151,6 @@ function findArrayFieldsWithSingleChildField(prop: ComponentPropField, value: un
   return propPaths;
 }
 
-function transformProps(
-  prop: ComponentPropField,
-  value: unknown,
-  transformer: (prop: ComponentPropField, value: unknown, path: PropPath) => unknown,
-  path: PropPath = []
-): unknown {
-  if (prop.kind === 'form' || prop.kind === 'relationship' || prop.kind === 'child') {
-    return transformer(prop, value, path);
-  }
-  if (prop.kind === 'object') {
-    return transformer(
-      prop,
-      Object.fromEntries(
-        Object.entries(value as Record<string, unknown>).map(([key, val]) => {
-          return [key, transformProps(prop.value[key], val, transformer, path.concat(key))];
-        })
-      ),
-      path
-    );
-  }
-  if (prop.kind === 'array') {
-    return transformer(
-      prop,
-      (value as unknown[]).map((val, i) =>
-        transformProps(prop.element, val, transformer, path.concat(i))
-      ),
-      path
-    );
-  }
-  if (prop.kind === 'conditional') {
-    const discriminant = (value as any).discriminant;
-    return transformer(
-      prop,
-      {
-        discriminant: transformer(prop, discriminant, path.concat('discriminant')),
-        value: transformProps(
-          prop.values[discriminant.toString() as string],
-          (value as any).value,
-          transformer,
-          path.concat('value')
-        ),
-      },
-      path
-    );
-  }
-  assertNever(prop);
-}
-
-function getValueAtPropPath(value: unknown, path: PropPath) {
-  path = [...path];
-  while (path.length) {
-    const key = path.shift()!;
-    value = (value as any)[key];
-  }
-  return value;
-}
-
 function isEmptyChildFieldNode(
   element: Element & ({ type: 'component-block-prop' } | { type: 'component-inline-prop' })
 ) {
@@ -390,10 +326,15 @@ export function withComponentBlocks(
               if (
                 (childNode.type === 'component-block-prop' ||
                   childNode.type === 'component-inline-prop') &&
-                childNode.propPath !== undefined &&
-                isPropPathWithin(propPath, childNode.propPath!)
+                childNode.propPath !== undefined
               ) {
-                nodesWithin.push([idx, childNode]);
+                const indexForLastArrayIndex = findLastIndex(
+                  childNode.propPath,
+                  x => typeof x === 'number'
+                );
+                if (areArraysEqual(propPath, childNode.propPath.slice(0, indexForLastArrayIndex))) {
+                  nodesWithin.push([idx, childNode]);
+                }
               }
             }
             const arrVal = getValueAtPropPath(node.props, propPath) as unknown[];
@@ -402,50 +343,42 @@ export function withComponentBlocks(
             // all of the fields are unique so we've removed/re-ordered/done nothing
             const newVal: unknown[] = [];
             for (const [, node] of nodesWithin) {
-              const idxFromValue = node.propPath![propPath.length] as number;
-              if (alreadyUsedIndicies.has(idxFromValue) && isEmptyChildFieldNode(node)) {
+              const idxFromValue = node.propPath![propPath.length];
+              assert(typeof idxFromValue === 'number');
+              if (
+                arrVal.length <= idxFromValue ||
+                (alreadyUsedIndicies.has(idxFromValue) && isEmptyChildFieldNode(node))
+              ) {
                 newVal.push(getInitialPropsValue(arrayField.element, relationships));
               } else {
                 alreadyUsedIndicies.add(idxFromValue);
                 newVal.push(arrVal[idxFromValue]);
               }
             }
+            // console.log({ arrVal, newVal });
             if (!areArraysEqual(arrVal, newVal)) {
-              Editor.withoutNormalizing(editor, () => {
-                const transformedProps = transformProps(
-                  rootProp,
-                  node.props,
-                  (prop, value, path) => {
-                    if (prop.kind === 'array' && areArraysEqual(path, propPath)) {
-                      return newVal;
-                    }
-                    return value;
-                  }
-                );
+              const transformedProps = transformProps(rootProp, node.props, (prop, value, path) => {
+                if (prop.kind === 'array' && areArraysEqual(path, propPath)) {
+                  return newVal;
+                }
+                return value;
+              });
+              Transforms.setNodes(
+                editor,
+                { props: transformedProps as Record<string, unknown> },
+                { at: path }
+              );
+              for (const [idx, [idxInChildrenOfBlock, nodeWithin]] of nodesWithin.entries()) {
+                const newPropPath = [...nodeWithin.propPath!];
+                newPropPath[propPath.length] = idx;
                 Transforms.setNodes(
                   editor,
-                  { props: transformedProps as Record<string, unknown> },
-                  { at: path }
+                  { propPath: newPropPath },
+                  { at: [...path, idxInChildrenOfBlock] }
                 );
-                for (const [idx, [idxInChildrenOfBlock, nodeWithin]] of nodesWithin.entries()) {
-                  const newPropPath = [...nodeWithin.propPath!];
-                  newPropPath[propPath.length] = idx;
-                  Transforms.setNodes(
-                    editor,
-                    { propPath: newPropPath },
-                    { at: [...path, idxInChildrenOfBlock] }
-                  );
-                }
-              });
+              }
               return;
             }
-            // for (const [
-            //   idxAsChildOfArrayField,
-            //   [idxAsChildOfBlock, node],
-            // ] of nodesWithin.entries()) {
-            //   const propPathWithin = node.propPath!.slice(0, propPath.length);
-            // }
-            // console.log(nodesWithin);
           }
           let missingKeys = new Map(
             findChildPropPaths(node.props, componentBlock.props).map(x => [
@@ -535,3 +468,12 @@ export function withComponentBlocks(
 
   return editor;
 }
+
+function findLastIndex<T>(array: readonly T[], predicate: (item: T) => boolean): number {
+  for (let i = array.length - 1; i >= 0; --i) {
+    if (predicate(array[i])) {
+      return i;
+    }
+  }
+  return -1;
+}
diff --git a/packages/fields-document/src/DocumentEditor/document-features-normalization.ts b/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
index a532b7b9110..091866f42f4 100644
--- a/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
+++ b/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
@@ -2,7 +2,7 @@ import { Text, Transforms, Element, NodeEntry, Editor, Node } from 'slate';
 import { DocumentFeatures } from '../views';
 import { Relationships } from './relationship';
 
-export function areArraysEqual(arrA: unknown[], arrB: unknown[]) {
+export function areArraysEqual(arrA: readonly unknown[], arrB: readonly unknown[]) {
   if (arrA.length !== arrB.length) {
     return false;
   }
diff --git a/packages/fields-document/src/DocumentEditor/slate-types.ts b/packages/fields-document/src/DocumentEditor/slate-types.ts
index 2166ebfa41a..44aa974ef60 100644
--- a/packages/fields-document/src/DocumentEditor/slate-types.ts
+++ b/packages/fields-document/src/DocumentEditor/slate-types.ts
@@ -11,7 +11,7 @@ import { BaseEditor, BaseElement, BaseRange } from 'slate';
 import { HistoryEditor } from 'slate-history';
 import { ReactEditor } from 'slate-react';
 import { RelationshipData } from './component-blocks/api';
-import { PropPath } from './component-blocks/utils';
+import { ReadonlyPropPath } from './component-blocks/utils';
 import { Mark } from './utils';
 
 type Link = {
@@ -61,7 +61,7 @@ type ComponentBlock = {
 
 type ComponentProp = {
   type: 'component-inline-prop' | 'component-block-prop';
-  propPath?: PropPath | undefined;
+  propPath?: ReadonlyPropPath | undefined;
 };
 
 type Element = (
diff --git a/packages/fields-document/src/DocumentEditor/toolbar-state.tsx b/packages/fields-document/src/DocumentEditor/toolbar-state.tsx
index 2b134ad0b53..5d2c41c769f 100644
--- a/packages/fields-document/src/DocumentEditor/toolbar-state.tsx
+++ b/packages/fields-document/src/DocumentEditor/toolbar-state.tsx
@@ -6,7 +6,7 @@ import { ComponentBlockContext } from './component-blocks';
 import { ComponentBlock } from './component-blocks/api';
 import {
   DocumentFeaturesForChildField,
-  getChildFieldAtPropPath,
+  getFieldAtPropPath,
   getDocumentFeaturesForChildField,
 } from './component-blocks/utils';
 import { LayoutOptionsProvider } from './layouts';
@@ -76,13 +76,13 @@ export function getAncestorComponentChildFieldDocumentFeatures(
       const component = ancestorComponent[0].component;
       const componentBlock = componentBlocks[component];
       if (componentBlock && propPath) {
-        const options = getChildFieldAtPropPath(
+        const childField = getFieldAtPropPath(
           propPath,
           ancestorComponent[0].props,
           componentBlock.props
-        )?.options;
-        if (options) {
-          return getDocumentFeaturesForChildField(editorDocumentFeatures, options);
+        );
+        if (childField?.kind === 'child') {
+          return getDocumentFeaturesForChildField(editorDocumentFeatures, childField.options);
         }
       }
     }

From 96e0321d8a9d51bdc38ae2af28dae83d4391ce45 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 28 Feb 2022 13:30:31 +1000
Subject: [PATCH 014/124] Progress

---
 design-system/website/next-env.d.ts           |   5 +-
 design-system/website/tsconfig.json           |  19 +-
 docs/components/docs/DocumentEditorDemo.tsx   |   1 +
 .../basic/admin/fieldViews/Blah.tsx           |  64 +++++-
 .../basic/admin/fieldViews/Content.tsx        | 188 +++++++++++++++--
 examples-staging/basic/admin/pages/report.js  |  10 -
 examples-staging/basic/package.json           |   1 +
 examples-staging/basic/schema.ts              |   8 +-
 .../extend-graphql-schema/custom-schema.ts    |  82 ++++++++
 .../DocumentEditor/component-blocks/api.tsx   | 103 +++++++++-
 .../component-blocks/array-form-value.tsx     | 191 +++++-------------
 .../DocumentEditor/component-blocks/form.tsx  |  99 ++++++++-
 .../DocumentEditor/component-blocks/index.tsx |  14 +-
 .../component-blocks/preview-props.ts         |  61 ++++--
 .../DocumentEditor/primitives/sortable.tsx    | 168 +++++++++++++++
 .../src/component-views/index.tsx             |  20 +-
 16 files changed, 817 insertions(+), 217 deletions(-)
 delete mode 100644 examples-staging/basic/admin/pages/report.js
 create mode 100644 packages/fields-document/src/DocumentEditor/primitives/sortable.tsx

diff --git a/design-system/website/next-env.d.ts b/design-system/website/next-env.d.ts
index 7b7aa2c7727..4f11a03dc6c 100644
--- a/design-system/website/next-env.d.ts
+++ b/design-system/website/next-env.d.ts
@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/design-system/website/tsconfig.json b/design-system/website/tsconfig.json
index c5d53d8983d..568e45d144e 100644
--- a/design-system/website/tsconfig.json
+++ b/design-system/website/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }
diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index a18bf71c157..64683123c59 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -268,6 +268,7 @@ export function DocumentFeaturesFormAndCode() {
         onChange={getNewVal => {
           setFormValue((getNewVal as any)(formValue));
         }}
+        onAddArrayItem={() => {}}
       />
     </div>
   );
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index d3c664ff25a..1d133881e0e 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -7,6 +7,14 @@ import {
   ConditionalField,
   ObjectField,
 } from '@keystone-6/fields-document/component-blocks';
+import {
+  SortableList,
+  SortableItem,
+  DragHandle,
+} from '@keystone-6/fields-document/src/DocumentEditor/primitives/sortable';
+import { Button } from '@keystone-ui/button';
+import { jsx } from '@keystone-ui/core';
+import { Select } from '@keystone-ui/fields';
 
 const label = fields.text({ label: 'Label' });
 
@@ -40,5 +48,59 @@ export const prop: Prop = fields.array(
         return prop;
       },
     }),
-  })
+  }),
+  {
+    preview(props) {
+      console.log(props);
+      return (
+        <div>
+          <SortableList elements={props.elements.map((_, i) => i.toString())} move={props.move}>
+            {props.elements.map((x, i) => {
+              return <DraggableElement key={i} {...x} />;
+            })}
+          </SortableList>
+          <AddButton options={props.field.element.discriminant.options} insert={props.insert} />
+        </div>
+      );
+    },
+  }
 );
+
+function AddButton<Value extends string>(props: {
+  options: readonly { label: string; value: Value }[];
+  insert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
+}) {
+  // props;
+  return (
+    <Select
+      placeholder="Add"
+      options={props.options}
+      onChange={val => {
+        if (val) {
+          props.insert({ discriminant: val.value });
+        }
+      }}
+      value={null}
+    />
+  );
+}
+
+// function UIForField() {}
+
+function DraggableElement(props) {
+  // const [isEditing, setIsEditing] = useState(false);
+  return (
+    <SortableItem id={props.id}>
+      <DragHandle />
+      {/* <Button
+        onClick={() => {
+          setIsEditing(true);
+        }}
+      >
+        Edit
+      </Button> */}
+      blah
+      {/* {isEditing ? <UIForField {...props} /> : <div>{props.value.label.value}</div>} */}
+    </SortableItem>
+  );
+}
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 08778fbf138..84c43a34879 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -15,6 +15,7 @@ import {
   ToolbarSeparator,
 } from '@keystone-6/fields-document/primitives';
 import { useEffect } from 'react';
+import { Button } from '@keystone-ui/button';
 
 const noticeIconMap = {
   info: InfoIcon,
@@ -24,6 +25,146 @@ const noticeIconMap = {
 };
 
 export const componentBlocks = {
+  // yellowBackgroundDivider: component({
+  //   component: () => <NotEditable>Yellow Divider</NotEditable>,
+  //   props: {},
+  //   label: 'Yellow Background Divider',
+  // }),
+  // button: component({
+  //   component: props => {
+  //     return <div>{props.content}</div>;
+  //   },
+  //   props: {
+  //     content: fields.child({ kind: 'inline', placeholder: 'Content' }),
+  //   },
+  //   label: 'Button',
+  // }),
+  // modalButton: component({
+  //   component: function ModalThing(props) {
+  //     const [isOpen, setIsOpen] = useState(false);
+  //     return (
+  //       <div>
+  //         {props.buttonContent}
+  //         <div>
+  //           <NotEditable>
+  //             <button
+  //               onClick={() => {
+  //                 setIsOpen(x => !x);
+  //               }}
+  //             >
+  //               Toggle Modal
+  //             </button>
+  //           </NotEditable>
+  //         </div>
+  //         <div style={{ display: isOpen ? 'block' : 'none' }}>
+  //           <NotEditable>
+  //             <h1>Modal Content</h1>
+  //           </NotEditable>
+  //           {props.modalContent}
+  //         </div>
+  //       </div>
+  //     );
+  //   },
+  //   props: {
+  //     buttonContent: fields.child({ kind: 'inline', placeholder: 'Content' }),
+  //     modalContent: fields.child({ kind: 'block', placeholder: 'Content' }),
+  //   },
+  //   label: 'Modal Button',
+  // }),
+  thing: component({
+    component: props => {
+      return (
+        <div>
+          <h1>{props.heading}</h1>
+          <NotEditable>
+            <h1>{props.icon.value}</h1>
+          </NotEditable>
+          <div>{props.content}</div>
+        </div>
+      );
+    },
+    props: {
+      heading: fields.child({ kind: 'inline', placeholder: 'Heading' }),
+      icon: fields.select({
+        label: 'Icon',
+        options: [{ label: 'A', value: 'a' }],
+        defaultValue: 'a',
+      }),
+      content: fields.child({ kind: 'block', placeholder: 'Content' }),
+    },
+    label: 'thing',
+  }),
+  table: component({
+    component: function MyTable({ rows }) {
+      // useEffect(() => {
+      //   let maxColumns = 1;
+      //   for (const row of rows.elements) {
+      //     if (row.elements.length > maxColumns) {
+      //       maxColumns = row.elements.length;
+      //     }
+      //   }
+      //   for (const columns of rows.elements) {
+      //     for (const _ of Array.from({ length: maxColumns - columns.elements.length })) {
+      //       columns.insert();
+      //     }
+      //   }
+      // });
+
+      return (
+        <div>
+          <table css={{ width: '100%' }}>
+            <tbody>
+              {rows.elements.map((row, i) => {
+                return (
+                  <tr key={i} css={{ border: '1px solid black' }}>
+                    {row.elements.map((column, i) => {
+                      return (
+                        <td key={i} css={{ border: '1px solid black' }}>
+                          {column.content}
+                        </td>
+                      );
+                    })}
+                    <NotEditable>
+                      <Button
+                        onClick={() => {
+                          row.insert();
+                        }}
+                      >
+                        Insert Column
+                      </Button>
+                    </NotEditable>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          <NotEditable>
+            <div
+              onClick={() => {
+                rows.insert();
+              }}
+            >
+              <Button>Insert row</Button>
+            </div>
+          </NotEditable>
+        </div>
+      );
+    },
+    label: 'Table',
+    props: {
+      rows: fields.array(
+        fields.array(
+          fields.object({
+            content: fields.child({ kind: 'block', placeholder: '' }),
+          })
+        )
+      ),
+      headers: fields.object({
+        row: fields.checkbox({ label: 'Header Row' }),
+        column: fields.checkbox({ label: 'Header Column' }),
+      }),
+    },
+  }),
   myList: component({
     component: function MyList({ children }) {
       useEffect(() => {
@@ -32,20 +173,33 @@ export const componentBlocks = {
         }
       });
       return (
-        <ul css={{ padding: 0 }}>
-          {children.elements.map((element, i) => (
-            <li css={{ listStyle: 'none' }} key={i}>
-              <input
-                contentEditable="false"
-                css={{ marginRight: 8 }}
-                type="checkbox"
-                checked={element.done.value}
-                onChange={event => element.done.onChange(event.target.checked)}
-              />
-              {element.content}
-            </li>
-          ))}
-        </ul>
+        <div>
+          <ul css={{ padding: 0 }}>
+            {children.elements.map((element, i) => (
+              <li css={{ listStyle: 'none' }} key={i}>
+                <input
+                  contentEditable="false"
+                  css={{ marginRight: 8 }}
+                  type="checkbox"
+                  checked={element.done.value}
+                  onChange={event => element.done.onChange(event.target.checked)}
+                />
+                <span style={{ textDecoration: element.done.value ? 'line-through' : undefined }}>
+                  {element.content}
+                </span>
+              </li>
+            ))}
+          </ul>
+          <NotEditable>
+            <Button
+              onClick={() => {
+                children.insert();
+              }}
+            >
+              Add
+            </Button>
+          </NotEditable>
+        </div>
       );
     },
     label: 'My List',
@@ -57,7 +211,7 @@ export const componentBlocks = {
         })
       ),
     },
-    // chromeless: true,
+    chromeless: true,
   }),
   hero: component({
     component: props => {
@@ -327,7 +481,7 @@ export const componentBlocks = {
       content: fields.child({
         kind: 'block',
         placeholder: 'Quote...',
-        formatting: { inlineMarks: 'inherit', softBreaks: 'inherit' },
+        formatting: { inlineMarks: 'inherit', softBreaks: 'inherit', alignment: 'inherit' },
         links: 'inherit',
       }),
       attribution: fields.child({ kind: 'inline', placeholder: 'Attribution...' }),
@@ -335,3 +489,5 @@ export const componentBlocks = {
     chromeless: true,
   }),
 };
+
+fields.relationship;
diff --git a/examples-staging/basic/admin/pages/report.js b/examples-staging/basic/admin/pages/report.js
deleted file mode 100644
index ebd5fc2503e..00000000000
--- a/examples-staging/basic/admin/pages/report.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-export default function ReportPage() {
-  return (
-    <div>
-      <h1>Reports</h1>
-      <p>I'm a demo custom page.</p>
-    </div>
-  );
-}
diff --git a/examples-staging/basic/package.json b/examples-staging/basic/package.json
index 04ae35ad2ea..88cfc140821 100644
--- a/examples-staging/basic/package.json
+++ b/examples-staging/basic/package.json
@@ -14,6 +14,7 @@
     "@keystone-6/core": "^1.0.0",
     "@keystone-6/document-renderer": "^1.0.0",
     "@keystone-6/fields-document": "^1.0.0",
+    "@keystone-ui/button": "^6.0.0",
     "@keystone-ui/core": "^4.0.0",
     "@keystone-ui/fields": "^6.0.0",
     "@keystone-ui/icons": "^5.0.0",
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index 952be50f181..f4affc8edd1 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -187,13 +187,7 @@ export const lists: Keystone.Lists = {
           },
         },
         formatting: true,
-        layouts: [
-          [1, 1],
-          [1, 1, 1],
-          [2, 1],
-          [1, 2],
-          [1, 2, 1],
-        ],
+        layouts: [[1], [1, 1], [1, 1, 1], [2, 1], [1, 2], [1, 2, 1]],
         links: true,
         dividers: true,
         componentBlocks,
diff --git a/examples/extend-graphql-schema/custom-schema.ts b/examples/extend-graphql-schema/custom-schema.ts
index 4a4dd68987c..390026bfdbf 100644
--- a/examples/extend-graphql-schema/custom-schema.ts
+++ b/examples/extend-graphql-schema/custom-schema.ts
@@ -1,6 +1,88 @@
 import { graphQLSchemaExtension } from '@keystone-6/core';
 import { Context } from '.keystone/types';
 
+export const extendGraphqlSchema = graphQLSchemaExtension({
+  typeDefs: `
+    type Mutation {
+      """ Publish a post """
+      publishPost(id: ID!): Post
+    }
+
+    type Query {
+      """ Return all posts for a user from the last <days> days """
+      recentPosts(id: ID!, days: Int! = 7): [Post]
+
+      """ Compute statistics for a user """
+      stats(id: ID!): Statistics
+
+    }
+
+    """ A custom type to represent statistics for a user """
+    type Statistics {
+      draft: Int
+      published: Int
+      latest: Post
+    }`,
+  resolvers: {
+    Mutation: {
+      publishPost: (root, { id }, context) => {
+        // Note we use `context.db.Post` here as we have a return type
+        // of Post, and this API provides results in the correct format.
+        // If you accidentally use `context.query.Post` here you can expect problems
+        // when accessing the fields in your GraphQL client.
+        return context.db.Post.updateOne({
+          where: { id },
+          data: { status: 'published', publishDate: new Date().toUTCString() },
+        });
+      },
+    },
+    Query: {
+      recentPosts: (root, { id, days }, context) => {
+        // Create a date string <days> in the past from now()
+        const cutoff = new Date(
+          new Date().setUTCDate(new Date().getUTCDate() - days)
+        ).toUTCString();
+
+        // Note we use `context.db.Post` here as we have a return type
+        // of [Post], and this API provides results in the correct format.
+        // If you accidentally use `context.query.Post` here you can expect problems
+        // when accessing the fields in your GraphQL client.
+        return context.db.Post.findMany({
+          where: { author: { id: { equals: id } }, publishDate: { gt: cutoff } },
+        });
+      },
+      stats: async (root, { id }) => {
+        return { authorId: id };
+      },
+    },
+    Statistics: {
+      // The stats resolver returns an object which is passed to this resolver as
+      // the root value. We use that object to further resolve ths specific fields.
+      // In this case we want to take root.authorId and get the latest post for that author
+      //
+      // As above we use the context.db.Post API to achieve this.
+      latest: async (val, args, context) => {
+        const [post] = await context.db.Post.findMany({
+          take: 1,
+          orderBy: { publishDate: 'desc' },
+          where: { author: { id: { equals: val.authorId } } },
+        });
+        return post;
+      },
+      draft: (val, args, context) => {
+        return context.query.Post.count({
+          where: { author: { id: { equals: val.authorId } }, status: { equals: 'draft' } },
+        });
+      },
+      published: (val, args, context) => {
+        return context.query.Post.count({
+          where: { author: { id: { equals: val.authorId } }, status: { equals: 'published' } },
+        });
+      },
+    },
+  },
+});
+
 export const extendGraphqlSchema = graphQLSchemaExtension<Context>({
   typeDefs: `
     type Mutation {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 3da0cc5673c..a3745a7713f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -43,6 +43,7 @@ export type FormField<Value, Options> = {
    * a potentially malicious client
    */
   validate(value: unknown): boolean;
+  preview?: PreviewComponent;
 };
 
 export type FormFieldWithGraphQLField<Value, Options> = FormField<Value, Options> & {
@@ -105,6 +106,7 @@ export type ChildField = {
 export type ArrayField<ElementField extends ComponentPropField> = {
   kind: 'array';
   element: ElementField;
+  preview?: PreviewComponent;
 };
 
 export type RelationshipField<Cardinality extends 'one' | 'many'> = {
@@ -112,6 +114,7 @@ export type RelationshipField<Cardinality extends 'one' | 'many'> = {
   relationship: string;
   label: string;
   cardinality?: Cardinality;
+  preview?: PreviewComponent;
 };
 
 export interface ObjectField<
@@ -119,8 +122,12 @@ export interface ObjectField<
 > {
   kind: 'object';
   value: Value;
+  preview?: PreviewComponent;
 }
 
+export type PreviewProps<Field extends ComponentPropField> =
+  ExtractPropFromComponentPropFieldForPreview<Field>;
+
 type StringOrBooleanToString<Val extends string | boolean> = Val extends string
   ? Val
   : Val extends true
@@ -138,8 +145,14 @@ export type ConditionalField<
   kind: 'conditional';
   discriminant: DiscriminantField;
   values: ConditionalValues;
+  preview?: PreviewComponent;
 };
 
+type PreviewComponent = (props: unknown) => ReactElement | null;
+type TypedPreviewComponent<Field extends ComponentPropField> = (
+  props: PreviewProps<Field>
+) => ReactElement | null;
+
 export type ComponentPropField =
   | ChildField
   | FormField<any, any>
@@ -147,7 +160,7 @@ export type ComponentPropField =
   | ConditionalField<FormField<string | boolean, any>, { [key: string]: ComponentPropField }>
   | RelationshipField<'one' | 'many'>
   // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentPropField };
+  | { kind: 'array'; element: ComponentPropField; preview?: PreviewComponent };
 
 export type ComponentPropFieldForGraphQL =
   | FormFieldWithGraphQLField<any, any>
@@ -158,15 +171,17 @@ export type ComponentPropFieldForGraphQL =
     >
   | RelationshipField<'one' | 'many'>
   // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentPropFieldForGraphQL };
+  | { kind: 'array'; element: ComponentPropFieldForGraphQL; preview?: PreviewComponent };
 
 export const fields = {
   text({
     label,
     defaultValue = '',
+    preview,
   }: {
     label: string;
     defaultValue?: string;
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<string, undefined>>;
   }): FormFieldWithGraphQLField<string, undefined> {
     return {
       kind: 'form',
@@ -193,14 +208,17 @@ export const fields = {
         input: graphql.String,
         output: graphql.field({ type: graphql.String }),
       },
+      preview: preview as PreviewComponent,
     };
   },
   url({
     label,
     defaultValue = '',
+    preview,
   }: {
     label: string;
     defaultValue?: string;
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<string, undefined>>;
   }): FormFieldWithGraphQLField<string, undefined> {
     const validate = (value: unknown) => {
       return typeof value === 'string' && (value === '' || isValidURL(value));
@@ -234,16 +252,19 @@ export const fields = {
         input: graphql.String,
         output: graphql.field({ type: graphql.String }),
       },
+      preview: preview as PreviewComponent,
     };
   },
   select<Option extends { label: string; value: string }>({
     label,
     options,
     defaultValue,
+    preview,
   }: {
     label: string;
     options: readonly Option[];
     defaultValue: Option['value'];
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<Option['value'], readonly Option[]>>;
   }): FormFieldWithGraphQLField<Option['value'], readonly Option[]> {
     const optionValuesSet = new Set(options.map(x => x.value));
     return {
@@ -280,16 +301,21 @@ export const fields = {
           },
         }),
       },
+      preview: preview as PreviewComponent,
     };
   },
   multiselect<Option extends { label: string; value: string }>({
     label,
     options,
     defaultValue,
+    preview,
   }: {
     label: string;
     options: readonly Option[];
     defaultValue: readonly Option['value'][];
+    preview?: TypedPreviewComponent<
+      FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]>
+    >;
   }): FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]> {
     const valuesToOption = new Map(options.map(x => [x.value, x]));
     return {
@@ -327,14 +353,17 @@ export const fields = {
           },
         }),
       },
+      preview: preview as PreviewComponent,
     };
   },
   checkbox({
     label,
     defaultValue = false,
+    preview,
   }: {
     label: string;
     defaultValue?: boolean;
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<boolean, undefined>>;
   }): FormFieldWithGraphQLField<boolean, undefined> {
     return {
       kind: 'form',
@@ -362,6 +391,7 @@ export const fields = {
         input: graphql.Boolean,
         output: graphql.field({ type: graphql.Boolean }),
       },
+      preview: preview as PreviewComponent,
     };
   },
   empty(): FormField<undefined, undefined> {
@@ -434,8 +464,13 @@ export const fields = {
             },
     };
   },
-  object<Value extends Record<string, ComponentPropField>>(value: Value): ObjectField<Value> {
-    return { kind: 'object', value };
+  object<Value extends Record<string, ComponentPropField>>(
+    value: Value,
+    opts?: {
+      preview?: TypedPreviewComponent<ObjectField<Value>>;
+    }
+  ): ObjectField<Value> {
+    return { kind: 'object', value, preview: opts?.preview as PreviewComponent };
   },
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
@@ -444,7 +479,10 @@ export const fields = {
     }
   >(
     discriminant: DiscriminantField,
-    values: ConditionalValues
+    values: ConditionalValues,
+    opts?: {
+      preview?: TypedPreviewComponent<ConditionalField<DiscriminantField, ConditionalValues>>;
+    }
   ): ConditionalField<DiscriminantField, ConditionalValues> {
     if (
       (discriminant.validate('true') || discriminant.validate('false')) &&
@@ -458,19 +496,25 @@ export const fields = {
       kind: 'conditional',
       discriminant,
       values: values,
+      preview: opts?.preview as PreviewComponent,
     };
   },
   relationship<Cardinality extends 'one' | 'many'>({
     relationship,
     label,
+    preview,
   }: {
     relationship: string;
     label: string;
+    preview: TypedPreviewComponent<RelationshipField<Cardinality>>;
   }): RelationshipField<Cardinality> {
-    return { kind: 'relationship', relationship, label };
+    return { kind: 'relationship', relationship, label, preview: preview as PreviewComponent };
   },
-  array<ElementField extends ComponentPropField>(element: ElementField): ArrayField<ElementField> {
-    return { kind: 'array', element };
+  array<ElementField extends ComponentPropField>(
+    element: ElementField,
+    opts?: { preview?: TypedPreviewComponent<ArrayField<ElementField>> }
+  ): ArrayField<ElementField> {
+    return { kind: 'array', element, preview: opts?.preview as PreviewComponent };
   },
 };
 
@@ -502,7 +546,12 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
   Prop extends ChildField
     ? ReactNode
     : Prop extends FormField<infer Value, infer Options>
-    ? { readonly value: Value; onChange(value: Value): void; readonly options: Options }
+    ? {
+        readonly value: Value;
+        onChange(value: Value): void;
+        readonly options: Options;
+        readonly field: Prop;
+      }
     : Prop extends ObjectField<infer Value>
     ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> }
     : Prop extends ConditionalField<infer DiscriminantField, infer Values>
@@ -514,6 +563,7 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
           readonly value: ExtractPropFromComponentPropFieldForPreview<
             CastToComponentPropField<Values[Key]>
           >;
+          field: Prop;
         };
       }[keyof Values]
     : Prop extends RelationshipField<infer Cardinality>
@@ -521,19 +571,50 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
         one: {
           readonly value: HydratedRelationshipData | null;
           onChange(relationshipData: HydratedRelationshipData | null): void;
+          field: Prop;
         };
         many: {
           readonly value: readonly HydratedRelationshipData[];
           onChange(relationshipData: readonly HydratedRelationshipData[]): void;
+          field: Prop;
         };
       }[Cardinality]
     : Prop extends ArrayField<infer ElementField>
     ? {
-        readonly elements: readonly ExtractPropFromComponentPropFieldForPreview<ElementField>[];
-        insert(): void;
+        elements: {
+          id: string;
+          element: ExtractPropFromComponentPropFieldForPreview<ElementField>;
+        }[];
+        move: (from: number, to: number) => void;
+        insert: (initial?: InitialValueForComponentPropField<ElementField>, index?: number) => void;
+        remove: (index: number) => void;
+        field: Prop;
       }
     : never;
 
+export type InitialValueForComponentPropField<Prop extends ComponentPropField> =
+  Prop extends ChildField
+    ? null
+    : Prop extends FormField<infer Value, any>
+    ? Value
+    : Prop extends ObjectField<infer Value>
+    ? { readonly [Key in keyof Value]?: InitialValueForComponentPropField<Value[Key]> }
+    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+    ? {
+        readonly [Key in keyof Values]: {
+          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+          readonly value?: InitialValueForComponentPropField<CastToComponentPropField<Values[Key]>>;
+        };
+      }[keyof Values]
+    : Prop extends RelationshipField<infer Cardinality>
+    ? {
+        one: HydratedRelationshipData | null;
+        many: readonly HydratedRelationshipData[];
+      }[Cardinality]
+    : Prop extends ArrayField<infer ElementField>
+    ? InitialValueForComponentPropField<ElementField>[]
+    : never;
+
 type DiscriminantStringToDiscriminantValue<
   DiscriminantField extends FormField<any, any>,
   DiscriminantString extends PropertyKey
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
index b17dad52c2c..9edc34cb513 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -2,42 +2,15 @@
 /** @jsx jsx */
 import { jsx, Stack } from '@keystone-ui/core';
 import { Button } from '@keystone-ui/button';
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  useSortable,
-  SortableContext,
-  verticalListSortingStrategy,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { arrayMove } from '@dnd-kit/sortable';
 import { memo, useMemo, useState } from 'react';
 import { useDocumentFieldRelationships } from '../relationship';
+import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField, ComponentPropField } from './api';
 import { ComponentFieldProps, FormValueContent } from './form';
-import { PropPath } from './utils';
+import { PropPath, ReadonlyPropPath } from './utils';
 
-const dragIcon = (
-  <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#939393">
-      <circle cy="6" cx="6" r="2" />
-      <circle cy="6" cx="12" r="2" />
-      <circle cy="12" cx="6" r="2" />
-      <circle cy="12" cx="12" r="2" />
-      <circle cy="18" cx="6" r="2" />
-      <circle cy="18" cx="12" r="2" />
-    </g>
-  </svg>
-);
 let keyCount = 0;
 
 export function ArrayFormValueContent({
@@ -47,15 +20,9 @@ export function ArrayFormValueContent({
   onChange,
   stringifiedPropPathToAutoFocus,
   forceValidation,
+  onAddArrayItem,
 }: ComponentFieldProps<ArrayField<ComponentPropField>>) {
   const relationships = useDocumentFieldRelationships();
-  const sensors = useSensors(
-    useSensor(MouseSensor),
-    useSensor(TouchSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
 
   const { length } = value;
   // this is not ideal since every item will re-render after adding a new item
@@ -104,56 +71,41 @@ export function ArrayFormValueContent({
   }
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      modifiers={[restrictToVerticalAxis]}
-      onDragEnd={({ over, active }) => {
-        if (over && over.id !== active.id) {
-          const overIndex = keys.indexOf(over.id);
-          const activeIndex = keys.indexOf(active.id);
-          setKeys(arrayMove(keys, activeIndex, overIndex));
-          onChange(value => arrayMove(value as any[], activeIndex, overIndex));
-        }
-      }}
-    >
-      <SortableContext items={keys} strategy={verticalListSortingStrategy}>
-        <ul
-          css={{
-            isolation: 'isolate',
-            display: 'flex',
-            gap: 8,
-            flexDirection: 'column',
-            padding: 0,
-          }}
-        >
-          {value.map((val, i) => {
-            return (
-              <SortableItem
-                key={keys[i]}
-                id={keys[i]}
-                forceValidation={forceValidation}
-                stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-                prop={prop.element}
-                value={val}
-                {...memoizedPropsForItems[i]}
-              />
-            );
-          })}
-          <Button
-            onClick={() => {
-              onChange(value => [...value, getInitialPropsValue(prop.element, relationships)]);
-            }}
-          >
-            Add
-          </Button>
-        </ul>
-      </SortableContext>
-    </DndContext>
+    <Stack gap="medium">
+      <SortableList
+        elements={keys}
+        move={(from, to) => {
+          setKeys(arrayMove(keys, from, to));
+          onChange(value => arrayMove(value as any[], from, to));
+        }}
+      >
+        {value.map((val, i) => {
+          return (
+            <SortableItemInForm
+              key={keys[i]}
+              id={keys[i]}
+              forceValidation={forceValidation}
+              stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
+              onAddArrayItem={onAddArrayItem}
+              prop={prop.element}
+              value={val}
+              {...memoizedPropsForItems[i]}
+            />
+          );
+        })}
+      </SortableList>
+      <Button
+        onClick={() => {
+          onChange(value => [...value, getInitialPropsValue(prop.element, relationships)]);
+        }}
+      >
+        Add
+      </Button>
+    </Stack>
   );
 }
 
-const SortableItem = memo(function SortableItem({
+const SortableItemInForm = memo(function SortableItemInForm({
   id,
   onRemove,
   ...props
@@ -166,68 +118,17 @@ const SortableItem = memo(function SortableItem({
   stringifiedPropPathToAutoFocus: string;
   forceValidation: boolean;
   onRemove: () => void;
+  onAddArrayItem: (path: ReadonlyPropPath) => void;
 }) {
-  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
-    id,
-  });
-
-  const style = {
-    transition,
-    zIndex: isDragging ? 2 : 1,
-    '--translate-x': `${Math.round(transform?.x ?? 0)}px`,
-    '--translate-y': `${Math.round(transform?.y ?? 0)}px`,
-    cursor: isDragging ? 'grabbing' : undefined,
-  };
   return (
-    <li
-      ref={setNodeRef}
-      css={{
-        transform: `translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0))`,
-        listStyle: 'none',
-      }}
-      style={style}
-    >
-      <div
-        style={{
-          pointerEvents: isDragging ? 'none' : undefined,
-          transform: `scale(${isDragging ? '1.02' : '1'})`,
-          boxShadow: isDragging
-            ? 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 10px 5px 0px'
-            : 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
-        }}
-        css={{
-          backgroundColor: 'white',
-          borderRadius: 8,
-          padding: '8px',
-          transition: 'transform 100ms ease, box-shadow 150ms ease',
-        }}
-      >
-        <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
-          <button
-            {...attributes}
-            css={{
-              display: 'flex',
-              justifyContent: 'center',
-              cursor: isDragging ? 'grabbing' : 'grab',
-              appearance: 'none',
-              background: 'transparent',
-              borderRadius: 4,
-              padding: 0,
-              ':focus-visible': {
-                outline: ['2px solid Highlight', '2px solid -webkit-focus-ring-color'],
-              },
-            }}
-            aria-label="Drag handle"
-            {...listeners}
-          >
-            {dragIcon}
-          </button>
-          <Button tone="negative" onClick={onRemove}>
-            Remove
-          </Button>
-        </Stack>
-        <FormValueContent {...props} />
-      </div>
-    </li>
+    <SortableItem id={id}>
+      <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
+        <DragHandle />
+        <Button tone="negative" onClick={onRemove}>
+          Remove
+        </Button>
+      </Stack>
+      <FormValueContent {...props} />s
+    </SortableItem>
   );
 });
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index 96f1b13b63d..be75eb4ce1d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -8,7 +8,8 @@ import { ComponentPropField, RelationshipData } from '../../component-blocks';
 import { useDocumentFieldRelationships, Relationships } from '../relationship';
 import { assertNever, getPropsForConditionalChange, PropPath, ReadonlyPropPath } from './utils';
 import { ArrayFormValueContent } from './array-form-value';
-import { FormField, RelationshipField } from './api';
+import { FormField, PreviewProps, RelationshipField } from './api';
+import { getPreviewPropsForProp } from './preview-props';
 
 function RelationshipFormInput({
   prop,
@@ -64,13 +65,11 @@ function RelationshipFormInput({
 export type ComponentFieldProps<Field extends ComponentPropField> = {
   path: ReadonlyPropPath;
   prop: Field;
-  // ExtractPropFromComponentPropFieldForRendering is not exactly correct
-  // (specifically it's wrong for child fields)
-  // but it's correct enough to be helpful and child fields do nothing here
   value: GeneralValuesForFields[Field['kind']];
   onChange(
     cb: (val: GeneralValuesForFields[Field['kind']]) => GeneralValuesForFields[Field['kind']]
   ): void;
+  onAddArrayItem: (path: ReadonlyPropPath) => void;
   stringifiedPropPathToAutoFocus: string;
   forceValidation: boolean;
 };
@@ -136,6 +135,7 @@ const fieldRenderers: {
             prop={propVal}
             value={props.value[key]}
             onChange={onChangeAndPaths[key].onChange}
+            onAddArrayItem={props.onAddArrayItem}
           />
         ))}
       </Stack>
@@ -195,6 +195,7 @@ const fieldRenderers: {
             },
             [onChange]
           )}
+          onAddArrayItem={props.onAddArrayItem}
         />
       </Stack>
     );
@@ -204,10 +205,74 @@ const fieldRenderers: {
 export const FormValueContent = memo(function FormValueContent(
   props: ComponentFieldProps<ComponentPropField>
 ) {
+  const preview = handlePreview(props);
+  if (preview !== undefined) {
+    return preview;
+  }
   const Comp = fieldRenderers[props.prop.kind];
   return <Comp {...(props as any)} />;
 });
 
+function handlePreview(props: ComponentFieldProps<ComponentPropField>) {
+  if (props.prop.kind === 'child') {
+    return;
+  }
+
+  if (
+    props.prop.kind === 'conditional' ||
+    props.prop.kind === 'form' ||
+    props.prop.kind === 'object' ||
+    props.prop.kind === 'relationship' ||
+    props.prop.kind === 'array'
+  ) {
+    if (props.prop.preview) {
+      return <PreviewWrapper {...props} prop={props.prop} />;
+    }
+    return;
+  }
+
+  assertNever(props.prop);
+}
+
+function PreviewWrapper(
+  props: ComponentFieldProps<
+    Extract<
+      ComponentPropField,
+      { kind: 'conditional' | 'form' | 'object' | 'relationship' | 'array' }
+    >
+  >
+) {
+  const relationships = useDocumentFieldRelationships();
+  const Preview = props.prop.preview as (
+    props: PreviewProps<ComponentPropField>
+  ) => ReactElement | null;
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div>
+      {isOpen ? (
+        <FormValueInsidePreviewBit
+          {...props}
+          onClose={() => {
+            setIsOpen(false);
+          }}
+        />
+      ) : (
+        <Preview
+          {...getPreviewPropsForProp(
+            props.prop,
+            props.value,
+            {},
+            props.path,
+            relationships,
+            newVal => props.onChange(() => newVal),
+            props.onAddArrayItem
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
 export function findFirstFocusablePropPath(
   prop: ComponentPropField,
   path: PropPath,
@@ -245,6 +310,29 @@ export function findFirstFocusablePropPath(
   assertNever(prop);
 }
 
+export function FormValueInsidePreviewBit({
+  onClose,
+  ...props
+}: { onClose(): void } & ComponentFieldProps<ComponentPropField>) {
+  const Comp = fieldRenderers[props.prop.kind];
+
+  return (
+    <Stack gap="xlarge" contentEditable={false}>
+      <Comp {...(props as any)} />;
+      <KeystoneUIButton
+        size="small"
+        tone="active"
+        weight="bold"
+        onClick={() => {
+          onClose();
+        }}
+      >
+        Done
+      </KeystoneUIButton>
+    </Stack>
+  );
+}
+
 const basePath: PropPath = [];
 
 export function FormValue({
@@ -253,12 +341,14 @@ export function FormValue({
   onChange,
   componentBlockProps,
   isValid,
+  onAddArrayItem,
 }: {
   value: any;
   onChange(cb: (val: any) => any): void;
   onClose(): void;
   componentBlockProps: Record<string, ComponentPropField>;
   isValid: boolean;
+  onAddArrayItem(path: ReadonlyPropPath): void;
 }) {
   const [forceValidation, setForceValidation] = useState(false);
   const rootProp = useMemo(
@@ -275,6 +365,7 @@ export function FormValue({
         prop={rootProp}
         value={value}
         stringifiedPropPathToAutoFocus={focusablePath}
+        onAddArrayItem={onAddArrayItem}
       />
       <KeystoneUIButton
         size="small"
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index fb7deb4ee45..b60718d42c2 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -31,10 +31,11 @@ import { Relationships, useDocumentFieldRelationships } from '../relationship';
 import {
   insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading,
   useElementWithSetNodes,
+  useEventCallback,
   useStaticEditor,
 } from '../utils';
 import { clientSideValidateProp, getFieldAtPropPath, ReadonlyPropPath } from './utils';
-import { createPreviewProps } from './preview-props';
+import { createPreviewProps, onAddArrayItem } from './preview-props';
 import { getInitialValue } from './initial-values';
 import { FormValue } from './form';
 
@@ -123,6 +124,16 @@ export const ComponentBlocksElement = ({
   const onCloseEditView = useCallback(() => {
     setEditMode(false);
   }, []);
+  const onAddArrayItemCb = useEventCallback((path: ReadonlyPropPath) => {
+    onAddArrayItem(
+      editor,
+      path,
+      currentElement,
+      __elementToGetPath,
+      componentBlock!,
+      documentFieldRelationships
+    );
+  });
 
   const onPropsChange = useCallback(
     val => {
@@ -194,6 +205,7 @@ Content:`}
           onClose={onCloseEditView}
           value={currentElement.props}
           onChange={onPropsChange}
+          onAddArrayItem={onAddArrayItemCb}
         />
       )}
       <div css={{ display: editMode ? 'none' : 'block', position: 'relative' }}>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index 1f036780ba5..15686a92c36 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -1,6 +1,7 @@
 import { Editor, Element, Transforms } from 'slate';
 import { ReactElement } from 'react';
 import { ReactEditor } from 'slate-react';
+import { arrayMove } from '@dnd-kit/sortable';
 import { ComponentBlock } from '../../component-blocks';
 import { Relationships } from '../relationship';
 import { areArraysEqual } from '../document-features-normalization';
@@ -10,37 +11,45 @@ import {
   findChildPropPathsForProp,
   getFieldAtPropPath,
   getPropsForConditionalChange,
-  PropPath,
   ReadonlyPropPath,
   transformProps,
 } from './utils';
-import { ComponentPropField } from './api';
+import {
+  ArrayField,
+  ComponentPropField,
+  ConditionalField,
+  FormField,
+  PreviewProps,
+  RelationshipField,
+} from './api';
 import { getInitialPropsValue } from './initial-values';
 
-function _getPreviewProps(
+export function getPreviewPropsForProp(
   prop: ComponentPropField,
   value: unknown,
   childrenByPath: Record<string, ReactElement>,
-  path: PropPath,
+  path: ReadonlyPropPath,
   relationships: Relationships,
   onFormPropsChange: (formProps: Record<string, any>) => void,
   onAddArrayItem: (path: ReadonlyPropPath) => void
 ): any {
   switch (prop.kind) {
     case 'form':
-      return {
+      const props: PreviewProps<FormField<unknown, unknown>> = {
         value,
         onChange(newValue: any) {
           onFormPropsChange(newValue);
         },
         options: prop.options,
+        field: prop,
       };
+      return props;
     case 'child':
       return childrenByPath[JSON.stringify(path)];
     case 'object': {
       const previewProps: Record<string, any> = {};
       Object.keys(prop.value).forEach(key => {
-        previewProps[key] = _getPreviewProps(
+        previewProps[key] = getPreviewPropsForProp(
           prop.value[key],
           (value as any)[key],
           childrenByPath,
@@ -55,16 +64,23 @@ function _getPreviewProps(
       return previewProps;
     }
     case 'relationship': {
-      return {
-        value,
+      const props: PreviewProps<RelationshipField<'many' | 'one'>> = {
+        value: value as any,
         onChange(newValue: any) {
           onFormPropsChange(newValue);
         },
+        field: prop,
       };
+      return props;
     }
     case 'conditional': {
       const conditionalValue = value as { discriminant: string | boolean; value: unknown };
-      return {
+      const props: PreviewProps<
+        ConditionalField<
+          FormField<string | boolean, unknown>,
+          { [key: string]: ComponentPropField }
+        >
+      > = {
         discriminant: (value as any).discriminant,
         onChange(newDiscriminant: any) {
           onFormPropsChange(
@@ -77,7 +93,7 @@ function _getPreviewProps(
           );
         },
         options: prop.discriminant.options,
-        value: _getPreviewProps(
+        value: getPreviewPropsForProp(
           prop.values[conditionalValue.discriminant.toString()],
           conditionalValue.value,
           childrenByPath,
@@ -91,13 +107,15 @@ function _getPreviewProps(
           },
           onAddArrayItem
         ),
+        field: prop,
       };
+      return props;
     }
     case 'array': {
       const arrayValue = value as unknown[];
-      return {
+      const props: PreviewProps<ArrayField<ComponentPropField>> = {
         elements: arrayValue.map((val, i) =>
-          _getPreviewProps(
+          getPreviewPropsForProp(
             prop.element,
             val,
             childrenByPath,
@@ -111,10 +129,21 @@ function _getPreviewProps(
             onAddArrayItem
           )
         ),
-        insert() {
-          onAddArrayItem(path);
+        field: prop,
+        insert(initial, index) {
+          // onAddArrayItem(path);
+          const newValue = [...(value as unknown[])];
+          newValue.splice(index ?? newValue.length, 0, initial);
+          onFormPropsChange(newValue);
+        },
+        move(from, to) {
+          onFormPropsChange(arrayMove(value as unknown[], from, to));
+        },
+        remove(index) {
+          onFormPropsChange((value as unknown[]).filter((_, i) => i !== index));
         },
       };
+      return props;
     }
     default: {
       assertNever(prop);
@@ -131,7 +160,7 @@ export function createPreviewProps(
   editor: Editor,
   elementToGetPropPath: Element & { type: 'component-block' }
 ) {
-  return _getPreviewProps(
+  return getPreviewPropsForProp(
     { kind: 'object', value: componentBlock.props },
     element.props,
     childrenByPath,
@@ -145,7 +174,7 @@ export function createPreviewProps(
   );
 }
 
-function onAddArrayItem(
+export function onAddArrayItem(
   editor: Editor,
   path: ReadonlyPropPath,
   element: Element & { type: 'component-block' },
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
new file mode 100644
index 00000000000..c8a86fcae4c
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -0,0 +1,168 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@keystone-ui/core';
+import { useMemo } from 'react';
+import {
+  useSensors,
+  useSensor,
+  MouseSensor,
+  TouchSensor,
+  KeyboardSensor,
+  DndContext,
+  closestCenter,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { createContext, ReactNode, useContext } from 'react';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+
+export function SortableList(props: {
+  move: (index: number, newIndex: number) => void;
+  elements: ({ id: string } | string)[];
+  children: ReactNode;
+}) {
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis]}
+      onDragEnd={({ over, active }) => {
+        if (over && over.id !== active.id) {
+          const activeIndex = props.elements.findIndex(
+            x => (typeof x === 'string' ? x : x.id) === active.id
+          );
+          const overIndex = props.elements.findIndex(
+            x => (typeof x === 'string' ? x : x.id) === over.id
+          );
+          props.move(activeIndex, overIndex);
+        }
+      }}
+    >
+      <SortableContext items={props.elements} strategy={verticalListSortingStrategy}>
+        <ul
+          css={{
+            isolation: 'isolate',
+            display: 'flex',
+            gap: 8,
+            flexDirection: 'column',
+            padding: 0,
+          }}
+        >
+          {props.children}
+        </ul>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+const DragHandleListenersContext = createContext<Pick<
+  ReturnType<typeof useSortable>,
+  'listeners' | 'isDragging' | 'attributes'
+> | null>(null);
+
+export function SortableItem(props: { id: string; children: ReactNode }) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  console.log(transform);
+
+  const style = {
+    transition,
+    zIndex: isDragging ? 2 : 1,
+    '--translate-x': `${Math.round(transform?.x ?? 0)}px`,
+    '--translate-y': `${Math.round(transform?.y ?? 0)}px`,
+    cursor: isDragging ? 'grabbing' : undefined,
+  };
+  return (
+    <DragHandleListenersContext.Provider
+      value={useMemo(() => {
+        return {
+          attributes,
+          listeners,
+          isDragging,
+        };
+      }, [attributes, listeners, isDragging])}
+    >
+      <li
+        ref={setNodeRef}
+        css={{
+          transform: `translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0))`,
+          listStyle: 'none',
+        }}
+        style={style}
+      >
+        <div
+          style={{
+            pointerEvents: isDragging ? 'none' : undefined,
+            transform: `scale(${isDragging ? '1.02' : '1'})`,
+            boxShadow: isDragging
+              ? 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 10px 5px 0px'
+              : 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
+          }}
+          css={{
+            backgroundColor: 'white',
+            borderRadius: 8,
+            padding: '8px',
+            transition: 'transform 100ms ease, box-shadow 150ms ease',
+          }}
+        >
+          {props.children}
+        </div>
+      </li>
+    </DragHandleListenersContext.Provider>
+  );
+}
+
+export function DragHandle() {
+  const sortable = useContext(DragHandleListenersContext);
+  if (sortable === null) {
+    throw new Error('Must use SortableItem above DragHandle');
+  }
+
+  return (
+    <button
+      {...sortable.attributes}
+      css={{
+        display: 'flex',
+        justifyContent: 'center',
+        cursor: sortable.isDragging ? 'grabbing' : 'grab',
+        appearance: 'none',
+        background: 'transparent',
+        borderRadius: 4,
+        padding: 0,
+        ':focus-visible': {
+          outline: ['2px solid Highlight', '2px solid -webkit-focus-ring-color'],
+        },
+      }}
+      aria-label="Drag handle"
+      {...sortable.listeners}
+    >
+      {dragIcon}
+    </button>
+  );
+}
+
+export const dragIcon = (
+  <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#939393">
+      <circle cy="6" cx="6" r="2" />
+      <circle cy="6" cx="12" r="2" />
+      <circle cy="12" cx="6" r="2" />
+      <circle cy="12" cx="12" r="2" />
+      <circle cy="18" cx="6" r="2" />
+      <circle cy="18" cx="12" r="2" />
+    </g>
+  </svg>
+);
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 7184f0d3b4e..ec2e16ca1b3 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -15,7 +15,12 @@ import { useCallback, useEffect, useRef } from 'react';
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
-import { assertNever, ReadonlyPropPath } from '../DocumentEditor/component-blocks/utils';
+import {
+  assertNever,
+  ReadonlyPropPath,
+  transformProps,
+} from '../DocumentEditor/component-blocks/utils';
+import { areArraysEqual } from '../DocumentEditor/document-features-normalization';
 
 const basePath: ReadonlyPropPath = [];
 
@@ -45,6 +50,19 @@ export const Field = ({
         prop={field.prop}
         value={value}
         stringifiedPropPathToAutoFocus={autoFocus ? '' : ''}
+        onAddArrayItem={useCallback(
+          pathToInsertIn => {
+            onChange?.(
+              transformProps(field.prop, valueRef.current, (prop, value, path) => {
+                if (prop.kind === 'array' && areArraysEqual(path, pathToInsertIn)) {
+                  return [...(value as any[]), getInitialPropsValue(prop, {})];
+                }
+                return value;
+              })
+            );
+          },
+          [field.prop, onChange]
+        )}
       />
     </FieldContainer>
   );

From 038c80450e018f4362aa37c5978cb4f186887002 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 28 Feb 2022 13:50:08 +1000
Subject: [PATCH 015/124] Fix some TS errors

---
 .../basic/admin/fieldViews/Blah.tsx           |  9 +-
 .../basic/admin/fieldViews/Content.tsx        | 20 +++--
 .../extend-graphql-schema/custom-schema.ts    | 82 -------------------
 .../DocumentEditor/component-blocks/api.tsx   |  2 +-
 .../component-blocks/array-field.test.tsx     |  7 +-
 .../component-blocks/array-form-value.tsx     |  2 +-
 .../DocumentEditor/component-blocks/form.tsx  | 13 +--
 .../DocumentEditor/component-blocks/index.tsx |  1 -
 .../with-component-blocks.tsx                 |  2 +-
 .../src/component-graphql-input.tsx           |  6 +-
 .../src/component-views/index.tsx             |  4 +-
 packages/fields-document/src/component.ts     |  2 +-
 12 files changed, 31 insertions(+), 119 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 1d133881e0e..e58d99cb7ca 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -15,6 +15,7 @@ import {
 import { Button } from '@keystone-ui/button';
 import { jsx } from '@keystone-ui/core';
 import { Select } from '@keystone-ui/fields';
+import { useState } from 'react';
 
 const label = fields.text({ label: 'Label' });
 
@@ -77,7 +78,7 @@ function AddButton<Value extends string>(props: {
       options={props.options}
       onChange={val => {
         if (val) {
-          props.insert({ discriminant: val.value });
+          props.insert({ discriminant: val.value } as any);
         }
       }}
       value={null}
@@ -88,17 +89,17 @@ function AddButton<Value extends string>(props: {
 // function UIForField() {}
 
 function DraggableElement(props) {
-  // const [isEditing, setIsEditing] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
   return (
     <SortableItem id={props.id}>
       <DragHandle />
-      {/* <Button
+      <Button
         onClick={() => {
           setIsEditing(true);
         }}
       >
         Edit
-      </Button> */}
+      </Button>
       blah
       {/* {isEditing ? <UIForField {...props} /> : <div>{props.value.label.value}</div>} */}
     </SortableItem>
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 699855d9097..dbb0b459a0a 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -117,17 +117,17 @@ export const componentBlocks = {
               {rows.elements.map((row, i) => {
                 return (
                   <tr key={i} css={{ border: '1px solid black' }}>
-                    {row.elements.map((column, i) => {
+                    {row.element.elements.map((column, i) => {
                       return (
                         <td key={i} css={{ border: '1px solid black' }}>
-                          {column.content}
+                          {column.element.content}
                         </td>
                       );
                     })}
                     <NotEditable>
                       <Button
                         onClick={() => {
-                          row.insert();
+                          row.element.insert();
                         }}
                       >
                         Insert Column
@@ -176,16 +176,20 @@ export const componentBlocks = {
         <div>
           <ul css={{ padding: 0 }}>
             {children.elements.map((element, i) => (
-              <li css={{ listStyle: 'none' }} key={i}>
+              <li css={{ listStyle: 'none' }} key={element.id}>
                 <input
                   contentEditable="false"
                   css={{ marginRight: 8 }}
                   type="checkbox"
-                  checked={element.done.value}
-                  onChange={event => element.done.onChange(event.target.checked)}
+                  checked={element.element.done.value}
+                  onChange={event => element.element.done.onChange(event.target.checked)}
                 />
-                <span style={{ textDecoration: element.done.value ? 'line-through' : undefined }}>
-                  {element.content}
+                <span
+                  style={{
+                    textDecoration: element.element.done.value ? 'line-through' : undefined,
+                  }}
+                >
+                  {element.element.content}
                 </span>
               </li>
             ))}
diff --git a/examples/extend-graphql-schema/custom-schema.ts b/examples/extend-graphql-schema/custom-schema.ts
index 390026bfdbf..4a4dd68987c 100644
--- a/examples/extend-graphql-schema/custom-schema.ts
+++ b/examples/extend-graphql-schema/custom-schema.ts
@@ -1,88 +1,6 @@
 import { graphQLSchemaExtension } from '@keystone-6/core';
 import { Context } from '.keystone/types';
 
-export const extendGraphqlSchema = graphQLSchemaExtension({
-  typeDefs: `
-    type Mutation {
-      """ Publish a post """
-      publishPost(id: ID!): Post
-    }
-
-    type Query {
-      """ Return all posts for a user from the last <days> days """
-      recentPosts(id: ID!, days: Int! = 7): [Post]
-
-      """ Compute statistics for a user """
-      stats(id: ID!): Statistics
-
-    }
-
-    """ A custom type to represent statistics for a user """
-    type Statistics {
-      draft: Int
-      published: Int
-      latest: Post
-    }`,
-  resolvers: {
-    Mutation: {
-      publishPost: (root, { id }, context) => {
-        // Note we use `context.db.Post` here as we have a return type
-        // of Post, and this API provides results in the correct format.
-        // If you accidentally use `context.query.Post` here you can expect problems
-        // when accessing the fields in your GraphQL client.
-        return context.db.Post.updateOne({
-          where: { id },
-          data: { status: 'published', publishDate: new Date().toUTCString() },
-        });
-      },
-    },
-    Query: {
-      recentPosts: (root, { id, days }, context) => {
-        // Create a date string <days> in the past from now()
-        const cutoff = new Date(
-          new Date().setUTCDate(new Date().getUTCDate() - days)
-        ).toUTCString();
-
-        // Note we use `context.db.Post` here as we have a return type
-        // of [Post], and this API provides results in the correct format.
-        // If you accidentally use `context.query.Post` here you can expect problems
-        // when accessing the fields in your GraphQL client.
-        return context.db.Post.findMany({
-          where: { author: { id: { equals: id } }, publishDate: { gt: cutoff } },
-        });
-      },
-      stats: async (root, { id }) => {
-        return { authorId: id };
-      },
-    },
-    Statistics: {
-      // The stats resolver returns an object which is passed to this resolver as
-      // the root value. We use that object to further resolve ths specific fields.
-      // In this case we want to take root.authorId and get the latest post for that author
-      //
-      // As above we use the context.db.Post API to achieve this.
-      latest: async (val, args, context) => {
-        const [post] = await context.db.Post.findMany({
-          take: 1,
-          orderBy: { publishDate: 'desc' },
-          where: { author: { id: { equals: val.authorId } } },
-        });
-        return post;
-      },
-      draft: (val, args, context) => {
-        return context.query.Post.count({
-          where: { author: { id: { equals: val.authorId } }, status: { equals: 'draft' } },
-        });
-      },
-      published: (val, args, context) => {
-        return context.query.Post.count({
-          where: { author: { id: { equals: val.authorId } }, status: { equals: 'published' } },
-        });
-      },
-    },
-  },
-});
-
 export const extendGraphqlSchema = graphQLSchemaExtension<Context>({
   typeDefs: `
     type Mutation {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 2598429a21d..27157dabb28 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -509,7 +509,7 @@ export const fields = {
   }: {
     listKey: string;
     label: string;
-    preview: TypedPreviewComponent<RelationshipField<Many extends true ? true : false>>;
+    preview?: TypedPreviewComponent<RelationshipField<Many extends true ? true : false>>;
     selection?: string;
   } & (Many extends undefined | false ? { many?: Many } : { many: Many })): RelationshipField<
     Many extends true ? true : false
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 3d5483642cd..02dbc382d4d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -13,8 +13,8 @@ const table = component({
       'div',
       null,
       props.children.elements.map(x => {
-        return x.elements.map(x => {
-          return x.content;
+        return x.element.elements.map(x => {
+          return x.element.content;
         });
       })
     ),
@@ -281,12 +281,11 @@ test('add to multiple in child field in nested array', () => {
     editor.children[0] as any,
     table,
     {},
-    {},
     () => {},
     editor,
     editor.children[0] as any
   ) as any;
-  previewProps.children.elements[0].insert();
+  previewProps.children.elements[0].element.insert();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
index 9edc34cb513..cd0d8c5495e 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -96,7 +96,7 @@ export function ArrayFormValueContent({
       </SortableList>
       <Button
         onClick={() => {
-          onChange(value => [...value, getInitialPropsValue(prop.element, relationships)]);
+          onChange(value => [...value, getInitialPropsValue(prop.element)]);
         }}
       >
         Add
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index 3925f421248..df4072b9fbf 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -5,7 +5,6 @@ import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import React, { memo, ReactElement, useCallback, useMemo, useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { ComponentPropField, RelationshipData } from '../../component-blocks';
-import { useDocumentFieldRelationships } from '../relationship';
 import { assertNever, getPropsForConditionalChange, PropPath, ReadonlyPropPath } from './utils';
 import { ArrayFormValueContent } from './array-form-value';
 import { FormField, PreviewProps, RelationshipField } from './api';
@@ -137,21 +136,15 @@ const fieldRenderers: {
     );
   },
   conditional: function ConditionalField(props) {
-    const relationships = useDocumentFieldRelationships();
     const { onChange, prop, path } = props;
     const discriminant = props.prop.discriminant as FormField<string | boolean, unknown>;
     const onDiscriminantChange = useCallback(
       discriminant => {
         onChange(value =>
-          getPropsForConditionalChange(
-            { discriminant, value: value.value },
-            value,
-            prop,
-            relationships
-          )
+          getPropsForConditionalChange({ discriminant, value: value.value }, value, prop)
         );
       },
-      [prop, onChange, relationships]
+      [prop, onChange]
     );
     const discriminantAutoFocus =
       JSON.stringify(path.concat('discriminant')) === props.stringifiedPropPathToAutoFocus;
@@ -237,7 +230,6 @@ function PreviewWrapper(
     >
   >
 ) {
-  const relationships = useDocumentFieldRelationships();
   const Preview = props.prop.preview as (
     props: PreviewProps<ComponentPropField>
   ) => ReactElement | null;
@@ -258,7 +250,6 @@ function PreviewWrapper(
             props.value,
             {},
             props.path,
-            relationships,
             newVal => props.onChange(() => newVal),
             props.onAddArrayItem
           )}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 3bbb5530eda..38473b2d43c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -352,7 +352,6 @@ function ComponentBlockRender({
   children: any;
 }) {
   const editor = useSlateStatic();
-  const relationships = useDocumentFieldRelationships();
   const childrenByPath: Record<string, ReactElement> = {};
   let maybeChild: ReactElement | undefined;
   children.forEach((child: ReactElement) => {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 1a913130d7f..9a000e6a6d4 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -349,7 +349,7 @@ export function withComponentBlocks(
                 arrVal.length <= idxFromValue ||
                 (alreadyUsedIndicies.has(idxFromValue) && isEmptyChildFieldNode(node))
               ) {
-                newVal.push(getInitialPropsValue(arrayField.element, relationships));
+                newVal.push(getInitialPropsValue(arrayField.element));
               } else {
                 alreadyUsedIndicies.add(idxFromValue);
                 newVal.push(arrVal[idxFromValue]);
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index 3755dc0b74c..920a04035a1 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -75,7 +75,7 @@ export function getValueForUpdate(
   prevValue: any
 ): any {
   if (prevValue === undefined) {
-    prevValue = getInitialPropsValue(prop, {});
+    prevValue = getInitialPropsValue(prop);
   }
   if (value === undefined) {
     value = prevValue;
@@ -124,7 +124,7 @@ export function getValueForUpdate(
       value: getValueForUpdate(
         (prop.values as any)[key],
         value[key],
-        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop, {})
+        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop)
       ),
     };
   }
@@ -135,7 +135,7 @@ export function getValueForUpdate(
 export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any): any {
   // If value is undefined, get the specified defaultValue
   if (value === undefined) {
-    value = getInitialPropsValue(prop, {});
+    value = getInitialPropsValue(prop);
   }
   if (prop.kind === 'form') {
     if (prop.validate(value)) {
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index ec2e16ca1b3..851e3e7b6e1 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -55,7 +55,7 @@ export const Field = ({
             onChange?.(
               transformProps(field.prop, valueRef.current, (prop, value, path) => {
                 if (prop.kind === 'array' && areArraysEqual(path, pathToInsertIn)) {
-                  return [...(value as any[]), getInitialPropsValue(prop, {})];
+                  return [...(value as any[]), getInitialPropsValue(prop)];
                 }
                 return value;
               })
@@ -93,7 +93,7 @@ export const controller = (
     label: config.label,
     graphqlSelection: `${config.path}Raw`,
     prop: config.customViews.prop,
-    defaultValue: getInitialPropsValue(config.customViews.prop, {}),
+    defaultValue: getInitialPropsValue(config.customViews.prop),
     deserialize: data => {
       return data[config.path + 'Raw'];
     },
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 78f25119aea..4ead136b52d 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -43,7 +43,7 @@ export const componentThing =
     const resolve = (val: JSONValue | undefined) =>
       val === null && meta.provider === 'postgresql' ? 'JsonNull' : val;
 
-    const defaultValue = getInitialPropsValue(prop, {});
+    const defaultValue = getInitialPropsValue(prop);
 
     const unreferencedConcreteInterfaceImplementations: graphql.ObjectType<any>[] = [];
 

From 50cfa6e02d38f3c07ca8a0fba4a56fc9f0e6a1e9 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 28 Feb 2022 13:51:55 +1000
Subject: [PATCH 016/124] Remove error

---
 README.md | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/README.md b/README.md
index 29d980d602b..41101728a4d 100644
--- a/README.md
+++ b/README.md
@@ -75,17 +75,3 @@ KeystoneJS adheres to the [Contributor Covenant Code of Conduct](/CODE-OF-CONDUC
 ## License
 
 Copyright (c) 2021 Thinkmill Labs Pty Ltd. Licensed under the MIT License.
-
-[tsserver 2322] [E] Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(((users: { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | ... 1 more ... | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; }[]) => void) & (((value: string[] | null) => void) | ....‘.
-Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘((users: { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | null | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; }[]) => void) & ((value: string[] | null) => void)‘.
-Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(value: string[] | null) => void’.
-Types of parameters ‘newValue’ and ‘value’ are incompatible.
-Type ‘string[] | null’ is not assignable to type ‘(string | { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | ... 1 more ... | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; })[]’.
-Type ‘null’ is not assignable to type ‘(string | { **typename: “User”; id: string; name: string; email: string; pictureUrl?: string | null | undefined; status?: MembershipStatus | null | undefined; position?: string | ... 1 more ... | undefined; role?: WorkspaceUserRole | ... 1 more ... | undefined; })[]’.
-
-[tsserver 2322] [E] Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(((users: Collaborator[]) => void) & (((value: string[] | null) => void) | ((value: string | null) => void | Promise<void>) | undefined)) | (((users: (string | Collaborator)[]) => void) & (((value: string[] | null) => void) | ... 1 more ... | undefined)) | (((user: Collaborator | null) => void) & (((value: string[] ...‘.
-Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘((users: Collaborator[]) => void) & ((value: string[] | null) => void)‘.
-Type ‘(newValue: Array<Collaborator | string>) => void’ is not assignable to type ‘(value: string[] | null) => void’.
-Types of parameters ‘newValue’ and ‘value’ are incompatible.
-Type ‘string[] | null’ is not assignable to type ‘(string | Collaborator)[]’.
-Type ‘null’ is not assignable to type ‘(string | Collaborator)[]’.

From 7d4076aa782fe181f1b02bcd3d959c02f0e7cf84 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 1 Mar 2022 09:55:57 +1000
Subject: [PATCH 017/124] Progress

---
 .../basic/admin/fieldViews/Blah.tsx           | 111 ++++++++-----
 .../DocumentEditor/component-blocks/api.tsx   |   5 +-
 .../component-blocks/array-form-value.tsx     |  93 +++++------
 .../component-blocks/form-from-preview.tsx    | 144 +++++++++++++++++
 .../DocumentEditor/component-blocks/form.tsx  |  78 +++++----
 .../component-blocks/initial-values.ts        |  41 +++++
 .../component-blocks/preview-props.ts         |  92 ++++++++---
 .../DocumentEditor/component-blocks/utils.ts  |  12 +-
 .../with-component-blocks.tsx                 |  10 ++
 .../DocumentEditor/primitives/sortable.tsx    | 152 +++++++++++-------
 .../src/DocumentEditor/utils.ts               |   4 +-
 .../src/component-views/index.tsx             |  44 +++--
 12 files changed, 541 insertions(+), 245 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index e58d99cb7ca..fb7363ac4de 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -7,14 +7,17 @@ import {
   ConditionalField,
   ObjectField,
 } from '@keystone-6/fields-document/component-blocks';
+import { PreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/api';
+import { FormValueContentFromPreview } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
 import {
   SortableList,
   SortableItem,
   DragHandle,
 } from '@keystone-6/fields-document/src/DocumentEditor/primitives/sortable';
 import { Button } from '@keystone-ui/button';
-import { jsx } from '@keystone-ui/core';
-import { Select } from '@keystone-ui/fields';
+import { jsx, Stack } from '@keystone-ui/core';
+import { FieldContainer, FieldLabel, Select } from '@keystone-ui/fields';
+import { AlertDialog } from '@keystone-ui/modals';
 import { useState } from 'react';
 
 const label = fields.text({ label: 'Label' });
@@ -40,38 +43,49 @@ type Prop = ArrayField<
   >
 >;
 
-export const prop: Prop = fields.array(
-  fields.conditional(discriminant, {
-    leaf,
-    group: fields.object({
-      label,
-      get children() {
-        return prop;
-      },
-    }),
-  }),
-  {
-    preview(props) {
-      console.log(props);
-      return (
-        <div>
-          <SortableList elements={props.elements.map((_, i) => i.toString())} move={props.move}>
-            {props.elements.map((x, i) => {
-              return <DraggableElement key={i} {...x} />;
-            })}
-          </SortableList>
-          <AddButton options={props.field.element.discriminant.options} insert={props.insert} />
-        </div>
-      );
+const conditional = fields.conditional(discriminant, {
+  leaf,
+  group: fields.object({
+    label,
+    get children() {
+      return innerProp;
     },
-  }
-);
+  }),
+});
+
+function Preview(props: PreviewProps<Prop>) {
+  return (
+    <Stack gap="medium">
+      {!!props.elements.length && (
+        <SortableList {...props}>
+          {props.elements.map(x => {
+            return <DraggableElement key={x.id} {...x} />;
+          })}
+        </SortableList>
+      )}
+      <AddButton options={props.field.element.discriminant.options} insert={props.insert} />
+    </Stack>
+  );
+}
+export const prop: Prop = fields.array(conditional, {
+  preview: Preview,
+});
+
+const innerProp: Prop = fields.array(conditional, {
+  preview(props) {
+    return (
+      <FieldContainer>
+        <FieldLabel>Children</FieldLabel>
+        <Preview {...props} />
+      </FieldContainer>
+    );
+  },
+});
 
 function AddButton<Value extends string>(props: {
   options: readonly { label: string; value: Value }[];
   insert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
 }) {
-  // props;
   return (
     <Select
       placeholder="Add"
@@ -86,22 +100,37 @@ function AddButton<Value extends string>(props: {
   );
 }
 
-// function UIForField() {}
-
-function DraggableElement(props) {
+function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
   const [isEditing, setIsEditing] = useState(false);
   return (
     <SortableItem id={props.id}>
-      <DragHandle />
-      <Button
-        onClick={() => {
-          setIsEditing(true);
-        }}
-      >
-        Edit
-      </Button>
-      blah
-      {/* {isEditing ? <UIForField {...props} /> : <div>{props.value.label.value}</div>} */}
+      <Stack across align="center">
+        <DragHandle />
+        <Button
+          onClick={() => {
+            setIsEditing(true);
+          }}
+        >
+          Edit {props.element.discriminant}
+        </Button>
+        <AlertDialog
+          title={`Edit ${
+            props.element.options.find(x => x.value === props.element.discriminant)!.label
+          }`}
+          actions={{
+            confirm: {
+              action: () => {
+                setIsEditing(false);
+              },
+              label: 'Done',
+            },
+          }}
+          isOpen={isEditing}
+        >
+          <FormValueContentFromPreview props={props.element.value} />
+        </AlertDialog>
+        <div>{props.element.value.label.value}</div>
+      </Stack>
     </SortableItem>
   );
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 27157dabb28..a69c54577ff 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -12,6 +12,7 @@ import {
 } from '@keystone-ui/fields';
 import { HTMLAttributes, ReactElement, ReactNode, useState } from 'react';
 import { isValidURL } from '../isValidURL';
+import { objectFieldSymbol } from './preview-props';
 
 export type FormField<Value, Options> = {
   kind: 'form';
@@ -566,7 +567,9 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
         readonly field: Prop;
       }
     : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> }
+    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> } & {
+        [Key in typeof objectFieldSymbol]: Prop;
+      }
     : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
         readonly [Key in keyof Values]: {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
index cd0d8c5495e..95fb3a3e8b1 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -3,27 +3,25 @@
 import { jsx, Stack } from '@keystone-ui/core';
 import { Button } from '@keystone-ui/button';
 import { arrayMove } from '@dnd-kit/sortable';
-import { memo, useMemo, useState } from 'react';
-import { useDocumentFieldRelationships } from '../relationship';
+import { memo, useMemo } from 'react';
 import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField, ComponentPropField } from './api';
-import { ComponentFieldProps, FormValueContent } from './form';
-import { PropPath, ReadonlyPropPath } from './utils';
-
-let keyCount = 0;
+import { CommonComponentFieldProps, ComponentFieldProps, FormValueContent } from './form';
+import { ReadonlyPropPath } from './utils';
+import {
+  getElementIdsForArrayValue,
+  getNewArrayElementId,
+  setElementIdsForArrayValue,
+} from './preview-props';
 
 export function ArrayFormValueContent({
   prop,
   path,
   value,
   onChange,
-  stringifiedPropPathToAutoFocus,
-  forceValidation,
-  onAddArrayItem,
+  common,
 }: ComponentFieldProps<ArrayField<ComponentPropField>>) {
-  const relationships = useDocumentFieldRelationships();
-
   const { length } = value;
   // this is not ideal since every item will re-render after adding a new item
   // and many will re-render after a re-order
@@ -36,18 +34,7 @@ export function ArrayFormValueContent({
           onChange(value => {
             const newValue = [...value];
             newValue[i] = cb(newValue[i]);
-            return newValue;
-          });
-        },
-        onRemove: () => {
-          setKeys(keys => {
-            const newKeys = [...keys];
-            newKeys.splice(i, 1);
-            return newKeys;
-          });
-          onChange(value => {
-            const newValue = [...value];
-            newValue.splice(i, 1);
+            setElementIdsForArrayValue(newValue, getElementIdsForArrayValue(value));
             return newValue;
           });
         },
@@ -55,38 +42,35 @@ export function ArrayFormValueContent({
       };
     });
   }, [length, onChange, path]);
-
-  // this key stuff will sort of produce a less ideal experience if the value array
-  // is modified outside of this component, mainly if adding items in the middle or re-ordering
-  const [keys, setKeys] = useState(() => value.map(() => (keyCount++).toString()));
-
-  const diff = value.length - keys.length;
-
-  if (diff > 0) {
-    setKeys(keys.concat(Array.from({ length: diff }).map(() => (keyCount++).toString())));
-    return null;
-  } else if (diff < 0) {
-    setKeys(keys.slice(0, keys.length - 1));
-    return null;
-  }
-
+  const elementIds = getElementIdsForArrayValue(value);
   return (
     <Stack gap="medium">
       <SortableList
-        elements={keys}
+        elements={elementIds}
         move={(from, to) => {
-          setKeys(arrayMove(keys, from, to));
-          onChange(value => arrayMove(value as any[], from, to));
+          onChange(value => {
+            const newValue = arrayMove(value as any[], from, to);
+            setElementIdsForArrayValue(newValue, arrayMove(elementIds, from, to));
+            return newValue;
+          });
+        }}
+        remove={index => {
+          onChange(value => {
+            const newValue = [...value];
+            newValue.splice(index, 1);
+            const newKeys = [...getElementIdsForArrayValue(value)];
+            newKeys.splice(index, 1);
+            setElementIdsForArrayValue(newValue, newKeys);
+            return newValue;
+          });
         }}
       >
         {value.map((val, i) => {
           return (
             <SortableItemInForm
-              key={keys[i]}
-              id={keys[i]}
-              forceValidation={forceValidation}
-              stringifiedPropPathToAutoFocus={stringifiedPropPathToAutoFocus}
-              onAddArrayItem={onAddArrayItem}
+              key={elementIds[i]}
+              id={elementIds[i]}
+              common={common}
               prop={prop.element}
               value={val}
               {...memoizedPropsForItems[i]}
@@ -96,7 +80,11 @@ export function ArrayFormValueContent({
       </SortableList>
       <Button
         onClick={() => {
-          onChange(value => [...value, getInitialPropsValue(prop.element)]);
+          onChange(value => {
+            const newValue = [...value, getInitialPropsValue(prop.element)];
+            setElementIdsForArrayValue(newValue, [...newValue, getNewArrayElementId()]);
+            return newValue;
+          });
         }}
       >
         Add
@@ -107,26 +95,19 @@ export function ArrayFormValueContent({
 
 const SortableItemInForm = memo(function SortableItemInForm({
   id,
-  onRemove,
   ...props
 }: {
   id: string;
-  path: PropPath;
+  path: ReadonlyPropPath;
   prop: ComponentPropField;
   value: any;
   onChange(value: any): void;
-  stringifiedPropPathToAutoFocus: string;
-  forceValidation: boolean;
-  onRemove: () => void;
-  onAddArrayItem: (path: ReadonlyPropPath) => void;
+  common: CommonComponentFieldProps;
 }) {
   return (
     <SortableItem id={id}>
       <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
         <DragHandle />
-        <Button tone="negative" onClick={onRemove}>
-          Remove
-        </Button>
       </Stack>
       <FormValueContent {...props} />s
     </SortableItem>
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
new file mode 100644
index 00000000000..25c89dfecfd
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
@@ -0,0 +1,144 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { Button } from '@keystone-ui/button';
+import { jsx, Stack } from '@keystone-ui/core';
+import { memo, useMemo } from 'react';
+import { ReactElement } from 'react';
+import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
+import { ArrayField, ComponentPropField, FormField, PreviewProps } from './api';
+import { RelationshipFormInput } from './form';
+import { objectFieldSymbol } from './preview-props';
+import { assertNever } from './utils';
+
+const emptyPath: never[] = [];
+
+const fieldRenderers: {
+  [Key in ComponentPropField['kind']]: (props: {
+    props: PreviewProps<Extract<ComponentPropField, { kind: Key }>>;
+  }) => ReactElement | null;
+} = {
+  array({ props }) {
+    return (
+      <Stack gap="medium">
+        <SortableList {...props}>
+          {props.elements.map(val => {
+            return <SortableItemInForm key={val.id} {...val} />;
+          })}
+        </SortableList>
+        <Button
+          onClick={() => {
+            props.insert();
+          }}
+        >
+          Add
+        </Button>
+      </Stack>
+    );
+  },
+  relationship({ props }) {
+    return (
+      <RelationshipFormInput
+        common={{ stringifiedPropPathToAutoFocus: '' }}
+        onChange={getVal => {
+          props.onChange(getVal(props.value) as any);
+        }}
+        path={emptyPath}
+        value={props.value}
+        prop={props.field}
+      />
+    );
+  },
+  child: () => null,
+  form: function FormField({ props }) {
+    return (
+      <props.field.Input
+        autoFocus={false}
+        value={props.value}
+        onChange={props.onChange}
+        forceValidation={false}
+      />
+    );
+  },
+  object: function ObjectField({ props }) {
+    return (
+      <Stack gap="xlarge">
+        {Object.entries(props).map(([key, propVal]) => (
+          <FormValueContentFromPreview key={key} props={propVal} />
+        ))}
+      </Stack>
+    );
+  },
+  conditional: function ConditionalField({ props }) {
+    const discriminant = props.field.discriminant as FormField<string | boolean, unknown>;
+    return (
+      <Stack gap="xlarge">
+        {useMemo(
+          () => (
+            <discriminant.Input
+              autoFocus={false}
+              value={props.discriminant}
+              onChange={props.onChange}
+              forceValidation={false}
+            />
+          ),
+          [discriminant, props.discriminant, props.onChange]
+        )}
+        <FormValueContentFromPreview props={props.value as any} />
+      </Stack>
+    );
+  },
+};
+
+export function FormValueContentFromPreview({
+  props,
+}: {
+  props: PreviewProps<ComponentPropField>;
+}) {
+  const preview = handlePreview(props);
+  if (preview !== undefined) {
+    return preview;
+  }
+
+  const kind: ComponentPropField['kind'] = (props as any)[objectFieldSymbol]
+    ? (props as any)[objectFieldSymbol].kind
+    : (props as any).field.kind;
+  const Comp = fieldRenderers[kind];
+  return <Comp props={props as any} />;
+}
+
+function handlePreview(props: any) {
+  const prop: ComponentPropField = props[objectFieldSymbol]
+    ? props[objectFieldSymbol]
+    : props.field;
+  if (prop.kind === 'child') {
+    return;
+  }
+
+  if (
+    prop.kind === 'conditional' ||
+    prop.kind === 'form' ||
+    prop.kind === 'object' ||
+    prop.kind === 'relationship' ||
+    prop.kind === 'array'
+  ) {
+    if (prop.preview) {
+      return <prop.preview {...props} />;
+    }
+    return;
+  }
+
+  assertNever(prop);
+}
+
+const SortableItemInForm = memo(function SortableItemInForm(
+  props: PreviewProps<ArrayField<ComponentPropField>>['elements'][number]
+) {
+  return (
+    <SortableItem id={props.id}>
+      <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
+        <DragHandle />
+      </Stack>
+      <FormValueContentFromPreview {...(props.element as any)} />s
+    </SortableItem>
+  );
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index df4072b9fbf..ed1b1b42d47 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -10,13 +10,15 @@ import { ArrayFormValueContent } from './array-form-value';
 import { FormField, PreviewProps, RelationshipField } from './api';
 import { getPreviewPropsForProp } from './preview-props';
 
-function RelationshipFormInput({
+export function RelationshipFormInput({
   prop,
   path,
   value,
   onChange,
-  stringifiedPropPathToAutoFocus,
-}: ComponentFieldProps<RelationshipField<boolean>>) {
+  common: { stringifiedPropPathToAutoFocus },
+}: Omit<ComponentFieldProps<RelationshipField<boolean>>, 'common'> & {
+  common: { stringifiedPropPathToAutoFocus: string };
+}) {
   const keystone = useKeystone();
   const stringifiedPath = JSON.stringify(path);
   return (
@@ -56,6 +58,12 @@ function RelationshipFormInput({
   );
 }
 
+export type CommonComponentFieldProps = {
+  onAddArrayItem: (path: ReadonlyPropPath) => void;
+  stringifiedPropPathToAutoFocus: string;
+  forceValidation: boolean;
+};
+
 export type ComponentFieldProps<Field extends ComponentPropField> = {
   path: ReadonlyPropPath;
   prop: Field;
@@ -63,9 +71,7 @@ export type ComponentFieldProps<Field extends ComponentPropField> = {
   onChange(
     cb: (val: GeneralValuesForFields[Field['kind']]) => GeneralValuesForFields[Field['kind']]
   ): void;
-  onAddArrayItem: (path: ReadonlyPropPath) => void;
-  stringifiedPropPathToAutoFocus: string;
-  forceValidation: boolean;
+  common: CommonComponentFieldProps;
 };
 
 type GeneralValuesForFields = {
@@ -89,7 +95,7 @@ const fieldRenderers: {
     const { onChange } = props;
     return (
       <props.prop.Input
-        autoFocus={JSON.stringify(props.path) === props.stringifiedPropPathToAutoFocus}
+        autoFocus={JSON.stringify(props.path) === props.common.stringifiedPropPathToAutoFocus}
         value={props.value}
         onChange={useCallback(
           val => {
@@ -97,7 +103,7 @@ const fieldRenderers: {
           },
           [onChange]
         )}
-        forceValidation={props.forceValidation && !props.prop.validate(props.value)}
+        forceValidation={props.common.forceValidation && !props.prop.validate(props.value)}
       />
     );
   },
@@ -123,13 +129,11 @@ const fieldRenderers: {
         {Object.entries(prop.value).map(([key, propVal]) => (
           <FormValueContent
             key={key}
-            forceValidation={props.forceValidation}
-            stringifiedPropPathToAutoFocus={props.stringifiedPropPathToAutoFocus}
             path={onChangeAndPaths[key].path}
             prop={propVal}
             value={props.value[key]}
             onChange={onChangeAndPaths[key].onChange}
-            onAddArrayItem={props.onAddArrayItem}
+            common={props.common}
           />
         ))}
       </Stack>
@@ -147,7 +151,7 @@ const fieldRenderers: {
       [prop, onChange]
     );
     const discriminantAutoFocus =
-      JSON.stringify(path.concat('discriminant')) === props.stringifiedPropPathToAutoFocus;
+      JSON.stringify(path.concat('discriminant')) === props.common.stringifiedPropPathToAutoFocus;
     return (
       <Stack gap="xlarge">
         {useMemo(
@@ -157,7 +161,7 @@ const fieldRenderers: {
               value={props.value.discriminant}
               onChange={onDiscriminantChange}
               forceValidation={
-                props.forceValidation && !discriminant.validate(props.value.discriminant)
+                props.common.forceValidation && !discriminant.validate(props.value.discriminant)
               }
             />
           ),
@@ -165,13 +169,12 @@ const fieldRenderers: {
             discriminant,
             discriminantAutoFocus,
             props.value.discriminant,
-            props.forceValidation,
+            props.common.forceValidation,
             onDiscriminantChange,
           ]
         )}
         <FormValueContent
-          forceValidation={props.forceValidation}
-          stringifiedPropPathToAutoFocus={props.stringifiedPropPathToAutoFocus}
+          common={props.common}
           path={useMemo(() => path.concat('value'), [path])}
           prop={prop.values[props.value.discriminant.toString()]}
           value={props.value.value}
@@ -183,7 +186,6 @@ const fieldRenderers: {
             },
             [onChange]
           )}
-          onAddArrayItem={props.onAddArrayItem}
         />
       </Stack>
     );
@@ -233,29 +235,19 @@ function PreviewWrapper(
   const Preview = props.prop.preview as (
     props: PreviewProps<ComponentPropField>
   ) => ReactElement | null;
-  const [isOpen, setIsOpen] = useState(false);
   return (
-    <div>
-      {isOpen ? (
-        <FormValueInsidePreviewBit
-          {...props}
-          onClose={() => {
-            setIsOpen(false);
-          }}
-        />
-      ) : (
-        <Preview
-          {...getPreviewPropsForProp(
-            props.prop,
-            props.value,
-            {},
-            props.path,
-            newVal => props.onChange(() => newVal),
-            props.onAddArrayItem
-          )}
-        />
+    <Preview
+      {...getPreviewPropsForProp(
+        props.prop,
+        props.value,
+        props.path,
+        newVal => props.onChange(() => newVal),
+        {
+          childrenByPath: {},
+          onAddArrayItem: props.common.onAddArrayItem,
+        }
       )}
-    </div>
+    />
   );
 }
 
@@ -345,13 +337,17 @@ export function FormValue({
   return (
     <Stack gap="xlarge" contentEditable={false}>
       <FormValueContent
-        forceValidation={forceValidation}
+        common={useMemo(() => {
+          return {
+            forceValidation,
+            onAddArrayItem,
+            stringifiedPropPathToAutoFocus: focusablePath,
+          };
+        }, [forceValidation, onAddArrayItem, focusablePath])}
         onChange={onChange}
         path={basePath}
         prop={rootProp}
         value={value}
-        stringifiedPropPathToAutoFocus={focusablePath}
-        onAddArrayItem={onAddArrayItem}
       />
       <KeystoneUIButton
         size="small"
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index a68d0db3b69..2f348a909a3 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -47,3 +47,44 @@ export function getInitialPropsValue(prop: ComponentPropField): any {
   }
   assertNever(prop);
 }
+
+export function getInitialPropsValueFromInitializer(
+  prop: ComponentPropField,
+  initializer: any
+): any {
+  switch (prop.kind) {
+    case 'form':
+      return initializer === undefined ? prop.defaultValue : initializer;
+    case 'child':
+      return null;
+    case 'relationship':
+      return initializer === undefined ? (prop.many ? [] : null) : initializer;
+    case 'conditional': {
+      const defaultValue =
+        initializer === undefined ? prop.discriminant.defaultValue : initializer.discriminant;
+      return {
+        discriminant: defaultValue,
+        value: getInitialPropsValueFromInitializer(
+          prop.values[defaultValue.toString()],
+          initializer === undefined ? undefined : initializer.value
+        ),
+      };
+    }
+    case 'object': {
+      let obj: Record<string, any> = {};
+      Object.keys(prop.value).forEach(key => {
+        obj[key] = getInitialPropsValueFromInitializer(
+          prop.value[key],
+          initializer === undefined ? undefined : initializer[key]
+        );
+      });
+      return obj;
+    }
+    case 'array': {
+      return ((initializer ?? []) as unknown[]).map(x =>
+        getInitialPropsValueFromInitializer(prop.element, x)
+      );
+    }
+  }
+  assertNever(prop);
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index 25ac39208d8..ef903a418fb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -21,15 +21,40 @@ import {
   PreviewProps,
   RelationshipField,
 } from './api';
-import { getInitialPropsValue } from './initial-values';
+import { getInitialPropsValue, getInitialPropsValueFromInitializer } from './initial-values';
+
+export const objectFieldSymbol = Symbol('object field');
+
+const arrayValuesToElementIds = new Map<readonly unknown[], string[]>();
+
+let counter = 0;
+
+export function getElementIdsForArrayValue(value: readonly unknown[]) {
+  if (!arrayValuesToElementIds.has(value)) {
+    arrayValuesToElementIds.set(value, Array.from({ length: value.length }, getNewArrayElementId));
+  }
+  return arrayValuesToElementIds.get(value)!;
+}
+
+export function setElementIdsForArrayValue(value: unknown[], elementIds: string[]) {
+  arrayValuesToElementIds.set(value, elementIds);
+}
+
+export function getNewArrayElementId() {
+  return (counter++).toString();
+}
+
+type Common = {
+  childrenByPath: Record<string, ReactElement>;
+  onAddArrayItem: (path: ReadonlyPropPath) => void;
+};
 
 export function getPreviewPropsForProp(
   prop: ComponentPropField,
   value: unknown,
-  childrenByPath: Record<string, ReactElement>,
   path: ReadonlyPropPath,
   onFormPropsChange: (formProps: Record<string, any>) => void,
-  onAddArrayItem: (path: ReadonlyPropPath) => void
+  common: Common
 ): any {
   switch (prop.kind) {
     case 'form':
@@ -43,19 +68,20 @@ export function getPreviewPropsForProp(
       };
       return props;
     case 'child':
-      return childrenByPath[JSON.stringify(path)];
+      return common.childrenByPath[JSON.stringify(path)];
     case 'object': {
-      const previewProps: Record<string, any> = {};
+      const previewProps: Record<string, any> = {
+        [objectFieldSymbol]: prop,
+      };
       Object.keys(prop.value).forEach(key => {
         previewProps[key] = getPreviewPropsForProp(
           prop.value[key],
           (value as any)[key],
-          childrenByPath,
           path.concat(key),
           newVal => {
             onFormPropsChange({ ...(value as any), [key]: newVal });
           },
-          onAddArrayItem
+          common
         );
       });
       return previewProps;
@@ -92,7 +118,6 @@ export function getPreviewPropsForProp(
         value: getPreviewPropsForProp(
           prop.values[conditionalValue.discriminant.toString()],
           conditionalValue.value,
-          childrenByPath,
           path.concat('value'),
           val => {
             onFormPropsChange({
@@ -100,41 +125,55 @@ export function getPreviewPropsForProp(
               value: val,
             });
           },
-          onAddArrayItem
+          common
         ),
         field: prop,
       };
       return props;
     }
     case 'array': {
+      const keys = getElementIdsForArrayValue(value as any);
       const arrayValue = value as unknown[];
       const props: PreviewProps<ArrayField<ComponentPropField>> = {
-        elements: arrayValue.map((val, i) =>
-          getPreviewPropsForProp(
+        elements: arrayValue.map((val, i) => ({
+          id: keys[i],
+          element: getPreviewPropsForProp(
             prop.element,
             val,
-            childrenByPath,
             path.concat(i),
             val => {
               const newValue = [...(value as unknown[])];
               newValue[i] = val;
+              setElementIdsForArrayValue(newValue, keys);
               onFormPropsChange(newValue);
             },
-            onAddArrayItem
-          )
-        ),
+            common
+          ),
+        })),
         field: prop,
         insert(initial, index) {
           // onAddArrayItem(path);
           const newValue = [...(value as unknown[])];
-          newValue.splice(index ?? newValue.length, 0, initial);
+          newValue.splice(
+            index ?? newValue.length,
+            0,
+            getInitialPropsValueFromInitializer(prop.element, initial)
+          );
+          setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
           onFormPropsChange(newValue);
         },
         move(from, to) {
-          onFormPropsChange(arrayMove(value as unknown[], from, to));
+          const newValue = arrayMove(value as unknown[], from, to);
+          setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
+          onFormPropsChange(newValue);
         },
         remove(index) {
-          onFormPropsChange((value as unknown[]).filter((_, i) => i !== index));
+          const newValue = (value as unknown[]).filter((_, i) => i !== index);
+          setElementIdsForArrayValue(
+            newValue,
+            keys.filter((_, i) => i !== index)
+          );
+          onFormPropsChange(newValue);
         },
       };
       return props;
@@ -156,12 +195,15 @@ export function createPreviewProps(
   return getPreviewPropsForProp(
     { kind: 'object', value: componentBlock.props },
     element.props,
-    childrenByPath,
     [],
     props => {
       setNode({ props });
     },
-    propPath => onAddArrayItem(editor, propPath, element, elementToGetPropPath, componentBlock)
+    {
+      childrenByPath,
+      onAddArrayItem: propPath =>
+        onAddArrayItem(editor, propPath, element, elementToGetPropPath, componentBlock),
+    }
   );
 }
 
@@ -183,7 +225,12 @@ export function onAddArrayItem(
       (prop, value, currentPath) => {
         if (prop.kind === 'array' && areArraysEqual(path, currentPath)) {
           nextIdx = (value as any[]).length;
-          return [...(value as any[]), elementVal];
+          const newVal = [...(value as any[]), elementVal];
+          setElementIdsForArrayValue(newVal, [
+            ...getElementIdsForArrayValue(value as any[]),
+            getNewArrayElementId(),
+          ]);
+          return newVal;
         }
         return value;
       }
@@ -209,7 +256,6 @@ export function onAddArrayItem(
       if (hasEmptyThing) {
         Transforms.removeNodes(editor, { at: [...componentBlockPath, 0] });
       }
-      console.log(propPathsToInsert);
       for (const [idx, childFieldInfo] of propPathsToInsert.entries()) {
         Transforms.insertNodes(
           editor,
@@ -222,7 +268,5 @@ export function onAddArrayItem(
         );
       }
     }
-    console.log('before normalization', editor.children);
   });
-  console.log('after normalization', editor.children);
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 21600af5e1c..a7a9162520c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -4,6 +4,7 @@ import { DocumentFeaturesForNormalization } from '../document-features-normaliza
 import { Mark } from '../utils';
 import { ChildField } from './api';
 import { getInitialPropsValue } from './initial-values';
+import { getElementIdsForArrayValue, setElementIdsForArrayValue } from './preview-props';
 
 type PathToChildFieldWithOption = { path: ReadonlyPropPath; options: ChildField['options'] };
 
@@ -312,13 +313,12 @@ export function transformProps(
     );
   }
   if (prop.kind === 'array') {
-    return transformer(
-      prop,
-      (value as unknown[]).map((val, i) =>
-        transformProps(prop.element, val, transformer, path.concat(i))
-      ),
-      path
+    const prevVal = value as unknown[];
+    const newVal = prevVal.map((val, i) =>
+      transformProps(prop.element, val, transformer, path.concat(i))
     );
+    setElementIdsForArrayValue(newVal, getElementIdsForArrayValue(prevVal));
+    return transformer(prop, newVal, path);
   }
   if (prop.kind === 'conditional') {
     const discriminant = (value as any).discriminant;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 9a000e6a6d4..c7d455280ac 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -23,6 +23,11 @@ import {
 } from './utils';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField } from './api';
+import {
+  getElementIdsForArrayValue,
+  getNewArrayElementId,
+  setElementIdsForArrayValue,
+} from './preview-props';
 
 function getAncestorComponentBlock(editor: Editor) {
   if (editor.selection) {
@@ -338,10 +343,12 @@ export function withComponentBlocks(
               }
             }
             const arrVal = getValueAtPropPath(node.props, propPath) as unknown[];
+            const prevKeys = getElementIdsForArrayValue(arrVal);
             // delete backwards
             const alreadyUsedIndicies = new Set<number>();
             // all of the fields are unique so we've removed/re-ordered/done nothing
             const newVal: unknown[] = [];
+            const newKeys: string[] = [];
             for (const [, node] of nodesWithin) {
               const idxFromValue = node.propPath![propPath.length];
               assert(typeof idxFromValue === 'number');
@@ -350,11 +357,14 @@ export function withComponentBlocks(
                 (alreadyUsedIndicies.has(idxFromValue) && isEmptyChildFieldNode(node))
               ) {
                 newVal.push(getInitialPropsValue(arrayField.element));
+                newKeys.push(getNewArrayElementId());
               } else {
                 alreadyUsedIndicies.add(idxFromValue);
                 newVal.push(arrVal[idxFromValue]);
+                newKeys.push(prevKeys[idxFromValue]);
               }
             }
+            setElementIdsForArrayValue(newVal, newKeys);
             // console.log({ arrVal, newVal });
             if (!areArraysEqual(arrVal, newVal)) {
               const transformedProps = transformProps(rootProp, node.props, (prop, value, path) => {
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index c8a86fcae4c..307609cf5ca 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@keystone-ui/core';
+import { Box, jsx } from '@keystone-ui/core';
 import { useMemo } from 'react';
 import {
   useSensors,
@@ -19,64 +19,71 @@ import {
 } from '@dnd-kit/sortable';
 import { createContext, ReactNode, useContext } from 'react';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { Popover } from '@keystone-ui/popover';
+import { ToolbarButton } from '.';
+
+const RemoveContext = createContext<null | ((index: number) => void)>(null);
 
 export function SortableList(props: {
   move: (index: number, newIndex: number) => void;
+  remove: (index: number) => void;
   elements: ({ id: string } | string)[];
   children: ReactNode;
 }) {
   const sensors = useSensors(
-    useSensor(MouseSensor),
+    useSensor(MouseSensor, { activationConstraint: { distance: 3 } }),
     useSensor(TouchSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      modifiers={[restrictToVerticalAxis]}
-      onDragEnd={({ over, active }) => {
-        if (over && over.id !== active.id) {
-          const activeIndex = props.elements.findIndex(
-            x => (typeof x === 'string' ? x : x.id) === active.id
-          );
-          const overIndex = props.elements.findIndex(
-            x => (typeof x === 'string' ? x : x.id) === over.id
-          );
-          props.move(activeIndex, overIndex);
-        }
-      }}
-    >
-      <SortableContext items={props.elements} strategy={verticalListSortingStrategy}>
-        <ul
-          css={{
-            isolation: 'isolate',
-            display: 'flex',
-            gap: 8,
-            flexDirection: 'column',
-            padding: 0,
-          }}
-        >
-          {props.children}
-        </ul>
-      </SortableContext>
-    </DndContext>
+    <RemoveContext.Provider value={props.remove}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={({ over, active }) => {
+          if (over && over.id !== active.id) {
+            const activeIndex = props.elements.findIndex(
+              x => (typeof x === 'string' ? x : x.id) === active.id
+            );
+            const overIndex = props.elements.findIndex(
+              x => (typeof x === 'string' ? x : x.id) === over.id
+            );
+            props.move(activeIndex, overIndex);
+          }
+        }}
+      >
+        <SortableContext items={props.elements} strategy={verticalListSortingStrategy}>
+          <ul
+            css={{
+              isolation: 'isolate',
+              display: 'flex',
+              gap: 8,
+              flexDirection: 'column',
+              padding: 0,
+              margin: 0,
+            }}
+          >
+            {props.children}
+          </ul>
+        </SortableContext>
+      </DndContext>
+    </RemoveContext.Provider>
   );
 }
 
 const DragHandleListenersContext = createContext<Pick<
   ReturnType<typeof useSortable>,
-  'listeners' | 'isDragging' | 'attributes'
+  'listeners' | 'isDragging' | 'attributes' | 'index'
 > | null>(null);
 
 export function SortableItem(props: { id: string; children: ReactNode }) {
-  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
-    id: props.id,
-  });
-
-  console.log(transform);
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition, index } =
+    useSortable({
+      id: props.id,
+    });
 
   const style = {
     transition,
@@ -92,8 +99,9 @@ export function SortableItem(props: { id: string; children: ReactNode }) {
           attributes,
           listeners,
           isDragging,
+          index,
         };
-      }, [attributes, listeners, isDragging])}
+      }, [attributes, listeners, isDragging, index])}
     >
       <li
         ref={setNodeRef}
@@ -131,26 +139,54 @@ export function DragHandle() {
     throw new Error('Must use SortableItem above DragHandle');
   }
 
+  const onRemove = useContext(RemoveContext);
+  if (onRemove === null) {
+    throw new Error('Must use SortableList above DragHandle');
+  }
+
   return (
-    <button
-      {...sortable.attributes}
-      css={{
-        display: 'flex',
-        justifyContent: 'center',
-        cursor: sortable.isDragging ? 'grabbing' : 'grab',
-        appearance: 'none',
-        background: 'transparent',
-        borderRadius: 4,
-        padding: 0,
-        ':focus-visible': {
-          outline: ['2px solid Highlight', '2px solid -webkit-focus-ring-color'],
-        },
-      }}
-      aria-label="Drag handle"
-      {...sortable.listeners}
-    >
-      {dragIcon}
-    </button>
+    <span css={{ position: 'relative' }}>
+      <Popover
+        placement="left"
+        triggerRenderer={opts => {
+          console.log(sortable.listeners);
+          return (
+            <div>
+              <button
+                {...sortable.attributes}
+                {...sortable.listeners}
+                {...opts.triggerProps}
+                css={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  cursor: sortable.isDragging ? 'grabbing' : undefined,
+                  appearance: 'none',
+                  background: 'transparent',
+                  borderRadius: 4,
+                  padding: 0,
+                  ':focus-visible': {
+                    outline: ['2px solid Highlight', '2px solid -webkit-focus-ring-color'],
+                  },
+                }}
+                aria-label="Drag handle"
+              >
+                {dragIcon}
+              </button>
+            </div>
+          );
+        }}
+      >
+        <Box margin="small">
+          <ToolbarButton
+            onClick={() => {
+              onRemove(sortable.index);
+            }}
+          >
+            Remove
+          </ToolbarButton>
+        </Box>
+      </Popover>
+    </span>
   );
 }
 
diff --git a/packages/fields-document/src/DocumentEditor/utils.ts b/packages/fields-document/src/DocumentEditor/utils.ts
index bd6149aa61a..f3602424138 100644
--- a/packages/fields-document/src/DocumentEditor/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/utils.ts
@@ -208,9 +208,9 @@ export function nodeTypeMatcher<Type extends Element['type'][]>(
   return ((node: Node) => typeof node.type === 'string' && set.has(node.type)) as any;
 }
 
-export function assert(condition: boolean): asserts condition {
+export function assert(condition: boolean, message?: string): asserts condition {
   if (!condition) {
     debugger;
-    throw new Error('failed assert');
+    throw new Error(message ?? 'failed assert');
   }
 }
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 851e3e7b6e1..9101f025120 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -11,7 +11,7 @@ import {
   FieldControllerConfig,
   FieldProps,
 } from '@keystone-6/core/types';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FormValueContent } from '../DocumentEditor/component-blocks/form';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
@@ -21,6 +21,11 @@ import {
   transformProps,
 } from '../DocumentEditor/component-blocks/utils';
 import { areArraysEqual } from '../DocumentEditor/document-features-normalization';
+import {
+  getElementIdsForArrayValue,
+  getNewArrayElementId,
+  setElementIdsForArrayValue,
+} from '../DocumentEditor/component-blocks/preview-props';
 
 const basePath: ReadonlyPropPath = [];
 
@@ -39,7 +44,28 @@ export const Field = ({
     <FieldContainer>
       <FieldLabel>{field.label}</FieldLabel>
       <FormValueContent
-        forceValidation={!!forceValidation}
+        common={useMemo(
+          () => ({
+            stringifiedPropPathToAutoFocus: autoFocus ? '' : '',
+            forceValidation: !!forceValidation,
+            onAddArrayItem: pathToInsertIn => {
+              onChange?.(
+                transformProps(field.prop, valueRef.current, (prop, value, path) => {
+                  if (prop.kind === 'array' && areArraysEqual(path, pathToInsertIn)) {
+                    const newVal = [...(value as any[]), getInitialPropsValue(prop)];
+                    setElementIdsForArrayValue(newVal, [
+                      ...getElementIdsForArrayValue(value as unknown[]),
+                      getNewArrayElementId(),
+                    ]);
+                    return newVal;
+                  }
+                  return value;
+                })
+              );
+            },
+          }),
+          [autoFocus, forceValidation, onChange, field.prop]
+        )}
         onChange={useCallback(
           getNewVal => {
             onChange?.(getNewVal(valueRef.current));
@@ -49,20 +75,6 @@ export const Field = ({
         path={basePath}
         prop={field.prop}
         value={value}
-        stringifiedPropPathToAutoFocus={autoFocus ? '' : ''}
-        onAddArrayItem={useCallback(
-          pathToInsertIn => {
-            onChange?.(
-              transformProps(field.prop, valueRef.current, (prop, value, path) => {
-                if (prop.kind === 'array' && areArraysEqual(path, pathToInsertIn)) {
-                  return [...(value as any[]), getInitialPropsValue(prop)];
-                }
-                return value;
-              })
-            );
-          },
-          [field.prop, onChange]
-        )}
       />
     </FieldContainer>
   );

From 9c5dbcbbc3d6617506918dc10885c376e9ba227e Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 7 Mar 2022 13:23:04 +1000
Subject: [PATCH 018/124] Rename some things

---
 .../basic/admin/fieldViews/Blah.tsx           | 78 ++++++++++---------
 .../basic/admin/fieldViews/Content.tsx        | 10 +--
 .../DocumentEditor/component-blocks/api.tsx   | 68 ++++++++++++++--
 .../component-blocks/array-field.test.tsx     |  2 +-
 .../component-blocks/array-form-value.tsx     |  4 +-
 .../component-blocks/form-from-preview.tsx    |  2 +-
 .../component-blocks/preview-props.ts         |  8 +-
 .../DocumentEditor/primitives/sortable.tsx    |  8 +-
 8 files changed, 116 insertions(+), 64 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index fb7363ac4de..446edcbb144 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -48,11 +48,22 @@ const conditional = fields.conditional(discriminant, {
   group: fields.object({
     label,
     get children() {
-      return innerProp;
+      return innerChildren;
     },
   }),
 });
 
+const innerChildren: Prop = fields.array(conditional, {
+  preview(props) {
+    return (
+      <FieldContainer>
+        <FieldLabel>Children</FieldLabel>
+        <Preview {...props} />
+      </FieldContainer>
+    );
+  },
+});
+
 function Preview(props: PreviewProps<Prop>) {
   return (
     <Stack gap="medium">
@@ -63,7 +74,7 @@ function Preview(props: PreviewProps<Prop>) {
           })}
         </SortableList>
       )}
-      <AddButton options={props.field.element.discriminant.options} insert={props.insert} />
+      <AddButton options={props.field.element.discriminant.options} insert={props.onInsert} />
     </Stack>
   );
 }
@@ -71,17 +82,6 @@ export const prop: Prop = fields.array(conditional, {
   preview: Preview,
 });
 
-const innerProp: Prop = fields.array(conditional, {
-  preview(props) {
-    return (
-      <FieldContainer>
-        <FieldLabel>Children</FieldLabel>
-        <Preview {...props} />
-      </FieldContainer>
-    );
-  },
-});
-
 function AddButton<Value extends string>(props: {
   options: readonly { label: string; value: Value }[];
   insert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
@@ -102,34 +102,36 @@ function AddButton<Value extends string>(props: {
 
 function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
   const [isEditing, setIsEditing] = useState(false);
+  const label = props.element.options.find(x => x.value === props.element.discriminant)!.label;
   return (
     <SortableItem id={props.id}>
-      <Stack across align="center">
-        <DragHandle />
-        <Button
-          onClick={() => {
-            setIsEditing(true);
-          }}
-        >
-          Edit {props.element.discriminant}
-        </Button>
-        <AlertDialog
-          title={`Edit ${
-            props.element.options.find(x => x.value === props.element.discriminant)!.label
-          }`}
-          actions={{
-            confirm: {
-              action: () => {
-                setIsEditing(false);
+      <Stack gap="medium">
+        <Stack across align="center">
+          <DragHandle />
+          <Button
+            onClick={() => {
+              setIsEditing(true);
+            }}
+          >
+            Edit {label}
+          </Button>
+          <AlertDialog
+            title={`Edit ${label}`}
+            actions={{
+              confirm: {
+                action: () => {
+                  setIsEditing(false);
+                },
+                label: 'Done',
               },
-              label: 'Done',
-            },
-          }}
-          isOpen={isEditing}
-        >
-          <FormValueContentFromPreview props={props.element.value} />
-        </AlertDialog>
-        <div>{props.element.value.label.value}</div>
+            }}
+            isOpen={isEditing}
+          >
+            <FormValueContentFromPreview props={props.element.value} />
+          </AlertDialog>
+          <div>{props.element.value.label.value}</div>
+        </Stack>
+        {props.element.discriminant === 'group' && <Preview {...props.element.value.children} />}
       </Stack>
     </SortableItem>
   );
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index dbb0b459a0a..00cfc60b484 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -127,7 +127,7 @@ export const componentBlocks = {
                     <NotEditable>
                       <Button
                         onClick={() => {
-                          row.element.insert();
+                          row.element.onInsert();
                         }}
                       >
                         Insert Column
@@ -141,7 +141,7 @@ export const componentBlocks = {
           <NotEditable>
             <div
               onClick={() => {
-                rows.insert();
+                rows.onInsert();
               }}
             >
               <Button>Insert row</Button>
@@ -169,7 +169,7 @@ export const componentBlocks = {
     component: function MyList({ children }) {
       useEffect(() => {
         if (!children.elements.length) {
-          children.insert();
+          children.onInsert();
         }
       });
       return (
@@ -197,7 +197,7 @@ export const componentBlocks = {
           <NotEditable>
             <Button
               onClick={() => {
-                children.insert();
+                children.onInsert();
               }}
             >
               Add
@@ -498,5 +498,3 @@ export const componentBlocks = {
     chromeless: true,
   }),
 };
-
-fields.relationship;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index a69c54577ff..8d2b8b43e4d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -12,8 +12,8 @@ import {
 } from '@keystone-ui/fields';
 import { HTMLAttributes, ReactElement, ReactNode, useState } from 'react';
 import { isValidURL } from '../isValidURL';
-import { objectFieldSymbol } from './preview-props';
 
+// TODO: Value should be only json (especially not undefined)
 export type FormField<Value, Options> = {
   kind: 'form';
   Input(props: {
@@ -567,9 +567,7 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
         readonly field: Prop;
       }
     : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> } & {
-        [Key in typeof objectFieldSymbol]: Prop;
-      }
+    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> }
     : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
         readonly [Key in keyof Values]: {
@@ -600,13 +598,57 @@ export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPr
           id: string;
           element: ExtractPropFromComponentPropFieldForPreview<ElementField>;
         }[];
-        move: (from: number, to: number) => void;
-        insert: (initial?: InitialValueForComponentPropField<ElementField>, index?: number) => void;
-        remove: (index: number) => void;
+        onMove: (from: number, to: number) => void;
+        onInsert: (
+          initial?: InitialValueForComponentPropField<ElementField>,
+          index?: number
+        ) => void;
+        onRemove: (index: number) => void;
         field: Prop;
       }
     : never;
 
+export type ExtractPropFromComponentPropFieldFord<Prop extends ComponentPropField> =
+  Prop extends ChildField
+    ? undefined
+    : Prop extends FormField<infer Value, any>
+    ? Value | undefined
+    : Prop extends ObjectField<infer Value>
+    ? { readonly [Key in keyof Value]?: ExtractPropFromComponentPropFieldFord<Value[Key]> }
+    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+    ? {
+        readonly [Key in keyof Values]: {
+          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+          readonly value?: ExtractPropFromComponentPropFieldFord<
+            CastToComponentPropField<Values[Key]>
+          >;
+        };
+      }[keyof Values]
+    : Prop extends RelationshipField<infer Many>
+    ? Many extends true
+      ? readonly HydratedRelationshipData[]
+      : HydratedRelationshipData | null
+    : Prop extends ArrayField<infer ElementField>
+    ? {
+        operations: ArrayFieldUpdater<ElementField> | ArrayFieldUpdater<ElementField>[];
+        value: { key: string; value: ExtractPropFromComponentPropFieldFord<ElementField> }[];
+      }
+    : never;
+
+type ArrayFieldUpdater<ElementField extends ComponentPropField> =
+  | {
+      kind: 'update';
+      index: number;
+      value: ExtractPropFromComponentPropFieldFord<ElementField>;
+    }
+  | { kind: 'move'; from: number; to: number }
+  | {
+      kind: 'insert';
+      index?: number;
+      value: InitialValueForComponentPropField<ElementField>;
+    }
+  | { kind: 'remove'; index: number };
+
 export type InitialValueForComponentPropField<Prop extends ComponentPropField> =
   Prop extends ChildField
     ? null
@@ -626,7 +668,17 @@ export type InitialValueForComponentPropField<Prop extends ComponentPropField> =
       ? readonly HydratedRelationshipData[]
       : HydratedRelationshipData | null
     : Prop extends ArrayField<infer ElementField>
-    ? InitialValueForComponentPropField<ElementField>[]
+    ?
+        | {
+            kind: 'insert';
+            index?: number;
+            value: InitialValueForComponentPropField<ElementField>;
+          }
+        | {
+            kind: 'insert';
+            index?: number;
+            value: InitialValueForComponentPropField<ElementField>;
+          }[]
     : never;
 
 type DiscriminantStringToDiscriminantValue<
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 02dbc382d4d..5f74c3fbd24 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -285,7 +285,7 @@ test('add to multiple in child field in nested array', () => {
     editor,
     editor.children[0] as any
   ) as any;
-  previewProps.children.elements[0].element.insert();
+  previewProps.children.elements[0].element.onInsert();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
index 95fb3a3e8b1..578e8b36b6e 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
@@ -47,14 +47,14 @@ export function ArrayFormValueContent({
     <Stack gap="medium">
       <SortableList
         elements={elementIds}
-        move={(from, to) => {
+        onMove={(from, to) => {
           onChange(value => {
             const newValue = arrayMove(value as any[], from, to);
             setElementIdsForArrayValue(newValue, arrayMove(elementIds, from, to));
             return newValue;
           });
         }}
-        remove={index => {
+        onRemove={index => {
           onChange(value => {
             const newValue = [...value];
             newValue.splice(index, 1);
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 25c89dfecfd..359ffe80e36 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
@@ -27,7 +27,7 @@ const fieldRenderers: {
         </SortableList>
         <Button
           onClick={() => {
-            props.insert();
+            props.onInsert();
           }}
         >
           Add
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index ef903a418fb..49b657b20b3 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -25,7 +25,7 @@ import { getInitialPropsValue, getInitialPropsValueFromInitializer } from './ini
 
 export const objectFieldSymbol = Symbol('object field');
 
-const arrayValuesToElementIds = new Map<readonly unknown[], string[]>();
+const arrayValuesToElementIds = new WeakMap<readonly unknown[], string[]>();
 
 let counter = 0;
 
@@ -151,7 +151,7 @@ export function getPreviewPropsForProp(
           ),
         })),
         field: prop,
-        insert(initial, index) {
+        onInsert(initial, index) {
           // onAddArrayItem(path);
           const newValue = [...(value as unknown[])];
           newValue.splice(
@@ -162,12 +162,12 @@ export function getPreviewPropsForProp(
           setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
           onFormPropsChange(newValue);
         },
-        move(from, to) {
+        onMove(from, to) {
           const newValue = arrayMove(value as unknown[], from, to);
           setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
           onFormPropsChange(newValue);
         },
-        remove(index) {
+        onRemove(index) {
           const newValue = (value as unknown[]).filter((_, i) => i !== index);
           setElementIdsForArrayValue(
             newValue,
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index 307609cf5ca..5980417f522 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -25,8 +25,8 @@ import { ToolbarButton } from '.';
 const RemoveContext = createContext<null | ((index: number) => void)>(null);
 
 export function SortableList(props: {
-  move: (index: number, newIndex: number) => void;
-  remove: (index: number) => void;
+  onMove: (index: number, newIndex: number) => void;
+  onRemove: (index: number) => void;
   elements: ({ id: string } | string)[];
   children: ReactNode;
 }) {
@@ -38,7 +38,7 @@ export function SortableList(props: {
     })
   );
   return (
-    <RemoveContext.Provider value={props.remove}>
+    <RemoveContext.Provider value={props.onRemove}>
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
@@ -51,7 +51,7 @@ export function SortableList(props: {
             const overIndex = props.elements.findIndex(
               x => (typeof x === 'string' ? x : x.id) === over.id
             );
-            props.move(activeIndex, overIndex);
+            props.onMove(activeIndex, overIndex);
           }
         }}
       >

From 20265a9439e7099d973554333d47014c013fc948 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 10 Mar 2022 09:50:56 +1000
Subject: [PATCH 019/124] Relationships

---
 .../basic/admin/fieldViews/Blah.tsx           |   4 +
 examples-staging/basic/keystone.ts            |   4 +-
 examples-staging/basic/schema.graphql         |  17 +-
 examples-staging/basic/schema.prisma          |   8 +-
 .../src/component-graphql-input.tsx           | 362 ++++++++++++++++--
 .../src/component-graphql-output.tsx          |  55 ++-
 .../src/component-views/index.tsx             |  61 ++-
 packages/fields-document/src/component.ts     |  34 +-
 packages/fields-document/src/index.ts         |   8 +-
 .../fields-document/src/relationship-data.tsx | 166 ++++----
 10 files changed, 564 insertions(+), 155 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 446edcbb144..93f75748c91 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -25,6 +25,10 @@ const label = fields.text({ label: 'Label' });
 const leaf = fields.object({
   url: fields.url({ label: 'URL' }),
   label,
+  author: fields.relationship({
+    label: 'Author',
+    listKey: 'User',
+  }),
 });
 
 const discriminant = fields.select({
diff --git a/examples-staging/basic/keystone.ts b/examples-staging/basic/keystone.ts
index 50e605d3a40..031bbbc058e 100644
--- a/examples-staging/basic/keystone.ts
+++ b/examples-staging/basic/keystone.ts
@@ -26,8 +26,8 @@ const auth = createAuth({
 export default auth.withAuth(
   config({
     db: {
-      provider: 'sqlite',
-      url: process.env.DATABASE_URL || 'file:./keystone-example.db',
+      provider: 'postgresql',
+      url: process.env.DATABASE_URL || `postgres://${process.env.USER}@localhost/basic`,
     },
     ui: {
       // NOTE -- this is not implemented, keystone currently always provides an admin ui at /
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index d72df3a3c11..5a0885572c8 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -199,9 +199,15 @@ input StringFilter {
   contains: String
   startsWith: String
   endsWith: String
+  mode: QueryMode
   not: NestedStringFilter
 }
 
+enum QueryMode {
+  default
+  insensitive
+}
+
 input NestedStringFilter {
   equals: String
   in: [String!]
@@ -351,6 +357,7 @@ input StringNullableFilter {
   contains: String
   startsWith: String
   endsWith: String
+  mode: QueryMode
   not: NestedStringNullableFilter
 }
 
@@ -407,7 +414,7 @@ type Post {
   title: String
   status: String
   blah: [PostBlah]
-  blahRaw: JSON
+  blahRaw(hydrateRelationships: Boolean! = false): JSON
   content: Post_content_Document
   publishDate: DateTime
   author: User
@@ -436,6 +443,7 @@ type PostBlahLeaf implements PostBlah {
 type PostBlahLeafValue {
   url: String
   label: String
+  author: User
 }
 
 type PostBlahGroup implements PostBlah {
@@ -494,6 +502,7 @@ input PostBlahUpdateInput {
 input PostBlahLeafUpdateInput {
   url: String
   label: String
+  author: UserRelateToOneForUpdateInput
 }
 
 input PostBlahGroupUpdateInput {
@@ -523,6 +532,7 @@ input PostBlahCreateInput {
 input PostBlahLeafCreateInput {
   url: String
   label: String
+  author: UserRelateToOneForCreateInput
 }
 
 input PostBlahGroupCreateInput {
@@ -631,11 +641,6 @@ enum KeystoneAdminUIFieldMetaItemViewFieldMode {
   hidden
 }
 
-enum QueryMode {
-  default
-  insensitive
-}
-
 type KeystoneAdminUISort {
   field: String!
   direction: KeystoneAdminUISortDirection!
diff --git a/examples-staging/basic/schema.prisma b/examples-staging/basic/schema.prisma
index 07293662d37..4826eb5ea5f 100644
--- a/examples-staging/basic/schema.prisma
+++ b/examples-staging/basic/schema.prisma
@@ -1,9 +1,9 @@
 // This file is automatically generated by Keystone, do not modify it manually.
 // Modify your Keystone config when you want to change this.
 
-datasource sqlite {
+datasource postgresql {
   url      = env("DATABASE_URL")
-  provider = "sqlite"
+  provider = "postgresql"
 }
 
 generator client {
@@ -45,8 +45,8 @@ model Post {
   id          String    @id @default(cuid())
   title       String    @default("")
   status      String    @default("draft")
-  blah        String    @default("[]")
-  content     String    @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
+  blah        Json      @default("[]")
+  content     Json      @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
   publishDate DateTime?
   author      User?     @relation("Post_author", fields: [authorId], references: [id])
   authorId    String?   @map("author")
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index 920a04035a1..6634c658822 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -1,4 +1,7 @@
 import { graphql } from '@keystone-6/core';
+import { FieldData, GraphQLTypesForList, KeystoneContext } from '@keystone-6/core/types';
+import { GraphQLResolveInfo } from 'graphql';
+
 import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
 import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
 import { assertNever } from './DocumentEditor/component-blocks/utils';
@@ -7,10 +10,11 @@ export function getGraphQLInputType(
   name: string,
   prop: ComponentPropFieldForGraphQL,
   operation: 'create' | 'update',
-  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>
+  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>,
+  meta: FieldData
 ) {
   if (!cache.has(prop)) {
-    const res = getGraphQLInputTypeInner(name, prop, operation, cache);
+    const res = getGraphQLInputTypeInner(name, prop, operation, cache, meta);
     cache.set(prop, res);
   }
   return cache.get(prop)!;
@@ -20,7 +24,8 @@ function getGraphQLInputTypeInner(
   name: string,
   prop: ComponentPropFieldForGraphQL,
   operation: 'create' | 'update',
-  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>
+  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>,
+  meta: FieldData
 ): graphql.InputType {
   if (prop.kind === 'form') {
     return prop.graphql.input;
@@ -35,7 +40,8 @@ function getGraphQLInputTypeInner(
               `${name}${key[0].toUpperCase()}${key.slice(1)}`,
               val,
               operation,
-              cache
+              cache,
+              meta
             );
             return [key, graphql.arg({ type })];
           })
@@ -43,7 +49,7 @@ function getGraphQLInputTypeInner(
     });
   }
   if (prop.kind === 'array') {
-    const innerType = getGraphQLInputType(name, prop.element, operation, cache);
+    const innerType = getGraphQLInputType(name, prop.element, operation, cache, meta);
     return graphql.list(innerType);
   }
   if (prop.kind === 'conditional') {
@@ -57,7 +63,8 @@ function getGraphQLInputTypeInner(
                 `${name}${key[0].toUpperCase()}${key.slice(1)}`,
                 val,
                 operation,
-                cache
+                cache,
+                meta
               );
               return [key, graphql.arg({ type })];
             }
@@ -66,14 +73,26 @@ function getGraphQLInputTypeInner(
     });
   }
 
+  if (prop.kind === 'relationship') {
+    const inputType =
+      meta.lists[prop.listKey].types.relateTo[prop.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(prop);
 }
 
-export function getValueForUpdate(
+export async function getValueForUpdate(
   prop: ComponentPropFieldForGraphQL,
   value: any,
-  prevValue: any
-): any {
+  prevValue: any,
+  context: KeystoneContext
+): Promise<any> {
   if (prevValue === undefined) {
     prevValue = getInitialPropsValue(prop);
   }
@@ -91,9 +110,11 @@ export function getValueForUpdate(
       throw new Error();
     }
     return Object.fromEntries(
-      Object.entries(prop.value).map(([key, val]) => {
-        return [key, getValueForUpdate(val, value[key], prevValue[key])];
-      })
+      await Promise.all(
+        Object.entries(prop.value).map(async ([key, val]) => {
+          return [key, await getValueForUpdate(val, value[key], prevValue[key], context)];
+        })
+      )
     );
   }
   if (prop.kind === 'array') {
@@ -101,10 +122,29 @@ export function getValueForUpdate(
       throw new Error();
     }
 
-    return (value as any[]).map((val, i) => getValueForUpdate(prop.element, val, prevValue[i]));
+    return Promise.all(
+      (value as any[]).map((val, i) => getValueForUpdate(prop.element, val, prevValue[i], context))
+    );
   }
   if (prop.kind === 'relationship') {
-    // TODO handle this case
+    if (value === undefined) {
+      return prevValue;
+    }
+    if (value === null) {
+      throw new Error();
+    }
+    if (prop.many) {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['update']>>
+      >)!;
+      return resolveRelateToManyForUpdateInput(val, context, prop.listKey, prevValue);
+    } else {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['update']>>
+      >)!;
+
+      return resolveRelateToOneForUpdateInput(val, context, prop.listKey);
+    }
   }
   if (prop.kind === 'conditional') {
     if (value === null) {
@@ -121,10 +161,11 @@ export function getValueForUpdate(
     }
     return {
       discriminant,
-      value: getValueForUpdate(
+      value: await getValueForUpdate(
         (prop.values as any)[key],
         value[key],
-        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop)
+        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop),
+        context
       ),
     };
   }
@@ -132,7 +173,11 @@ export function getValueForUpdate(
   assertNever(prop);
 }
 
-export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any): any {
+export async function getValueForCreate(
+  prop: ComponentPropFieldForGraphQL,
+  value: any,
+  context: KeystoneContext
+): Promise<any> {
   // If value is undefined, get the specified defaultValue
   if (value === undefined) {
     value = getInitialPropsValue(prop);
@@ -147,18 +192,47 @@ export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any
     if (value === null) {
       throw new Error();
     }
-    return (value as any[]).map(val => getValueForCreate(prop.element, val));
+    return Promise.all((value as any[]).map(val => getValueForCreate(prop.element, val, context)));
   }
   if (prop.kind === 'object') {
     if (value === null) {
       throw new Error();
     }
     return Object.fromEntries(
-      Object.entries(prop.value).map(([key, val]) => {
-        return [key, getValueForCreate(val, value[key])];
-      })
+      await Promise.all(
+        Object.entries(prop.value).map(async ([key, val]) => {
+          return [key, await getValueForCreate(val, value[key], context)];
+        })
+      )
     );
   }
+  if (prop.kind === 'relationship') {
+    if (prop.many) {
+      const val = value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['create']>>
+      >;
+
+      if (val === undefined) {
+        return [];
+      }
+
+      if (val === null) {
+        throw new Error();
+      }
+      return resolveRelateToManyForCreateInput(val, context, prop.listKey);
+    } else {
+      const val = value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['create']>>
+      >;
+      if (val === undefined) {
+        return null;
+      }
+      if (val === null) {
+        throw new Error();
+      }
+      return resolveRelateToOneForCreateInput(val, context, prop.listKey);
+    }
+  }
   if (prop.kind === 'conditional') {
     if (value === null) {
       throw new Error();
@@ -175,9 +249,253 @@ export function getValueForCreate(prop: ComponentPropFieldForGraphQL, value: any
 
     return {
       discriminant,
-      value: getValueForCreate((prop.values as any)[key], value[key]),
+      value: await getValueForCreate((prop.values as any)[key], value[key], context),
     };
   }
 
   assertNever(prop);
 }
+/** 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
+  );
+  return { id };
+}
+
+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/component-graphql-output.tsx b/packages/fields-document/src/component-graphql-output.tsx
index 1638cc90eb3..b4c2e5472b6 100644
--- a/packages/fields-document/src/component-graphql-output.tsx
+++ b/packages/fields-document/src/component-graphql-output.tsx
@@ -1,4 +1,5 @@
 import { graphql } from '@keystone-6/core';
+import { FieldData } from '@keystone-6/core/types';
 import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
 import { assertNever } from './DocumentEditor/component-blocks/utils';
 
@@ -43,10 +44,11 @@ export function getOutputGraphQLField(
   name: string,
   prop: ComponentPropFieldForGraphQL,
   interfaceImplementations: graphql.ObjectType<unknown>[],
-  cache: Map<ComponentPropFieldForGraphQL, OutputField>
+  cache: Map<ComponentPropFieldForGraphQL, OutputField>,
+  meta: FieldData
 ) {
   if (!cache.has(prop)) {
-    const res = getOutputGraphQLFieldInner(name, prop, interfaceImplementations, cache);
+    const res = getOutputGraphQLFieldInner(name, prop, interfaceImplementations, cache, meta);
     cache.set(prop, res);
   }
   return cache.get(prop)!;
@@ -56,7 +58,8 @@ function getOutputGraphQLFieldInner(
   name: string,
   prop: ComponentPropFieldForGraphQL,
   interfaceImplementations: graphql.ObjectType<unknown>[],
-  cache: Map<ComponentPropFieldForGraphQL, OutputField>
+  cache: Map<ComponentPropFieldForGraphQL, OutputField>,
+  meta: FieldData
 ): OutputField {
   if (prop.kind === 'form') {
     return prop.graphql.output;
@@ -73,7 +76,8 @@ function getOutputGraphQLFieldInner(
                   `${name}${key[0].toUpperCase()}${key.slice(1)}`,
                   val,
                   interfaceImplementations,
-                  cache
+                  cache,
+                  meta
                 );
                 return [key, wrapGraphQLFieldInResolver(field, source => (source as any)[key])];
               }
@@ -83,7 +87,13 @@ function getOutputGraphQLFieldInner(
     });
   }
   if (prop.kind === 'array') {
-    const innerField = getOutputGraphQLField(name, prop.element, interfaceImplementations, cache);
+    const innerField = getOutputGraphQLField(
+      name,
+      prop.element,
+      interfaceImplementations,
+      cache,
+      meta
+    );
     const resolve = innerField.resolve;
 
     return graphql.field({
@@ -109,7 +119,8 @@ function getOutputGraphQLFieldInner(
           name + 'Discriminant',
           prop.discriminant,
           interfaceImplementations,
-          cache
+          cache,
+          meta
         );
       }
       return discriminantField;
@@ -135,7 +146,13 @@ function getOutputGraphQLFieldInner(
           interfaces: [interfaceType],
           fields: () => ({
             discriminant: wrapGraphQLFieldInResolver(getDiscriminantField(), x => x.discriminant),
-            value: getOutputGraphQLField(`${innerName}Value`, val, interfaceImplementations, cache),
+            value: getOutputGraphQLField(
+              `${innerName}Value`,
+              val,
+              interfaceImplementations,
+              cache,
+              meta
+            ),
           }),
         });
       })
@@ -149,5 +166,29 @@ function getOutputGraphQLFieldInner(
     });
   }
 
+  if (prop.kind === 'relationship') {
+    const listOutputType = meta.lists[prop.listKey].types.output;
+    return graphql.field({
+      type: prop.many ? graphql.list(listOutputType) : listOutputType,
+      resolve({ value }, args, context) {
+        if (Array.isArray(value)) {
+          return context.db[prop.listKey].findMany({
+            where: {
+              id: { in: (value as { id: string }[]).map(x => x.id) },
+            },
+          });
+        }
+        if ((value as any)?.id == null) {
+          return null;
+        }
+        return context.db[prop.listKey].findOne({
+          where: {
+            id: (value as { id: string }).id,
+          },
+        });
+      },
+    });
+  }
+
   assertNever(prop);
 }
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 9101f025120..e74bf72fede 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -49,8 +49,9 @@ export const Field = ({
             stringifiedPropPathToAutoFocus: autoFocus ? '' : '',
             forceValidation: !!forceValidation,
             onAddArrayItem: pathToInsertIn => {
-              onChange?.(
-                transformProps(field.prop, valueRef.current, (prop, value, path) => {
+              onChange?.({
+                kind: valueRef.current.kind,
+                value: transformProps(field.prop, valueRef.current.value, (prop, value, path) => {
                   if (prop.kind === 'array' && areArraysEqual(path, pathToInsertIn)) {
                     const newVal = [...(value as any[]), getInitialPropsValue(prop)];
                     setElementIdsForArrayValue(newVal, [
@@ -60,21 +61,21 @@ export const Field = ({
                     return newVal;
                   }
                   return value;
-                })
-              );
+                }),
+              });
             },
           }),
           [autoFocus, forceValidation, onChange, field.prop]
         )}
         onChange={useCallback(
           getNewVal => {
-            onChange?.(getNewVal(valueRef.current));
+            onChange?.({ kind: valueRef.current.kind, value: getNewVal(valueRef.current.value) });
           },
           [onChange]
         )}
         path={basePath}
         prop={field.prop}
-        value={value}
+        value={value.value}
       />
     </FieldContainer>
   );
@@ -92,7 +93,7 @@ export const allowedExportsOnCustomViews = ['prop'];
 
 export const controller = (
   config: FieldControllerConfig
-): FieldController<unknown> & {
+): FieldController<{ kind: 'create' | 'update'; value: unknown }> & {
   prop: ComponentPropFieldForGraphQL;
 } => {
   if (!config.customViews.prop) {
@@ -103,26 +104,35 @@ export const controller = (
   return {
     path: config.path,
     label: config.label,
-    graphqlSelection: `${config.path}Raw`,
+    graphqlSelection: `${config.path}Raw(hydrateRelationships: true)`,
     prop: config.customViews.prop,
-    defaultValue: getInitialPropsValue(config.customViews.prop),
+    defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.prop) },
     deserialize: data => {
-      return data[config.path + 'Raw'];
+      return {
+        kind: 'update',
+        value: data[`${config.path}Raw`],
+      };
+    },
+    serialize: value => {
+      return {
+        [config.path]: serializeValue(config.customViews.prop, value.value, value.kind),
+      };
     },
-    serialize: value => ({
-      [config.path]: serializeValue(config.customViews.prop, value),
-    }),
   };
 };
 
-const serializeValue = (prop: ComponentPropFieldForGraphQL, value: any): any => {
+function serializeValue(
+  prop: ComponentPropFieldForGraphQL,
+  value: any,
+  kind: 'update' | 'create'
+): any {
   if (prop.kind === 'conditional') {
     return {
-      [value.discriminant]: serializeValue((prop.values as any)[value.discriminant], value.value),
+      [value.discriminant]: serializeValue(prop.values[value.discriminant], value.value, kind),
     };
   }
   if (prop.kind === 'array') {
-    return (value as any[]).map(a => serializeValue(prop.element, a));
+    return (value as any[]).map(a => serializeValue(prop.element, a, kind));
   }
   if (prop.kind === 'form') {
     return value;
@@ -130,12 +140,25 @@ const serializeValue = (prop: ComponentPropFieldForGraphQL, value: any): any =>
   if (prop.kind === 'object') {
     return Object.fromEntries(
       Object.entries(prop.value).map(([key, val]) => {
-        return [key, serializeValue(val, value[key])];
+        return [key, serializeValue(val, value[key], kind)];
       })
     );
   }
   if (prop.kind === 'relationship') {
-    // TODO
+    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(prop);
-};
+}
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 4ead136b52d..5280743e094 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -16,6 +16,7 @@ import {
   getValueForUpdate,
 } from './component-graphql-input';
 import { assertValidComponentPropField } from './DocumentEditor/component-blocks/field-assertions';
+import { addRelationshipDataToComponentProps, fetchRelationshipData } from './relationship-data';
 
 export type ComponentThingFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
   CommonFieldConfig<ListTypeInfo> & {
@@ -62,7 +63,7 @@ export const componentThing =
                 prevVal = JSON.parse(prevVal as any);
                 val = args.inputData[meta.fieldKey];
               }
-              val = getValueForUpdate(prop, val, prevVal);
+              val = getValueForUpdate(prop, val, prevVal, args.context);
               if (val === null && meta.provider === 'postgresql') {
                 val = 'JsonNull';
               }
@@ -81,24 +82,45 @@ export const componentThing =
         },
         input: {
           create: {
-            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create', new Map()) }),
-            resolve(val) {
-              return resolve(getValueForCreate(prop, val));
+            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create', new Map(), meta) }),
+            async resolve(val, context) {
+              return resolve(await getValueForCreate(prop, val, context));
             },
           },
           update: {
-            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'update', new Map()) }),
+            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'update', new Map(), meta) }),
           },
         },
         output: getOutputGraphQLField(
           name,
           prop,
           unreferencedConcreteInterfaceImplementations,
-          new Map()
+          new Map(),
+          meta
         ),
         extraOutputFields: {
           [`${meta.fieldKey}Raw`]: 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(prop, value, (prop, value) =>
+                  fetchRelationshipData(
+                    context,
+                    prop.listKey,
+                    prop.many,
+                    prop.selection || '',
+                    value
+                  )
+                );
+              }
+              return value;
+            },
           }),
         },
         views,
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 6b74adfb30b..81c720e0c1a 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -207,13 +207,7 @@ export const document =
                 type: graphql.nonNull(graphql.JSON),
                 resolve({ document }, { hydrateRelationships }, context) {
                   return hydrateRelationships
-                    ? addRelationshipData(
-                        document as any,
-                        context.graphql,
-                        relationships,
-                        componentBlocks,
-                        context.gqlNames
-                      )
+                    ? addRelationshipData(document as any, context, relationships, componentBlocks)
                     : (document as any);
                 },
               }),
diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index a9417b99eff..ba21bc40e00 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -1,4 +1,4 @@
-import { GqlNames, KeystoneGraphQLAPI } from '@keystone-6/core/types';
+import { KeystoneContext } from '@keystone-6/core/types';
 import { Descendant } from 'slate';
 import { GraphQLSchema, executeSync, parse } from 'graphql';
 import weakMemoize from '@emotion/weak-memoize';
@@ -16,77 +16,10 @@ const idFieldAlias = '____document_field_relationship_item_id';
 
 export function addRelationshipData(
   nodes: Descendant[],
-  graphQLAPI: KeystoneGraphQLAPI,
+  context: KeystoneContext,
   relationships: Relationships,
-  componentBlocks: Record<string, ComponentBlock>,
-  gqlNames: (listKey: string) => GqlNames
+  componentBlocks: Record<string, ComponentBlock>
 ): Promise<Descendant[]> {
-  let fetchData = async (listKey: string, many: boolean, selection: string, data: any) => {
-    if (many) {
-      const ids = Array.isArray(data) ? data.filter(item => item.id != null).map(x => x.id) : [];
-
-      if (ids.length) {
-        const labelField = getLabelFieldsForLists(graphQLAPI.schema)[listKey];
-        let val = await graphQLAPI.run({
-          query: `query($ids: [ID!]!) {items:${
-            gqlNames(listKey).listQueryName
-          }(where: { id: { in: $ids } }) {${idFieldAlias}:id ${labelFieldAlias}:${labelField}\n${
-            selection || ''
-          }}}`,
-          variables: { ids },
-        });
-
-        return Array.isArray(val.items)
-          ? val.items.map(({ [labelFieldAlias]: label, [idFieldAlias]: id, ...data }) => {
-              return { id, label, data };
-            })
-          : [];
-      }
-      return [];
-    }
-    return fetchDataForOne(listKey, selection, data);
-  };
-
-  const fetchDataForOne = async (
-    listKey: string,
-    selection: string,
-    data: any
-  ): Promise<RelationshipData | null> => {
-    // Single related item
-    const id = data?.id;
-    if (id != null) {
-      const labelField = getLabelFieldsForLists(graphQLAPI.schema)[listKey];
-      // An exception here indicates something wrong with either the system or the
-      // configuration (e.g. a bad selection field). These will surface as system
-      // errors from the GraphQL field resolver.
-      const val = await graphQLAPI.run({
-        query: `query($id: ID!) {item:${
-          gqlNames(listKey).itemQueryName
-        }(where: {id:$id}) {${labelFieldAlias}:${labelField}\n${selection}}}`,
-        variables: { id },
-      });
-      if (val.item === null) {
-        if (!process.env.TEST_ADAPTER) {
-          // If we're unable to find the item (e.g. we have a dangling reference), or access was denied
-          // then simply return { id } and leave `label` and `data` undefined.
-          console.error(
-            `Unable to fetch relationship data: listKey: ${listKey}, many: false, selection: ${selection}, id: ${id} `
-          );
-        }
-        return { id, data: undefined, label: undefined };
-      }
-      return {
-        id,
-        label: val.item[labelFieldAlias],
-        data: (() => {
-          const { [labelFieldAlias]: _ignore, ...otherData } = val.item;
-          return otherData;
-        })(),
-      };
-    } else {
-      return null;
-    }
-  };
   return Promise.all(
     nodes.map(async (node): Promise<Descendant> => {
       if (node.type === 'relationship') {
@@ -96,6 +29,7 @@ export function addRelationshipData(
         return {
           ...node,
           data: await fetchDataForOne(
+            context,
             relationship.listKey,
             relationship.selection || '',
             node.data
@@ -110,20 +44,15 @@ export function addRelationshipData(
               { kind: 'object', value: componentBlock.props },
               node.props,
               (relationship, data) =>
-                fetchData(
+                fetchRelationshipData(
+                  context,
                   relationship.listKey,
                   relationship.many,
                   relationship.selection || '',
                   data
                 )
             ),
-            addRelationshipData(
-              node.children,
-              graphQLAPI,
-              relationships,
-              componentBlocks,
-              gqlNames
-            ),
+            addRelationshipData(node.children, context, relationships, componentBlocks),
           ]);
           return {
             ...node,
@@ -137,10 +66,9 @@ export function addRelationshipData(
           ...node,
           children: await addRelationshipData(
             node.children,
-            graphQLAPI,
+            context,
             relationships,
-            componentBlocks,
-            gqlNames
+            componentBlocks
           ),
         };
       }
@@ -149,7 +77,81 @@ export function addRelationshipData(
   );
 }
 
-async function addRelationshipDataToComponentProps(
+export async function fetchRelationshipData(
+  context: KeystoneContext,
+  listKey: string,
+  many: boolean,
+  selection: string,
+  data: any
+) {
+  if (many) {
+    const ids = Array.isArray(data) ? data.filter(item => item.id != null).map(x => x.id) : [];
+
+    if (ids.length) {
+      const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
+      let val = await context.graphql.run({
+        query: `query($ids: [ID!]!) {items:${
+          context.gqlNames(listKey).listQueryName
+        }(where: { id: { in: $ids } }) {${idFieldAlias}:id ${labelFieldAlias}:${labelField}\n${
+          selection || ''
+        }}}`,
+        variables: { ids },
+      });
+
+      return Array.isArray(val.items)
+        ? val.items.map(({ [labelFieldAlias]: label, [idFieldAlias]: id, ...data }) => {
+            return { id, label, data };
+          })
+        : [];
+    }
+    return [];
+  }
+  return fetchDataForOne(context, listKey, selection, data);
+}
+
+async function fetchDataForOne(
+  context: KeystoneContext,
+  listKey: string,
+  selection: string,
+  data: any
+): Promise<RelationshipData | null> {
+  // Single related item
+  const id = data?.id;
+  if (id != null) {
+    const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
+    // An exception here indicates something wrong with either the system or the
+    // configuration (e.g. a bad selection field). These will surface as system
+    // errors from the GraphQL field resolver.
+    const val = await context.graphql.run({
+      query: `query($id: ID!) {item:${
+        context.gqlNames(listKey).itemQueryName
+      }(where: {id:$id}) {${labelFieldAlias}:${labelField}\n${selection}}}`,
+      variables: { id },
+    });
+    if (val.item === null) {
+      if (!process.env.TEST_ADAPTER) {
+        // If we're unable to find the item (e.g. we have a dangling reference), or access was denied
+        // then simply return { id } and leave `label` and `data` undefined.
+        console.error(
+          `Unable to fetch relationship data: listKey: ${listKey}, many: false, selection: ${selection}, id: ${id} `
+        );
+      }
+      return { id, data: undefined, label: undefined };
+    }
+    return {
+      id,
+      label: val.item[labelFieldAlias],
+      data: (() => {
+        const { [labelFieldAlias]: _ignore, ...otherData } = val.item;
+        return otherData;
+      })(),
+    };
+  } else {
+    return null;
+  }
+}
+
+export async function addRelationshipDataToComponentProps(
   prop: ComponentPropField,
   val: any,
   fetchData: (relationship: RelationshipField<boolean>, data: any) => Promise<any>

From 27441d99623c1c84f872d15f543be67cc5fb12f2 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 10 Mar 2022 11:19:50 +1000
Subject: [PATCH 020/124] Update preview props API

---
 .../basic/admin/fieldViews/Blah.tsx           |   6 +-
 .../basic/admin/fieldViews/Content.tsx        |  60 +----
 .../DocumentEditor/component-blocks/api.tsx   | 254 ++++++++----------
 .../component-blocks/array-field.test.tsx     |   4 +-
 .../component-blocks/field-assertions.test.ts |   4 +-
 .../DocumentEditor/component-blocks/form.tsx  |  19 +-
 .../component-blocks/initial-values.ts        |  80 +++++-
 .../insertion-and-preview-props.test.tsx      |  46 ++--
 .../component-blocks/preview-props.ts         |  47 ++--
 .../DocumentEditor/component-blocks/utils.ts  |  18 +-
 .../DocumentEditor/primitives/sortable.tsx    |   7 +-
 11 files changed, 278 insertions(+), 267 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 93f75748c91..97d2d18b730 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -133,9 +133,11 @@ function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
           >
             <FormValueContentFromPreview props={props.element.value} />
           </AlertDialog>
-          <div>{props.element.value.label.value}</div>
+          <div>{props.element.value.fields.label.value}</div>
         </Stack>
-        {props.element.discriminant === 'group' && <Preview {...props.element.value.children} />}
+        {props.element.discriminant === 'group' && (
+          <Preview {...props.element.value.fields.children} />
+        )}
       </Stack>
     </SortableItem>
   );
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 00cfc60b484..6f660666f9c 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -25,52 +25,6 @@ const noticeIconMap = {
 };
 
 export const componentBlocks = {
-  // yellowBackgroundDivider: component({
-  //   component: () => <NotEditable>Yellow Divider</NotEditable>,
-  //   props: {},
-  //   label: 'Yellow Background Divider',
-  // }),
-  // button: component({
-  //   component: props => {
-  //     return <div>{props.content}</div>;
-  //   },
-  //   props: {
-  //     content: fields.child({ kind: 'inline', placeholder: 'Content' }),
-  //   },
-  //   label: 'Button',
-  // }),
-  // modalButton: component({
-  //   component: function ModalThing(props) {
-  //     const [isOpen, setIsOpen] = useState(false);
-  //     return (
-  //       <div>
-  //         {props.buttonContent}
-  //         <div>
-  //           <NotEditable>
-  //             <button
-  //               onClick={() => {
-  //                 setIsOpen(x => !x);
-  //               }}
-  //             >
-  //               Toggle Modal
-  //             </button>
-  //           </NotEditable>
-  //         </div>
-  //         <div style={{ display: isOpen ? 'block' : 'none' }}>
-  //           <NotEditable>
-  //             <h1>Modal Content</h1>
-  //           </NotEditable>
-  //           {props.modalContent}
-  //         </div>
-  //       </div>
-  //     );
-  //   },
-  //   props: {
-  //     buttonContent: fields.child({ kind: 'inline', placeholder: 'Content' }),
-  //     modalContent: fields.child({ kind: 'block', placeholder: 'Content' }),
-  //   },
-  //   label: 'Modal Button',
-  // }),
   thing: component({
     component: props => {
       return (
@@ -120,7 +74,7 @@ export const componentBlocks = {
                     {row.element.elements.map((column, i) => {
                       return (
                         <td key={i} css={{ border: '1px solid black' }}>
-                          {column.element.content}
+                          {column.element.fields.content}
                         </td>
                       );
                     })}
@@ -175,21 +129,21 @@ export const componentBlocks = {
       return (
         <div>
           <ul css={{ padding: 0 }}>
-            {children.elements.map((element, i) => (
+            {children.elements.map(element => (
               <li css={{ listStyle: 'none' }} key={element.id}>
                 <input
                   contentEditable="false"
                   css={{ marginRight: 8 }}
                   type="checkbox"
-                  checked={element.element.done.value}
-                  onChange={event => element.element.done.onChange(event.target.checked)}
+                  checked={element.element.fields.done.value}
+                  onChange={event => element.element.fields.done.onChange(event.target.checked)}
                 />
                 <span
                   style={{
-                    textDecoration: element.element.done.value ? 'line-through' : undefined,
+                    textDecoration: element.element.fields.done.value ? 'line-through' : undefined,
                   }}
                 >
-                  {element.element.content}
+                  {element.element.fields.content}
                 </span>
               </li>
             ))}
@@ -272,7 +226,7 @@ export const componentBlocks = {
                 padding: '12px 16px',
               }}
             >
-              {props.cta.value.text}
+              {props.cta.value.fields.text}
             </div>
           ) : null}
         </div>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 8d2b8b43e4d..f6b1052db1b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -13,8 +13,15 @@ import {
 import { HTMLAttributes, ReactElement, ReactNode, useState } from 'react';
 import { isValidURL } from '../isValidURL';
 
-// TODO: Value should be only json (especially not undefined)
-export type FormField<Value, Options> = {
+export type FormFieldValue =
+  | string
+  | number
+  | boolean
+  | null
+  | readonly FormFieldValue[]
+  | { [key: string]: FormFieldValue | undefined };
+
+export type FormField<Value extends FormFieldValue, Options> = {
   kind: 'form';
   Input(props: {
     value: Value;
@@ -47,7 +54,10 @@ export type FormField<Value, Options> = {
   preview?: PreviewComponent;
 };
 
-export type FormFieldWithGraphQLField<Value, Options> = FormField<Value, Options> & {
+export type FormFieldWithGraphQLField<Value extends FormFieldValue, Options> = FormField<
+  Value,
+  Options
+> & {
   graphql: {
     output: graphql.Field<
       { value: Value },
@@ -396,16 +406,16 @@ export const fields = {
       preview: preview as PreviewComponent,
     };
   },
-  empty(): FormField<undefined, undefined> {
+  empty(): FormField<null, undefined> {
     return {
       kind: 'form',
       Input() {
         return null;
       },
       options: undefined,
-      defaultValue: undefined,
+      defaultValue: null,
       validate(value) {
-        return value === undefined;
+        return value === null || value === undefined;
       },
     };
   },
@@ -556,111 +566,110 @@ export type ComponentBlock<
 
 type CastToComponentPropField<Prop> = Prop extends ComponentPropField ? Prop : never;
 
-export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPropField> =
-  Prop extends ChildField
-    ? ReactNode
-    : Prop extends FormField<infer Value, infer Options>
-    ? {
-        readonly value: Value;
-        onChange(value: Value): void;
-        readonly options: Options;
+export type ExtractPropFromComponentPropField<
+  Prop extends ComponentPropField,
+  ChildFieldType
+> = Prop extends ChildField
+  ? ChildFieldType
+  : Prop extends FormField<infer Value, infer Options>
+  ? {
+      readonly value: Value;
+      onChange(value: Value): void;
+      readonly options: Options;
+      readonly field: Prop;
+    }
+  : Prop extends ObjectField<infer Value>
+  ? {
+      readonly fields: {
+        readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]>;
+      };
+      onChange(value: {
+        readonly [Key in keyof Value]?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
+          Value[Key]
+        >;
+      }): void;
+      readonly field: Prop;
+    }
+  : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+  ? {
+      readonly [Key in keyof Values]: {
+        readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+        onChange<Discriminant extends DiscriminantField['defaultValue']>(
+          discriminant: Discriminant,
+          value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
+            GetFromKey<Values, DiscrimiantToString<Discriminant>>
+          >
+        ): void;
+        readonly options: DiscriminantField['options'];
+        readonly value: ExtractPropFromComponentPropFieldForPreview<
+          CastToComponentPropField<Values[Key]>
+        >;
         readonly field: Prop;
-      }
-    : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]> }
-    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
-    ? {
-        readonly [Key in keyof Values]: {
-          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          onChange(discriminant: DiscriminantField['defaultValue']): void;
-          readonly options: DiscriminantField['options'];
-          readonly value: ExtractPropFromComponentPropFieldForPreview<
-            CastToComponentPropField<Values[Key]>
-          >;
-          field: Prop;
-        };
-      }[keyof Values]
-    : Prop extends RelationshipField<infer Many>
-    ? {
-        readonly value: Many extends true
+      };
+    }[keyof Values]
+  : Prop extends RelationshipField<infer Many>
+  ? {
+      readonly value: Many extends true
+        ? readonly HydratedRelationshipData[]
+        : HydratedRelationshipData | null;
+      onChange(
+        relationshipData: Many extends true
           ? readonly HydratedRelationshipData[]
-          : HydratedRelationshipData | null;
-        onChange(
-          relationshipData: Many extends true
-            ? readonly HydratedRelationshipData[]
-            : HydratedRelationshipData | null
-        ): void;
-        field: Prop;
-      }
-    : Prop extends ArrayField<infer ElementField>
-    ? {
-        elements: {
-          id: string;
-          element: ExtractPropFromComponentPropFieldForPreview<ElementField>;
-        }[];
-        onMove: (from: number, to: number) => void;
-        onInsert: (
-          initial?: InitialValueForComponentPropField<ElementField>,
-          index?: number
-        ) => void;
-        onRemove: (index: number) => void;
-        field: Prop;
-      }
-    : never;
+          : HydratedRelationshipData | null
+      ): void;
+      readonly field: Prop;
+    }
+  : Prop extends ArrayField<infer ElementField>
+  ? {
+      readonly elements: readonly {
+        id: string;
+        element: ExtractPropFromComponentPropFieldForPreview<ElementField>;
+      }[];
+      readonly onChange: (
+        value: readonly {
+          id: string | undefined;
+          value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>;
+        }[]
+      ) => void;
+      readonly onMove: (from: number, to: number) => void;
+      readonly onInsert: (
+        initial?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>,
+        index?: number
+      ) => void;
+      readonly onRemove: (index: number) => void;
+      readonly field: Prop;
+    }
+  : never;
 
-export type ExtractPropFromComponentPropFieldFord<Prop extends ComponentPropField> =
+export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPropField> =
+  ExtractPropFromComponentPropField<Prop, ReactNode>;
+
+type GetFromKey<Obj, Key> = Key extends keyof Obj ? Obj[Key] : never;
+
+type DiscrimiantToString<Discriminant extends string | boolean> = Discriminant extends true
+  ? 'true'
+  : Discriminant extends false
+  ? 'false'
+  : Discriminant;
+
+export type ExtractPropFromComponentPropFieldForInitialOrUpdate<Prop extends ComponentPropField> =
   Prop extends ChildField
     ? undefined
     : Prop extends FormField<infer Value, any>
     ? Value | undefined
     : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]?: ExtractPropFromComponentPropFieldFord<Value[Key]> }
-    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
-    ? {
-        readonly [Key in keyof Values]: {
-          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          readonly value?: ExtractPropFromComponentPropFieldFord<
-            CastToComponentPropField<Values[Key]>
-          >;
-        };
-      }[keyof Values]
-    : Prop extends RelationshipField<infer Many>
-    ? Many extends true
-      ? readonly HydratedRelationshipData[]
-      : HydratedRelationshipData | null
-    : Prop extends ArrayField<infer ElementField>
     ? {
-        operations: ArrayFieldUpdater<ElementField> | ArrayFieldUpdater<ElementField>[];
-        value: { key: string; value: ExtractPropFromComponentPropFieldFord<ElementField> }[];
+        readonly [Key in keyof Value]?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
+          Value[Key]
+        >;
       }
-    : never;
-
-type ArrayFieldUpdater<ElementField extends ComponentPropField> =
-  | {
-      kind: 'update';
-      index: number;
-      value: ExtractPropFromComponentPropFieldFord<ElementField>;
-    }
-  | { kind: 'move'; from: number; to: number }
-  | {
-      kind: 'insert';
-      index?: number;
-      value: InitialValueForComponentPropField<ElementField>;
-    }
-  | { kind: 'remove'; index: number };
-
-export type InitialValueForComponentPropField<Prop extends ComponentPropField> =
-  Prop extends ChildField
-    ? null
-    : Prop extends FormField<infer Value, any>
-    ? Value
-    : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]?: InitialValueForComponentPropField<Value[Key]> }
     : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
         readonly [Key in keyof Values]: {
           readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          readonly value?: InitialValueForComponentPropField<CastToComponentPropField<Values[Key]>>;
+          readonly value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
+            CastToComponentPropField<Values[Key]>
+          >;
         };
       }[keyof Values]
     : Prop extends RelationshipField<infer Many>
@@ -668,17 +677,10 @@ export type InitialValueForComponentPropField<Prop extends ComponentPropField> =
       ? readonly HydratedRelationshipData[]
       : HydratedRelationshipData | null
     : Prop extends ArrayField<infer ElementField>
-    ?
-        | {
-            kind: 'insert';
-            index?: number;
-            value: InitialValueForComponentPropField<ElementField>;
-          }
-        | {
-            kind: 'insert';
-            index?: number;
-            value: InitialValueForComponentPropField<ElementField>;
-          }[]
+    ? readonly {
+        id: string | undefined;
+        value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>;
+      }[]
     : never;
 
 type DiscriminantStringToDiscriminantValue<
@@ -692,40 +694,8 @@ type DiscriminantStringToDiscriminantValue<
     : never
   : DiscriminantString;
 
-type ExtractPropFromComponentPropFieldForToolbar<Prop extends ComponentPropField> =
-  Prop extends ChildField
-    ? undefined
-    : Prop extends FormField<infer Value, infer Options>
-    ? { readonly value: Value; onChange(value: Value): void; readonly options: Options }
-    : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForToolbar<Value[Key]> }
-    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
-    ? {
-        readonly [Key in keyof Values]: {
-          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          onChange(discriminant: DiscriminantField['defaultValue']): void;
-          readonly options: DiscriminantField['options'];
-          readonly value: ExtractPropFromComponentPropFieldForToolbar<
-            CastToComponentPropField<Values[Key]>
-          >;
-        };
-      }[keyof Values]
-    : Prop extends RelationshipField<infer Many>
-    ? Many extends true
-      ? {
-          readonly value: readonly HydratedRelationshipData[];
-          onChange(relationshipData: readonly HydratedRelationshipData[]): void;
-        }
-      : {
-          readonly value: HydratedRelationshipData | null;
-          onChange(relationshipData: HydratedRelationshipData | null): void;
-        }
-    : Prop extends ArrayField<infer ElementField>
-    ? {
-        readonly elements: readonly ExtractPropFromComponentPropFieldForToolbar<ElementField>[];
-        insert(): void;
-      }
-    : never;
+export type ExtractPropFromComponentPropFieldForToolbar<Prop extends ComponentPropField> =
+  ExtractPropFromComponentPropField<Prop, undefined>;
 
 export type HydratedRelationshipData = {
   id: string;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 5f74c3fbd24..a13dc1ed611 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -14,7 +14,7 @@ const table = component({
       null,
       props.children.elements.map(x => {
         return x.element.elements.map(x => {
-          return x.element.content;
+          return x.element.fields.content;
         });
       })
     ),
@@ -285,7 +285,7 @@ test('add to multiple in child field in nested array', () => {
     editor,
     editor.children[0] as any
   ) as any;
-  previewProps.children.elements[0].element.onInsert();
+  previewProps.fields.children.elements[0].element.onInsert();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
index 4b571eb7bcc..5a618b96afe 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
@@ -57,7 +57,7 @@ test('does not allow a circular object within a value for a non-default discrimi
 test("does allow a circular conditional as long as it's not the default", () => {
   type Field = ConditionalField<
     typeof discriminant,
-    { true: Field; false: FormField<undefined, undefined> }
+    { true: Field; false: FormField<null, undefined> }
   >;
   const conditional: Field = fields.conditional(discriminant, {
     get true() {
@@ -71,7 +71,7 @@ test("does allow a circular conditional as long as it's not the default", () =>
 test("does not allow a circular conditional if it's the default", () => {
   type Field = ConditionalField<
     typeof discriminant,
-    { false: Field; true: FormField<undefined, undefined> }
+    { false: Field; true: FormField<null, undefined> }
   >;
   const conditional: Field = fields.conditional(discriminant, {
     get false() {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
index ed1b1b42d47..e417c583877 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
@@ -5,10 +5,11 @@ import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import React, { memo, ReactElement, useCallback, useMemo, useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { ComponentPropField, RelationshipData } from '../../component-blocks';
-import { assertNever, getPropsForConditionalChange, PropPath, ReadonlyPropPath } from './utils';
+import { assertNever, PropPath, ReadonlyPropPath } from './utils';
 import { ArrayFormValueContent } from './array-form-value';
-import { FormField, PreviewProps, RelationshipField } from './api';
+import { ConditionalField, FormField, PreviewProps, RelationshipField } from './api';
 import { getPreviewPropsForProp } from './preview-props';
+import { getInitialPropsValue } from './initial-values';
 
 export function RelationshipFormInput({
   prop,
@@ -83,6 +84,20 @@ type GeneralValuesForFields = {
   conditional: { discriminant: string | boolean; value: unknown };
 };
 
+function getPropsForConditionalChange(
+  newValue: { discriminant: string | boolean; value: any },
+  oldValue: { discriminant: string | boolean; value: any },
+  prop: ConditionalField<any, any>
+) {
+  if (newValue.discriminant !== oldValue.discriminant) {
+    return {
+      discriminant: newValue.discriminant,
+      value: getInitialPropsValue(prop.values[newValue.discriminant.toString()]),
+    };
+  } else {
+    return newValue;
+  }
+}
 const fieldRenderers: {
   [Key in ComponentPropField['kind']]: (
     props: ComponentFieldProps<Extract<ComponentPropField, { kind: Key }>>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 2f348a909a3..34c9b860fbf 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -1,4 +1,9 @@
 import { ComponentPropField, ComponentBlock } from '../../component-blocks';
+import {
+  getElementIdsForArrayValue,
+  getNewArrayElementId,
+  setElementIdsForArrayValue,
+} from './preview-props';
 import { assertNever, findChildPropPaths } from './utils';
 
 export function getInitialValue(type: string, componentBlock: ComponentBlock) {
@@ -81,10 +86,81 @@ export function getInitialPropsValueFromInitializer(
       return obj;
     }
     case 'array': {
-      return ((initializer ?? []) as unknown[]).map(x =>
-        getInitialPropsValueFromInitializer(prop.element, x)
+      return ((initializer ?? []) as { value?: unknown }[]).map(x =>
+        getInitialPropsValueFromInitializer(prop.element, x.value)
       );
     }
   }
   assertNever(prop);
 }
+
+export function updateValue(prop: ComponentPropField, currentValue: any, updater: any): any {
+  if (updater === undefined) {
+    return currentValue;
+  }
+  switch (prop.kind) {
+    case 'relationship':
+    case 'form':
+      return updater;
+    case 'child':
+      return null;
+    case 'conditional': {
+      return {
+        discriminant: updater.discriminant,
+        value: updateValue(
+          prop.values[updater.discriminant.toString()],
+          currentValue.value,
+          updater.value
+        ),
+      };
+    }
+    case 'object': {
+      let obj: Record<string, any> = {};
+      Object.keys(prop.value).forEach(key => {
+        obj[key] = updateValue(prop.value[key], currentValue[key], updater[key]);
+      });
+      return obj;
+    }
+    case 'array': {
+      const currentArrVal = currentValue as unknown[];
+      const newVal = updater as { id: string | undefined; value: unknown }[];
+      const uniqueKeys = new Set();
+      for (const x of newVal) {
+        if (x.id !== undefined) {
+          if (uniqueKeys.has(x.id)) {
+            throw new Error('Array elements must have unique ids');
+          }
+          uniqueKeys.add(x.id);
+        }
+      }
+      const keys = newVal.map(x => {
+        if (x.id !== undefined) {
+          return x.id;
+        }
+        let elementId = getNewArrayElementId();
+        // just in case someone gives an id that is above our counter
+        while (uniqueKeys.has(elementId)) {
+          elementId = getNewArrayElementId();
+        }
+        uniqueKeys.add(elementId);
+        return elementId;
+      });
+      const prevKeys = getElementIdsForArrayValue(currentArrVal);
+      const prevValuesByKey = new Map(
+        currentArrVal.map((value, i) => {
+          return [prevKeys[i], value];
+        })
+      );
+      const val = newVal.map((x, i) => {
+        const id = keys[i];
+        const prevVal = prevValuesByKey.has(id)
+          ? prevValuesByKey.get(id)
+          : getInitialPropsValue(prop.element);
+        return updateValue(prop.element, prevVal, x.value);
+      });
+      setElementIdsForArrayValue(val, keys);
+      return val;
+    }
+  }
+  assertNever(prop);
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index b5be87c8bd4..47ddb12a52d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -53,9 +53,9 @@ const componentBlocks = {
       return React.createElement(
         'div',
         null,
-        props.object.block,
-        props.object.inline,
-        props.object.conditional.discriminant && props.object.conditional.value
+        props.object.fields.block,
+        props.object.fields.inline,
+        props.object.fields.conditional.discriminant && props.object.fields.conditional.value
       );
     },
     label: 'Complex',
@@ -302,7 +302,7 @@ test('preview props conditional change', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  previewProps.object.conditional.onChange(true);
+  previewProps.object.fields.conditional.onChange(true);
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
@@ -374,7 +374,7 @@ test('preview props conditional change', () => {
       </paragraph>
     </editor>
   `);
-  expect(getPreviewProps(editor).object.conditional).toMatchInlineSnapshot(`
+  expect(getPreviewProps(editor).object.fields.conditional).toMatchInlineSnapshot(`
     Object {
       "discriminant": true,
       "onChange": [Function],
@@ -388,9 +388,9 @@ test('preview props form change', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  previewProps.object.select.onChange('b');
-  expect((editor.children[0] as any).props.object.select).toBe('b');
-  expect(getPreviewProps(editor).object.select.value).toBe('b');
+  previewProps.object.fields.select.onChange('b');
+  expect((editor.children[0] as any).props.object.fields.select).toBe('b');
+  expect(getPreviewProps(editor).object.fields.select.value).toBe('b');
 });
 
 test('relationship many change', () => {
@@ -398,9 +398,9 @@ test('relationship many change', () => {
 
   let previewProps = getPreviewProps(editor);
   const val = [{ data: {}, id: 'some-id', label: 'some-id' }];
-  previewProps.object.many.onChange(val);
-  expect((editor.children[0] as any).props.object.many).toEqual(val);
-  expect(getPreviewProps(editor).object.many.value).toEqual(val);
+  previewProps.object.fields.many.onChange(val);
+  expect((editor.children[0] as any).props.object.fields.many).toEqual(val);
+  expect(getPreviewProps(editor).object.fields.many.value).toEqual(val);
 });
 
 function assert(condition: boolean): asserts condition {
@@ -413,27 +413,27 @@ test('relationship single change', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.object.conditional.discriminant === false);
+  assert(previewProps.object.fields.conditional.discriminant === false);
   const val = { data: {}, id: 'some-id', label: 'some-id' };
-  previewProps.object.conditional.value.onChange(val);
-  expect((editor.children[0] as any).props.object.conditional.value).toEqual(val);
-  expect((getPreviewProps(editor).object.conditional.value as any).value).toEqual(val);
+  previewProps.object.fields.conditional.value.onChange(val);
+  expect((editor.children[0] as any).props.object.fields.conditional.value).toEqual(val);
+  expect((getPreviewProps(editor).object.fields.conditional.value as any).value).toEqual(val);
 });
 
 test('changing conditional with form inside', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.object.conditional.discriminant === false);
-  previewProps.object.conditionalSelect.onChange('b');
+  assert(previewProps.object.fields.conditional.discriminant === false);
+  previewProps.object.fields.conditionalSelect.onChange('b');
 
-  expect((editor.children[0] as any).props.object.conditionalSelect).toMatchInlineSnapshot(`
+  expect((editor.children[0] as any).props.object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "b",
       "value": "B",
     }
   `);
-  expect(getPreviewProps(editor).object.conditionalSelect).toMatchInlineSnapshot(`
+  expect(getPreviewProps(editor).object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "b",
       "onChange": [Function],
@@ -460,16 +460,16 @@ test('changing form inside conditional', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.object.conditional.discriminant === false);
-  previewProps.object.conditionalSelect.value.onChange('Some content');
+  assert(previewProps.object.fields.conditional.discriminant === false);
+  previewProps.object.fields.conditionalSelect.value.onChange('Some content');
 
-  expect((editor.children[0] as any).props.object.conditionalSelect).toMatchInlineSnapshot(`
+  expect((editor.children[0] as any).props.object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "a",
       "value": "Some content",
     }
   `);
-  expect(getPreviewProps(editor).object.conditionalSelect).toMatchInlineSnapshot(`
+  expect(getPreviewProps(editor).object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "a",
       "onChange": [Function],
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
index 49b657b20b3..79d717fa65c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
@@ -9,7 +9,6 @@ import {
   assertNever,
   findChildPropPathsForProp,
   getFieldAtPropPath,
-  getPropsForConditionalChange,
   ReadonlyPropPath,
   transformProps,
 } from './utils';
@@ -18,10 +17,16 @@ import {
   ComponentPropField,
   ConditionalField,
   FormField,
+  FormFieldValue,
+  ObjectField,
   PreviewProps,
   RelationshipField,
 } from './api';
-import { getInitialPropsValue, getInitialPropsValueFromInitializer } from './initial-values';
+import {
+  getInitialPropsValue,
+  getInitialPropsValueFromInitializer,
+  updateValue,
+} from './initial-values';
 
 export const objectFieldSymbol = Symbol('object field');
 
@@ -58,10 +63,10 @@ export function getPreviewPropsForProp(
 ): any {
   switch (prop.kind) {
     case 'form':
-      const props: PreviewProps<FormField<unknown, unknown>> = {
-        value,
+      const props: PreviewProps<FormField<FormFieldValue, unknown>> = {
+        value: value as FormFieldValue,
         onChange(newValue: any) {
-          onFormPropsChange(newValue);
+          onFormPropsChange(newValue === undefined ? value : newValue);
         },
         options: prop.options,
         field: prop,
@@ -70,11 +75,9 @@ export function getPreviewPropsForProp(
     case 'child':
       return common.childrenByPath[JSON.stringify(path)];
     case 'object': {
-      const previewProps: Record<string, any> = {
-        [objectFieldSymbol]: prop,
-      };
+      const fields: Record<string, any> = {};
       Object.keys(prop.value).forEach(key => {
-        previewProps[key] = getPreviewPropsForProp(
+        fields[key] = getPreviewPropsForProp(
           prop.value[key],
           (value as any)[key],
           path.concat(key),
@@ -84,6 +87,13 @@ export function getPreviewPropsForProp(
           common
         );
       });
+      const previewProps: PreviewProps<ObjectField<Record<string, ComponentPropField>>> = {
+        fields,
+        onChange(updater) {
+          onFormPropsChange(updateValue(prop, value, updater));
+        },
+        field: prop,
+      };
       return previewProps;
     }
     case 'relationship': {
@@ -105,14 +115,8 @@ export function getPreviewPropsForProp(
         >
       > = {
         discriminant: (value as any).discriminant,
-        onChange(newDiscriminant: any) {
-          onFormPropsChange(
-            getPropsForConditionalChange(
-              { discriminant: newDiscriminant, value: conditionalValue.value },
-              conditionalValue,
-              prop
-            )
-          );
+        onChange(discriminant, value) {
+          onFormPropsChange(updateValue(prop, value, { discriminant, value }));
         },
         options: prop.discriminant.options,
         value: getPreviewPropsForProp(
@@ -142,7 +146,7 @@ export function getPreviewPropsForProp(
             val,
             path.concat(i),
             val => {
-              const newValue = [...(value as unknown[])];
+              const newValue = [...arrayValue];
               newValue[i] = val;
               setElementIdsForArrayValue(newValue, keys);
               onFormPropsChange(newValue);
@@ -163,12 +167,15 @@ export function getPreviewPropsForProp(
           onFormPropsChange(newValue);
         },
         onMove(from, to) {
-          const newValue = arrayMove(value as unknown[], from, to);
+          const newValue = arrayMove(arrayValue, from, to);
           setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
           onFormPropsChange(newValue);
         },
+        onChange(updater) {
+          onFormPropsChange(updateValue(prop, value, updater));
+        },
         onRemove(index) {
-          const newValue = (value as unknown[]).filter((_, i) => i !== index);
+          const newValue = arrayValue.filter((_, i) => i !== index);
           setElementIdsForArrayValue(
             newValue,
             keys.filter((_, i) => i !== index)
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index a7a9162520c..9a54b699228 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -1,9 +1,8 @@
-import { ComponentPropField, ConditionalField } from '../../component-blocks';
+import { ComponentPropField } from '../../component-blocks';
 import { DocumentFeatures } from '../../views';
 import { DocumentFeaturesForNormalization } from '../document-features-normalization';
 import { Mark } from '../utils';
 import { ChildField } from './api';
-import { getInitialPropsValue } from './initial-values';
 import { getElementIdsForArrayValue, setElementIdsForArrayValue } from './preview-props';
 
 type PathToChildFieldWithOption = { path: ReadonlyPropPath; options: ChildField['options'] };
@@ -62,21 +61,6 @@ export function assertNever(arg: never): never {
   throw new Error('expected to never be called but received: ' + JSON.stringify(arg));
 }
 
-export function getPropsForConditionalChange(
-  newValue: { discriminant: string | boolean; value: any },
-  oldValue: { discriminant: string | boolean; value: any },
-  prop: ConditionalField<any, any>
-) {
-  if (newValue.discriminant !== oldValue.discriminant) {
-    return {
-      discriminant: newValue.discriminant,
-      value: getInitialPropsValue(prop.values[newValue.discriminant.toString()]),
-    };
-  } else {
-    return newValue;
-  }
-}
-
 export type DocumentFeaturesForChildField =
   | {
       kind: 'inline';
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index 5980417f522..752d90313f6 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -27,7 +27,7 @@ const RemoveContext = createContext<null | ((index: number) => void)>(null);
 export function SortableList(props: {
   onMove: (index: number, newIndex: number) => void;
   onRemove: (index: number) => void;
-  elements: ({ id: string } | string)[];
+  elements: readonly ({ id: string } | string)[];
   children: ReactNode;
 }) {
   const sensors = useSensors(
@@ -55,7 +55,10 @@ export function SortableList(props: {
           }
         }}
       >
-        <SortableContext items={props.elements} strategy={verticalListSortingStrategy}>
+        <SortableContext
+          items={props.elements as (string | { id: string })[]}
+          strategy={verticalListSortingStrategy}
+        >
           <ul
             css={{
               isolation: 'isolate',

From 46d4483ccdd48f8ae6b1bdae862a13078e24e09c Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 10 Mar 2022 16:45:19 +1000
Subject: [PATCH 021/124] Progress on always using preview props to render the
 form

---
 docs/components/docs/DocumentEditorDemo.tsx   |  17 +-
 .../basic/admin/fieldViews/Blah.tsx           |   2 +-
 .../basic/admin/fieldViews/Content.tsx        |  58 +--
 examples-staging/basic/package.json           |   1 +
 .../DocumentEditor/component-blocks/api.tsx   |   6 +-
 .../component-blocks/array-field.test.tsx     |  19 +-
 .../component-blocks/array-form-value.tsx     | 115 -----
 .../component-blocks/edit-mode.tsx            |  37 ++
 .../component-blocks/form-from-preview.tsx    | 190 +++++---
 .../DocumentEditor/component-blocks/form.tsx  | 383 ----------------
 .../DocumentEditor/component-blocks/index.tsx | 109 +++--
 .../insertion-and-preview-props.test.tsx      |  67 ++-
 .../component-blocks/preview-props.ts         | 279 ------------
 .../component-blocks/preview-props.tsx        | 408 ++++++++++++++++++
 .../with-component-blocks.tsx                 |   1 -
 .../markdown-link-shortcut.test.tsx           |   4 +-
 .../DocumentEditor/primitives/sortable.tsx    |   1 -
 .../src/component-views/index.tsx             |  61 +--
 18 files changed, 717 insertions(+), 1041 deletions(-)
 delete mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
 delete mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
 delete mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx

diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index 06ac5328a48..26b6f37061c 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -1,7 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { getInitialPropsValue } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/initial-values';
-import { FormValueContent } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form';
 import { useKeyDownRef } from '@keystone-6/fields-document/src/DocumentEditor/soft-breaks';
 import React, { ReactNode, useContext, useEffect, useMemo, useState } from 'react';
 import { Toolbar } from '@keystone-6/fields-document/src/DocumentEditor/Toolbar';
@@ -19,6 +18,8 @@ import {
 } from '@keystone-6/fields-document/component-blocks';
 import { Global, jsx } from '@emotion/react';
 
+import { FormValueContentFromPreview } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
+import { createGetPreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/preview-props';
 import { componentBlocks as componentBlocksInExampleProject } from '../../../examples-staging/basic/admin/fieldViews/Content';
 import { initialContent } from '../../lib/initialDocumentDemoContent';
 import { Code } from '../primitives/Code';
@@ -259,16 +260,10 @@ export function DocumentFeaturesFormAndCode() {
   const { formValue, setFormValue } = useContext(DocumentFeaturesContext);
   return (
     <div>
-      <FormValueContent
-        prop={documentFeaturesProp}
-        forceValidation={false}
-        path={[]}
-        stringifiedPropPathToAutoFocus=""
-        value={formValue}
-        onChange={getNewVal => {
-          setFormValue((getNewVal as any)(formValue));
-        }}
-        onAddArrayItem={() => {}}
+      <FormValueContentFromPreview
+        {...createGetPreviewProps(documentFeaturesProp, getNewVal => {
+          setFormValue(getNewVal(formValue));
+        })(formValue)}
       />
     </div>
   );
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 97d2d18b730..57eb80a3fd2 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -131,7 +131,7 @@ function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
             }}
             isOpen={isEditing}
           >
-            <FormValueContentFromPreview props={props.element.value} />
+            <FormValueContentFromPreview {...props.element.value} />
           </AlertDialog>
           <div>{props.element.value.fields.label.value}</div>
         </Stack>
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 6f660666f9c..41caefe0432 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -29,11 +29,11 @@ export const componentBlocks = {
     component: props => {
       return (
         <div>
-          <h1>{props.heading}</h1>
+          <h1>{props.fields.heading}</h1>
           <NotEditable>
-            <h1>{props.icon.value}</h1>
+            <h1>{props.fields.icon.value}</h1>
           </NotEditable>
-          <div>{props.content}</div>
+          <div>{props.fields.content}</div>
         </div>
       );
     },
@@ -49,7 +49,7 @@ export const componentBlocks = {
     label: 'thing',
   }),
   table: component({
-    component: function MyTable({ rows }) {
+    component: function MyTable(props) {
       // useEffect(() => {
       //   let maxColumns = 1;
       //   for (const row of rows.elements) {
@@ -68,7 +68,7 @@ export const componentBlocks = {
         <div>
           <table css={{ width: '100%' }}>
             <tbody>
-              {rows.elements.map((row, i) => {
+              {props.fields.rows.elements.map((row, i) => {
                 return (
                   <tr key={i} css={{ border: '1px solid black' }}>
                     {row.element.elements.map((column, i) => {
@@ -95,7 +95,7 @@ export const componentBlocks = {
           <NotEditable>
             <div
               onClick={() => {
-                rows.onInsert();
+                props.fields.rows.onInsert();
               }}
             >
               <Button>Insert row</Button>
@@ -120,16 +120,16 @@ export const componentBlocks = {
     },
   }),
   myList: component({
-    component: function MyList({ children }) {
+    component: function MyList(props) {
       useEffect(() => {
-        if (!children.elements.length) {
-          children.onInsert();
+        if (!props.fields.children.elements.length) {
+          props.fields.children.onInsert();
         }
       });
       return (
         <div>
           <ul css={{ padding: 0 }}>
-            {children.elements.map(element => (
+            {props.fields.children.elements.map(element => (
               <li css={{ listStyle: 'none' }} key={element.id}>
                 <input
                   contentEditable="false"
@@ -151,7 +151,7 @@ export const componentBlocks = {
           <NotEditable>
             <Button
               onClick={() => {
-                children.onInsert();
+                props.fields.children.onInsert();
               }}
             >
               Add
@@ -177,7 +177,7 @@ export const componentBlocks = {
         <div
           css={{
             backgroundColor: 'white',
-            backgroundImage: `url(${props.imageSrc.value})`,
+            backgroundImage: `url(${props.fields.imageSrc.value})`,
             backgroundPosition: 'center',
             backgroundSize: 'cover',
             display: 'flex',
@@ -199,7 +199,7 @@ export const componentBlocks = {
               textShadow: '0px 1px 3px black',
             }}
           >
-            {props.title}
+            {props.fields.title}
           </div>
           <div
             css={{
@@ -211,9 +211,9 @@ export const componentBlocks = {
               textShadow: '0px 1px 3px black',
             }}
           >
-            {props.content}
+            {props.fields.content}
           </div>
-          {props.cta.discriminant ? (
+          {props.fields.cta.discriminant ? (
             <div
               css={{
                 backgroundColor: '#F9BF12',
@@ -226,7 +226,7 @@ export const componentBlocks = {
                 padding: '12px 16px',
               }}
             >
-              {props.cta.value.fields.text}
+              {props.fields.cta.value.fields.text}
             </div>
           ) : null}
         </div>
@@ -251,13 +251,17 @@ export const componentBlocks = {
   }),
   void: component({
     label: 'Void',
-    component: ({ value }) => <NotEditable>{value.value}</NotEditable>,
+    component: props => <NotEditable>{props.fields.value.value}</NotEditable>,
     props: { value: fields.text({ label: 'Value' }) },
   }),
   conditionallyVoid: component({
     label: 'Conditionally Void',
-    component: ({ something }) =>
-      something.discriminant ? <NotEditable>Is void</NotEditable> : <div>{something.value}</div>,
+    component: props =>
+      props.fields.something.discriminant ? (
+        <NotEditable>Is void</NotEditable>
+      ) : (
+        <div>{props.fields.something.value}</div>
+      ),
     props: {
       something: fields.conditional(fields.checkbox({ label: 'Is void' }), {
         false: fields.child({ kind: 'inline', placeholder: '...' }),
@@ -270,10 +274,10 @@ export const componentBlocks = {
     component: props => {
       return (
         <div>
-          <h1>{props.title}</h1>
+          <h1>{props.fields.title}</h1>
           <NotEditable>
             <ul>
-              {props.authors.value.map((author, i) => {
+              {props.fields.authors.value.map((author, i) => {
                 return (
                   <li key={i}>
                     {author.label}
@@ -301,7 +305,7 @@ export const componentBlocks = {
     },
   }),
   notice: component({
-    component: function Notice({ content, intent }) {
+    component: function Notice(props) {
       const { palette, radii, spacing } = useTheme();
       const intentMap = {
         info: {
@@ -325,7 +329,7 @@ export const componentBlocks = {
           icon: noticeIconMap.success,
         },
       };
-      const intentConfig = intentMap[intent.value];
+      const intentConfig = intentMap[props.fields.intent.value];
 
       return (
         <div
@@ -350,7 +354,7 @@ export const componentBlocks = {
               <intentConfig.icon />
             </div>
           </NotEditable>
-          <div css={{ flex: 1 }}>{content}</div>
+          <div css={{ flex: 1 }}>{props.fields.content}</div>
         </div>
       );
     },
@@ -413,7 +417,7 @@ export const componentBlocks = {
     },
   }),
   quote: component({
-    component: ({ attribution, content }) => {
+    component: props => {
       return (
         <div
           css={{
@@ -431,10 +435,10 @@ export const componentBlocks = {
             },
           }}
         >
-          <div css={{ fontStyle: 'italic', color: '#4A5568' }}>{content}</div>
+          <div css={{ fontStyle: 'italic', color: '#4A5568' }}>{props.fields.content}</div>
           <div css={{ fontWeight: 'bold', color: '#47546b' }}>
             <NotEditable>— </NotEditable>
-            {attribution}
+            {props.fields.attribution}
           </div>
         </div>
       );
diff --git a/examples-staging/basic/package.json b/examples-staging/basic/package.json
index 88cfc140821..29ec77f6f56 100644
--- a/examples-staging/basic/package.json
+++ b/examples-staging/basic/package.json
@@ -18,6 +18,7 @@
     "@keystone-ui/core": "^4.0.0",
     "@keystone-ui/fields": "^6.0.0",
     "@keystone-ui/icons": "^5.0.0",
+    "@keystone-ui/modals": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
     "@types/react": "^17.0.37",
     "graphql": "^15.8.0",
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index f6b1052db1b..7b3d3bbf44a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -162,7 +162,7 @@ export type ConditionalField<
 
 type PreviewComponent = (props: unknown) => ReactElement | null;
 type TypedPreviewComponent<Field extends ComponentPropField> = (
-  props: PreviewProps<Field>
+  props: PreviewProps<Field> & { autoFocus?: boolean }
 ) => ReactElement | null;
 
 export type ComponentPropField =
@@ -716,9 +716,7 @@ export function component<
 >(
   options: {
     /** The preview component shown in the editor */
-    component: (props: {
-      [Key in keyof PropsOption]: ExtractPropFromComponentPropFieldForPreview<PropsOption[Key]>;
-    }) => ReactElement | null;
+    component: (props: PreviewProps<ObjectField<PropsOption>>) => ReactElement | null;
     /** The props that the preview component, toolbar and rendered component will receive */
     props: PropsOption;
     /** The label to show in the insert menu and chrome around the block if chromeless is false */
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index a13dc1ed611..3ca7ca45355 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -4,15 +4,14 @@
 import React from 'react';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
-import { createPreviewProps } from './preview-props';
-import { ExtractPropFromComponentPropFieldForPreview } from './api';
+import { createGetPreviewProps } from './preview-props';
 
 const table = component({
   component: props =>
     React.createElement(
       'div',
       null,
-      props.children.elements.map(x => {
+      props.fields.children.elements.map(x => {
         return x.element.elements.map(x => {
           return x.element.fields.content;
         });
@@ -274,17 +273,9 @@ test('add to multiple in child field in nested array', () => {
       },
     }
   );
-  const previewProps: ExtractPropFromComponentPropFieldForPreview<{
-    kind: 'object';
-    value: typeof table['props'];
-  }> = createPreviewProps(
-    editor.children[0] as any,
-    table,
-    {},
-    () => {},
-    editor,
-    editor.children[0] as any
-  ) as any;
+  const previewProps = createGetPreviewProps({ kind: 'object', value: table.props }, () => {})(
+    (editor.children[0] as any).props
+  );
   previewProps.fields.children.elements[0].element.onInsert();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
deleted file mode 100644
index 578e8b36b6e..00000000000
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-form-value.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx, Stack } from '@keystone-ui/core';
-import { Button } from '@keystone-ui/button';
-import { arrayMove } from '@dnd-kit/sortable';
-import { memo, useMemo } from 'react';
-import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
-import { getInitialPropsValue } from './initial-values';
-import { ArrayField, ComponentPropField } from './api';
-import { CommonComponentFieldProps, ComponentFieldProps, FormValueContent } from './form';
-import { ReadonlyPropPath } from './utils';
-import {
-  getElementIdsForArrayValue,
-  getNewArrayElementId,
-  setElementIdsForArrayValue,
-} from './preview-props';
-
-export function ArrayFormValueContent({
-  prop,
-  path,
-  value,
-  onChange,
-  common,
-}: ComponentFieldProps<ArrayField<ComponentPropField>>) {
-  const { length } = value;
-  // this is not ideal since every item will re-render after adding a new item
-  // and many will re-render after a re-order
-  // but it does mean not every item will be re-rendered for changes within an item
-  // which is the most performance-sensitive case since it'll be for an input or etc.
-  const memoizedPropsForItems = useMemo(() => {
-    return Array.from({ length }).map((_, i) => {
-      return {
-        onChange: (cb: (val: any) => any) => {
-          onChange(value => {
-            const newValue = [...value];
-            newValue[i] = cb(newValue[i]);
-            setElementIdsForArrayValue(newValue, getElementIdsForArrayValue(value));
-            return newValue;
-          });
-        },
-        path: path.concat(i),
-      };
-    });
-  }, [length, onChange, path]);
-  const elementIds = getElementIdsForArrayValue(value);
-  return (
-    <Stack gap="medium">
-      <SortableList
-        elements={elementIds}
-        onMove={(from, to) => {
-          onChange(value => {
-            const newValue = arrayMove(value as any[], from, to);
-            setElementIdsForArrayValue(newValue, arrayMove(elementIds, from, to));
-            return newValue;
-          });
-        }}
-        onRemove={index => {
-          onChange(value => {
-            const newValue = [...value];
-            newValue.splice(index, 1);
-            const newKeys = [...getElementIdsForArrayValue(value)];
-            newKeys.splice(index, 1);
-            setElementIdsForArrayValue(newValue, newKeys);
-            return newValue;
-          });
-        }}
-      >
-        {value.map((val, i) => {
-          return (
-            <SortableItemInForm
-              key={elementIds[i]}
-              id={elementIds[i]}
-              common={common}
-              prop={prop.element}
-              value={val}
-              {...memoizedPropsForItems[i]}
-            />
-          );
-        })}
-      </SortableList>
-      <Button
-        onClick={() => {
-          onChange(value => {
-            const newValue = [...value, getInitialPropsValue(prop.element)];
-            setElementIdsForArrayValue(newValue, [...newValue, getNewArrayElementId()]);
-            return newValue;
-          });
-        }}
-      >
-        Add
-      </Button>
-    </Stack>
-  );
-}
-
-const SortableItemInForm = memo(function SortableItemInForm({
-  id,
-  ...props
-}: {
-  id: string;
-  path: ReadonlyPropPath;
-  prop: ComponentPropField;
-  value: any;
-  onChange(value: any): void;
-  common: CommonComponentFieldProps;
-}) {
-  return (
-    <SortableItem id={id}>
-      <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
-        <DragHandle />
-      </Stack>
-      <FormValueContent {...props} />s
-    </SortableItem>
-  );
-});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
new file mode 100644
index 00000000000..1f5cb1bf2ad
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
@@ -0,0 +1,37 @@
+import { Stack } from '@keystone-ui/core';
+import React, { useState } from 'react';
+import { Button as KeystoneUIButton } from '@keystone-ui/button';
+import { PreviewProps } from './api';
+import { FormValueContentFromPreview, NonChildFieldComponentPropField } from './form-from-preview';
+
+export function FormValue({
+  onClose,
+  props,
+  isValid,
+}: {
+  props: PreviewProps<NonChildFieldComponentPropField>;
+  onClose(): void;
+  isValid: boolean;
+}) {
+  const [forceValidation, setForceValidation] = useState(false);
+
+  return (
+    <Stack gap="xlarge" contentEditable={false}>
+      <FormValueContentFromPreview {...props} forceValidation={forceValidation} />
+      <KeystoneUIButton
+        size="small"
+        tone="active"
+        weight="bold"
+        onClick={() => {
+          if (isValid) {
+            onClose();
+          } else {
+            setForceValidation(true);
+          }
+        }}
+      >
+        Done
+      </KeystoneUIButton>
+    </Stack>
+  );
+}
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 359ffe80e36..30bba6009a5 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
@@ -1,20 +1,31 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+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 { jsx, Stack } from '@keystone-ui/core';
+import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import { memo, useMemo } from 'react';
 import { ReactElement } from 'react';
 import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
-import { ArrayField, ComponentPropField, FormField, PreviewProps } from './api';
-import { RelationshipFormInput } from './form';
-import { objectFieldSymbol } from './preview-props';
+import {
+  ArrayField,
+  ComponentPropField,
+  ConditionalField,
+  FormField,
+  ObjectField,
+  PreviewProps,
+  RelationshipData,
+  RelationshipField,
+} from './api';
 import { assertNever } from './utils';
 
-const emptyPath: never[] = [];
-
 const fieldRenderers: {
   [Key in ComponentPropField['kind']]: (props: {
-    props: PreviewProps<Extract<ComponentPropField, { kind: Key }>>;
+    props: PreviewProps<Extract<ComponentPropField, { kind: Key }>> & {
+      autoFocus?: boolean;
+      forceValidation?: boolean;
+    };
   }) => ReactElement | null;
 } = {
   array({ props }) {
@@ -26,6 +37,7 @@ const fieldRenderers: {
           })}
         </SortableList>
         <Button
+          autoFocus={props.autoFocus}
           onClick={() => {
             props.onInsert();
           }}
@@ -35,36 +47,71 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  relationship({ props }) {
+  relationship: function RelationshipField({ props }) {
+    const keystone = useKeystone();
     return (
-      <RelationshipFormInput
-        common={{ stringifiedPropPathToAutoFocus: '' }}
-        onChange={getVal => {
-          props.onChange(getVal(props.value) as any);
-        }}
-        path={emptyPath}
-        value={props.value}
-        prop={props.field}
-      />
+      <FieldContainer>
+        <FieldLabel>{props.field.label}</FieldLabel>
+        <RelationshipSelect
+          autoFocus={props.autoFocus}
+          controlShouldRenderValue
+          isDisabled={false}
+          list={keystone.adminMeta.lists[props.field.listKey]}
+          extraSelection={props.field.selection || ''}
+          portalMenu
+          state={
+            props.field.many
+              ? {
+                  kind: 'many',
+                  value: (props.value as RelationshipData[]).map(x => ({
+                    id: x.id,
+                    label: x.label || x.id,
+                    data: x.data,
+                  })),
+                  onChange: props.onChange,
+                }
+              : {
+                  kind: 'one',
+                  value: props.value
+                    ? {
+                        ...(props.value as RelationshipData),
+                        label:
+                          (props.value as RelationshipData).label ||
+                          (props.value as RelationshipData).id,
+                      }
+                    : null,
+                  onChange: props.onChange,
+                }
+          }
+        />
+      </FieldContainer>
     );
   },
   child: () => null,
   form: function FormField({ props }) {
     return (
       <props.field.Input
-        autoFocus={false}
+        autoFocus={!!props.autoFocus}
         value={props.value}
         onChange={props.onChange}
-        forceValidation={false}
+        forceValidation={!!props.forceValidation}
       />
     );
   },
   object: function ObjectField({ props }) {
+    const firstFocusable = props.autoFocus ? findFocusableObjectFieldKey(props.field) : undefined;
     return (
       <Stack gap="xlarge">
-        {Object.entries(props).map(([key, propVal]) => (
-          <FormValueContentFromPreview key={key} props={propVal} />
-        ))}
+        {Object.entries(props.fields).map(
+          ([key, propVal]) =>
+            isNonChildFieldPreviewProps(propVal) && (
+              <FormValueContentFromPreview
+                autoFocus={key === firstFocusable}
+                key={key}
+                {...propVal}
+              />
+            )
+        )}
       </Stack>
     );
   },
@@ -75,59 +122,51 @@ const fieldRenderers: {
         {useMemo(
           () => (
             <discriminant.Input
-              autoFocus={false}
+              autoFocus={!!props.autoFocus}
               value={props.discriminant}
               onChange={props.onChange}
               forceValidation={false}
             />
           ),
-          [discriminant, props.discriminant, props.onChange]
+          [props.autoFocus, discriminant, props.discriminant, props.onChange]
+        )}
+        {isNonChildFieldPreviewProps(props.value) && (
+          <FormValueContentFromPreview {...props.value} />
         )}
-        <FormValueContentFromPreview props={props.value as any} />
       </Stack>
     );
   },
 };
 
-export function FormValueContentFromPreview({
-  props,
-}: {
-  props: PreviewProps<ComponentPropField>;
-}) {
-  const preview = handlePreview(props);
-  if (preview !== undefined) {
-    return preview;
-  }
+export type NonChildFieldComponentPropField =
+  | FormField<any, any>
+  | ObjectField
+  | ConditionalField<FormField<string | boolean, any>, { [key: string]: ComponentPropField }>
+  | RelationshipField<boolean>
+  | ArrayField<ComponentPropField>;
 
-  const kind: ComponentPropField['kind'] = (props as any)[objectFieldSymbol]
-    ? (props as any)[objectFieldSymbol].kind
-    : (props as any).field.kind;
-  const Comp = fieldRenderers[kind];
-  return <Comp props={props as any} />;
+function isNonChildFieldPreviewProps(
+  props: PreviewProps<ComponentPropField>
+): props is PreviewProps<NonChildFieldComponentPropField> {
+  const kind: ComponentPropField['kind'] = (props as any)?.field?.kind;
+  if (!kind) {
+    return false;
+  }
+  return true;
 }
 
-function handlePreview(props: any) {
-  const prop: ComponentPropField = props[objectFieldSymbol]
-    ? props[objectFieldSymbol]
-    : props.field;
-  if (prop.kind === 'child') {
-    return;
+export function FormValueContentFromPreview(
+  props: PreviewProps<NonChildFieldComponentPropField> & {
+    autoFocus?: boolean;
+    forceValidation?: boolean;
   }
-
-  if (
-    prop.kind === 'conditional' ||
-    prop.kind === 'form' ||
-    prop.kind === 'object' ||
-    prop.kind === 'relationship' ||
-    prop.kind === 'array'
-  ) {
-    if (prop.preview) {
-      return <prop.preview {...props} />;
-    }
-    return;
+) {
+  if (props.field.preview) {
+    return <props.field.preview {...(props as any)} />;
   }
 
-  assertNever(prop);
+  const Comp = fieldRenderers[props.field.kind];
+  return <Comp props={props as any} />;
 }
 
 const SortableItemInForm = memo(function SortableItemInForm(
@@ -138,7 +177,42 @@ const SortableItemInForm = memo(function SortableItemInForm(
       <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
         <DragHandle />
       </Stack>
-      <FormValueContentFromPreview {...(props.element as any)} />s
+      {isNonChildFieldPreviewProps(props.element) && (
+        <FormValueContentFromPreview {...props.element} />
+      )}
     </SortableItem>
   );
 });
+
+function findFocusableObjectFieldKey(prop: ObjectField): string | undefined {
+  for (const [key, innerProp] of Object.entries(prop.value)) {
+    const childFocusable = canFieldBeFocused(innerProp);
+    if (childFocusable) {
+      return key;
+    }
+  }
+  return undefined;
+}
+
+export function canFieldBeFocused(prop: ComponentPropField): boolean {
+  if (
+    prop.kind === 'array' ||
+    prop.kind === 'conditional' ||
+    prop.kind === 'form' ||
+    prop.kind === 'relationship'
+  ) {
+    return true;
+  }
+  if (prop.kind === 'child') {
+    return false;
+  }
+  if (prop.kind === 'object') {
+    for (const innerProp of Object.values(prop.value)) {
+      if (canFieldBeFocused(innerProp)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  assertNever(prop);
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
deleted file mode 100644
index e417c583877..00000000000
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-import { useKeystone } from '@keystone-6/core/admin-ui/context';
-import { RelationshipSelect } from '@keystone-6/core/fields/types/relationship/views/RelationshipSelect';
-import { Stack } from '@keystone-ui/core';
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import React, { memo, ReactElement, useCallback, useMemo, useState } from 'react';
-import { Button as KeystoneUIButton } from '@keystone-ui/button';
-import { ComponentPropField, RelationshipData } from '../../component-blocks';
-import { assertNever, PropPath, ReadonlyPropPath } from './utils';
-import { ArrayFormValueContent } from './array-form-value';
-import { ConditionalField, FormField, PreviewProps, RelationshipField } from './api';
-import { getPreviewPropsForProp } from './preview-props';
-import { getInitialPropsValue } from './initial-values';
-
-export function RelationshipFormInput({
-  prop,
-  path,
-  value,
-  onChange,
-  common: { stringifiedPropPathToAutoFocus },
-}: Omit<ComponentFieldProps<RelationshipField<boolean>>, 'common'> & {
-  common: { stringifiedPropPathToAutoFocus: string };
-}) {
-  const keystone = useKeystone();
-  const stringifiedPath = JSON.stringify(path);
-  return (
-    <FieldContainer>
-      <FieldLabel>{prop.label}</FieldLabel>
-      <RelationshipSelect
-        autoFocus={stringifiedPath === stringifiedPropPathToAutoFocus}
-        controlShouldRenderValue
-        isDisabled={false}
-        list={keystone.adminMeta.lists[prop.listKey]}
-        extraSelection={prop.selection || ''}
-        portalMenu
-        state={
-          prop.many
-            ? {
-                kind: 'many',
-                value: (value as RelationshipData[]).map(x => ({
-                  id: x.id,
-                  label: x.label || x.id,
-                  data: x.data,
-                })),
-                onChange: val => onChange(() => val),
-              }
-            : {
-                kind: 'one',
-                value: value
-                  ? {
-                      ...(value as RelationshipData),
-                      label: (value as RelationshipData).label || (value as RelationshipData).id,
-                    }
-                  : null,
-                onChange: val => onChange(() => val),
-              }
-        }
-      />
-    </FieldContainer>
-  );
-}
-
-export type CommonComponentFieldProps = {
-  onAddArrayItem: (path: ReadonlyPropPath) => void;
-  stringifiedPropPathToAutoFocus: string;
-  forceValidation: boolean;
-};
-
-export type ComponentFieldProps<Field extends ComponentPropField> = {
-  path: ReadonlyPropPath;
-  prop: Field;
-  value: GeneralValuesForFields[Field['kind']];
-  onChange(
-    cb: (val: GeneralValuesForFields[Field['kind']]) => GeneralValuesForFields[Field['kind']]
-  ): void;
-  common: CommonComponentFieldProps;
-};
-
-type GeneralValuesForFields = {
-  array: readonly unknown[];
-  relationship: null | RelationshipData | readonly RelationshipData[];
-  child: undefined;
-  form: unknown;
-  object: Record<string, unknown>;
-  conditional: { discriminant: string | boolean; value: unknown };
-};
-
-function getPropsForConditionalChange(
-  newValue: { discriminant: string | boolean; value: any },
-  oldValue: { discriminant: string | boolean; value: any },
-  prop: ConditionalField<any, any>
-) {
-  if (newValue.discriminant !== oldValue.discriminant) {
-    return {
-      discriminant: newValue.discriminant,
-      value: getInitialPropsValue(prop.values[newValue.discriminant.toString()]),
-    };
-  } else {
-    return newValue;
-  }
-}
-const fieldRenderers: {
-  [Key in ComponentPropField['kind']]: (
-    props: ComponentFieldProps<Extract<ComponentPropField, { kind: Key }>>
-  ) => ReactElement | null;
-} = {
-  array: ArrayFormValueContent,
-  relationship: RelationshipFormInput,
-  child: () => null,
-  form: function FormField(props) {
-    const { onChange } = props;
-    return (
-      <props.prop.Input
-        autoFocus={JSON.stringify(props.path) === props.common.stringifiedPropPathToAutoFocus}
-        value={props.value}
-        onChange={useCallback(
-          val => {
-            onChange(() => val);
-          },
-          [onChange]
-        )}
-        forceValidation={props.common.forceValidation && !props.prop.validate(props.value)}
-      />
-    );
-  },
-  object: function ObjectField(props) {
-    const { onChange, prop, path } = props;
-    const onChangeAndPaths = useMemo(() => {
-      return Object.fromEntries(
-        Object.keys(prop.value).map(key => {
-          return [
-            key,
-            {
-              onChange: (cb: (val: unknown) => unknown) => {
-                onChange(value => ({ ...value, [key]: cb(value[key]) }));
-              },
-              path: path.concat(key),
-            },
-          ];
-        })
-      );
-    }, [onChange, prop, path]);
-    return (
-      <Stack gap="xlarge">
-        {Object.entries(prop.value).map(([key, propVal]) => (
-          <FormValueContent
-            key={key}
-            path={onChangeAndPaths[key].path}
-            prop={propVal}
-            value={props.value[key]}
-            onChange={onChangeAndPaths[key].onChange}
-            common={props.common}
-          />
-        ))}
-      </Stack>
-    );
-  },
-  conditional: function ConditionalField(props) {
-    const { onChange, prop, path } = props;
-    const discriminant = props.prop.discriminant as FormField<string | boolean, unknown>;
-    const onDiscriminantChange = useCallback(
-      discriminant => {
-        onChange(value =>
-          getPropsForConditionalChange({ discriminant, value: value.value }, value, prop)
-        );
-      },
-      [prop, onChange]
-    );
-    const discriminantAutoFocus =
-      JSON.stringify(path.concat('discriminant')) === props.common.stringifiedPropPathToAutoFocus;
-    return (
-      <Stack gap="xlarge">
-        {useMemo(
-          () => (
-            <discriminant.Input
-              autoFocus={discriminantAutoFocus}
-              value={props.value.discriminant}
-              onChange={onDiscriminantChange}
-              forceValidation={
-                props.common.forceValidation && !discriminant.validate(props.value.discriminant)
-              }
-            />
-          ),
-          [
-            discriminant,
-            discriminantAutoFocus,
-            props.value.discriminant,
-            props.common.forceValidation,
-            onDiscriminantChange,
-          ]
-        )}
-        <FormValueContent
-          common={props.common}
-          path={useMemo(() => path.concat('value'), [path])}
-          prop={prop.values[props.value.discriminant.toString()]}
-          value={props.value.value}
-          onChange={useCallback(
-            val => {
-              onChange(value => {
-                return { discriminant: value.discriminant, value: val(value.value) };
-              });
-            },
-            [onChange]
-          )}
-        />
-      </Stack>
-    );
-  },
-};
-
-export const FormValueContent = memo(function FormValueContent(
-  props: ComponentFieldProps<ComponentPropField>
-) {
-  const preview = handlePreview(props);
-  if (preview !== undefined) {
-    return preview;
-  }
-  const Comp = fieldRenderers[props.prop.kind];
-  return <Comp {...(props as any)} />;
-});
-
-function handlePreview(props: ComponentFieldProps<ComponentPropField>) {
-  if (props.prop.kind === 'child') {
-    return;
-  }
-
-  if (
-    props.prop.kind === 'conditional' ||
-    props.prop.kind === 'form' ||
-    props.prop.kind === 'object' ||
-    props.prop.kind === 'relationship' ||
-    props.prop.kind === 'array'
-  ) {
-    if (props.prop.preview) {
-      return <PreviewWrapper {...props} prop={props.prop} />;
-    }
-    return;
-  }
-
-  assertNever(props.prop);
-}
-
-function PreviewWrapper(
-  props: ComponentFieldProps<
-    Extract<
-      ComponentPropField,
-      { kind: 'conditional' | 'form' | 'object' | 'relationship' | 'array' }
-    >
-  >
-) {
-  const Preview = props.prop.preview as (
-    props: PreviewProps<ComponentPropField>
-  ) => ReactElement | null;
-  return (
-    <Preview
-      {...getPreviewPropsForProp(
-        props.prop,
-        props.value,
-        props.path,
-        newVal => props.onChange(() => newVal),
-        {
-          childrenByPath: {},
-          onAddArrayItem: props.common.onAddArrayItem,
-        }
-      )}
-    />
-  );
-}
-
-export function findFirstFocusablePropPath(
-  prop: ComponentPropField,
-  path: PropPath,
-  value: any
-): PropPath | undefined {
-  if (prop.kind === 'form' || prop.kind === 'relationship') {
-    return path;
-  }
-  if (prop.kind === 'conditional') {
-    return path.concat('discriminant');
-  }
-  if (prop.kind === 'child') {
-    return undefined;
-  }
-  if (prop.kind === 'object') {
-    for (const [key, innerProp] of Object.entries(prop.value)) {
-      const newPath = path.concat(key);
-      const childFocusable = findFirstFocusablePropPath(innerProp, newPath, value[key]);
-      if (childFocusable) {
-        return childFocusable;
-      }
-    }
-    return undefined;
-  }
-  if (prop.kind === 'array') {
-    for (const [idx, val] of (value as any[]).entries()) {
-      const newPath = path.concat(idx);
-      const childFocusable = findFirstFocusablePropPath(prop.element, newPath, val);
-      if (childFocusable) {
-        return childFocusable;
-      }
-    }
-    return undefined;
-  }
-  assertNever(prop);
-}
-
-export function FormValueInsidePreviewBit({
-  onClose,
-  ...props
-}: { onClose(): void } & ComponentFieldProps<ComponentPropField>) {
-  const Comp = fieldRenderers[props.prop.kind];
-
-  return (
-    <Stack gap="xlarge" contentEditable={false}>
-      <Comp {...(props as any)} />;
-      <KeystoneUIButton
-        size="small"
-        tone="active"
-        weight="bold"
-        onClick={() => {
-          onClose();
-        }}
-      >
-        Done
-      </KeystoneUIButton>
-    </Stack>
-  );
-}
-
-const basePath: PropPath = [];
-
-export function FormValue({
-  value,
-  onClose,
-  onChange,
-  componentBlockProps,
-  isValid,
-  onAddArrayItem,
-}: {
-  value: any;
-  onChange(cb: (val: any) => any): void;
-  onClose(): void;
-  componentBlockProps: Record<string, ComponentPropField>;
-  isValid: boolean;
-  onAddArrayItem(path: ReadonlyPropPath): void;
-}) {
-  const [forceValidation, setForceValidation] = useState(false);
-  const rootProp = useMemo(
-    () => ({ kind: 'object' as const, value: componentBlockProps }),
-    [componentBlockProps]
-  );
-  const focusablePath = JSON.stringify(findFirstFocusablePropPath(rootProp, basePath, value));
-  return (
-    <Stack gap="xlarge" contentEditable={false}>
-      <FormValueContent
-        common={useMemo(() => {
-          return {
-            forceValidation,
-            onAddArrayItem,
-            stringifiedPropPathToAutoFocus: focusablePath,
-          };
-        }, [forceValidation, onAddArrayItem, focusablePath])}
-        onChange={onChange}
-        path={basePath}
-        prop={rootProp}
-        value={value}
-      />
-      <KeystoneUIButton
-        size="small"
-        tone="active"
-        weight="bold"
-        onClick={() => {
-          if (isValid) {
-            onClose();
-          } else {
-            setForceValidation(true);
-          }
-        }}
-      >
-        Done
-      </KeystoneUIButton>
-    </Stack>
-  );
-}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 38473b2d43c..ba562a3f934 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -10,13 +10,7 @@ import {
   useMemo,
   useCallback,
 } from 'react';
-import {
-  ReactEditor,
-  RenderElementProps,
-  useFocused,
-  useSelected,
-  useSlateStatic,
-} from 'slate-react';
+import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
 import { Editor, Element, Transforms } from 'slate';
 
 import { jsx, useTheme } from '@keystone-ui/core';
@@ -30,13 +24,13 @@ import { ComponentPropField, ComponentBlock } from '../../component-blocks';
 import {
   insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading,
   useElementWithSetNodes,
-  useEventCallback,
   useStaticEditor,
 } from '../utils';
 import { clientSideValidateProp, getFieldAtPropPath, ReadonlyPropPath } from './utils';
-import { createPreviewProps, onAddArrayItem } from './preview-props';
+import { ChildrenByPathContext, getElementIdsForArrayValue } from './preview-props';
 import { getInitialValue } from './initial-values';
-import { FormValue } from './form';
+import { FormValue } from './edit-mode';
+import { createGetPreviewProps } from './preview-props';
 
 export { withComponentBlocks } from './with-component-blocks';
 
@@ -120,16 +114,18 @@ export const ComponentBlocksElement = ({
   const onCloseEditView = useCallback(() => {
     setEditMode(false);
   }, []);
-  const onAddArrayItemCb = useEventCallback((path: ReadonlyPropPath) => {
-    onAddArrayItem(editor, path, currentElement, __elementToGetPath, componentBlock!);
-  });
 
-  const onPropsChange = useCallback(
-    val => {
-      setElement(element => ({ props: val(element.props) }));
-    },
-    [setElement]
-  );
+  const getPreviewProps = useMemo(() => {
+    if (!componentBlock) {
+      return () => {
+        throw new Error('expected component block to exist when called');
+      };
+    }
+    return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, getNewProps => {
+      setElement(current => ({ props: getNewProps(current.props) }));
+    });
+  }, [setElement, componentBlock]);
+
   if (!componentBlock) {
     return (
       <div css={{ border: 'red 4px solid', padding: spacing.medium }}>
@@ -146,6 +142,8 @@ Content:`}
       </div>
     );
   }
+
+  const previewProps = getPreviewProps(currentElement.props);
   return (
     <div
       data-with-chrome={!componentBlock.chromeless}
@@ -187,16 +185,7 @@ Content:`}
           {componentBlock.label}
         </NotEditable>
       )}
-      {editMode && (
-        <FormValue
-          isValid={isValid}
-          componentBlockProps={componentBlock.props}
-          onClose={onCloseEditView}
-          value={currentElement.props}
-          onChange={onPropsChange}
-          onAddArrayItem={onAddArrayItemCb}
-        />
-      )}
+      {editMode && <FormValue isValid={isValid} props={previewProps} onClose={onCloseEditView} />}
       <div css={{ display: editMode ? 'none' : 'block', position: 'relative' }}>
         {editMode ? (
           children
@@ -206,19 +195,10 @@ Content:`}
             componentBlock={componentBlock}
             element={currentElement}
             onElementChange={setElement}
-            elementToGetPath={__elementToGetPath}
           />
         )}
         {!editMode &&
           (() => {
-            const toolbarProps = createPreviewProps(
-              currentElement,
-              componentBlock,
-              {},
-              setElement,
-              editor,
-              __elementToGetPath
-            );
             const ChromefulToolbar = componentBlock.toolbar
               ? componentBlock.toolbar
               : DefaultToolbarWithChrome;
@@ -234,7 +214,7 @@ Content:`}
                       const path = ReactEditor.findPath(editor, __elementToGetPath);
                       Transforms.removeNodes(editor, { at: path });
                     }}
-                    props={toolbarProps}
+                    props={previewProps}
                   />
                 </InlineDialog>
               )
@@ -248,7 +228,7 @@ Content:`}
                 onShowEditMode={() => {
                   setEditMode(true);
                 }}
-                props={toolbarProps}
+                props={previewProps}
               />
             );
           })()}
@@ -338,7 +318,6 @@ function ComponentBlockRender({
   componentBlock,
   element,
   onElementChange,
-  elementToGetPath,
   children,
 }: {
   element: Element & { type: 'component-block' };
@@ -348,34 +327,50 @@ function ComponentBlockRender({
     ) => Partial<Element & { type: 'component-block' }>
   ) => void;
   componentBlock: ComponentBlock;
-  elementToGetPath: Element & { type: 'component-block' };
   children: any;
 }) {
-  const editor = useSlateStatic();
+  const getPreviewProps = useMemo(() => {
+    return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, props => {
+      onElementChange(() => ({ props }));
+    });
+  }, [onElementChange, componentBlock]);
+
+  const previewProps = getPreviewProps(element.props);
+
   const childrenByPath: Record<string, ReactElement> = {};
   let maybeChild: ReactElement | undefined;
   children.forEach((child: ReactElement) => {
-    let stringified = JSON.stringify(child.props.children.props.element.propPath);
-    if (stringified === undefined) {
+    const propPath = child.props.children.props.element.propPath;
+    if (propPath === undefined) {
       maybeChild = child;
     } else {
-      childrenByPath[stringified] = child;
+      childrenByPath[JSON.stringify(propPathWithIndiciesToKeys(propPath, element.props))] = child;
     }
   });
 
-  const previewProps = createPreviewProps(
-    element,
-    componentBlock,
-    childrenByPath,
-    partialElement => onElementChange(() => partialElement),
-    editor,
-    elementToGetPath
-  );
+  const ComponentBlockPreview = componentBlock.component;
 
   return (
-    <Fragment>
-      <componentBlock.component {...previewProps} />
+    <ChildrenByPathContext.Provider value={childrenByPath}>
+      {useMemo(
+        () => (
+          <ComponentBlockPreview {...previewProps} />
+        ),
+        [previewProps, ComponentBlockPreview]
+      )}
       <span css={{ display: 'none' }}>{maybeChild}</span>
-    </Fragment>
+    </ChildrenByPathContext.Provider>
   );
 }
+
+function propPathWithIndiciesToKeys(propPath: ReadonlyPropPath, val: any): readonly string[] {
+  return propPath.map((key, i) => {
+    if (typeof key === 'string') {
+      val = val[key];
+      return key;
+    }
+    const keys = getElementIdsForArrayValue(val);
+    val = val[key];
+    return keys[i];
+  });
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index 47ddb12a52d..e48a277c6fa 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -1,12 +1,11 @@
 /** @jest-environment jsdom */
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { Transforms, Element, Editor } from 'slate';
+import { Transforms, Editor } from 'slate';
 import React from 'react';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
-import { createPreviewProps } from './preview-props';
-import { ExtractPropFromComponentPropFieldForPreview } from './api';
+import { createGetPreviewProps } from './preview-props';
 import { insertComponentBlock } from '.';
 
 const objectProp = fields.object({
@@ -53,9 +52,10 @@ const componentBlocks = {
       return React.createElement(
         'div',
         null,
-        props.object.fields.block,
-        props.object.fields.inline,
-        props.object.fields.conditional.discriminant && props.object.fields.conditional.value
+        props.fields.object.fields.block,
+        props.fields.object.fields.inline,
+        props.fields.object.fields.conditional.discriminant &&
+          props.fields.object.fields.conditional.value
       );
     },
     label: 'Complex',
@@ -174,25 +174,10 @@ test('inserting a complex component block', () => {
   `);
 });
 
-const getPreviewProps = (
-  editor: Editor
-): {
-  object: ExtractPropFromComponentPropFieldForPreview<typeof objectProp>;
-} =>
-  createPreviewProps(
-    editor.children[0] as Element & { type: 'component-block' },
-    componentBlocks.complex,
-    {
-      '["object","block"]': React.createElement('block-prop'),
-      '["object","inline"]': React.createElement('inline-prop'),
-      '["object","conditional","value"]': React.createElement('conditional-prop'),
-    },
-    data => {
-      Transforms.setNodes(editor, data, { at: [0] });
-    },
-    editor,
-    editor.children[0] as Element & { type: 'component-block' }
-  ) as any;
+const getPreviewProps = (editor: Editor) =>
+  createGetPreviewProps({ kind: 'object', value: componentBlocks.complex.props }, props => {
+    Transforms.setNodes(editor, { props }, { at: [0] });
+  })((editor.children[0] as any).props);
 
 const makeEditorWithComplexComponentBlock = () =>
   makeEditor(
@@ -302,7 +287,7 @@ test('preview props conditional change', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  previewProps.object.fields.conditional.onChange(true);
+  previewProps.fields.object.fields.conditional.onChange(true);
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
@@ -374,7 +359,7 @@ test('preview props conditional change', () => {
       </paragraph>
     </editor>
   `);
-  expect(getPreviewProps(editor).object.fields.conditional).toMatchInlineSnapshot(`
+  expect(getPreviewProps(editor).fields.object.fields.conditional).toMatchInlineSnapshot(`
     Object {
       "discriminant": true,
       "onChange": [Function],
@@ -388,9 +373,9 @@ test('preview props form change', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  previewProps.object.fields.select.onChange('b');
+  previewProps.fields.object.fields.select.onChange('b');
   expect((editor.children[0] as any).props.object.fields.select).toBe('b');
-  expect(getPreviewProps(editor).object.fields.select.value).toBe('b');
+  expect(getPreviewProps(editor).fields.object.fields.select.value).toBe('b');
 });
 
 test('relationship many change', () => {
@@ -398,9 +383,9 @@ test('relationship many change', () => {
 
   let previewProps = getPreviewProps(editor);
   const val = [{ data: {}, id: 'some-id', label: 'some-id' }];
-  previewProps.object.fields.many.onChange(val);
+  previewProps.fields.object.fields.many.onChange(val);
   expect((editor.children[0] as any).props.object.fields.many).toEqual(val);
-  expect(getPreviewProps(editor).object.fields.many.value).toEqual(val);
+  expect(getPreviewProps(editor).fields.object.fields.many.value).toEqual(val);
 });
 
 function assert(condition: boolean): asserts condition {
@@ -413,19 +398,21 @@ test('relationship single change', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.object.fields.conditional.discriminant === false);
+  assert(previewProps.fields.object.fields.conditional.discriminant === false);
   const val = { data: {}, id: 'some-id', label: 'some-id' };
-  previewProps.object.fields.conditional.value.onChange(val);
+  previewProps.fields.object.fields.conditional.value.onChange(val);
   expect((editor.children[0] as any).props.object.fields.conditional.value).toEqual(val);
-  expect((getPreviewProps(editor).object.fields.conditional.value as any).value).toEqual(val);
+  expect((getPreviewProps(editor).fields.object.fields.conditional.value as any).value).toEqual(
+    val
+  );
 });
 
 test('changing conditional with form inside', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.object.fields.conditional.discriminant === false);
-  previewProps.object.fields.conditionalSelect.onChange('b');
+  assert(previewProps.fields.object.fields.conditional.discriminant === false);
+  previewProps.fields.object.fields.conditionalSelect.onChange('b');
 
   expect((editor.children[0] as any).props.object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
@@ -433,7 +420,7 @@ test('changing conditional with form inside', () => {
       "value": "B",
     }
   `);
-  expect(getPreviewProps(editor).object.fields.conditionalSelect).toMatchInlineSnapshot(`
+  expect(getPreviewProps(editor).fields.object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "b",
       "onChange": [Function],
@@ -460,8 +447,8 @@ test('changing form inside conditional', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.object.fields.conditional.discriminant === false);
-  previewProps.object.fields.conditionalSelect.value.onChange('Some content');
+  assert(previewProps.fields.object.fields.conditional.discriminant === false);
+  previewProps.fields.object.fields.conditionalSelect.value.onChange('Some content');
 
   expect((editor.children[0] as any).props.object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
@@ -469,7 +456,7 @@ test('changing form inside conditional', () => {
       "value": "Some content",
     }
   `);
-  expect(getPreviewProps(editor).object.fields.conditionalSelect).toMatchInlineSnapshot(`
+  expect(getPreviewProps(editor).fields.object.fields.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "a",
       "onChange": [Function],
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
deleted file mode 100644
index 79d717fa65c..00000000000
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-import { Editor, Element, Transforms } from 'slate';
-import { ReactElement } from 'react';
-import { ReactEditor } from 'slate-react';
-import { arrayMove } from '@dnd-kit/sortable';
-import { ComponentBlock } from '../../component-blocks';
-import { areArraysEqual } from '../document-features-normalization';
-import { assert } from '../utils';
-import {
-  assertNever,
-  findChildPropPathsForProp,
-  getFieldAtPropPath,
-  ReadonlyPropPath,
-  transformProps,
-} from './utils';
-import {
-  ArrayField,
-  ComponentPropField,
-  ConditionalField,
-  FormField,
-  FormFieldValue,
-  ObjectField,
-  PreviewProps,
-  RelationshipField,
-} from './api';
-import {
-  getInitialPropsValue,
-  getInitialPropsValueFromInitializer,
-  updateValue,
-} from './initial-values';
-
-export const objectFieldSymbol = Symbol('object field');
-
-const arrayValuesToElementIds = new WeakMap<readonly unknown[], string[]>();
-
-let counter = 0;
-
-export function getElementIdsForArrayValue(value: readonly unknown[]) {
-  if (!arrayValuesToElementIds.has(value)) {
-    arrayValuesToElementIds.set(value, Array.from({ length: value.length }, getNewArrayElementId));
-  }
-  return arrayValuesToElementIds.get(value)!;
-}
-
-export function setElementIdsForArrayValue(value: unknown[], elementIds: string[]) {
-  arrayValuesToElementIds.set(value, elementIds);
-}
-
-export function getNewArrayElementId() {
-  return (counter++).toString();
-}
-
-type Common = {
-  childrenByPath: Record<string, ReactElement>;
-  onAddArrayItem: (path: ReadonlyPropPath) => void;
-};
-
-export function getPreviewPropsForProp(
-  prop: ComponentPropField,
-  value: unknown,
-  path: ReadonlyPropPath,
-  onFormPropsChange: (formProps: Record<string, any>) => void,
-  common: Common
-): any {
-  switch (prop.kind) {
-    case 'form':
-      const props: PreviewProps<FormField<FormFieldValue, unknown>> = {
-        value: value as FormFieldValue,
-        onChange(newValue: any) {
-          onFormPropsChange(newValue === undefined ? value : newValue);
-        },
-        options: prop.options,
-        field: prop,
-      };
-      return props;
-    case 'child':
-      return common.childrenByPath[JSON.stringify(path)];
-    case 'object': {
-      const fields: Record<string, any> = {};
-      Object.keys(prop.value).forEach(key => {
-        fields[key] = getPreviewPropsForProp(
-          prop.value[key],
-          (value as any)[key],
-          path.concat(key),
-          newVal => {
-            onFormPropsChange({ ...(value as any), [key]: newVal });
-          },
-          common
-        );
-      });
-      const previewProps: PreviewProps<ObjectField<Record<string, ComponentPropField>>> = {
-        fields,
-        onChange(updater) {
-          onFormPropsChange(updateValue(prop, value, updater));
-        },
-        field: prop,
-      };
-      return previewProps;
-    }
-    case 'relationship': {
-      const props: PreviewProps<RelationshipField<boolean>> = {
-        value: value as any,
-        onChange(newValue: any) {
-          onFormPropsChange(newValue);
-        },
-        field: prop,
-      };
-      return props;
-    }
-    case 'conditional': {
-      const conditionalValue = value as { discriminant: string | boolean; value: unknown };
-      const props: PreviewProps<
-        ConditionalField<
-          FormField<string | boolean, unknown>,
-          { [key: string]: ComponentPropField }
-        >
-      > = {
-        discriminant: (value as any).discriminant,
-        onChange(discriminant, value) {
-          onFormPropsChange(updateValue(prop, value, { discriminant, value }));
-        },
-        options: prop.discriminant.options,
-        value: getPreviewPropsForProp(
-          prop.values[conditionalValue.discriminant.toString()],
-          conditionalValue.value,
-          path.concat('value'),
-          val => {
-            onFormPropsChange({
-              discriminant: conditionalValue.discriminant,
-              value: val,
-            });
-          },
-          common
-        ),
-        field: prop,
-      };
-      return props;
-    }
-    case 'array': {
-      const keys = getElementIdsForArrayValue(value as any);
-      const arrayValue = value as unknown[];
-      const props: PreviewProps<ArrayField<ComponentPropField>> = {
-        elements: arrayValue.map((val, i) => ({
-          id: keys[i],
-          element: getPreviewPropsForProp(
-            prop.element,
-            val,
-            path.concat(i),
-            val => {
-              const newValue = [...arrayValue];
-              newValue[i] = val;
-              setElementIdsForArrayValue(newValue, keys);
-              onFormPropsChange(newValue);
-            },
-            common
-          ),
-        })),
-        field: prop,
-        onInsert(initial, index) {
-          // onAddArrayItem(path);
-          const newValue = [...(value as unknown[])];
-          newValue.splice(
-            index ?? newValue.length,
-            0,
-            getInitialPropsValueFromInitializer(prop.element, initial)
-          );
-          setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
-          onFormPropsChange(newValue);
-        },
-        onMove(from, to) {
-          const newValue = arrayMove(arrayValue, from, to);
-          setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
-          onFormPropsChange(newValue);
-        },
-        onChange(updater) {
-          onFormPropsChange(updateValue(prop, value, updater));
-        },
-        onRemove(index) {
-          const newValue = arrayValue.filter((_, i) => i !== index);
-          setElementIdsForArrayValue(
-            newValue,
-            keys.filter((_, i) => i !== index)
-          );
-          onFormPropsChange(newValue);
-        },
-      };
-      return props;
-    }
-    default: {
-      assertNever(prop);
-    }
-  }
-}
-
-export function createPreviewProps(
-  element: Element & { type: 'component-block' },
-  componentBlock: ComponentBlock,
-  childrenByPath: Record<string, ReactElement>,
-  setNode: (props: Partial<Element & { type: 'component-block' }>) => void,
-  editor: Editor,
-  elementToGetPropPath: Element & { type: 'component-block' }
-) {
-  return getPreviewPropsForProp(
-    { kind: 'object', value: componentBlock.props },
-    element.props,
-    [],
-    props => {
-      setNode({ props });
-    },
-    {
-      childrenByPath,
-      onAddArrayItem: propPath =>
-        onAddArrayItem(editor, propPath, element, elementToGetPropPath, componentBlock),
-    }
-  );
-}
-
-export function onAddArrayItem(
-  editor: Editor,
-  path: ReadonlyPropPath,
-  element: Element & { type: 'component-block' },
-  elementToGetPath: Element & { type: 'component-block' },
-  componentBlock: ComponentBlock
-) {
-  Editor.withoutNormalizing(editor, () => {
-    const arrayField = getFieldAtPropPath(path, element.props, componentBlock.props);
-    assert(arrayField?.kind === 'array');
-    const elementVal = getInitialPropsValue(arrayField.element);
-    let nextIdx = 0;
-    const newProps = transformProps(
-      { kind: 'object', value: componentBlock.props },
-      element.props,
-      (prop, value, currentPath) => {
-        if (prop.kind === 'array' && areArraysEqual(path, currentPath)) {
-          nextIdx = (value as any[]).length;
-          const newVal = [...(value as any[]), elementVal];
-          setElementIdsForArrayValue(newVal, [
-            ...getElementIdsForArrayValue(value as any[]),
-            getNewArrayElementId(),
-          ]);
-          return newVal;
-        }
-        return value;
-      }
-    );
-    const componentBlockPath = ReactEditor.findPath(editor, elementToGetPath);
-
-    Transforms.setNodes(
-      editor,
-      { props: newProps as Record<string, unknown> },
-      { at: componentBlockPath }
-    );
-
-    const propPathsToInsert = findChildPropPathsForProp(
-      elementVal,
-      arrayField.element,
-      path.concat(nextIdx)
-    );
-    if (propPathsToInsert.length) {
-      const hasEmptyThing =
-        element.children.length === 1 &&
-        element.children[0].type === 'component-inline-prop' &&
-        element.children[0].propPath === undefined;
-      if (hasEmptyThing) {
-        Transforms.removeNodes(editor, { at: [...componentBlockPath, 0] });
-      }
-      for (const [idx, childFieldInfo] of propPathsToInsert.entries()) {
-        Transforms.insertNodes(
-          editor,
-          {
-            type: `component-${childFieldInfo.options.kind}-prop`,
-            propPath: childFieldInfo.path,
-            children: [{ text: '' }],
-          },
-          { at: [...componentBlockPath, (hasEmptyThing ? 0 : element.children.length) + idx] }
-        );
-      }
-    }
-  });
-}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
new file mode 100644
index 00000000000..15237c446fb
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -0,0 +1,408 @@
+import React, { ReactElement, useContext } from 'react';
+import { arrayMove } from '@dnd-kit/sortable';
+import weakMemoize from '@emotion/weak-memoize';
+import {
+  ArrayField,
+  ComponentPropField,
+  ConditionalField,
+  FormField,
+  FormFieldValue,
+  ObjectField,
+  PreviewProps,
+  RelationshipField,
+} from './api';
+import { updateValue, getInitialPropsValueFromInitializer } from './initial-values';
+import { assertNever } from './utils';
+
+const arrayValuesToElementIds = new WeakMap<readonly unknown[], string[]>();
+
+let counter = 0;
+
+export function getElementIdsForArrayValue(value: readonly unknown[]) {
+  if (!arrayValuesToElementIds.has(value)) {
+    arrayValuesToElementIds.set(value, Array.from({ length: value.length }, getNewArrayElementId));
+  }
+  return arrayValuesToElementIds.get(value)!;
+}
+
+export function setElementIdsForArrayValue(value: unknown[], elementIds: string[]) {
+  arrayValuesToElementIds.set(value, elementIds);
+}
+
+export function getNewArrayElementId() {
+  return (counter++).toString();
+}
+
+export const ChildrenByPathContext = React.createContext<Record<string, ReactElement>>({});
+
+function ChildFieldEditable({ path }: { path: readonly string[] }) {
+  return useContext(ChildrenByPathContext)[JSON.stringify(path)];
+}
+
+export function createGetPreviewProps<Field extends ComponentPropField>(
+  rootProp: Field,
+  rootOnChange: (cb: (val: any) => any) => void
+) {
+  const innerOnChangeCacheForObjectAndArrayField = new WeakMap<
+    (cb: (val: any) => any) => any,
+    Map<string, (cb: (val: any) => any) => any>
+  >();
+
+  const onChangeCacheForObjectAndConditionalField = new WeakMap<
+    (cb: (val: any) => any) => void,
+    (...args: any[]) => void
+  >();
+
+  const onChangeCacheForArrayField = new WeakMap<
+    (...args: any[]) => any,
+    {
+      readonly onChange: (value: any) => void;
+      readonly onMove: (from: number, to: number) => void;
+      readonly onInsert: (initial?: any, index?: number) => void;
+      readonly onRemove: (index: number) => void;
+    }
+  >();
+
+  const emptyMap = () => new Map<string, (cb: (val: any) => any) => void>();
+
+  type GeneralMap<K, V> = {
+    has(key: K): boolean;
+    get(key: K): V | undefined;
+    set(key: K, value: V): void;
+  };
+
+  function getOrInsert<K, V>(map: GeneralMap<K, V>, key: K, val: (key: K) => V): V {
+    if (!map.has(key)) {
+      map.set(key, val(key));
+    }
+    return map.get(key)!;
+  }
+
+  const makeOnChangeForFormAndRelationshipFields = weakMemoize(
+    (onChange: (cb: (prevVal: any) => any) => void) => {
+      return (newVal: FormFieldValue) => {
+        onChange(() => newVal);
+      };
+    }
+  );
+
+  const makeOnChangeForValueOfConditionalField = weakMemoize(
+    (onChange: (cb: (prevVal: any) => any) => void) => {
+      return (val: (prevVal: any) => any) => {
+        onChange(prev => ({
+          discriminant: prev.discriminant,
+          value: val(prev.value),
+        }));
+      };
+    }
+  );
+
+  function getPreviewPropsForProp(
+    prop: ComponentPropField,
+    value: unknown,
+    path: readonly string[],
+    onChange: (cb: (prevVal: any) => any) => void,
+    getInnerProp: (
+      prop: ComponentPropField,
+      value: unknown,
+      path: readonly string[],
+      onChange: (cb: (prevVal: any) => any) => void
+    ) => any
+  ): any {
+    switch (prop.kind) {
+      case 'form':
+        const props: PreviewProps<FormField<FormFieldValue, unknown>> = {
+          value: value as FormFieldValue,
+          onChange: makeOnChangeForFormAndRelationshipFields(onChange),
+          options: prop.options,
+          field: prop,
+        };
+        return props;
+      case 'child':
+        return <ChildFieldEditable path={path} />;
+      case 'object': {
+        const fields: Record<string, any> = {};
+        const onChangeCache = getOrInsert(
+          innerOnChangeCacheForObjectAndArrayField,
+          onChange,
+          emptyMap
+        );
+        const getOnChange = (key: string) => {
+          return (newVal: (prevVal: any) => any) => {
+            onChange(val => ({ ...val, [key]: newVal(val[key]) }));
+          };
+        };
+        Object.keys(prop.value).forEach(key => {
+          const onChange = getOrInsert(onChangeCache, key, getOnChange);
+          fields[key] = getInnerProp(
+            prop.value[key],
+            (value as any)[key],
+            path.concat(key),
+            onChange
+          );
+        });
+
+        const previewProps: PreviewProps<ObjectField<Record<string, ComponentPropField>>> = {
+          fields,
+          onChange: getOrInsert(
+            onChangeCacheForObjectAndConditionalField,
+            onChange,
+            () => updater => {
+              onChange(value => updateValue(prop, value, updater));
+            }
+          ),
+          field: prop,
+        };
+        return previewProps;
+      }
+      case 'relationship': {
+        const props: PreviewProps<RelationshipField<boolean>> = {
+          value: value as any,
+          onChange: makeOnChangeForFormAndRelationshipFields(onChange),
+          field: prop,
+        };
+        return props;
+      }
+      case 'conditional': {
+        const conditionalValue = value as { discriminant: string | boolean; value: unknown };
+        const props: PreviewProps<
+          ConditionalField<
+            FormField<string | boolean, unknown>,
+            { [key: string]: ComponentPropField }
+          >
+        > = {
+          discriminant: (value as any).discriminant,
+          onChange: getOrInsert(
+            onChangeCacheForObjectAndConditionalField,
+            onChange,
+            () => (discriminant, value) => {
+              onChange(val => updateValue(prop, val, { discriminant, value }));
+            }
+          ),
+          options: prop.discriminant.options,
+          value: getInnerProp(
+            prop.values[conditionalValue.discriminant.toString()],
+            conditionalValue.value,
+            path.concat('value'),
+            makeOnChangeForValueOfConditionalField(onChange)
+          ),
+          field: prop,
+        };
+        return props;
+      }
+      case 'array': {
+        const arrayValue = value as readonly unknown[];
+        const keys = getElementIdsForArrayValue(arrayValue);
+
+        const onChangeArrayItem = (key: string) => (val: (val: any) => any) => {
+          onChange(prev => {
+            const keys = getElementIdsForArrayValue(prev);
+            const index = keys.indexOf(key);
+            const newValue = [...prev];
+            newValue[index] = val(newValue[index]);
+            setElementIdsForArrayValue(newValue, keys);
+            return newValue;
+          });
+        };
+        const onChangeCache = getOrInsert(
+          innerOnChangeCacheForObjectAndArrayField,
+          onChange,
+          emptyMap
+        );
+        const props: PreviewProps<ArrayField<ComponentPropField>> = {
+          elements: arrayValue.map((val, i) => {
+            const key = keys[i];
+
+            return {
+              id: keys[i],
+              element: getInnerProp(
+                prop.element,
+                val,
+                path.concat(key),
+                getOrInsert(onChangeCache, key, onChangeArrayItem)
+              ),
+            };
+          }),
+          field: prop,
+          ...getOrInsert(onChangeCacheForArrayField, onChange, () => ({
+            onInsert(initial, index) {
+              onChange(value => {
+                const newValue = [...(value as unknown[])];
+
+                newValue.splice(
+                  index ?? newValue.length,
+                  0,
+                  getInitialPropsValueFromInitializer(prop.element, initial)
+                );
+                const keys = getElementIdsForArrayValue(value);
+                setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
+                return newValue;
+              });
+            },
+            onMove(from, to) {
+              onChange(value => {
+                const newValue = arrayMove(value as unknown[], from, to);
+                const keys = getElementIdsForArrayValue(value);
+                setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
+                return newValue;
+              });
+            },
+            onChange(updater) {
+              onChange(value => updateValue(prop, value, updater));
+            },
+            onRemove(index) {
+              onChange(value => {
+                const newValue = (value as unknown[]).filter((_, i) => i !== index);
+                const keys = getElementIdsForArrayValue(value);
+                setElementIdsForArrayValue(
+                  newValue,
+                  keys.filter((_, i) => i !== index)
+                );
+                return newValue;
+              });
+            },
+          })),
+        };
+        return props;
+      }
+      default: {
+        assertNever(prop);
+      }
+    }
+  }
+  function getInitialMemoState<Field extends ComponentPropField>(
+    prop: Field,
+    value: unknown,
+    onChange: (cb: (val: unknown) => unknown) => void,
+    path: readonly string[]
+  ): MemoState<Field> {
+    let innerState = new Map<string, MemoState<ComponentPropField>>();
+    let state = {
+      value,
+      inner: innerState,
+      props: getPreviewPropsForProp(prop, value, path, onChange, (prop, value, path, onChange) => {
+        const state = getInitialMemoState(prop, value, onChange, path);
+        const lastPathEntry = path[path.length - 1];
+        innerState.set(lastPathEntry, state);
+        return state.props;
+      }),
+    };
+    return state;
+  }
+  function getUpToDateProps<Field extends ComponentPropField>(
+    prop: Field,
+    value: unknown,
+    onChange: (cb: (val: unknown) => unknown) => void,
+    memoState: MemoState<Field>,
+    path: readonly string[]
+  ): PreviewProps<Field> {
+    if (memoState.value === value) {
+      return memoState.props;
+    }
+    memoState.value = value;
+    memoState.props = getPreviewPropsForProp(
+      prop,
+      value,
+      path,
+      onChange,
+      (prop, value, path, onChange) => {
+        const innerMemoStateKey = path[path.length - 1];
+        if (!memoState.inner.has(innerMemoStateKey)) {
+          const innerState = getInitialMemoState(prop, value, onChange, path);
+          memoState.inner.set(innerMemoStateKey, innerState);
+          return innerState.props;
+        }
+        return getUpToDateProps(
+          prop,
+          value,
+          onChange,
+          memoState.inner.get(innerMemoStateKey)!,
+          path
+        );
+      }
+    );
+    return memoState.props;
+  }
+  let memoState: {
+    props: PreviewProps<Field>;
+    value: unknown;
+    inner: Map<string, MemoState<ComponentPropField>>;
+  };
+  return (value: unknown): PreviewProps<Field> => {
+    if (memoState === undefined) {
+      memoState = getInitialMemoState(rootProp, value, rootOnChange, []);
+      return memoState.props;
+    }
+    return getUpToDateProps(rootProp, value, rootOnChange, memoState, []);
+  };
+}
+
+type MemoState<Field extends ComponentPropField> = {
+  props: PreviewProps<Field>;
+  value: unknown;
+  inner: Map<string, MemoState<ComponentPropField>>;
+};
+
+// export function onAddArrayItem(
+//   editor: Editor,
+//   path: ReadonlyPropPath,
+//   element: Element & { type: 'component-block' },
+//   elementToGetPath: Element & { type: 'component-block' },
+//   componentBlock: ComponentBlock
+// ) {
+//   Editor.withoutNormalizing(editor, () => {
+//     const arrayField = getFieldAtPropPath(path, element.props, componentBlock.props);
+//     assert(arrayField?.kind === 'array');
+//     const elementVal = getInitialPropsValue(arrayField.element);
+//     let nextIdx = 0;
+//     const newProps = transformProps(
+//       { kind: 'object', value: componentBlock.props },
+//       element.props,
+//       (prop, value, currentPath) => {
+//         if (prop.kind === 'array' && areArraysEqual(path, currentPath)) {
+//           nextIdx = (value as any[]).length;
+//           const newVal = [...(value as any[]), elementVal];
+//           setElementIdsForArrayValue(newVal, [
+//             ...getElementIdsForArrayValue(value as any[]),
+//             getNewArrayElementId(),
+//           ]);
+//           return newVal;
+//         }
+//         return value;
+//       }
+//     );
+//     const componentBlockPath = ReactEditor.findPath(editor, elementToGetPath);
+
+//     Transforms.setNodes(
+//       editor,
+//       { props: newProps as Record<string, unknown> },
+//       { at: componentBlockPath }
+//     );
+
+//     const propPathsToInsert = findChildPropPathsForProp(
+//       elementVal,
+//       arrayField.element,
+//       path.concat(nextIdx)
+//     );
+//     if (propPathsToInsert.length) {
+//       const hasEmptyThing =
+//         element.children.length === 1 &&
+//         element.children[0].type === 'component-inline-prop' &&
+//         element.children[0].propPath === undefined;
+//       if (hasEmptyThing) {
+//         Transforms.removeNodes(editor, { at: [...componentBlockPath, 0] });
+//       }
+//       for (const [idx, childFieldInfo] of propPathsToInsert.entries()) {
+//         Transforms.insertNodes(
+//           editor,
+//           {
+//             type: `component-${childFieldInfo.options.kind}-prop`,
+//             propPath: childFieldInfo.path,
+//             children: [{ text: '' }],
+//           },
+//           { at: [...componentBlockPath, (hasEmptyThing ? 0 : element.children.length) + idx] }
+//         );
+//       }
+//     }
+//   });
+// }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index c7d455280ac..4dd28422091 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -365,7 +365,6 @@ export function withComponentBlocks(
               }
             }
             setElementIdsForArrayValue(newVal, newKeys);
-            // console.log({ arrVal, newVal });
             if (!areArraysEqual(arrVal, newVal)) {
               const transformedProps = transformProps(rootProp, node.props, (prop, value, path) => {
                 if (prop.kind === 'array' && areArraysEqual(path, propPath)) {
diff --git a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
index 1f0c4cb6b2c..c5e84b51d4e 100644
--- a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
@@ -264,7 +264,7 @@ test("link shortcut doesn't do anything when inside of a component block with li
     {
       componentBlocks: {
         comp: component({
-          component: ({ child }) => React.createElement('div', null, child),
+          component: props => React.createElement('div', null, props.fields.child),
           label: '',
           props: { child: fields.child({ kind: 'inline', placeholder: '' }) },
         }),
@@ -317,7 +317,7 @@ test('link shortcut works when inside of a component block with links option inh
     {
       componentBlocks: {
         comp: component({
-          component: ({ child }) => React.createElement('div', null, child),
+          component: props => React.createElement('div', null, props.fields.child),
           label: '',
           props: { child: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }) },
         }),
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index 752d90313f6..de993be9a4d 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -152,7 +152,6 @@ export function DragHandle() {
       <Popover
         placement="left"
         triggerRenderer={opts => {
-          console.log(sortable.listeners);
           return (
             <div>
               <button
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index e74bf72fede..15f9503f528 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -11,23 +11,12 @@ import {
   FieldControllerConfig,
   FieldProps,
 } from '@keystone-6/core/types';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { FormValueContent } from '../DocumentEditor/component-blocks/form';
+import { useEffect, useMemo, useRef } from 'react';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
 import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
-import {
-  assertNever,
-  ReadonlyPropPath,
-  transformProps,
-} from '../DocumentEditor/component-blocks/utils';
-import { areArraysEqual } from '../DocumentEditor/document-features-normalization';
-import {
-  getElementIdsForArrayValue,
-  getNewArrayElementId,
-  setElementIdsForArrayValue,
-} from '../DocumentEditor/component-blocks/preview-props';
-
-const basePath: ReadonlyPropPath = [];
+import { assertNever } from '../DocumentEditor/component-blocks/utils';
+import { FormValueContentFromPreview } from '../DocumentEditor/component-blocks/form-from-preview';
+import { createGetPreviewProps } from '../DocumentEditor/component-blocks/preview-props';
 
 export const Field = ({
   field,
@@ -40,42 +29,18 @@ export const Field = ({
   useEffect(() => {
     valueRef.current = value;
   });
+  const createPreviewProps = useMemo(() => {
+    return createGetPreviewProps(field.prop, getNewVal => {
+      onChange?.({ kind: valueRef.current.kind, value: getNewVal(valueRef.current.value) });
+    });
+  }, [field.prop, onChange]);
   return (
     <FieldContainer>
       <FieldLabel>{field.label}</FieldLabel>
-      <FormValueContent
-        common={useMemo(
-          () => ({
-            stringifiedPropPathToAutoFocus: autoFocus ? '' : '',
-            forceValidation: !!forceValidation,
-            onAddArrayItem: pathToInsertIn => {
-              onChange?.({
-                kind: valueRef.current.kind,
-                value: transformProps(field.prop, valueRef.current.value, (prop, value, path) => {
-                  if (prop.kind === 'array' && areArraysEqual(path, pathToInsertIn)) {
-                    const newVal = [...(value as any[]), getInitialPropsValue(prop)];
-                    setElementIdsForArrayValue(newVal, [
-                      ...getElementIdsForArrayValue(value as unknown[]),
-                      getNewArrayElementId(),
-                    ]);
-                    return newVal;
-                  }
-                  return value;
-                }),
-              });
-            },
-          }),
-          [autoFocus, forceValidation, onChange, field.prop]
-        )}
-        onChange={useCallback(
-          getNewVal => {
-            onChange?.({ kind: valueRef.current.kind, value: getNewVal(valueRef.current.value) });
-          },
-          [onChange]
-        )}
-        path={basePath}
-        prop={field.prop}
-        value={value.value}
+      <FormValueContentFromPreview
+        forceValidation={forceValidation}
+        autoFocus={autoFocus}
+        {...createPreviewProps(value.value)}
       />
     </FieldContainer>
   );

From 40657a8f1bad371a6f48c714993334939271eaf3 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 10 Mar 2022 16:49:55 +1000
Subject: [PATCH 022/124] Add memo to FormValueContentFromPreview

---
 .../src/DocumentEditor/component-blocks/form-from-preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 30bba6009a5..b57a13741fa 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
@@ -155,7 +155,7 @@ function isNonChildFieldPreviewProps(
   return true;
 }
 
-export function FormValueContentFromPreview(
+export const FormValueContentFromPreview = memo(function FormValueContentFromPreview(
   props: PreviewProps<NonChildFieldComponentPropField> & {
     autoFocus?: boolean;
     forceValidation?: boolean;
@@ -167,7 +167,7 @@ export function FormValueContentFromPreview(
 
   const Comp = fieldRenderers[props.field.kind];
   return <Comp props={props as any} />;
-}
+});
 
 const SortableItemInForm = memo(function SortableItemInForm(
   props: PreviewProps<ArrayField<ComponentPropField>>['elements'][number]

From 7bf9f7e6251c98c9ac4bd05c81fe78f00f493b94 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 16 Mar 2022 13:53:59 +1000
Subject: [PATCH 023/124] Design updates

---
 .../packages/popover/src/Popover.tsx          |   6 +-
 .../basic/admin/fieldViews/Blah.tsx           | 127 +++++++++++-------
 packages/fields-document/package.json         |   3 +-
 .../DocumentEditor/primitives/add-button.tsx  |  86 ++++++++++++
 .../src/DocumentEditor/primitives/index.tsx   |   2 +
 .../DocumentEditor/primitives/sortable.tsx    |  19 +--
 packages/fields-document/src/primitives.ts    |   4 +
 yarn.lock                                     |  20 ++-
 8 files changed, 201 insertions(+), 66 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/primitives/add-button.tsx

diff --git a/design-system/packages/popover/src/Popover.tsx b/design-system/packages/popover/src/Popover.tsx
index 782d8590ca6..6dff3d0e0c9 100644
--- a/design-system/packages/popover/src/Popover.tsx
+++ b/design-system/packages/popover/src/Popover.tsx
@@ -186,7 +186,7 @@ type DialogProps = {
   children: ReactNode;
   /** When true, the popover will be visible. */
   isVisible: boolean;
-  arrow: {
+  arrow?: {
     ref: (element: HTMLDivElement) => void;
     props: {
       style: CSSProperties;
@@ -236,7 +236,9 @@ export const PopoverDialog = forwardRef<HTMLDivElement, DialogProps>(
           }}
           {...props}
         >
-          <div data-popper-arrow ref={arrow.ref} className="tooltipArrow" {...arrow.props} />
+          {arrow && (
+            <div data-popper-arrow ref={arrow.ref} className="tooltipArrow" {...arrow.props} />
+          )}
           <div ref={focusTrapRef}>{isVisible ? children : null}</div>
         </div>
       </Portal>
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 57eb80a3fd2..fe9a4388c07 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -9,16 +9,18 @@ import {
 } from '@keystone-6/fields-document/component-blocks';
 import { PreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/api';
 import { FormValueContentFromPreview } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
-import {
-  SortableList,
-  SortableItem,
-  DragHandle,
-} from '@keystone-6/fields-document/src/DocumentEditor/primitives/sortable';
 import { Button } from '@keystone-ui/button';
 import { jsx, Stack } from '@keystone-ui/core';
-import { FieldContainer, FieldLabel, Select } from '@keystone-ui/fields';
+import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import { AlertDialog } from '@keystone-ui/modals';
 import { useState } from 'react';
+import { EditIcon } from '@keystone-ui/icons/icons/EditIcon';
+import {
+  AddButton,
+  SortableList,
+  SortableItem,
+  DragHandle,
+} from '@keystone-6/fields-document/primitives';
 
 const label = fields.text({ label: 'Label' });
 
@@ -78,7 +80,8 @@ function Preview(props: PreviewProps<Prop>) {
           })}
         </SortableList>
       )}
-      <AddButton options={props.field.element.discriminant.options} insert={props.onInsert} />
+
+      <AddButton options={props.field.element.discriminant.options} onInsert={props.onInsert} />
     </Stack>
   );
 }
@@ -86,56 +89,80 @@ export const prop: Prop = fields.array(conditional, {
   preview: Preview,
 });
 
-function AddButton<Value extends string>(props: {
-  options: readonly { label: string; value: Value }[];
-  insert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
-}) {
-  return (
-    <Select
-      placeholder="Add"
-      options={props.options}
-      onChange={val => {
-        if (val) {
-          props.insert({ discriminant: val.value } as any);
-        }
-      }}
-      value={null}
-    />
-  );
-}
-
 function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
   const [isEditing, setIsEditing] = useState(false);
+  const [isChildrenOpen, setIsChildrenOpen] = useState(true);
   const label = props.element.options.find(x => x.value === props.element.discriminant)!.label;
   return (
     <SortableItem id={props.id}>
       <Stack gap="medium">
-        <Stack across align="center">
-          <DragHandle />
-          <Button
-            onClick={() => {
-              setIsEditing(true);
-            }}
-          >
-            Edit {label}
-          </Button>
-          <AlertDialog
-            title={`Edit ${label}`}
-            actions={{
-              confirm: {
-                action: () => {
-                  setIsEditing(false);
+        <div css={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Stack across gap="xsmall" align="center">
+            <DragHandle />
+            <button
+              onClick={() => {
+                setIsEditing(true);
+              }}
+              css={{
+                border: '0',
+                background: 'transparent',
+                cursor: 'pointer',
+                ':hover,:focus': {
+                  background: '#f0f0f0',
+                },
+
+                borderRadius: 8,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: 24,
+                width: 28,
+              }}
+            >
+              <EditIcon size="small" color="#596794" />
+            </button>
+            <div
+              css={{
+                background: '#F6F8FC',
+                border: '1px solid #E9EBF3',
+                height: 32,
+                width: 32,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 4,
+              }}
+            >
+              {label.slice(0, 2)}
+            </div>
+
+            <AlertDialog
+              title={`Edit ${label}`}
+              actions={{
+                confirm: {
+                  action: () => {
+                    setIsEditing(false);
+                  },
+                  label: 'Done',
                 },
-                label: 'Done',
-              },
-            }}
-            isOpen={isEditing}
-          >
-            <FormValueContentFromPreview {...props.element.value} />
-          </AlertDialog>
-          <div>{props.element.value.fields.label.value}</div>
-        </Stack>
-        {props.element.discriminant === 'group' && (
+              }}
+              isOpen={isEditing}
+            >
+              <FormValueContentFromPreview {...props.element.value} />
+            </AlertDialog>
+            <div>{props.element.value.fields.label.value}</div>
+          </Stack>
+          {props.element.discriminant === 'group' && (
+            <Button
+              onClick={() => {
+                setIsChildrenOpen(!isChildrenOpen);
+              }}
+            >
+              {isChildrenOpen ? 'Close' : 'Open'}
+            </Button>
+          )}
+        </div>
+        {isChildrenOpen && props.element.discriminant === 'group' && (
           <Preview {...props.element.value.fields.children} />
         )}
       </Stack>
diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index f1e2e1d4a39..8e6921289bd 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -41,6 +41,7 @@
     "@types/react": "^17.0.37",
     "apollo-server-errors": "^3.3.0",
     "apply-ref": "^1.0.0",
+    "downshift": "^6.1.7",
     "fp-ts": "^2.11.5",
     "graphql": "^15.8.0",
     "io-ts": "^2.2.16",
@@ -71,4 +72,4 @@
   "engines": {
     "node": "^14.15 || ^16.13"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
new file mode 100644
index 00000000000..eb999534bec
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
@@ -0,0 +1,86 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { Button } from '@keystone-ui/button';
+import { Box, jsx, Stack } from '@keystone-ui/core';
+import { PlusCircleIcon } from '@keystone-ui/icons/icons/PlusCircleIcon';
+import { PopoverDialog, usePopover } from '@keystone-ui/popover';
+import { useSelect } from 'downshift';
+
+export function AddButton<Value extends string>(props: {
+  options: readonly { label: string; value: Value }[];
+  onInsert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
+}) {
+  const { dialog, trigger, isOpen, setOpen } = usePopover({
+    modifiers: [{ name: 'offset', options: { offset: [0, 4] } }],
+  });
+  //   if (!isOpen) {
+  //     setOpen(true);
+  //   }
+  const { getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex } = useSelect<{
+    label: string;
+    value: Value;
+  }>({
+    items: props.options as typeof props.options[number][],
+    itemToString: x => x?.label ?? '',
+    selectedItem: null,
+    onSelectedItemChange: ({ selectedItem }) => {
+      if (selectedItem) {
+        props.onInsert({ discriminant: selectedItem.value } as any);
+      }
+    },
+    onIsOpenChange: ({ isOpen }) => {
+      setOpen(!!isOpen);
+    },
+    isOpen,
+  });
+  return (
+    <div>
+      <Button
+        {...getToggleButtonProps({
+          ref: trigger.ref,
+          ...trigger.props,
+        })}
+        tone="active"
+        weight="bold"
+      >
+        <span css={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
+          <PlusCircleIcon size="smallish" /> <span>Add</span>
+        </span>
+      </Button>
+      <PopoverDialog isVisible={isOpen}>
+        <button />
+        <Stack
+          {...getMenuProps({ ref: dialog.ref, ...dialog.props })}
+          gap="xsmall"
+          paddingY="small"
+          paddingX="small"
+          background="white"
+          css={{
+            minWidth: 120,
+            boxShadow: '0px 8px 11px -2px rgba(9, 30, 66, 0.12), 0px 0px 1px rgba(9, 30, 66, 0.31)',
+            borderRadius: 8,
+            listStyle: 'none',
+          }}
+        >
+          {props.options.map((option, i) => {
+            return (
+              <Box
+                key={option.value}
+                {...getItemProps({ item: option, index: i, role: 'menuitemradio' })}
+                css={{
+                  cursor: 'pointer',
+                  backgroundColor: highlightedIndex === i ? '#F6F8FC' : '',
+                  borderRadius: 4,
+                }}
+                paddingX="medium"
+                paddingY="small"
+              >
+                {option.label}
+              </Box>
+            );
+          })}
+        </Stack>
+      </PopoverDialog>
+    </div>
+  );
+}
diff --git a/packages/fields-document/src/DocumentEditor/primitives/index.tsx b/packages/fields-document/src/DocumentEditor/primitives/index.tsx
index ca8ce87be2b..ebc08e81f29 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/index.tsx
@@ -1,2 +1,4 @@
 export * from './inline-dialog';
 export * from './toolbar';
+export { AddButton } from './add-button';
+export * from './sortable';
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index de993be9a4d..019ee810921 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -118,9 +118,8 @@ export function SortableItem(props: { id: string; children: ReactNode }) {
           style={{
             pointerEvents: isDragging ? 'none' : undefined,
             transform: `scale(${isDragging ? '1.02' : '1'})`,
-            boxShadow: isDragging
-              ? 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 10px 5px 0px'
-              : 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
+            border: '1px solid #DADEEB',
+            boxShadow: '0px 1px 4px rgba(9, 30, 66, 0.04)',
           }}
           css={{
             backgroundColor: 'white',
@@ -193,14 +192,10 @@ export function DragHandle() {
 }
 
 export const dragIcon = (
-  <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#939393">
-      <circle cy="6" cx="6" r="2" />
-      <circle cy="6" cx="12" r="2" />
-      <circle cy="12" cx="6" r="2" />
-      <circle cy="12" cx="12" r="2" />
-      <circle cy="18" cx="6" r="2" />
-      <circle cy="18" cx="12" r="2" />
-    </g>
+  <svg width="20" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6 4h3v3H6V4Zm5 0h3v3h-3V4ZM9 9H6v3h3V9Zm2 0h3v3h-3V9Zm-2 5H6v3h3v-3Zm2 0h3v3h-3v-3Z"
+      fill="#B7BFD7"
+    />
   </svg>
 );
diff --git a/packages/fields-document/src/primitives.ts b/packages/fields-document/src/primitives.ts
index b4024203de9..280e8ef97da 100644
--- a/packages/fields-document/src/primitives.ts
+++ b/packages/fields-document/src/primitives.ts
@@ -4,4 +4,8 @@ export {
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarSpacer,
+  AddButton,
+  DragHandle,
+  SortableItem,
+  SortableList,
 } from './DocumentEditor/primitives';
diff --git a/yarn.lock b/yarn.lock
index dce1e24f1b8..bc4f83cc661 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1182,6 +1182,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.14.8":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
+  integrity sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -5516,6 +5523,17 @@ dotenv@^8.1.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
   integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
 
+downshift@^6.1.7:
+  version "6.1.7"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-6.1.7.tgz#fdb4c4e4f1d11587985cd76e21e8b4b3fa72e44c"
+  integrity sha512-cVprZg/9Lvj/uhYRxELzlu1aezRcgPWBjTvspiGTVEU64gF5pRdSRKFVLcxqsZC637cLAGMbL40JavEfWnqgNg==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+    compute-scroll-into-view "^1.0.17"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    tslib "^2.3.0"
+
 dumb-passwords@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/dumb-passwords/-/dumb-passwords-0.2.1.tgz#efaba4fdc13b27d446d4b11a5f303357649ada32"
@@ -10868,7 +10886,7 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

From 25f33904a3fd4e55404388f25a4029896fa11bc1 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 16 Mar 2022 13:56:19 +1000
Subject: [PATCH 024/124] Preview props memoization

---
 .../DocumentEditor/component-blocks/api.tsx   |  23 +
 .../component-blocks/initial-values.ts        |  24 +-
 .../component-blocks/preview-props.test.ts    |  86 +++
 .../component-blocks/preview-props.tsx        | 544 ++++++++++--------
 4 files changed, 425 insertions(+), 252 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 7b3d3bbf44a..fe918366ee5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -782,6 +782,29 @@ type ExtractPropFromComponentPropFieldForRendering<Prop extends ComponentPropFie
     ? readonly ExtractPropFromComponentPropFieldForRendering<ElementField>[]
     : never;
 
+export type ValueForComponentPropField<Prop extends ComponentPropField> = Prop extends ChildField
+  ? null
+  : Prop extends FormField<infer Value, any>
+  ? Value
+  : Prop extends ObjectField<infer Value>
+  ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForRendering<Value[Key]> }
+  : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+  ? {
+      readonly [Key in keyof Values]: {
+        readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+        readonly value: ExtractPropFromComponentPropFieldForRendering<
+          CastToComponentPropField<Values[Key]>
+        >;
+      };
+    }[keyof Values]
+  : Prop extends RelationshipField<infer Many>
+  ? Many extends true
+    ? readonly HydratedRelationshipData[]
+    : HydratedRelationshipData | null
+  : Prop extends ArrayField<infer ElementField>
+  ? readonly ExtractPropFromComponentPropFieldForRendering<ElementField>[]
+  : never;
+
 type ExtractPropsForPropsForRendering<Props extends Record<string, ComponentPropField>> = {
   readonly [Key in keyof Props]: ExtractPropFromComponentPropFieldForRendering<Props[Key]>;
 };
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 34c9b860fbf..7c27555e0d5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -107,11 +107,17 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
     case 'conditional': {
       return {
         discriminant: updater.discriminant,
-        value: updateValue(
-          prop.values[updater.discriminant.toString()],
-          currentValue.value,
-          updater.value
-        ),
+        value:
+          updater.discriminant === currentValue.discriminant
+            ? updateValue(
+                prop.values[updater.discriminant.toString()],
+                currentValue.value,
+                updater.value
+              )
+            : getInitialPropsValueFromInitializer(
+                prop.values[updater.discriminant.toString()],
+                updater.value
+              ),
       };
     }
     case 'object': {
@@ -153,10 +159,10 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
       );
       const val = newVal.map((x, i) => {
         const id = keys[i];
-        const prevVal = prevValuesByKey.has(id)
-          ? prevValuesByKey.get(id)
-          : getInitialPropsValue(prop.element);
-        return updateValue(prop.element, prevVal, x.value);
+        if (prevValuesByKey.has(id)) {
+          return updateValue(prop.element, prevValuesByKey.get(id), x.value);
+        }
+        return getInitialPropsValueFromInitializer(prop.element, x.value);
       });
       setElementIdsForArrayValue(val, keys);
       return val;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
new file mode 100644
index 00000000000..43d8c26df0e
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
@@ -0,0 +1,86 @@
+import { assert } from '../utils';
+import { fields } from './api';
+import { getInitialPropsValue } from './initial-values';
+import { createGetPreviewProps } from './preview-props';
+
+test('onChange on a conditional field updates props.value', () => {
+  const field = fields.conditional(fields.checkbox({ label: '' }), {
+    true: fields.text({ label: '' }),
+    false: fields.array(fields.checkbox({ label: '' })),
+  });
+  let val = getInitialPropsValue(field);
+  const getPreviewProps = createGetPreviewProps(field, newVal => {
+    val = newVal(val);
+    props = getPreviewProps(val);
+  });
+  let props = getPreviewProps(val);
+  assert(props.discriminant === false);
+  expect(props.value.field).toBe(field.values.false);
+  props.onChange(true);
+  expect(props.discriminant).toBe(true);
+  expect(props.value.field).toBe(field.values.true);
+});
+
+// note props.value is the preview props for the value of the conditional field, not the value itself
+test("onChange on a conditional field updates props.value where the value doesn't change", () => {
+  const field = fields.conditional(fields.checkbox({ label: '' }), {
+    true: fields.text({ label: 'true' }),
+    false: fields.text({ label: 'false' }),
+  });
+  let val = getInitialPropsValue(field);
+  const getPreviewProps = createGetPreviewProps(field, newVal => {
+    val = newVal(val);
+    props = getPreviewProps(val);
+  });
+  let props = getPreviewProps(val);
+  assert(props.discriminant === false);
+  expect(props.value.field).toBe(field.values.false);
+  props.onChange(true);
+  expect(props.discriminant).toBe(true);
+  expect(props.value.field).toBe(field.values.true);
+});
+
+test("array fields don't keep the props of an array item around after removing the item", () => {
+  const field = fields.array(fields.text({ label: '' }));
+  let val = getInitialPropsValue(field);
+  const getPreviewProps = createGetPreviewProps(field, newVal => {
+    val = newVal(val);
+    props = getPreviewProps(val);
+  });
+  let props = getPreviewProps(val);
+  props.onChange([
+    { id: '1', value: 'blah' },
+    { id: '2', value: 'blah2' },
+  ]);
+
+  let elementsBeforeChange = props.elements;
+  props.onChange([{ id: '2' }]);
+  expect(props.elements[0].element).toBe(elementsBeforeChange[1].element);
+  expect(props.elements[0]).toBe(elementsBeforeChange[1]);
+  props.onChange([{ id: '2' }, { id: '1', value: 'blah' }]);
+  expect(props.elements[1].element).not.toBe(elementsBeforeChange[0].element);
+  expect(props.elements[1]).not.toBe(elementsBeforeChange[0]);
+});
+
+test('the props of two array fields in a conditional field change when the discriminant changes', () => {
+  const field = fields.conditional(fields.checkbox({ label: '' }), {
+    true: fields.array(fields.array(fields.text({ label: '' }))),
+    false: fields.array(fields.checkbox({ label: '' })),
+  });
+  let val = getInitialPropsValue(field);
+  const getPreviewProps = createGetPreviewProps(field, newVal => {
+    val = newVal(val);
+    props = getPreviewProps(val);
+  });
+  let props = getPreviewProps(val);
+  assert(props.discriminant === false);
+  let prevOnInsert = props.value.onInsert;
+  props.onChange(true);
+  props = getPreviewProps(val);
+  assert(props.discriminant === true);
+  expect(prevOnInsert).not.toBe(props.value.onInsert);
+  props.value.onInsert([{ id: undefined, value: 'blah' }]);
+  expect(props.value.elements).toHaveLength(1);
+  expect(props.value.elements[0].element.elements).toHaveLength(1);
+  expect(props.value.elements[0].element.elements[0].element.value).toEqual('blah');
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 15237c446fb..d2a5fc71729 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -1,18 +1,18 @@
 import React, { ReactElement, useContext } from 'react';
 import { arrayMove } from '@dnd-kit/sortable';
-import weakMemoize from '@emotion/weak-memoize';
 import {
   ArrayField,
   ComponentPropField,
   ConditionalField,
+  ValueForComponentPropField,
   FormField,
   FormFieldValue,
+  HydratedRelationshipData,
   ObjectField,
   PreviewProps,
   RelationshipField,
 } from './api';
 import { updateValue, getInitialPropsValueFromInitializer } from './initial-values';
-import { assertNever } from './utils';
 
 const arrayValuesToElementIds = new WeakMap<readonly unknown[], string[]>();
 
@@ -39,296 +39,352 @@ function ChildFieldEditable({ path }: { path: readonly string[] }) {
   return useContext(ChildrenByPathContext)[JSON.stringify(path)];
 }
 
-export function createGetPreviewProps<Field extends ComponentPropField>(
-  rootProp: Field,
-  rootOnChange: (cb: (val: any) => any) => void
-) {
-  const innerOnChangeCacheForObjectAndArrayField = new WeakMap<
-    (cb: (val: any) => any) => any,
-    Map<string, (cb: (val: any) => any) => any>
-  >();
-
-  const onChangeCacheForObjectAndConditionalField = new WeakMap<
-    (cb: (val: any) => any) => void,
-    (...args: any[]) => void
-  >();
+function castToMemoizedInfoForProp<
+  T extends {
+    [Kind in ComponentPropField['kind']]: (
+      prop: Extract<ComponentPropField, { kind: Kind }>,
+      onChange: (
+        cb: (
+          prevVal: ValueForComponentPropField<Extract<ComponentPropField, { kind: Kind }>>
+        ) => ValueForComponentPropField<Extract<ComponentPropField, { kind: Kind }>>
+      ) => void
+    ) => unknown;
+  }
+>(val: T): T {
+  return val;
+}
 
-  const onChangeCacheForArrayField = new WeakMap<
-    (...args: any[]) => any,
-    {
-      readonly onChange: (value: any) => void;
-      readonly onMove: (from: number, to: number) => void;
-      readonly onInsert: (initial?: any, index?: number) => void;
-      readonly onRemove: (index: number) => void;
-    }
-  >();
+const memoizedInfoForProp = castToMemoizedInfoForProp({
+  form(prop, onChange) {
+    return (newVal: unknown) => onChange(() => newVal);
+  },
+  array(prop, onChange) {
+    return {
+      rawOnChange: onChange,
+      inner: new Map<
+        string,
+        {
+          onChange: (cb: (val: unknown) => unknown) => void;
+          inner: { id: string; element: unknown };
+        }
+      >(),
+      props: {
+        onInsert(initial?: unknown, index?: number) {
+          onChange(value => {
+            const newValue = [...(value as unknown[])];
 
-  const emptyMap = () => new Map<string, (cb: (val: any) => any) => void>();
+            newValue.splice(
+              index ?? newValue.length,
+              0,
+              getInitialPropsValueFromInitializer(prop.element, initial)
+            );
+            const keys = getElementIdsForArrayValue(value as readonly unknown[]);
+            setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
+            return newValue;
+          });
+        },
+        onMove(from: number, to: number) {
+          onChange(value => {
+            const newValue = arrayMove(value as unknown[], from, to);
+            const keys = getElementIdsForArrayValue(value as readonly unknown[]);
+            setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
+            return newValue;
+          });
+        },
+        onChange(updater: readonly { id?: string; value?: unknown }[]) {
+          onChange(value => updateValue(prop, value, updater));
+        },
+        onRemove(index: number) {
+          onChange(value => {
+            const newValue = (value as unknown[]).filter((_, i) => i !== index);
+            const keys = getElementIdsForArrayValue(value as readonly unknown[]);
+            setElementIdsForArrayValue(
+              newValue,
+              keys.filter((_, i) => i !== index)
+            );
+            return newValue;
+          });
+        },
+      },
+    };
+  },
+  child() {},
+  conditional(prop, onChange) {
+    return {
+      onChange: (discriminant: string | boolean, value?: unknown) =>
+        onChange(val => updateValue(prop, val, { discriminant, value })),
+      onChangeForValue: (cb: (prevVal: unknown) => unknown) =>
+        onChange(val => ({ discriminant: val.discriminant, value: cb(val.value) })),
+    };
+  },
+  object(prop, onChange) {
+    return {
+      onChange: (updater: Record<string, unknown>) => {
+        onChange(value => updateValue(prop, value, updater));
+      },
+      innerOnChanges: Object.fromEntries(
+        Object.keys(prop.value).map(key => {
+          return [
+            key,
+            (newVal: (prevVal: unknown) => unknown) => {
+              onChange(val => ({ ...(val as any), [key]: newVal((val as any)[key]) }));
+            },
+          ];
+        })
+      ),
+    };
+  },
+  relationship(prop, onChange) {
+    return (newVal: HydratedRelationshipData | readonly HydratedRelationshipData[] | null) =>
+      onChange(() => newVal);
+  },
+});
 
-  type GeneralMap<K, V> = {
-    has(key: K): boolean;
-    get(key: K): V | undefined;
-    set(key: K, value: V): void;
-  };
+type GeneralMap<K, V> = {
+  has(key: K): boolean;
+  get(key: K): V | undefined;
+  set(key: K, value: V): void;
+};
 
-  function getOrInsert<K, V>(map: GeneralMap<K, V>, key: K, val: (key: K) => V): V {
-    if (!map.has(key)) {
-      map.set(key, val(key));
-    }
-    return map.get(key)!;
+function getOrInsert<K, V>(map: GeneralMap<K, V>, key: K, val: (key: K) => V): V {
+  if (!map.has(key)) {
+    map.set(key, val(key));
   }
+  return map.get(key)!;
+}
 
-  const makeOnChangeForFormAndRelationshipFields = weakMemoize(
-    (onChange: (cb: (prevVal: any) => any) => void) => {
-      return (newVal: FormFieldValue) => {
-        onChange(() => newVal);
-      };
-    }
-  );
-
-  const makeOnChangeForValueOfConditionalField = weakMemoize(
-    (onChange: (cb: (prevVal: any) => any) => void) => {
-      return (val: (prevVal: any) => any) => {
-        onChange(prev => ({
-          discriminant: prev.discriminant,
-          value: val(prev.value),
-        }));
+export function createGetPreviewProps<Field extends ComponentPropField>(
+  rootProp: Field,
+  rootOnChange: (
+    cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+  ) => void
+) {
+  const previewPropsFactories: {
+    [Kind in ComponentPropField['kind']]: (
+      prop: Extract<ComponentPropField, { kind: Kind }>,
+      value: ValueForComponentPropField<Extract<ComponentPropField, { kind: Kind }>>,
+      memoized: ReturnType<typeof memoizedInfoForProp[Kind]>,
+      path: readonly string[],
+      getInnerProp: <Field extends ComponentPropField>(
+        prop: Field,
+        value: ValueForComponentPropField<Field>,
+        onChange: (
+          cb: (prevVal: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+        ) => void,
+        key: string
+      ) => PreviewProps<Field>
+    ) => PreviewProps<Extract<ComponentPropField, { kind: Kind }>>;
+  } = {
+    form(prop, value, onChange) {
+      return {
+        value: value as FormFieldValue,
+        onChange,
+        options: prop.options,
+        field: prop,
       };
-    }
-  );
+    },
+    child(prop, value, onChange, path) {
+      return <ChildFieldEditable path={path} />;
+    },
+    object(prop, value, memoized, path, getInnerProp) {
+      const fields: Record<string, PreviewProps<ComponentPropField>> = {};
 
-  function getPreviewPropsForProp(
-    prop: ComponentPropField,
-    value: unknown,
-    path: readonly string[],
-    onChange: (cb: (prevVal: any) => any) => void,
-    getInnerProp: (
-      prop: ComponentPropField,
-      value: unknown,
-      path: readonly string[],
-      onChange: (cb: (prevVal: any) => any) => void
-    ) => any
-  ): any {
-    switch (prop.kind) {
-      case 'form':
-        const props: PreviewProps<FormField<FormFieldValue, unknown>> = {
-          value: value as FormFieldValue,
-          onChange: makeOnChangeForFormAndRelationshipFields(onChange),
-          options: prop.options,
-          field: prop,
-        };
-        return props;
-      case 'child':
-        return <ChildFieldEditable path={path} />;
-      case 'object': {
-        const fields: Record<string, any> = {};
-        const onChangeCache = getOrInsert(
-          innerOnChangeCacheForObjectAndArrayField,
-          onChange,
-          emptyMap
+      Object.keys(prop.value).forEach(key => {
+        fields[key] = getInnerProp(
+          prop.value[key],
+          (value as any)[key],
+          memoized.innerOnChanges[key],
+          key
         );
-        const getOnChange = (key: string) => {
-          return (newVal: (prevVal: any) => any) => {
-            onChange(val => ({ ...val, [key]: newVal(val[key]) }));
-          };
-        };
-        Object.keys(prop.value).forEach(key => {
-          const onChange = getOrInsert(onChangeCache, key, getOnChange);
-          fields[key] = getInnerProp(
-            prop.value[key],
-            (value as any)[key],
-            path.concat(key),
-            onChange
-          );
-        });
-
-        const previewProps: PreviewProps<ObjectField<Record<string, ComponentPropField>>> = {
-          fields,
-          onChange: getOrInsert(
-            onChangeCacheForObjectAndConditionalField,
-            onChange,
-            () => updater => {
-              onChange(value => updateValue(prop, value, updater));
-            }
-          ),
-          field: prop,
-        };
-        return previewProps;
-      }
-      case 'relationship': {
-        const props: PreviewProps<RelationshipField<boolean>> = {
-          value: value as any,
-          onChange: makeOnChangeForFormAndRelationshipFields(onChange),
-          field: prop,
-        };
-        return props;
-      }
-      case 'conditional': {
-        const conditionalValue = value as { discriminant: string | boolean; value: unknown };
-        const props: PreviewProps<
-          ConditionalField<
-            FormField<string | boolean, unknown>,
-            { [key: string]: ComponentPropField }
-          >
-        > = {
-          discriminant: (value as any).discriminant,
-          onChange: getOrInsert(
-            onChangeCacheForObjectAndConditionalField,
-            onChange,
-            () => (discriminant, value) => {
-              onChange(val => updateValue(prop, val, { discriminant, value }));
-            }
-          ),
-          options: prop.discriminant.options,
-          value: getInnerProp(
-            prop.values[conditionalValue.discriminant.toString()],
-            conditionalValue.value,
-            path.concat('value'),
-            makeOnChangeForValueOfConditionalField(onChange)
-          ),
-          field: prop,
-        };
-        return props;
-      }
-      case 'array': {
-        const arrayValue = value as readonly unknown[];
-        const keys = getElementIdsForArrayValue(arrayValue);
+      });
 
-        const onChangeArrayItem = (key: string) => (val: (val: any) => any) => {
-          onChange(prev => {
-            const keys = getElementIdsForArrayValue(prev);
-            const index = keys.indexOf(key);
-            const newValue = [...prev];
-            newValue[index] = val(newValue[index]);
-            setElementIdsForArrayValue(newValue, keys);
-            return newValue;
-          });
-        };
-        const onChangeCache = getOrInsert(
-          innerOnChangeCacheForObjectAndArrayField,
-          onChange,
-          emptyMap
-        );
-        const props: PreviewProps<ArrayField<ComponentPropField>> = {
-          elements: arrayValue.map((val, i) => {
-            const key = keys[i];
+      const previewProps: PreviewProps<ObjectField<Record<string, ComponentPropField>>> = {
+        fields,
+        onChange: memoized.onChange,
+        field: prop,
+      };
+      return previewProps;
+    },
+    array(prop, value, memoized, path, getInnerProp) {
+      const arrayValue = value as readonly unknown[];
+      const keys = getElementIdsForArrayValue(arrayValue);
 
-            return {
-              id: keys[i],
-              element: getInnerProp(
-                prop.element,
-                val,
-                path.concat(key),
-                getOrInsert(onChangeCache, key, onChangeArrayItem)
-              ),
-            };
-          }),
-          field: prop,
-          ...getOrInsert(onChangeCacheForArrayField, onChange, () => ({
-            onInsert(initial, index) {
-              onChange(value => {
-                const newValue = [...(value as unknown[])];
+      const unusedKeys = new Set(getElementIdsForArrayValue(value));
 
-                newValue.splice(
-                  index ?? newValue.length,
-                  0,
-                  getInitialPropsValueFromInitializer(prop.element, initial)
-                );
-                const keys = getElementIdsForArrayValue(value);
-                setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
+      const props: PreviewProps<ArrayField<ComponentPropField>> = {
+        elements: arrayValue.map((val, i) => {
+          const key = keys[i];
+          unusedKeys.delete(key);
+          const element = getOrInsert(memoized.inner, key, () => {
+            const onChange = (val: (val: unknown) => unknown) => {
+              memoized.rawOnChange(prev => {
+                const keys = getElementIdsForArrayValue(prev as readonly unknown[]);
+                const index = keys.indexOf(key);
+                const newValue = [...(prev as readonly unknown[])];
+                newValue[index] = val(newValue[index]);
+                setElementIdsForArrayValue(newValue, keys);
                 return newValue;
               });
-            },
-            onMove(from, to) {
-              onChange(value => {
-                const newValue = arrayMove(value as unknown[], from, to);
-                const keys = getElementIdsForArrayValue(value);
-                setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
-                return newValue;
-              });
-            },
-            onChange(updater) {
-              onChange(value => updateValue(prop, value, updater));
-            },
-            onRemove(index) {
-              onChange(value => {
-                const newValue = (value as unknown[]).filter((_, i) => i !== index);
-                const keys = getElementIdsForArrayValue(value);
-                setElementIdsForArrayValue(
-                  newValue,
-                  keys.filter((_, i) => i !== index)
-                );
-                return newValue;
-              });
-            },
-          })),
-        };
-        return props;
-      }
-      default: {
-        assertNever(prop);
+            };
+            return {
+              inner: {
+                element: getInnerProp(prop.element, val, onChange, key),
+                id: key,
+              },
+              onChange,
+            };
+          });
+          const currentInnerProp = getInnerProp(prop.element, val, element.onChange, key);
+          if (element.inner.element !== currentInnerProp) {
+            element.inner = {
+              element: currentInnerProp,
+              id: key,
+            };
+          }
+          return element.inner as { id: string; element: typeof currentInnerProp };
+        }),
+        field: prop,
+        ...memoized.props,
+      };
+      for (const key of unusedKeys) {
+        memoized.inner.delete(key);
       }
-    }
+      return props;
+    },
+    relationship(prop, value, onChange) {
+      const props: PreviewProps<RelationshipField<boolean>> = {
+        value: value,
+        onChange,
+        field: prop,
+      };
+      return props;
+    },
+    conditional(prop, value, memoized, path, getInnerProp) {
+      const props: PreviewProps<
+        ConditionalField<
+          FormField<string | boolean, unknown>,
+          { [key: string]: ComponentPropField }
+        >
+      > = {
+        discriminant: value.discriminant as any,
+        onChange: memoized.onChange,
+        options: prop.discriminant.options,
+        value: getInnerProp(
+          prop.values[value.discriminant.toString()],
+          value.value,
+          memoized.onChangeForValue,
+          'value'
+        ),
+        field: prop,
+      };
+      return props;
+    },
+  };
+
+  function getPreviewPropsForProp<Field extends ComponentPropField>(
+    prop: Field,
+    value: unknown,
+    memoedThing: { __memoizedThing: true },
+    path: readonly string[],
+    getInnerProp: <Field extends ComponentPropField>(
+      prop: Field,
+      value: ValueForComponentPropField<Field>,
+      onChange: (
+        cb: (prevVal: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+      ) => void,
+      key: string
+    ) => PreviewProps<Field>
+  ): PreviewProps<Field> {
+    return previewPropsFactories[prop.kind](
+      prop as any,
+      value as any,
+      memoedThing as any,
+      path,
+      getInnerProp
+    ) as any;
   }
+
   function getInitialMemoState<Field extends ComponentPropField>(
     prop: Field,
-    value: unknown,
-    onChange: (cb: (val: unknown) => unknown) => void,
+    value: ValueForComponentPropField<Field>,
+    onChange: (
+      cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+    ) => void,
     path: readonly string[]
   ): MemoState<Field> {
     let innerState = new Map<string, MemoState<ComponentPropField>>();
-    let state = {
+    const blah = (
+      memoizedInfoForProp[prop.kind] as (
+        prop: ComponentPropField,
+        onChange: (
+          cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+        ) => void
+      ) => any
+    )(prop, onChange);
+    let state: MemoState<ComponentPropField> = {
       value,
       inner: innerState,
-      props: getPreviewPropsForProp(prop, value, path, onChange, (prop, value, path, onChange) => {
-        const state = getInitialMemoState(prop, value, onChange, path);
-        const lastPathEntry = path[path.length - 1];
-        innerState.set(lastPathEntry, state);
+      props: getPreviewPropsForProp(prop, value, blah, path, (prop, value, onChange, key) => {
+        const state = getInitialMemoState(prop, value, onChange, path.concat(key));
+        innerState.set(key, state);
         return state.props;
       }),
+      field: prop,
+      cached: blah,
     };
-    return state;
+    return state as MemoState<Field>;
   }
   function getUpToDateProps<Field extends ComponentPropField>(
     prop: Field,
-    value: unknown,
-    onChange: (cb: (val: unknown) => unknown) => void,
+    value: ValueForComponentPropField<Field>,
+    onChange: (
+      cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+    ) => void,
     memoState: MemoState<Field>,
     path: readonly string[]
   ): PreviewProps<Field> {
+    if (memoState.field !== prop) {
+      Object.assign(memoState, getInitialMemoState(prop, value, onChange, path));
+      return memoState.props;
+    }
     if (memoState.value === value) {
       return memoState.props;
     }
     memoState.value = value;
+    const unusedKeys = new Set(memoState.inner.keys());
     memoState.props = getPreviewPropsForProp(
       prop,
       value,
+      memoState.cached as any,
       path,
-      onChange,
-      (prop, value, path, onChange) => {
-        const innerMemoStateKey = path[path.length - 1];
+      (prop, value, onChange, innerMemoStateKey) => {
+        unusedKeys.delete(innerMemoStateKey);
         if (!memoState.inner.has(innerMemoStateKey)) {
-          const innerState = getInitialMemoState(prop, value, onChange, path);
+          const innerState = getInitialMemoState(
+            prop,
+            value,
+            onChange,
+            path.concat(innerMemoStateKey)
+          );
           memoState.inner.set(innerMemoStateKey, innerState);
           return innerState.props;
         }
-        return getUpToDateProps(
+        return getUpToDateProps<typeof prop>(
           prop,
           value,
           onChange,
-          memoState.inner.get(innerMemoStateKey)!,
-          path
+          memoState.inner.get(innerMemoStateKey) as MemoState<typeof prop>,
+          path.concat(innerMemoStateKey)
         );
       }
     );
+    for (const key of unusedKeys) {
+      memoState.inner.delete(key);
+    }
     return memoState.props;
   }
-  let memoState: {
-    props: PreviewProps<Field>;
-    value: unknown;
-    inner: Map<string, MemoState<ComponentPropField>>;
-  };
-  return (value: unknown): PreviewProps<Field> => {
+  let memoState: MemoState<Field>;
+  return (value: ValueForComponentPropField<Field>): PreviewProps<Field> => {
     if (memoState === undefined) {
       memoState = getInitialMemoState(rootProp, value, rootOnChange, []);
       return memoState.props;
@@ -340,6 +396,8 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
 type MemoState<Field extends ComponentPropField> = {
   props: PreviewProps<Field>;
   value: unknown;
+  field: Field;
+  cached: ReturnType<typeof memoizedInfoForProp[Field['kind']]>;
   inner: Map<string, MemoState<ComponentPropField>>;
 };
 
@@ -360,10 +418,10 @@ type MemoState<Field extends ComponentPropField> = {
 //       element.props,
 //       (prop, value, currentPath) => {
 //         if (prop.kind === 'array' && areArraysEqual(path, currentPath)) {
-//           nextIdx = (value as any[]).length;
-//           const newVal = [...(value as any[]), elementVal];
+//           nextIdx = (value as unknown[]).length;
+//           const newVal = [...(value as unknown[]), elementVal];
 //           setElementIdsForArrayValue(newVal, [
-//             ...getElementIdsForArrayValue(value as any[]),
+//             ...getElementIdsForArrayValue(value as unknown[]),
 //             getNewArrayElementId(),
 //           ]);
 //           return newVal;

From 576aabbc2519deeade7d3acf7e1a7e46047c5122 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 17 Mar 2022 11:54:19 +1000
Subject: [PATCH 025/124] Improvements to array fields in document editor

---
 .../basic/admin/fieldViews/Content.tsx        |  17 +-
 .../component-blocks/array-field.test.tsx     |  12 +-
 .../component-blocks/field-assertions.test.ts |  38 +-
 .../component-blocks/field-assertions.ts      |  29 +-
 .../DocumentEditor/component-blocks/index.tsx | 333 +++++++++++++++++-
 .../component-blocks/preview-props.tsx        |   7 +-
 .../with-component-blocks.tsx                 |   3 -
 .../DocumentEditor/primitives/add-button.tsx  |   2 +-
 .../src/component-graphql-input.tsx           | 112 +++---
 packages/fields-document/src/component.ts     |   7 +-
 packages/fields-document/src/index.ts         |  64 +---
 11 files changed, 453 insertions(+), 171 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 41caefe0432..444c192f586 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -16,6 +16,7 @@ import {
 } from '@keystone-6/fields-document/primitives';
 import { useEffect } from 'react';
 import { Button } from '@keystone-ui/button';
+import { prop as blah } from './Blah';
 
 const noticeIconMap = {
   info: InfoIcon,
@@ -25,6 +26,11 @@ const noticeIconMap = {
 };
 
 export const componentBlocks = {
+  navigation: component({
+    component: () => <NotEditable>empty</NotEditable>,
+    props: { blah },
+    label: 'Navigation',
+  }),
   thing: component({
     component: props => {
       return (
@@ -148,15 +154,6 @@ export const componentBlocks = {
               </li>
             ))}
           </ul>
-          <NotEditable>
-            <Button
-              onClick={() => {
-                props.fields.children.onInsert();
-              }}
-            >
-              Add
-            </Button>
-          </NotEditable>
         </div>
       );
     },
@@ -169,7 +166,7 @@ export const componentBlocks = {
         })
       ),
     },
-    chromeless: true,
+    // chromeless: true,
   }),
   hero: component({
     component: props => {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 3ca7ca45355..cf6b3bf2b25 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
 import { createGetPreviewProps } from './preview-props';
@@ -12,9 +12,13 @@ const table = component({
       'div',
       null,
       props.fields.children.elements.map(x => {
-        return x.element.elements.map(x => {
-          return x.element.fields.content;
-        });
+        return React.createElement(
+          Fragment,
+          { key: x.id },
+          x.element.elements.map(x => {
+            return React.createElement(Fragment, { key: x.id }, x.element.fields.content);
+          })
+        );
       })
     ),
   label: '',
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
index 5a618b96afe..ad4af4a3eb6 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
@@ -14,7 +14,7 @@ const discriminant = fields.checkbox({ label: '' });
 
 test('does not allow circular object', () => {
   expect(() => {
-    assertValidComponentPropField(easilyCircularObject);
+    assertValidComponentPropField(easilyCircularObject, new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
   );
@@ -22,7 +22,7 @@ test('does not allow circular object', () => {
 
 test('does not allow a circular object within an array', () => {
   expect(() => {
-    assertValidComponentPropField(fields.array(easilyCircularObject));
+    assertValidComponentPropField(fields.array(easilyCircularObject), new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"array.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
   );
@@ -34,7 +34,8 @@ test('does not allow a circular object within a value for a default discriminant
       fields.conditional(discriminant, {
         true: fields.empty(),
         false: easilyCircularObject,
-      })
+      }),
+      new Set()
     );
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"conditional.false.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
@@ -47,7 +48,8 @@ test('does not allow a circular object within a value for a non-default discrimi
       fields.conditional(discriminant, {
         true: easilyCircularObject,
         false: fields.empty(),
-      })
+      }),
+      new Set()
     );
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"conditional.true.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
@@ -65,7 +67,7 @@ test("does allow a circular conditional as long as it's not the default", () =>
     },
     false: fields.empty(),
   });
-  assertValidComponentPropField(conditional);
+  assertValidComponentPropField(conditional, new Set());
 });
 
 test("does not allow a circular conditional if it's the default", () => {
@@ -80,7 +82,7 @@ test("does not allow a circular conditional if it's the default", () => {
     true: fields.empty(),
   });
   expect(() => {
-    assertValidComponentPropField(conditional);
+    assertValidComponentPropField(conditional, new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"conditional.false\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
   );
@@ -99,7 +101,7 @@ test("allows circularity if it's stopped by an array field", () => {
       },
     })
   );
-  assertValidComponentPropField(blah);
+  assertValidComponentPropField(blah, new Set());
 });
 
 test('does not allow a field that returns a different field from a getter each time', () => {
@@ -117,7 +119,7 @@ test('does not allow a field that returns a different field from a getter each t
       })
     );
   expect(() => {
-    assertValidComponentPropField(blah());
+    assertValidComponentPropField(blah(), new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"Fields on an object field must not change over time but the field at \\"array.object.blah\\" changes between accesses"`
   );
@@ -145,6 +147,24 @@ test('exceeds the call stack size for an infinitely recursive field where all fi
     );
   };
   expect(() => {
-    assertValidComponentPropField(blah());
+    assertValidComponentPropField(blah(), new Set());
   }).toThrowErrorMatchingInlineSnapshot(`"Maximum call stack size exceeded"`);
 });
+
+test('relationship field where no list exists with that name', () => {
+  expect(() => {
+    assertValidComponentPropField(
+      fields.object({ a: fields.relationship({ listKey: 'Blah', label: 'Something' }) }),
+      new Set()
+    );
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The relationship field at \\"object.a\\"  has the listKey \\"Blah\\" but no list named \\"Blah\\" exists."`
+  );
+});
+
+test('relationship field where a list exists with that name', () => {
+  assertValidComponentPropField(
+    fields.object({ a: fields.relationship({ listKey: 'Blah', label: 'Something' }) }),
+    new Set(['Blah'])
+  );
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
index 87cc1b37975..ffb8e733f8a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -1,8 +1,11 @@
 import { ComponentPropField } from './api';
 import { assertNever } from './utils';
 
-export function assertValidComponentPropField(prop: ComponentPropField) {
-  assertValidComponentPropFieldInner(prop, [], [], new Set());
+export function assertValidComponentPropField(
+  prop: ComponentPropField,
+  lists: ReadonlySet<string>
+) {
+  assertValidComponentPropFieldInner(prop, [], [], new Set(), lists);
 }
 
 // recursive things can exist but they have to either be:
@@ -14,11 +17,22 @@ function assertValidComponentPropFieldInner(
   prop: ComponentPropField,
   propAncestors: ComponentPropField[],
   propPath: string[],
-  seenProps: Set<ComponentPropField>
+  seenProps: Set<ComponentPropField>,
+  lists: ReadonlySet<string>
 ) {
-  if (prop.kind === 'form' || prop.kind === 'child' || prop.kind === 'relationship') {
+  if (prop.kind === 'form' || prop.kind === 'child') {
     return;
   }
+  if (prop.kind === 'relationship') {
+    if (lists.has(prop.listKey)) {
+      return;
+    }
+    throw new Error(
+      `The relationship field at "${propPath.join('.')}"  has the listKey "${
+        prop.listKey
+      }" but no list named "${prop.listKey}" exists.`
+    );
+  }
   const ancestor = propAncestors.indexOf(prop);
   if (ancestor !== -1) {
     throw new Error(
@@ -34,7 +48,7 @@ function assertValidComponentPropFieldInner(
   try {
     seenProps.add(prop);
     if (prop.kind === 'array') {
-      assertValidComponentPropFieldInner(prop.element, [], propPath, seenProps);
+      assertValidComponentPropFieldInner(prop.element, [], propPath, seenProps, lists);
       return;
     }
     if (prop.kind === 'object') {
@@ -48,7 +62,7 @@ function assertValidComponentPropFieldInner(
             )}" changes between accesses`
           );
         }
-        assertValidComponentPropFieldInner(innerProp, propAncestors, propPath, seenProps);
+        assertValidComponentPropFieldInner(innerProp, propAncestors, propPath, seenProps, lists);
         propPath.pop();
       }
       propAncestors.pop();
@@ -70,7 +84,8 @@ function assertValidComponentPropFieldInner(
           innerProp,
           key === stringifiedDefaultDiscriminant ? propAncestors : [],
           propPath,
-          seenProps
+          seenProps,
+          lists
         );
         propPath.pop();
       }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index ba562a3f934..798feae4530 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -9,9 +9,11 @@ import {
   useState,
   useMemo,
   useCallback,
+  useEffect,
+  useRef,
 } from 'react';
 import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
-import { Editor, Element, Transforms } from 'slate';
+import { Editor, Element, Path, PathRef, Transforms, Node } from 'slate';
 
 import { jsx, useTheme } from '@keystone-ui/core';
 import { Trash2Icon } from '@keystone-ui/icons/icons/Trash2Icon';
@@ -26,11 +28,14 @@ import {
   useElementWithSetNodes,
   useStaticEditor,
 } from '../utils';
+import { assert } from '../utils';
+import { areArraysEqual } from '../document-features-normalization';
 import { clientSideValidateProp, getFieldAtPropPath, ReadonlyPropPath } from './utils';
 import { ChildrenByPathContext, getElementIdsForArrayValue } from './preview-props';
-import { getInitialValue } from './initial-values';
+import { getInitialPropsValue, getInitialValue } from './initial-values';
 import { FormValue } from './edit-mode';
 import { createGetPreviewProps } from './preview-props';
+import { ChildField } from './api';
 
 export { withComponentBlocks } from './with-component-blocks';
 
@@ -115,16 +120,145 @@ export const ComponentBlocksElement = ({
     setEditMode(false);
   }, []);
 
+  const elementToGetPathRef = useRef({ __elementToGetPath, currentElement });
+
+  useEffect(() => {
+    elementToGetPathRef.current = { __elementToGetPath, currentElement };
+  });
+
+  const onPropsChange = useCallback(
+    (cb: (prevProps: Record<string, unknown>) => Record<string, unknown>) => {
+      Editor.withoutNormalizing(editor, () => {
+        const prevProps = elementToGetPathRef.current.currentElement.props;
+        const elementForChildren = elementToGetPathRef.current.__elementToGetPath;
+        let newProps = cb(prevProps);
+        setElement({ props: newProps });
+        const things = findChildPropPathsButDifferent(
+          newProps,
+          prevProps,
+          { kind: 'object', value: componentBlock!.props },
+          [],
+          [],
+          []
+        );
+        const basePath = ReactEditor.findPath(editor, elementForChildren);
+        if (things.length === 0) {
+          const refs = elementForChildren.children.map((_, i) =>
+            Editor.pathRef(editor, [...basePath, i])
+          );
+          for (const ref of refs) {
+            Transforms.removeNodes(editor, {
+              at: ref.unref()!,
+            });
+          }
+          Transforms.insertNodes(
+            editor,
+            { type: 'component-inline-prop', propPath: undefined, children: [{ text: '' }] },
+            { at: [...basePath, 0] }
+          );
+          return;
+        }
+        const initialPropPathsToEditorPath = new Map<undefined | string, Path>();
+        for (const [idx, node] of elementForChildren.children.entries()) {
+          assert(node.type === 'component-block-prop' || node.type === 'component-inline-prop');
+          initialPropPathsToEditorPath.set(
+            node.propPath === undefined ? undefined : JSON.stringify(node.propPath),
+            [...basePath, idx]
+          );
+        }
+        const thingsLeftToAdd = new Set(things);
+        for (const thing of things) {
+          if (thing.prevPath === undefined) {
+            continue;
+          }
+          const stringifiedPath = JSON.stringify(thing.prevPath);
+          const editorPath = initialPropPathsToEditorPath.get(stringifiedPath);
+          if (editorPath) {
+            const expectedType = `component-${thing.options.kind}-prop` as const;
+            type ChildProp = Element & { type: 'component-inline-prop' | 'component-block-prop' };
+            const changes: Partial<ChildProp> = {};
+            const prevNode = elementForChildren.children[
+              editorPath[editorPath.length - 1]
+            ] as ChildProp;
+            assert(prevNode.propPath !== undefined);
+            if (!areArraysEqual(thing.path, prevNode.propPath)) {
+              changes.propPath = thing.path;
+            }
+            if (prevNode.type !== expectedType) {
+              changes.type = expectedType;
+            }
+            if (Object.keys(changes).length) {
+              Transforms.setNodes(editor, changes, { at: editorPath });
+            }
+            thingsLeftToAdd.delete(thing);
+            initialPropPathsToEditorPath.delete(stringifiedPath);
+          }
+        }
+        const pathsToRemove: PathRef[] = [];
+        for (const [, editorPath] of initialPropPathsToEditorPath) {
+          pathsToRemove.push(Editor.pathRef(editor, editorPath));
+        }
+        for (const pathRef of pathsToRemove) {
+          const path = pathRef.unref();
+          assert(path !== null);
+          Transforms.removeNodes(editor, { at: path });
+        }
+        let newIdx = elementForChildren.children.length;
+        for (const thing of thingsLeftToAdd) {
+          Transforms.insertNodes(
+            editor,
+            {
+              type: `component-${thing.options.kind}-prop`,
+              propPath: thing.path,
+              children: [
+                thing.options.kind === 'block'
+                  ? { type: 'paragraph', children: [{ text: '' }] }
+                  : { text: '' },
+              ],
+            },
+            { at: [...basePath, newIdx] }
+          );
+          newIdx++;
+        }
+        const propPathsToExpectedIndexes = new Map<string, number>();
+        for (const [idx, thing] of things.entries()) {
+          propPathsToExpectedIndexes.set(JSON.stringify(thing.path), idx);
+        }
+        outer: while (true) {
+          for (const [idx, childNode] of (
+            Node.get(editor, basePath) as Element
+          ).children.entries()) {
+            assert(
+              childNode.type === 'component-block-prop' ||
+                childNode.type === 'component-inline-prop'
+            );
+            const expectedIndex = propPathsToExpectedIndexes.get(
+              JSON.stringify(childNode.propPath)
+            );
+            assert(expectedIndex !== undefined);
+            if (idx !== expectedIndex) {
+              Transforms.moveNodes(editor, {
+                at: [...basePath, idx],
+                to: [...basePath, expectedIndex],
+              });
+              continue outer;
+            }
+          }
+          break;
+        }
+      });
+    },
+    [setElement, componentBlock, editor]
+  );
+
   const getPreviewProps = useMemo(() => {
     if (!componentBlock) {
       return () => {
         throw new Error('expected component block to exist when called');
       };
     }
-    return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, getNewProps => {
-      setElement(current => ({ props: getNewProps(current.props) }));
-    });
-  }, [setElement, componentBlock]);
+    return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, onPropsChange);
+  }, [componentBlock, onPropsChange]);
 
   if (!componentBlock) {
     return (
@@ -194,7 +328,7 @@ Content:`}
             children={children}
             componentBlock={componentBlock}
             element={currentElement}
-            onElementChange={setElement}
+            onChange={onPropsChange}
           />
         )}
         {!editMode &&
@@ -317,23 +451,19 @@ function DefaultToolbarWithoutChrome({
 function ComponentBlockRender({
   componentBlock,
   element,
-  onElementChange,
+  onChange,
   children,
 }: {
   element: Element & { type: 'component-block' };
-  onElementChange: (
-    cb: (
-      element: Element & { type: 'component-block' }
-    ) => Partial<Element & { type: 'component-block' }>
-  ) => void;
+  onChange: (cb: (props: Record<string, unknown>) => Record<string, unknown>) => void;
   componentBlock: ComponentBlock;
   children: any;
 }) {
   const getPreviewProps = useMemo(() => {
     return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, props => {
-      onElementChange(() => ({ props }));
+      onChange(props);
     });
-  }, [onElementChange, componentBlock]);
+  }, [onChange, componentBlock]);
 
   const previewProps = getPreviewProps(element.props);
 
@@ -364,13 +494,182 @@ function ComponentBlockRender({
 }
 
 function propPathWithIndiciesToKeys(propPath: ReadonlyPropPath, val: any): readonly string[] {
-  return propPath.map((key, i) => {
+  return propPath.map(key => {
     if (typeof key === 'string') {
       val = val[key];
       return key;
     }
     const keys = getElementIdsForArrayValue(val);
     val = val[key];
-    return keys[i];
+    return keys[key];
   });
 }
+
+// function findChangedArrayFields(
+//   componentBlock: ComponentBlock,
+//   value: unknown,
+//   prevValue: unknown
+// ) {
+//   let changedArrayFields: { newPath: ReadonlyPropPath; newKeys: string[]; prevKeys: string[] }[] =
+//     [];
+//   findChangedArrayFieldsInner(
+//     { kind: 'object', value: componentBlock.props },
+//     value,
+//     prevValue,
+//     [],
+//     changedArrayFields
+//   );
+//   return changedArrayFields;
+// }
+
+// function findChangedArrayFieldsInner(
+//   field: ComponentPropField,
+//   value: unknown,
+//   prevValue: unknown,
+//   path: ReadonlyPropPath,
+//   changedArrayFields: { path: ReadonlyPropPath; newKeys: string[]; prevKeys: string[] }[]
+// ) {
+//   if (value === prevValue) {
+//     return;
+//   }
+//   if (field.kind === 'child' || field.kind === 'form' || field.kind === 'relationship') {
+//     return;
+//   }
+//   if (field.kind === 'conditional') {
+//     const newDiscriminant: string | boolean = (value as any).discriminant;
+//     const oldDiscriminant: string | boolean = (prevValue as any).discriminant;
+//     findChangedArrayFieldsInner(
+//       field.values[newDiscriminant.toString()],
+//       (value as any).value,
+//       newDiscriminant === oldDiscriminant
+//         ? (prevValue as any).value
+//         : getInitialPropsValue(field.values[newDiscriminant.toString()]),
+//       path.concat('value'),
+//       changedArrayFields
+//     );
+//     return;
+//   }
+//   if (field.kind === 'object') {
+//     for (const [key, innerField] of Object.entries(field.value)) {
+//       findChangedArrayFieldsInner(
+//         innerField,
+//         (value as any)[key],
+//         (prevValue as any)[key],
+//         path.concat(key),
+//         changedArrayFields
+//       );
+//     }
+//     return;
+//   }
+//   if (field.kind === 'array') {
+//     const arrayValue = value as readonly unknown[];
+//     const prevArrayValue = prevValue as readonly unknown[];
+//     const keys = getElementIdsForArrayValue(arrayValue);
+//     const prevKeys = getElementIdsForArrayValue(prevArrayValue);
+//     if (!areArraysEqual(keys, prevKeys)) {
+//       changedArrayFields.push({ path, newKeys: keys, prevKeys });
+//     }
+//     let initialInnerVal;
+
+//     for (const [idx, val] of arrayValue.entries()) {
+//       let key = keys[idx];
+//       let indexOfKeyInPrev = prevKeys.indexOf(key);
+//       let prevVal;
+//       if (indexOfKeyInPrev === -1) {
+//         if (initialInnerVal === undefined) {
+//           initialInnerVal = getInitialPropsValue(field.element);
+//         }
+//         prevVal = initialInnerVal;
+//       } else {
+//         prevVal = prevArrayValue[indexOfKeyInPrev];
+//       }
+//       findChangedArrayFieldsInner(
+//         field.element,
+//         val,
+//         prevVal,
+//         path.concat(idx),
+//         changedArrayFields
+//       );
+//     }
+//     return;
+//   }
+
+//   assertNever(field);
+// }
+
+type Stuff = {
+  prevPath?: ReadonlyPropPath;
+  path: ReadonlyPropPath;
+  options: ChildField['options'];
+};
+
+function findChildPropPathsButDifferent(
+  value: any,
+  prevValue: any,
+  prop: ComponentPropField,
+  newPath: ReadonlyPropPath,
+  prevPath: ReadonlyPropPath | undefined,
+  pathWithKeys: readonly string[] | undefined
+): Stuff[] {
+  switch (prop.kind) {
+    case 'form':
+    case 'relationship':
+      return [];
+    case 'child':
+      return [{ path: newPath, prevPath, options: prop.options }];
+    case 'conditional':
+      const hasChangedDiscriminant = value.discriminant === prevValue.discriminant;
+      return findChildPropPathsButDifferent(
+        value.value,
+        hasChangedDiscriminant
+          ? prevValue.value
+          : getInitialPropsValue(prop.values[value.discriminant]),
+        prop.values[value.discriminant],
+        newPath.concat('value'),
+        hasChangedDiscriminant ? undefined : prevPath?.concat('value'),
+        hasChangedDiscriminant ? undefined : pathWithKeys?.concat('value')
+      );
+    case 'object': {
+      let paths: Stuff[] = [];
+      Object.keys(prop.value).forEach(key => {
+        paths.push(
+          ...findChildPropPathsButDifferent(
+            value[key],
+            prevValue[key],
+            prop.value[key],
+            newPath.concat(key),
+            prevPath?.concat(key),
+            pathWithKeys?.concat(key)
+          )
+        );
+      });
+      return paths;
+    }
+    case 'array': {
+      let paths: Stuff[] = [];
+      const prevKeys = getElementIdsForArrayValue(prevValue);
+      const keys = getElementIdsForArrayValue(value);
+      for (const [i, val] of (value as unknown[]).entries()) {
+        const key = keys[i];
+        const prevIdx = prevKeys.indexOf(key);
+        let prevVal;
+        if (prevIdx === -1) {
+          prevVal = getInitialPropsValue(prop.element);
+        } else {
+          prevVal = prevValue[prevIdx];
+        }
+        paths.push(
+          ...findChildPropPathsButDifferent(
+            val,
+            prevVal,
+            prop.element,
+            newPath.concat(i),
+            prevIdx === -1 ? undefined : prevPath?.concat(prevIdx),
+            prevIdx === -1 ? undefined : pathWithKeys?.concat(key)
+          )
+        );
+      }
+      return paths;
+    }
+  }
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index d2a5fc71729..9a5670005ed 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -36,7 +36,12 @@ export function getNewArrayElementId() {
 export const ChildrenByPathContext = React.createContext<Record<string, ReactElement>>({});
 
 function ChildFieldEditable({ path }: { path: readonly string[] }) {
-  return useContext(ChildrenByPathContext)[JSON.stringify(path)];
+  const childrenByPath = useContext(ChildrenByPathContext);
+  const child = childrenByPath[JSON.stringify(path)];
+  if (child === undefined) {
+    return null;
+  }
+  return child;
 }
 
 function castToMemoizedInfoForProp<
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 4dd28422091..59c9946181b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -124,9 +124,6 @@ function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField):
       }
       hasFoundChildField = true;
     } else if (prop.kind === 'array') {
-      if (doesPropOnlyEverContainASingleChildField(prop.element)) {
-        return false;
-      }
       queue.add(prop.element);
     } else if (prop.kind === 'object') {
       for (const innerProp of Object.values(prop.value)) {
diff --git a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
index eb999534bec..6ef5639d32a 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
@@ -66,7 +66,7 @@ export function AddButton<Value extends string>(props: {
             return (
               <Box
                 key={option.value}
-                {...getItemProps({ item: option, index: i, role: 'menuitemradio' })}
+                {...getItemProps({ item: option, index: i, role: 'menuitem' })}
                 css={{
                   cursor: 'pointer',
                   backgroundColor: highlightedIndex === i ? '#F6F8FC' : '',
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index 6634c658822..f40f11d1a72 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -4,7 +4,7 @@ import { GraphQLResolveInfo } from 'graphql';
 
 import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
 import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
-import { assertNever } from './DocumentEditor/component-blocks/utils';
+import { assertNever, ReadonlyPropPath } from './DocumentEditor/component-blocks/utils';
 
 export function getGraphQLInputType(
   name: string,
@@ -91,48 +91,49 @@ export async function getValueForUpdate(
   prop: ComponentPropFieldForGraphQL,
   value: any,
   prevValue: any,
-  context: KeystoneContext
+  context: KeystoneContext,
+  path: ReadonlyPropPath
 ): Promise<any> {
+  if (value === undefined) {
+    return prevValue;
+  }
   if (prevValue === undefined) {
     prevValue = getInitialPropsValue(prop);
   }
-  if (value === undefined) {
-    value = prevValue;
-  }
+
   if (prop.kind === 'form') {
     if (prop.validate(value)) {
       return value;
     }
-    throw new Error();
+    throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
+  }
+  if (value === null) {
+    throw new Error(
+      `${
+        prop.kind[0].toUpperCase() + prop.kind.slice(1)
+      } fields cannot be set to null but the field at '${path.join('.')}' is null`
+    );
   }
   if (prop.kind === 'object') {
-    if (value === null) {
-      throw new Error();
-    }
     return Object.fromEntries(
       await Promise.all(
         Object.entries(prop.value).map(async ([key, val]) => {
-          return [key, await getValueForUpdate(val, value[key], prevValue[key], context)];
+          return [
+            key,
+            await getValueForUpdate(val, value[key], prevValue[key], context, path.concat(key)),
+          ];
         })
       )
     );
   }
   if (prop.kind === 'array') {
-    if (value === null) {
-      throw new Error();
-    }
-
     return Promise.all(
-      (value as any[]).map((val, i) => getValueForUpdate(prop.element, val, prevValue[i], context))
+      (value as any[]).map((val, i) =>
+        getValueForUpdate(prop.element, val, prevValue[i], context, path.concat(i))
+      )
     );
   }
   if (prop.kind === 'relationship') {
-    if (value === undefined) {
-      return prevValue;
-    }
-    if (value === null) {
-      throw new Error();
-    }
     if (prop.many) {
       const val = (value as graphql.InferValueFromArg<
         graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['update']>>
@@ -147,12 +148,13 @@ export async function getValueForUpdate(
     }
   }
   if (prop.kind === 'conditional') {
-    if (value === null) {
-      throw new Error();
-    }
     const conditionalValueKeys = Object.keys(value);
     if (conditionalValueKeys.length !== 1) {
-      throw new Error();
+      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;
@@ -165,7 +167,8 @@ export async function getValueForUpdate(
         (prop.values as any)[key],
         value[key],
         prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop),
-        context
+        context,
+        path.concat('value')
       ),
     };
   }
@@ -176,60 +179,54 @@ export async function getValueForUpdate(
 export async function getValueForCreate(
   prop: ComponentPropFieldForGraphQL,
   value: any,
-  context: KeystoneContext
+  context: KeystoneContext,
+  path: ReadonlyPropPath
 ): Promise<any> {
   // If value is undefined, get the specified defaultValue
   if (value === undefined) {
-    value = getInitialPropsValue(prop);
+    return getInitialPropsValue(prop);
   }
   if (prop.kind === 'form') {
     if (prop.validate(value)) {
       return value;
     }
-    throw new Error();
+    throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
+  }
+  if (value === null) {
+    throw new Error(
+      `${
+        prop.kind[0].toUpperCase() + prop.kind.slice(1)
+      } fields cannot be set to null but the field at '${path.join('.')}' is null`
+    );
   }
   if (prop.kind === 'array') {
-    if (value === null) {
-      throw new Error();
-    }
-    return Promise.all((value as any[]).map(val => getValueForCreate(prop.element, val, context)));
+    return Promise.all(
+      (value as any[]).map((val, i) =>
+        getValueForCreate(prop.element, val, context, path.concat(i))
+      )
+    );
   }
   if (prop.kind === 'object') {
-    if (value === null) {
-      throw new Error();
-    }
     return Object.fromEntries(
       await Promise.all(
         Object.entries(prop.value).map(async ([key, val]) => {
-          return [key, await getValueForCreate(val, value[key], context)];
+          return [key, await getValueForCreate(val, value[key], context, path.concat(key))];
         })
       )
     );
   }
   if (prop.kind === 'relationship') {
     if (prop.many) {
-      const val = value as graphql.InferValueFromArg<
+      const val = (value as graphql.InferValueFromArg<
         graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['create']>>
-      >;
-
-      if (val === undefined) {
-        return [];
-      }
+      >)!;
 
-      if (val === null) {
-        throw new Error();
-      }
       return resolveRelateToManyForCreateInput(val, context, prop.listKey);
     } else {
-      const val = value as graphql.InferValueFromArg<
+      const val = (value as graphql.InferValueFromArg<
         graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['create']>>
-      >;
-      if (val === undefined) {
-        return null;
-      }
-      if (val === null) {
-        throw new Error();
-      }
+      >)!;
+
       return resolveRelateToOneForCreateInput(val, context, prop.listKey);
     }
   }
@@ -249,7 +246,12 @@ export async function getValueForCreate(
 
     return {
       discriminant,
-      value: await getValueForCreate((prop.values as any)[key], value[key], context),
+      value: await getValueForCreate(
+        (prop.values as any)[key],
+        value[key],
+        context,
+        path.concat('value')
+      ),
     };
   }
 
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 5280743e094..f15401956e7 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -35,8 +35,9 @@ export const componentThing =
     if ((config as any).isIndexed === 'unique') {
       throw Error("isIndexed: 'unique' is not a supported option for field type component");
     }
+    const lists = new Set(Object.keys(meta.lists));
     try {
-      assertValidComponentPropField(prop);
+      assertValidComponentPropField(prop, lists);
     } catch (err) {
       throw new Error(`${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`);
     }
@@ -63,7 +64,7 @@ export const componentThing =
                 prevVal = JSON.parse(prevVal as any);
                 val = args.inputData[meta.fieldKey];
               }
-              val = getValueForUpdate(prop, val, prevVal, args.context);
+              val = getValueForUpdate(prop, val, prevVal, args.context, []);
               if (val === null && meta.provider === 'postgresql') {
                 val = 'JsonNull';
               }
@@ -84,7 +85,7 @@ export const componentThing =
           create: {
             arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create', new Map(), meta) }),
             async resolve(val, context) {
-              return resolve(await getValueForCreate(prop, val, context));
+              return resolve(await getValueForCreate(prop, val, context, []));
             },
           },
           update: {
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 81c720e0c1a..2feb083086a 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -10,12 +10,11 @@ import {
 } from '@keystone-6/core/types';
 import { graphql } from '@keystone-6/core';
 import { Relationships } from './DocumentEditor/relationship';
-import { ComponentBlock, ComponentPropField } from './component-blocks';
+import { ComponentBlock } from './component-blocks';
 import { DocumentFeatures } from './views';
 import { validateAndNormalizeDocument } from './validation';
 import { addRelationshipData } from './relationship-data';
 import { assertValidComponentPropField } from './DocumentEditor/component-blocks/field-assertions';
-import { assertNever } from './DocumentEditor/component-blocks/utils';
 
 export { componentThing } from './component';
 
@@ -77,56 +76,6 @@ export type DocumentFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
 
 const views = path.join(path.dirname(__dirname), 'views');
 
-function validateRelationshipProps(
-  field: ComponentPropField,
-  path: string[],
-  meta: FieldData,
-  componentBlockLabel: string
-): void {
-  if (field.kind === 'relationship') {
-    // ideally we would validate the GraphQL selection here too but
-    // when this is running the GraphQL schema is still being created
-    if (meta.lists[field.listKey] === undefined) {
-      throw new Error(
-        `A component block named ${componentBlockLabel} in the field at ${meta.listKey}.${
-          meta.fieldKey
-        } has a relationship field at ${path.join('.')} with the listKey "${
-          field.listKey
-        }" but no list named "${field.listKey}" exists.`
-      );
-    }
-    return;
-  }
-  if (field.kind === 'form' || field.kind === 'child') {
-    return;
-  }
-  if (field.kind === 'object') {
-    for (const [key, innerField] of Object.entries(field.value)) {
-      validateRelationshipProps(innerField, path.concat(key), meta, componentBlockLabel);
-    }
-    return;
-  }
-  if (field.kind === 'conditional') {
-    // the discriminant field must be a form field so no need to check that
-    for (const [key, innerField] of Object.entries(
-      field.values as Record<string, ComponentPropField>
-    )) {
-      validateRelationshipProps(innerField, path.concat(key), meta, componentBlockLabel);
-    }
-    return;
-  }
-  if (field.kind === 'array') {
-    validateRelationshipProps(
-      field.element,
-      path.concat('(array element)'),
-      meta,
-      componentBlockLabel
-    );
-    return;
-  }
-  assertNever(field);
-}
-
 export const document =
   <ListTypeInfo extends BaseListTypeInfo>({
     componentBlocks = {},
@@ -145,14 +94,6 @@ export const document =
       links,
     });
     const relationships = normaliseRelationships(configRelationships, meta);
-    for (const componentBlock of Object.values(componentBlocks)) {
-      validateRelationshipProps(
-        { kind: 'object', value: componentBlock.props },
-        [],
-        meta,
-        componentBlock.label
-      );
-    }
 
     const inputResolver = (data: JSONValue | null | undefined): any => {
       if (data === null) {
@@ -167,9 +108,10 @@ export const document =
     if ((config as any).isIndexed === 'unique') {
       throw Error("isIndexed: 'unique' is not a supported option for field type document");
     }
+    const lists = new Set(Object.keys(meta.lists));
     for (const [name, block] of Object.entries(componentBlocks)) {
       try {
-        assertValidComponentPropField({ kind: 'object', value: block.props });
+        assertValidComponentPropField({ kind: 'object', value: block.props }, lists);
       } catch (err) {
         throw new Error(
           `Component block ${name} in ${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`

From 0535c2ca5c6e1f564357832a6e055b43b7cd8e2c Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 17 Mar 2022 13:04:40 +1000
Subject: [PATCH 026/124] More child field in array field fixes

---
 .../src/DocumentEditor/blockquote.tsx         |   3 +
 .../component-blocks/array-field.test.tsx     | 356 ++++++++--------
 .../nested-array-field.test.tsx               | 379 ++++++++++++++++++
 .../with-component-blocks.tsx                 |  14 +-
 4 files changed, 580 insertions(+), 172 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx

diff --git a/packages/fields-document/src/DocumentEditor/blockquote.tsx b/packages/fields-document/src/DocumentEditor/blockquote.tsx
index b298f109e80..a6e05095f85 100644
--- a/packages/fields-document/src/DocumentEditor/blockquote.tsx
+++ b/packages/fields-document/src/DocumentEditor/blockquote.tsx
@@ -30,6 +30,9 @@ export const insertBlockquote = (editor: Editor) => {
 function getDirectBlockquoteParentFromSelection(editor: Editor) {
   if (!editor.selection) return { isInside: false } as const;
   const [, parentPath] = Editor.parent(editor, editor.selection);
+  if (!parentPath.length) {
+    return { isInside: false } as const;
+  }
   const [maybeBlockquoteParent, maybeBlockquoteParentPath] = Editor.parent(editor, parentPath);
   const isBlockquote = maybeBlockquoteParent.type === 'blockquote';
   return isBlockquote
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index cf6b3bf2b25..69f0487a113 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -1,49 +1,41 @@
 /** @jest-environment jsdom */
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { Fragment } from 'react';
+import React from 'react';
+import { Transforms } from 'slate';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
-import { createGetPreviewProps } from './preview-props';
 
-const table = component({
+const list = component({
   component: props =>
     React.createElement(
-      'div',
+      'ul',
       null,
       props.fields.children.elements.map(x => {
-        return React.createElement(
-          Fragment,
-          { key: x.id },
-          x.element.elements.map(x => {
-            return React.createElement(Fragment, { key: x.id }, x.element.fields.content);
-          })
-        );
+        return React.createElement('li', { key: x.id }, x.element.fields.content);
       })
     ),
   label: '',
   props: {
     children: fields.array(
-      fields.array(
-        fields.object({
-          content: fields.child({ kind: 'inline', placeholder: '' }),
-          something: fields.text({ label: '' }),
-        })
-      )
+      fields.object({
+        content: fields.child({ kind: 'inline', placeholder: '' }),
+        done: fields.checkbox({ label: '' }),
+      })
     ),
   },
 });
 
 test('child field in nested array', () => {
-  const editor = makeEditor(
+  makeEditor(
     <editor>
       <component-block
-        component="table"
+        component="list"
         props={{
-          children: [[{ content: null, something: '1' }]],
+          children: [{ content: null, done: false }],
         }}
       >
-        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+        <component-inline-prop propPath={['children', 0, 'content']}>
           <text>first</text>
         </component-inline-prop>
       </component-block>
@@ -51,25 +43,48 @@ test('child field in nested array', () => {
         <text />
       </paragraph>
     </editor>,
-    {
-      componentBlocks: {
-        table,
-      },
-    }
+    { componentBlocks: { list } }
+  );
+});
+
+test('inserting a break at the end of a child field creates a new item with fresh values', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="list"
+        props={{
+          children: [{ content: null, done: true }],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>
+            first
+            <cursor />
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { list } }
   );
+  editor.insertBreak();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
-        component="table"
+        component="list"
         props={
           Object {
             "children": Array [
-              Array [
-                Object {
-                  "content": null,
-                  "something": "1",
-                },
-              ],
+              Object {
+                "content": null,
+                "done": true,
+              },
+              Object {
+                "content": null,
+                "done": false,
+              },
             ],
           }
         }
@@ -79,7 +94,6 @@ test('child field in nested array', () => {
             Array [
               "children",
               0,
-              0,
               "content",
             ]
           }
@@ -88,6 +102,19 @@ test('child field in nested array', () => {
             first
           </text>
         </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            <cursor />
+          </text>
+        </component-inline-prop>
       </component-block>
       <paragraph>
         <text>
@@ -98,74 +125,45 @@ test('child field in nested array', () => {
   `);
 });
 
-test('multiple in child field in nested array', () => {
+test('inserting a break splits the text and uses the values from the first entry', () => {
   const editor = makeEditor(
     <editor>
       <component-block
-        component="table"
+        component="list"
         props={{
-          children: [
-            [
-              { content: null, something: '1' },
-              { content: null, something: '2' },
-            ],
-            [
-              { content: null, something: '3' },
-              { content: null, something: '4' },
-            ],
-          ],
+          children: [{ content: null, done: true }],
         }}
       >
-        <component-inline-prop propPath={['children', 0, 0, 'content']}>
-          <text>first</text>
-        </component-inline-prop>
-        <component-inline-prop propPath={['children', 0, 1, 'content']}>
-          <text>second</text>
-        </component-inline-prop>
-        <component-inline-prop propPath={['children', 1, 0, 'content']}>
-          <text>third</text>
-        </component-inline-prop>
-        <component-inline-prop propPath={['children', 1, 1, 'content']}>
-          <text>fourth</text>
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>
+            some
+            <cursor />
+            text
+          </text>
         </component-inline-prop>
       </component-block>
       <paragraph>
         <text />
       </paragraph>
     </editor>,
-    {
-      componentBlocks: {
-        table,
-      },
-    }
+    { componentBlocks: { list } }
   );
+  editor.insertBreak();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
-        component="table"
+        component="list"
         props={
           Object {
             "children": Array [
-              Array [
-                Object {
-                  "content": null,
-                  "something": "1",
-                },
-                Object {
-                  "content": null,
-                  "something": "2",
-                },
-              ],
-              Array [
-                Object {
-                  "content": null,
-                  "something": "3",
-                },
-                Object {
-                  "content": null,
-                  "something": "4",
-                },
-              ],
+              Object {
+                "content": null,
+                "done": true,
+              },
+              Object {
+                "content": null,
+                "done": true,
+              },
             ],
           }
         }
@@ -175,58 +173,100 @@ test('multiple in child field in nested array', () => {
             Array [
               "children",
               0,
-              0,
               "content",
             ]
           }
         >
           <text>
-            first
+            some
           </text>
         </component-inline-prop>
         <component-inline-prop
           propPath={
             Array [
               "children",
-              0,
               1,
               "content",
             ]
           }
         >
           <text>
-            second
+            <cursor />
+            text
           </text>
         </component-inline-prop>
-        <component-inline-prop
-          propPath={
-            Array [
-              "children",
-              1,
-              0,
-              "content",
-            ]
-          }
-        >
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('inserting a break in an empty child removes the element and inserts a paragraph', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="list"
+        props={{
+          children: [
+            { content: null, done: true },
+            { content: null, done: false },
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>some text</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'content']}>
           <text>
-            third
+            <cursor />
           </text>
         </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { list } }
+  );
+  editor.insertBreak();
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="list"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "content": null,
+                "done": true,
+              },
+            ],
+          }
+        }
+      >
         <component-inline-prop
           propPath={
             Array [
               "children",
-              1,
-              1,
+              0,
               "content",
             ]
           }
         >
           <text>
-            fourth
+            some text
           </text>
         </component-inline-prop>
       </component-block>
+      <paragraph>
+        <text>
+          <cursor />
+        </text>
+      </paragraph>
       <paragraph>
         <text>
           
@@ -236,78 +276,71 @@ test('multiple in child field in nested array', () => {
   `);
 });
 
-test('add to multiple in child field in nested array', () => {
+test('deleting a range of nodes removes them', () => {
   const editor = makeEditor(
     <editor>
       <component-block
-        component="table"
+        component="list"
         props={{
           children: [
-            [
-              { content: null, something: '1' },
-              { content: null, something: '2' },
-            ],
-            [
-              { content: null, something: '3' },
-              { content: null, something: '4' },
-            ],
+            { content: null, done: true },
+            { content: null, done: false },
+            { content: null, done: true },
+            { content: null, done: false },
+            { content: null, done: true },
+            { content: null, done: false },
           ],
         }}
       >
-        <component-inline-prop propPath={['children', 0, 0, 'content']}>
-          <text>first</text>
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>0</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'content']}>
+          <text>
+            <anchor />1
+          </text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'content']}>
+          <text>2</text>
         </component-inline-prop>
-        <component-inline-prop propPath={['children', 0, 1, 'content']}>
-          <text>second</text>
+        <component-inline-prop propPath={['children', 3, 'content']}>
+          <text>3</text>
         </component-inline-prop>
-        <component-inline-prop propPath={['children', 1, 0, 'content']}>
-          <text>third</text>
+        <component-inline-prop propPath={['children', 4, 'content']}>
+          <text>
+            4<focus />
+          </text>
         </component-inline-prop>
-        <component-inline-prop propPath={['children', 1, 1, 'content']}>
-          <text>fourth</text>
+        <component-inline-prop propPath={['children', 5, 'content']}>
+          <text>5</text>
         </component-inline-prop>
       </component-block>
       <paragraph>
         <text />
       </paragraph>
     </editor>,
-    {
-      componentBlocks: {
-        table,
-      },
-    }
+    { componentBlocks: { list } }
   );
-  const previewProps = createGetPreviewProps({ kind: 'object', value: table.props }, () => {})(
-    (editor.children[0] as any).props
-  );
-  previewProps.fields.children.elements[0].element.onInsert();
+  Transforms.delete(editor);
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
-        component="table"
+        component="list"
         props={
           Object {
             "children": Array [
-              Array [
-                Object {
-                  "content": null,
-                  "something": "1",
-                },
-                Object {
-                  "content": null,
-                  "something": "2",
-                },
-              ],
-              Array [
-                Object {
-                  "content": null,
-                  "something": "3",
-                },
-                Object {
-                  "content": null,
-                  "something": "4",
-                },
-              ],
+              Object {
+                "content": null,
+                "done": true,
+              },
+              Object {
+                "content": null,
+                "done": true,
+              },
+              Object {
+                "content": null,
+                "done": false,
+              },
             ],
           }
         }
@@ -317,55 +350,38 @@ test('add to multiple in child field in nested array', () => {
             Array [
               "children",
               0,
-              0,
               "content",
             ]
           }
         >
           <text>
-            first
+            0
           </text>
         </component-inline-prop>
         <component-inline-prop
           propPath={
             Array [
               "children",
-              0,
               1,
               "content",
             ]
           }
         >
           <text>
-            second
+            <cursor />
           </text>
         </component-inline-prop>
         <component-inline-prop
           propPath={
             Array [
               "children",
-              1,
-              0,
-              "content",
-            ]
-          }
-        >
-          <text>
-            third
-          </text>
-        </component-inline-prop>
-        <component-inline-prop
-          propPath={
-            Array [
-              "children",
-              1,
-              1,
+              2,
               "content",
             ]
           }
         >
           <text>
-            fourth
+            5
           </text>
         </component-inline-prop>
       </component-block>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
new file mode 100644
index 00000000000..cf6b3bf2b25
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -0,0 +1,379 @@
+/** @jest-environment jsdom */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx, makeEditor } from '../tests/utils';
+import { component, fields } from '../../component-blocks';
+import { createGetPreviewProps } from './preview-props';
+
+const table = component({
+  component: props =>
+    React.createElement(
+      'div',
+      null,
+      props.fields.children.elements.map(x => {
+        return React.createElement(
+          Fragment,
+          { key: x.id },
+          x.element.elements.map(x => {
+            return React.createElement(Fragment, { key: x.id }, x.element.fields.content);
+          })
+        );
+      })
+    ),
+  label: '',
+  props: {
+    children: fields.array(
+      fields.array(
+        fields.object({
+          content: fields.child({ kind: 'inline', placeholder: '' }),
+          something: fields.text({ label: '' }),
+        })
+      )
+    ),
+  },
+});
+
+test('child field in nested array', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="table"
+        props={{
+          children: [[{ content: null, something: '1' }]],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        table,
+      },
+    }
+  );
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="table"
+        props={
+          Object {
+            "children": Array [
+              Array [
+                Object {
+                  "content": null,
+                  "something": "1",
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('multiple in child field in nested array', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="table"
+        props={{
+          children: [
+            [
+              { content: null, something: '1' },
+              { content: null, something: '2' },
+            ],
+            [
+              { content: null, something: '3' },
+              { content: null, something: '4' },
+            ],
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 0, 1, 'content']}>
+          <text>second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 0, 'content']}>
+          <text>third</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 1, 'content']}>
+          <text>fourth</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        table,
+      },
+    }
+  );
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="table"
+        props={
+          Object {
+            "children": Array [
+              Array [
+                Object {
+                  "content": null,
+                  "something": "1",
+                },
+                Object {
+                  "content": null,
+                  "something": "2",
+                },
+              ],
+              Array [
+                Object {
+                  "content": null,
+                  "something": "3",
+                },
+                Object {
+                  "content": null,
+                  "something": "4",
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            second
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            third
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            fourth
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
+
+test('add to multiple in child field in nested array', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="table"
+        props={{
+          children: [
+            [
+              { content: null, something: '1' },
+              { content: null, something: '2' },
+            ],
+            [
+              { content: null, something: '3' },
+              { content: null, something: '4' },
+            ],
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 0, 1, 'content']}>
+          <text>second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 0, 'content']}>
+          <text>third</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 1, 'content']}>
+          <text>fourth</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    {
+      componentBlocks: {
+        table,
+      },
+    }
+  );
+  const previewProps = createGetPreviewProps({ kind: 'object', value: table.props }, () => {})(
+    (editor.children[0] as any).props
+  );
+  previewProps.fields.children.elements[0].element.onInsert();
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="table"
+        props={
+          Object {
+            "children": Array [
+              Array [
+                Object {
+                  "content": null,
+                  "something": "1",
+                },
+                Object {
+                  "content": null,
+                  "something": "2",
+                },
+              ],
+              Array [
+                Object {
+                  "content": null,
+                  "something": "3",
+                },
+                Object {
+                  "content": null,
+                  "something": "4",
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            first
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            second
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            third
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              1,
+              "content",
+            ]
+          }
+        >
+          <text>
+            fourth
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 59c9946181b..aa2f3aa88c5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -341,11 +341,19 @@ export function withComponentBlocks(
             }
             const arrVal = getValueAtPropPath(node.props, propPath) as unknown[];
             const prevKeys = getElementIdsForArrayValue(arrVal);
+            const prevKeysSet = new Set(prevKeys);
             // delete backwards
             const alreadyUsedIndicies = new Set<number>();
             // all of the fields are unique so we've removed/re-ordered/done nothing
             const newVal: unknown[] = [];
             const newKeys: string[] = [];
+            const getNewKey = () => {
+              let key = getNewArrayElementId();
+              while (prevKeysSet.has(key)) {
+                key = getNewArrayElementId();
+              }
+              return key;
+            };
             for (const [, node] of nodesWithin) {
               const idxFromValue = node.propPath![propPath.length];
               assert(typeof idxFromValue === 'number');
@@ -354,11 +362,13 @@ export function withComponentBlocks(
                 (alreadyUsedIndicies.has(idxFromValue) && isEmptyChildFieldNode(node))
               ) {
                 newVal.push(getInitialPropsValue(arrayField.element));
-                newKeys.push(getNewArrayElementId());
+                newKeys.push(getNewKey());
               } else {
                 alreadyUsedIndicies.add(idxFromValue);
                 newVal.push(arrVal[idxFromValue]);
-                newKeys.push(prevKeys[idxFromValue]);
+                newKeys.push(
+                  alreadyUsedIndicies.has(idxFromValue) ? getNewKey() : prevKeys[idxFromValue]
+                );
               }
             }
             setElementIdsForArrayValue(newVal, newKeys);

From dd64e7ad0d43f99c11928f17d4823a1c735d4ef8 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 17 Mar 2022 14:06:17 +1000
Subject: [PATCH 027/124] More child field in array field improvements

---
 .../basic/admin/fieldViews/Content.tsx        |  42 ++-
 .../component-blocks/array-field.test.tsx     |  61 +++-
 .../DocumentEditor/component-blocks/index.tsx |   7 +-
 .../multi-child-field-in-array-field.test.tsx | 275 ++++++++++++++++++
 .../with-component-blocks.tsx                 |   2 -
 .../src/DocumentEditor/tests/utils.tsx        |   7 +-
 6 files changed, 362 insertions(+), 32 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 444c192f586..d634fd03522 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -133,28 +133,26 @@ export const componentBlocks = {
         }
       });
       return (
-        <div>
-          <ul css={{ padding: 0 }}>
-            {props.fields.children.elements.map(element => (
-              <li css={{ listStyle: 'none' }} key={element.id}>
-                <input
-                  contentEditable="false"
-                  css={{ marginRight: 8 }}
-                  type="checkbox"
-                  checked={element.element.fields.done.value}
-                  onChange={event => element.element.fields.done.onChange(event.target.checked)}
-                />
-                <span
-                  style={{
-                    textDecoration: element.element.fields.done.value ? 'line-through' : undefined,
-                  }}
-                >
-                  {element.element.fields.content}
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
+        <ul css={{ padding: 0 }}>
+          {props.fields.children.elements.map(element => (
+            <li css={{ listStyle: 'none' }} key={element.id}>
+              <input
+                contentEditable="false"
+                css={{ marginRight: 8 }}
+                type="checkbox"
+                checked={element.element.fields.done.value}
+                onChange={event => element.element.fields.done.onChange(event.target.checked)}
+              />
+              <span
+                style={{
+                  textDecoration: element.element.fields.done.value ? 'line-through' : undefined,
+                }}
+              >
+                {element.element.fields.content}
+              </span>
+            </li>
+          ))}
+        </ul>
       );
     },
     label: 'My List',
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 69f0487a113..cd57ca2ac45 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -13,7 +13,8 @@ const list = component({
       null,
       props.fields.children.elements.map(x => {
         return React.createElement('li', { key: x.id }, x.element.fields.content);
-      })
+      }),
+      React.createElement('button', { onClick: () => props.fields.children.onInsert() }, 'Insert')
     ),
   label: '',
   props: {
@@ -393,3 +394,61 @@ test('deleting a range of nodes removes them', () => {
     </editor>
   `);
 });
+
+test('inserting an item from empty works', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="list"
+        props={{
+          children: [],
+        }}
+      >
+        <component-inline-prop>
+          <text />
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { list } }
+  );
+  editor.container!.querySelector('button')!.click();
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="list"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "content": null,
+                "done": false,
+              },
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "content",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 798feae4530..5385769d8f7 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -203,7 +203,8 @@ export const ComponentBlocksElement = ({
           assert(path !== null);
           Transforms.removeNodes(editor, { at: path });
         }
-        let newIdx = elementForChildren.children.length;
+        const getNode = () => Node.get(editor, basePath) as Element;
+        let newIdx = getNode().children.length;
         for (const thing of thingsLeftToAdd) {
           Transforms.insertNodes(
             editor,
@@ -225,9 +226,7 @@ export const ComponentBlocksElement = ({
           propPathsToExpectedIndexes.set(JSON.stringify(thing.path), idx);
         }
         outer: while (true) {
-          for (const [idx, childNode] of (
-            Node.get(editor, basePath) as Element
-          ).children.entries()) {
+          for (const [idx, childNode] of getNode().children.entries()) {
             assert(
               childNode.type === 'component-block-prop' ||
                 childNode.type === 'component-inline-prop'
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
new file mode 100644
index 00000000000..ece9ee350bd
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -0,0 +1,275 @@
+/** @jest-environment jsdom */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import React from 'react';
+import { Editor, Transforms } from 'slate';
+import { jsx, makeEditor } from '../tests/utils';
+import { component, fields } from '../../component-blocks';
+
+const qAndA = component({
+  component: props =>
+    React.createElement(
+      'div',
+      null,
+      props.fields.children.elements.map(x => {
+        return React.createElement(
+          'div',
+          { key: x.id },
+          React.createElement('h1', null, x.element.fields.question),
+          React.createElement('p', null, x.element.fields.answer)
+        );
+      })
+    ),
+  label: '',
+  props: {
+    children: fields.array(
+      fields.object({
+        question: fields.child({ kind: 'inline', placeholder: 'Question' }),
+        answer: fields.child({ kind: 'inline', placeholder: 'Question' }),
+      })
+    ),
+  },
+});
+
+test('deleting all child fields in an array element removes the element', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="qAndA"
+        props={{
+          children: [
+            { question: null, answer: null },
+            { question: null, answer: null },
+            { question: null, answer: null },
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'question']}>
+          <text>question 1</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 0, 'answer']}>
+          <text>
+            answer 1<anchor />
+          </text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'question']}>
+          <text>question 2</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'answer']}>
+          <text>
+            answer 2<focus />
+          </text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'question']}>
+          <text>question 3</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'answer']}>
+          <text>answer 3</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { qAndA } }
+  );
+  Editor.withoutNormalizing(editor, () => {
+    Transforms.delete(editor);
+    expect(editor).toMatchInlineSnapshot(`
+      <editor>
+        <component-block
+          component="qAndA"
+          props={
+            Object {
+              "children": Array [
+                Object {
+                  "answer": null,
+                  "question": null,
+                },
+                Object {
+                  "answer": null,
+                  "question": null,
+                },
+                Object {
+                  "answer": null,
+                  "question": null,
+                },
+              ],
+            }
+          }
+        >
+          <component-inline-prop
+            propPath={
+              Array [
+                "children",
+                0,
+                "question",
+              ]
+            }
+          >
+            <text>
+              question 1
+            </text>
+          </component-inline-prop>
+          <component-inline-prop
+            propPath={
+              Array [
+                "children",
+                0,
+                "answer",
+              ]
+            }
+          >
+            <text>
+              answer 1
+            </text>
+            <text>
+              <cursor />
+            </text>
+          </component-inline-prop>
+          <component-inline-prop
+            propPath={
+              Array [
+                "children",
+                2,
+                "question",
+              ]
+            }
+          >
+            <text>
+              question 3
+            </text>
+          </component-inline-prop>
+          <component-inline-prop
+            propPath={
+              Array [
+                "children",
+                2,
+                "answer",
+              ]
+            }
+          >
+            <text>
+              answer 3
+            </text>
+          </component-inline-prop>
+        </component-block>
+        <paragraph>
+          <text>
+            
+          </text>
+        </paragraph>
+      </editor>
+    `);
+  });
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="qAndA"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "answer": null,
+                "question": null,
+              },
+              Object {
+                "answer": null,
+                "question": null,
+              },
+              Object {
+                "answer": null,
+                "question": null,
+              },
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "question",
+            ]
+          }
+        >
+          <text>
+            question 1
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "answer",
+            ]
+          }
+        >
+          <text>
+            answer 1
+            <cursor />
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "question",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "answer",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              2,
+              "question",
+            ]
+          }
+        >
+          <text>
+            question 3
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              2,
+              "answer",
+            ]
+          }
+        >
+          <text>
+            answer 3
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index aa2f3aa88c5..8eeb62a3364 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -342,9 +342,7 @@ export function withComponentBlocks(
             const arrVal = getValueAtPropPath(node.props, propPath) as unknown[];
             const prevKeys = getElementIdsForArrayValue(arrVal);
             const prevKeysSet = new Set(prevKeys);
-            // delete backwards
             const alreadyUsedIndicies = new Set<number>();
-            // all of the fields are unique so we've removed/re-ordered/done nothing
             const newVal: unknown[] = [];
             const newKeys: string[] = [];
             const getNewKey = () => {
diff --git a/packages/fields-document/src/DocumentEditor/tests/utils.tsx b/packages/fields-document/src/DocumentEditor/tests/utils.tsx
index fdd34648bfc..8fe41d82c39 100644
--- a/packages/fields-document/src/DocumentEditor/tests/utils.tsx
+++ b/packages/fields-document/src/DocumentEditor/tests/utils.tsx
@@ -195,7 +195,7 @@ export const makeEditor = (
     isShiftPressedRef?: MutableRefObject<boolean>;
     skipRenderingDOM?: boolean;
   } = {}
-): Editor => {
+): Editor & { container?: HTMLElement } => {
   if (!Editor.isEditor(node)) {
     throw new Error('Unexpected non-editor passed to makeEditor');
   }
@@ -204,7 +204,7 @@ export const makeEditor = (
     componentBlocks,
     relationships,
     isShiftPressedRef
-  );
+  ) as Editor & { container?: HTMLElement };
   // for validation
   (editor as any).__config = {
     documentFeatures,
@@ -258,7 +258,7 @@ export const makeEditor = (
     // this serves two purposes:
     // - a smoke test to make sure the ui doesn't throw from any of the actions in the tests
     // - so that things like ReactEditor.focus and etc. can be called
-    render(
+    const { container } = render(
       <EditorComp
         editor={editor}
         componentBlocks={componentBlocks}
@@ -266,6 +266,7 @@ export const makeEditor = (
         relationships={relationships}
       />
     );
+    editor.container = container;
   }
   return editor;
 };

From 751c50b5cf94ce0ab1440b965e8e2102a838fca4 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 21 Mar 2022 09:55:00 +1000
Subject: [PATCH 028/124] Cleanup

---
 .../DocumentEditor/component-blocks/index.tsx | 174 ++++--------------
 .../DocumentEditor/primitives/add-button.tsx  |   4 +-
 2 files changed, 38 insertions(+), 140 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 5385769d8f7..33719a19415 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -133,7 +133,7 @@ export const ComponentBlocksElement = ({
         const elementForChildren = elementToGetPathRef.current.__elementToGetPath;
         let newProps = cb(prevProps);
         setElement({ props: newProps });
-        const things = findChildPropPathsButDifferent(
+        const childPropPaths = findChildPropPathsWithPrevious(
           newProps,
           prevProps,
           { kind: 'object', value: componentBlock!.props },
@@ -142,13 +142,11 @@ export const ComponentBlocksElement = ({
           []
         );
         const basePath = ReactEditor.findPath(editor, elementForChildren);
-        if (things.length === 0) {
-          const refs = elementForChildren.children.map((_, i) =>
-            Editor.pathRef(editor, [...basePath, i])
-          );
-          for (const ref of refs) {
+        if (childPropPaths.length === 0) {
+          const indexes = elementForChildren.children.map((_, i) => i).reverse();
+          for (const idx of indexes) {
             Transforms.removeNodes(editor, {
-              at: ref.unref()!,
+              at: [...basePath, idx],
             });
           }
           Transforms.insertNodes(
@@ -158,45 +156,39 @@ export const ComponentBlocksElement = ({
           );
           return;
         }
-        const initialPropPathsToEditorPath = new Map<undefined | string, Path>();
+        const initialPropPathsToEditorPath = new Map<undefined | string, number>();
         for (const [idx, node] of elementForChildren.children.entries()) {
           assert(node.type === 'component-block-prop' || node.type === 'component-inline-prop');
           initialPropPathsToEditorPath.set(
             node.propPath === undefined ? undefined : JSON.stringify(node.propPath),
-            [...basePath, idx]
+            idx
           );
         }
-        const thingsLeftToAdd = new Set(things);
-        for (const thing of things) {
-          if (thing.prevPath === undefined) {
+        const childrenLeftToAdd = new Set(childPropPaths);
+        for (const childProp of childPropPaths) {
+          if (childProp.prevPath === undefined) {
             continue;
           }
-          const stringifiedPath = JSON.stringify(thing.prevPath);
-          const editorPath = initialPropPathsToEditorPath.get(stringifiedPath);
-          if (editorPath) {
-            const expectedType = `component-${thing.options.kind}-prop` as const;
+          const stringifiedPath = JSON.stringify(childProp.prevPath);
+          const idxInChildren = initialPropPathsToEditorPath.get(stringifiedPath);
+          if (idxInChildren !== undefined) {
             type ChildProp = Element & { type: 'component-inline-prop' | 'component-block-prop' };
-            const changes: Partial<ChildProp> = {};
-            const prevNode = elementForChildren.children[
-              editorPath[editorPath.length - 1]
-            ] as ChildProp;
+            const prevNode = elementForChildren.children[idxInChildren] as ChildProp;
             assert(prevNode.propPath !== undefined);
-            if (!areArraysEqual(thing.path, prevNode.propPath)) {
-              changes.propPath = thing.path;
-            }
-            if (prevNode.type !== expectedType) {
-              changes.type = expectedType;
-            }
-            if (Object.keys(changes).length) {
-              Transforms.setNodes(editor, changes, { at: editorPath });
+            if (!areArraysEqual(childProp.path, prevNode.propPath)) {
+              Transforms.setNodes(
+                editor,
+                { propPath: childProp.path },
+                { at: [...basePath, idxInChildren] }
+              );
             }
-            thingsLeftToAdd.delete(thing);
+            childrenLeftToAdd.delete(childProp);
             initialPropPathsToEditorPath.delete(stringifiedPath);
           }
         }
         const pathsToRemove: PathRef[] = [];
-        for (const [, editorPath] of initialPropPathsToEditorPath) {
-          pathsToRemove.push(Editor.pathRef(editor, editorPath));
+        for (const [, idxInChildren] of initialPropPathsToEditorPath) {
+          pathsToRemove.push(Editor.pathRef(editor, [...basePath, idxInChildren]));
         }
         for (const pathRef of pathsToRemove) {
           const path = pathRef.unref();
@@ -205,14 +197,14 @@ export const ComponentBlocksElement = ({
         }
         const getNode = () => Node.get(editor, basePath) as Element;
         let newIdx = getNode().children.length;
-        for (const thing of thingsLeftToAdd) {
+        for (const childProp of childrenLeftToAdd) {
           Transforms.insertNodes(
             editor,
             {
-              type: `component-${thing.options.kind}-prop`,
-              propPath: thing.path,
+              type: `component-${childProp.options.kind}-prop`,
+              propPath: childProp.path,
               children: [
-                thing.options.kind === 'block'
+                childProp.options.kind === 'block'
                   ? { type: 'paragraph', children: [{ text: '' }] }
                   : { text: '' },
               ],
@@ -222,7 +214,7 @@ export const ComponentBlocksElement = ({
           newIdx++;
         }
         const propPathsToExpectedIndexes = new Map<string, number>();
-        for (const [idx, thing] of things.entries()) {
+        for (const [idx, thing] of childPropPaths.entries()) {
           propPathsToExpectedIndexes.set(JSON.stringify(thing.path), idx);
         }
         outer: while (true) {
@@ -504,112 +496,20 @@ function propPathWithIndiciesToKeys(propPath: ReadonlyPropPath, val: any): reado
   });
 }
 
-// function findChangedArrayFields(
-//   componentBlock: ComponentBlock,
-//   value: unknown,
-//   prevValue: unknown
-// ) {
-//   let changedArrayFields: { newPath: ReadonlyPropPath; newKeys: string[]; prevKeys: string[] }[] =
-//     [];
-//   findChangedArrayFieldsInner(
-//     { kind: 'object', value: componentBlock.props },
-//     value,
-//     prevValue,
-//     [],
-//     changedArrayFields
-//   );
-//   return changedArrayFields;
-// }
-
-// function findChangedArrayFieldsInner(
-//   field: ComponentPropField,
-//   value: unknown,
-//   prevValue: unknown,
-//   path: ReadonlyPropPath,
-//   changedArrayFields: { path: ReadonlyPropPath; newKeys: string[]; prevKeys: string[] }[]
-// ) {
-//   if (value === prevValue) {
-//     return;
-//   }
-//   if (field.kind === 'child' || field.kind === 'form' || field.kind === 'relationship') {
-//     return;
-//   }
-//   if (field.kind === 'conditional') {
-//     const newDiscriminant: string | boolean = (value as any).discriminant;
-//     const oldDiscriminant: string | boolean = (prevValue as any).discriminant;
-//     findChangedArrayFieldsInner(
-//       field.values[newDiscriminant.toString()],
-//       (value as any).value,
-//       newDiscriminant === oldDiscriminant
-//         ? (prevValue as any).value
-//         : getInitialPropsValue(field.values[newDiscriminant.toString()]),
-//       path.concat('value'),
-//       changedArrayFields
-//     );
-//     return;
-//   }
-//   if (field.kind === 'object') {
-//     for (const [key, innerField] of Object.entries(field.value)) {
-//       findChangedArrayFieldsInner(
-//         innerField,
-//         (value as any)[key],
-//         (prevValue as any)[key],
-//         path.concat(key),
-//         changedArrayFields
-//       );
-//     }
-//     return;
-//   }
-//   if (field.kind === 'array') {
-//     const arrayValue = value as readonly unknown[];
-//     const prevArrayValue = prevValue as readonly unknown[];
-//     const keys = getElementIdsForArrayValue(arrayValue);
-//     const prevKeys = getElementIdsForArrayValue(prevArrayValue);
-//     if (!areArraysEqual(keys, prevKeys)) {
-//       changedArrayFields.push({ path, newKeys: keys, prevKeys });
-//     }
-//     let initialInnerVal;
-
-//     for (const [idx, val] of arrayValue.entries()) {
-//       let key = keys[idx];
-//       let indexOfKeyInPrev = prevKeys.indexOf(key);
-//       let prevVal;
-//       if (indexOfKeyInPrev === -1) {
-//         if (initialInnerVal === undefined) {
-//           initialInnerVal = getInitialPropsValue(field.element);
-//         }
-//         prevVal = initialInnerVal;
-//       } else {
-//         prevVal = prevArrayValue[indexOfKeyInPrev];
-//       }
-//       findChangedArrayFieldsInner(
-//         field.element,
-//         val,
-//         prevVal,
-//         path.concat(idx),
-//         changedArrayFields
-//       );
-//     }
-//     return;
-//   }
-
-//   assertNever(field);
-// }
-
-type Stuff = {
-  prevPath?: ReadonlyPropPath;
+type ChildPropPathWithPrevious = {
+  prevPath: ReadonlyPropPath | undefined;
   path: ReadonlyPropPath;
   options: ChildField['options'];
 };
 
-function findChildPropPathsButDifferent(
+function findChildPropPathsWithPrevious(
   value: any,
   prevValue: any,
   prop: ComponentPropField,
   newPath: ReadonlyPropPath,
   prevPath: ReadonlyPropPath | undefined,
   pathWithKeys: readonly string[] | undefined
-): Stuff[] {
+): ChildPropPathWithPrevious[] {
   switch (prop.kind) {
     case 'form':
     case 'relationship':
@@ -618,7 +518,7 @@ function findChildPropPathsButDifferent(
       return [{ path: newPath, prevPath, options: prop.options }];
     case 'conditional':
       const hasChangedDiscriminant = value.discriminant === prevValue.discriminant;
-      return findChildPropPathsButDifferent(
+      return findChildPropPathsWithPrevious(
         value.value,
         hasChangedDiscriminant
           ? prevValue.value
@@ -629,10 +529,10 @@ function findChildPropPathsButDifferent(
         hasChangedDiscriminant ? undefined : pathWithKeys?.concat('value')
       );
     case 'object': {
-      let paths: Stuff[] = [];
+      let paths: ChildPropPathWithPrevious[] = [];
       Object.keys(prop.value).forEach(key => {
         paths.push(
-          ...findChildPropPathsButDifferent(
+          ...findChildPropPathsWithPrevious(
             value[key],
             prevValue[key],
             prop.value[key],
@@ -645,7 +545,7 @@ function findChildPropPathsButDifferent(
       return paths;
     }
     case 'array': {
-      let paths: Stuff[] = [];
+      let paths: ChildPropPathWithPrevious[] = [];
       const prevKeys = getElementIdsForArrayValue(prevValue);
       const keys = getElementIdsForArrayValue(value);
       for (const [i, val] of (value as unknown[]).entries()) {
@@ -658,7 +558,7 @@ function findChildPropPathsButDifferent(
           prevVal = prevValue[prevIdx];
         }
         paths.push(
-          ...findChildPropPathsButDifferent(
+          ...findChildPropPathsWithPrevious(
             val,
             prevVal,
             prop.element,
diff --git a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
index 6ef5639d32a..ebf3febdd28 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
@@ -13,9 +13,7 @@ export function AddButton<Value extends string>(props: {
   const { dialog, trigger, isOpen, setOpen } = usePopover({
     modifiers: [{ name: 'offset', options: { offset: [0, 4] } }],
   });
-  //   if (!isOpen) {
-  //     setOpen(true);
-  //   }
+
   const { getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex } = useSelect<{
     label: string;
     value: Value;

From 6fcf879f8601a58d335b85167932a998c99276c6 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 21 Mar 2022 10:51:15 +1000
Subject: [PATCH 029/124] Fix child field things

---
 .../with-component-blocks.tsx                 | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 8eeb62a3364..43ec586074c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -113,6 +113,29 @@ function normalizeNodeWithinComponentProp(
   return didNormalization;
 }
 
+function canPropContainChildField(rootProp: ComponentPropField) {
+  const queue = new Set<ComponentPropField>([rootProp]);
+  for (const prop of queue) {
+    if (prop.kind === 'form' || prop.kind === 'relationship') {
+    } else if (prop.kind === 'child') {
+      return true;
+    } else if (prop.kind === 'array') {
+      queue.add(prop.element);
+    } else if (prop.kind === 'object') {
+      for (const innerProp of Object.values(prop.value)) {
+        queue.add(innerProp);
+      }
+    } else if (prop.kind === 'conditional') {
+      for (const innerProp of Object.values(prop.values)) {
+        queue.add(innerProp);
+      }
+    } else {
+      assertNever(prop);
+    }
+  }
+  return false;
+}
+
 function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField): boolean {
   const queue = new Set<ComponentPropField>([rootProp]);
   let hasFoundChildField = false;
@@ -124,7 +147,9 @@ function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField):
       }
       hasFoundChildField = true;
     } else if (prop.kind === 'array') {
-      queue.add(prop.element);
+      if (canPropContainChildField(prop.element)) {
+        return false;
+      }
     } else if (prop.kind === 'object') {
       for (const innerProp of Object.values(prop.value)) {
         queue.add(innerProp);
@@ -242,11 +267,12 @@ export function withComponentBlocks(
             if (idx !== -1) {
               const arrayFieldIdx = ancestorFields.length - 1 - idx;
               const arrayField = ancestorFields[arrayFieldIdx];
+              assert(arrayField.kind === 'array');
               const val = getValueAtPropPath(
                 componentBlockNode.props,
                 componentPropNode.propPath.slice(0, arrayFieldIdx)
               ) as unknown[];
-              if (doesPropOnlyEverContainASingleChildField(arrayField)) {
+              if (doesPropOnlyEverContainASingleChildField(arrayField.element)) {
                 if (
                   Node.string(componentPropNode) === '' &&
                   val.length - 1 === componentPropNode.propPath[arrayFieldIdx]

From 88986beb0cb3b16942ae37757646b14de76af92d Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 21 Mar 2022 11:08:02 +1000
Subject: [PATCH 030/124] Update a test

---
 .../DocumentEditor/component-blocks/index.tsx |   2 +-
 .../multi-child-field-in-array-field.test.tsx | 112 +++---------------
 2 files changed, 16 insertions(+), 98 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 33719a19415..0c48ab4119d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -13,7 +13,7 @@ import {
   useRef,
 } from 'react';
 import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
-import { Editor, Element, Path, PathRef, Transforms, Node } from 'slate';
+import { Editor, Element, PathRef, Transforms, Node } from 'slate';
 
 import { jsx, useTheme } from '@keystone-ui/core';
 import { Trash2Icon } from '@keystone-ui/icons/icons/Trash2Icon';
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index ece9ee350bd..a2105a3e1c2 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -31,7 +31,10 @@ const qAndA = component({
   },
 });
 
-test('deleting all child fields in an array element removes the element', () => {
+// ideally this would probably work like array fields with a single child field in the array
+// getting that behaviour right would be difficult though, so this test exists assert
+// our current behaviour so we know if it changes for any reason
+test('deleting all child fields in an array field element when there are multiple child fields as the element of the array field does not remove the child fields/array element', () => {
   const editor = makeEditor(
     <editor>
       <component-block
@@ -49,19 +52,21 @@ test('deleting all child fields in an array element removes the element', () =>
         </component-inline-prop>
         <component-inline-prop propPath={['children', 0, 'answer']}>
           <text>
-            answer 1<anchor />
+            answer
+            <anchor /> 1
           </text>
         </component-inline-prop>
         <component-inline-prop propPath={['children', 1, 'question']}>
           <text>question 2</text>
         </component-inline-prop>
         <component-inline-prop propPath={['children', 1, 'answer']}>
-          <text>
-            answer 2<focus />
-          </text>
+          <text>answer 2</text>
         </component-inline-prop>
         <component-inline-prop propPath={['children', 2, 'question']}>
-          <text>question 3</text>
+          <text>
+            question
+            <focus /> 3
+          </text>
         </component-inline-prop>
         <component-inline-prop propPath={['children', 2, 'answer']}>
           <text>answer 3</text>
@@ -73,95 +78,7 @@ test('deleting all child fields in an array element removes the element', () =>
     </editor>,
     { componentBlocks: { qAndA } }
   );
-  Editor.withoutNormalizing(editor, () => {
-    Transforms.delete(editor);
-    expect(editor).toMatchInlineSnapshot(`
-      <editor>
-        <component-block
-          component="qAndA"
-          props={
-            Object {
-              "children": Array [
-                Object {
-                  "answer": null,
-                  "question": null,
-                },
-                Object {
-                  "answer": null,
-                  "question": null,
-                },
-                Object {
-                  "answer": null,
-                  "question": null,
-                },
-              ],
-            }
-          }
-        >
-          <component-inline-prop
-            propPath={
-              Array [
-                "children",
-                0,
-                "question",
-              ]
-            }
-          >
-            <text>
-              question 1
-            </text>
-          </component-inline-prop>
-          <component-inline-prop
-            propPath={
-              Array [
-                "children",
-                0,
-                "answer",
-              ]
-            }
-          >
-            <text>
-              answer 1
-            </text>
-            <text>
-              <cursor />
-            </text>
-          </component-inline-prop>
-          <component-inline-prop
-            propPath={
-              Array [
-                "children",
-                2,
-                "question",
-              ]
-            }
-          >
-            <text>
-              question 3
-            </text>
-          </component-inline-prop>
-          <component-inline-prop
-            propPath={
-              Array [
-                "children",
-                2,
-                "answer",
-              ]
-            }
-          >
-            <text>
-              answer 3
-            </text>
-          </component-inline-prop>
-        </component-block>
-        <paragraph>
-          <text>
-            
-          </text>
-        </paragraph>
-      </editor>
-    `);
-  });
+  Transforms.delete(editor);
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
@@ -208,8 +125,9 @@ test('deleting all child fields in an array element removes the element', () =>
           }
         >
           <text>
-            answer 1
+            answer
             <cursor />
+             3
           </text>
         </component-inline-prop>
         <component-inline-prop
@@ -248,7 +166,7 @@ test('deleting all child fields in an array element removes the element', () =>
           }
         >
           <text>
-            question 3
+            
           </text>
         </component-inline-prop>
         <component-inline-prop

From d25716c6f12ee51301c57868dbb0871a592b39c2 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 21 Mar 2022 13:56:52 +1000
Subject: [PATCH 031/124] Update tests

---
 ...ld-field-in-recursive-array-field.test.tsx | 114 +++++++++
 .../insertion-and-preview-props.test.tsx      | 233 +++++++++---------
 .../multi-child-field-in-array-field.test.tsx | 137 +++++++++-
 .../component-blocks/preview-props.tsx        |   2 +-
 4 files changed, 369 insertions(+), 117 deletions(-)
 create mode 100644 packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
new file mode 100644
index 00000000000..c871de6411f
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -0,0 +1,114 @@
+/** @jest-environment jsdom */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import React, { ReactElement } from 'react';
+import { jsx, makeEditor } from '../tests/utils';
+import { component, fields } from '../../component-blocks';
+import { ArrayField, ChildField, ObjectField, PreviewProps } from './api';
+
+type ListItems = ArrayField<
+  ObjectField<{
+    content: ChildField;
+    children: ListItems;
+  }>
+>;
+
+const children: ListItems = fields.array(
+  fields.object({
+    content: fields.child({ kind: 'inline', placeholder: '' }),
+    get children() {
+      return children;
+    },
+  })
+);
+
+function List(props: PreviewProps<ListItems>): ReactElement {
+  return React.createElement(
+    'ul',
+    null,
+    props.elements.map(x => {
+      return React.createElement(
+        'li',
+        { key: x.id },
+        x.element.fields.content,
+        React.createElement(List, x.element.fields.children)
+      );
+    }),
+    React.createElement('button', { onClick: () => props.onInsert() }, 'Insert')
+  );
+}
+
+const list = component({
+  component: props => React.createElement(List, props.fields.children),
+  label: '',
+  props: {
+    children,
+  },
+});
+
+test('recursive arrays of child fields existing does not crash and are not normalized away', () => {
+  makeEditor(
+    <editor>
+      <component-block
+        component="list"
+        props={{
+          children: [
+            { content: null, children: [] },
+            {
+              content: null,
+              children: [
+                {
+                  content: null,
+                  children: [
+                    { content: null, children: [] },
+                    { content: null, children: [] },
+                    { content: null, children: [] },
+                  ],
+                },
+              ],
+            },
+            {
+              content: null,
+              children: [
+                { content: null, children: [] },
+                { content: null, children: [] },
+              ],
+            },
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>first</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'content']}>
+          <text>second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'children', 0, 'content']}>
+          <text>first in second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'children', 0, 'children', 0, 'content']}>
+          <text>first in first in second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'children', 0, 'children', 1, 'content']}>
+          <text>second in first in second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 1, 'children', 0, 'children', 2, 'content']}>
+          <text>third in first in second</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'content']}>
+          <text>third</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'children', 0, 'content']}>
+          <text>first in third</text>
+        </component-inline-prop>
+        <component-inline-prop propPath={['children', 2, 'children', 1, 'content']}>
+          <text>second in third</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { list } }
+  );
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index e48a277c6fa..bd18f83bfa6 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -5,7 +5,7 @@ import { Transforms, Editor } from 'slate';
 import React from 'react';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
-import { createGetPreviewProps } from './preview-props';
+import { ChildFieldEditable, createGetPreviewProps } from './preview-props';
 import { insertComponentBlock } from '.';
 
 const objectProp = fields.object({
@@ -121,7 +121,7 @@ test('inserting a complex component block', () => {
         props={
           Object {
             "object": Object {
-              "block": undefined,
+              "block": null,
               "conditional": Object {
                 "discriminant": false,
                 "value": null,
@@ -130,7 +130,7 @@ test('inserting a complex component block', () => {
                 "discriminant": "a",
                 "value": "",
               },
-              "inline": undefined,
+              "inline": null,
               "many": Array [],
               "prop": "",
               "select": "a",
@@ -176,7 +176,7 @@ test('inserting a complex component block', () => {
 
 const getPreviewProps = (editor: Editor) =>
   createGetPreviewProps({ kind: 'object', value: componentBlocks.complex.props }, props => {
-    Transforms.setNodes(editor, { props }, { at: [0] });
+    Transforms.setNodes(editor, { props: props((editor.children[0] as any).props) }, { at: [0] });
   })((editor.children[0] as any).props);
 
 const makeEditorWithComplexComponentBlock = () =>
@@ -222,65 +222,70 @@ test('preview props api', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  expect(previewProps).toMatchInlineSnapshot(`
-    Object {
-      "object": Object {
-        "block": <block-prop />,
-        "conditional": Object {
-          "discriminant": false,
-          "onChange": [Function],
-          "options": undefined,
-          "value": Object {
-            "onChange": [Function],
-            "value": null,
-          },
-        },
-        "conditionalSelect": Object {
-          "discriminant": "a",
-          "onChange": [Function],
-          "options": Array [
-            Object {
-              "label": "A",
-              "value": "a",
-            },
-            Object {
-              "label": "B",
-              "value": "b",
+  const expectedPreviewProps: typeof previewProps = {
+    field: {
+      kind: 'object',
+      value: componentBlocks.complex.props,
+    },
+    fields: {
+      object: {
+        field: componentBlocks.complex.props.object,
+        fields: {
+          block: React.createElement(ChildFieldEditable, { path: ['object', 'block'] }),
+          conditional: {
+            discriminant: false,
+            field: componentBlocks.complex.props.object.value.conditional,
+            onChange: expect.any(Function),
+            options: undefined,
+            value: {
+              field: componentBlocks.complex.props.object.value.conditional.values.false,
+              onChange: expect.any(Function),
+              value: null,
             },
-          ],
-          "value": Object {
-            "onChange": [Function],
-            "options": undefined,
-            "value": "",
           },
-        },
-        "inline": <inline-prop />,
-        "many": Object {
-          "onChange": [Function],
-          "value": Array [],
-        },
-        "prop": Object {
-          "onChange": [Function],
-          "options": undefined,
-          "value": "",
-        },
-        "select": Object {
-          "onChange": [Function],
-          "options": Array [
-            Object {
-              "label": "A",
-              "value": "a",
-            },
-            Object {
-              "label": "B",
-              "value": "b",
+          conditionalSelect: {
+            discriminant: 'a',
+            field: componentBlocks.complex.props.object.value.conditionalSelect,
+            onChange: expect.any(Function),
+            options: [
+              { label: 'A', value: 'a' },
+              { label: 'B', value: 'b' },
+            ],
+            value: {
+              field: componentBlocks.complex.props.object.value.conditionalSelect.values.a,
+              onChange: expect.any(Function),
+              options: undefined,
+              value: '',
             },
-          ],
-          "value": "a",
+          },
+          inline: React.createElement(ChildFieldEditable, { path: ['object', 'inline'] }),
+          many: {
+            field: componentBlocks.complex.props.object.value.many,
+            value: [],
+            onChange: expect.any(Function),
+          },
+          prop: {
+            field: componentBlocks.complex.props.object.value.prop,
+            onChange: expect.any(Function),
+            options: undefined,
+            value: '',
+          },
+          select: {
+            field: componentBlocks.complex.props.object.value.select,
+            onChange: expect.any(Function),
+            options: [
+              { label: 'A', value: 'a' },
+              { label: 'B', value: 'b' },
+            ],
+            value: 'a',
+          },
         },
+        onChange: expect.any(Function),
       },
-    }
-  `);
+    },
+    onChange: expect.any(Function),
+  };
+  expect(previewProps).toEqual(expectedPreviewProps);
 });
 
 test('preview props conditional change', () => {
@@ -297,7 +302,7 @@ test('preview props conditional change', () => {
             "object": Object {
               "conditional": Object {
                 "discriminant": true,
-                "value": undefined,
+                "value": null,
               },
               "conditionalSelect": Object {
                 "discriminant": "a",
@@ -359,14 +364,17 @@ test('preview props conditional change', () => {
       </paragraph>
     </editor>
   `);
-  expect(getPreviewProps(editor).fields.object.fields.conditional).toMatchInlineSnapshot(`
-    Object {
-      "discriminant": true,
-      "onChange": [Function],
-      "options": undefined,
-      "value": <conditional-prop />,
-    }
-  `);
+  const conditionalPreviewProps = getPreviewProps(editor).fields.object.fields.conditional;
+  const expectedConditionalPreviewProps: typeof conditionalPreviewProps = {
+    field: componentBlocks.complex.props.object.value.conditional,
+    discriminant: true,
+    onChange: expect.any(Function),
+    options: undefined,
+    value: React.createElement(ChildFieldEditable, { path: ['object', 'conditional', 'value'] }),
+  };
+  expect(getPreviewProps(editor).fields.object.fields.conditional).toEqual(
+    expectedConditionalPreviewProps
+  );
 });
 
 test('preview props form change', () => {
@@ -374,7 +382,7 @@ test('preview props form change', () => {
 
   let previewProps = getPreviewProps(editor);
   previewProps.fields.object.fields.select.onChange('b');
-  expect((editor.children[0] as any).props.object.fields.select).toBe('b');
+  expect((editor.children[0] as any).props.object.select).toBe('b');
   expect(getPreviewProps(editor).fields.object.fields.select.value).toBe('b');
 });
 
@@ -384,7 +392,7 @@ test('relationship many change', () => {
   let previewProps = getPreviewProps(editor);
   const val = [{ data: {}, id: 'some-id', label: 'some-id' }];
   previewProps.fields.object.fields.many.onChange(val);
-  expect((editor.children[0] as any).props.object.fields.many).toEqual(val);
+  expect((editor.children[0] as any).props.object.many).toEqual(val);
   expect(getPreviewProps(editor).fields.object.fields.many.value).toEqual(val);
 });
 
@@ -401,7 +409,7 @@ test('relationship single change', () => {
   assert(previewProps.fields.object.fields.conditional.discriminant === false);
   const val = { data: {}, id: 'some-id', label: 'some-id' };
   previewProps.fields.object.fields.conditional.value.onChange(val);
-  expect((editor.children[0] as any).props.object.fields.conditional.value).toEqual(val);
+  expect((editor.children[0] as any).props.object.conditional.value).toEqual(val);
   expect((getPreviewProps(editor).fields.object.fields.conditional.value as any).value).toEqual(
     val
   );
@@ -414,67 +422,62 @@ test('changing conditional with form inside', () => {
   assert(previewProps.fields.object.fields.conditional.discriminant === false);
   previewProps.fields.object.fields.conditionalSelect.onChange('b');
 
-  expect((editor.children[0] as any).props.object.fields.conditionalSelect).toMatchInlineSnapshot(`
+  expect((editor.children[0] as any).props.object.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "b",
       "value": "B",
     }
   `);
-  expect(getPreviewProps(editor).fields.object.fields.conditionalSelect).toMatchInlineSnapshot(`
-    Object {
-      "discriminant": "b",
-      "onChange": [Function],
-      "options": Array [
-        Object {
-          "label": "A",
-          "value": "a",
-        },
-        Object {
-          "label": "B",
-          "value": "b",
-        },
-      ],
-      "value": Object {
-        "onChange": [Function],
-        "options": undefined,
-        "value": "B",
-      },
-    }
-  `);
+  const conditionalSelectPreviewProps =
+    getPreviewProps(editor).fields.object.fields.conditionalSelect;
+  const expectedConditionalSelectPreviewProps: typeof conditionalSelectPreviewProps = {
+    discriminant: 'b',
+    field: componentBlocks.complex.props.object.value.conditionalSelect,
+    onChange: expect.any(Function),
+    options: [
+      { label: 'A', value: 'a' },
+      { label: 'B', value: 'b' },
+    ],
+    value: {
+      field: componentBlocks.complex.props.object.value.conditionalSelect.values.b,
+      onChange: expect.any(Function),
+      options: undefined,
+      value: 'B',
+    },
+  };
+  expect(getPreviewProps(editor).fields.object.fields.conditionalSelect).toEqual(
+    expectedConditionalSelectPreviewProps
+  );
 });
 
 test('changing form inside conditional', () => {
   let editor = makeEditorWithComplexComponentBlock();
 
   let previewProps = getPreviewProps(editor);
-  assert(previewProps.fields.object.fields.conditional.discriminant === false);
   previewProps.fields.object.fields.conditionalSelect.value.onChange('Some content');
 
-  expect((editor.children[0] as any).props.object.fields.conditionalSelect).toMatchInlineSnapshot(`
+  expect((editor.children[0] as any).props.object.conditionalSelect).toMatchInlineSnapshot(`
     Object {
       "discriminant": "a",
       "value": "Some content",
     }
   `);
-  expect(getPreviewProps(editor).fields.object.fields.conditionalSelect).toMatchInlineSnapshot(`
-    Object {
-      "discriminant": "a",
-      "onChange": [Function],
-      "options": Array [
-        Object {
-          "label": "A",
-          "value": "a",
-        },
-        Object {
-          "label": "B",
-          "value": "b",
-        },
-      ],
-      "value": Object {
-        "onChange": [Function],
-        "options": undefined,
-        "value": "Some content",
-      },
-    }
-  `);
+  const conditionalSelectPreviewProps =
+    getPreviewProps(editor).fields.object.fields.conditionalSelect;
+  const expectedConditionalSelectPreviewProps: typeof conditionalSelectPreviewProps = {
+    discriminant: 'a',
+    field: componentBlocks.complex.props.object.value.conditionalSelect,
+    onChange: expect.any(Function),
+    options: [
+      { label: 'A', value: 'a' },
+      { label: 'B', value: 'b' },
+    ],
+    value: {
+      field: componentBlocks.complex.props.object.value.conditionalSelect.values.a,
+      onChange: expect.any(Function),
+      options: undefined,
+      value: 'Some content',
+    },
+  };
+  expect(conditionalSelectPreviewProps).toEqual(expectedConditionalSelectPreviewProps);
 });
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index a2105a3e1c2..7c61209fc82 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -2,7 +2,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import React from 'react';
-import { Editor, Transforms } from 'slate';
+import { Transforms } from 'slate';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
 
@@ -191,3 +191,138 @@ test('deleting all child fields in an array field element when there are multipl
     </editor>
   `);
 });
+
+// again, in the future, this might not be the behaviour we want but we want to explicitly state what the behaviour is currently
+test('when the wrong children exist, the children are normalized based on the props', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="qAndA"
+        props={{
+          children: [
+            { question: null, answer: null },
+            { question: null, answer: null },
+            { question: null, answer: null },
+          ],
+        }}
+      >
+        <component-inline-prop propPath={['children', 3, 'question']}>
+          <text>some question</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { qAndA }, skipRenderingDOM: true, normalization: 'normalize' }
+  );
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="qAndA"
+        props={
+          Object {
+            "children": Array [
+              Object {
+                "answer": null,
+                "question": null,
+              },
+              Object {
+                "answer": null,
+                "question": null,
+              },
+              Object {
+                "answer": null,
+                "question": null,
+              },
+            ],
+          }
+        }
+      >
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "question",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              0,
+              "answer",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "question",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              1,
+              "answer",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              2,
+              "question",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+        <component-inline-prop
+          propPath={
+            Array [
+              "children",
+              2,
+              "answer",
+            ]
+          }
+        >
+          <text>
+            
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 9a5670005ed..9521bcba4fb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -35,7 +35,7 @@ export function getNewArrayElementId() {
 
 export const ChildrenByPathContext = React.createContext<Record<string, ReactElement>>({});
 
-function ChildFieldEditable({ path }: { path: readonly string[] }) {
+export function ChildFieldEditable({ path }: { path: readonly string[] }) {
   const childrenByPath = useContext(ChildrenByPathContext);
   const child = childrenByPath[JSON.stringify(path)];
   if (child === undefined) {

From 31b4869c9d4feff3b1698c4ccc14930780cff389 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 23 Mar 2022 12:26:37 +1000
Subject: [PATCH 032/124] Fix things

---
 .../basic/admin/fieldViews/Content.tsx        | 86 ++++++++++++++++---
 packages/fields-document/src/component.ts     |  4 +-
 2 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index d634fd03522..1e882e35603 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -56,19 +56,32 @@ export const componentBlocks = {
   }),
   table: component({
     component: function MyTable(props) {
-      // useEffect(() => {
-      //   let maxColumns = 1;
-      //   for (const row of rows.elements) {
-      //     if (row.elements.length > maxColumns) {
-      //       maxColumns = row.elements.length;
-      //     }
-      //   }
-      //   for (const columns of rows.elements) {
-      //     for (const _ of Array.from({ length: maxColumns - columns.elements.length })) {
-      //       columns.insert();
-      //     }
-      //   }
-      // });
+      useEffect(() => {
+        let maxColumns = 1;
+        const rows = props.fields.rows;
+        for (const row of rows.elements) {
+          if (row.element.elements.length > maxColumns) {
+            maxColumns = row.element.elements.length;
+          }
+        }
+        if (rows.elements.some(x => x.element.elements.length !== maxColumns)) {
+          rows.onChange(
+            rows.elements.map(element => {
+              return {
+                id: element.id,
+                value: [
+                  ...element.element.elements.map(element => {
+                    return { id: element.id };
+                  }),
+                  ...Array.from({ length: maxColumns - element.element.elements.length }, () => ({
+                    id: undefined,
+                  })),
+                ],
+              };
+            })
+          );
+        }
+      });
 
       return (
         <div>
@@ -87,7 +100,19 @@ export const componentBlocks = {
                     <NotEditable>
                       <Button
                         onClick={() => {
-                          row.element.onInsert();
+                          props.fields.rows.onChange(
+                            props.fields.rows.elements.map(element => {
+                              return {
+                                id: element.id,
+                                value: [
+                                  ...element.element.elements.map(element => {
+                                    return { id: element.id };
+                                  }),
+                                  { id: undefined },
+                                ],
+                              };
+                            })
+                          );
                         }}
                       >
                         Insert Column
@@ -166,6 +191,39 @@ export const componentBlocks = {
     },
     // chromeless: true,
   }),
+  qAndA: component({
+    component: function MyList(props) {
+      useEffect(() => {
+        if (!props.fields.children.elements.length) {
+          props.fields.children.onInsert();
+        }
+      });
+      return (
+        <div>
+          {props.fields.children.elements.map(element => (
+            <div key={element.id}>
+              <h1>{element.element.fields.question}</h1>
+              <div>{element.element.fields.answer}</div>
+            </div>
+          ))}
+        </div>
+      );
+    },
+    label: 'Question & Answers',
+    props: {
+      children: fields.array(
+        fields.object({
+          question: fields.child({
+            kind: 'inline',
+            placeholder: 'Question...',
+            formatting: 'inherit',
+          }),
+          answer: fields.child({ kind: 'inline', placeholder: 'Answer...', formatting: 'inherit' }),
+        })
+      ),
+    },
+    // chromeless: true,
+  }),
   hero: component({
     component: props => {
       return (
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index f15401956e7..53aaea99161 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -56,7 +56,7 @@ export const componentThing =
         ...config,
         hooks: {
           ...config.hooks,
-          resolveInput(args) {
+          async resolveInput(args) {
             let val = args.resolvedData[meta.fieldKey];
             if (args.operation === 'update') {
               let prevVal = args.item[meta.fieldKey];
@@ -64,7 +64,7 @@ export const componentThing =
                 prevVal = JSON.parse(prevVal as any);
                 val = args.inputData[meta.fieldKey];
               }
-              val = getValueForUpdate(prop, val, prevVal, args.context, []);
+              val = await getValueForUpdate(prop, val, prevVal, args.context, []);
               if (val === null && meta.provider === 'postgresql') {
                 val = 'JsonNull';
               }

From f657188a829e8eace20c499017612221af201335 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 29 Mar 2022 16:35:41 +1000
Subject: [PATCH 033/124] Fix website build

---
 design-system/website/package.json   | 4 ++--
 docs/package.json                    | 4 ++--
 examples/document-field/package.json | 4 ++--
 packages/core/package.json           | 4 ++--
 yarn.lock                            | 8 ++++----
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/design-system/website/package.json b/design-system/website/package.json
index b137de54a74..f8acba1c481 100644
--- a/design-system/website/package.json
+++ b/design-system/website/package.json
@@ -20,7 +20,7 @@
     "@keystone-ui/segmented-control": "^6.0.0",
     "@keystone-ui/toast": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/tinycolor2": "^1.4.3",
@@ -36,4 +36,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/website"
-}
+}
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index fd5b3ca5670..4583e158994 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,7 +19,7 @@
     "@mdx-js/loader": "next",
     "@mdx-js/react": "next",
     "@next/mdx": "^12.0.7",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@sindresorhus/slugify": "^1.1.2",
     "@types/gtag.js": "^0.0.8",
     "@types/mdx-js__react": "^1.5.5",
@@ -50,4 +50,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/docs"
-}
+}
\ No newline at end of file
diff --git a/examples/document-field/package.json b/examples/document-field/package.json
index 02ad989c359..101d70d3aeb 100644
--- a/examples/document-field/package.json
+++ b/examples/document-field/package.json
@@ -13,7 +13,7 @@
     "@keystone-6/core": "^1.0.0",
     "@keystone-6/document-renderer": "^1.0.0",
     "@keystone-6/fields-document": "^1.0.0",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "next": "^12.1.0",
     "react": "^17.0.2"
   },
@@ -24,4 +24,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/examples/document-field"
-}
+}
\ No newline at end of file
diff --git a/packages/core/package.json b/packages/core/package.json
index 5bdc9d8107f..307b2713945 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -49,7 +49,7 @@
     "@keystone-ui/toast": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
     "@nodelib/fs.walk": "^1.2.8",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@prisma/client": "3.9.2",
     "@prisma/migrate": "3.9.2",
     "@prisma/sdk": "3.9.2",
@@ -164,4 +164,4 @@
     ]
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/packages/core"
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index bc4f83cc661..99159a50b92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2258,10 +2258,10 @@
     pirates "^4.0.1"
     source-map-support "^0.5.16"
 
-"@preconstruct/next@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@preconstruct/next/-/next-3.0.1.tgz#7070edaf7adb350010114adbbc90079a98b0f31a"
-  integrity sha512-b9q1US5vsUzHPeMGlCFGWdttAHQ2q6raFlY1vf5binrKMkki/gt6GvskTJ4RXfFCt7QmVx9tRcuTFXMhUDgb6A==
+"@preconstruct/next@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@preconstruct/next/-/next-4.0.0.tgz#4d9c64ed68bb7cdc72d35d79d1dbe26ba2cae61e"
+  integrity sha512-vSrc8wFQgBErU7dKTKSQtr/DLWPHcN9jMoiWOAQodB1+B4Kpqqry6QhGYoRm0DQU5gNL+Rcp+Xb350O1E/gjsg==
 
 "@prisma/client@3.9.2":
   version "3.9.2"

From 2ef4c215418e65a7e6778614abb6ab313f059119 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 1 Apr 2022 09:00:52 +1000
Subject: [PATCH 034/124] Experimenting

---
 .../basic/admin/fieldViews/Blah.tsx           | 350 ++++++++++++------
 examples-staging/basic/schema.graphql         |   9 +-
 2 files changed, 240 insertions(+), 119 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index fe9a4388c07..0f85e209bda 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -5,16 +5,14 @@ import {
   fields,
   ArrayField,
   ConditionalField,
-  ObjectField,
+  ComponentPropField,
+  FormField,
 } from '@keystone-6/fields-document/component-blocks';
 import { PreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/api';
 import { FormValueContentFromPreview } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
-import { Button } from '@keystone-ui/button';
 import { jsx, Stack } from '@keystone-ui/core';
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import { AlertDialog } from '@keystone-ui/modals';
-import { useState } from 'react';
-import { EditIcon } from '@keystone-ui/icons/icons/EditIcon';
+import { ButtonHTMLAttributes, useCallback, useEffect, useState, useRef } from 'react';
 import {
   AddButton,
   SortableList,
@@ -22,105 +20,151 @@ import {
   DragHandle,
 } from '@keystone-6/fields-document/primitives';
 
-const label = fields.text({ label: 'Label' });
-
-const leaf = fields.object({
-  url: fields.url({ label: 'URL' }),
-  label,
-  author: fields.relationship({
-    label: 'Author',
-    listKey: 'User',
-  }),
-});
-
-const discriminant = fields.select({
-  label: 'Type',
-  options: [
-    { label: 'Group', value: 'group' },
-    { label: 'Leaf', value: 'leaf' },
-  ] as const,
-  defaultValue: 'leaf',
-});
-
-type Prop = ArrayField<
+type ComponentsFields<Components extends Record<string, ComponentPropField>> = ArrayField<
   ConditionalField<
-    typeof discriminant,
-    { leaf: typeof leaf; group: ObjectField<{ label: typeof label; children: Prop }> }
+    FormField<keyof Components & string, readonly { value: keyof Components; label: string }[]>,
+    Components
   >
 >;
 
-const conditional = fields.conditional(discriminant, {
-  leaf,
-  group: fields.object({
-    label,
-    get children() {
-      return innerChildren;
-    },
-  }),
-});
+const returnUndefined = () => undefined;
 
-const innerChildren: Prop = fields.array(conditional, {
-  preview(props) {
-    return (
-      <FieldContainer>
-        <FieldLabel>Children</FieldLabel>
-        <Preview {...props} />
-      </FieldContainer>
-    );
-  },
-});
-
-function Preview(props: PreviewProps<Prop>) {
-  return (
-    <Stack gap="medium">
-      {!!props.elements.length && (
-        <SortableList {...props}>
-          {props.elements.map(x => {
-            return <DraggableElement key={x.id} {...x} />;
-          })}
-        </SortableList>
-      )}
-
-      <AddButton options={props.field.element.discriminant.options} onInsert={props.onInsert} />
-    </Stack>
+function components<
+  Components extends {
+    [Key in keyof Components]: {
+      label: string;
+      field: ComponentPropField;
+      subtitle?: (props: PreviewProps<Components[Key]['field']>) => string | undefined;
+      children?: (
+        props: PreviewProps<Components[Key]['field']>
+      ) => PreviewProps<ComponentPropField> | undefined;
+    };
+  }
+>(
+  components: Components
+): ComponentsFields<{
+  [Key in keyof Components]: Components[Key]['field'];
+}> {
+  const comps = components as unknown as Record<
+    string,
+    {
+      label: string;
+      field: ComponentPropField;
+      subtitle?: (props: PreviewProps<ComponentPropField>) => string | undefined;
+      children?: (
+        props: PreviewProps<ComponentPropField>
+      ) => PreviewProps<ComponentPropField> | undefined;
+    }
+  >;
+  const labels = new Map(Object.entries(comps).map(([key, { label }]) => [key, label]));
+  const field = fields.array(
+    fields.conditional(
+      fields.select({
+        label: 'Type',
+        options: Object.entries(comps).map(([value, { label }]) => ({
+          value: value,
+          label,
+        })),
+        defaultValue: Object.keys(comps)[0],
+      }),
+      Object.fromEntries(Object.entries(comps).map(([value, { field }]) => [value, field]))
+    ),
+    {
+      preview: function Preview(props) {
+        const elementsRef = useRef(props.elements);
+        useEffect(() => {
+          elementsRef.current = props.elements;
+        });
+        const propsOnRemove = props.onRemove;
+        const onRemove = useCallback(
+          (id: string) => {
+            const idx = elementsRef.current.findIndex(e => e.id === id);
+            propsOnRemove(idx);
+          },
+          [propsOnRemove]
+        );
+        return (
+          <Stack gap="medium">
+            {!!props.elements.length && (
+              <SortableList {...props}>
+                {props.elements.map(x => {
+                  return (
+                    <DraggableElement
+                      key={x.id}
+                      id={x.id}
+                      props={x.element.value}
+                      label={labels.get(x.element.discriminant)!}
+                      children={comps[x.element.discriminant].children ?? returnUndefined}
+                      subtitle={comps[x.element.discriminant].subtitle ?? returnUndefined}
+                      onRemove={onRemove}
+                    />
+                  );
+                })}
+              </SortableList>
+            )}
+            <AddButton
+              options={props.field.element.discriminant.options}
+              onInsert={props.onInsert}
+            />
+          </Stack>
+        );
+      },
+    }
   );
+  return field as any;
 }
-export const prop: Prop = fields.array(conditional, {
-  preview: Preview,
+
+function componentThing<Field extends ComponentPropField>(component: {
+  label: string;
+  field: Field;
+  subtitle?: (props: PreviewProps<Field>) => string | undefined;
+  children?: (props: PreviewProps<Field>) => PreviewProps<ComponentPropField> | undefined;
+}) {
+  return component;
+}
+
+export const prop: ArrayField<ComponentPropField> = components({
+  leaf: componentThing({
+    label: 'Leaf',
+    field: fields.object({
+      label: fields.text({ label: 'Label' }),
+      url: fields.url({ label: 'URL' }),
+    }),
+    subtitle: props => props.fields.label.value,
+  }),
+  group: componentThing({
+    label: 'Group',
+    field: fields.object({
+      label: fields.text({ label: 'Label' }),
+      get children() {
+        return prop;
+      },
+    }),
+    subtitle: props =>
+      `${props.fields.label.value ? props.fields.label.value + ' — ' : ''}${
+        props.fields.children.elements.length
+      } Items`,
+    children: props => props.fields.children,
+  }),
 });
 
-function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
+const DraggableElement = function DraggableElement<Field extends ComponentPropField>(props: {
+  props: PreviewProps<Field>;
+  id: string;
+  label: string;
+  subtitle: (props: PreviewProps<Field>) => string | undefined;
+  children: (props: PreviewProps<Field>) => PreviewProps<ComponentPropField> | undefined;
+  onRemove: (id: string) => void;
+}) {
   const [isEditing, setIsEditing] = useState(false);
   const [isChildrenOpen, setIsChildrenOpen] = useState(true);
-  const label = props.element.options.find(x => x.value === props.element.discriminant)!.label;
+  const childrenProps = props.children(props.props);
   return (
     <SortableItem id={props.id}>
       <Stack gap="medium">
-        <div css={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Stack across gap="xsmall" align="center">
+        <div css={{ display: 'flex', gap: 4 }}>
+          <Stack across gap="xsmall" align="center" css={{ cursor: 'pointer' }}>
             <DragHandle />
-            <button
-              onClick={() => {
-                setIsEditing(true);
-              }}
-              css={{
-                border: '0',
-                background: 'transparent',
-                cursor: 'pointer',
-                ':hover,:focus': {
-                  background: '#f0f0f0',
-                },
-
-                borderRadius: 8,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: 24,
-                width: 28,
-              }}
-            >
-              <EditIcon size="small" color="#596794" />
-            </button>
             <div
               css={{
                 background: '#F6F8FC',
@@ -133,39 +177,119 @@ function DraggableElement(props: PreviewProps<Prop>['elements'][number]) {
                 borderRadius: 4,
               }}
             >
-              {label.slice(0, 2)}
+              {props.label.slice(0, 2)}
             </div>
-
-            <AlertDialog
-              title={`Edit ${label}`}
-              actions={{
-                confirm: {
-                  action: () => {
-                    setIsEditing(false);
-                  },
-                  label: 'Done',
-                },
+          </Stack>
+          <button
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1,
+              cursor: 'pointer',
+              backgroundColor: 'transparent',
+              ':hover': {
+                backgroundColor: '#F6F8FC',
+              },
+              borderRadius: 8,
+            }}
+            onClick={() => {
+              setIsEditing(true);
+            }}
+          >
+            <span css={{ fontSize: 16, fontWeight: 'bold' }}>{props.label}</span>
+            <span css={{ fontSize: 12 }}>{props.subtitle(props.props)}</span>
+          </button>
+          <Stack across gap="xsmall" align="center">
+            {/* <IconButton
+              onClick={() => {
+                setIsEditing(true);
               }}
-              isOpen={isEditing}
             >
-              <FormValueContentFromPreview {...props.element.value} />
-            </AlertDialog>
-            <div>{props.element.value.fields.label.value}</div>
-          </Stack>
-          {props.element.discriminant === 'group' && (
-            <Button
+              {editIcon}
+            </IconButton> */}
+            <IconButton
               onClick={() => {
-                setIsChildrenOpen(!isChildrenOpen);
+                props.onRemove(props.id);
               }}
             >
-              {isChildrenOpen ? 'Close' : 'Open'}
-            </Button>
-          )}
+              {removeIcon}
+            </IconButton>
+            {childrenProps && (
+              <Stack across gap="xsmall" align="center">
+                <div css={{ width: 1, height: 28, backgroundColor: '#E9EBF3' }} />
+                <IconButton
+                  aria-label={`${isChildrenOpen ? 'Close' : 'Open'} ${props.label} children`}
+                  onClick={() => {
+                    setIsChildrenOpen(!isChildrenOpen);
+                  }}
+                  style={isChildrenOpen ? {} : { transform: 'rotate(180deg)' }}
+                >
+                  {downChevron}
+                </IconButton>
+              </Stack>
+            )}
+          </Stack>
         </div>
-        {isChildrenOpen && props.element.discriminant === 'group' && (
-          <Preview {...props.element.value.fields.children} />
+        {isChildrenOpen && childrenProps !== undefined && (
+          <FormValueContentFromPreview {...childrenProps} />
         )}
+        <AlertDialog
+          title={`Edit ${props.label}`}
+          actions={{
+            confirm: {
+              action: () => {
+                setIsEditing(false);
+              },
+              label: 'Done',
+            },
+          }}
+          isOpen={isEditing}
+        >
+          <FormValueContentFromPreview {...props.props} />
+        </AlertDialog>
       </Stack>
     </SortableItem>
   );
+};
+
+function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      css={{
+        border: '0',
+        background: 'transparent',
+        cursor: 'pointer',
+        ':hover,:focus': {
+          background: '#F6F8FC',
+        },
+        borderRadius: 8,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 28,
+        width: 28,
+      }}
+      {...props}
+    />
+  );
 }
+
+const removeIcon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.75 1.125H11.25V2.25H6.75V1.125ZM2.25 3.375V4.5H3.375V15.75C3.375 16.0484 3.49353 16.3345 3.7045 16.5455C3.91548 16.7565 4.20163 16.875 4.5 16.875H13.5C13.7984 16.875 14.0845 16.7565 14.2955 16.5455C14.5065 16.3345 14.625 16.0484 14.625 15.75V4.5H15.75V3.375H2.25ZM4.5 15.75V4.5H13.5V15.75H4.5ZM6.75 6.75H7.875V13.5H6.75V6.75ZM10.125 6.75H11.25V13.5H10.125V6.75Z"
+      fill="#596794"
+    />
+  </svg>
+);
+
+const downChevron = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10 13.75L3.75 7.5L4.625 6.625L10 12L15.375 6.625L16.25 7.5L10 13.75Z"
+      fill="#596794"
+    />
+  </svg>
+);
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index 5a0885572c8..f071a80a2ab 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -441,9 +441,8 @@ type PostBlahLeaf implements PostBlah {
 }
 
 type PostBlahLeafValue {
-  url: String
   label: String
-  author: User
+  url: String
 }
 
 type PostBlahGroup implements PostBlah {
@@ -500,9 +499,8 @@ input PostBlahUpdateInput {
 }
 
 input PostBlahLeafUpdateInput {
-  url: String
   label: String
-  author: UserRelateToOneForUpdateInput
+  url: String
 }
 
 input PostBlahGroupUpdateInput {
@@ -530,9 +528,8 @@ input PostBlahCreateInput {
 }
 
 input PostBlahLeafCreateInput {
-  url: String
   label: String
-  author: UserRelateToOneForCreateInput
+  url: String
 }
 
 input PostBlahGroupCreateInput {

From 8024f92900f3b63aeb5f1f88ff99f9cf7914a362 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 4 Apr 2022 13:08:11 +1000
Subject: [PATCH 035/124] Remove some things

---
 .../packages/core/src/components/Box.tsx      |   5 +-
 .../packages/core/src/components/Stack.tsx    |  77 +++--
 .../packages/popover/src/Popover.tsx          |   6 +-
 design-system/website/next-env.d.ts           |   5 +-
 design-system/website/package.json            |   4 +-
 design-system/website/tsconfig.json           |  19 +-
 .../basic/admin/fieldViews/Blah.tsx           | 302 ++----------------
 .../component-blocks/preview-props.tsx        |  64 ----
 .../DocumentEditor/primitives/add-button.tsx  |  84 -----
 .../src/DocumentEditor/primitives/index.tsx   |   1 -
 packages/fields-document/src/primitives.ts    |   1 -
 11 files changed, 68 insertions(+), 500 deletions(-)
 delete mode 100644 packages/fields-document/src/DocumentEditor/primitives/add-button.tsx

diff --git a/design-system/packages/core/src/components/Box.tsx b/design-system/packages/core/src/components/Box.tsx
index baa55ebd9e6..5ef4d7e44a0 100644
--- a/design-system/packages/core/src/components/Box.tsx
+++ b/design-system/packages/core/src/components/Box.tsx
@@ -241,10 +241,7 @@ function useMargin(
 // Box Component
 // -------------
 
-export const Box = forwardRefWithAs<'div', BoxProps>(function Box(
-  { as: Tag = 'div', ...props },
-  ref
-) {
+export const Box = forwardRefWithAs<'div', BoxProps>(({ as: Tag = 'div', ...props }, ref) => {
   const {
     background,
     foreground,
diff --git a/design-system/packages/core/src/components/Stack.tsx b/design-system/packages/core/src/components/Stack.tsx
index 1928596cd36..ae06186d42a 100644
--- a/design-system/packages/core/src/components/Stack.tsx
+++ b/design-system/packages/core/src/components/Stack.tsx
@@ -45,46 +45,45 @@ export type StackProps = {
   gap?: keyof Theme['spacing'];
 } & BoxProps;
 
-export const Stack = forwardRefWithAs<'div', StackProps>(function Stack(
-  { across, align = 'stretch', children, dividers = 'none', gap = 'none', ...props },
-  ref
-) {
-  const { spacing } = useTheme();
-  const { mq } = useMediaQuery();
+export const Stack = forwardRefWithAs<'div', StackProps>(
+  ({ across, align = 'stretch', children, dividers = 'none', gap = 'none', ...props }, ref) => {
+    const { spacing } = useTheme();
+    const { mq } = useMediaQuery();
 
-  const orientation = across ? 'horizontal' : 'vertical';
-  const { dimension, flexDirection, marginProperty } = orientationMap[orientation];
-  const ChildWrapper = getChildTag(props.as);
+    const orientation = across ? 'horizontal' : 'vertical';
+    const { dimension, flexDirection, marginProperty } = orientationMap[orientation];
+    const ChildWrapper = getChildTag(props.as);
 
-  return (
-    <Box
-      ref={ref}
-      css={mq({
-        alignItems: alignment[align],
-        display: 'flex',
-        flexDirection,
-        [dimension]: 'fit-content',
+    return (
+      <Box
+        ref={ref}
+        css={mq({
+          alignItems: alignment[align],
+          display: 'flex',
+          flexDirection,
+          [dimension]: 'fit-content',
 
-        '& > * + *': {
-          [marginProperty]: mapResponsiveProp(gap, spacing),
-        },
-      })}
-      {...props}
-    >
-      {['around', 'start'].includes(dividers) && <Divider orientation={orientation} />}
-      {Children.toArray(children)
-        .filter(child => isValidElement(child))
-        .map((child, index) => {
-          return (
-            <Fragment key={index}>
-              {dividers !== 'none' && index ? <Divider orientation={orientation} /> : null}
-
-              {/* wrap the child to avoid unwanted or unexpected "stretch" on things like buttons */}
-              <ChildWrapper css={{ ':empty': { display: 'none' } }}>{child}</ChildWrapper>
-            </Fragment>
-          );
+          '& > * + *': {
+            [marginProperty]: mapResponsiveProp(gap, spacing),
+          },
         })}
-      {['around', 'end'].includes(dividers) && <Divider orientation={orientation} />}
-    </Box>
-  );
-});
+        {...props}
+      >
+        {['around', 'start'].includes(dividers) && <Divider orientation={orientation} />}
+        {Children.toArray(children)
+          .filter(child => isValidElement(child))
+          .map((child, index) => {
+            return (
+              <Fragment key={index}>
+                {dividers !== 'none' && index ? <Divider orientation={orientation} /> : null}
+
+                {/* wrap the child to avoid unwanted or unexpected "stretch" on things like buttons */}
+                <ChildWrapper css={{ ':empty': { display: 'none' } }}>{child}</ChildWrapper>
+              </Fragment>
+            );
+          })}
+        {['around', 'end'].includes(dividers) && <Divider orientation={orientation} />}
+      </Box>
+    );
+  }
+);
diff --git a/design-system/packages/popover/src/Popover.tsx b/design-system/packages/popover/src/Popover.tsx
index 6dff3d0e0c9..782d8590ca6 100644
--- a/design-system/packages/popover/src/Popover.tsx
+++ b/design-system/packages/popover/src/Popover.tsx
@@ -186,7 +186,7 @@ type DialogProps = {
   children: ReactNode;
   /** When true, the popover will be visible. */
   isVisible: boolean;
-  arrow?: {
+  arrow: {
     ref: (element: HTMLDivElement) => void;
     props: {
       style: CSSProperties;
@@ -236,9 +236,7 @@ export const PopoverDialog = forwardRef<HTMLDivElement, DialogProps>(
           }}
           {...props}
         >
-          {arrow && (
-            <div data-popper-arrow ref={arrow.ref} className="tooltipArrow" {...arrow.props} />
-          )}
+          <div data-popper-arrow ref={arrow.ref} className="tooltipArrow" {...arrow.props} />
           <div ref={focusTrapRef}>{isVisible ? children : null}</div>
         </div>
       </Portal>
diff --git a/design-system/website/next-env.d.ts b/design-system/website/next-env.d.ts
index 4f11a03dc6c..7b7aa2c7727 100644
--- a/design-system/website/next-env.d.ts
+++ b/design-system/website/next-env.d.ts
@@ -1,5 +1,2 @@
 /// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+/// <reference types="next/types/global" />
diff --git a/design-system/website/package.json b/design-system/website/package.json
index f8acba1c481..b137de54a74 100644
--- a/design-system/website/package.json
+++ b/design-system/website/package.json
@@ -20,7 +20,7 @@
     "@keystone-ui/segmented-control": "^6.0.0",
     "@keystone-ui/toast": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
-    "@preconstruct/next": "^4.0.0",
+    "@preconstruct/next": "^3.0.1",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/tinycolor2": "^1.4.3",
@@ -36,4 +36,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/website"
-}
\ No newline at end of file
+}
diff --git a/design-system/website/tsconfig.json b/design-system/website/tsconfig.json
index 568e45d144e..c5d53d8983d 100644
--- a/design-system/website/tsconfig.json
+++ b/design-system/website/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -16,15 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
+    "jsx": "preserve"
   },
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index 0f85e209bda..e1404476823 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -4,292 +4,30 @@
 import {
   fields,
   ArrayField,
-  ConditionalField,
   ComponentPropField,
-  FormField,
 } from '@keystone-6/fields-document/component-blocks';
-import { PreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/api';
-import { FormValueContentFromPreview } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
-import { jsx, Stack } from '@keystone-ui/core';
-import { AlertDialog } from '@keystone-ui/modals';
-import { ButtonHTMLAttributes, useCallback, useEffect, useState, useRef } from 'react';
-import {
-  AddButton,
-  SortableList,
-  SortableItem,
-  DragHandle,
-} from '@keystone-6/fields-document/primitives';
-
-type ComponentsFields<Components extends Record<string, ComponentPropField>> = ArrayField<
-  ConditionalField<
-    FormField<keyof Components & string, readonly { value: keyof Components; label: string }[]>,
-    Components
-  >
->;
-
-const returnUndefined = () => undefined;
 
-function components<
-  Components extends {
-    [Key in keyof Components]: {
-      label: string;
-      field: ComponentPropField;
-      subtitle?: (props: PreviewProps<Components[Key]['field']>) => string | undefined;
-      children?: (
-        props: PreviewProps<Components[Key]['field']>
-      ) => PreviewProps<ComponentPropField> | undefined;
-    };
-  }
->(
-  components: Components
-): ComponentsFields<{
-  [Key in keyof Components]: Components[Key]['field'];
-}> {
-  const comps = components as unknown as Record<
-    string,
+export const prop: ArrayField<ComponentPropField> = fields.array(
+  fields.conditional(
+    fields.select({
+      defaultValue: 'leaf',
+      label: 'Type',
+      options: [
+        { label: 'Leaf', value: 'leaf' },
+        { label: 'Group', value: 'group' },
+      ],
+    }),
     {
-      label: string;
-      field: ComponentPropField;
-      subtitle?: (props: PreviewProps<ComponentPropField>) => string | undefined;
-      children?: (
-        props: PreviewProps<ComponentPropField>
-      ) => PreviewProps<ComponentPropField> | undefined;
-    }
-  >;
-  const labels = new Map(Object.entries(comps).map(([key, { label }]) => [key, label]));
-  const field = fields.array(
-    fields.conditional(
-      fields.select({
-        label: 'Type',
-        options: Object.entries(comps).map(([value, { label }]) => ({
-          value: value,
-          label,
-        })),
-        defaultValue: Object.keys(comps)[0],
+      leaf: fields.object({
+        label: fields.text({ label: 'Label' }),
+        url: fields.url({ label: 'URL' }),
       }),
-      Object.fromEntries(Object.entries(comps).map(([value, { field }]) => [value, field]))
-    ),
-    {
-      preview: function Preview(props) {
-        const elementsRef = useRef(props.elements);
-        useEffect(() => {
-          elementsRef.current = props.elements;
-        });
-        const propsOnRemove = props.onRemove;
-        const onRemove = useCallback(
-          (id: string) => {
-            const idx = elementsRef.current.findIndex(e => e.id === id);
-            propsOnRemove(idx);
-          },
-          [propsOnRemove]
-        );
-        return (
-          <Stack gap="medium">
-            {!!props.elements.length && (
-              <SortableList {...props}>
-                {props.elements.map(x => {
-                  return (
-                    <DraggableElement
-                      key={x.id}
-                      id={x.id}
-                      props={x.element.value}
-                      label={labels.get(x.element.discriminant)!}
-                      children={comps[x.element.discriminant].children ?? returnUndefined}
-                      subtitle={comps[x.element.discriminant].subtitle ?? returnUndefined}
-                      onRemove={onRemove}
-                    />
-                  );
-                })}
-              </SortableList>
-            )}
-            <AddButton
-              options={props.field.element.discriminant.options}
-              onInsert={props.onInsert}
-            />
-          </Stack>
-        );
-      },
-    }
-  );
-  return field as any;
-}
-
-function componentThing<Field extends ComponentPropField>(component: {
-  label: string;
-  field: Field;
-  subtitle?: (props: PreviewProps<Field>) => string | undefined;
-  children?: (props: PreviewProps<Field>) => PreviewProps<ComponentPropField> | undefined;
-}) {
-  return component;
-}
-
-export const prop: ArrayField<ComponentPropField> = components({
-  leaf: componentThing({
-    label: 'Leaf',
-    field: fields.object({
-      label: fields.text({ label: 'Label' }),
-      url: fields.url({ label: 'URL' }),
-    }),
-    subtitle: props => props.fields.label.value,
-  }),
-  group: componentThing({
-    label: 'Group',
-    field: fields.object({
-      label: fields.text({ label: 'Label' }),
-      get children() {
-        return prop;
-      },
-    }),
-    subtitle: props =>
-      `${props.fields.label.value ? props.fields.label.value + ' — ' : ''}${
-        props.fields.children.elements.length
-      } Items`,
-    children: props => props.fields.children,
-  }),
-});
-
-const DraggableElement = function DraggableElement<Field extends ComponentPropField>(props: {
-  props: PreviewProps<Field>;
-  id: string;
-  label: string;
-  subtitle: (props: PreviewProps<Field>) => string | undefined;
-  children: (props: PreviewProps<Field>) => PreviewProps<ComponentPropField> | undefined;
-  onRemove: (id: string) => void;
-}) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [isChildrenOpen, setIsChildrenOpen] = useState(true);
-  const childrenProps = props.children(props.props);
-  return (
-    <SortableItem id={props.id}>
-      <Stack gap="medium">
-        <div css={{ display: 'flex', gap: 4 }}>
-          <Stack across gap="xsmall" align="center" css={{ cursor: 'pointer' }}>
-            <DragHandle />
-            <div
-              css={{
-                background: '#F6F8FC',
-                border: '1px solid #E9EBF3',
-                height: 32,
-                width: 32,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderRadius: 4,
-              }}
-            >
-              {props.label.slice(0, 2)}
-            </div>
-          </Stack>
-          <button
-            css={{
-              display: 'flex',
-              flexDirection: 'column',
-              flex: 1,
-              cursor: 'pointer',
-              backgroundColor: 'transparent',
-              ':hover': {
-                backgroundColor: '#F6F8FC',
-              },
-              borderRadius: 8,
-            }}
-            onClick={() => {
-              setIsEditing(true);
-            }}
-          >
-            <span css={{ fontSize: 16, fontWeight: 'bold' }}>{props.label}</span>
-            <span css={{ fontSize: 12 }}>{props.subtitle(props.props)}</span>
-          </button>
-          <Stack across gap="xsmall" align="center">
-            {/* <IconButton
-              onClick={() => {
-                setIsEditing(true);
-              }}
-            >
-              {editIcon}
-            </IconButton> */}
-            <IconButton
-              onClick={() => {
-                props.onRemove(props.id);
-              }}
-            >
-              {removeIcon}
-            </IconButton>
-            {childrenProps && (
-              <Stack across gap="xsmall" align="center">
-                <div css={{ width: 1, height: 28, backgroundColor: '#E9EBF3' }} />
-                <IconButton
-                  aria-label={`${isChildrenOpen ? 'Close' : 'Open'} ${props.label} children`}
-                  onClick={() => {
-                    setIsChildrenOpen(!isChildrenOpen);
-                  }}
-                  style={isChildrenOpen ? {} : { transform: 'rotate(180deg)' }}
-                >
-                  {downChevron}
-                </IconButton>
-              </Stack>
-            )}
-          </Stack>
-        </div>
-        {isChildrenOpen && childrenProps !== undefined && (
-          <FormValueContentFromPreview {...childrenProps} />
-        )}
-        <AlertDialog
-          title={`Edit ${props.label}`}
-          actions={{
-            confirm: {
-              action: () => {
-                setIsEditing(false);
-              },
-              label: 'Done',
-            },
-          }}
-          isOpen={isEditing}
-        >
-          <FormValueContentFromPreview {...props.props} />
-        </AlertDialog>
-      </Stack>
-    </SortableItem>
-  );
-};
-
-function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
-  return (
-    <button
-      css={{
-        border: '0',
-        background: 'transparent',
-        cursor: 'pointer',
-        ':hover,:focus': {
-          background: '#F6F8FC',
+      group: fields.object({
+        label: fields.text({ label: 'Label' }),
+        get children() {
+          return prop;
         },
-        borderRadius: 8,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 28,
-        width: 28,
-      }}
-      {...props}
-    />
-  );
-}
-
-const removeIcon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.75 1.125H11.25V2.25H6.75V1.125ZM2.25 3.375V4.5H3.375V15.75C3.375 16.0484 3.49353 16.3345 3.7045 16.5455C3.91548 16.7565 4.20163 16.875 4.5 16.875H13.5C13.7984 16.875 14.0845 16.7565 14.2955 16.5455C14.5065 16.3345 14.625 16.0484 14.625 15.75V4.5H15.75V3.375H2.25ZM4.5 15.75V4.5H13.5V15.75H4.5ZM6.75 6.75H7.875V13.5H6.75V6.75ZM10.125 6.75H11.25V13.5H10.125V6.75Z"
-      fill="#596794"
-    />
-  </svg>
-);
-
-const downChevron = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M10 13.75L3.75 7.5L4.625 6.625L10 12L15.375 6.625L16.25 7.5L10 13.75Z"
-      fill="#596794"
-    />
-  </svg>
+      }),
+    }
+  )
 );
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 9521bcba4fb..1cc868cbbc4 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -405,67 +405,3 @@ type MemoState<Field extends ComponentPropField> = {
   cached: ReturnType<typeof memoizedInfoForProp[Field['kind']]>;
   inner: Map<string, MemoState<ComponentPropField>>;
 };
-
-// export function onAddArrayItem(
-//   editor: Editor,
-//   path: ReadonlyPropPath,
-//   element: Element & { type: 'component-block' },
-//   elementToGetPath: Element & { type: 'component-block' },
-//   componentBlock: ComponentBlock
-// ) {
-//   Editor.withoutNormalizing(editor, () => {
-//     const arrayField = getFieldAtPropPath(path, element.props, componentBlock.props);
-//     assert(arrayField?.kind === 'array');
-//     const elementVal = getInitialPropsValue(arrayField.element);
-//     let nextIdx = 0;
-//     const newProps = transformProps(
-//       { kind: 'object', value: componentBlock.props },
-//       element.props,
-//       (prop, value, currentPath) => {
-//         if (prop.kind === 'array' && areArraysEqual(path, currentPath)) {
-//           nextIdx = (value as unknown[]).length;
-//           const newVal = [...(value as unknown[]), elementVal];
-//           setElementIdsForArrayValue(newVal, [
-//             ...getElementIdsForArrayValue(value as unknown[]),
-//             getNewArrayElementId(),
-//           ]);
-//           return newVal;
-//         }
-//         return value;
-//       }
-//     );
-//     const componentBlockPath = ReactEditor.findPath(editor, elementToGetPath);
-
-//     Transforms.setNodes(
-//       editor,
-//       { props: newProps as Record<string, unknown> },
-//       { at: componentBlockPath }
-//     );
-
-//     const propPathsToInsert = findChildPropPathsForProp(
-//       elementVal,
-//       arrayField.element,
-//       path.concat(nextIdx)
-//     );
-//     if (propPathsToInsert.length) {
-//       const hasEmptyThing =
-//         element.children.length === 1 &&
-//         element.children[0].type === 'component-inline-prop' &&
-//         element.children[0].propPath === undefined;
-//       if (hasEmptyThing) {
-//         Transforms.removeNodes(editor, { at: [...componentBlockPath, 0] });
-//       }
-//       for (const [idx, childFieldInfo] of propPathsToInsert.entries()) {
-//         Transforms.insertNodes(
-//           editor,
-//           {
-//             type: `component-${childFieldInfo.options.kind}-prop`,
-//             propPath: childFieldInfo.path,
-//             children: [{ text: '' }],
-//           },
-//           { at: [...componentBlockPath, (hasEmptyThing ? 0 : element.children.length) + idx] }
-//         );
-//       }
-//     }
-//   });
-// }
diff --git a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx b/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
deleted file mode 100644
index ebf3febdd28..00000000000
--- a/packages/fields-document/src/DocumentEditor/primitives/add-button.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { Button } from '@keystone-ui/button';
-import { Box, jsx, Stack } from '@keystone-ui/core';
-import { PlusCircleIcon } from '@keystone-ui/icons/icons/PlusCircleIcon';
-import { PopoverDialog, usePopover } from '@keystone-ui/popover';
-import { useSelect } from 'downshift';
-
-export function AddButton<Value extends string>(props: {
-  options: readonly { label: string; value: Value }[];
-  onInsert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
-}) {
-  const { dialog, trigger, isOpen, setOpen } = usePopover({
-    modifiers: [{ name: 'offset', options: { offset: [0, 4] } }],
-  });
-
-  const { getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex } = useSelect<{
-    label: string;
-    value: Value;
-  }>({
-    items: props.options as typeof props.options[number][],
-    itemToString: x => x?.label ?? '',
-    selectedItem: null,
-    onSelectedItemChange: ({ selectedItem }) => {
-      if (selectedItem) {
-        props.onInsert({ discriminant: selectedItem.value } as any);
-      }
-    },
-    onIsOpenChange: ({ isOpen }) => {
-      setOpen(!!isOpen);
-    },
-    isOpen,
-  });
-  return (
-    <div>
-      <Button
-        {...getToggleButtonProps({
-          ref: trigger.ref,
-          ...trigger.props,
-        })}
-        tone="active"
-        weight="bold"
-      >
-        <span css={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
-          <PlusCircleIcon size="smallish" /> <span>Add</span>
-        </span>
-      </Button>
-      <PopoverDialog isVisible={isOpen}>
-        <button />
-        <Stack
-          {...getMenuProps({ ref: dialog.ref, ...dialog.props })}
-          gap="xsmall"
-          paddingY="small"
-          paddingX="small"
-          background="white"
-          css={{
-            minWidth: 120,
-            boxShadow: '0px 8px 11px -2px rgba(9, 30, 66, 0.12), 0px 0px 1px rgba(9, 30, 66, 0.31)',
-            borderRadius: 8,
-            listStyle: 'none',
-          }}
-        >
-          {props.options.map((option, i) => {
-            return (
-              <Box
-                key={option.value}
-                {...getItemProps({ item: option, index: i, role: 'menuitem' })}
-                css={{
-                  cursor: 'pointer',
-                  backgroundColor: highlightedIndex === i ? '#F6F8FC' : '',
-                  borderRadius: 4,
-                }}
-                paddingX="medium"
-                paddingY="small"
-              >
-                {option.label}
-              </Box>
-            );
-          })}
-        </Stack>
-      </PopoverDialog>
-    </div>
-  );
-}
diff --git a/packages/fields-document/src/DocumentEditor/primitives/index.tsx b/packages/fields-document/src/DocumentEditor/primitives/index.tsx
index ebc08e81f29..2f37baea9af 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/index.tsx
@@ -1,4 +1,3 @@
 export * from './inline-dialog';
 export * from './toolbar';
-export { AddButton } from './add-button';
 export * from './sortable';
diff --git a/packages/fields-document/src/primitives.ts b/packages/fields-document/src/primitives.ts
index 280e8ef97da..d4c891c34e2 100644
--- a/packages/fields-document/src/primitives.ts
+++ b/packages/fields-document/src/primitives.ts
@@ -4,7 +4,6 @@ export {
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarSpacer,
-  AddButton,
   DragHandle,
   SortableItem,
   SortableList,

From a85d1a413dba94d3c86c318c130576f19d2a8fbe Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 4 Apr 2022 13:11:44 +1000
Subject: [PATCH 036/124] manypkg fix

---
 design-system/website/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/design-system/website/package.json b/design-system/website/package.json
index b137de54a74..6ec633fc6d8 100644
--- a/design-system/website/package.json
+++ b/design-system/website/package.json
@@ -20,7 +20,7 @@
     "@keystone-ui/segmented-control": "^6.0.0",
     "@keystone-ui/toast": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/tinycolor2": "^1.4.3",

From a206f35805e0ab3e56fec4c04c802f8d8ab1238f Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 4 Apr 2022 13:25:28 +1000
Subject: [PATCH 037/124] Remove onInsert, onMove and onRemove from array field
 preview props

---
 .../basic/admin/fieldViews/Content.tsx        | 15 +++++--
 .../DocumentEditor/component-blocks/api.tsx   |  6 ---
 .../component-blocks/array-field.test.tsx     | 12 ++++-
 ...ld-field-in-recursive-array-field.test.tsx |  9 +++-
 .../component-blocks/form-from-preview.tsx    |  2 +-
 .../nested-array-field.test.tsx               |  6 ++-
 .../component-blocks/preview-props.test.ts    |  6 +--
 .../component-blocks/preview-props.tsx        | 44 ++-----------------
 .../DocumentEditor/primitives/sortable.tsx    | 25 ++++++++---
 9 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 1e882e35603..2a502458c9a 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -126,7 +126,10 @@ export const componentBlocks = {
           <NotEditable>
             <div
               onClick={() => {
-                props.fields.rows.onInsert();
+                props.fields.rows.onChange([
+                  ...props.fields.rows.elements.map(x => ({ id: x.id })),
+                  { id: undefined },
+                ]);
               }}
             >
               <Button>Insert row</Button>
@@ -154,7 +157,10 @@ export const componentBlocks = {
     component: function MyList(props) {
       useEffect(() => {
         if (!props.fields.children.elements.length) {
-          props.fields.children.onInsert();
+          props.fields.children.onChange([
+            ...props.fields.children.elements.map(x => ({ id: x.id })),
+            { id: undefined },
+          ]);
         }
       });
       return (
@@ -195,7 +201,10 @@ export const componentBlocks = {
     component: function MyList(props) {
       useEffect(() => {
         if (!props.fields.children.elements.length) {
-          props.fields.children.onInsert();
+          props.fields.children.onChange([
+            ...props.fields.children.elements.map(x => ({ id: x.id })),
+            { id: undefined },
+          ]);
         }
       });
       return (
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index fe918366ee5..230559b0191 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -631,12 +631,6 @@ export type ExtractPropFromComponentPropField<
           value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>;
         }[]
       ) => void;
-      readonly onMove: (from: number, to: number) => void;
-      readonly onInsert: (
-        initial?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>,
-        index?: number
-      ) => void;
-      readonly onRemove: (index: number) => void;
       readonly field: Prop;
     }
   : never;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index cd57ca2ac45..3369551936b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -14,7 +14,17 @@ const list = component({
       props.fields.children.elements.map(x => {
         return React.createElement('li', { key: x.id }, x.element.fields.content);
       }),
-      React.createElement('button', { onClick: () => props.fields.children.onInsert() }, 'Insert')
+      React.createElement(
+        'button',
+        {
+          onClick: () =>
+            props.fields.children.onChange([
+              ...props.fields.children.elements.map(x => ({ id: x.id })),
+              { id: undefined },
+            ]),
+        },
+        'Insert'
+      )
     ),
   label: '',
   props: {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index c871de6411f..a13b0e95669 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -34,7 +34,14 @@ function List(props: PreviewProps<ListItems>): ReactElement {
         React.createElement(List, x.element.fields.children)
       );
     }),
-    React.createElement('button', { onClick: () => props.onInsert() }, 'Insert')
+    React.createElement(
+      'button',
+      {
+        onClick: () =>
+          props.onChange([...props.elements.map(x => ({ id: x.id })), { id: undefined }]),
+      },
+      'Insert'
+    )
   );
 }
 
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 b57a13741fa..84542f31ddb 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
@@ -39,7 +39,7 @@ const fieldRenderers: {
         <Button
           autoFocus={props.autoFocus}
           onClick={() => {
-            props.onInsert();
+            props.onChange([...props.elements.map(x => ({ id: x.id })), { id: undefined }]);
           }}
         >
           Add
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index cf6b3bf2b25..ad14bc1c146 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -280,7 +280,11 @@ test('add to multiple in child field in nested array', () => {
   const previewProps = createGetPreviewProps({ kind: 'object', value: table.props }, () => {})(
     (editor.children[0] as any).props
   );
-  previewProps.fields.children.elements[0].element.onInsert();
+
+  previewProps.fields.children.elements[0].element.onChange([
+    ...previewProps.fields.children.elements[0].element.elements.map(x => ({ id: x.id })),
+    { id: undefined },
+  ]);
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
index 43d8c26df0e..dcd9c306e68 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
@@ -74,12 +74,12 @@ test('the props of two array fields in a conditional field change when the discr
   });
   let props = getPreviewProps(val);
   assert(props.discriminant === false);
-  let prevOnInsert = props.value.onInsert;
+  let prevArrayOnChange = props.value.onChange;
   props.onChange(true);
   props = getPreviewProps(val);
   assert(props.discriminant === true);
-  expect(prevOnInsert).not.toBe(props.value.onInsert);
-  props.value.onInsert([{ id: undefined, value: 'blah' }]);
+  expect(prevArrayOnChange).not.toBe(props.value.onChange);
+  props.value.onChange([{ id: undefined, value: [{ id: undefined, value: 'blah' }] }]);
   expect(props.value.elements).toHaveLength(1);
   expect(props.value.elements[0].element.elements).toHaveLength(1);
   expect(props.value.elements[0].element.elements[0].element.value).toEqual('blah');
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 1cc868cbbc4..85c9214bf12 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement, useContext } from 'react';
-import { arrayMove } from '@dnd-kit/sortable';
 import {
   ArrayField,
   ComponentPropField,
@@ -12,7 +11,7 @@ import {
   PreviewProps,
   RelationshipField,
 } from './api';
-import { updateValue, getInitialPropsValueFromInitializer } from './initial-values';
+import { updateValue } from './initial-values';
 
 const arrayValuesToElementIds = new WeakMap<readonly unknown[], string[]>();
 
@@ -73,43 +72,8 @@ const memoizedInfoForProp = castToMemoizedInfoForProp({
           inner: { id: string; element: unknown };
         }
       >(),
-      props: {
-        onInsert(initial?: unknown, index?: number) {
-          onChange(value => {
-            const newValue = [...(value as unknown[])];
-
-            newValue.splice(
-              index ?? newValue.length,
-              0,
-              getInitialPropsValueFromInitializer(prop.element, initial)
-            );
-            const keys = getElementIdsForArrayValue(value as readonly unknown[]);
-            setElementIdsForArrayValue(newValue, [...keys, getNewArrayElementId()]);
-            return newValue;
-          });
-        },
-        onMove(from: number, to: number) {
-          onChange(value => {
-            const newValue = arrayMove(value as unknown[], from, to);
-            const keys = getElementIdsForArrayValue(value as readonly unknown[]);
-            setElementIdsForArrayValue(newValue, arrayMove(keys, from, to));
-            return newValue;
-          });
-        },
-        onChange(updater: readonly { id?: string; value?: unknown }[]) {
-          onChange(value => updateValue(prop, value, updater));
-        },
-        onRemove(index: number) {
-          onChange(value => {
-            const newValue = (value as unknown[]).filter((_, i) => i !== index);
-            const keys = getElementIdsForArrayValue(value as readonly unknown[]);
-            setElementIdsForArrayValue(
-              newValue,
-              keys.filter((_, i) => i !== index)
-            );
-            return newValue;
-          });
-        },
+      onChange(updater: readonly { id?: string; value?: unknown }[]) {
+        onChange(value => updateValue(prop, value, updater));
       },
     };
   },
@@ -249,7 +213,7 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
           return element.inner as { id: string; element: typeof currentInnerProp };
         }),
         field: prop,
-        ...memoized.props,
+        onChange: memoized.onChange,
       };
       for (const key of unusedKeys) {
         memoized.inner.delete(key);
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index 019ee810921..f29110fb861 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { Box, jsx } from '@keystone-ui/core';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   useSensors,
   useSensor,
@@ -12,6 +12,7 @@ import {
   closestCenter,
 } from '@dnd-kit/core';
 import {
+  arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
@@ -25,9 +26,8 @@ import { ToolbarButton } from '.';
 const RemoveContext = createContext<null | ((index: number) => void)>(null);
 
 export function SortableList(props: {
-  onMove: (index: number, newIndex: number) => void;
-  onRemove: (index: number) => void;
-  elements: readonly ({ id: string } | string)[];
+  onChange: (elements: readonly { id: string }[]) => void;
+  elements: readonly { id: string }[];
   children: ReactNode;
 }) {
   const sensors = useSensors(
@@ -37,8 +37,20 @@ export function SortableList(props: {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
+  const elementsRef = useRef(props.elements);
+
+  useEffect(() => {
+    elementsRef.current = props.elements;
+  });
+  const { onChange } = props;
+  const onRemove = useCallback(
+    (index: number) => {
+      onChange(elementsRef.current.filter((_, i) => i !== index).map(x => ({ id: x.id })));
+    },
+    [onChange]
+  );
   return (
-    <RemoveContext.Provider value={props.onRemove}>
+    <RemoveContext.Provider value={onRemove}>
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
@@ -51,7 +63,8 @@ export function SortableList(props: {
             const overIndex = props.elements.findIndex(
               x => (typeof x === 'string' ? x : x.id) === over.id
             );
-            props.onMove(activeIndex, overIndex);
+            const newValue = arrayMove(props.elements as { id: string }[], activeIndex, overIndex);
+            props.onChange(newValue);
           }
         }}
       >

From 550074ca3422744ace5d779c1d7af52f3bdeef5c Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 4 Apr 2022 13:30:34 +1000
Subject: [PATCH 038/124] Remove more things

---
 packages/fields-document/package.json         |  1 -
 .../DocumentEditor/component-blocks/utils.ts  | 11 +++++-----
 .../with-component-blocks.tsx                 |  4 ++--
 .../DocumentEditor/tests/jsx/namespace.d.ts   |  3 +--
 .../src/structure-validation.ts               |  4 ++--
 packages/fields-document/src/validation.ts    |  8 ++++----
 yarn.lock                                     | 20 +------------------
 7 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index c7902b5c356..add7d14cdbb 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -41,7 +41,6 @@
     "@types/react": "^17.0.37",
     "apollo-server-errors": "^3.3.0",
     "apply-ref": "^1.0.0",
-    "downshift": "^6.1.7",
     "fp-ts": "^2.11.5",
     "graphql": "^15.8.0",
     "io-ts": "^2.2.16",
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 9a54b699228..b34e03ec473 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -150,15 +150,15 @@ export function getDocumentFeaturesForChildField(
 }
 
 function getFieldAtPropPathInner(
-  path: PropPath,
+  path: (string | number)[],
   value: unknown,
   prop: ComponentPropField
 ): undefined | ComponentPropField {
+  // because we're checking the length here
+  // the non-null asserts on shift below are fine
   if (path.length === 0) {
     return prop;
   }
-  // because we're checking the length here
-  // the non-null asserts on shift are fine
   if (prop.kind === 'child' || prop.kind === 'form' || prop.kind === 'relationship') {
     return;
   }
@@ -264,7 +264,6 @@ export function getAncestorFields(
   return ancestors;
 }
 
-export type PropPath = (string | number)[];
 export type ReadonlyPropPath = readonly (string | number)[];
 
 export function getValueAtPropPath(value: unknown, inputPath: ReadonlyPropPath) {
@@ -279,8 +278,8 @@ export function getValueAtPropPath(value: unknown, inputPath: ReadonlyPropPath)
 export function transformProps(
   prop: ComponentPropField,
   value: unknown,
-  transformer: (prop: ComponentPropField, value: unknown, path: PropPath) => unknown,
-  path: PropPath = []
+  transformer: (prop: ComponentPropField, value: unknown, path: ReadonlyPropPath) => unknown,
+  path: ReadonlyPropPath = []
 ): unknown {
   if (prop.kind === 'form' || prop.kind === 'relationship' || prop.kind === 'child') {
     return transformer(prop, value, path);
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 43ec586074c..cc1d76119f0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -18,7 +18,7 @@ import {
   getAncestorFields,
   getDocumentFeaturesForChildField,
   getValueAtPropPath,
-  PropPath,
+  ReadonlyPropPath,
   transformProps,
 } from './utils';
 import { getInitialPropsValue } from './initial-values';
@@ -166,7 +166,7 @@ function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField):
 }
 
 function findArrayFieldsWithSingleChildField(prop: ComponentPropField, value: unknown) {
-  const propPaths: [PropPath, ArrayField<ComponentPropField>][] = [];
+  const propPaths: [ReadonlyPropPath, ArrayField<ComponentPropField>][] = [];
   transformProps(prop, value, (prop, value, path) => {
     if (prop.kind === 'array') {
       if (doesPropOnlyEverContainASingleChildField(prop.element)) {
diff --git a/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts b/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
index 9fba5990115..6304db4120c 100644
--- a/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
+++ b/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
@@ -1,5 +1,4 @@
 import { Node } from 'slate';
-import { PropPath } from '../../component-blocks/utils';
 import { Mark } from '../../utils';
 
 export const __jsx: any;
@@ -8,7 +7,7 @@ type Children = Node | string | (Node | string)[];
 
 type OnlyChildren = { children: Children };
 
-type ComponentProp = { children: Children; propPath?: PropPath };
+type ComponentProp = { children: Children; propPath?: ReadonlyPropPath };
 declare namespace __jsx {
   namespace JSX {
     interface IntrinsicElements {
diff --git a/packages/fields-document/src/structure-validation.ts b/packages/fields-document/src/structure-validation.ts
index 7cb2b47f616..586c5919263 100644
--- a/packages/fields-document/src/structure-validation.ts
+++ b/packages/fields-document/src/structure-validation.ts
@@ -3,7 +3,7 @@ import excess from 'io-ts-excess';
 import { RelationshipData } from './DocumentEditor/component-blocks/api';
 import { Mark } from './DocumentEditor/utils';
 import { isValidURL } from './DocumentEditor/isValidURL';
-import { PropPath } from './DocumentEditor/component-blocks/utils';
+
 // note that this validation isn't about ensuring that a document has nodes in the right positions and things
 // it's just about validating that it's a valid slate structure
 // we'll then run normalize on it which will enforce more things
@@ -195,7 +195,7 @@ const componentBlock: t.Type<ComponentBlock> = t.recursion('ComponentBlock', ()
 
 type ComponentProp = {
   type: 'component-inline-prop' | 'component-block-prop';
-  propPath: PropPath | undefined;
+  propPath: (string | number)[] | undefined;
   children: Children;
 };
 
diff --git a/packages/fields-document/src/validation.ts b/packages/fields-document/src/validation.ts
index 14c1e3b5322..a6cd6852fd0 100644
--- a/packages/fields-document/src/validation.ts
+++ b/packages/fields-document/src/validation.ts
@@ -1,7 +1,7 @@
 import { Text, Editor } from 'slate';
 import { createDocumentEditor } from './DocumentEditor';
 import { ComponentBlock, ComponentPropField } from './DocumentEditor/component-blocks/api';
-import { assertNever, PropPath } from './DocumentEditor/component-blocks/utils';
+import { assertNever, ReadonlyPropPath } from './DocumentEditor/component-blocks/utils';
 import { Relationships } from './DocumentEditor/relationship';
 import {
   ElementFromValidation,
@@ -12,8 +12,8 @@ import {
 import { DocumentFeatures } from './views';
 
 export class PropValidationError extends Error {
-  path: PropPath;
-  constructor(message: string, path: PropPath) {
+  path: ReadonlyPropPath;
+  constructor(message: string, path: ReadonlyPropPath) {
     super(message);
     this.path = path;
   }
@@ -23,7 +23,7 @@ function validateComponentBlockProps(
   prop: ComponentPropField,
   value: unknown,
   relationships: Relationships,
-  path: PropPath
+  path: ReadonlyPropPath
 ): any {
   if (prop.kind === 'form') {
     if (prop.validate(value)) {
diff --git a/yarn.lock b/yarn.lock
index f2f27b049e0..9405d7c2ee7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1187,13 +1187,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.14.8":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
-  integrity sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -5528,17 +5521,6 @@ dotenv@^8.1.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
   integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
 
-downshift@^6.1.7:
-  version "6.1.7"
-  resolved "https://registry.yarnpkg.com/downshift/-/downshift-6.1.7.tgz#fdb4c4e4f1d11587985cd76e21e8b4b3fa72e44c"
-  integrity sha512-cVprZg/9Lvj/uhYRxELzlu1aezRcgPWBjTvspiGTVEU64gF5pRdSRKFVLcxqsZC637cLAGMbL40JavEfWnqgNg==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    compute-scroll-into-view "^1.0.17"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-    tslib "^2.3.0"
-
 dumb-passwords@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/dumb-passwords/-/dumb-passwords-0.2.1.tgz#efaba4fdc13b27d446d4b11a5f303357649ada32"
@@ -10885,7 +10867,7 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1, react-is@^17.0.2:
+react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

From 7bf3ae4aadc0fc165f6ca777265bc106eb616d14 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 4 Apr 2022 13:36:36 +1000
Subject: [PATCH 039/124] Revert more changes

---
 examples-staging/basic/admin/pages/report.js | 10 ++++++++++
 examples-staging/basic/keystone.ts           |  4 ++--
 examples-staging/basic/package.json          |  4 +---
 examples-staging/basic/schema.graphql        | 12 +++++-------
 examples-staging/basic/schema.prisma         |  8 ++++----
 5 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 examples-staging/basic/admin/pages/report.js

diff --git a/examples-staging/basic/admin/pages/report.js b/examples-staging/basic/admin/pages/report.js
new file mode 100644
index 00000000000..ebd5fc2503e
--- /dev/null
+++ b/examples-staging/basic/admin/pages/report.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ReportPage() {
+  return (
+    <div>
+      <h1>Reports</h1>
+      <p>I'm a demo custom page.</p>
+    </div>
+  );
+}
diff --git a/examples-staging/basic/keystone.ts b/examples-staging/basic/keystone.ts
index 031bbbc058e..50e605d3a40 100644
--- a/examples-staging/basic/keystone.ts
+++ b/examples-staging/basic/keystone.ts
@@ -26,8 +26,8 @@ const auth = createAuth({
 export default auth.withAuth(
   config({
     db: {
-      provider: 'postgresql',
-      url: process.env.DATABASE_URL || `postgres://${process.env.USER}@localhost/basic`,
+      provider: 'sqlite',
+      url: process.env.DATABASE_URL || 'file:./keystone-example.db',
     },
     ui: {
       // NOTE -- this is not implemented, keystone currently always provides an admin ui at /
diff --git a/examples-staging/basic/package.json b/examples-staging/basic/package.json
index 1cd224f50ca..814f825be63 100644
--- a/examples-staging/basic/package.json
+++ b/examples-staging/basic/package.json
@@ -14,11 +14,9 @@
     "@keystone-6/core": "^1.1.0",
     "@keystone-6/document-renderer": "^1.0.0",
     "@keystone-6/fields-document": "^2.0.0",
-    "@keystone-ui/button": "^6.0.0",
     "@keystone-ui/core": "^4.0.0",
     "@keystone-ui/fields": "^6.0.1",
     "@keystone-ui/icons": "^5.0.0",
-    "@keystone-ui/modals": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
     "@types/react": "^17.0.37",
     "graphql": "^15.8.0",
@@ -34,4 +32,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/examples-staging/basic"
-}
\ No newline at end of file
+}
diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index f071a80a2ab..4e0da04eff6 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -199,15 +199,9 @@ input StringFilter {
   contains: String
   startsWith: String
   endsWith: String
-  mode: QueryMode
   not: NestedStringFilter
 }
 
-enum QueryMode {
-  default
-  insensitive
-}
-
 input NestedStringFilter {
   equals: String
   in: [String!]
@@ -357,7 +351,6 @@ input StringNullableFilter {
   contains: String
   startsWith: String
   endsWith: String
-  mode: QueryMode
   not: NestedStringNullableFilter
 }
 
@@ -638,6 +631,11 @@ enum KeystoneAdminUIFieldMetaItemViewFieldMode {
   hidden
 }
 
+enum QueryMode {
+  default
+  insensitive
+}
+
 type KeystoneAdminUISort {
   field: String!
   direction: KeystoneAdminUISortDirection!
diff --git a/examples-staging/basic/schema.prisma b/examples-staging/basic/schema.prisma
index 4826eb5ea5f..07293662d37 100644
--- a/examples-staging/basic/schema.prisma
+++ b/examples-staging/basic/schema.prisma
@@ -1,9 +1,9 @@
 // This file is automatically generated by Keystone, do not modify it manually.
 // Modify your Keystone config when you want to change this.
 
-datasource postgresql {
+datasource sqlite {
   url      = env("DATABASE_URL")
-  provider = "postgresql"
+  provider = "sqlite"
 }
 
 generator client {
@@ -45,8 +45,8 @@ model Post {
   id          String    @id @default(cuid())
   title       String    @default("")
   status      String    @default("draft")
-  blah        Json      @default("[]")
-  content     Json      @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
+  blah        String    @default("[]")
+  content     String    @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
   publishDate DateTime?
   author      User?     @relation("Post_author", fields: [authorId], references: [id])
   authorId    String?   @map("author")

From b41add3ae1bc3c0e239891ecf46ff0acd3b3ceeb Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 4 Apr 2022 13:47:53 +1000
Subject: [PATCH 040/124] Fix a test

---
 .../src/DocumentEditor/tests/jsx/namespace.d.ts                | 1 +
 packages/fields-document/src/primitives.ts                     | 3 ---
 packages/fields-document/src/structure-validation.ts           | 1 -
 tests/api-tests/fields/types/document.test.ts                  | 2 +-
 4 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts b/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
index 6304db4120c..35151a79141 100644
--- a/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
+++ b/packages/fields-document/src/DocumentEditor/tests/jsx/namespace.d.ts
@@ -1,4 +1,5 @@
 import { Node } from 'slate';
+import { ReadonlyPropPath } from '../../component-blocks/utils';
 import { Mark } from '../../utils';
 
 export const __jsx: any;
diff --git a/packages/fields-document/src/primitives.ts b/packages/fields-document/src/primitives.ts
index d4c891c34e2..b4024203de9 100644
--- a/packages/fields-document/src/primitives.ts
+++ b/packages/fields-document/src/primitives.ts
@@ -4,7 +4,4 @@ export {
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarSpacer,
-  DragHandle,
-  SortableItem,
-  SortableList,
 } from './DocumentEditor/primitives';
diff --git a/packages/fields-document/src/structure-validation.ts b/packages/fields-document/src/structure-validation.ts
index 586c5919263..1833a183eef 100644
--- a/packages/fields-document/src/structure-validation.ts
+++ b/packages/fields-document/src/structure-validation.ts
@@ -3,7 +3,6 @@ import excess from 'io-ts-excess';
 import { RelationshipData } from './DocumentEditor/component-blocks/api';
 import { Mark } from './DocumentEditor/utils';
 import { isValidURL } from './DocumentEditor/isValidURL';
-
 // note that this validation isn't about ensuring that a document has nodes in the right positions and things
 // it's just about validating that it's a valid slate structure
 // we'll then run normalize on it which will enforce more things
diff --git a/tests/api-tests/fields/types/document.test.ts b/tests/api-tests/fields/types/document.test.ts
index 96628c404f7..6b8664b568a 100644
--- a/tests/api-tests/fields/types/document.test.ts
+++ b/tests/api-tests/fields/types/document.test.ts
@@ -347,7 +347,7 @@ describe('Document field type', () => {
         }),
       })
     ).rejects.toMatchInlineSnapshot(
-      `[Error: A component block named Some Block in the field at Post.content has a relationship field at something.blah.true with the listKey "Author" but no list named "Author" exists.]`
+      `[Error: Component block someBlock in Post.content: The relationship field at "object.something.object.blah.conditional.true"  has the listKey "Author" but no list named "Author" exists.]`
     );
   });
 });

From ebd627c7f9218941530511ec61708f4ce9ae28ca Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Thu, 7 Apr 2022 13:39:39 +1000
Subject: [PATCH 041/124] Fix some things

---
 .../basic/admin/fieldViews/Blah.tsx           |  4 +-
 .../basic/admin/fieldViews/Content.tsx        | 65 -------------------
 .../basic/admin/pages/post/[id].tsx           | 12 ++++
 .../DocumentEditor/component-blocks/api.tsx   |  2 +-
 .../fields-document/src/component-blocks.tsx  |  1 +
 5 files changed, 16 insertions(+), 68 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index e1404476823..c77b7088aaa 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -4,10 +4,10 @@
 import {
   fields,
   ArrayField,
-  ComponentPropField,
+  ComponentPropFieldForGraphQL,
 } from '@keystone-6/fields-document/component-blocks';
 
-export const prop: ArrayField<ComponentPropField> = fields.array(
+export const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
   fields.conditional(
     fields.select({
       defaultValue: 'leaf',
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 2a502458c9a..68cd85af2ad 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -16,7 +16,6 @@ import {
 } from '@keystone-6/fields-document/primitives';
 import { useEffect } from 'react';
 import { Button } from '@keystone-ui/button';
-import { prop as blah } from './Blah';
 
 const noticeIconMap = {
   info: InfoIcon,
@@ -26,34 +25,6 @@ const noticeIconMap = {
 };
 
 export const componentBlocks = {
-  navigation: component({
-    component: () => <NotEditable>empty</NotEditable>,
-    props: { blah },
-    label: 'Navigation',
-  }),
-  thing: component({
-    component: props => {
-      return (
-        <div>
-          <h1>{props.fields.heading}</h1>
-          <NotEditable>
-            <h1>{props.fields.icon.value}</h1>
-          </NotEditable>
-          <div>{props.fields.content}</div>
-        </div>
-      );
-    },
-    props: {
-      heading: fields.child({ kind: 'inline', placeholder: 'Heading' }),
-      icon: fields.select({
-        label: 'Icon',
-        options: [{ label: 'A', value: 'a' }],
-        defaultValue: 'a',
-      }),
-      content: fields.child({ kind: 'block', placeholder: 'Content' }),
-    },
-    label: 'thing',
-  }),
   table: component({
     component: function MyTable(props) {
       useEffect(() => {
@@ -197,42 +168,6 @@ export const componentBlocks = {
     },
     // chromeless: true,
   }),
-  qAndA: component({
-    component: function MyList(props) {
-      useEffect(() => {
-        if (!props.fields.children.elements.length) {
-          props.fields.children.onChange([
-            ...props.fields.children.elements.map(x => ({ id: x.id })),
-            { id: undefined },
-          ]);
-        }
-      });
-      return (
-        <div>
-          {props.fields.children.elements.map(element => (
-            <div key={element.id}>
-              <h1>{element.element.fields.question}</h1>
-              <div>{element.element.fields.answer}</div>
-            </div>
-          ))}
-        </div>
-      );
-    },
-    label: 'Question & Answers',
-    props: {
-      children: fields.array(
-        fields.object({
-          question: fields.child({
-            kind: 'inline',
-            placeholder: 'Question...',
-            formatting: 'inherit',
-          }),
-          answer: fields.child({ kind: 'inline', placeholder: 'Answer...', formatting: 'inherit' }),
-        })
-      ),
-    },
-    // chromeless: true,
-  }),
   hero: component({
     component: props => {
       return (
diff --git a/examples-staging/basic/admin/pages/post/[id].tsx b/examples-staging/basic/admin/pages/post/[id].tsx
index a0c286ab826..63bee59ac36 100644
--- a/examples-staging/basic/admin/pages/post/[id].tsx
+++ b/examples-staging/basic/admin/pages/post/[id].tsx
@@ -16,6 +16,18 @@ type ComponentBlockRenderers = InferRenderersForComponentBlocks<
 >;
 
 const componentBlockRenderers: ComponentBlockRenderers = {
+  myList: props => {
+    return (
+      <ul>
+        {props.children.map((x, i) => {
+          return <li key={i}>{x.content}</li>;
+        })}
+      </ul>
+    );
+  },
+  table: () => {
+    return null;
+  },
   hero: props => (
     <div
       css={{
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 230559b0191..5c7ceddda49 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -178,7 +178,7 @@ export type ComponentPropFieldForGraphQL =
   | FormFieldWithGraphQLField<any, any>
   | ObjectField<Record<string, ComponentPropFieldForGraphQL>>
   | ConditionalField<
-      FormFieldWithGraphQLField<string | boolean, any>,
+      FormFieldWithGraphQLField<any, any>,
       { [key: string]: ComponentPropFieldForGraphQL }
     >
   | RelationshipField<boolean>
diff --git a/packages/fields-document/src/component-blocks.tsx b/packages/fields-document/src/component-blocks.tsx
index 2134531ca25..7ba5143f1ce 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,
+  ComponentPropFieldForGraphQL,
 } from './DocumentEditor/component-blocks/api';

From acbebbddcbd70e17fc9abb71d366cec166d32610 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 8 Apr 2022 11:10:49 +1000
Subject: [PATCH 042/124] Some cleanup

---
 .../component-blocks/preview-props.tsx        |   7 +-
 .../DocumentEditor/component-blocks/utils.ts  | 105 ++++++++++++------
 .../with-component-blocks.tsx                 |  24 ++--
 .../src/DocumentEditor/utils.ts               |   7 +-
 4 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 85c9214bf12..bf4987ead82 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -13,7 +13,7 @@ import {
 } from './api';
 import { updateValue } from './initial-values';
 
-const arrayValuesToElementIds = new WeakMap<readonly unknown[], string[]>();
+const arrayValuesToElementIds = new WeakMap<readonly unknown[], readonly string[]>();
 
 let counter = 0;
 
@@ -24,7 +24,10 @@ export function getElementIdsForArrayValue(value: readonly unknown[]) {
   return arrayValuesToElementIds.get(value)!;
 }
 
-export function setElementIdsForArrayValue(value: unknown[], elementIds: string[]) {
+export function setElementIdsForArrayValue(
+  value: readonly unknown[],
+  elementIds: readonly string[]
+) {
   arrayValuesToElementIds.set(value, elementIds);
 }
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index b34e03ec473..57ff41399be 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -1,7 +1,7 @@
 import { ComponentPropField } from '../../component-blocks';
 import { DocumentFeatures } from '../../views';
 import { DocumentFeaturesForNormalization } from '../document-features-normalization';
-import { Mark } from '../utils';
+import { assert, Mark } from '../utils';
 import { ChildField } from './api';
 import { getElementIdsForArrayValue, setElementIdsForArrayValue } from './preview-props';
 
@@ -275,49 +275,90 @@ export function getValueAtPropPath(value: unknown, inputPath: ReadonlyPropPath)
   return value;
 }
 
-export function transformProps(
+export function traverseProps(
   prop: ComponentPropField,
   value: unknown,
-  transformer: (prop: ComponentPropField, value: unknown, path: ReadonlyPropPath) => unknown,
+  visitor: (prop: ComponentPropField, value: unknown, path: ReadonlyPropPath) => void,
   path: ReadonlyPropPath = []
-): unknown {
+) {
   if (prop.kind === 'form' || prop.kind === 'relationship' || prop.kind === 'child') {
-    return transformer(prop, value, path);
+    visitor(prop, value, path);
+    return;
   }
   if (prop.kind === 'object') {
-    return transformer(
-      prop,
-      Object.fromEntries(
-        Object.entries(value as Record<string, unknown>).map(([key, val]) => {
-          return [key, transformProps(prop.value[key], val, transformer, path.concat(key))];
-        })
-      ),
-      path
-    );
+    for (const [key, childProp] of Object.entries(prop.value)) {
+      traverseProps(childProp, (value as any)[key], visitor, [...path, key]);
+    }
+    visitor(prop, value, path);
+    return;
   }
   if (prop.kind === 'array') {
-    const prevVal = value as unknown[];
-    const newVal = prevVal.map((val, i) =>
-      transformProps(prop.element, val, transformer, path.concat(i))
+    for (const [idx, val] of (value as unknown[]).entries()) {
+      traverseProps(prop.element, val, visitor, path.concat(idx));
+    }
+    return visitor(prop, value, path);
+  }
+  if (prop.kind === 'conditional') {
+    const discriminant: string | boolean = (value as any).discriminant;
+    visitor(prop, discriminant, path.concat('discriminant'));
+    traverseProps(
+      prop.values[discriminant.toString()],
+      (value as any).value,
+      visitor,
+      path.concat('value')
     );
-    setElementIdsForArrayValue(newVal, getElementIdsForArrayValue(prevVal));
-    return transformer(prop, newVal, path);
+    visitor(prop, value, path);
+    return;
   }
+  assertNever(prop);
+}
+
+export function replaceValueAtPropPath(
+  prop: ComponentPropField,
+  value: unknown,
+  newValue: unknown,
+  path: ReadonlyPropPath
+): unknown {
+  if (path.length === 0) {
+    return newValue;
+  }
+
+  const [key, ...newPath] = path;
+
+  if (prop.kind === 'object') {
+    return {
+      ...(value as any),
+      [key]: replaceValueAtPropPath(prop.value[key], (value as any)[key], newValue, newPath),
+    };
+  }
+
   if (prop.kind === 'conditional') {
-    const discriminant = (value as any).discriminant;
-    return transformer(
-      prop,
-      {
-        discriminant: transformer(prop, discriminant, path.concat('discriminant')),
-        value: transformProps(
-          prop.values[discriminant.toString() as string],
-          (value as any).value,
-          transformer,
-          path.concat('value')
-        ),
-      },
-      path
+    const conditionalValue = value as { discriminant: string | boolean; value: unknown };
+    // replaceValueAtPropPath should not be used to only update the discriminant of a conditional field
+    // if you want to update the discriminant of a conditional field, replace the value of the whole conditional field
+    assert(key === 'value');
+    return {
+      discriminant: conditionalValue.discriminant,
+      value: replaceValueAtPropPath(prop.values[key], conditionalValue.value, newValue, newPath),
+    };
+  }
+
+  if (prop.kind === 'array') {
+    const prevVal = value as unknown[];
+    const newVal = [...prevVal];
+    setElementIdsForArrayValue(newVal, getElementIdsForArrayValue(prevVal));
+    newVal[key as number] = replaceValueAtPropPath(
+      prop.element,
+      newVal[key as number],
+      newValue,
+      newPath
     );
+    return newVal;
   }
+
+  // we should never reach here since form, relationship or child fields don't contain other fields
+  // so the only thing that can happen to them is to be replaced which happens at the start of this function when path.length === 0
+  assert(prop.kind !== 'form' && prop.kind !== 'relationship' && prop.kind !== 'child');
+
   assertNever(prop);
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index cc1d76119f0..495b9425d62 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -19,7 +19,8 @@ import {
   getDocumentFeaturesForChildField,
   getValueAtPropPath,
   ReadonlyPropPath,
-  transformProps,
+  replaceValueAtPropPath,
+  traverseProps,
 } from './utils';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField } from './api';
@@ -167,13 +168,10 @@ function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField):
 
 function findArrayFieldsWithSingleChildField(prop: ComponentPropField, value: unknown) {
   const propPaths: [ReadonlyPropPath, ArrayField<ComponentPropField>][] = [];
-  transformProps(prop, value, (prop, value, path) => {
-    if (prop.kind === 'array') {
-      if (doesPropOnlyEverContainASingleChildField(prop.element)) {
-        propPaths.push([path, prop]);
-      }
+  traverseProps(prop, value, (prop, value, path) => {
+    if (prop.kind === 'array' && doesPropOnlyEverContainASingleChildField(prop.element)) {
+      propPaths.push([path, prop]);
     }
-    return value;
   });
   return propPaths;
 }
@@ -397,12 +395,12 @@ export function withComponentBlocks(
             }
             setElementIdsForArrayValue(newVal, newKeys);
             if (!areArraysEqual(arrVal, newVal)) {
-              const transformedProps = transformProps(rootProp, node.props, (prop, value, path) => {
-                if (prop.kind === 'array' && areArraysEqual(path, propPath)) {
-                  return newVal;
-                }
-                return value;
-              });
+              const transformedProps = replaceValueAtPropPath(
+                rootProp,
+                node.props,
+                newVal,
+                propPath
+              );
               Transforms.setNodes(
                 editor,
                 { props: transformedProps as Record<string, unknown> },
diff --git a/packages/fields-document/src/DocumentEditor/utils.ts b/packages/fields-document/src/DocumentEditor/utils.ts
index f3602424138..9a14d180327 100644
--- a/packages/fields-document/src/DocumentEditor/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/utils.ts
@@ -85,7 +85,7 @@ export function useElementWithSetNodes<TElement extends Element>(
     setState({ element, elementWithChanges: element });
   }
 
-  const elementRef = useRef(state.elementWithChanges);
+  const elementRef = useRef(element);
 
   useEffect(() => {
     elementRef.current = element;
@@ -208,9 +208,8 @@ export function nodeTypeMatcher<Type extends Element['type'][]>(
   return ((node: Node) => typeof node.type === 'string' && set.has(node.type)) as any;
 }
 
-export function assert(condition: boolean, message?: string): asserts condition {
+export function assert(condition: boolean): asserts condition {
   if (!condition) {
-    debugger;
-    throw new Error(message ?? 'failed assert');
+    throw new Error('failed assert');
   }
 }

From 3ec05f428dff64c136aa4854a1400f568ad904ab Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 11 Apr 2022 14:34:06 +1000
Subject: [PATCH 043/124] Generic field tests for new field

---
 .../src/structured/tests/test-fixtures.ts     | 214 ++++++++++++++++++
 1 file changed, 214 insertions(+)
 create mode 100644 packages/fields-document/src/structured/tests/test-fixtures.ts

diff --git a/packages/fields-document/src/structured/tests/test-fixtures.ts b/packages/fields-document/src/structured/tests/test-fixtures.ts
new file mode 100644
index 00000000000..e50c5a2718a
--- /dev/null
+++ b/packages/fields-document/src/structured/tests/test-fixtures.ts
@@ -0,0 +1,214 @@
+import { componentThing } from '../../component';
+import { ArrayField, ComponentPropFieldForGraphQL, fields } from '../../component-blocks';
+
+export const name = 'NEEDS A NAME';
+export const typeFunction = componentThing;
+export const exampleValue = () => [
+  {
+    leaf: {
+      label: 'Keystone',
+      url: 'https://keystonejs.com',
+    },
+  },
+  {
+    group: {
+      label: 'Docs',
+      children: [
+        { leaf: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' } },
+        {
+          group: {
+            label: 'Fields',
+            children: [
+              { leaf: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' } },
+            ],
+          },
+        },
+      ],
+    },
+  },
+];
+export const createReturnedValue = () => [
+  {
+    discriminant: 'leaf',
+    value: { label: 'Keystone', url: 'https://keystonejs.com' },
+  },
+  {
+    discriminant: 'group',
+    value: {
+      label: 'Docs',
+      children: [
+        {
+          discriminant: 'leaf',
+          value: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' },
+        },
+        {
+          discriminant: 'group',
+          value: {
+            label: 'Fields',
+            children: [
+              {
+                discriminant: 'leaf',
+                value: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+];
+export const exampleValue2 = () => [
+  {
+    leaf: {
+      label: 'Keystone',
+      url: 'https://keystonejs.com',
+    },
+  },
+];
+export const updateReturnedValue = () => [
+  {
+    discriminant: 'leaf',
+    value: {
+      label: 'Keystone',
+      url: 'https://keystonejs.com',
+    },
+  },
+];
+
+export const neverNull = true;
+export const supportsUnique = false;
+export const skipRequiredTest = true;
+export const supportsDbMap = true;
+export const fieldName = 'content';
+export const subfieldName = 'document';
+export const readFieldName = 'contentRaw';
+
+const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
+  fields.conditional(
+    fields.select({
+      defaultValue: 'leaf',
+      label: 'Type',
+      options: [
+        { label: 'Leaf', value: 'leaf' },
+        { label: 'Group', value: 'group' },
+      ],
+    }),
+    {
+      leaf: fields.object({
+        label: fields.text({ label: 'Label' }),
+        url: fields.url({ label: 'URL' }),
+      }),
+      group: fields.object({
+        label: fields.text({ label: 'Label' }),
+        get children() {
+          return prop;
+        },
+      }),
+    }
+  )
+);
+
+export const getTestFields = () => ({ content: componentThing(getFieldConfig()) });
+export const getFieldConfig = () => ({
+  prop,
+});
+
+export const initItems = () => [
+  { name: 'a', content: [] },
+  {
+    name: 'b',
+    content: [{ leaf: { label: 'Keystone', url: 'https://keystonejs.com' } }],
+  },
+  {
+    name: 'c',
+    content: [
+      { leaf: { label: 'Keystone', url: 'https://keystonejs.com' } },
+      {
+        group: {
+          label: 'Docs',
+          children: [
+            { leaf: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' } },
+            {
+              group: {
+                label: 'Fields',
+                children: [
+                  { leaf: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' } },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    name: 'd',
+    content: [{ group: { label: 'Something' } }],
+  },
+  {
+    name: 'e',
+    content: [{ group: { label: 'Outer', children: [{ group: { label: 'Inner' } }] } }],
+  },
+  { name: 'f' },
+  { name: 'g' },
+];
+
+export const storedValues = () => [
+  { name: 'a', contentRaw: [] },
+  {
+    name: 'b',
+    contentRaw: [
+      { discriminant: 'leaf', value: { label: 'Keystone', url: 'https://keystonejs.com' } },
+    ],
+  },
+  {
+    name: 'c',
+    contentRaw: [
+      { discriminant: 'leaf', value: { label: 'Keystone', url: 'https://keystonejs.com' } },
+      {
+        discriminant: 'group',
+        value: {
+          label: 'Docs',
+          children: [
+            {
+              discriminant: 'leaf',
+              value: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' },
+            },
+            {
+              discriminant: 'group',
+              value: {
+                label: 'Fields',
+                children: [
+                  {
+                    discriminant: 'leaf',
+                    value: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    name: 'd',
+    contentRaw: [{ discriminant: 'group', value: { label: 'Something', children: [] } }],
+  },
+  {
+    name: 'e',
+    contentRaw: [
+      {
+        discriminant: 'group',
+        value: {
+          label: 'Outer',
+          children: [{ discriminant: 'group', value: { label: 'Inner', children: [] } }],
+        },
+      },
+    ],
+  },
+  { name: 'f', contentRaw: [] },
+  { name: 'g', contentRaw: [] },
+];
+
+export const supportedFilters = () => [];

From ad77c272f2826f484fe207ff58390ab7dffd2249 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 11 Apr 2022 15:28:36 +1000
Subject: [PATCH 044/124] Fix a thing

---
 .../fields-document/src/structured/tests/test-fixtures.ts    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/src/structured/tests/test-fixtures.ts b/packages/fields-document/src/structured/tests/test-fixtures.ts
index e50c5a2718a..a5556426935 100644
--- a/packages/fields-document/src/structured/tests/test-fixtures.ts
+++ b/packages/fields-document/src/structured/tests/test-fixtures.ts
@@ -80,7 +80,6 @@ export const supportsUnique = false;
 export const skipRequiredTest = true;
 export const supportsDbMap = true;
 export const fieldName = 'content';
-export const subfieldName = 'document';
 export const readFieldName = 'contentRaw';
 
 const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
@@ -108,8 +107,8 @@ const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
   )
 );
 
-export const getTestFields = () => ({ content: componentThing(getFieldConfig()) });
-export const getFieldConfig = () => ({
+export const getTestFields = () => ({ content: componentThing(fieldConfig()) });
+export const fieldConfig = () => ({
   prop,
 });
 

From b4e8672c8e0cddd44c9ac6409e93def0ed682f58 Mon Sep 17 00:00:00 2001
From: Achi06 <achala.singh94@gmail.com>
Date: Mon, 11 Apr 2022 16:43:09 +1000
Subject: [PATCH 045/124] Fixed Reset to Defaults Button

Co-authored-by: Charles <gwyneplaine@users.noreply.github.com>
---
 .../admin-ui/pages/ListPage/index.tsx                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
index 5c922e758c4..1d49916a9b3 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
@@ -254,7 +254,7 @@ const ListPage = ({ listKey }: ListPageProps) => {
               <FilterAdd listKey={listKey} filterableFields={filterableFields} />
             ) : null}
             {filters.filters.length ? <FilterList filters={filters.filters} list={list} /> : null}
-            {Boolean(Object.keys(query).length) && (
+            {Boolean(filters.filters.length || sort || query.fields) && (
               <Button size="small" onClick={resetToDefaults}>
                 Reset to defaults
               </Button>

From 032e2eb24f67544949958def72cf5ac75c5972bb Mon Sep 17 00:00:00 2001
From: Achi06 <achala.singh94@gmail.com>
Date: Mon, 11 Apr 2022 16:49:25 +1000
Subject: [PATCH 046/124] changeset

---
 .changeset/rotten-eyes-speak.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rotten-eyes-speak.md

diff --git a/.changeset/rotten-eyes-speak.md b/.changeset/rotten-eyes-speak.md
new file mode 100644
index 00000000000..a26864aea4f
--- /dev/null
+++ b/.changeset/rotten-eyes-speak.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/core': patch
+---
+
+Fixed Reset to default button bug.

From ff714671a4e37945e70a697b347fc39fc8a347ee Mon Sep 17 00:00:00 2001
From: Achala Singh <28669082+Achi06@users.noreply.github.com>
Date: Tue, 12 Apr 2022 11:50:57 +1000
Subject: [PATCH 047/124] Update
 packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>
---
 .../admin-ui/pages/ListPage/index.tsx                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
index 1d49916a9b3..9e6c5dde87b 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
@@ -254,7 +254,7 @@ const ListPage = ({ listKey }: ListPageProps) => {
               <FilterAdd listKey={listKey} filterableFields={filterableFields} />
             ) : null}
             {filters.filters.length ? <FilterList filters={filters.filters} list={list} /> : null}
-            {Boolean(filters.filters.length || sort || query.fields) && (
+            {Boolean(filters.filters.length || query.sortBy || query.fields) && (
               <Button size="small" onClick={resetToDefaults}>
                 Reset to defaults
               </Button>

From d503142cc4d6115efdf06218b65156a21b052ad4 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 13 Apr 2022 15:32:02 +1000
Subject: [PATCH 048/124] fix(deps): update dependency cookie to ^0.5.0 (#7462)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 packages/core/package.json | 2 +-
 yarn.lock                  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 8749c5c498c..c2e9de41b3d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -80,7 +80,7 @@
     "bytes": "^3.1.1",
     "chalk": "^4.1.2",
     "clipboard-copy": "^4.0.1",
-    "cookie": "^0.4.1",
+    "cookie": "^0.5.0",
     "copy-to-clipboard": "^3.3.1",
     "cors": "^2.8.5",
     "cuid": "^2.1.8",
diff --git a/yarn.lock b/yarn.lock
index b99e7d1e9b4..9fef9bbdf5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4878,10 +4878,10 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
-cookie@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
-  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+cookie@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 cookiejar@^2.1.2:
   version "2.1.3"

From bcafb07d0d931134dd82312b2f72dc77aa942cb1 Mon Sep 17 00:00:00 2001
From: CommanderRoot <CommanderRoot@users.noreply.github.com>
Date: Thu, 14 Apr 2022 02:39:10 +0200
Subject: [PATCH 049/124] refactor: replace deprecated
 String.prototype.substr() (#7402)

.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated

Signed-off-by: Tobias Speicher <rootcommander@gmail.com>
---
 design-system/website/utils.ts                           | 2 +-
 .../admin-ui/pages/ListPage/useSort.tsx                  | 2 +-
 packages/core/src/lib/utils.ts                           | 2 +-
 packages/fields-document/src/DocumentEditor/marks.tsx    | 9 ++++++---
 packages/fields-document/src/DocumentEditor/shortcuts.ts | 2 +-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/design-system/website/utils.ts b/design-system/website/utils.ts
index 606efe4831e..d9dab3aeb1f 100644
--- a/design-system/website/utils.ts
+++ b/design-system/website/utils.ts
@@ -1,4 +1,4 @@
-export const toLabel = (str: string) => str.substr(0, 1).toUpperCase() + str.substr(1);
+export const toLabel = (str: string) => str.slice(0, 1).toUpperCase() + str.slice(1);
 
 const VOWELS = ['a', 'e', 'i', 'o', 'u'];
 export const aAn = (before: string) => `a${VOWELS.includes(before.charAt(0)) ? 'n' : ''}`;
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx
index 2b2e8d210b4..3386f5dc218 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx
@@ -16,7 +16,7 @@ export function useSort(list: ListMeta, orderableFields: Set<string>) {
     let direction: 'ASC' | 'DESC' = 'ASC';
     let sortByField = sortByFromUrl;
     if (sortByFromUrl.charAt(0) === '-') {
-      sortByField = sortByFromUrl.substr(1);
+      sortByField = sortByFromUrl.slice(1);
       direction = 'DESC';
     }
     if (!orderableFields.has(sortByField)) return null;
diff --git a/packages/core/src/lib/utils.ts b/packages/core/src/lib/utils.ts
index 1b7c88635e3..5aeead751b5 100644
--- a/packages/core/src/lib/utils.ts
+++ b/packages/core/src/lib/utils.ts
@@ -3,7 +3,7 @@
  * @param {String} str The string to convert.
  * @returns The new string
  */
-export const upcase = (str: string) => str.substr(0, 1).toUpperCase() + str.substr(1);
+export const upcase = (str: string) => str.slice(0, 1).toUpperCase() + str.slice(1);
 
 /**
  * Turns a passed in string into
diff --git a/packages/fields-document/src/DocumentEditor/marks.tsx b/packages/fields-document/src/DocumentEditor/marks.tsx
index fa3ae0684e5..271d88079dd 100644
--- a/packages/fields-document/src/DocumentEditor/marks.tsx
+++ b/packages/fields-document/src/DocumentEditor/marks.tsx
@@ -95,7 +95,10 @@ export function withMarks(
               focus: startOfBlock,
             });
             const hasWhitespaceBeforeEndOfShortcut = /\s/.test(
-              startOfBlockToEndOfShortcutString.substr(-shortcutText.length - 1, 1)
+              startOfBlockToEndOfShortcutString.slice(
+                -shortcutText.length - 1,
+                -shortcutText.length
+              )
             );
 
             const endOfShortcutContainsExpectedContent =
@@ -111,9 +114,9 @@ export function withMarks(
             );
             // TODO: use regex probs
             for (const [offsetFromStartOfBlock] of [...strToMatchOn].reverse().entries()) {
-              const expectedShortcutText = strToMatchOn.substr(
+              const expectedShortcutText = strToMatchOn.slice(
                 offsetFromStartOfBlock,
-                shortcutText.length
+                offsetFromStartOfBlock + shortcutText.length
               );
               if (expectedShortcutText !== shortcutText) {
                 continue;
diff --git a/packages/fields-document/src/DocumentEditor/shortcuts.ts b/packages/fields-document/src/DocumentEditor/shortcuts.ts
index cae77ddfb3f..6f0864e35bd 100644
--- a/packages/fields-document/src/DocumentEditor/shortcuts.ts
+++ b/packages/fields-document/src/DocumentEditor/shortcuts.ts
@@ -25,7 +25,7 @@ export function withShortcuts(editor: Editor): Editor {
           if (pointBefore && Path.isDescendant(pointBefore.path, ancestorBlock[1])) {
             const range = { anchor: selectionPoint, focus: pointBefore };
             const str = Editor.string(editor, range);
-            if (str.substr(0, shortcut.length) === shortcut) {
+            if (str.slice(0, shortcut.length) === shortcut) {
               editor.history.undos.push([]);
               Transforms.select(editor, range);
               editor.insertText(shortcuts[shortcut] + ' ');

From 96119c716e97743f14f032578f1185fb3ac81d33 Mon Sep 17 00:00:00 2001
From: Alexey Murz Korepov <murznn@gmail.com>
Date: Thu, 14 Apr 2022 04:56:01 +0400
Subject: [PATCH 050/124] Add Codesandbox configs to allow launching online
 sandboxes for example projects (#7463)

* Add sandbox config to blog example

* Add sanbox config to all other examples

* Add sandbox description to blog readme

* Added changeset

* Delete examples/idfield-overrides directory
---
 .changeset/shy-cycles-check.md                | 25 +++++++++++++++++++
 .../assets-cloud/sandbox.config.json          |  7 ++++++
 .../assets-local/sandbox.config.json          |  7 ++++++
 examples-staging/auth/sandbox.config.json     |  7 ++++++
 examples-staging/basic/sandbox.config.json    |  7 ++++++
 .../ecommerce/sandbox.config.json             |  7 ++++++
 .../embedded-nextjs/sandbox.config.json       |  7 ++++++
 .../graphql-api-endpoint/sandbox.config.json  |  7 ++++++
 examples-staging/roles/sandbox.config.json    |  7 ++++++
 examples/blog/README.md                       |  6 +++++
 examples/blog/sandbox.config.json             |  7 ++++++
 .../custom-admin-ui-logo/sandbox.config.json  |  7 ++++++
 .../sandbox.config.json                       |  7 ++++++
 .../custom-admin-ui-pages/sandbox.config.json |  7 ++++++
 .../custom-field-view/sandbox.config.json     |  7 ++++++
 examples/custom-field/sandbox.config.json     |  7 ++++++
 examples/default-values/sandbox.config.json   |  7 ++++++
 examples/document-field/sandbox.config.json   |  7 ++++++
 .../sandbox.config.json                       |  7 ++++++
 .../sandbox.config.json                       |  7 ++++++
 .../extend-graphql-schema/sandbox.config.json |  7 ++++++
 examples/json/sandbox.config.json             |  7 ++++++
 examples/rest-api/sandbox.config.json         |  7 ++++++
 23 files changed, 178 insertions(+)
 create mode 100644 .changeset/shy-cycles-check.md
 create mode 100644 examples-staging/assets-cloud/sandbox.config.json
 create mode 100644 examples-staging/assets-local/sandbox.config.json
 create mode 100644 examples-staging/auth/sandbox.config.json
 create mode 100644 examples-staging/basic/sandbox.config.json
 create mode 100644 examples-staging/ecommerce/sandbox.config.json
 create mode 100644 examples-staging/embedded-nextjs/sandbox.config.json
 create mode 100644 examples-staging/graphql-api-endpoint/sandbox.config.json
 create mode 100644 examples-staging/roles/sandbox.config.json
 create mode 100644 examples/blog/sandbox.config.json
 create mode 100644 examples/custom-admin-ui-logo/sandbox.config.json
 create mode 100644 examples/custom-admin-ui-navigation/sandbox.config.json
 create mode 100644 examples/custom-admin-ui-pages/sandbox.config.json
 create mode 100644 examples/custom-field-view/sandbox.config.json
 create mode 100644 examples/custom-field/sandbox.config.json
 create mode 100644 examples/default-values/sandbox.config.json
 create mode 100644 examples/document-field/sandbox.config.json
 create mode 100644 examples/extend-graphql-schema-graphql-ts/sandbox.config.json
 create mode 100644 examples/extend-graphql-schema-nexus/sandbox.config.json
 create mode 100644 examples/extend-graphql-schema/sandbox.config.json
 create mode 100644 examples/json/sandbox.config.json
 create mode 100644 examples/rest-api/sandbox.config.json

diff --git a/.changeset/shy-cycles-check.md b/.changeset/shy-cycles-check.md
new file mode 100644
index 00000000000..388fb090506
--- /dev/null
+++ b/.changeset/shy-cycles-check.md
@@ -0,0 +1,25 @@
+---
+'@keystone-6/example-assets-cloud': patch
+'@keystone-6/example-assets-local': patch
+'@keystone-6/example-auth': patch
+'@keystone-6/examples-app-basic': patch
+'@keystone-6/example-ecommerce': patch
+'@keystone-6/example-embedded-nextjs': patch
+'@keystone-6/example-graphql-api-endpoint': patch
+'@keystone-6/example-roles': patch
+'@keystone-6/example-blog': patch
+'@keystone-6/example-custom-admin-ui-logo': patch
+'@keystone-6/example-custom-admin-ui-navigation': patch
+'@keystone-6/example-custom-admin-ui-pages': patch
+'@keystone-6/example-custom-field': patch
+'@keystone-6/example-custom-field-view': patch
+'@keystone-6/example-default-values': patch
+'@keystone-6/example-document-field': patch
+'@keystone-6/example-extend-graphql-schema': patch
+'@keystone-6/example-extend-graphql-schema-graphql-ts': patch
+'@keystone-6/example-extend-graphql-schema-nexus': patch
+'@keystone-6/example-json-field': patch
+'@keystone-6/example-rest-api': patch
+---
+
+Added sandbox configs to allow launching sandboxes on codesandbox.io service
diff --git a/examples-staging/assets-cloud/sandbox.config.json b/examples-staging/assets-cloud/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/assets-cloud/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/assets-local/sandbox.config.json b/examples-staging/assets-local/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/assets-local/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/auth/sandbox.config.json b/examples-staging/auth/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/auth/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/basic/sandbox.config.json b/examples-staging/basic/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/basic/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/ecommerce/sandbox.config.json b/examples-staging/ecommerce/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/ecommerce/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/embedded-nextjs/sandbox.config.json b/examples-staging/embedded-nextjs/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/embedded-nextjs/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/graphql-api-endpoint/sandbox.config.json b/examples-staging/graphql-api-endpoint/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/graphql-api-endpoint/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples-staging/roles/sandbox.config.json b/examples-staging/roles/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples-staging/roles/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/blog/README.md b/examples/blog/README.md
index 35146439388..14788d467d4 100644
--- a/examples/blog/README.md
+++ b/examples/blog/README.md
@@ -19,6 +19,12 @@ You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://
 
 Congratulations, you're now up and running with Keystone! 🚀
 
+### Online sandox
+
+You can play with this example online in web browser using free [codesandbox.io](https://codesandbox.io/) service. To launch the sandbox just open the url https://githubbox.com/keystonejs/keystone/tree/main/examples/blog and that's all.
+
+You can even fork this sanbox to make your own changes.
+
 ### Optional: add sample data
 
 This example includes sample data. To add it to your database:
diff --git a/examples/blog/sandbox.config.json b/examples/blog/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/blog/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/custom-admin-ui-logo/sandbox.config.json b/examples/custom-admin-ui-logo/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/custom-admin-ui-logo/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/custom-admin-ui-navigation/sandbox.config.json b/examples/custom-admin-ui-navigation/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/custom-admin-ui-navigation/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/custom-admin-ui-pages/sandbox.config.json b/examples/custom-admin-ui-pages/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/custom-admin-ui-pages/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/custom-field-view/sandbox.config.json b/examples/custom-field-view/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/custom-field-view/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/custom-field/sandbox.config.json b/examples/custom-field/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/custom-field/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/default-values/sandbox.config.json b/examples/default-values/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/default-values/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/document-field/sandbox.config.json b/examples/document-field/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/document-field/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/extend-graphql-schema-graphql-ts/sandbox.config.json b/examples/extend-graphql-schema-graphql-ts/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/extend-graphql-schema-graphql-ts/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/extend-graphql-schema-nexus/sandbox.config.json b/examples/extend-graphql-schema-nexus/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/extend-graphql-schema-nexus/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/extend-graphql-schema/sandbox.config.json b/examples/extend-graphql-schema/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/extend-graphql-schema/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/json/sandbox.config.json b/examples/json/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/json/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}
diff --git a/examples/rest-api/sandbox.config.json b/examples/rest-api/sandbox.config.json
new file mode 100644
index 00000000000..e26e2dbe04f
--- /dev/null
+++ b/examples/rest-api/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "14"
+  }
+}

From 649712c6983a83d5a3727fc7fe2896f8a1298411 Mon Sep 17 00:00:00 2001
From: Achi06 <achala.singh94@gmail.com>
Date: Thu, 14 Apr 2022 11:25:07 +1000
Subject: [PATCH 051/124] Fixed z-index bug for editor #7395

---
 packages/fields-document/src/DocumentEditor/Toolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fields-document/src/DocumentEditor/Toolbar.tsx b/packages/fields-document/src/DocumentEditor/Toolbar.tsx
index f7853efd4d5..0b55d7b77d7 100644
--- a/packages/fields-document/src/DocumentEditor/Toolbar.tsx
+++ b/packages/fields-document/src/DocumentEditor/Toolbar.tsx
@@ -188,7 +188,7 @@ const ToolbarContainer = ({ children }: { children: ReactNode }) => {
         paddingTop: spacing.small,
         position: 'sticky',
         top: 0,
-        zIndex: 2,
+        zIndex: 30,
       }}
     >
       <ToolbarGroup>{children}</ToolbarGroup>

From 117621594d46929bd8e7b5103fa1c4efee1bb39d Mon Sep 17 00:00:00 2001
From: Achi06 <achala.singh94@gmail.com>
Date: Thu, 14 Apr 2022 11:28:55 +1000
Subject: [PATCH 052/124] changeset update

---
 .changeset/famous-cherries-joke.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/famous-cherries-joke.md

diff --git a/.changeset/famous-cherries-joke.md b/.changeset/famous-cherries-joke.md
new file mode 100644
index 00000000000..32e0d78c2ed
--- /dev/null
+++ b/.changeset/famous-cherries-joke.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/fields-document': patch
+---
+
+Fixed z-index issue for toolbar of the document editor

From 242b87fbda882879b05eae97f4ac45e2bc0196e4 Mon Sep 17 00:00:00 2001
From: Ronald Aveling <luma.chroma@gmail.com>
Date: Thu, 14 Apr 2022 18:43:35 +1000
Subject: [PATCH 053/124] Updated issue creation template (#7466)

* Updated issue creation template

To align with new GitHub centred operations

* Whitespace fixes

* Align punctuation
---
 .github/ISSUE_TEMPLATE/1.Bug_report.md |  2 +-
 .github/ISSUE_TEMPLATE/config.yml      | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/1.Bug_report.md b/.github/ISSUE_TEMPLATE/1.Bug_report.md
index 99d72931dd6..2886e9dc134 100644
--- a/.github/ISSUE_TEMPLATE/1.Bug_report.md
+++ b/.github/ISSUE_TEMPLATE/1.Bug_report.md
@@ -1,6 +1,6 @@
 ---
 name: Bug report (GitHub Issues)
-about: Create a bug report for Keystone 6.
+about: Create a bug report for Keystone 6
 ---
 
 <!-- Please add steps to reproduce the problem -->
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 69b262d7676..813f4857e41 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,11 +1,14 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Questions and Chat (Slack)
+  - name: Ask a Question (GitHub)
+    url: https://github.com/keystonejs/keystone/discussions/categories/questions
+    about: Get answers from the Keystone community
+  - name: Request a Feature (GitHub)
+    url: https://github.com/keystonejs/keystone/discussions/categories/feature-requests
+    about: Share your improvement ideas with us!
+  - name: Hangout in the community Slack
     url: http://community.keystonejs.com/
-    about: Join the Keystone community Slack – a place to ask questions, share ideas, and connect to the latest announcements.
-  - name: Feature request (GitHub Discussions)
-    url: https://github.com/keystonejs/keystone/discussions
-    about: Share your feature requests and ideas with us!
+    about: A place to share ideas and meet other Keystone devs
   - name: Keystone 5
     url: https://github.com/keystonejs/keystone-5
-    about: Now in maintenance mode, please visit our dedicated Keystone 5 repository for support.
+    about: Now in maintenance mode, please visit our dedicated Keystone 5 repository for support

From 23332da74012d9bd9b2f58b82f367e1c1fd33c75 Mon Sep 17 00:00:00 2001
From: Noorullah Ahmadzai <Noorullah.Ahmadzai76@gmail.com>
Date: Mon, 18 Apr 2022 06:40:24 +0430
Subject: [PATCH 054/124] typo (#7468)

---
 packages/core/src/fields/types/file/views/Field.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/fields/types/file/views/Field.tsx b/packages/core/src/fields/types/file/views/Field.tsx
index 19c50b17f02..57dfa3c1b20 100644
--- a/packages/core/src/fields/types/file/views/Field.tsx
+++ b/packages/core/src/fields/types/file/views/Field.tsx
@@ -178,7 +178,7 @@ function FileView({
       try {
         copy(value?.data.ref);
       } catch (e) {
-        addToast({ title: 'Faild to oopy to clipboard', tone: 'negative' });
+        addToast({ title: 'Faild to copy to clipboard', tone: 'negative' });
       }
 
       return;

From fdb6a7bff3dc2431112363c8bcd05bf2970dee27 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 19 Apr 2022 11:40:40 +1000
Subject: [PATCH 055/124] Error for an invalid defaultValue in a select field

---
 .../src/DocumentEditor/component-blocks/api.tsx              | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 5c7ceddda49..77093cee8ca 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -279,6 +279,11 @@ export const fields = {
     preview?: TypedPreviewComponent<FormFieldWithGraphQLField<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(
+        `A defaultValue of ${defaultValue} was provided to a select field but it does not match the value of one of the options provided`
+      );
+    }
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {

From cc96020cd931d9dbddd0ed8b2d4df51efb5b2dc6 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 19 Apr 2022 14:48:22 +1000
Subject: [PATCH 056/124] Type cleanup

---
 .../DocumentEditor/component-blocks/api.tsx   | 75 +++++++------------
 1 file changed, 26 insertions(+), 49 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 77093cee8ca..62a48457be0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -137,9 +137,6 @@ export interface ObjectField<
   preview?: PreviewComponent;
 }
 
-export type PreviewProps<Field extends ComponentPropField> =
-  ExtractPropFromComponentPropFieldForPreview<Field>;
-
 type StringOrBooleanToString<Val extends string | boolean> = Val extends string
   ? Val
   : Val extends true
@@ -569,12 +566,7 @@ export type ComponentBlock<
     }
 );
 
-type CastToComponentPropField<Prop> = Prop extends ComponentPropField ? Prop : never;
-
-export type ExtractPropFromComponentPropField<
-  Prop extends ComponentPropField,
-  ChildFieldType
-> = Prop extends ChildField
+type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop extends ChildField
   ? ChildFieldType
   : Prop extends FormField<infer Value, infer Options>
   ? {
@@ -586,12 +578,10 @@ export type ExtractPropFromComponentPropField<
   : Prop extends ObjectField<infer Value>
   ? {
       readonly fields: {
-        readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForPreview<Value[Key]>;
+        readonly [Key in keyof Value]: GenericPreviewProps<Value[Key], ChildFieldType>;
       };
       onChange(value: {
-        readonly [Key in keyof Value]?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
-          Value[Key]
-        >;
+        readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
       }): void;
       readonly field: Prop;
     }
@@ -601,14 +591,12 @@ export type ExtractPropFromComponentPropField<
         readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
         onChange<Discriminant extends DiscriminantField['defaultValue']>(
           discriminant: Discriminant,
-          value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
+          value?: InitialOrUpdateValueFromComponentPropField<
             GetFromKey<Values, DiscrimiantToString<Discriminant>>
           >
         ): void;
         readonly options: DiscriminantField['options'];
-        readonly value: ExtractPropFromComponentPropFieldForPreview<
-          CastToComponentPropField<Values[Key]>
-        >;
+        readonly value: GenericPreviewProps<Values[Key], ChildFieldType>;
         readonly field: Prop;
       };
     }[keyof Values]
@@ -628,20 +616,19 @@ export type ExtractPropFromComponentPropField<
   ? {
       readonly elements: readonly {
         id: string;
-        element: ExtractPropFromComponentPropFieldForPreview<ElementField>;
+        element: GenericPreviewProps<ElementField, ChildFieldType>;
       }[];
       readonly onChange: (
         value: readonly {
           id: string | undefined;
-          value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>;
+          value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
         }[]
       ) => void;
       readonly field: Prop;
     }
   : never;
 
-export type ExtractPropFromComponentPropFieldForPreview<Prop extends ComponentPropField> =
-  ExtractPropFromComponentPropField<Prop, ReactNode>;
+export type PreviewProps<Prop extends ComponentPropField> = GenericPreviewProps<Prop, ReactNode>;
 
 type GetFromKey<Obj, Key> = Key extends keyof Obj ? Obj[Key] : never;
 
@@ -651,24 +638,20 @@ type DiscrimiantToString<Discriminant extends string | boolean> = Discriminant e
   ? 'false'
   : Discriminant;
 
-export type ExtractPropFromComponentPropFieldForInitialOrUpdate<Prop extends ComponentPropField> =
+export type InitialOrUpdateValueFromComponentPropField<Prop extends ComponentPropField> =
   Prop extends ChildField
     ? undefined
     : Prop extends FormField<infer Value, any>
     ? Value | undefined
     : Prop extends ObjectField<infer Value>
     ? {
-        readonly [Key in keyof Value]?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
-          Value[Key]
-        >;
+        readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
       }
     : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
         readonly [Key in keyof Values]: {
           readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          readonly value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<
-            CastToComponentPropField<Values[Key]>
-          >;
+          readonly value?: InitialOrUpdateValueFromComponentPropField<Values[Key]>;
         };
       }[keyof Values]
     : Prop extends RelationshipField<infer Many>
@@ -678,7 +661,7 @@ export type ExtractPropFromComponentPropFieldForInitialOrUpdate<Prop extends Com
     : Prop extends ArrayField<infer ElementField>
     ? readonly {
         id: string | undefined;
-        value?: ExtractPropFromComponentPropFieldForInitialOrUpdate<ElementField>;
+        value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
       }[]
     : never;
 
@@ -693,8 +676,10 @@ type DiscriminantStringToDiscriminantValue<
     : never
   : DiscriminantString;
 
-export type ExtractPropFromComponentPropFieldForToolbar<Prop extends ComponentPropField> =
-  ExtractPropFromComponentPropField<Prop, undefined>;
+export type PreviewPropsForToolbar<Prop extends ComponentPropField> = GenericPreviewProps<
+  Prop,
+  undefined
+>;
 
 export type HydratedRelationshipData = {
   id: string;
@@ -725,9 +710,7 @@ export function component<
         chromeless: true;
         toolbar?: (props: {
           props: {
-            [Key in keyof PropsOption]: ExtractPropFromComponentPropFieldForToolbar<
-              PropsOption[Key]
-            >;
+            [Key in keyof PropsOption]: PreviewPropsForToolbar<PropsOption[Key]>;
           };
           onRemove(): void;
         }) => ReactElement;
@@ -736,9 +719,7 @@ export function component<
         chromeless?: false;
         toolbar?: (props: {
           props: {
-            [Key in keyof PropsOption]: ExtractPropFromComponentPropFieldForToolbar<
-              PropsOption[Key]
-            >;
+            [Key in keyof PropsOption]: PreviewPropsForToolbar<PropsOption[Key]>;
           };
           onShowEditMode(): void;
           onRemove(): void;
@@ -757,20 +738,18 @@ export const NotEditable = ({ children, ...props }: HTMLAttributes<HTMLDivElemen
 
 type Comp<Props> = (props: Props) => ReactElement | null;
 
-type ExtractPropFromComponentPropFieldForRendering<Prop extends ComponentPropField> =
+type ValueForRenderingFromComponentPropField<Prop extends ComponentPropField> =
   Prop extends ChildField
     ? ReactNode
     : Prop extends FormField<infer Value, any>
     ? Value
     : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForRendering<Value[Key]> }
+    ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
     : Prop extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
         readonly [Key in keyof Values]: {
           readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          readonly value: ExtractPropFromComponentPropFieldForRendering<
-            CastToComponentPropField<Values[Key]>
-          >;
+          readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
         };
       }[keyof Values]
     : Prop extends RelationshipField<infer Many>
@@ -778,7 +757,7 @@ type ExtractPropFromComponentPropFieldForRendering<Prop extends ComponentPropFie
       ? readonly HydratedRelationshipData[]
       : HydratedRelationshipData | null
     : Prop extends ArrayField<infer ElementField>
-    ? readonly ExtractPropFromComponentPropFieldForRendering<ElementField>[]
+    ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
     : never;
 
 export type ValueForComponentPropField<Prop extends ComponentPropField> = Prop extends ChildField
@@ -786,14 +765,12 @@ export type ValueForComponentPropField<Prop extends ComponentPropField> = Prop e
   : Prop extends FormField<infer Value, any>
   ? Value
   : Prop extends ObjectField<infer Value>
-  ? { readonly [Key in keyof Value]: ExtractPropFromComponentPropFieldForRendering<Value[Key]> }
+  ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
   : Prop extends ConditionalField<infer DiscriminantField, infer Values>
   ? {
       readonly [Key in keyof Values]: {
         readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-        readonly value: ExtractPropFromComponentPropFieldForRendering<
-          CastToComponentPropField<Values[Key]>
-        >;
+        readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
       };
     }[keyof Values]
   : Prop extends RelationshipField<infer Many>
@@ -801,11 +778,11 @@ export type ValueForComponentPropField<Prop extends ComponentPropField> = Prop e
     ? readonly HydratedRelationshipData[]
     : HydratedRelationshipData | null
   : Prop extends ArrayField<infer ElementField>
-  ? readonly ExtractPropFromComponentPropFieldForRendering<ElementField>[]
+  ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
   : never;
 
 type ExtractPropsForPropsForRendering<Props extends Record<string, ComponentPropField>> = {
-  readonly [Key in keyof Props]: ExtractPropFromComponentPropFieldForRendering<Props[Key]>;
+  readonly [Key in keyof Props]: ValueForRenderingFromComponentPropField<Props[Key]>;
 };
 
 export type InferRenderersForComponentBlocks<

From 775dc8d82df9b66ec289e031ee996b91dbb209a0 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 19 Apr 2022 22:10:07 +1000
Subject: [PATCH 057/124] fix(deps): update dependency @types/cookie to ^0.5.0
 (#7470)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 packages/core/package.json | 2 +-
 yarn.lock                  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index c2e9de41b3d..2502264889f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -56,7 +56,7 @@
     "@sindresorhus/slugify": "^1.1.2",
     "@types/apollo-upload-client": "14.1.0",
     "@types/bcryptjs": "^2.4.2",
-    "@types/cookie": "^0.4.1",
+    "@types/cookie": "^0.5.0",
     "@types/express": "^4.17.13",
     "@types/fs-extra": "^9.0.13",
     "@types/graphql-upload": "^8.0.7",
diff --git a/yarn.lock b/yarn.lock
index 9fef9bbdf5d..a343d67930c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2821,10 +2821,10 @@
   resolved "https://registry.yarnpkg.com/@types/content-disposition/-/content-disposition-0.5.4.tgz#de48cf01c79c9f1560bcfd8ae43217ab028657f8"
   integrity sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==
 
-"@types/cookie@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
-  integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
+"@types/cookie@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.5.0.tgz#14ebcd209f2555e341548c31128d4deb34dfb2b0"
+  integrity sha512-CJWHVHHupxBYfIlMM+qzXx4dRKIV1VzOm0cP3Wpqten8MDx1tK+y92YDXUshN1ONAfwodvKxDNkw35/pNs+izg==
 
 "@types/cookiejar@*":
   version "2.1.2"

From 02a8d6558a61fccb7466bd79f6f35eeb23205a10 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <413395+dcousens@users.noreply.github.com>
Date: Tue, 19 Apr 2022 22:17:06 +1000
Subject: [PATCH 058/124] Update example documentation (#7451)

* clarify root directory

* clarify root directory

* synchronise steps with other documentation
---
 examples-staging/ecommerce/README.md | 6 +++---
 examples/blog/README.md              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples-staging/ecommerce/README.md b/examples-staging/ecommerce/README.md
index af55feb8056..89b1613df06 100644
--- a/examples-staging/ecommerce/README.md
+++ b/examples-staging/ecommerce/README.md
@@ -12,8 +12,8 @@ Implementation and docs are WIP.
 
 To run the project locally:
 
-- Clone this repo
-- Run `yarn` in the root (this repo is a monorepo and uses yarn workspaces, so that will install everything you'll need)
-- Open this folder in your terminal and run `yarn dev`
+- Clone the https://github.com/keystonejs/keystone repository
+- Run `yarn` at the root directory of the repository [(we use yarn workspaces)](https://classic.yarnpkg.com/lang/en/docs/workspaces/)
+- Navigate to this directory and run `yarn dev`
 
 If everything works 🤞 the GraphQL Server and Admin UI will start on [localhost:3000](http://localhost:3000)
diff --git a/examples/blog/README.md b/examples/blog/README.md
index 14788d467d4..cdfe04a9603 100644
--- a/examples/blog/README.md
+++ b/examples/blog/README.md
@@ -6,7 +6,7 @@ Use it as a starting place for learning how to use Keystone.
 
 ## Instructions
 
-To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:
+To run this project, clone the Keystone repository locally, run `yarn` at the root of this repository, then navigate to this directory and run:
 
 ```shell
 yarn dev

From 0e1c65f0810a8ae39c19e05ea7e3e063a4d46d13 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 20 Apr 2022 10:14:15 +1000
Subject: [PATCH 059/124] Rename `id` to `key` in array fields

---
 .../basic/admin/fieldViews/Content.tsx        | 29 ++++----------
 .../DocumentEditor/component-blocks/api.tsx   |  6 +--
 .../component-blocks/array-field.test.tsx     |  7 +---
 ...ld-field-in-recursive-array-field.test.tsx |  5 +--
 .../component-blocks/form-from-preview.tsx    | 12 +++---
 .../DocumentEditor/component-blocks/index.tsx |  8 ++--
 .../component-blocks/initial-values.ts        | 26 +++++-------
 .../multi-child-field-in-array-field.test.tsx |  2 +-
 .../nested-array-field.test.tsx               |  8 ++--
 .../component-blocks/preview-props.test.ts    | 10 ++---
 .../component-blocks/preview-props.tsx        | 40 +++++++++----------
 .../DocumentEditor/component-blocks/utils.ts  |  4 +-
 .../with-component-blocks.tsx                 | 14 +++----
 .../DocumentEditor/primitives/sortable.tsx    | 18 ++++-----
 14 files changed, 81 insertions(+), 108 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 68cd85af2ad..89a0fae9b52 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -39,13 +39,11 @@ export const componentBlocks = {
           rows.onChange(
             rows.elements.map(element => {
               return {
-                id: element.id,
+                key: element.key,
                 value: [
-                  ...element.element.elements.map(element => {
-                    return { id: element.id };
-                  }),
+                  ...element.element.elements,
                   ...Array.from({ length: maxColumns - element.element.elements.length }, () => ({
-                    id: undefined,
+                    key: undefined,
                   })),
                 ],
               };
@@ -74,13 +72,8 @@ export const componentBlocks = {
                           props.fields.rows.onChange(
                             props.fields.rows.elements.map(element => {
                               return {
-                                id: element.id,
-                                value: [
-                                  ...element.element.elements.map(element => {
-                                    return { id: element.id };
-                                  }),
-                                  { id: undefined },
-                                ],
+                                key: element.key,
+                                value: [...element.element.elements, { key: undefined }],
                               };
                             })
                           );
@@ -97,10 +90,7 @@ export const componentBlocks = {
           <NotEditable>
             <div
               onClick={() => {
-                props.fields.rows.onChange([
-                  ...props.fields.rows.elements.map(x => ({ id: x.id })),
-                  { id: undefined },
-                ]);
+                props.fields.rows.onChange([...props.fields.rows.elements, { key: undefined }]);
               }}
             >
               <Button>Insert row</Button>
@@ -128,16 +118,13 @@ export const componentBlocks = {
     component: function MyList(props) {
       useEffect(() => {
         if (!props.fields.children.elements.length) {
-          props.fields.children.onChange([
-            ...props.fields.children.elements.map(x => ({ id: x.id })),
-            { id: undefined },
-          ]);
+          props.fields.children.onChange([...props.fields.children.elements, { key: undefined }]);
         }
       });
       return (
         <ul css={{ padding: 0 }}>
           {props.fields.children.elements.map(element => (
-            <li css={{ listStyle: 'none' }} key={element.id}>
+            <li css={{ listStyle: 'none' }} key={element.key}>
               <input
                 contentEditable="false"
                 css={{ marginRight: 8 }}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 62a48457be0..aa8c7dd2232 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -615,12 +615,12 @@ type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop
   : Prop extends ArrayField<infer ElementField>
   ? {
       readonly elements: readonly {
-        id: string;
+        key: string;
         element: GenericPreviewProps<ElementField, ChildFieldType>;
       }[];
       readonly onChange: (
         value: readonly {
-          id: string | undefined;
+          key: string | undefined;
           value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
         }[]
       ) => void;
@@ -660,7 +660,7 @@ export type InitialOrUpdateValueFromComponentPropField<Prop extends ComponentPro
       : HydratedRelationshipData | null
     : Prop extends ArrayField<infer ElementField>
     ? readonly {
-        id: string | undefined;
+        key: string | undefined;
         value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
       }[]
     : never;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 3369551936b..9848c12564c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -12,16 +12,13 @@ const list = component({
       'ul',
       null,
       props.fields.children.elements.map(x => {
-        return React.createElement('li', { key: x.id }, x.element.fields.content);
+        return React.createElement('li', { key: x.key }, x.element.fields.content);
       }),
       React.createElement(
         'button',
         {
           onClick: () =>
-            props.fields.children.onChange([
-              ...props.fields.children.elements.map(x => ({ id: x.id })),
-              { id: undefined },
-            ]),
+            props.fields.children.onChange([...props.fields.children.elements, { key: undefined }]),
         },
         'Insert'
       )
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index a13b0e95669..0e7496776ff 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -29,7 +29,7 @@ function List(props: PreviewProps<ListItems>): ReactElement {
     props.elements.map(x => {
       return React.createElement(
         'li',
-        { key: x.id },
+        { key: x.key },
         x.element.fields.content,
         React.createElement(List, x.element.fields.children)
       );
@@ -37,8 +37,7 @@ function List(props: PreviewProps<ListItems>): ReactElement {
     React.createElement(
       'button',
       {
-        onClick: () =>
-          props.onChange([...props.elements.map(x => ({ id: x.id })), { id: undefined }]),
+        onClick: () => props.onChange([...props.elements, { key: undefined }]),
       },
       'Insert'
     )
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 84542f31ddb..b0484dd6cd8 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
@@ -33,13 +33,13 @@ const fieldRenderers: {
       <Stack gap="medium">
         <SortableList {...props}>
           {props.elements.map(val => {
-            return <SortableItemInForm key={val.id} {...val} />;
+            return <SortableItemInForm elementKey={val.key} {...val} />;
           })}
         </SortableList>
         <Button
           autoFocus={props.autoFocus}
           onClick={() => {
-            props.onChange([...props.elements.map(x => ({ id: x.id })), { id: undefined }]);
+            props.onChange([...props.elements, { key: undefined }]);
           }}
         >
           Add
@@ -170,16 +170,14 @@ export const FormValueContentFromPreview = memo(function FormValueContentFromPre
 });
 
 const SortableItemInForm = memo(function SortableItemInForm(
-  props: PreviewProps<ArrayField<ComponentPropField>>['elements'][number]
+  props: PreviewProps<ComponentPropField> & { elementKey: string }
 ) {
   return (
-    <SortableItem id={props.id}>
+    <SortableItem elementKey={props.elementKey}>
       <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
         <DragHandle />
       </Stack>
-      {isNonChildFieldPreviewProps(props.element) && (
-        <FormValueContentFromPreview {...props.element} />
-      )}
+      {isNonChildFieldPreviewProps(props) && <FormValueContentFromPreview {...props} />}
     </SortableItem>
   );
 });
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 0c48ab4119d..f514d786dbb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -31,7 +31,7 @@ import {
 import { assert } from '../utils';
 import { areArraysEqual } from '../document-features-normalization';
 import { clientSideValidateProp, getFieldAtPropPath, ReadonlyPropPath } from './utils';
-import { ChildrenByPathContext, getElementIdsForArrayValue } from './preview-props';
+import { ChildrenByPathContext, getKeysForArrayValue } from './preview-props';
 import { getInitialPropsValue, getInitialValue } from './initial-values';
 import { FormValue } from './edit-mode';
 import { createGetPreviewProps } from './preview-props';
@@ -490,7 +490,7 @@ function propPathWithIndiciesToKeys(propPath: ReadonlyPropPath, val: any): reado
       val = val[key];
       return key;
     }
-    const keys = getElementIdsForArrayValue(val);
+    const keys = getKeysForArrayValue(val);
     val = val[key];
     return keys[key];
   });
@@ -546,8 +546,8 @@ function findChildPropPathsWithPrevious(
     }
     case 'array': {
       let paths: ChildPropPathWithPrevious[] = [];
-      const prevKeys = getElementIdsForArrayValue(prevValue);
-      const keys = getElementIdsForArrayValue(value);
+      const prevKeys = getKeysForArrayValue(prevValue);
+      const keys = getKeysForArrayValue(value);
       for (const [i, val] of (value as unknown[]).entries()) {
         const key = keys[i];
         const prevIdx = prevKeys.indexOf(key);
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 7c27555e0d5..9cacc3b9301 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -1,9 +1,5 @@
 import { ComponentPropField, ComponentBlock } from '../../component-blocks';
-import {
-  getElementIdsForArrayValue,
-  getNewArrayElementId,
-  setElementIdsForArrayValue,
-} from './preview-props';
+import { getKeysForArrayValue, getNewArrayElementKey, setKeysForArrayValue } from './preview-props';
 import { assertNever, findChildPropPaths } from './utils';
 
 export function getInitialValue(type: string, componentBlock: ComponentBlock) {
@@ -129,29 +125,29 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
     }
     case 'array': {
       const currentArrVal = currentValue as unknown[];
-      const newVal = updater as { id: string | undefined; value: unknown }[];
+      const newVal = updater as { key: string | undefined; value: unknown }[];
       const uniqueKeys = new Set();
       for (const x of newVal) {
-        if (x.id !== undefined) {
-          if (uniqueKeys.has(x.id)) {
+        if (x.key !== undefined) {
+          if (uniqueKeys.has(x.key)) {
             throw new Error('Array elements must have unique ids');
           }
-          uniqueKeys.add(x.id);
+          uniqueKeys.add(x.key);
         }
       }
       const keys = newVal.map(x => {
-        if (x.id !== undefined) {
-          return x.id;
+        if (x.key !== undefined) {
+          return x.key;
         }
-        let elementId = getNewArrayElementId();
+        let elementId = getNewArrayElementKey();
         // just in case someone gives an id that is above our counter
         while (uniqueKeys.has(elementId)) {
-          elementId = getNewArrayElementId();
+          elementId = getNewArrayElementKey();
         }
         uniqueKeys.add(elementId);
         return elementId;
       });
-      const prevKeys = getElementIdsForArrayValue(currentArrVal);
+      const prevKeys = getKeysForArrayValue(currentArrVal);
       const prevValuesByKey = new Map(
         currentArrVal.map((value, i) => {
           return [prevKeys[i], value];
@@ -164,7 +160,7 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
         }
         return getInitialPropsValueFromInitializer(prop.element, x.value);
       });
-      setElementIdsForArrayValue(val, keys);
+      setKeysForArrayValue(val, keys);
       return val;
     }
   }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index 7c61209fc82..aba373185fa 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -14,7 +14,7 @@ const qAndA = component({
       props.fields.children.elements.map(x => {
         return React.createElement(
           'div',
-          { key: x.id },
+          { key: x.key },
           React.createElement('h1', null, x.element.fields.question),
           React.createElement('p', null, x.element.fields.answer)
         );
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index ad14bc1c146..45d970e7708 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -14,9 +14,9 @@ const table = component({
       props.fields.children.elements.map(x => {
         return React.createElement(
           Fragment,
-          { key: x.id },
+          { key: x.key },
           x.element.elements.map(x => {
-            return React.createElement(Fragment, { key: x.id }, x.element.fields.content);
+            return React.createElement(Fragment, { key: x.key }, x.element.fields.content);
           })
         );
       })
@@ -282,8 +282,8 @@ test('add to multiple in child field in nested array', () => {
   );
 
   previewProps.fields.children.elements[0].element.onChange([
-    ...previewProps.fields.children.elements[0].element.elements.map(x => ({ id: x.id })),
-    { id: undefined },
+    ...previewProps.fields.children.elements[0].element.elements,
+    { key: undefined },
   ]);
   expect(editor).toMatchInlineSnapshot(`
     <editor>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
index dcd9c306e68..aa9d78edcc7 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
@@ -49,15 +49,15 @@ test("array fields don't keep the props of an array item around after removing t
   });
   let props = getPreviewProps(val);
   props.onChange([
-    { id: '1', value: 'blah' },
-    { id: '2', value: 'blah2' },
+    { key: '1', value: 'blah' },
+    { key: '2', value: 'blah2' },
   ]);
 
   let elementsBeforeChange = props.elements;
-  props.onChange([{ id: '2' }]);
+  props.onChange([{ key: '2' }]);
   expect(props.elements[0].element).toBe(elementsBeforeChange[1].element);
   expect(props.elements[0]).toBe(elementsBeforeChange[1]);
-  props.onChange([{ id: '2' }, { id: '1', value: 'blah' }]);
+  props.onChange([{ key: '2' }, { key: '1', value: 'blah' }]);
   expect(props.elements[1].element).not.toBe(elementsBeforeChange[0].element);
   expect(props.elements[1]).not.toBe(elementsBeforeChange[0]);
 });
@@ -79,7 +79,7 @@ test('the props of two array fields in a conditional field change when the discr
   props = getPreviewProps(val);
   assert(props.discriminant === true);
   expect(prevArrayOnChange).not.toBe(props.value.onChange);
-  props.value.onChange([{ id: undefined, value: [{ id: undefined, value: 'blah' }] }]);
+  props.value.onChange([{ key: undefined, value: [{ key: undefined, value: 'blah' }] }]);
   expect(props.value.elements).toHaveLength(1);
   expect(props.value.elements[0].element.elements).toHaveLength(1);
   expect(props.value.elements[0].element.elements[0].element.value).toEqual('blah');
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index bf4987ead82..27602a8f893 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -13,25 +13,25 @@ import {
 } from './api';
 import { updateValue } from './initial-values';
 
-const arrayValuesToElementIds = new WeakMap<readonly unknown[], readonly string[]>();
+const arrayValuesToElementKeys = new WeakMap<readonly unknown[], readonly string[]>();
 
 let counter = 0;
 
-export function getElementIdsForArrayValue(value: readonly unknown[]) {
-  if (!arrayValuesToElementIds.has(value)) {
-    arrayValuesToElementIds.set(value, Array.from({ length: value.length }, getNewArrayElementId));
+export function getKeysForArrayValue(value: readonly unknown[]) {
+  if (!arrayValuesToElementKeys.has(value)) {
+    arrayValuesToElementKeys.set(
+      value,
+      Array.from({ length: value.length }, getNewArrayElementKey)
+    );
   }
-  return arrayValuesToElementIds.get(value)!;
+  return arrayValuesToElementKeys.get(value)!;
 }
 
-export function setElementIdsForArrayValue(
-  value: readonly unknown[],
-  elementIds: readonly string[]
-) {
-  arrayValuesToElementIds.set(value, elementIds);
+export function setKeysForArrayValue(value: readonly unknown[], elementIds: readonly string[]) {
+  arrayValuesToElementKeys.set(value, elementIds);
 }
 
-export function getNewArrayElementId() {
+export function getNewArrayElementKey() {
   return (counter++).toString();
 }
 
@@ -72,10 +72,10 @@ const memoizedInfoForProp = castToMemoizedInfoForProp({
         string,
         {
           onChange: (cb: (val: unknown) => unknown) => void;
-          inner: { id: string; element: unknown };
+          inner: { key: string; element: unknown };
         }
       >(),
-      onChange(updater: readonly { id?: string; value?: unknown }[]) {
+      onChange(updater: readonly { key?: string; value?: unknown }[]) {
         onChange(value => updateValue(prop, value, updater));
       },
     };
@@ -179,9 +179,9 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
     },
     array(prop, value, memoized, path, getInnerProp) {
       const arrayValue = value as readonly unknown[];
-      const keys = getElementIdsForArrayValue(arrayValue);
+      const keys = getKeysForArrayValue(arrayValue);
 
-      const unusedKeys = new Set(getElementIdsForArrayValue(value));
+      const unusedKeys = new Set(getKeysForArrayValue(value));
 
       const props: PreviewProps<ArrayField<ComponentPropField>> = {
         elements: arrayValue.map((val, i) => {
@@ -190,18 +190,18 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
           const element = getOrInsert(memoized.inner, key, () => {
             const onChange = (val: (val: unknown) => unknown) => {
               memoized.rawOnChange(prev => {
-                const keys = getElementIdsForArrayValue(prev as readonly unknown[]);
+                const keys = getKeysForArrayValue(prev as readonly unknown[]);
                 const index = keys.indexOf(key);
                 const newValue = [...(prev as readonly unknown[])];
                 newValue[index] = val(newValue[index]);
-                setElementIdsForArrayValue(newValue, keys);
+                setKeysForArrayValue(newValue, keys);
                 return newValue;
               });
             };
             return {
               inner: {
                 element: getInnerProp(prop.element, val, onChange, key),
-                id: key,
+                key,
               },
               onChange,
             };
@@ -210,10 +210,10 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
           if (element.inner.element !== currentInnerProp) {
             element.inner = {
               element: currentInnerProp,
-              id: key,
+              key,
             };
           }
-          return element.inner as { id: string; element: typeof currentInnerProp };
+          return element.inner as { key: string; element: typeof currentInnerProp };
         }),
         field: prop,
         onChange: memoized.onChange,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 57ff41399be..21b63c283f7 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -3,7 +3,7 @@ import { DocumentFeatures } from '../../views';
 import { DocumentFeaturesForNormalization } from '../document-features-normalization';
 import { assert, Mark } from '../utils';
 import { ChildField } from './api';
-import { getElementIdsForArrayValue, setElementIdsForArrayValue } from './preview-props';
+import { getKeysForArrayValue, setKeysForArrayValue } from './preview-props';
 
 type PathToChildFieldWithOption = { path: ReadonlyPropPath; options: ChildField['options'] };
 
@@ -346,7 +346,7 @@ export function replaceValueAtPropPath(
   if (prop.kind === 'array') {
     const prevVal = value as unknown[];
     const newVal = [...prevVal];
-    setElementIdsForArrayValue(newVal, getElementIdsForArrayValue(prevVal));
+    setKeysForArrayValue(newVal, getKeysForArrayValue(prevVal));
     newVal[key as number] = replaceValueAtPropPath(
       prop.element,
       newVal[key as number],
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 495b9425d62..b3cef7bbc33 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -24,11 +24,7 @@ import {
 } from './utils';
 import { getInitialPropsValue } from './initial-values';
 import { ArrayField } from './api';
-import {
-  getElementIdsForArrayValue,
-  getNewArrayElementId,
-  setElementIdsForArrayValue,
-} from './preview-props';
+import { getKeysForArrayValue, getNewArrayElementKey, setKeysForArrayValue } from './preview-props';
 
 function getAncestorComponentBlock(editor: Editor) {
   if (editor.selection) {
@@ -364,15 +360,15 @@ export function withComponentBlocks(
               }
             }
             const arrVal = getValueAtPropPath(node.props, propPath) as unknown[];
-            const prevKeys = getElementIdsForArrayValue(arrVal);
+            const prevKeys = getKeysForArrayValue(arrVal);
             const prevKeysSet = new Set(prevKeys);
             const alreadyUsedIndicies = new Set<number>();
             const newVal: unknown[] = [];
             const newKeys: string[] = [];
             const getNewKey = () => {
-              let key = getNewArrayElementId();
+              let key = getNewArrayElementKey();
               while (prevKeysSet.has(key)) {
-                key = getNewArrayElementId();
+                key = getNewArrayElementKey();
               }
               return key;
             };
@@ -393,7 +389,7 @@ export function withComponentBlocks(
                 );
               }
             }
-            setElementIdsForArrayValue(newVal, newKeys);
+            setKeysForArrayValue(newVal, newKeys);
             if (!areArraysEqual(arrVal, newVal)) {
               const transformedProps = replaceValueAtPropPath(
                 rootProp,
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
index f29110fb861..cfdd41646ef 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
@@ -26,8 +26,8 @@ import { ToolbarButton } from '.';
 const RemoveContext = createContext<null | ((index: number) => void)>(null);
 
 export function SortableList(props: {
-  onChange: (elements: readonly { id: string }[]) => void;
-  elements: readonly { id: string }[];
+  onChange: (elements: readonly { key: string }[]) => void;
+  elements: readonly { key: string }[];
   children: ReactNode;
 }) {
   const sensors = useSensors(
@@ -45,7 +45,7 @@ export function SortableList(props: {
   const { onChange } = props;
   const onRemove = useCallback(
     (index: number) => {
-      onChange(elementsRef.current.filter((_, i) => i !== index).map(x => ({ id: x.id })));
+      onChange(elementsRef.current.filter((_, i) => i !== index).map(x => ({ key: x.key })));
     },
     [onChange]
   );
@@ -58,18 +58,18 @@ export function SortableList(props: {
         onDragEnd={({ over, active }) => {
           if (over && over.id !== active.id) {
             const activeIndex = props.elements.findIndex(
-              x => (typeof x === 'string' ? x : x.id) === active.id
+              x => (typeof x === 'string' ? x : x.key) === active.id
             );
             const overIndex = props.elements.findIndex(
-              x => (typeof x === 'string' ? x : x.id) === over.id
+              x => (typeof x === 'string' ? x : x.key) === over.id
             );
-            const newValue = arrayMove(props.elements as { id: string }[], activeIndex, overIndex);
+            const newValue = arrayMove(props.elements as { key: string }[], activeIndex, overIndex);
             props.onChange(newValue);
           }
         }}
       >
         <SortableContext
-          items={props.elements as (string | { id: string })[]}
+          items={useMemo(() => props.elements.map(x => x.key), [props.elements])}
           strategy={verticalListSortingStrategy}
         >
           <ul
@@ -95,10 +95,10 @@ const DragHandleListenersContext = createContext<Pick<
   'listeners' | 'isDragging' | 'attributes' | 'index'
 > | null>(null);
 
-export function SortableItem(props: { id: string; children: ReactNode }) {
+export function SortableItem(props: { elementKey: string; children: ReactNode }) {
   const { attributes, isDragging, listeners, setNodeRef, transform, transition, index } =
     useSortable({
-      id: props.id,
+      id: props.elementKey,
     });
 
   const style = {

From 92563372c3f193c72468727f95c98c9542dc0ab1 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 20 Apr 2022 10:27:47 +1000
Subject: [PATCH 060/124] Align preview props for child field with other fields

---
 .../basic/admin/fieldViews/Content.tsx        | 20 ++++++++--------
 .../DocumentEditor/component-blocks/api.tsx   |  5 +++-
 .../component-blocks/array-field.test.tsx     |  2 +-
 ...ld-field-in-recursive-array-field.test.tsx |  2 +-
 .../component-blocks/form-from-preview.tsx    |  2 +-
 .../insertion-and-preview-props.test.tsx      | 23 ++++++++++++++-----
 .../multi-child-field-in-array-field.test.tsx |  4 ++--
 .../nested-array-field.test.tsx               |  2 +-
 .../component-blocks/preview-props.tsx        |  2 +-
 .../markdown-link-shortcut.test.tsx           |  4 ++--
 10 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 89a0fae9b52..07aecd604b5 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -62,7 +62,7 @@ export const componentBlocks = {
                     {row.element.elements.map((column, i) => {
                       return (
                         <td key={i} css={{ border: '1px solid black' }}>
-                          {column.element.fields.content}
+                          {column.element.fields.content.element}
                         </td>
                       );
                     })}
@@ -137,7 +137,7 @@ export const componentBlocks = {
                   textDecoration: element.element.fields.done.value ? 'line-through' : undefined,
                 }}
               >
-                {element.element.fields.content}
+                {element.element.fields.content.element}
               </span>
             </li>
           ))}
@@ -183,7 +183,7 @@ export const componentBlocks = {
               textShadow: '0px 1px 3px black',
             }}
           >
-            {props.fields.title}
+            {props.fields.title.element}
           </div>
           <div
             css={{
@@ -195,7 +195,7 @@ export const componentBlocks = {
               textShadow: '0px 1px 3px black',
             }}
           >
-            {props.fields.content}
+            {props.fields.content.element}
           </div>
           {props.fields.cta.discriminant ? (
             <div
@@ -210,7 +210,7 @@ export const componentBlocks = {
                 padding: '12px 16px',
               }}
             >
-              {props.fields.cta.value.fields.text}
+              {props.fields.cta.value.fields.text.element}
             </div>
           ) : null}
         </div>
@@ -244,7 +244,7 @@ export const componentBlocks = {
       props.fields.something.discriminant ? (
         <NotEditable>Is void</NotEditable>
       ) : (
-        <div>{props.fields.something.value}</div>
+        <div>{props.fields.something.value.element}</div>
       ),
     props: {
       something: fields.conditional(fields.checkbox({ label: 'Is void' }), {
@@ -258,7 +258,7 @@ export const componentBlocks = {
     component: props => {
       return (
         <div>
-          <h1>{props.fields.title}</h1>
+          <h1>{props.fields.title.element}</h1>
           <NotEditable>
             <ul>
               {props.fields.authors.value.map((author, i) => {
@@ -338,7 +338,7 @@ export const componentBlocks = {
               <intentConfig.icon />
             </div>
           </NotEditable>
-          <div css={{ flex: 1 }}>{props.fields.content}</div>
+          <div css={{ flex: 1 }}>{props.fields.content.element}</div>
         </div>
       );
     },
@@ -419,10 +419,10 @@ export const componentBlocks = {
             },
           }}
         >
-          <div css={{ fontStyle: 'italic', color: '#4A5568' }}>{props.fields.content}</div>
+          <div css={{ fontStyle: 'italic', color: '#4A5568' }}>{props.fields.content.element}</div>
           <div css={{ fontWeight: 'bold', color: '#47546b' }}>
             <NotEditable>— </NotEditable>
-            {props.fields.attribution}
+            {props.fields.attribution.element}
           </div>
         </div>
       );
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index aa8c7dd2232..62699960c49 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -567,7 +567,10 @@ export type ComponentBlock<
 );
 
 type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop extends ChildField
-  ? ChildFieldType
+  ? {
+      readonly element: ChildFieldType;
+      readonly field: Prop;
+    }
   : Prop extends FormField<infer Value, infer Options>
   ? {
       readonly value: Value;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 9848c12564c..6f58f6af7ea 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -12,7 +12,7 @@ const list = component({
       'ul',
       null,
       props.fields.children.elements.map(x => {
-        return React.createElement('li', { key: x.key }, x.element.fields.content);
+        return React.createElement('li', { key: x.key }, x.element.fields.content.element);
       }),
       React.createElement(
         'button',
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index 0e7496776ff..461bcf85398 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -30,7 +30,7 @@ function List(props: PreviewProps<ListItems>): ReactElement {
       return React.createElement(
         'li',
         { key: x.key },
-        x.element.fields.content,
+        x.element.fields.content.element,
         React.createElement(List, x.element.fields.children)
       );
     }),
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 b0484dd6cd8..d4080565439 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
@@ -33,7 +33,7 @@ const fieldRenderers: {
       <Stack gap="medium">
         <SortableList {...props}>
           {props.elements.map(val => {
-            return <SortableItemInForm elementKey={val.key} {...val} />;
+            return <SortableItemInForm elementKey={val.key} key={val.key} {...val.element} />;
           })}
         </SortableList>
         <Button
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index bd18f83bfa6..dd9b3665d79 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -52,10 +52,10 @@ const componentBlocks = {
       return React.createElement(
         'div',
         null,
-        props.fields.object.fields.block,
-        props.fields.object.fields.inline,
+        props.fields.object.fields.block.element,
+        props.fields.object.fields.inline.element,
         props.fields.object.fields.conditional.discriminant &&
-          props.fields.object.fields.conditional.value
+          props.fields.object.fields.conditional.value.element
       );
     },
     label: 'Complex',
@@ -231,7 +231,10 @@ test('preview props api', () => {
       object: {
         field: componentBlocks.complex.props.object,
         fields: {
-          block: React.createElement(ChildFieldEditable, { path: ['object', 'block'] }),
+          block: {
+            element: React.createElement(ChildFieldEditable, { path: ['object', 'block'] }),
+            field: componentBlocks.complex.props.object.value.block,
+          },
           conditional: {
             discriminant: false,
             field: componentBlocks.complex.props.object.value.conditional,
@@ -258,7 +261,10 @@ test('preview props api', () => {
               value: '',
             },
           },
-          inline: React.createElement(ChildFieldEditable, { path: ['object', 'inline'] }),
+          inline: {
+            element: React.createElement(ChildFieldEditable, { path: ['object', 'inline'] }),
+            field: componentBlocks.complex.props.object.value.inline,
+          },
           many: {
             field: componentBlocks.complex.props.object.value.many,
             value: [],
@@ -370,7 +376,12 @@ test('preview props conditional change', () => {
     discriminant: true,
     onChange: expect.any(Function),
     options: undefined,
-    value: React.createElement(ChildFieldEditable, { path: ['object', 'conditional', 'value'] }),
+    value: {
+      element: React.createElement(ChildFieldEditable, {
+        path: ['object', 'conditional', 'value'],
+      }),
+      field: componentBlocks.complex.props.object.value.conditional.values.true,
+    },
   };
   expect(getPreviewProps(editor).fields.object.fields.conditional).toEqual(
     expectedConditionalPreviewProps
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index aba373185fa..4d2d301ae43 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -15,8 +15,8 @@ const qAndA = component({
         return React.createElement(
           'div',
           { key: x.key },
-          React.createElement('h1', null, x.element.fields.question),
-          React.createElement('p', null, x.element.fields.answer)
+          React.createElement('h1', null, x.element.fields.question.element),
+          React.createElement('p', null, x.element.fields.answer.element)
         );
       })
     ),
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 45d970e7708..0c14e8e0ff8 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -16,7 +16,7 @@ const table = component({
           Fragment,
           { key: x.key },
           x.element.elements.map(x => {
-            return React.createElement(Fragment, { key: x.key }, x.element.fields.content);
+            return React.createElement(Fragment, { key: x.key }, x.element.fields.content.element);
           })
         );
       })
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 27602a8f893..f77911e8dc3 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -156,7 +156,7 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
       };
     },
     child(prop, value, onChange, path) {
-      return <ChildFieldEditable path={path} />;
+      return { element: <ChildFieldEditable path={path} />, field: prop };
     },
     object(prop, value, memoized, path, getInnerProp) {
       const fields: Record<string, PreviewProps<ComponentPropField>> = {};
diff --git a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
index c5e84b51d4e..15b9da97fd4 100644
--- a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
@@ -264,7 +264,7 @@ test("link shortcut doesn't do anything when inside of a component block with li
     {
       componentBlocks: {
         comp: component({
-          component: props => React.createElement('div', null, props.fields.child),
+          component: props => React.createElement('div', null, props.fields.child.element),
           label: '',
           props: { child: fields.child({ kind: 'inline', placeholder: '' }) },
         }),
@@ -317,7 +317,7 @@ test('link shortcut works when inside of a component block with links option inh
     {
       componentBlocks: {
         comp: component({
-          component: props => React.createElement('div', null, props.fields.child),
+          component: props => React.createElement('div', null, props.fields.child.element),
           label: '',
           props: { child: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }) },
         }),

From ab17dc739b124e6d255ea4b28acb73bcd00f4eaa Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 20 Apr 2022 10:36:09 +1000
Subject: [PATCH 061/124] Flatten accessing elements in an array field

---
 .../basic/admin/fieldViews/Content.tsx        | 24 +++++++++----------
 .../DocumentEditor/component-blocks/api.tsx   |  7 +++---
 .../component-blocks/array-field.test.tsx     |  2 +-
 ...ld-field-in-recursive-array-field.test.tsx |  4 ++--
 .../component-blocks/form-from-preview.tsx    |  2 +-
 .../multi-child-field-in-array-field.test.tsx |  4 ++--
 .../nested-array-field.test.tsx               |  8 +++----
 .../component-blocks/preview-props.test.ts    |  8 +++----
 .../component-blocks/preview-props.tsx        | 18 ++++++++------
 9 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 07aecd604b5..9fb6dd3565f 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -31,18 +31,18 @@ export const componentBlocks = {
         let maxColumns = 1;
         const rows = props.fields.rows;
         for (const row of rows.elements) {
-          if (row.element.elements.length > maxColumns) {
-            maxColumns = row.element.elements.length;
+          if (row.elements.length > maxColumns) {
+            maxColumns = row.elements.length;
           }
         }
-        if (rows.elements.some(x => x.element.elements.length !== maxColumns)) {
+        if (rows.elements.some(x => x.elements.length !== maxColumns)) {
           rows.onChange(
             rows.elements.map(element => {
               return {
                 key: element.key,
                 value: [
-                  ...element.element.elements,
-                  ...Array.from({ length: maxColumns - element.element.elements.length }, () => ({
+                  ...element.elements,
+                  ...Array.from({ length: maxColumns - element.elements.length }, () => ({
                     key: undefined,
                   })),
                 ],
@@ -59,10 +59,10 @@ export const componentBlocks = {
               {props.fields.rows.elements.map((row, i) => {
                 return (
                   <tr key={i} css={{ border: '1px solid black' }}>
-                    {row.element.elements.map((column, i) => {
+                    {row.elements.map((column, i) => {
                       return (
                         <td key={i} css={{ border: '1px solid black' }}>
-                          {column.element.fields.content.element}
+                          {column.fields.content.element}
                         </td>
                       );
                     })}
@@ -73,7 +73,7 @@ export const componentBlocks = {
                             props.fields.rows.elements.map(element => {
                               return {
                                 key: element.key,
-                                value: [...element.element.elements, { key: undefined }],
+                                value: [...element.elements, { key: undefined }],
                               };
                             })
                           );
@@ -129,15 +129,15 @@ export const componentBlocks = {
                 contentEditable="false"
                 css={{ marginRight: 8 }}
                 type="checkbox"
-                checked={element.element.fields.done.value}
-                onChange={event => element.element.fields.done.onChange(event.target.checked)}
+                checked={element.fields.done.value}
+                onChange={event => element.fields.done.onChange(event.target.checked)}
               />
               <span
                 style={{
-                  textDecoration: element.element.fields.done.value ? 'line-through' : undefined,
+                  textDecoration: element.fields.done.value ? 'line-through' : undefined,
                 }}
               >
-                {element.element.fields.content.element}
+                {element.fields.content.element}
               </span>
             </li>
           ))}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 62699960c49..5a8c52436bc 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -617,10 +617,9 @@ type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop
     }
   : Prop extends ArrayField<infer ElementField>
   ? {
-      readonly elements: readonly {
-        key: string;
-        element: GenericPreviewProps<ElementField, ChildFieldType>;
-      }[];
+      readonly elements: readonly (GenericPreviewProps<ElementField, ChildFieldType> & {
+        readonly key: string;
+      })[];
       readonly onChange: (
         value: readonly {
           key: string | undefined;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 6f58f6af7ea..13f817c00ec 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -12,7 +12,7 @@ const list = component({
       'ul',
       null,
       props.fields.children.elements.map(x => {
-        return React.createElement('li', { key: x.key }, x.element.fields.content.element);
+        return React.createElement('li', { key: x.key }, x.fields.content.element);
       }),
       React.createElement(
         'button',
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index 461bcf85398..ff83687149f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -30,8 +30,8 @@ function List(props: PreviewProps<ListItems>): ReactElement {
       return React.createElement(
         'li',
         { key: x.key },
-        x.element.fields.content.element,
-        React.createElement(List, x.element.fields.children)
+        x.fields.content.element,
+        React.createElement(List, x.fields.children)
       );
     }),
     React.createElement(
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 d4080565439..b0484dd6cd8 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
@@ -33,7 +33,7 @@ const fieldRenderers: {
       <Stack gap="medium">
         <SortableList {...props}>
           {props.elements.map(val => {
-            return <SortableItemInForm elementKey={val.key} key={val.key} {...val.element} />;
+            return <SortableItemInForm elementKey={val.key} {...val} />;
           })}
         </SortableList>
         <Button
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index 4d2d301ae43..59d0c583e2a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -15,8 +15,8 @@ const qAndA = component({
         return React.createElement(
           'div',
           { key: x.key },
-          React.createElement('h1', null, x.element.fields.question.element),
-          React.createElement('p', null, x.element.fields.answer.element)
+          React.createElement('h1', null, x.fields.question.element),
+          React.createElement('p', null, x.fields.answer.element)
         );
       })
     ),
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 0c14e8e0ff8..9d3fb7efdf7 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -15,8 +15,8 @@ const table = component({
         return React.createElement(
           Fragment,
           { key: x.key },
-          x.element.elements.map(x => {
-            return React.createElement(Fragment, { key: x.key }, x.element.fields.content.element);
+          x.elements.map(x => {
+            return React.createElement(Fragment, { key: x.key }, x.fields.content.element);
           })
         );
       })
@@ -281,8 +281,8 @@ test('add to multiple in child field in nested array', () => {
     (editor.children[0] as any).props
   );
 
-  previewProps.fields.children.elements[0].element.onChange([
-    ...previewProps.fields.children.elements[0].element.elements,
+  previewProps.fields.children.elements[0].onChange([
+    ...previewProps.fields.children.elements[0].elements,
     { key: undefined },
   ]);
   expect(editor).toMatchInlineSnapshot(`
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
index aa9d78edcc7..2012c0bb90a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
@@ -55,10 +55,10 @@ test("array fields don't keep the props of an array item around after removing t
 
   let elementsBeforeChange = props.elements;
   props.onChange([{ key: '2' }]);
-  expect(props.elements[0].element).toBe(elementsBeforeChange[1].element);
+  expect(props.elements[0]).toBe(elementsBeforeChange[1]);
   expect(props.elements[0]).toBe(elementsBeforeChange[1]);
   props.onChange([{ key: '2' }, { key: '1', value: 'blah' }]);
-  expect(props.elements[1].element).not.toBe(elementsBeforeChange[0].element);
+  expect(props.elements[1]).not.toBe(elementsBeforeChange[0]);
   expect(props.elements[1]).not.toBe(elementsBeforeChange[0]);
 });
 
@@ -81,6 +81,6 @@ test('the props of two array fields in a conditional field change when the discr
   expect(prevArrayOnChange).not.toBe(props.value.onChange);
   props.value.onChange([{ key: undefined, value: [{ key: undefined, value: 'blah' }] }]);
   expect(props.value.elements).toHaveLength(1);
-  expect(props.value.elements[0].element.elements).toHaveLength(1);
-  expect(props.value.elements[0].element.elements[0].element.value).toEqual('blah');
+  expect(props.value.elements[0].elements).toHaveLength(1);
+  expect(props.value.elements[0].elements[0].value).toEqual('blah');
 });
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index f77911e8dc3..54ef3d811eb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -72,7 +72,8 @@ const memoizedInfoForProp = castToMemoizedInfoForProp({
         string,
         {
           onChange: (cb: (val: unknown) => unknown) => void;
-          inner: { key: string; element: unknown };
+          elementWithKey: { key: string } & PreviewProps<ComponentPropField>;
+          element: PreviewProps<ComponentPropField>;
         }
       >(),
       onChange(updater: readonly { key?: string; value?: unknown }[]) {
@@ -198,22 +199,25 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
                 return newValue;
               });
             };
+            const element = getInnerProp(prop.element, val, onChange, key);
             return {
-              inner: {
-                element: getInnerProp(prop.element, val, onChange, key),
+              element,
+              elementWithKey: {
+                ...element,
                 key,
               },
               onChange,
             };
           });
           const currentInnerProp = getInnerProp(prop.element, val, element.onChange, key);
-          if (element.inner.element !== currentInnerProp) {
-            element.inner = {
-              element: currentInnerProp,
+          if (element.element !== currentInnerProp) {
+            element.element = currentInnerProp;
+            element.elementWithKey = {
+              ...currentInnerProp,
               key,
             };
           }
-          return element.inner as { key: string; element: typeof currentInnerProp };
+          return element.elementWithKey;
         }),
         field: prop,
         onChange: memoized.onChange,

From 1d259229116f85520939eba656eebdc7584679c0 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 20 Apr 2022 10:47:28 +1000
Subject: [PATCH 062/124] Fix little things

---
 .../src/DocumentEditor/component-blocks/api.tsx    |  2 +-
 .../component-blocks/form-from-preview.tsx         |  2 +-
 .../component-blocks/initial-values.ts             | 14 +++++++-------
 .../component-blocks/preview-props.tsx             |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 5a8c52436bc..59375cd3239 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -166,7 +166,7 @@ export type ComponentPropField =
   | ChildField
   | FormField<any, any>
   | ObjectField
-  | ConditionalField<FormField<string | boolean, any>, { [key: string]: ComponentPropField }>
+  | ConditionalField<FormField<any, any>, { [key: string]: ComponentPropField }>
   | RelationshipField<boolean>
   // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
   | { kind: 'array'; element: ComponentPropField; preview?: PreviewComponent };
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 b0484dd6cd8..1f9341f9af0 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
@@ -141,7 +141,7 @@ const fieldRenderers: {
 export type NonChildFieldComponentPropField =
   | FormField<any, any>
   | ObjectField
-  | ConditionalField<FormField<string | boolean, any>, { [key: string]: ComponentPropField }>
+  | ConditionalField<FormField<any, any>, { [key: string]: ComponentPropField }>
   | RelationshipField<boolean>
   | ArrayField<ComponentPropField>;
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 9cacc3b9301..6f06f56caca 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -130,7 +130,7 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
       for (const x of newVal) {
         if (x.key !== undefined) {
           if (uniqueKeys.has(x.key)) {
-            throw new Error('Array elements must have unique ids');
+            throw new Error('Array elements must have unique keys');
           }
           uniqueKeys.add(x.key);
         }
@@ -139,13 +139,13 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
         if (x.key !== undefined) {
           return x.key;
         }
-        let elementId = getNewArrayElementKey();
-        // just in case someone gives an id that is above our counter
-        while (uniqueKeys.has(elementId)) {
-          elementId = getNewArrayElementKey();
+        let elementKey = getNewArrayElementKey();
+        // just in case someone gives a key that is above our counter
+        while (uniqueKeys.has(elementKey)) {
+          elementKey = getNewArrayElementKey();
         }
-        uniqueKeys.add(elementId);
-        return elementId;
+        uniqueKeys.add(elementKey);
+        return elementKey;
       });
       const prevKeys = getKeysForArrayValue(currentArrVal);
       const prevValuesByKey = new Map(
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 54ef3d811eb..950b1ec1125 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -76,7 +76,7 @@ const memoizedInfoForProp = castToMemoizedInfoForProp({
           element: PreviewProps<ComponentPropField>;
         }
       >(),
-      onChange(updater: readonly { key?: string; value?: unknown }[]) {
+      onChange(updater: readonly { key: string | undefined; value?: unknown }[]) {
         onChange(value => updateValue(prop, value, updater));
       },
     };

From cfc69cf9c000df060266d0127086cb91bb6e5f08 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 20 Apr 2022 14:39:41 +1000
Subject: [PATCH 063/124] Linting

---
 examples-staging/basic/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples-staging/basic/package.json b/examples-staging/basic/package.json
index 814f825be63..c5a775048ed 100644
--- a/examples-staging/basic/package.json
+++ b/examples-staging/basic/package.json
@@ -14,6 +14,7 @@
     "@keystone-6/core": "^1.1.0",
     "@keystone-6/document-renderer": "^1.0.0",
     "@keystone-6/fields-document": "^2.0.0",
+    "@keystone-ui/button": "^6.0.0",
     "@keystone-ui/core": "^4.0.0",
     "@keystone-ui/fields": "^6.0.1",
     "@keystone-ui/icons": "^5.0.0",

From 63a57feabe4719cad879b6faed381eaea469ad81 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 13:25:25 +1000
Subject: [PATCH 064/124] chore(deps): update dependency @svgr/plugin-svgo to
 v6 (#7353)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 design-system/packages/icons/package.json |   2 +-
 yarn.lock                                 | 200 ++++++++--------------
 2 files changed, 74 insertions(+), 128 deletions(-)

diff --git a/design-system/packages/icons/package.json b/design-system/packages/icons/package.json
index 401a9e7c789..944c8e101f0 100644
--- a/design-system/packages/icons/package.json
+++ b/design-system/packages/icons/package.json
@@ -11,7 +11,7 @@
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
-    "@svgr/plugin-svgo": "^5.5.0",
+    "@svgr/plugin-svgo": "^6.0.0",
     "@types/react": "^17.0.37",
     "chalk": "^4.1.2",
     "feather-icons": "^4.28.0",
diff --git a/yarn.lock b/yarn.lock
index a343d67930c..0d0f2af654d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2633,14 +2633,14 @@
     deepmerge "^4.2.2"
     prettier "^2.1.2"
 
-"@svgr/plugin-svgo@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
-  integrity sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==
+"@svgr/plugin-svgo@^6.0.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz#4cbe6a33ccccdcae4e3b63ded64cc1cbe1faf48c"
+  integrity sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==
   dependencies:
-    cosmiconfig "^7.0.0"
+    cosmiconfig "^7.0.1"
     deepmerge "^4.2.2"
-    svgo "^1.2.2"
+    svgo "^2.5.0"
 
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
@@ -2723,6 +2723,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/accepts@*", "@types/accepts@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
@@ -3199,11 +3204,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/q@^1.5.1":
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
-  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
-
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -4231,7 +4231,7 @@ body-parser@1.19.0, body-parser@^1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-boolbase@^1.0.0, boolbase@~1.0.0:
+boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
@@ -4492,7 +4492,7 @@ chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -4721,15 +4721,6 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
-coa@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
-  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
-  dependencies:
-    "@types/q" "^1.5.1"
-    chalk "^2.4.1"
-    q "^1.1.2"
-
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -4794,6 +4785,11 @@ commander@^2.19.0, commander@^2.20.0, commander@^2.20.3:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^8.2.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -4947,7 +4943,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7.0.0:
+cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -5016,30 +5012,18 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-select-base-adapter@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
-  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
-
-css-select@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
-  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+css-select@^4.1.3:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
+  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^3.2.1"
-    domutils "^1.7.0"
-    nth-check "^1.0.2"
+    css-what "^5.1.0"
+    domhandler "^4.3.0"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
 
-css-tree@1.0.0-alpha.37:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  dependencies:
-    mdn-data "2.0.4"
-    source-map "^0.6.1"
-
-css-tree@^1.1.2:
+css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
   integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
@@ -5047,10 +5031,10 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-what@^3.2.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
-  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+css-what@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
+  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
 
 css.escape@^1.5.1:
   version "1.5.1"
@@ -5071,7 +5055,7 @@ cssfilter@0.0.10:
   resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
   integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=
 
-csso@^4.0.2:
+csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
   integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
@@ -5427,20 +5411,16 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
   dependencies:
     domelementtype "^2.0.1"
+    domhandler "^4.2.0"
     entities "^2.0.0"
 
-domelementtype@1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
+domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
@@ -5452,13 +5432,21 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domutils@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+domhandler@^4.2.0, domhandler@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
   dependencies:
-    dom-serializer "0"
-    domelementtype "1"
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
 
 dot-prop@^6.0.1:
   version "6.0.1"
@@ -5567,7 +5555,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1:
+es-abstract@^1.19.0, es-abstract@^1.19.1:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
   integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
@@ -8933,11 +8921,6 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
-
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -9535,13 +9518,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@~0.5.1:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
 moment-timezone@^0.5.34:
   version "0.5.34"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.34.tgz#a75938f7476b88f155d3504a9343f7519d9a405c"
@@ -9842,12 +9818,12 @@ npmlog@^4.0.1:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nth-check@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
-  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
+nth-check@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
   dependencies:
-    boolbase "~1.0.0"
+    boolbase "^1.0.0"
 
 number-is-nan@^1.0.0:
   version "1.0.1"
@@ -9933,15 +9909,6 @@ object.fromentries@^2.0.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-object.getownpropertydescriptors@^2.1.0:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz#b223cf38e17fefb97a63c10c91df72ccb386df9e"
-  integrity sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
 object.hasown@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
@@ -9957,7 +9924,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.0, object.values@^1.1.5:
+object.values@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
   integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
@@ -10697,7 +10664,7 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-q@^1.1.2, q@^1.5.1:
+q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -11461,7 +11428,7 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@>=0.6.0, sax@~1.2.4:
+sax@>=0.6.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -12259,24 +12226,18 @@ svg-parser@^2.0.2:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
-svgo@^1.2.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
-  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
-  dependencies:
-    chalk "^2.4.1"
-    coa "^2.0.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.37"
-    csso "^4.0.2"
-    js-yaml "^3.13.1"
-    mkdirp "~0.5.1"
-    object.values "^1.1.0"
-    sax "~1.2.4"
+svgo@^2.5.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
     stable "^0.1.8"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
 
 symbol-observable@^4.0.0:
   version "4.0.0"
@@ -13120,11 +13081,6 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -13194,16 +13150,6 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-util.promisify@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
-  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.2"
-    has-symbols "^1.0.1"
-    object.getownpropertydescriptors "^2.1.0"
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"

From b7a21bbb0af131b0fe1db4139ab179b6c83fb4b7 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 03:32:17 +0000
Subject: [PATCH 065/124] fix(deps): update dependency @preconstruct/next to v4
 (#7408)

---
 .changeset/happy-stingrays-smash.md  | 5 +++++
 design-system/website/package.json   | 2 +-
 docs/package.json                    | 2 +-
 examples/document-field/package.json | 2 +-
 packages/core/package.json           | 2 +-
 yarn.lock                            | 8 ++++----
 6 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/happy-stingrays-smash.md

diff --git a/.changeset/happy-stingrays-smash.md b/.changeset/happy-stingrays-smash.md
new file mode 100644
index 00000000000..693fb901fc9
--- /dev/null
+++ b/.changeset/happy-stingrays-smash.md
@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": patch
+---
+
+Updated `@preconstruct/next` to v4
diff --git a/design-system/website/package.json b/design-system/website/package.json
index b137de54a74..6ec633fc6d8 100644
--- a/design-system/website/package.json
+++ b/design-system/website/package.json
@@ -20,7 +20,7 @@
     "@keystone-ui/segmented-control": "^6.0.0",
     "@keystone-ui/toast": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/tinycolor2": "^1.4.3",
diff --git a/docs/package.json b/docs/package.json
index c05ca92a1ee..8de8a8f0b4a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,7 +19,7 @@
     "@mdx-js/loader": "next",
     "@mdx-js/react": "next",
     "@next/mdx": "^12.0.7",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@sindresorhus/slugify": "^1.1.2",
     "@types/gtag.js": "^0.0.10",
     "@types/mdx-js__react": "^1.5.5",
diff --git a/examples/document-field/package.json b/examples/document-field/package.json
index 2e0fa47725d..f8a2d43a345 100644
--- a/examples/document-field/package.json
+++ b/examples/document-field/package.json
@@ -13,7 +13,7 @@
     "@keystone-6/core": "^1.1.0",
     "@keystone-6/document-renderer": "^1.0.0",
     "@keystone-6/fields-document": "^2.0.0",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "next": "^12.1.0",
     "react": "^17.0.2"
   },
diff --git a/packages/core/package.json b/packages/core/package.json
index 2502264889f..49a7f3e1cd0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -49,7 +49,7 @@
     "@keystone-ui/toast": "^5.0.0",
     "@keystone-ui/tooltip": "^5.0.0",
     "@nodelib/fs.walk": "^1.2.8",
-    "@preconstruct/next": "^3.0.1",
+    "@preconstruct/next": "^4.0.0",
     "@prisma/client": "3.12.0",
     "@prisma/migrate": "3.12.0",
     "@prisma/sdk": "3.12.0",
diff --git a/yarn.lock b/yarn.lock
index 0d0f2af654d..44937e92bad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2217,10 +2217,10 @@
     pirates "^4.0.1"
     source-map-support "^0.5.16"
 
-"@preconstruct/next@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@preconstruct/next/-/next-3.0.1.tgz#7070edaf7adb350010114adbbc90079a98b0f31a"
-  integrity sha512-b9q1US5vsUzHPeMGlCFGWdttAHQ2q6raFlY1vf5binrKMkki/gt6GvskTJ4RXfFCt7QmVx9tRcuTFXMhUDgb6A==
+"@preconstruct/next@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@preconstruct/next/-/next-4.0.0.tgz#4d9c64ed68bb7cdc72d35d79d1dbe26ba2cae61e"
+  integrity sha512-vSrc8wFQgBErU7dKTKSQtr/DLWPHcN9jMoiWOAQodB1+B4Kpqqry6QhGYoRm0DQU5gNL+Rcp+Xb350O1E/gjsg==
 
 "@prisma/client@3.12.0":
   version "3.12.0"

From 0d091aba8a2aeacdc46ea00879ce7cbcb2fa0bae Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 03:32:52 +0000
Subject: [PATCH 066/124] chore(deps): update dependency
 @testing-library/user-event to v14 (#7407)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: mitchellhamilton <mitchell@hamil.town>
---
 packages/core/package.json                             |  2 +-
 .../admin-ui/components/__tests__/Pagination.test.tsx  |  8 ++++----
 yarn.lock                                              | 10 ++++------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 49a7f3e1cd0..1c88fed1693 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -124,7 +124,7 @@
   "devDependencies": {
     "@testing-library/dom": "^8.11.1",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.0.0",
     "@types/bytes": "^3.1.1",
     "fast-glob": "^3.2.7",
     "fixturez": "^1.1.0",
diff --git a/packages/core/src/admin-ui/components/__tests__/Pagination.test.tsx b/packages/core/src/admin-ui/components/__tests__/Pagination.test.tsx
index 89c3fe78387..68817883fd3 100644
--- a/packages/core/src/admin-ui/components/__tests__/Pagination.test.tsx
+++ b/packages/core/src/admin-ui/components/__tests__/Pagination.test.tsx
@@ -70,7 +70,7 @@ describe('<Pagination/>', () => {
         pointerEvents: 'none',
       });
     });
-    it('should navigate to the next page when the next page link is clicked', () => {
+    it('should navigate to the next page when the next page link is clicked', async () => {
       const push = jest.fn().mockImplementation(() => Promise.resolve());
       useRouter.mockImplementation(() => ({
         route: '/',
@@ -90,11 +90,11 @@ describe('<Pagination/>', () => {
           list={{ plural: 'Items', singular: 'Item' }}
         />
       );
-      userEvent.click(screen.getByLabelText('Next page'));
+      await userEvent.click(screen.getByLabelText('Next page'));
       expect(push).toHaveBeenCalledTimes(1);
       expect(push.mock.calls[0][0]).toBe('/?pageSize=10&page=2');
     });
-    it('should navigate to the previous page when the previous page link is clicked', () => {
+    it('should navigate to the previous page when the previous page link is clicked', async () => {
       const push = jest.fn().mockImplementation(() => Promise.resolve());
       useRouter.mockImplementation(() => ({
         route: '/',
@@ -114,7 +114,7 @@ describe('<Pagination/>', () => {
           list={{ plural: 'Items', singular: 'Item' }}
         />
       );
-      userEvent.click(screen.getByLabelText('Previous page'));
+      await userEvent.click(screen.getByLabelText('Previous page'));
       expect(push).toHaveBeenCalledTimes(1);
       expect(push.mock.calls[0][0]).toBe('/?pageSize=10&page=1');
     });
diff --git a/yarn.lock b/yarn.lock
index 44937e92bad..52fdf0086c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2691,12 +2691,10 @@
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^8.0.0"
 
-"@testing-library/user-event@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.0.0.tgz#3906aa6f0e56fd012d73559f5f05c02e63ba18dd"
+  integrity sha512-hZhjNrle/DMi1ziHwHy8LS0fYJtf+cID7fuG5+4h+Bk83xQaRDQT/DlqfL4hJYw3mxW6KTIxoODrhGnhqJebdQ==
 
 "@timsuchanek/copy@1.4.5":
   version "1.4.5"

From 670439d8710630953410d1a517aea553c1fcedf9 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 13:35:09 +1000
Subject: [PATCH 067/124] chore(deps): update dependency @svgr/plugin-jsx to v6
 (#7179)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 design-system/packages/icons/package.json |   2 +-
 yarn.lock                                 | 266 +++++++++++++++++++++-
 2 files changed, 266 insertions(+), 2 deletions(-)

diff --git a/design-system/packages/icons/package.json b/design-system/packages/icons/package.json
index 944c8e101f0..70285f21992 100644
--- a/design-system/packages/icons/package.json
+++ b/design-system/packages/icons/package.json
@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@svgr/core": "^5.5.0",
-    "@svgr/plugin-jsx": "^5.5.0",
+    "@svgr/plugin-jsx": "^6.0.0",
     "@svgr/plugin-prettier": "^5.5.0",
     "@svgr/plugin-svgo": "^6.0.0",
     "@types/react": "^17.0.37",
diff --git a/yarn.lock b/yarn.lock
index 52fdf0086c4..f2d5c5f92e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,13 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@ampproject/remapping@^2.1.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.2.tgz#4edca94973ded9630d20101cd8559cedb8d8bd34"
+  integrity sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.0"
+
 "@apollo/client@3.4.17", "@apollo/client@^3.1.3":
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.4.17.tgz#4972e19a49809e16d17c5adc67f45623a6dac135"
@@ -220,7 +227,7 @@
     jsonwebtoken "^8.5.1"
     uuid "^8.3.0"
 
-"@babel/code-frame@^7.0.0":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
@@ -239,6 +246,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.0.tgz#ea269d7f78deb3a7826c39a4048eecda541ebdaa"
   integrity sha512-DGjt2QZse5SGd9nfOSqO4WLJ8NN/oHkijbXbPrxuoJO3oIPJL3TciZs9FX+cOHNiY9E9l0opL8g7BmLe3T+9ew==
 
+"@babel/compat-data@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
+  integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
+
 "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.0.tgz#c4ff44046f5fe310525cc9eb4ef5147f0c5374d4"
@@ -260,6 +272,27 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/core@^7.15.5":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.8.tgz#3dac27c190ebc3a4381110d46c80e77efe172e1a"
+  integrity sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.7"
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helpers" "^7.17.8"
+    "@babel/parser" "^7.17.8"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.16.0", "@babel/generator@^7.7.2":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.0.tgz#d40f3d1d5075e62d3500bccb67f3daa8a95265b2"
@@ -269,6 +302,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.3", "@babel/generator@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
+  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
@@ -294,6 +336,16 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
+  integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.0.tgz#090d4d166b342a03a9fec37ef4fd5aeb9c7c6a4b"
@@ -328,6 +380,13 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-explode-assignable-expression@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.0.tgz#753017337a15f46f9c09f674cff10cee9b9d7778"
@@ -344,6 +403,15 @@
     "@babel/template" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-get-function-arity@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz#0088c7486b29a9cb5d948b1a1de46db66e089cfa"
@@ -351,6 +419,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz#4c9023c2f1def7e28ff46fc1dbcd36a39beaa81a"
@@ -358,6 +433,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz#29287040efd197c77636ef75188e81da8bccd5a4"
@@ -372,6 +454,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz#1c82a8dd4cb34577502ebd2909699b194c3e9bb5"
@@ -386,6 +475,20 @@
     "@babel/traverse" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/helper-module-transforms@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
+  integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-optimise-call-expression@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz#cecdb145d70c54096b1564f8e9f10cd7d193b338"
@@ -424,6 +527,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-simple-access@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
+  integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@@ -438,6 +548,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.15.7", "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -448,6 +565,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
 "@babel/helper-wrap-function@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.0.tgz#b3cf318afce774dfe75b86767cd6d68f3482e57c"
@@ -467,6 +589,15 @@
     "@babel/traverse" "^7.16.3"
     "@babel/types" "^7.16.0"
 
+"@babel/helpers@^7.17.8":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.8.tgz#288450be8c6ac7e4e44df37bcc53d345e07bc106"
+  integrity sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
 "@babel/highlight@^7.16.0", "@babel/highlight@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.7.tgz#81a01d7d675046f0d96f82450d9d9578bdfd6b0b"
@@ -481,6 +612,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.3.tgz#271bafcb811080905a119222edbc17909c82261d"
   integrity sha512-dcNwU1O4sx57ClvLBVFbEgx0UZWfd0JQX5X6fxFRCLHelFBGXFfSz6Y0FAq2PEwUqlqLkdVjVr4VASEOuUnLJw==
 
+"@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.17.8":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
+  integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.0":
   version "7.16.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz#2977fca9b212db153c195674e57cfab807733183"
@@ -1196,6 +1332,15 @@
     "@babel/parser" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.16.3", "@babel/traverse@^7.7.2":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.3.tgz#f63e8a938cc1b780f66d9ed3c54f532ca2d14787"
@@ -1211,6 +1356,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
+  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.3"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.16.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
@@ -1219,6 +1380,14 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.15.6", "@babel/types@^7.16.7", "@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1961,6 +2130,24 @@
   resolved "https://registry.yarnpkg.com/@josephg/resolvable/-/resolvable-1.0.1.tgz#69bc4db754d79e1a2f17a650d3466e038d94a5eb"
   integrity sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==
 
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
+  integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
+  integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
+
+"@jridgewell/trace-mapping@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
+  integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@js-joda/core@^4.0.0":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@js-joda/core/-/core-4.3.1.tgz#1df9f197d060f1eb087a895a5e33adb7f12b58fc"
@@ -2550,41 +2737,81 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
   integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
 
+"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
+  integrity sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==
+
 "@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
   integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
 
+"@svgr/babel-plugin-remove-jsx-attribute@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz#58654908beebfa069681a83332544b17e5237e89"
+  integrity sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==
+
 "@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
   integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
 
+"@svgr/babel-plugin-remove-jsx-empty-expression@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz#d06dd6e8a8f603f92f9979bb9990a1f85a4f57ba"
+  integrity sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==
+
 "@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
   integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
 
+"@svgr/babel-plugin-replace-jsx-attribute-value@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz#0b85837577b02c31c09c758a12932820f5245cee"
+  integrity sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==
+
 "@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
   integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
 
+"@svgr/babel-plugin-svg-dynamic-title@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz#28236ec26f7ab9d486a487d36ae52d58ba15676f"
+  integrity sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==
+
 "@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
   integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
 
+"@svgr/babel-plugin-svg-em-dimensions@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz#40267c5dea1b43c4f83a0eb6169e08b43d8bafce"
+  integrity sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==
+
 "@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
   integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
 
+"@svgr/babel-plugin-transform-react-native-svg@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz#eb688d0a5f539e34d268d8a516e81f5d7fede7c9"
+  integrity sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==
+
 "@svgr/babel-plugin-transform-svg-component@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
   integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
 
+"@svgr/babel-plugin-transform-svg-component@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz#7ba61d9fc1fb42b0ba1a04e4630019fa7e993c4f"
+  integrity sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==
+
 "@svgr/babel-preset@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
@@ -2599,6 +2826,20 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
     "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
 
+"@svgr/babel-preset@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.2.0.tgz#1d3ad8c7664253a4be8e4a0f0e6872f30d8af627"
+  integrity sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^6.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^6.0.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^6.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^6.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^6.0.0"
+    "@svgr/babel-plugin-transform-svg-component" "^6.2.0"
+
 "@svgr/core@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
@@ -2615,6 +2856,14 @@
   dependencies:
     "@babel/types" "^7.12.6"
 
+"@svgr/hast-util-to-babel-ast@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz#ae065567b74cbe745afae617053adf9a764bea25"
+  integrity sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==
+  dependencies:
+    "@babel/types" "^7.15.6"
+    entities "^3.0.1"
+
 "@svgr/plugin-jsx@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
@@ -2625,6 +2874,16 @@
     "@svgr/hast-util-to-babel-ast" "^5.5.0"
     svg-parser "^2.0.2"
 
+"@svgr/plugin-jsx@^6.0.0":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz#5668f1d2aa18c2f1bb7a1fc9f682d3f9aed263bd"
+  integrity sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==
+  dependencies:
+    "@babel/core" "^7.15.5"
+    "@svgr/babel-preset" "^6.2.0"
+    "@svgr/hast-util-to-babel-ast" "^6.2.1"
+    svg-parser "^2.0.2"
+
 "@svgr/plugin-prettier@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-prettier/-/plugin-prettier-5.5.0.tgz#6c5cc8100f0c895f356d24d523f6ea5165b75366"
@@ -5541,6 +5800,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 env-paths@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"

From bfb6c844fcab390813ed71a889f8e815db93e0b9 Mon Sep 17 00:00:00 2001
From: Mohamed Moselhy <look4d@gmail.com>
Date: Thu, 21 Apr 2022 01:11:01 -0400
Subject: [PATCH 068/124] Fixed React key warning on GraphQL error notices
 (#7121)

---
 .changeset/proud-turkeys-arrive.md                          | 5 +++++
 .../core/src/admin-ui/components/GraphQLErrorNotice.tsx     | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/proud-turkeys-arrive.md

diff --git a/.changeset/proud-turkeys-arrive.md b/.changeset/proud-turkeys-arrive.md
new file mode 100644
index 00000000000..c2b0e1c45a8
--- /dev/null
+++ b/.changeset/proud-turkeys-arrive.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/core': patch
+---
+
+Fixed React key warning when showing GraphQL errors
diff --git a/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx b/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx
index 330f33ad8bc..7b0bdb1a485 100644
--- a/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx
+++ b/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx
@@ -19,8 +19,10 @@ export function GraphQLErrorNotice({ errors, networkError }: GraphQLErrorNoticeP
   if (errors?.length) {
     return (
       <Stack gap="small" marginBottom="large">
-        {errors.map(err => (
-          <Notice tone="negative">{err.message}</Notice>
+        {errors.map((err, idx) => (
+          <Notice tone="negative" key={idx}>
+            {err.message}
+          </Notice>
         ))}
       </Stack>
     );

From 6c14db45d615329ae4ccd7f2c8fa6d6249283c37 Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@hamil.town>
Date: Fri, 22 Apr 2022 23:03:49 +1000
Subject: [PATCH 069/124] Fix artifact generation in the repo failing when
 empty directories exist in the directories that contain projects (#7477)

---
 .../src/index.ts                              | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/scripts/generate-artifacts-for-projects/src/index.ts b/scripts/generate-artifacts-for-projects/src/index.ts
index 22bd36a56a6..0178d047c53 100644
--- a/scripts/generate-artifacts-for-projects/src/index.ts
+++ b/scripts/generate-artifacts-for-projects/src/index.ts
@@ -40,7 +40,25 @@ async function main() {
     await Promise.all(
       directoriesOfProjects.map(async dir => {
         const entries = await fs.readdir(dir, { withFileTypes: true });
-        return entries.filter(x => x.isDirectory()).map(x => path.join(dir, x.name));
+        const projectPaths: string[] = [];
+        await Promise.all(
+          entries.map(async entry => {
+            if (entry.isDirectory()) {
+              const projectPath = path.join(dir, entry.name);
+              const packageJsonPath = path.join(projectPath, 'package.json');
+              try {
+                if ((await fs.stat(packageJsonPath)).isFile()) {
+                  projectPaths.push(projectPath);
+                }
+              } catch (err: any) {
+                if (err.code !== 'ENOENT') {
+                  throw err;
+                }
+              }
+            }
+          })
+        );
+        return projectPaths;
       })
     )
   ).flat();

From 71437c7b13c34bdda5232c6a1395c34f04823232 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 11:28:49 +1000
Subject: [PATCH 070/124] Add back .map(x => ({ key: x.key })) for now

---
 .../basic/admin/fieldViews/Content.tsx             | 14 ++++++++++----
 .../component-blocks/array-field.test.tsx          |  5 ++++-
 .../child-field-in-recursive-array-field.test.tsx  |  3 ++-
 .../component-blocks/form-from-preview.tsx         |  2 +-
 .../component-blocks/nested-array-field.test.tsx   |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 9fb6dd3565f..633bd4e5774 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -41,7 +41,7 @@ export const componentBlocks = {
               return {
                 key: element.key,
                 value: [
-                  ...element.elements,
+                  ...element.elements.map(x => ({ key: x.key })),
                   ...Array.from({ length: maxColumns - element.elements.length }, () => ({
                     key: undefined,
                   })),
@@ -73,7 +73,10 @@ export const componentBlocks = {
                             props.fields.rows.elements.map(element => {
                               return {
                                 key: element.key,
-                                value: [...element.elements, { key: undefined }],
+                                value: [
+                                  ...element.elements.map(x => ({ key: x.key })),
+                                  { key: undefined },
+                                ],
                               };
                             })
                           );
@@ -90,7 +93,10 @@ export const componentBlocks = {
           <NotEditable>
             <div
               onClick={() => {
-                props.fields.rows.onChange([...props.fields.rows.elements, { key: undefined }]);
+                props.fields.rows.onChange([
+                  ...props.fields.rows.elements.map(x => ({ key: x.key })),
+                  { key: undefined },
+                ]);
               }}
             >
               <Button>Insert row</Button>
@@ -118,7 +124,7 @@ export const componentBlocks = {
     component: function MyList(props) {
       useEffect(() => {
         if (!props.fields.children.elements.length) {
-          props.fields.children.onChange([...props.fields.children.elements, { key: undefined }]);
+          props.fields.children.onChange([{ key: undefined }]);
         }
       });
       return (
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 13f817c00ec..5aa5ad2ee0f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -18,7 +18,10 @@ const list = component({
         'button',
         {
           onClick: () =>
-            props.fields.children.onChange([...props.fields.children.elements, { key: undefined }]),
+            props.fields.children.onChange([
+              ...props.fields.children.elements.map(x => ({ key: x.key })),
+              { key: undefined },
+            ]),
         },
         'Insert'
       )
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index ff83687149f..f2560a69bc5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -37,7 +37,8 @@ function List(props: PreviewProps<ListItems>): ReactElement {
     React.createElement(
       'button',
       {
-        onClick: () => props.onChange([...props.elements, { key: undefined }]),
+        onClick: () =>
+          props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]),
       },
       'Insert'
     )
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 1f9341f9af0..f190cf4c9e7 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
@@ -39,7 +39,7 @@ const fieldRenderers: {
         <Button
           autoFocus={props.autoFocus}
           onClick={() => {
-            props.onChange([...props.elements, { key: undefined }]);
+            props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
           }}
         >
           Add
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 9d3fb7efdf7..9034e440893 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -282,7 +282,7 @@ test('add to multiple in child field in nested array', () => {
   );
 
   previewProps.fields.children.elements[0].onChange([
-    ...previewProps.fields.children.elements[0].elements,
+    ...previewProps.fields.children.elements[0].elements.map(x => ({ key: x.key })),
     { key: undefined },
   ]);
   expect(editor).toMatchInlineSnapshot(`

From 6e3fcf68160ead624078fd8604d7ad3dfb36e7a9 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 11:52:57 +1000
Subject: [PATCH 071/124] Some renaming

---
 .../basic/admin/fieldViews/Blah.tsx           |   6 +-
 .../basic/admin/fieldViews/Content.tsx        |  16 +-
 examples-staging/basic/schema.ts              |   4 +-
 .../DocumentEditor/component-blocks/api.tsx   | 119 +++++-----
 .../component-blocks/array-field.test.tsx     |   2 +-
 ...ld-field-in-recursive-array-field.test.tsx |   2 +-
 .../document-features-normalization.test.tsx  |  42 ++--
 .../component-blocks/field-assertions.test.ts |  24 +-
 .../component-blocks/field-assertions.ts      |  69 +++---
 .../component-blocks/form-from-preview.tsx    |  58 ++---
 .../DocumentEditor/component-blocks/index.tsx |  34 +--
 .../component-blocks/initial-values.ts        |  62 ++---
 .../insert-break-and-delete.test.tsx          |   8 +-
 .../insertion-and-preview-props.test.tsx      |  42 ++--
 .../multi-child-field-in-array-field.test.tsx |   2 +-
 .../nested-array-field.test.tsx               |   4 +-
 .../component-blocks/normalization.test.tsx   |  14 +-
 .../component-blocks/preview-props.test.ts    |   8 +-
 .../component-blocks/preview-props.tsx        | 221 +++++++++---------
 .../component-blocks/utils.test.ts            |  18 +-
 .../DocumentEditor/component-blocks/utils.ts  | 124 +++++-----
 .../with-component-blocks.tsx                 |  74 +++---
 .../src/DocumentEditor/index.tsx              |   2 +-
 .../markdown-link-shortcut.test.tsx           |   4 +-
 .../src/DocumentEditor/relationship.tsx       |   5 +-
 .../src/DocumentEditor/toolbar-state.tsx      |   6 +-
 .../fields-document/src/component-blocks.tsx  |   4 +-
 .../src/component-graphql-input.tsx           | 130 ++++++-----
 .../src/component-graphql-output.tsx          |  48 ++--
 .../src/component-views/index.tsx             |  40 ++--
 packages/fields-document/src/component.ts     |  34 +--
 packages/fields-document/src/index.ts         |   4 +-
 .../fields-document/src/relationship-data.tsx |  20 +-
 .../src/structured/tests/test-fixtures.ts     |   8 +-
 .../fields-document/src/validation.test.tsx   |   8 +-
 packages/fields-document/src/validation.ts    |  36 +--
 packages/fields-document/src/views.tsx        |   2 +-
 tests/api-tests/fields/types/document.test.ts |   2 +-
 38 files changed, 654 insertions(+), 652 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
index c77b7088aaa..8aaa4e81d6f 100644
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ b/examples-staging/basic/admin/fieldViews/Blah.tsx
@@ -4,10 +4,10 @@
 import {
   fields,
   ArrayField,
-  ComponentPropFieldForGraphQL,
+  ComponentSchemaForGraphQL,
 } from '@keystone-6/fields-document/component-blocks';
 
-export const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
+export const schema: ArrayField<ComponentSchemaForGraphQL> = fields.array(
   fields.conditional(
     fields.select({
       defaultValue: 'leaf',
@@ -25,7 +25,7 @@ export const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
       group: fields.object({
         label: fields.text({ label: 'Label' }),
         get children() {
-          return prop;
+          return schema;
         },
       }),
     }
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 633bd4e5774..adf682a7c8e 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -106,7 +106,7 @@ export const componentBlocks = {
       );
     },
     label: 'Table',
-    props: {
+    schema: {
       rows: fields.array(
         fields.array(
           fields.object({
@@ -151,7 +151,7 @@ export const componentBlocks = {
       );
     },
     label: 'My List',
-    props: {
+    schema: {
       children: fields.array(
         fields.object({
           done: fields.checkbox({ label: 'Done' }),
@@ -223,7 +223,7 @@ export const componentBlocks = {
       );
     },
     label: 'Hero',
-    props: {
+    schema: {
       title: fields.child({ kind: 'inline', placeholder: 'Title...' }),
       content: fields.child({ kind: 'block', placeholder: '...' }),
       imageSrc: fields.text({
@@ -242,7 +242,7 @@ export const componentBlocks = {
   void: component({
     label: 'Void',
     component: props => <NotEditable>{props.fields.value.value}</NotEditable>,
-    props: { value: fields.text({ label: 'Value' }) },
+    schema: { value: fields.text({ label: 'Value' }) },
   }),
   conditionallyVoid: component({
     label: 'Conditionally Void',
@@ -252,7 +252,7 @@ export const componentBlocks = {
       ) : (
         <div>{props.fields.something.value.element}</div>
       ),
-    props: {
+    schema: {
       something: fields.conditional(fields.checkbox({ label: 'Is void' }), {
         false: fields.child({ kind: 'inline', placeholder: '...' }),
         true: fields.empty(),
@@ -284,7 +284,7 @@ export const componentBlocks = {
         </div>
       );
     },
-    props: {
+    schema: {
       title: fields.child({ kind: 'inline', placeholder: 'Title...' }),
       authors: fields.relationship({
         label: 'Authors',
@@ -350,7 +350,7 @@ export const componentBlocks = {
     },
     label: 'Notice',
     chromeless: true,
-    props: {
+    schema: {
       intent: fields.select({
         label: 'Intent',
         options: [
@@ -434,7 +434,7 @@ export const componentBlocks = {
       );
     },
     label: 'Quote',
-    props: {
+    schema: {
       content: fields.child({
         kind: 'block',
         placeholder: 'Quote...',
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index bbbb44840ec..b0e0a968b27 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -13,7 +13,7 @@ import {
 import { componentThing, document } from '@keystone-6/fields-document';
 import { v4 } from 'uuid';
 import { componentBlocks } from './admin/fieldViews/Content';
-import { prop as blahProp } from './admin/fieldViews/Blah';
+import { schema as blahProp } from './admin/fieldViews/Blah';
 import * as Keystone from '.keystone/types';
 
 type AccessArgs = {
@@ -153,7 +153,7 @@ export const lists: Keystone.Lists = {
         defaultValue: 'draft',
       }),
       blah: componentThing({
-        prop: blahProp,
+        schema: blahProp,
         ui: { views: require.resolve('./admin/fieldViews/Blah.tsx') },
       }),
       // something: json({
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 59375cd3239..bf920201500 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -114,7 +114,7 @@ export type ChildField = {
       };
 };
 
-export type ArrayField<ElementField extends ComponentPropField> = {
+export type ArrayField<ElementField extends ComponentSchema> = {
   kind: 'array';
   element: ElementField;
   preview?: PreviewComponent;
@@ -130,7 +130,7 @@ export type RelationshipField<Many extends boolean> = {
 };
 
 export interface ObjectField<
-  Value extends Record<string, ComponentPropField> = Record<string, ComponentPropField>
+  Value extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
 > {
   kind: 'object';
   value: Value;
@@ -148,7 +148,7 @@ type StringOrBooleanToString<Val extends string | boolean> = Val extends string
 export type ConditionalField<
   DiscriminantField extends FormField<string | boolean, any>,
   ConditionalValues extends {
-    [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentPropField;
+    [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentSchema;
   }
 > = {
   kind: 'conditional';
@@ -158,29 +158,29 @@ export type ConditionalField<
 };
 
 type PreviewComponent = (props: unknown) => ReactElement | null;
-type TypedPreviewComponent<Field extends ComponentPropField> = (
+type TypedPreviewComponent<Field extends ComponentSchema> = (
   props: PreviewProps<Field> & { autoFocus?: boolean }
 ) => ReactElement | null;
 
-export type ComponentPropField =
+export type ComponentSchema =
   | ChildField
   | FormField<any, any>
   | ObjectField
-  | ConditionalField<FormField<any, any>, { [key: string]: ComponentPropField }>
+  | ConditionalField<FormField<any, any>, { [key: string]: ComponentSchema }>
   | RelationshipField<boolean>
-  // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentPropField; preview?: PreviewComponent };
+  // this is written like this rather than ArrayField<ComponentSchema> to avoid TypeScript erroring about circularity
+  | { kind: 'array'; element: ComponentSchema; preview?: PreviewComponent };
 
-export type ComponentPropFieldForGraphQL =
+export type ComponentSchemaForGraphQL =
   | FormFieldWithGraphQLField<any, any>
-  | ObjectField<Record<string, ComponentPropFieldForGraphQL>>
+  | ObjectField<Record<string, ComponentSchemaForGraphQL>>
   | ConditionalField<
       FormFieldWithGraphQLField<any, any>,
-      { [key: string]: ComponentPropFieldForGraphQL }
+      { [key: string]: ComponentSchemaForGraphQL }
     >
   | RelationshipField<boolean>
-  // this is written like this rather than ArrayField<ComponentPropField> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentPropFieldForGraphQL; preview?: PreviewComponent };
+  // this is written like this rather than ArrayField<ComponentSchemaForGraphQL> to avoid TypeScript erroring about circularity
+  | { kind: 'array'; element: ComponentSchemaForGraphQL; preview?: PreviewComponent };
 
 export const fields = {
   text({
@@ -478,7 +478,7 @@ export const fields = {
             },
     };
   },
-  object<Value extends Record<string, ComponentPropField>>(
+  object<Value extends Record<string, ComponentSchema>>(
     value: Value,
     opts?: {
       preview?: TypedPreviewComponent<ObjectField<Value>>;
@@ -489,7 +489,7 @@ export const fields = {
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
     ConditionalValues extends {
-      [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentPropField;
+      [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentSchema;
     }
   >(
     discriminant: DiscriminantField,
@@ -536,7 +536,7 @@ export const fields = {
       preview: preview as PreviewComponent,
     };
   },
-  array<ElementField extends ComponentPropField>(
+  array<ElementField extends ComponentSchema>(
     element: ElementField,
     opts?: { preview?: TypedPreviewComponent<ArrayField<ElementField>> }
   ): ArrayField<ElementField> {
@@ -545,10 +545,10 @@ export const fields = {
 };
 
 export type ComponentBlock<
-  Props extends Record<string, ComponentPropField> = Record<string, ComponentPropField>
+  Fields extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
 > = {
   component: (props: any) => ReactElement | null;
-  props: Props;
+  schema: Fields;
   label: string;
 } & (
   | {
@@ -566,17 +566,17 @@ export type ComponentBlock<
     }
 );
 
-type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop extends ChildField
+type GenericPreviewProps<Prop extends ComponentSchema, ChildFieldType> = Prop extends ChildField
   ? {
       readonly element: ChildFieldType;
-      readonly field: Prop;
+      readonly schema: Prop;
     }
   : Prop extends FormField<infer Value, infer Options>
   ? {
       readonly value: Value;
       onChange(value: Value): void;
       readonly options: Options;
-      readonly field: Prop;
+      readonly schema: Prop;
     }
   : Prop extends ObjectField<infer Value>
   ? {
@@ -586,7 +586,7 @@ type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop
       onChange(value: {
         readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
       }): void;
-      readonly field: Prop;
+      readonly schema: Prop;
     }
   : Prop extends ConditionalField<infer DiscriminantField, infer Values>
   ? {
@@ -600,7 +600,7 @@ type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop
         ): void;
         readonly options: DiscriminantField['options'];
         readonly value: GenericPreviewProps<Values[Key], ChildFieldType>;
-        readonly field: Prop;
+        readonly schema: Prop;
       };
     }[keyof Values]
   : Prop extends RelationshipField<infer Many>
@@ -613,7 +613,7 @@ type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop
           ? readonly HydratedRelationshipData[]
           : HydratedRelationshipData | null
       ): void;
-      readonly field: Prop;
+      readonly schema: Prop;
     }
   : Prop extends ArrayField<infer ElementField>
   ? {
@@ -626,11 +626,11 @@ type GenericPreviewProps<Prop extends ComponentPropField, ChildFieldType> = Prop
           value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
         }[]
       ) => void;
-      readonly field: Prop;
+      readonly schema: Prop;
     }
   : never;
 
-export type PreviewProps<Prop extends ComponentPropField> = GenericPreviewProps<Prop, ReactNode>;
+export type PreviewProps<Prop extends ComponentSchema> = GenericPreviewProps<Prop, ReactNode>;
 
 type GetFromKey<Obj, Key> = Key extends keyof Obj ? Obj[Key] : never;
 
@@ -640,7 +640,7 @@ type DiscrimiantToString<Discriminant extends string | boolean> = Discriminant e
   ? 'false'
   : Discriminant;
 
-export type InitialOrUpdateValueFromComponentPropField<Prop extends ComponentPropField> =
+export type InitialOrUpdateValueFromComponentPropField<Prop extends ComponentSchema> =
   Prop extends ChildField
     ? undefined
     : Prop extends FormField<infer Value, any>
@@ -678,7 +678,7 @@ type DiscriminantStringToDiscriminantValue<
     : never
   : DiscriminantString;
 
-export type PreviewPropsForToolbar<Prop extends ComponentPropField> = GenericPreviewProps<
+export type PreviewPropsForToolbar<Prop extends ComponentSchema> = GenericPreviewProps<
   Prop,
   undefined
 >;
@@ -696,15 +696,15 @@ export type RelationshipData = {
 };
 
 export function component<
-  PropsOption extends {
-    [Key in any]: ComponentPropField;
+  Schema extends {
+    [Key in any]: ComponentSchema;
   }
 >(
   options: {
     /** The preview component shown in the editor */
-    component: (props: PreviewProps<ObjectField<PropsOption>>) => ReactElement | null;
-    /** The props that the preview component, toolbar and rendered component will receive */
-    props: PropsOption;
+    component: (props: PreviewProps<ObjectField<Schema>>) => ReactElement | null;
+    /** The schema for the props that the preview component, toolbar and rendered component will receive */
+    schema: Schema;
     /** The label to show in the insert menu and chrome around the block if chromeless is false */
     label: string;
   } & (
@@ -712,7 +712,7 @@ export function component<
         chromeless: true;
         toolbar?: (props: {
           props: {
-            [Key in keyof PropsOption]: PreviewPropsForToolbar<PropsOption[Key]>;
+            [Key in keyof Schema]: PreviewPropsForToolbar<Schema[Key]>;
           };
           onRemove(): void;
         }) => ReactElement;
@@ -721,14 +721,14 @@ export function component<
         chromeless?: false;
         toolbar?: (props: {
           props: {
-            [Key in keyof PropsOption]: PreviewPropsForToolbar<PropsOption[Key]>;
+            [Key in keyof Schema]: PreviewPropsForToolbar<Schema[Key]>;
           };
           onShowEditMode(): void;
           onRemove(): void;
         }) => ReactElement;
       }
   )
-): ComponentBlock<PropsOption> {
+): ComponentBlock<Schema> {
   return options as any;
 }
 
@@ -740,29 +740,28 @@ export const NotEditable = ({ children, ...props }: HTMLAttributes<HTMLDivElemen
 
 type Comp<Props> = (props: Props) => ReactElement | null;
 
-type ValueForRenderingFromComponentPropField<Prop extends ComponentPropField> =
-  Prop extends ChildField
-    ? ReactNode
-    : Prop extends FormField<infer Value, any>
-    ? Value
-    : Prop extends ObjectField<infer Value>
-    ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
-    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
-    ? {
-        readonly [Key in keyof Values]: {
-          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-          readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
-        };
-      }[keyof Values]
-    : Prop extends RelationshipField<infer Many>
-    ? Many extends true
-      ? readonly HydratedRelationshipData[]
-      : HydratedRelationshipData | null
-    : Prop extends ArrayField<infer ElementField>
-    ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
-    : never;
+type ValueForRenderingFromComponentPropField<Prop extends ComponentSchema> = Prop extends ChildField
+  ? ReactNode
+  : Prop extends FormField<infer Value, any>
+  ? Value
+  : Prop extends ObjectField<infer Value>
+  ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
+  : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+  ? {
+      readonly [Key in keyof Values]: {
+        readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+        readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
+      };
+    }[keyof Values]
+  : Prop extends RelationshipField<infer Many>
+  ? Many extends true
+    ? readonly HydratedRelationshipData[]
+    : HydratedRelationshipData | null
+  : Prop extends ArrayField<infer ElementField>
+  ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
+  : never;
 
-export type ValueForComponentPropField<Prop extends ComponentPropField> = Prop extends ChildField
+export type ValueForComponentSchema<Prop extends ComponentSchema> = Prop extends ChildField
   ? null
   : Prop extends FormField<infer Value, any>
   ? Value
@@ -783,7 +782,7 @@ export type ValueForComponentPropField<Prop extends ComponentPropField> = Prop e
   ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
   : never;
 
-type ExtractPropsForPropsForRendering<Props extends Record<string, ComponentPropField>> = {
+type ExtractPropsForPropsForRendering<Props extends Record<string, ComponentSchema>> = {
   readonly [Key in keyof Props]: ValueForRenderingFromComponentPropField<Props[Key]>;
 };
 
@@ -791,6 +790,6 @@ export type InferRenderersForComponentBlocks<
   ComponentBlocks extends Record<string, ComponentBlock<any>>
 > = {
   [Key in keyof ComponentBlocks]: Comp<
-    ExtractPropsForPropsForRendering<ComponentBlocks[Key]['props']>
+    ExtractPropsForPropsForRendering<ComponentBlocks[Key]['schema']>
   >;
 };
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 5aa5ad2ee0f..f3e7326d187 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -27,7 +27,7 @@ const list = component({
       )
     ),
   label: '',
-  props: {
+  schema: {
     children: fields.array(
       fields.object({
         content: fields.child({ kind: 'inline', placeholder: '' }),
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index f2560a69bc5..941e70a2564 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -48,7 +48,7 @@ function List(props: PreviewProps<ListItems>): ReactElement {
 const list = component({
   component: props => React.createElement(List, props.fields.children),
   label: '',
-  props: {
+  schema: {
     children,
   },
 });
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
index 2befa8a1518..1f586622ac5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
@@ -9,19 +9,19 @@ import { ChildField } from './api';
 
 const cases: Record<
   string,
-  { prop: ChildField; children: Node | Node[] } & (
+  { schema: ChildField; children: Node | Node[] } & (
     | { kind: 'allowed' }
     | { kind: 'not-allowed'; expectedNormalized: Node }
   )
 > = {
   'mark where it should not exist in inline': {
-    prop: fields.child({ kind: 'inline', placeholder: '' }),
+    schema: fields.child({ kind: 'inline', placeholder: '' }),
     children: <text bold>this should not be bold</text>,
     kind: 'not-allowed',
     expectedNormalized: <text>this should not be bold</text>,
   },
   'mark where it should not exist in block': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: (
       <paragraph>
         <text bold>this should not be bold</text>
@@ -35,12 +35,12 @@ const cases: Record<
     ),
   },
   'mark where it is is allowed in inline': {
-    prop: fields.child({ kind: 'inline', placeholder: '', formatting: 'inherit' }),
+    schema: fields.child({ kind: 'inline', placeholder: '', formatting: 'inherit' }),
     children: <text bold>this should be bold</text>,
     kind: 'allowed',
   },
   'code block where it is not allowed in a block': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: (
       <code>
         <text>this should not be in a code block</text>
@@ -54,7 +54,7 @@ const cases: Record<
     ),
   },
   'code block where it is allowed in a block': {
-    prop: fields.child({ kind: 'block', placeholder: '', formatting: 'inherit' }),
+    schema: fields.child({ kind: 'block', placeholder: '', formatting: 'inherit' }),
     children: (
       <code>
         <text>this should not be in a code block</text>
@@ -63,7 +63,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'links allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '', links: 'inherit' }),
+    schema: fields.child({ kind: 'block', placeholder: '', links: 'inherit' }),
     children: (
       <paragraph>
         <text>some text </text>
@@ -76,7 +76,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'links not allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: (
       <paragraph>
         <text>some text </text>
@@ -94,7 +94,7 @@ const cases: Record<
     kind: 'not-allowed',
   },
   'links allowed in inline': {
-    prop: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }),
+    schema: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }),
     children: [
       <text>some text </text>,
       <link href="https://example.com">
@@ -105,7 +105,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'links not allowed in inline': {
-    prop: fields.child({ kind: 'inline', placeholder: '' }),
+    schema: fields.child({ kind: 'inline', placeholder: '' }),
     children: [
       <text>some text </text>,
       <link href="https://example.com">
@@ -117,7 +117,7 @@ const cases: Record<
     kind: 'not-allowed',
   },
   'relationship allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '', relationships: 'inherit' }),
+    schema: fields.child({ kind: 'block', placeholder: '', relationships: 'inherit' }),
     children: (
       <paragraph>
         <text>some text </text>
@@ -137,7 +137,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'relationship not allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: (
       <paragraph>
         <text>some text </text>
@@ -162,7 +162,7 @@ const cases: Record<
     kind: 'not-allowed',
   },
   'alignment allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '', formatting: { alignment: 'inherit' } }),
+    schema: fields.child({ kind: 'block', placeholder: '', formatting: { alignment: 'inherit' } }),
     children: (
       <paragraph textAlign="end">
         <text>some text </text>
@@ -171,7 +171,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'alignment not allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: (
       <paragraph textAlign="end">
         <text>some text </text>
@@ -185,7 +185,7 @@ const cases: Record<
     kind: 'not-allowed',
   },
   'divider allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '', dividers: 'inherit' }),
+    schema: fields.child({ kind: 'block', placeholder: '', dividers: 'inherit' }),
     children: [
       <paragraph>
         <text>some text </text>
@@ -197,7 +197,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'divider not allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: [
       <paragraph>
         <text>some text </text>
@@ -215,7 +215,7 @@ const cases: Record<
     kind: 'not-allowed',
   },
   'soft breaks allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '', formatting: { softBreaks: 'inherit' } }),
+    schema: fields.child({ kind: 'block', placeholder: '', formatting: { softBreaks: 'inherit' } }),
     children: (
       <paragraph>
         <text>some{'\n'} text </text>
@@ -224,7 +224,7 @@ const cases: Record<
     kind: 'allowed',
   },
   'soft breaks not allowed': {
-    prop: fields.child({ kind: 'block', placeholder: '' }),
+    schema: fields.child({ kind: 'block', placeholder: '' }),
     children: (
       <paragraph>
         <text>
@@ -260,7 +260,7 @@ function makeEditorWithChildField(
     {
       normalization,
       componentBlocks: {
-        comp: component({ component: () => null, label: '', props: { child: childField } }),
+        comp: component({ component: () => null, label: '', schema: { child: childField } }),
       },
       relationships: {
         mention: {
@@ -276,9 +276,9 @@ function makeEditorWithChildField(
 Object.keys(cases).forEach(key => {
   const testCase = cases[key];
   test(key, () => {
-    const Prop = `component-${testCase.prop.options.kind}-prop` as const;
+    const Prop = `component-${testCase.schema.options.kind}-prop` as const;
     let editor = makeEditorWithChildField(
-      testCase.prop,
+      testCase.schema,
       testCase.children,
       testCase.kind === 'allowed' ? 'disallow-non-normalized' : 'normalize'
     );
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
index ad4af4a3eb6..c18057ab966 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
@@ -1,5 +1,5 @@
 import { ArrayField, ConditionalField, fields, FormField, ObjectField } from './api';
-import { assertValidComponentPropField } from './field-assertions';
+import { assertValidComponentSchema } from './field-assertions';
 
 type EasilyCircularObject = ObjectField<{
   x: EasilyCircularObject;
@@ -14,7 +14,7 @@ const discriminant = fields.checkbox({ label: '' });
 
 test('does not allow circular object', () => {
   expect(() => {
-    assertValidComponentPropField(easilyCircularObject, new Set());
+    assertValidComponentSchema(easilyCircularObject, new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
   );
@@ -22,7 +22,7 @@ test('does not allow circular object', () => {
 
 test('does not allow a circular object within an array', () => {
   expect(() => {
-    assertValidComponentPropField(fields.array(easilyCircularObject), new Set());
+    assertValidComponentSchema(fields.array(easilyCircularObject), new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"array.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
   );
@@ -30,7 +30,7 @@ test('does not allow a circular object within an array', () => {
 
 test('does not allow a circular object within a value for a default discriminant of a conditional field', () => {
   expect(() => {
-    assertValidComponentPropField(
+    assertValidComponentSchema(
       fields.conditional(discriminant, {
         true: fields.empty(),
         false: easilyCircularObject,
@@ -44,7 +44,7 @@ test('does not allow a circular object within a value for a default discriminant
 
 test('does not allow a circular object within a value for a non-default discriminant of a conditional field', () => {
   expect(() => {
-    assertValidComponentPropField(
+    assertValidComponentSchema(
       fields.conditional(discriminant, {
         true: easilyCircularObject,
         false: fields.empty(),
@@ -67,7 +67,7 @@ test("does allow a circular conditional as long as it's not the default", () =>
     },
     false: fields.empty(),
   });
-  assertValidComponentPropField(conditional, new Set());
+  assertValidComponentSchema(conditional, new Set());
 });
 
 test("does not allow a circular conditional if it's the default", () => {
@@ -82,7 +82,7 @@ test("does not allow a circular conditional if it's the default", () => {
     true: fields.empty(),
   });
   expect(() => {
-    assertValidComponentPropField(conditional, new Set());
+    assertValidComponentSchema(conditional, new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"The field at \\"conditional.false\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
   );
@@ -101,7 +101,7 @@ test("allows circularity if it's stopped by an array field", () => {
       },
     })
   );
-  assertValidComponentPropField(blah, new Set());
+  assertValidComponentSchema(blah, new Set());
 });
 
 test('does not allow a field that returns a different field from a getter each time', () => {
@@ -119,7 +119,7 @@ test('does not allow a field that returns a different field from a getter each t
       })
     );
   expect(() => {
-    assertValidComponentPropField(blah(), new Set());
+    assertValidComponentSchema(blah(), new Set());
   }).toThrowErrorMatchingInlineSnapshot(
     `"Fields on an object field must not change over time but the field at \\"array.object.blah\\" changes between accesses"`
   );
@@ -147,13 +147,13 @@ test('exceeds the call stack size for an infinitely recursive field where all fi
     );
   };
   expect(() => {
-    assertValidComponentPropField(blah(), new Set());
+    assertValidComponentSchema(blah(), new Set());
   }).toThrowErrorMatchingInlineSnapshot(`"Maximum call stack size exceeded"`);
 });
 
 test('relationship field where no list exists with that name', () => {
   expect(() => {
-    assertValidComponentPropField(
+    assertValidComponentSchema(
       fields.object({ a: fields.relationship({ listKey: 'Blah', label: 'Something' }) }),
       new Set()
     );
@@ -163,7 +163,7 @@ test('relationship field where no list exists with that name', () => {
 });
 
 test('relationship field where a list exists with that name', () => {
-  assertValidComponentPropField(
+  assertValidComponentSchema(
     fields.object({ a: fields.relationship({ listKey: 'Blah', label: 'Something' }) }),
     new Set(['Blah'])
   );
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
index ffb8e733f8a..a256204177c 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -1,11 +1,8 @@
-import { ComponentPropField } from './api';
+import { ComponentSchema } from './api';
 import { assertNever } from './utils';
 
-export function assertValidComponentPropField(
-  prop: ComponentPropField,
-  lists: ReadonlySet<string>
-) {
-  assertValidComponentPropFieldInner(prop, [], [], new Set(), lists);
+export function assertValidComponentSchema(schema: ComponentSchema, lists: ReadonlySet<string>) {
+  assertValidComponentSchemaInner(schema, [], [], new Set(), lists);
 }
 
 // recursive things can exist but they have to either be:
@@ -13,27 +10,27 @@ export function assertValidComponentPropField(
 // - inside an array field
 // when we hit the non-default portion of a conditional field or an array field
 // checking inside of it essentially means pretend it's a new thing
-function assertValidComponentPropFieldInner(
-  prop: ComponentPropField,
-  propAncestors: ComponentPropField[],
+function assertValidComponentSchemaInner(
+  schema: ComponentSchema,
+  schemaAncestors: ComponentSchema[],
   propPath: string[],
-  seenProps: Set<ComponentPropField>,
+  seenProps: Set<ComponentSchema>,
   lists: ReadonlySet<string>
 ) {
-  if (prop.kind === 'form' || prop.kind === 'child') {
+  if (schema.kind === 'form' || schema.kind === 'child') {
     return;
   }
-  if (prop.kind === 'relationship') {
-    if (lists.has(prop.listKey)) {
+  if (schema.kind === 'relationship') {
+    if (lists.has(schema.listKey)) {
       return;
     }
     throw new Error(
       `The relationship field at "${propPath.join('.')}"  has the listKey "${
-        prop.listKey
-      }" but no list named "${prop.listKey}" exists.`
+        schema.listKey
+      }" but no list named "${schema.listKey}" exists.`
     );
   }
-  const ancestor = propAncestors.indexOf(prop);
+  const ancestor = schemaAncestors.indexOf(schema);
   if (ancestor !== -1) {
     throw new Error(
       `The field at "${propPath.join(
@@ -41,59 +38,59 @@ function assertValidComponentPropFieldInner(
       )}" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure.`
     );
   }
-  if (seenProps.has(prop)) {
+  if (seenProps.has(schema)) {
     return;
   }
-  propPath.push(prop.kind);
+  propPath.push(schema.kind);
   try {
-    seenProps.add(prop);
-    if (prop.kind === 'array') {
-      assertValidComponentPropFieldInner(prop.element, [], propPath, seenProps, lists);
+    seenProps.add(schema);
+    if (schema.kind === 'array') {
+      assertValidComponentSchemaInner(schema.element, [], propPath, seenProps, lists);
       return;
     }
-    if (prop.kind === 'object') {
-      propAncestors.push(prop);
-      for (const [key, innerProp] of Object.entries(prop.value)) {
+    if (schema.kind === 'object') {
+      schemaAncestors.push(schema);
+      for (const [key, innerProp] of Object.entries(schema.value)) {
         propPath.push(key);
-        if (prop.value[key] !== innerProp) {
+        if (schema.value[key] !== innerProp) {
           throw new Error(
             `Fields on an object field must not change over time but the field at "${propPath.join(
               '.'
             )}" changes between accesses`
           );
         }
-        assertValidComponentPropFieldInner(innerProp, propAncestors, propPath, seenProps, lists);
+        assertValidComponentSchemaInner(innerProp, schemaAncestors, propPath, seenProps, lists);
         propPath.pop();
       }
-      propAncestors.pop();
+      schemaAncestors.pop();
       return;
     }
-    if (prop.kind === 'conditional') {
-      propAncestors.push(prop);
-      const stringifiedDefaultDiscriminant = prop.discriminant.defaultValue.toString();
-      for (const [key, innerProp] of Object.entries(prop.values)) {
+    if (schema.kind === 'conditional') {
+      schemaAncestors.push(schema);
+      const stringifiedDefaultDiscriminant = schema.discriminant.defaultValue.toString();
+      for (const [key, innerProp] of Object.entries(schema.values)) {
         propPath.push(key);
-        if (prop.values[key] !== innerProp) {
+        if (schema.values[key] !== innerProp) {
           throw new Error(
             `Fields on a conditional field must not change over time but the field at "${propPath.join(
               '.'
             )}" changes between accesses`
           );
         }
-        assertValidComponentPropFieldInner(
+        assertValidComponentSchemaInner(
           innerProp,
-          key === stringifiedDefaultDiscriminant ? propAncestors : [],
+          key === stringifiedDefaultDiscriminant ? schemaAncestors : [],
           propPath,
           seenProps,
           lists
         );
         propPath.pop();
       }
-      propAncestors.pop();
+      schemaAncestors.pop();
       return;
     }
   } finally {
     propPath.pop();
   }
-  assertNever(prop);
+  assertNever(schema);
 }
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 f190cf4c9e7..d5adc8f9008 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
@@ -10,7 +10,7 @@ import { ReactElement } from 'react';
 import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
 import {
   ArrayField,
-  ComponentPropField,
+  ComponentSchema,
   ConditionalField,
   FormField,
   ObjectField,
@@ -21,8 +21,8 @@ import {
 import { assertNever } from './utils';
 
 const fieldRenderers: {
-  [Key in ComponentPropField['kind']]: (props: {
-    props: PreviewProps<Extract<ComponentPropField, { kind: Key }>> & {
+  [Key in ComponentSchema['kind']]: (props: {
+    props: PreviewProps<Extract<ComponentSchema, { kind: Key }>> & {
       autoFocus?: boolean;
       forceValidation?: boolean;
     };
@@ -51,16 +51,16 @@ const fieldRenderers: {
     const keystone = useKeystone();
     return (
       <FieldContainer>
-        <FieldLabel>{props.field.label}</FieldLabel>
+        <FieldLabel>{props.schema.label}</FieldLabel>
         <RelationshipSelect
           autoFocus={props.autoFocus}
           controlShouldRenderValue
           isDisabled={false}
-          list={keystone.adminMeta.lists[props.field.listKey]}
-          extraSelection={props.field.selection || ''}
+          list={keystone.adminMeta.lists[props.schema.listKey]}
+          extraSelection={props.schema.selection || ''}
           portalMenu
           state={
-            props.field.many
+            props.schema.many
               ? {
                   kind: 'many',
                   value: (props.value as RelationshipData[]).map(x => ({
@@ -90,7 +90,7 @@ const fieldRenderers: {
   child: () => null,
   form: function FormField({ props }) {
     return (
-      <props.field.Input
+      <props.schema.Input
         autoFocus={!!props.autoFocus}
         value={props.value}
         onChange={props.onChange}
@@ -99,7 +99,7 @@ const fieldRenderers: {
     );
   },
   object: function ObjectField({ props }) {
-    const firstFocusable = props.autoFocus ? findFocusableObjectFieldKey(props.field) : undefined;
+    const firstFocusable = props.autoFocus ? findFocusableObjectFieldKey(props.schema) : undefined;
     return (
       <Stack gap="xlarge">
         {Object.entries(props.fields).map(
@@ -116,7 +116,7 @@ const fieldRenderers: {
     );
   },
   conditional: function ConditionalField({ props }) {
-    const discriminant = props.field.discriminant as FormField<string | boolean, unknown>;
+    const discriminant = props.schema.discriminant as FormField<string | boolean, unknown>;
     return (
       <Stack gap="xlarge">
         {useMemo(
@@ -141,14 +141,14 @@ const fieldRenderers: {
 export type NonChildFieldComponentPropField =
   | FormField<any, any>
   | ObjectField
-  | ConditionalField<FormField<any, any>, { [key: string]: ComponentPropField }>
+  | ConditionalField<FormField<any, any>, { [key: string]: ComponentSchema }>
   | RelationshipField<boolean>
-  | ArrayField<ComponentPropField>;
+  | ArrayField<ComponentSchema>;
 
 function isNonChildFieldPreviewProps(
-  props: PreviewProps<ComponentPropField>
+  props: PreviewProps<ComponentSchema>
 ): props is PreviewProps<NonChildFieldComponentPropField> {
-  const kind: ComponentPropField['kind'] = (props as any)?.field?.kind;
+  const kind: ComponentSchema['kind'] = (props as any)?.field?.kind;
   if (!kind) {
     return false;
   }
@@ -161,16 +161,16 @@ export const FormValueContentFromPreview = memo(function FormValueContentFromPre
     forceValidation?: boolean;
   }
 ) {
-  if (props.field.preview) {
-    return <props.field.preview {...(props as any)} />;
+  if (props.schema.preview) {
+    return <props.schema.preview {...(props as any)} />;
   }
 
-  const Comp = fieldRenderers[props.field.kind];
+  const Comp = fieldRenderers[props.schema.kind];
   return <Comp props={props as any} />;
 });
 
 const SortableItemInForm = memo(function SortableItemInForm(
-  props: PreviewProps<ComponentPropField> & { elementKey: string }
+  props: PreviewProps<ComponentSchema> & { elementKey: string }
 ) {
   return (
     <SortableItem elementKey={props.elementKey}>
@@ -182,8 +182,8 @@ const SortableItemInForm = memo(function SortableItemInForm(
   );
 });
 
-function findFocusableObjectFieldKey(prop: ObjectField): string | undefined {
-  for (const [key, innerProp] of Object.entries(prop.value)) {
+function findFocusableObjectFieldKey(schema: ObjectField): string | undefined {
+  for (const [key, innerProp] of Object.entries(schema.value)) {
     const childFocusable = canFieldBeFocused(innerProp);
     if (childFocusable) {
       return key;
@@ -192,25 +192,25 @@ function findFocusableObjectFieldKey(prop: ObjectField): string | undefined {
   return undefined;
 }
 
-export function canFieldBeFocused(prop: ComponentPropField): boolean {
+export function canFieldBeFocused(schema: ComponentSchema): boolean {
   if (
-    prop.kind === 'array' ||
-    prop.kind === 'conditional' ||
-    prop.kind === 'form' ||
-    prop.kind === 'relationship'
+    schema.kind === 'array' ||
+    schema.kind === 'conditional' ||
+    schema.kind === 'form' ||
+    schema.kind === 'relationship'
   ) {
     return true;
   }
-  if (prop.kind === 'child') {
+  if (schema.kind === 'child') {
     return false;
   }
-  if (prop.kind === 'object') {
-    for (const innerProp of Object.values(prop.value)) {
+  if (schema.kind === 'object') {
+    for (const innerProp of Object.values(schema.value)) {
       if (canFieldBeFocused(innerProp)) {
         return true;
       }
     }
     return false;
   }
-  assertNever(prop);
+  assertNever(schema);
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index f514d786dbb..b086945f385 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -22,7 +22,7 @@ import { Tooltip } from '@keystone-ui/tooltip';
 import { NotEditable } from '../../component-blocks';
 
 import { InlineDialog, ToolbarButton, ToolbarGroup, ToolbarSeparator } from '../primitives';
-import { ComponentPropField, ComponentBlock } from '../../component-blocks';
+import { ComponentSchema, ComponentBlock } from '../../component-blocks';
 import {
   insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading,
   useElementWithSetNodes,
@@ -30,7 +30,7 @@ import {
 } from '../utils';
 import { assert } from '../utils';
 import { areArraysEqual } from '../document-features-normalization';
-import { clientSideValidateProp, getFieldAtPropPath, ReadonlyPropPath } from './utils';
+import { clientSideValidateProp, getSchemaAtPropPath, ReadonlyPropPath } from './utils';
 import { ChildrenByPathContext, getKeysForArrayValue } from './preview-props';
 import { getInitialPropsValue, getInitialValue } from './initial-values';
 import { FormValue } from './edit-mode';
@@ -43,10 +43,10 @@ export const ComponentBlockContext = createContext<Record<string, ComponentBlock
 
 export function getPlaceholderTextForPropPath(
   propPath: ReadonlyPropPath,
-  fields: Record<string, ComponentPropField>,
+  fields: Record<string, ComponentSchema>,
   formProps: Record<string, any>
 ): string {
-  const field = getFieldAtPropPath(propPath, formProps, fields);
+  const field = getSchemaAtPropPath(propPath, formProps, fields);
   if (field?.kind === 'child') {
     return field.options.placeholder;
   }
@@ -110,7 +110,7 @@ export const ComponentBlocksElement = ({
   const isValid = useMemo(() => {
     return componentBlock
       ? clientSideValidateProp(
-          { kind: 'object', value: componentBlock.props },
+          { kind: 'object', value: componentBlock.schema },
           currentElement.props
         )
       : true;
@@ -136,7 +136,7 @@ export const ComponentBlocksElement = ({
         const childPropPaths = findChildPropPathsWithPrevious(
           newProps,
           prevProps,
-          { kind: 'object', value: componentBlock!.props },
+          { kind: 'object', value: componentBlock!.schema },
           [],
           [],
           []
@@ -248,7 +248,7 @@ export const ComponentBlocksElement = ({
         throw new Error('expected component block to exist when called');
       };
     }
-    return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, onPropsChange);
+    return createGetPreviewProps({ kind: 'object', value: componentBlock.schema }, onPropsChange);
   }, [componentBlock, onPropsChange]);
 
   if (!componentBlock) {
@@ -451,7 +451,7 @@ function ComponentBlockRender({
   children: any;
 }) {
   const getPreviewProps = useMemo(() => {
-    return createGetPreviewProps({ kind: 'object', value: componentBlock.props }, props => {
+    return createGetPreviewProps({ kind: 'object', value: componentBlock.schema }, props => {
       onChange(props);
     });
   }, [onChange, componentBlock]);
@@ -505,37 +505,37 @@ type ChildPropPathWithPrevious = {
 function findChildPropPathsWithPrevious(
   value: any,
   prevValue: any,
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   newPath: ReadonlyPropPath,
   prevPath: ReadonlyPropPath | undefined,
   pathWithKeys: readonly string[] | undefined
 ): ChildPropPathWithPrevious[] {
-  switch (prop.kind) {
+  switch (schema.kind) {
     case 'form':
     case 'relationship':
       return [];
     case 'child':
-      return [{ path: newPath, prevPath, options: prop.options }];
+      return [{ path: newPath, prevPath, options: schema.options }];
     case 'conditional':
       const hasChangedDiscriminant = value.discriminant === prevValue.discriminant;
       return findChildPropPathsWithPrevious(
         value.value,
         hasChangedDiscriminant
           ? prevValue.value
-          : getInitialPropsValue(prop.values[value.discriminant]),
-        prop.values[value.discriminant],
+          : getInitialPropsValue(schema.values[value.discriminant]),
+        schema.values[value.discriminant],
         newPath.concat('value'),
         hasChangedDiscriminant ? undefined : prevPath?.concat('value'),
         hasChangedDiscriminant ? undefined : pathWithKeys?.concat('value')
       );
     case 'object': {
       let paths: ChildPropPathWithPrevious[] = [];
-      Object.keys(prop.value).forEach(key => {
+      Object.keys(schema.value).forEach(key => {
         paths.push(
           ...findChildPropPathsWithPrevious(
             value[key],
             prevValue[key],
-            prop.value[key],
+            schema.value[key],
             newPath.concat(key),
             prevPath?.concat(key),
             pathWithKeys?.concat(key)
@@ -553,7 +553,7 @@ function findChildPropPathsWithPrevious(
         const prevIdx = prevKeys.indexOf(key);
         let prevVal;
         if (prevIdx === -1) {
-          prevVal = getInitialPropsValue(prop.element);
+          prevVal = getInitialPropsValue(schema.element);
         } else {
           prevVal = prevValue[prevIdx];
         }
@@ -561,7 +561,7 @@ function findChildPropPathsWithPrevious(
           ...findChildPropPathsWithPrevious(
             val,
             prevVal,
-            prop.element,
+            schema.element,
             newPath.concat(i),
             prevIdx === -1 ? undefined : prevPath?.concat(prevIdx),
             prevIdx === -1 ? undefined : pathWithKeys?.concat(key)
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 6f06f56caca..83ce94ea6f5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -1,14 +1,14 @@
-import { ComponentPropField, ComponentBlock } from '../../component-blocks';
+import { ComponentSchema, ComponentBlock } from '../../component-blocks';
 import { getKeysForArrayValue, getNewArrayElementKey, setKeysForArrayValue } from './preview-props';
 import { assertNever, findChildPropPaths } from './utils';
 
 export function getInitialValue(type: string, componentBlock: ComponentBlock) {
-  const props = getInitialPropsValue({ kind: 'object', value: componentBlock.props });
+  const props = getInitialPropsValue({ kind: 'object', value: componentBlock.schema });
   return {
     type: 'component-block' as const,
     component: type,
     props,
-    children: findChildPropPaths(props, componentBlock.props).map(x => ({
+    children: findChildPropPaths(props, componentBlock.schema).map(x => ({
       type: `component-${x.options.kind}-prop` as const,
       propPath: x.path,
       children: [
@@ -20,25 +20,25 @@ export function getInitialValue(type: string, componentBlock: ComponentBlock) {
   };
 }
 
-export function getInitialPropsValue(prop: ComponentPropField): any {
-  switch (prop.kind) {
+export function getInitialPropsValue(schema: ComponentSchema): any {
+  switch (schema.kind) {
     case 'form':
-      return prop.defaultValue;
+      return schema.defaultValue;
     case 'child':
       return null;
     case 'relationship':
-      return prop.many ? [] : null;
+      return schema.many ? [] : null;
     case 'conditional': {
-      const defaultValue = prop.discriminant.defaultValue;
+      const defaultValue = schema.discriminant.defaultValue;
       return {
         discriminant: defaultValue,
-        value: getInitialPropsValue(prop.values[defaultValue.toString()]),
+        value: getInitialPropsValue(schema.values[defaultValue.toString()]),
       };
     }
     case 'object': {
       let obj: Record<string, any> = {};
-      Object.keys(prop.value).forEach(key => {
-        obj[key] = getInitialPropsValue(prop.value[key]);
+      Object.keys(schema.value).forEach(key => {
+        obj[key] = getInitialPropsValue(schema.value[key]);
       });
       return obj;
     }
@@ -46,36 +46,36 @@ export function getInitialPropsValue(prop: ComponentPropField): any {
       return [];
     }
   }
-  assertNever(prop);
+  assertNever(schema);
 }
 
 export function getInitialPropsValueFromInitializer(
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   initializer: any
 ): any {
-  switch (prop.kind) {
+  switch (schema.kind) {
     case 'form':
-      return initializer === undefined ? prop.defaultValue : initializer;
+      return initializer === undefined ? schema.defaultValue : initializer;
     case 'child':
       return null;
     case 'relationship':
-      return initializer === undefined ? (prop.many ? [] : null) : initializer;
+      return initializer === undefined ? (schema.many ? [] : null) : initializer;
     case 'conditional': {
       const defaultValue =
-        initializer === undefined ? prop.discriminant.defaultValue : initializer.discriminant;
+        initializer === undefined ? schema.discriminant.defaultValue : initializer.discriminant;
       return {
         discriminant: defaultValue,
         value: getInitialPropsValueFromInitializer(
-          prop.values[defaultValue.toString()],
+          schema.values[defaultValue.toString()],
           initializer === undefined ? undefined : initializer.value
         ),
       };
     }
     case 'object': {
       let obj: Record<string, any> = {};
-      Object.keys(prop.value).forEach(key => {
+      Object.keys(schema.value).forEach(key => {
         obj[key] = getInitialPropsValueFromInitializer(
-          prop.value[key],
+          schema.value[key],
           initializer === undefined ? undefined : initializer[key]
         );
       });
@@ -83,18 +83,18 @@ export function getInitialPropsValueFromInitializer(
     }
     case 'array': {
       return ((initializer ?? []) as { value?: unknown }[]).map(x =>
-        getInitialPropsValueFromInitializer(prop.element, x.value)
+        getInitialPropsValueFromInitializer(schema.element, x.value)
       );
     }
   }
-  assertNever(prop);
+  assertNever(schema);
 }
 
-export function updateValue(prop: ComponentPropField, currentValue: any, updater: any): any {
+export function updateValue(schema: ComponentSchema, currentValue: any, updater: any): any {
   if (updater === undefined) {
     return currentValue;
   }
-  switch (prop.kind) {
+  switch (schema.kind) {
     case 'relationship':
     case 'form':
       return updater;
@@ -106,20 +106,20 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
         value:
           updater.discriminant === currentValue.discriminant
             ? updateValue(
-                prop.values[updater.discriminant.toString()],
+                schema.values[updater.discriminant.toString()],
                 currentValue.value,
                 updater.value
               )
             : getInitialPropsValueFromInitializer(
-                prop.values[updater.discriminant.toString()],
+                schema.values[updater.discriminant.toString()],
                 updater.value
               ),
       };
     }
     case 'object': {
       let obj: Record<string, any> = {};
-      Object.keys(prop.value).forEach(key => {
-        obj[key] = updateValue(prop.value[key], currentValue[key], updater[key]);
+      Object.keys(schema.value).forEach(key => {
+        obj[key] = updateValue(schema.value[key], currentValue[key], updater[key]);
       });
       return obj;
     }
@@ -156,13 +156,13 @@ export function updateValue(prop: ComponentPropField, currentValue: any, updater
       const val = newVal.map((x, i) => {
         const id = keys[i];
         if (prevValuesByKey.has(id)) {
-          return updateValue(prop.element, prevValuesByKey.get(id), x.value);
+          return updateValue(schema.element, prevValuesByKey.get(id), x.value);
         }
-        return getInitialPropsValueFromInitializer(prop.element, x.value);
+        return getInitialPropsValueFromInitializer(schema.element, x.value);
       });
       setKeysForArrayValue(val, keys);
       return val;
     }
   }
-  assertNever(prop);
+  assertNever(schema);
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
index ec9291cde72..09ecf37f089 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
@@ -8,12 +8,12 @@ const componentBlocks = {
   basic: component({
     component: () => null,
     label: 'Basic',
-    props: { prop: fields.text({ label: 'Prop' }) },
+    schema: { prop: fields.text({ label: 'Prop' }) },
   }),
   withChildElements: component({
     component: () => null,
     label: 'With Child Elements',
-    props: {
+    schema: {
       prop: fields.text({ label: 'Prop' }),
       block: fields.child({ kind: 'block', placeholder: '' }),
       inline: fields.child({ kind: 'inline', placeholder: '' }),
@@ -22,7 +22,7 @@ const componentBlocks = {
   withChildElementsBlockLast: component({
     component: () => null,
     label: 'With Child Elements Block last',
-    props: {
+    schema: {
       prop: fields.text({ label: 'Prop' }),
       inline: fields.child({ kind: 'inline', placeholder: '' }),
       block: fields.child({ kind: 'block', placeholder: '' }),
@@ -31,7 +31,7 @@ const componentBlocks = {
   complex: component({
     component: () => null,
     label: 'Complex',
-    props: {
+    schema: {
       object: fields.object({
         prop: fields.text({ label: 'Prop' }),
         conditional: fields.conditional(fields.checkbox({ label: 'Conditional' }), {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index dd9b3665d79..246440dc705 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -45,7 +45,7 @@ const componentBlocks = {
   void: component({
     component: () => null,
     label: 'Void',
-    props: { text: fields.text({ label: 'Text' }) },
+    schema: { text: fields.text({ label: 'Text' }) },
   }),
   complex: component({
     component: props => {
@@ -59,7 +59,7 @@ const componentBlocks = {
       );
     },
     label: 'Complex',
-    props: {
+    schema: {
       object: objectProp,
     },
   }),
@@ -175,7 +175,7 @@ test('inserting a complex component block', () => {
 });
 
 const getPreviewProps = (editor: Editor) =>
-  createGetPreviewProps({ kind: 'object', value: componentBlocks.complex.props }, props => {
+  createGetPreviewProps({ kind: 'object', value: componentBlocks.complex.schema }, props => {
     Transforms.setNodes(editor, { props: props((editor.children[0] as any).props) }, { at: [0] });
   })((editor.children[0] as any).props);
 
@@ -223,39 +223,39 @@ test('preview props api', () => {
 
   let previewProps = getPreviewProps(editor);
   const expectedPreviewProps: typeof previewProps = {
-    field: {
+    schema: {
       kind: 'object',
-      value: componentBlocks.complex.props,
+      value: componentBlocks.complex.schema,
     },
     fields: {
       object: {
-        field: componentBlocks.complex.props.object,
+        schema: componentBlocks.complex.schema.object,
         fields: {
           block: {
             element: React.createElement(ChildFieldEditable, { path: ['object', 'block'] }),
-            field: componentBlocks.complex.props.object.value.block,
+            schema: componentBlocks.complex.schema.object.value.block,
           },
           conditional: {
             discriminant: false,
-            field: componentBlocks.complex.props.object.value.conditional,
+            schema: componentBlocks.complex.schema.object.value.conditional,
             onChange: expect.any(Function),
             options: undefined,
             value: {
-              field: componentBlocks.complex.props.object.value.conditional.values.false,
+              schema: componentBlocks.complex.schema.object.value.conditional.values.false,
               onChange: expect.any(Function),
               value: null,
             },
           },
           conditionalSelect: {
             discriminant: 'a',
-            field: componentBlocks.complex.props.object.value.conditionalSelect,
+            schema: componentBlocks.complex.schema.object.value.conditionalSelect,
             onChange: expect.any(Function),
             options: [
               { label: 'A', value: 'a' },
               { label: 'B', value: 'b' },
             ],
             value: {
-              field: componentBlocks.complex.props.object.value.conditionalSelect.values.a,
+              schema: componentBlocks.complex.schema.object.value.conditionalSelect.values.a,
               onChange: expect.any(Function),
               options: undefined,
               value: '',
@@ -263,21 +263,21 @@ test('preview props api', () => {
           },
           inline: {
             element: React.createElement(ChildFieldEditable, { path: ['object', 'inline'] }),
-            field: componentBlocks.complex.props.object.value.inline,
+            schema: componentBlocks.complex.schema.object.value.inline,
           },
           many: {
-            field: componentBlocks.complex.props.object.value.many,
+            schema: componentBlocks.complex.schema.object.value.many,
             value: [],
             onChange: expect.any(Function),
           },
           prop: {
-            field: componentBlocks.complex.props.object.value.prop,
+            schema: componentBlocks.complex.schema.object.value.prop,
             onChange: expect.any(Function),
             options: undefined,
             value: '',
           },
           select: {
-            field: componentBlocks.complex.props.object.value.select,
+            schema: componentBlocks.complex.schema.object.value.select,
             onChange: expect.any(Function),
             options: [
               { label: 'A', value: 'a' },
@@ -372,7 +372,7 @@ test('preview props conditional change', () => {
   `);
   const conditionalPreviewProps = getPreviewProps(editor).fields.object.fields.conditional;
   const expectedConditionalPreviewProps: typeof conditionalPreviewProps = {
-    field: componentBlocks.complex.props.object.value.conditional,
+    schema: componentBlocks.complex.schema.object.value.conditional,
     discriminant: true,
     onChange: expect.any(Function),
     options: undefined,
@@ -380,7 +380,7 @@ test('preview props conditional change', () => {
       element: React.createElement(ChildFieldEditable, {
         path: ['object', 'conditional', 'value'],
       }),
-      field: componentBlocks.complex.props.object.value.conditional.values.true,
+      schema: componentBlocks.complex.schema.object.value.conditional.values.true,
     },
   };
   expect(getPreviewProps(editor).fields.object.fields.conditional).toEqual(
@@ -443,14 +443,14 @@ test('changing conditional with form inside', () => {
     getPreviewProps(editor).fields.object.fields.conditionalSelect;
   const expectedConditionalSelectPreviewProps: typeof conditionalSelectPreviewProps = {
     discriminant: 'b',
-    field: componentBlocks.complex.props.object.value.conditionalSelect,
+    schema: componentBlocks.complex.schema.object.value.conditionalSelect,
     onChange: expect.any(Function),
     options: [
       { label: 'A', value: 'a' },
       { label: 'B', value: 'b' },
     ],
     value: {
-      field: componentBlocks.complex.props.object.value.conditionalSelect.values.b,
+      schema: componentBlocks.complex.schema.object.value.conditionalSelect.values.b,
       onChange: expect.any(Function),
       options: undefined,
       value: 'B',
@@ -477,14 +477,14 @@ test('changing form inside conditional', () => {
     getPreviewProps(editor).fields.object.fields.conditionalSelect;
   const expectedConditionalSelectPreviewProps: typeof conditionalSelectPreviewProps = {
     discriminant: 'a',
-    field: componentBlocks.complex.props.object.value.conditionalSelect,
+    schema: componentBlocks.complex.schema.object.value.conditionalSelect,
     onChange: expect.any(Function),
     options: [
       { label: 'A', value: 'a' },
       { label: 'B', value: 'b' },
     ],
     value: {
-      field: componentBlocks.complex.props.object.value.conditionalSelect.values.a,
+      schema: componentBlocks.complex.schema.object.value.conditionalSelect.values.a,
       onChange: expect.any(Function),
       options: undefined,
       value: 'Some content',
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index 59d0c583e2a..ec1845ee65b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -21,7 +21,7 @@ const qAndA = component({
       })
     ),
   label: '',
-  props: {
+  schema: {
     children: fields.array(
       fields.object({
         question: fields.child({ kind: 'inline', placeholder: 'Question' }),
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 9034e440893..241d6650370 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -22,7 +22,7 @@ const table = component({
       })
     ),
   label: '',
-  props: {
+  schema: {
     children: fields.array(
       fields.array(
         fields.object({
@@ -277,7 +277,7 @@ test('add to multiple in child field in nested array', () => {
       },
     }
   );
-  const previewProps = createGetPreviewProps({ kind: 'object', value: table.props }, () => {})(
+  const previewProps = createGetPreviewProps({ kind: 'object', value: table.schema }, () => {})(
     (editor.children[0] as any).props
   );
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
index aab5070320b..fcc393af6a8 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
@@ -10,12 +10,12 @@ const componentBlocks = {
   basic: component({
     component: () => null,
     label: 'Basic',
-    props: { prop: fields.text({ label: 'Prop' }) },
+    schema: { prop: fields.text({ label: 'Prop' }) },
   }),
   withChildElements: component({
     component: () => null,
     label: 'With Child Elements',
-    props: {
+    schema: {
       prop: fields.text({ label: 'Prop' }),
       block: fields.child({ kind: 'block', placeholder: '' }),
       inline: fields.child({ kind: 'inline', placeholder: '' }),
@@ -24,7 +24,7 @@ const componentBlocks = {
   withLotsOfChildElements: component({
     component: () => null,
     label: 'With Lots of Child Elements',
-    props: {
+    schema: {
       block: fields.child({ kind: 'block', placeholder: '' }),
       inline: fields.child({ kind: 'inline', placeholder: '' }),
       last: fields.child({ kind: 'block', placeholder: '' }),
@@ -565,7 +565,7 @@ test('toggling to heading when in an inline prop', () => {
         inline: component({
           component: () => null,
           label: '',
-          props: {
+          schema: {
             child: fields.child({ kind: 'inline', placeholder: '' }),
             other: fields.child({ kind: 'block', placeholder: '' }),
           },
@@ -635,7 +635,7 @@ test('child field in array field insertBreak', () => {
         myList: component({
           component: () => null,
           label: '',
-          props: {
+          schema: {
             children: fields.array(
               fields.object({
                 content: fields.child({ kind: 'inline', placeholder: '' }),
@@ -734,7 +734,7 @@ test('child field in array field deleteBackward at end', () => {
         myList: component({
           component: () => null,
           label: '',
-          props: {
+          schema: {
             children: fields.array(
               fields.object({
                 content: fields.child({ kind: 'inline', placeholder: '' }),
@@ -822,7 +822,7 @@ test('child field in array field deleteBackward in middle', () => {
         myList: component({
           component: () => null,
           label: '',
-          props: {
+          schema: {
             children: fields.array(
               fields.object({
                 content: fields.child({ kind: 'inline', placeholder: '' }),
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
index 2012c0bb90a..9ac993b63d9 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
@@ -15,10 +15,10 @@ test('onChange on a conditional field updates props.value', () => {
   });
   let props = getPreviewProps(val);
   assert(props.discriminant === false);
-  expect(props.value.field).toBe(field.values.false);
+  expect(props.value.schema).toBe(field.values.false);
   props.onChange(true);
   expect(props.discriminant).toBe(true);
-  expect(props.value.field).toBe(field.values.true);
+  expect(props.value.schema).toBe(field.values.true);
 });
 
 // note props.value is the preview props for the value of the conditional field, not the value itself
@@ -34,10 +34,10 @@ test("onChange on a conditional field updates props.value where the value doesn'
   });
   let props = getPreviewProps(val);
   assert(props.discriminant === false);
-  expect(props.value.field).toBe(field.values.false);
+  expect(props.value.schema).toBe(field.values.false);
   props.onChange(true);
   expect(props.discriminant).toBe(true);
-  expect(props.value.field).toBe(field.values.true);
+  expect(props.value.schema).toBe(field.values.true);
 });
 
 test("array fields don't keep the props of an array item around after removing the item", () => {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 950b1ec1125..e4224bd8613 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement, useContext } from 'react';
 import {
   ArrayField,
-  ComponentPropField,
+  ComponentSchema,
   ConditionalField,
-  ValueForComponentPropField,
+  ValueForComponentSchema,
   FormField,
   FormFieldValue,
   HydratedRelationshipData,
@@ -46,14 +46,14 @@ export function ChildFieldEditable({ path }: { path: readonly string[] }) {
   return child;
 }
 
-function castToMemoizedInfoForProp<
+function castToMemoizedInfoForSchema<
   T extends {
-    [Kind in ComponentPropField['kind']]: (
-      prop: Extract<ComponentPropField, { kind: Kind }>,
+    [Kind in ComponentSchema['kind']]: (
+      schema: Extract<ComponentSchema, { kind: Kind }>,
       onChange: (
         cb: (
-          prevVal: ValueForComponentPropField<Extract<ComponentPropField, { kind: Kind }>>
-        ) => ValueForComponentPropField<Extract<ComponentPropField, { kind: Kind }>>
+          prevVal: ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>
+        ) => ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>
       ) => void
     ) => unknown;
   }
@@ -61,42 +61,42 @@ function castToMemoizedInfoForProp<
   return val;
 }
 
-const memoizedInfoForProp = castToMemoizedInfoForProp({
-  form(prop, onChange) {
+const memoizedInfoForSchema = castToMemoizedInfoForSchema({
+  form(schema, onChange) {
     return (newVal: unknown) => onChange(() => newVal);
   },
-  array(prop, onChange) {
+  array(schema, onChange) {
     return {
       rawOnChange: onChange,
       inner: new Map<
         string,
         {
           onChange: (cb: (val: unknown) => unknown) => void;
-          elementWithKey: { key: string } & PreviewProps<ComponentPropField>;
-          element: PreviewProps<ComponentPropField>;
+          elementWithKey: { key: string } & PreviewProps<ComponentSchema>;
+          element: PreviewProps<ComponentSchema>;
         }
       >(),
       onChange(updater: readonly { key: string | undefined; value?: unknown }[]) {
-        onChange(value => updateValue(prop, value, updater));
+        onChange(value => updateValue(schema, value, updater));
       },
     };
   },
   child() {},
-  conditional(prop, onChange) {
+  conditional(schema, onChange) {
     return {
       onChange: (discriminant: string | boolean, value?: unknown) =>
-        onChange(val => updateValue(prop, val, { discriminant, value })),
+        onChange(val => updateValue(schema, val, { discriminant, value })),
       onChangeForValue: (cb: (prevVal: unknown) => unknown) =>
         onChange(val => ({ discriminant: val.discriminant, value: cb(val.value) })),
     };
   },
-  object(prop, onChange) {
+  object(schema, onChange) {
     return {
       onChange: (updater: Record<string, unknown>) => {
-        onChange(value => updateValue(prop, value, updater));
+        onChange(value => updateValue(schema, value, updater));
       },
       innerOnChanges: Object.fromEntries(
-        Object.keys(prop.value).map(key => {
+        Object.keys(schema.value).map(key => {
           return [
             key,
             (newVal: (prevVal: unknown) => unknown) => {
@@ -107,7 +107,7 @@ const memoizedInfoForProp = castToMemoizedInfoForProp({
       ),
     };
   },
-  relationship(prop, onChange) {
+  relationship(schema, onChange) {
     return (newVal: HydratedRelationshipData | readonly HydratedRelationshipData[] | null) =>
       onChange(() => newVal);
   },
@@ -126,65 +126,65 @@ function getOrInsert<K, V>(map: GeneralMap<K, V>, key: K, val: (key: K) => V): V
   return map.get(key)!;
 }
 
-export function createGetPreviewProps<Field extends ComponentPropField>(
-  rootProp: Field,
+export function createGetPreviewProps<Schema extends ComponentSchema>(
+  rootSchema: Schema,
   rootOnChange: (
-    cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+    cb: (val: ValueForComponentSchema<Schema>) => ValueForComponentSchema<Schema>
   ) => void
 ) {
   const previewPropsFactories: {
-    [Kind in ComponentPropField['kind']]: (
-      prop: Extract<ComponentPropField, { kind: Kind }>,
-      value: ValueForComponentPropField<Extract<ComponentPropField, { kind: Kind }>>,
-      memoized: ReturnType<typeof memoizedInfoForProp[Kind]>,
+    [Kind in ComponentSchema['kind']]: (
+      schema: Extract<ComponentSchema, { kind: Kind }>,
+      value: ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>,
+      memoized: ReturnType<typeof memoizedInfoForSchema[Kind]>,
       path: readonly string[],
-      getInnerProp: <Field extends ComponentPropField>(
-        prop: Field,
-        value: ValueForComponentPropField<Field>,
+      getInnerProp: <Field extends ComponentSchema>(
+        schema: Field,
+        value: ValueForComponentSchema<Field>,
         onChange: (
-          cb: (prevVal: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+          cb: (prevVal: ValueForComponentSchema<Field>) => ValueForComponentSchema<Field>
         ) => void,
         key: string
       ) => PreviewProps<Field>
-    ) => PreviewProps<Extract<ComponentPropField, { kind: Kind }>>;
+    ) => PreviewProps<Extract<ComponentSchema, { kind: Kind }>>;
   } = {
-    form(prop, value, onChange) {
+    form(schema, value, onChange) {
       return {
         value: value as FormFieldValue,
         onChange,
-        options: prop.options,
-        field: prop,
+        options: schema.options,
+        schema: schema,
       };
     },
-    child(prop, value, onChange, path) {
-      return { element: <ChildFieldEditable path={path} />, field: prop };
+    child(schema, value, onChange, path) {
+      return { element: <ChildFieldEditable path={path} />, schema: schema };
     },
-    object(prop, value, memoized, path, getInnerProp) {
-      const fields: Record<string, PreviewProps<ComponentPropField>> = {};
+    object(schema, value, memoized, path, getInnerProp) {
+      const fields: Record<string, PreviewProps<ComponentSchema>> = {};
 
-      Object.keys(prop.value).forEach(key => {
+      Object.keys(schema.value).forEach(key => {
         fields[key] = getInnerProp(
-          prop.value[key],
+          schema.value[key],
           (value as any)[key],
           memoized.innerOnChanges[key],
           key
         );
       });
 
-      const previewProps: PreviewProps<ObjectField<Record<string, ComponentPropField>>> = {
+      const previewProps: PreviewProps<ObjectField<Record<string, ComponentSchema>>> = {
         fields,
         onChange: memoized.onChange,
-        field: prop,
+        schema: schema,
       };
       return previewProps;
     },
-    array(prop, value, memoized, path, getInnerProp) {
+    array(schema, value, memoized, path, getInnerProp) {
       const arrayValue = value as readonly unknown[];
       const keys = getKeysForArrayValue(arrayValue);
 
       const unusedKeys = new Set(getKeysForArrayValue(value));
 
-      const props: PreviewProps<ArrayField<ComponentPropField>> = {
+      const props: PreviewProps<ArrayField<ComponentSchema>> = {
         elements: arrayValue.map((val, i) => {
           const key = keys[i];
           unusedKeys.delete(key);
@@ -199,7 +199,7 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
                 return newValue;
               });
             };
-            const element = getInnerProp(prop.element, val, onChange, key);
+            const element = getInnerProp(schema.element, val, onChange, key);
             return {
               element,
               elementWithKey: {
@@ -209,7 +209,7 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
               onChange,
             };
           });
-          const currentInnerProp = getInnerProp(prop.element, val, element.onChange, key);
+          const currentInnerProp = getInnerProp(schema.element, val, element.onChange, key);
           if (element.element !== currentInnerProp) {
             element.element = currentInnerProp;
             element.elementWithKey = {
@@ -219,7 +219,7 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
           }
           return element.elementWithKey;
         }),
-        field: prop,
+        schema: schema,
         onChange: memoized.onChange,
       };
       for (const key of unusedKeys) {
@@ -227,52 +227,49 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
       }
       return props;
     },
-    relationship(prop, value, onChange) {
+    relationship(schema, value, onChange) {
       const props: PreviewProps<RelationshipField<boolean>> = {
         value: value,
         onChange,
-        field: prop,
+        schema: schema,
       };
       return props;
     },
-    conditional(prop, value, memoized, path, getInnerProp) {
+    conditional(schema, value, memoized, path, getInnerProp) {
       const props: PreviewProps<
-        ConditionalField<
-          FormField<string | boolean, unknown>,
-          { [key: string]: ComponentPropField }
-        >
+        ConditionalField<FormField<string | boolean, unknown>, { [key: string]: ComponentSchema }>
       > = {
         discriminant: value.discriminant as any,
         onChange: memoized.onChange,
-        options: prop.discriminant.options,
+        options: schema.discriminant.options,
         value: getInnerProp(
-          prop.values[value.discriminant.toString()],
+          schema.values[value.discriminant.toString()],
           value.value,
           memoized.onChangeForValue,
           'value'
         ),
-        field: prop,
+        schema: schema,
       };
       return props;
     },
   };
 
-  function getPreviewPropsForProp<Field extends ComponentPropField>(
-    prop: Field,
+  function getPreviewPropsForProp<Schema extends ComponentSchema>(
+    schema: Schema,
     value: unknown,
     memoedThing: { __memoizedThing: true },
     path: readonly string[],
-    getInnerProp: <Field extends ComponentPropField>(
-      prop: Field,
-      value: ValueForComponentPropField<Field>,
+    getInnerProp: <Field extends ComponentSchema>(
+      schema: Field,
+      value: ValueForComponentSchema<Field>,
       onChange: (
-        cb: (prevVal: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+        cb: (prevVal: ValueForComponentSchema<Field>) => ValueForComponentSchema<Field>
       ) => void,
       key: string
     ) => PreviewProps<Field>
-  ): PreviewProps<Field> {
-    return previewPropsFactories[prop.kind](
-      prop as any,
+  ): PreviewProps<Schema> {
+    return previewPropsFactories[schema.kind](
+      schema as any,
       value as any,
       memoedThing as any,
       path,
@@ -280,47 +277,53 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
     ) as any;
   }
 
-  function getInitialMemoState<Field extends ComponentPropField>(
-    prop: Field,
-    value: ValueForComponentPropField<Field>,
+  function getInitialMemoState<Schema extends ComponentSchema>(
+    schema: Schema,
+    value: ValueForComponentSchema<Schema>,
     onChange: (
-      cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+      cb: (val: ValueForComponentSchema<Schema>) => ValueForComponentSchema<Schema>
     ) => void,
     path: readonly string[]
-  ): MemoState<Field> {
-    let innerState = new Map<string, MemoState<ComponentPropField>>();
-    const blah = (
-      memoizedInfoForProp[prop.kind] as (
-        prop: ComponentPropField,
+  ): MemoState<Schema> {
+    let innerState = new Map<string, MemoState<ComponentSchema>>();
+    const memoizedInfo = (
+      memoizedInfoForSchema[schema.kind] as (
+        schema: ComponentSchema,
         onChange: (
-          cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+          cb: (val: ValueForComponentSchema<Schema>) => ValueForComponentSchema<Schema>
         ) => void
       ) => any
-    )(prop, onChange);
-    let state: MemoState<ComponentPropField> = {
+    )(schema, onChange);
+    let state: MemoState<ComponentSchema> = {
       value,
       inner: innerState,
-      props: getPreviewPropsForProp(prop, value, blah, path, (prop, value, onChange, key) => {
-        const state = getInitialMemoState(prop, value, onChange, path.concat(key));
-        innerState.set(key, state);
-        return state.props;
-      }),
-      field: prop,
-      cached: blah,
+      props: getPreviewPropsForProp(
+        schema,
+        value,
+        memoizedInfo,
+        path,
+        (schema, value, onChange, key) => {
+          const state = getInitialMemoState(schema, value, onChange, path.concat(key));
+          innerState.set(key, state);
+          return state.props;
+        }
+      ),
+      schema: schema,
+      cached: memoizedInfo,
     };
-    return state as MemoState<Field>;
+    return state as MemoState<Schema>;
   }
-  function getUpToDateProps<Field extends ComponentPropField>(
-    prop: Field,
-    value: ValueForComponentPropField<Field>,
+  function getUpToDateProps<Schema extends ComponentSchema>(
+    schema: Schema,
+    value: ValueForComponentSchema<Schema>,
     onChange: (
-      cb: (val: ValueForComponentPropField<Field>) => ValueForComponentPropField<Field>
+      cb: (val: ValueForComponentSchema<Schema>) => ValueForComponentSchema<Schema>
     ) => void,
-    memoState: MemoState<Field>,
+    memoState: MemoState<Schema>,
     path: readonly string[]
-  ): PreviewProps<Field> {
-    if (memoState.field !== prop) {
-      Object.assign(memoState, getInitialMemoState(prop, value, onChange, path));
+  ): PreviewProps<Schema> {
+    if (memoState.schema !== schema) {
+      Object.assign(memoState, getInitialMemoState(schema, value, onChange, path));
       return memoState.props;
     }
     if (memoState.value === value) {
@@ -329,15 +332,15 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
     memoState.value = value;
     const unusedKeys = new Set(memoState.inner.keys());
     memoState.props = getPreviewPropsForProp(
-      prop,
+      schema,
       value,
       memoState.cached as any,
       path,
-      (prop, value, onChange, innerMemoStateKey) => {
+      (schema, value, onChange, innerMemoStateKey) => {
         unusedKeys.delete(innerMemoStateKey);
         if (!memoState.inner.has(innerMemoStateKey)) {
           const innerState = getInitialMemoState(
-            prop,
+            schema,
             value,
             onChange,
             path.concat(innerMemoStateKey)
@@ -345,11 +348,11 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
           memoState.inner.set(innerMemoStateKey, innerState);
           return innerState.props;
         }
-        return getUpToDateProps<typeof prop>(
-          prop,
+        return getUpToDateProps<typeof schema>(
+          schema,
           value,
           onChange,
-          memoState.inner.get(innerMemoStateKey) as MemoState<typeof prop>,
+          memoState.inner.get(innerMemoStateKey) as MemoState<typeof schema>,
           path.concat(innerMemoStateKey)
         );
       }
@@ -359,20 +362,20 @@ export function createGetPreviewProps<Field extends ComponentPropField>(
     }
     return memoState.props;
   }
-  let memoState: MemoState<Field>;
-  return (value: ValueForComponentPropField<Field>): PreviewProps<Field> => {
+  let memoState: MemoState<Schema>;
+  return (value: ValueForComponentSchema<Schema>): PreviewProps<Schema> => {
     if (memoState === undefined) {
-      memoState = getInitialMemoState(rootProp, value, rootOnChange, []);
+      memoState = getInitialMemoState(rootSchema, value, rootOnChange, []);
       return memoState.props;
     }
-    return getUpToDateProps(rootProp, value, rootOnChange, memoState, []);
+    return getUpToDateProps(rootSchema, value, rootOnChange, memoState, []);
   };
 }
 
-type MemoState<Field extends ComponentPropField> = {
-  props: PreviewProps<Field>;
+type MemoState<Schema extends ComponentSchema> = {
+  props: PreviewProps<Schema>;
   value: unknown;
-  field: Field;
-  cached: ReturnType<typeof memoizedInfoForProp[Field['kind']]>;
-  inner: Map<string, MemoState<ComponentPropField>>;
+  schema: Schema;
+  cached: ReturnType<typeof memoizedInfoForSchema[Schema['kind']]>;
+  inner: Map<string, MemoState<ComponentSchema>>;
 };
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
index 8bc8573acf0..c7718e37c7a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
@@ -1,5 +1,5 @@
 import { fields } from './api';
-import { getAncestorFields, getFieldAtPropPath } from './utils';
+import { getAncestorSchemas, getSchemaAtPropPath } from './utils';
 
 const blockChild = fields.child({ kind: 'block', placeholder: '' });
 const blockChild2 = fields.child({ kind: 'block', placeholder: '' });
@@ -32,19 +32,19 @@ const trueVal = {
 };
 
 test('getChildFieldAtPath', () => {
-  expect(getFieldAtPropPath(['something', 'blockChild'], falseVal, props)).toBe(blockChild);
-  expect(getFieldAtPropPath(['another', 'value'], falseVal, props)).toBe(blockChild2);
-  expect(getFieldAtPropPath(['another', 'value'], trueVal, props)).toBe(inlineChild);
-  expect(getFieldAtPropPath(['inlineChild2'], falseVal, props)).toBe(inlineChild2);
+  expect(getSchemaAtPropPath(['something', 'blockChild'], falseVal, props)).toBe(blockChild);
+  expect(getSchemaAtPropPath(['another', 'value'], falseVal, props)).toBe(blockChild2);
+  expect(getSchemaAtPropPath(['another', 'value'], trueVal, props)).toBe(inlineChild);
+  expect(getSchemaAtPropPath(['inlineChild2'], falseVal, props)).toBe(inlineChild2);
 });
 
 test('getAncestorFields', () => {
   let root = { kind: 'object' as const, value: props };
-  expect(getAncestorFields(root, ['something', 'blockChild'], falseVal)).toEqual([
+  expect(getAncestorSchemas(root, ['something', 'blockChild'], falseVal)).toEqual([
     root,
     props.something,
   ]);
-  expect(getAncestorFields(root, ['another', 'value'], falseVal)).toEqual([root, props.another]);
-  expect(getAncestorFields(root, ['another', 'value'], trueVal)).toEqual([root, props.another]);
-  expect(getAncestorFields(root, ['inlineChild2'], falseVal)).toEqual([root]);
+  expect(getAncestorSchemas(root, ['another', 'value'], falseVal)).toEqual([root, props.another]);
+  expect(getAncestorSchemas(root, ['another', 'value'], trueVal)).toEqual([root, props.another]);
+  expect(getAncestorSchemas(root, ['inlineChild2'], falseVal)).toEqual([root]);
 });
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 21b63c283f7..1059e7ca38a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -1,4 +1,4 @@
-import { ComponentPropField } from '../../component-blocks';
+import { ComponentSchema } from '../../component-blocks';
 import { DocumentFeatures } from '../../views';
 import { DocumentFeaturesForNormalization } from '../document-features-normalization';
 import { assert, Mark } from '../utils';
@@ -9,32 +9,32 @@ type PathToChildFieldWithOption = { path: ReadonlyPropPath; options: ChildField[
 
 export function findChildPropPathsForProp(
   value: any,
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   path: ReadonlyPropPath
 ): PathToChildFieldWithOption[] {
-  switch (prop.kind) {
+  switch (schema.kind) {
     case 'form':
     case 'relationship':
       return [];
     case 'child':
-      return [{ path: path, options: prop.options }];
+      return [{ path: path, options: schema.options }];
     case 'conditional':
       return findChildPropPathsForProp(
         value.value,
-        prop.values[value.discriminant],
+        schema.values[value.discriminant],
         path.concat('value')
       );
     case 'object': {
       let paths: PathToChildFieldWithOption[] = [];
-      Object.keys(prop.value).forEach(key => {
-        paths.push(...findChildPropPathsForProp(value[key], prop.value[key], path.concat(key)));
+      Object.keys(schema.value).forEach(key => {
+        paths.push(...findChildPropPathsForProp(value[key], schema.value[key], path.concat(key)));
       });
       return paths;
     }
     case 'array': {
       let paths: PathToChildFieldWithOption[] = [];
       (value as any[]).forEach((val, i) => {
-        paths.push(...findChildPropPathsForProp(val, prop.element, path.concat(i)));
+        paths.push(...findChildPropPathsForProp(val, schema.element, path.concat(i)));
       });
       return paths;
     }
@@ -43,7 +43,7 @@ export function findChildPropPathsForProp(
 
 export function findChildPropPaths(
   value: Record<string, any>,
-  props: Record<string, ComponentPropField>
+  props: Record<string, ComponentSchema>
 ): { path: ReadonlyPropPath | undefined; options: ChildField['options'] }[] {
   let propPaths = findChildPropPathsForProp(value, { kind: 'object', value: props }, []);
   if (!propPaths.length) {
@@ -149,69 +149,69 @@ export function getDocumentFeaturesForChildField(
   };
 }
 
-function getFieldAtPropPathInner(
+function getSchemaAtPropPathInner(
   path: (string | number)[],
   value: unknown,
-  prop: ComponentPropField
-): undefined | ComponentPropField {
+  schema: ComponentSchema
+): undefined | ComponentSchema {
   // because we're checking the length here
   // the non-null asserts on shift below are fine
   if (path.length === 0) {
-    return prop;
+    return schema;
   }
-  if (prop.kind === 'child' || prop.kind === 'form' || prop.kind === 'relationship') {
+  if (schema.kind === 'child' || schema.kind === 'form' || schema.kind === 'relationship') {
     return;
   }
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     const key = path.shift();
     if (key === 'discriminant') {
-      return getFieldAtPropPathInner(path, (value as any).discriminant, prop.discriminant);
+      return getSchemaAtPropPathInner(path, (value as any).discriminant, schema.discriminant);
     }
     if (key === 'value') {
-      const propVal = prop.values[(value as any).discriminant];
-      return getFieldAtPropPathInner(path, (value as any).value, propVal);
+      const propVal = schema.values[(value as any).discriminant];
+      return getSchemaAtPropPathInner(path, (value as any).value, propVal);
     }
     return;
   }
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     const key = path.shift()!;
-    return getFieldAtPropPathInner(path, (value as any)[key], prop.value[key]);
+    return getSchemaAtPropPathInner(path, (value as any)[key], schema.value[key]);
   }
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     const index = path.shift()!;
-    return getFieldAtPropPathInner(path, (value as any)[index], prop.element);
+    return getSchemaAtPropPathInner(path, (value as any)[index], schema.element);
   }
-  assertNever(prop);
+  assertNever(schema);
 }
 
-export function getFieldAtPropPath(
+export function getSchemaAtPropPath(
   path: ReadonlyPropPath,
   value: Record<string, unknown>,
-  props: Record<string, ComponentPropField>
-): undefined | ComponentPropField {
-  return getFieldAtPropPathInner([...path], value, {
+  props: Record<string, ComponentSchema>
+): undefined | ComponentSchema {
+  return getSchemaAtPropPathInner([...path], value, {
     kind: 'object',
     value: props,
   });
 }
 
-export function clientSideValidateProp(prop: ComponentPropField, value: any): boolean {
-  switch (prop.kind) {
+export function clientSideValidateProp(schema: ComponentSchema, value: any): boolean {
+  switch (schema.kind) {
     case 'child':
     case 'relationship': {
       return true;
     }
     case 'form': {
-      return prop.validate(value);
+      return schema.validate(value);
     }
     case 'conditional': {
-      if (!prop.discriminant.validate(value.discriminant)) {
+      if (!schema.discriminant.validate(value.discriminant)) {
         return false;
       }
-      return clientSideValidateProp(prop.values[value.discriminant], value.value);
+      return clientSideValidateProp(schema.values[value.discriminant], value.value);
     }
     case 'object': {
-      for (const [key, childProp] of Object.entries(prop.value)) {
+      for (const [key, childProp] of Object.entries(schema.value)) {
         if (!clientSideValidateProp(childProp, value[key])) {
           return false;
         }
@@ -220,7 +220,7 @@ export function clientSideValidateProp(prop: ComponentPropField, value: any): bo
     }
     case 'array': {
       for (const innerVal of value) {
-        if (!clientSideValidateProp(prop.element, innerVal)) {
+        if (!clientSideValidateProp(schema.element, innerVal)) {
           return false;
         }
       }
@@ -229,14 +229,14 @@ export function clientSideValidateProp(prop: ComponentPropField, value: any): bo
   }
 }
 
-export function getAncestorFields(
-  rootProp: ComponentPropField,
+export function getAncestorSchemas(
+  rootSchema: ComponentSchema,
   path: ReadonlyPropPath,
   value: unknown
 ) {
-  const ancestors: ComponentPropField[] = [];
+  const ancestors: ComponentSchema[] = [];
   const currentPath = [...path];
-  let currentProp = rootProp;
+  let currentProp = rootSchema;
   let currentValue = value;
   while (currentPath.length) {
     ancestors.push(currentProp);
@@ -276,45 +276,45 @@ export function getValueAtPropPath(value: unknown, inputPath: ReadonlyPropPath)
 }
 
 export function traverseProps(
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   value: unknown,
-  visitor: (prop: ComponentPropField, value: unknown, path: ReadonlyPropPath) => void,
+  visitor: (schema: ComponentSchema, value: unknown, path: ReadonlyPropPath) => void,
   path: ReadonlyPropPath = []
 ) {
-  if (prop.kind === 'form' || prop.kind === 'relationship' || prop.kind === 'child') {
-    visitor(prop, value, path);
+  if (schema.kind === 'form' || schema.kind === 'relationship' || schema.kind === 'child') {
+    visitor(schema, value, path);
     return;
   }
-  if (prop.kind === 'object') {
-    for (const [key, childProp] of Object.entries(prop.value)) {
+  if (schema.kind === 'object') {
+    for (const [key, childProp] of Object.entries(schema.value)) {
       traverseProps(childProp, (value as any)[key], visitor, [...path, key]);
     }
-    visitor(prop, value, path);
+    visitor(schema, value, path);
     return;
   }
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     for (const [idx, val] of (value as unknown[]).entries()) {
-      traverseProps(prop.element, val, visitor, path.concat(idx));
+      traverseProps(schema.element, val, visitor, path.concat(idx));
     }
-    return visitor(prop, value, path);
+    return visitor(schema, value, path);
   }
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     const discriminant: string | boolean = (value as any).discriminant;
-    visitor(prop, discriminant, path.concat('discriminant'));
+    visitor(schema, discriminant, path.concat('discriminant'));
     traverseProps(
-      prop.values[discriminant.toString()],
+      schema.values[discriminant.toString()],
       (value as any).value,
       visitor,
       path.concat('value')
     );
-    visitor(prop, value, path);
+    visitor(schema, value, path);
     return;
   }
-  assertNever(prop);
+  assertNever(schema);
 }
 
 export function replaceValueAtPropPath(
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   value: unknown,
   newValue: unknown,
   path: ReadonlyPropPath
@@ -325,30 +325,30 @@ export function replaceValueAtPropPath(
 
   const [key, ...newPath] = path;
 
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     return {
       ...(value as any),
-      [key]: replaceValueAtPropPath(prop.value[key], (value as any)[key], newValue, newPath),
+      [key]: replaceValueAtPropPath(schema.value[key], (value as any)[key], newValue, newPath),
     };
   }
 
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     const conditionalValue = value as { discriminant: string | boolean; value: unknown };
     // replaceValueAtPropPath should not be used to only update the discriminant of a conditional field
     // if you want to update the discriminant of a conditional field, replace the value of the whole conditional field
     assert(key === 'value');
     return {
       discriminant: conditionalValue.discriminant,
-      value: replaceValueAtPropPath(prop.values[key], conditionalValue.value, newValue, newPath),
+      value: replaceValueAtPropPath(schema.values[key], conditionalValue.value, newValue, newPath),
     };
   }
 
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     const prevVal = value as unknown[];
     const newVal = [...prevVal];
     setKeysForArrayValue(newVal, getKeysForArrayValue(prevVal));
     newVal[key as number] = replaceValueAtPropPath(
-      prop.element,
+      schema.element,
       newVal[key as number],
       newValue,
       newPath
@@ -358,7 +358,7 @@ export function replaceValueAtPropPath(
 
   // we should never reach here since form, relationship or child fields don't contain other fields
   // so the only thing that can happen to them is to be replaced which happens at the start of this function when path.length === 0
-  assert(prop.kind !== 'form' && prop.kind !== 'relationship' && prop.kind !== 'child');
+  assert(schema.kind !== 'form' && schema.kind !== 'relationship' && schema.kind !== 'child');
 
-  assertNever(prop);
+  assertNever(schema);
 }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index b3cef7bbc33..d2ed092e75f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -1,7 +1,7 @@
 import { Editor, Element, Transforms, Range, NodeEntry, Path, Node, Text } from 'slate';
 
 import weakMemoize from '@emotion/weak-memoize';
-import { ChildField, ComponentBlock, ComponentPropField } from '../../component-blocks';
+import { ChildField, ComponentBlock, ComponentSchema } from '../../component-blocks';
 import { assert, moveChildren } from '../utils';
 import { DocumentFeatures } from '../../views';
 import {
@@ -15,7 +15,7 @@ import {
   assertNever,
   DocumentFeaturesForChildField,
   findChildPropPaths,
-  getAncestorFields,
+  getAncestorSchemas,
   getDocumentFeaturesForChildField,
   getValueAtPropPath,
   ReadonlyPropPath,
@@ -110,63 +110,63 @@ function normalizeNodeWithinComponentProp(
   return didNormalization;
 }
 
-function canPropContainChildField(rootProp: ComponentPropField) {
-  const queue = new Set<ComponentPropField>([rootProp]);
-  for (const prop of queue) {
-    if (prop.kind === 'form' || prop.kind === 'relationship') {
-    } else if (prop.kind === 'child') {
+function canSchemaContainChildField(rootSchema: ComponentSchema) {
+  const queue = new Set<ComponentSchema>([rootSchema]);
+  for (const schema of queue) {
+    if (schema.kind === 'form' || schema.kind === 'relationship') {
+    } else if (schema.kind === 'child') {
       return true;
-    } else if (prop.kind === 'array') {
-      queue.add(prop.element);
-    } else if (prop.kind === 'object') {
-      for (const innerProp of Object.values(prop.value)) {
+    } else if (schema.kind === 'array') {
+      queue.add(schema.element);
+    } else if (schema.kind === 'object') {
+      for (const innerProp of Object.values(schema.value)) {
         queue.add(innerProp);
       }
-    } else if (prop.kind === 'conditional') {
-      for (const innerProp of Object.values(prop.values)) {
+    } else if (schema.kind === 'conditional') {
+      for (const innerProp of Object.values(schema.values)) {
         queue.add(innerProp);
       }
     } else {
-      assertNever(prop);
+      assertNever(schema);
     }
   }
   return false;
 }
 
-function doesPropOnlyEverContainASingleChildField(rootProp: ComponentPropField): boolean {
-  const queue = new Set<ComponentPropField>([rootProp]);
+function doesSchemaOnlyEverContainASingleChildField(rootSchema: ComponentSchema): boolean {
+  const queue = new Set<ComponentSchema>([rootSchema]);
   let hasFoundChildField = false;
-  for (const prop of queue) {
-    if (prop.kind === 'form' || prop.kind === 'relationship') {
-    } else if (prop.kind === 'child') {
+  for (const schema of queue) {
+    if (schema.kind === 'form' || schema.kind === 'relationship') {
+    } else if (schema.kind === 'child') {
       if (hasFoundChildField) {
         return false;
       }
       hasFoundChildField = true;
-    } else if (prop.kind === 'array') {
-      if (canPropContainChildField(prop.element)) {
+    } else if (schema.kind === 'array') {
+      if (canSchemaContainChildField(schema.element)) {
         return false;
       }
-    } else if (prop.kind === 'object') {
-      for (const innerProp of Object.values(prop.value)) {
+    } else if (schema.kind === 'object') {
+      for (const innerProp of Object.values(schema.value)) {
         queue.add(innerProp);
       }
-    } else if (prop.kind === 'conditional') {
-      for (const innerProp of Object.values(prop.values)) {
+    } else if (schema.kind === 'conditional') {
+      for (const innerProp of Object.values(schema.values)) {
         queue.add(innerProp);
       }
     } else {
-      assertNever(prop);
+      assertNever(schema);
     }
   }
   return hasFoundChildField;
 }
 
-function findArrayFieldsWithSingleChildField(prop: ComponentPropField, value: unknown) {
-  const propPaths: [ReadonlyPropPath, ArrayField<ComponentPropField>][] = [];
-  traverseProps(prop, value, (prop, value, path) => {
-    if (prop.kind === 'array' && doesPropOnlyEverContainASingleChildField(prop.element)) {
-      propPaths.push([path, prop]);
+function findArrayFieldsWithSingleChildField(schema: ComponentSchema, value: unknown) {
+  const propPaths: [ReadonlyPropPath, ArrayField<ComponentSchema>][] = [];
+  traverseProps(schema, value, (schema, value, path) => {
+    if (schema.kind === 'array' && doesSchemaOnlyEverContainASingleChildField(schema.element)) {
+      propPaths.push([path, schema]);
     }
   });
   return propPaths;
@@ -251,8 +251,8 @@ export function withComponentBlocks(
         Editor.withoutNormalizing(editor, () => {
           const componentBlock = blockComponents[componentBlockNode.component];
           if (componentPropNode.propPath !== undefined && componentBlock !== undefined) {
-            const rootProp = { kind: 'object' as const, value: componentBlock.props };
-            const ancestorFields = getAncestorFields(
+            const rootProp = { kind: 'object' as const, value: componentBlock.schema };
+            const ancestorFields = getAncestorSchemas(
               rootProp,
               componentPropNode.propPath,
               componentBlockNode.props
@@ -266,7 +266,7 @@ export function withComponentBlocks(
                 componentBlockNode.props,
                 componentPropNode.propPath.slice(0, arrayFieldIdx)
               ) as unknown[];
-              if (doesPropOnlyEverContainASingleChildField(arrayField.element)) {
+              if (doesSchemaOnlyEverContainASingleChildField(arrayField.element)) {
                 if (
                   Node.string(componentPropNode) === '' &&
                   val.length - 1 === componentPropNode.propPath[arrayFieldIdx]
@@ -328,7 +328,7 @@ export function withComponentBlocks(
       if (Element.isElement(node) && node.type === 'component-block') {
         const componentBlock = blockComponents[node.component];
         if (componentBlock) {
-          const rootProp = { kind: 'object' as const, value: componentBlock.props };
+          const rootProp = { kind: 'object' as const, value: componentBlock.schema };
           for (const [propPath, arrayField] of findArrayFieldsWithSingleChildField(
             rootProp,
             node.props
@@ -415,7 +415,7 @@ export function withComponentBlocks(
             }
           }
           let missingKeys = new Map(
-            findChildPropPaths(node.props, componentBlock.props).map(x => [
+            findChildPropPaths(node.props, componentBlock.schema).map(x => [
               JSON.stringify(x.path) as string | undefined,
               x.options.kind,
             ])
@@ -444,7 +444,7 @@ export function withComponentBlocks(
             string,
             { options: ChildField['options']; index: number } | undefined
           > = {};
-          findChildPropPaths(node.props, blockComponents[node.component]!.props).forEach(
+          findChildPropPaths(node.props, blockComponents[node.component]!.schema).forEach(
             (x, index) => {
               stringifiedInlinePropPaths[JSON.stringify(x.path)] = { options: x.options, index };
             }
diff --git a/packages/fields-document/src/DocumentEditor/index.tsx b/packages/fields-document/src/DocumentEditor/index.tsx
index f76bfd1bdc4..fc9b904ec33 100644
--- a/packages/fields-document/src/DocumentEditor/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/index.tsx
@@ -354,7 +354,7 @@ export function DocumentEditorEditable(props: EditableProps) {
                 const start = Editor.start(editor, [...path, index]);
                 const placeholder = getPlaceholderTextForPropPath(
                   child.propPath,
-                  componentBlocks[node.component].props,
+                  componentBlocks[node.component].schema,
                   node.props
                 );
                 if (placeholder) {
diff --git a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
index 15b9da97fd4..fa6f23d398d 100644
--- a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
@@ -266,7 +266,7 @@ test("link shortcut doesn't do anything when inside of a component block with li
         comp: component({
           component: props => React.createElement('div', null, props.fields.child.element),
           label: '',
-          props: { child: fields.child({ kind: 'inline', placeholder: '' }) },
+          schema: { child: fields.child({ kind: 'inline', placeholder: '' }) },
         }),
       },
     }
@@ -319,7 +319,7 @@ test('link shortcut works when inside of a component block with links option inh
         comp: component({
           component: props => React.createElement('div', null, props.fields.child.element),
           label: '',
-          props: { child: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }) },
+          schema: { child: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }) },
         }),
       },
     }
diff --git a/packages/fields-document/src/DocumentEditor/relationship.tsx b/packages/fields-document/src/DocumentEditor/relationship.tsx
index 28310984f37..2a8b77c4a36 100644
--- a/packages/fields-document/src/DocumentEditor/relationship.tsx
+++ b/packages/fields-document/src/DocumentEditor/relationship.tsx
@@ -82,10 +82,7 @@ export function RelationshipElement({
   const keystone = useKeystone();
   const editor = useStaticEditor();
   const relationships = useContext(DocumentFieldRelationshipsContext)!;
-  const relationship = relationships[element.relationship] as Exclude<
-    Relationships[string],
-    { kind: 'prop' }
-  >;
+  const relationship = relationships[element.relationship];
   return (
     <span
       {...attributes}
diff --git a/packages/fields-document/src/DocumentEditor/toolbar-state.tsx b/packages/fields-document/src/DocumentEditor/toolbar-state.tsx
index 5d2c41c769f..ac111af255d 100644
--- a/packages/fields-document/src/DocumentEditor/toolbar-state.tsx
+++ b/packages/fields-document/src/DocumentEditor/toolbar-state.tsx
@@ -6,7 +6,7 @@ import { ComponentBlockContext } from './component-blocks';
 import { ComponentBlock } from './component-blocks/api';
 import {
   DocumentFeaturesForChildField,
-  getFieldAtPropPath,
+  getSchemaAtPropPath,
   getDocumentFeaturesForChildField,
 } from './component-blocks/utils';
 import { LayoutOptionsProvider } from './layouts';
@@ -76,10 +76,10 @@ export function getAncestorComponentChildFieldDocumentFeatures(
       const component = ancestorComponent[0].component;
       const componentBlock = componentBlocks[component];
       if (componentBlock && propPath) {
-        const childField = getFieldAtPropPath(
+        const childField = getSchemaAtPropPath(
           propPath,
           ancestorComponent[0].props,
-          componentBlock.props
+          componentBlock.schema
         );
         if (childField?.kind === 'child') {
           return getDocumentFeaturesForChildField(editorDocumentFeatures, childField.options);
diff --git a/packages/fields-document/src/component-blocks.tsx b/packages/fields-document/src/component-blocks.tsx
index 7ba5143f1ce..ac7af409f40 100644
--- a/packages/fields-document/src/component-blocks.tsx
+++ b/packages/fields-document/src/component-blocks.tsx
@@ -2,7 +2,7 @@ export { NotEditable, component, fields } from './DocumentEditor/component-block
 export type {
   ChildField,
   ComponentBlock,
-  ComponentPropField,
+  ComponentSchema,
   ConditionalField,
   FormField,
   ObjectField,
@@ -10,5 +10,5 @@ export type {
   RelationshipField,
   InferRenderersForComponentBlocks,
   ArrayField,
-  ComponentPropFieldForGraphQL,
+  ComponentSchemaForGraphQL,
 } from './DocumentEditor/component-blocks/api';
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index f40f11d1a72..22a2db4f056 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -2,62 +2,64 @@ import { graphql } from '@keystone-6/core';
 import { FieldData, GraphQLTypesForList, KeystoneContext } from '@keystone-6/core/types';
 import { GraphQLResolveInfo } from 'graphql';
 
-import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
+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,
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   operation: 'create' | 'update',
-  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>,
+  cache: Map<ComponentSchemaForGraphQL, graphql.InputType>,
   meta: FieldData
 ) {
-  if (!cache.has(prop)) {
-    const res = getGraphQLInputTypeInner(name, prop, operation, cache, meta);
-    cache.set(prop, res);
+  if (!cache.has(schema)) {
+    const res = getGraphQLInputTypeInner(name, schema, operation, cache, meta);
+    cache.set(schema, res);
   }
-  return cache.get(prop)!;
+  return cache.get(schema)!;
 }
 
 function getGraphQLInputTypeInner(
   name: string,
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   operation: 'create' | 'update',
-  cache: Map<ComponentPropFieldForGraphQL, graphql.InputType>,
+  cache: Map<ComponentSchemaForGraphQL, graphql.InputType>,
   meta: FieldData
 ): graphql.InputType {
-  if (prop.kind === 'form') {
-    return prop.graphql.input;
+  if (schema.kind === 'form') {
+    return schema.graphql.input;
   }
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     return graphql.inputObject({
       name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
       fields: () =>
         Object.fromEntries(
-          Object.entries(prop.value).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 })];
-          })
+          Object.entries(schema.value).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 (prop.kind === 'array') {
-    const innerType = getGraphQLInputType(name, prop.element, operation, cache, meta);
+  if (schema.kind === 'array') {
+    const innerType = getGraphQLInputType(name, schema.element, operation, cache, meta);
     return graphql.list(innerType);
   }
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     return graphql.inputObject({
       name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
       fields: () =>
         Object.fromEntries(
-          Object.entries(prop.values).map(
+          Object.entries(schema.values).map(
             ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
               const type = getGraphQLInputType(
                 `${name}${key[0].toUpperCase()}${key.slice(1)}`,
@@ -73,9 +75,9 @@ function getGraphQLInputTypeInner(
     });
   }
 
-  if (prop.kind === 'relationship') {
+  if (schema.kind === 'relationship') {
     const inputType =
-      meta.lists[prop.listKey].types.relateTo[prop.many ? 'many' : 'one'][operation];
+      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) {
@@ -84,11 +86,11 @@ function getGraphQLInputTypeInner(
     return inputType;
   }
 
-  assertNever(prop);
+  assertNever(schema);
 }
 
 export async function getValueForUpdate(
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   value: any,
   prevValue: any,
   context: KeystoneContext,
@@ -98,11 +100,11 @@ export async function getValueForUpdate(
     return prevValue;
   }
   if (prevValue === undefined) {
-    prevValue = getInitialPropsValue(prop);
+    prevValue = getInitialPropsValue(schema);
   }
 
-  if (prop.kind === 'form') {
-    if (prop.validate(value)) {
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
       return value;
     }
     throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
@@ -110,14 +112,14 @@ export async function getValueForUpdate(
   if (value === null) {
     throw new Error(
       `${
-        prop.kind[0].toUpperCase() + prop.kind.slice(1)
+        schema.kind[0].toUpperCase() + schema.kind.slice(1)
       } fields cannot be set to null but the field at '${path.join('.')}' is null`
     );
   }
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     return Object.fromEntries(
       await Promise.all(
-        Object.entries(prop.value).map(async ([key, val]) => {
+        Object.entries(schema.value).map(async ([key, val]) => {
           return [
             key,
             await getValueForUpdate(val, value[key], prevValue[key], context, path.concat(key)),
@@ -126,28 +128,28 @@ export async function getValueForUpdate(
       )
     );
   }
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     return Promise.all(
       (value as any[]).map((val, i) =>
-        getValueForUpdate(prop.element, val, prevValue[i], context, path.concat(i))
+        getValueForUpdate(schema.element, val, prevValue[i], context, path.concat(i))
       )
     );
   }
-  if (prop.kind === 'relationship') {
-    if (prop.many) {
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
       const val = (value as graphql.InferValueFromArg<
         graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['update']>>
       >)!;
-      return resolveRelateToManyForUpdateInput(val, context, prop.listKey, prevValue);
+      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, prop.listKey);
+      return resolveRelateToOneForUpdateInput(val, context, schema.listKey);
     }
   }
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     const conditionalValueKeys = Object.keys(value);
     if (conditionalValueKeys.length !== 1) {
       throw new Error(
@@ -158,36 +160,36 @@ export async function getValueForUpdate(
     }
     const key = conditionalValueKeys[0];
     let discriminant: string | boolean = key;
-    if ((key === 'true' || key === 'false') && !prop.discriminant.validate(key)) {
+    if ((key === 'true' || key === 'false') && !schema.discriminant.validate(key)) {
       discriminant = key === 'true';
     }
     return {
       discriminant,
       value: await getValueForUpdate(
-        (prop.values as any)[key],
+        (schema.values as any)[key],
         value[key],
-        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(prop),
+        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(schema),
         context,
         path.concat('value')
       ),
     };
   }
 
-  assertNever(prop);
+  assertNever(schema);
 }
 
 export async function getValueForCreate(
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   value: any,
   context: KeystoneContext,
   path: ReadonlyPropPath
 ): Promise<any> {
   // If value is undefined, get the specified defaultValue
   if (value === undefined) {
-    return getInitialPropsValue(prop);
+    return getInitialPropsValue(schema);
   }
-  if (prop.kind === 'form') {
-    if (prop.validate(value)) {
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
       return value;
     }
     throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
@@ -195,42 +197,42 @@ export async function getValueForCreate(
   if (value === null) {
     throw new Error(
       `${
-        prop.kind[0].toUpperCase() + prop.kind.slice(1)
+        schema.kind[0].toUpperCase() + schema.kind.slice(1)
       } fields cannot be set to null but the field at '${path.join('.')}' is null`
     );
   }
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     return Promise.all(
       (value as any[]).map((val, i) =>
-        getValueForCreate(prop.element, val, context, path.concat(i))
+        getValueForCreate(schema.element, val, context, path.concat(i))
       )
     );
   }
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     return Object.fromEntries(
       await Promise.all(
-        Object.entries(prop.value).map(async ([key, val]) => {
+        Object.entries(schema.value).map(async ([key, val]) => {
           return [key, await getValueForCreate(val, value[key], context, path.concat(key))];
         })
       )
     );
   }
-  if (prop.kind === 'relationship') {
-    if (prop.many) {
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
       const val = (value as graphql.InferValueFromArg<
         graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['create']>>
       >)!;
 
-      return resolveRelateToManyForCreateInput(val, context, prop.listKey);
+      return resolveRelateToManyForCreateInput(val, context, schema.listKey);
     } else {
       const val = (value as graphql.InferValueFromArg<
         graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['create']>>
       >)!;
 
-      return resolveRelateToOneForCreateInput(val, context, prop.listKey);
+      return resolveRelateToOneForCreateInput(val, context, schema.listKey);
     }
   }
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     if (value === null) {
       throw new Error();
     }
@@ -240,14 +242,14 @@ export async function getValueForCreate(
     }
     const key = conditionalValueKeys[0];
     let discriminant: string | boolean = key;
-    if ((key === 'true' || key === 'false') && !prop.discriminant.validate(key)) {
+    if ((key === 'true' || key === 'false') && !schema.discriminant.validate(key)) {
       discriminant = key === 'true';
     }
 
     return {
       discriminant,
       value: await getValueForCreate(
-        (prop.values as any)[key],
+        (schema.values as any)[key],
         value[key],
         context,
         path.concat('value')
@@ -255,7 +257,7 @@ export async function getValueForCreate(
     };
   }
 
-  assertNever(prop);
+  assertNever(schema);
 }
 /** MANY */
 
diff --git a/packages/fields-document/src/component-graphql-output.tsx b/packages/fields-document/src/component-graphql-output.tsx
index b4c2e5472b6..b0ef5b80a89 100644
--- a/packages/fields-document/src/component-graphql-output.tsx
+++ b/packages/fields-document/src/component-graphql-output.tsx
@@ -1,6 +1,6 @@
 import { graphql } from '@keystone-6/core';
 import { FieldData } from '@keystone-6/core/types';
-import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
 import { assertNever } from './DocumentEditor/component-blocks/utils';
 
 function wrapGraphQLFieldInResolver<InputSource, OutputSource>(
@@ -42,35 +42,35 @@ type OutputField = graphql.Field<
 
 export function getOutputGraphQLField(
   name: string,
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   interfaceImplementations: graphql.ObjectType<unknown>[],
-  cache: Map<ComponentPropFieldForGraphQL, OutputField>,
+  cache: Map<ComponentSchemaForGraphQL, OutputField>,
   meta: FieldData
 ) {
-  if (!cache.has(prop)) {
-    const res = getOutputGraphQLFieldInner(name, prop, interfaceImplementations, cache, meta);
-    cache.set(prop, res);
+  if (!cache.has(schema)) {
+    const res = getOutputGraphQLFieldInner(name, schema, interfaceImplementations, cache, meta);
+    cache.set(schema, res);
   }
-  return cache.get(prop)!;
+  return cache.get(schema)!;
 }
 
 function getOutputGraphQLFieldInner(
   name: string,
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   interfaceImplementations: graphql.ObjectType<unknown>[],
-  cache: Map<ComponentPropFieldForGraphQL, OutputField>,
+  cache: Map<ComponentSchemaForGraphQL, OutputField>,
   meta: FieldData
 ): OutputField {
-  if (prop.kind === 'form') {
-    return prop.graphql.output;
+  if (schema.kind === 'form') {
+    return schema.graphql.output;
   }
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     return graphql.field({
       type: graphql.object<unknown>()({
         name,
         fields: () =>
           Object.fromEntries(
-            Object.entries(prop.value).map(
+            Object.entries(schema.value).map(
               ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
                 const field = getOutputGraphQLField(
                   `${name}${key[0].toUpperCase()}${key.slice(1)}`,
@@ -86,10 +86,10 @@ function getOutputGraphQLFieldInner(
       }),
     });
   }
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     const innerField = getOutputGraphQLField(
       name,
-      prop.element,
+      schema.element,
       interfaceImplementations,
       cache,
       meta
@@ -110,14 +110,14 @@ function getOutputGraphQLFieldInner(
       },
     });
   }
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     let discriminantField: OutputField;
 
     const getDiscriminantField = () => {
       if (!discriminantField) {
         discriminantField = getOutputGraphQLField(
           name + 'Discriminant',
-          prop.discriminant,
+          schema.discriminant,
           interfaceImplementations,
           cache,
           meta
@@ -139,7 +139,7 @@ function getOutputGraphQLFieldInner(
     });
 
     interfaceImplementations.push(
-      ...Object.entries(prop.values).map(([key, val]): graphql.ObjectType<SourceType> => {
+      ...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,
@@ -166,13 +166,13 @@ function getOutputGraphQLFieldInner(
     });
   }
 
-  if (prop.kind === 'relationship') {
-    const listOutputType = meta.lists[prop.listKey].types.output;
+  if (schema.kind === 'relationship') {
+    const listOutputType = meta.lists[schema.listKey].types.output;
     return graphql.field({
-      type: prop.many ? graphql.list(listOutputType) : listOutputType,
+      type: schema.many ? graphql.list(listOutputType) : listOutputType,
       resolve({ value }, args, context) {
         if (Array.isArray(value)) {
-          return context.db[prop.listKey].findMany({
+          return context.db[schema.listKey].findMany({
             where: {
               id: { in: (value as { id: string }[]).map(x => x.id) },
             },
@@ -181,7 +181,7 @@ function getOutputGraphQLFieldInner(
         if ((value as any)?.id == null) {
           return null;
         }
-        return context.db[prop.listKey].findOne({
+        return context.db[schema.listKey].findOne({
           where: {
             id: (value as { id: string }).id,
           },
@@ -190,5 +190,5 @@ function getOutputGraphQLFieldInner(
     });
   }
 
-  assertNever(prop);
+  assertNever(schema);
 }
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 15f9503f528..1b9f7f705ee 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -13,7 +13,7 @@ import {
 } from '@keystone-6/core/types';
 import { useEffect, useMemo, useRef } from 'react';
 import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
-import { ComponentPropFieldForGraphQL } from '../DocumentEditor/component-blocks/api';
+import { ComponentSchemaForGraphQL } from '../DocumentEditor/component-blocks/api';
 import { assertNever } from '../DocumentEditor/component-blocks/utils';
 import { FormValueContentFromPreview } from '../DocumentEditor/component-blocks/form-from-preview';
 import { createGetPreviewProps } from '../DocumentEditor/component-blocks/preview-props';
@@ -30,10 +30,10 @@ export const Field = ({
     valueRef.current = value;
   });
   const createPreviewProps = useMemo(() => {
-    return createGetPreviewProps(field.prop, getNewVal => {
+    return createGetPreviewProps(field.schema, getNewVal => {
       onChange?.({ kind: valueRef.current.kind, value: getNewVal(valueRef.current.value) });
     });
-  }, [field.prop, onChange]);
+  }, [field.schema, onChange]);
   return (
     <FieldContainer>
       <FieldLabel>{field.label}</FieldLabel>
@@ -54,24 +54,24 @@ export const CardValue: CardValueComponent = ({}) => {
   return null as any;
 };
 
-export const allowedExportsOnCustomViews = ['prop'];
+export const allowedExportsOnCustomViews = ['schema'];
 
 export const controller = (
   config: FieldControllerConfig
 ): FieldController<{ kind: 'create' | 'update'; value: unknown }> & {
-  prop: ComponentPropFieldForGraphQL;
+  schema: ComponentSchemaForGraphQL;
 } => {
-  if (!config.customViews.prop) {
+  if (!config.customViews.schema) {
     throw new Error(
-      `No prop in custom view. Did you forgot to set \`views\` to a file that exports a \`prop\` on ${config.listKey}.${config.path}`
+      `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,
     graphqlSelection: `${config.path}Raw(hydrateRelationships: true)`,
-    prop: config.customViews.prop,
-    defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.prop) },
+    schema: config.customViews.schema,
+    defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.schema) },
     deserialize: data => {
       return {
         kind: 'update',
@@ -80,36 +80,36 @@ export const controller = (
     },
     serialize: value => {
       return {
-        [config.path]: serializeValue(config.customViews.prop, value.value, value.kind),
+        [config.path]: serializeValue(config.customViews.schema, value.value, value.kind),
       };
     },
   };
 };
 
 function serializeValue(
-  prop: ComponentPropFieldForGraphQL,
+  schema: ComponentSchemaForGraphQL,
   value: any,
   kind: 'update' | 'create'
 ): any {
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     return {
-      [value.discriminant]: serializeValue(prop.values[value.discriminant], value.value, kind),
+      [value.discriminant]: serializeValue(schema.values[value.discriminant], value.value, kind),
     };
   }
-  if (prop.kind === 'array') {
-    return (value as any[]).map(a => serializeValue(prop.element, a, kind));
+  if (schema.kind === 'array') {
+    return (value as any[]).map(a => serializeValue(schema.element, a, kind));
   }
-  if (prop.kind === 'form') {
+  if (schema.kind === 'form') {
     return value;
   }
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     return Object.fromEntries(
-      Object.entries(prop.value).map(([key, val]) => {
+      Object.entries(schema.value).map(([key, val]) => {
         return [key, serializeValue(val, value[key], kind)];
       })
     );
   }
-  if (prop.kind === 'relationship') {
+  if (schema.kind === 'relationship') {
     if (Array.isArray(value)) {
       return {
         [kind === 'create' ? 'connect' : 'set']: value.map(x => ({ id: x.id })),
@@ -125,5 +125,5 @@ function serializeValue(
       connect: { id: value.id },
     };
   }
-  assertNever(prop);
+  assertNever(schema);
 }
diff --git a/packages/fields-document/src/component.ts b/packages/fields-document/src/component.ts
index 53aaea99161..a56dc0ccf00 100644
--- a/packages/fields-document/src/component.ts
+++ b/packages/fields-document/src/component.ts
@@ -9,26 +9,26 @@ import {
 import { graphql } from '@keystone-6/core';
 import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
 import { getOutputGraphQLField } from './component-graphql-output';
-import { ComponentPropFieldForGraphQL } from './DocumentEditor/component-blocks/api';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
 import {
   getGraphQLInputType,
   getValueForCreate,
   getValueForUpdate,
 } from './component-graphql-input';
-import { assertValidComponentPropField } from './DocumentEditor/component-blocks/field-assertions';
+import { assertValidComponentSchema } from './DocumentEditor/component-blocks/field-assertions';
 import { addRelationshipDataToComponentProps, fetchRelationshipData } from './relationship-data';
 
 export type ComponentThingFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
   CommonFieldConfig<ListTypeInfo> & {
     db?: { map?: string };
-    prop: ComponentPropFieldForGraphQL;
+    schema: ComponentSchemaForGraphQL;
   };
 
 const views = path.join(path.dirname(__dirname), 'component-views');
 
 export const componentThing =
   <ListTypeInfo extends BaseListTypeInfo>({
-    prop,
+    schema,
     ...config
   }: ComponentThingFieldConfig<ListTypeInfo>): FieldTypeFunc<ListTypeInfo> =>
   meta => {
@@ -37,7 +37,7 @@ export const componentThing =
     }
     const lists = new Set(Object.keys(meta.lists));
     try {
-      assertValidComponentPropField(prop, lists);
+      assertValidComponentSchema(schema, lists);
     } catch (err) {
       throw new Error(`${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`);
     }
@@ -45,7 +45,7 @@ export const componentThing =
     const resolve = (val: JSONValue | undefined) =>
       val === null && meta.provider === 'postgresql' ? 'JsonNull' : val;
 
-    const defaultValue = getInitialPropsValue(prop);
+    const defaultValue = getInitialPropsValue(schema);
 
     const unreferencedConcreteInterfaceImplementations: graphql.ObjectType<any>[] = [];
 
@@ -64,7 +64,7 @@ export const componentThing =
                 prevVal = JSON.parse(prevVal as any);
                 val = args.inputData[meta.fieldKey];
               }
-              val = await getValueForUpdate(prop, val, prevVal, args.context, []);
+              val = await getValueForUpdate(schema, val, prevVal, args.context, []);
               if (val === null && meta.provider === 'postgresql') {
                 val = 'JsonNull';
               }
@@ -83,18 +83,22 @@ export const componentThing =
         },
         input: {
           create: {
-            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'create', new Map(), meta) }),
+            arg: graphql.arg({
+              type: getGraphQLInputType(name, schema, 'create', new Map(), meta),
+            }),
             async resolve(val, context) {
-              return resolve(await getValueForCreate(prop, val, context, []));
+              return resolve(await getValueForCreate(schema, val, context, []));
             },
           },
           update: {
-            arg: graphql.arg({ type: getGraphQLInputType(name, prop, 'update', new Map(), meta) }),
+            arg: graphql.arg({
+              type: getGraphQLInputType(name, schema, 'update', new Map(), meta),
+            }),
           },
         },
         output: getOutputGraphQLField(
           name,
-          prop,
+          schema,
           unreferencedConcreteInterfaceImplementations,
           new Map(),
           meta
@@ -110,12 +114,12 @@ export const componentThing =
             },
             resolve({ value }, args, context) {
               if (args.hydrateRelationships) {
-                return addRelationshipDataToComponentProps(prop, value, (prop, value) =>
+                return addRelationshipDataToComponentProps(schema, value, (schema, value) =>
                   fetchRelationshipData(
                     context,
-                    prop.listKey,
-                    prop.many,
-                    prop.selection || '',
+                    schema.listKey,
+                    schema.many,
+                    schema.selection || '',
                     value
                   )
                 );
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 2feb083086a..812c45a9126 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -14,7 +14,7 @@ import { ComponentBlock } from './component-blocks';
 import { DocumentFeatures } from './views';
 import { validateAndNormalizeDocument } from './validation';
 import { addRelationshipData } from './relationship-data';
-import { assertValidComponentPropField } from './DocumentEditor/component-blocks/field-assertions';
+import { assertValidComponentSchema } from './DocumentEditor/component-blocks/field-assertions';
 
 export { componentThing } from './component';
 
@@ -111,7 +111,7 @@ export const document =
     const lists = new Set(Object.keys(meta.lists));
     for (const [name, block] of Object.entries(componentBlocks)) {
       try {
-        assertValidComponentPropField({ kind: 'object', value: block.props }, lists);
+        assertValidComponentSchema({ kind: 'object', value: block.schema }, lists);
       } catch (err) {
         throw new Error(
           `Component block ${name} in ${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`
diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index ba21bc40e00..35d848d5581 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -4,7 +4,7 @@ import { GraphQLSchema, executeSync, parse } from 'graphql';
 import weakMemoize from '@emotion/weak-memoize';
 import {
   ComponentBlock,
-  ComponentPropField,
+  ComponentSchema,
   RelationshipData,
   RelationshipField,
 } from './DocumentEditor/component-blocks/api';
@@ -41,7 +41,7 @@ export function addRelationshipData(
         if (componentBlock) {
           const [props, children] = await Promise.all([
             addRelationshipDataToComponentProps(
-              { kind: 'object', value: componentBlock.props },
+              { kind: 'object', value: componentBlock.schema },
               node.props,
               (relationship, data) =>
                 fetchRelationshipData(
@@ -152,24 +152,24 @@ async function fetchDataForOne(
 }
 
 export async function addRelationshipDataToComponentProps(
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   val: any,
   fetchData: (relationship: RelationshipField<boolean>, data: any) => Promise<any>
 ): Promise<any> {
-  switch (prop.kind) {
+  switch (schema.kind) {
     case 'child':
     case 'form': {
       return val;
     }
     case 'relationship': {
-      return fetchData(prop, val);
+      return fetchData(schema, val);
     }
     case 'object': {
       return Object.fromEntries(
         await Promise.all(
-          Object.keys(prop.value).map(async key => [
+          Object.keys(schema.value).map(async key => [
             key,
-            await addRelationshipDataToComponentProps(prop.value[key], val[key], fetchData),
+            await addRelationshipDataToComponentProps(schema.value[key], val[key], fetchData),
           ])
         )
       );
@@ -178,7 +178,7 @@ export async function addRelationshipDataToComponentProps(
       return {
         discriminant: val.discriminant,
         value: await addRelationshipDataToComponentProps(
-          prop.values[val.discriminant],
+          schema.values[val.discriminant],
           val.value,
           fetchData
         ),
@@ -187,12 +187,12 @@ export async function addRelationshipDataToComponentProps(
     case 'array': {
       return await Promise.all(
         (val as any[]).map(async innerVal =>
-          addRelationshipDataToComponentProps(prop.element, innerVal, fetchData)
+          addRelationshipDataToComponentProps(schema.element, innerVal, fetchData)
         )
       );
     }
   }
-  assertNever(prop);
+  assertNever(schema);
 }
 
 const document = parse(`
diff --git a/packages/fields-document/src/structured/tests/test-fixtures.ts b/packages/fields-document/src/structured/tests/test-fixtures.ts
index a5556426935..703aa92c04e 100644
--- a/packages/fields-document/src/structured/tests/test-fixtures.ts
+++ b/packages/fields-document/src/structured/tests/test-fixtures.ts
@@ -1,5 +1,5 @@
 import { componentThing } from '../../component';
-import { ArrayField, ComponentPropFieldForGraphQL, fields } from '../../component-blocks';
+import { ArrayField, ComponentSchemaForGraphQL, fields } from '../../component-blocks';
 
 export const name = 'NEEDS A NAME';
 export const typeFunction = componentThing;
@@ -82,7 +82,7 @@ export const supportsDbMap = true;
 export const fieldName = 'content';
 export const readFieldName = 'contentRaw';
 
-const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
+const schema: ArrayField<ComponentSchemaForGraphQL> = fields.array(
   fields.conditional(
     fields.select({
       defaultValue: 'leaf',
@@ -100,7 +100,7 @@ const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
       group: fields.object({
         label: fields.text({ label: 'Label' }),
         get children() {
-          return prop;
+          return schema;
         },
       }),
     }
@@ -109,7 +109,7 @@ const prop: ArrayField<ComponentPropFieldForGraphQL> = fields.array(
 
 export const getTestFields = () => ({ content: componentThing(fieldConfig()) });
 export const fieldConfig = () => ({
-  prop,
+  schema,
 });
 
 export const initItems = () => [
diff --git a/packages/fields-document/src/validation.test.tsx b/packages/fields-document/src/validation.test.tsx
index 42b314cbdee..3e3434a3b86 100644
--- a/packages/fields-document/src/validation.test.tsx
+++ b/packages/fields-document/src/validation.test.tsx
@@ -21,12 +21,12 @@ const componentBlocks: Record<string, ComponentBlock> = {
   basic: component({
     component: () => null,
     label: '',
-    props: { prop: fields.text({ label: '' }) },
+    schema: { prop: fields.text({ label: '' }) },
   }),
   relationship: component({
     component: () => null,
     label: '',
-    props: {
+    schema: {
       one: fields.relationship({ label: '', listKey: 'Post', selection: 'something' }),
       many: fields.relationship({ label: '', listKey: 'Post', many: true, selection: 'something' }),
     },
@@ -34,7 +34,7 @@ const componentBlocks: Record<string, ComponentBlock> = {
   object: component({
     component: () => null,
     label: '',
-    props: {
+    schema: {
       prop: fields.object({
         prop: fields.text({ label: '' }),
       }),
@@ -43,7 +43,7 @@ const componentBlocks: Record<string, ComponentBlock> = {
   conditional: component({
     component: () => null,
     label: '',
-    props: {
+    schema: {
       prop: fields.conditional(fields.checkbox({ label: '' }), {
         true: fields.text({ label: '' }),
         false: fields.child({ kind: 'inline', placeholder: '' }),
diff --git a/packages/fields-document/src/validation.ts b/packages/fields-document/src/validation.ts
index a6cd6852fd0..615e4c05af4 100644
--- a/packages/fields-document/src/validation.ts
+++ b/packages/fields-document/src/validation.ts
@@ -1,6 +1,6 @@
 import { Text, Editor } from 'slate';
 import { createDocumentEditor } from './DocumentEditor';
-import { ComponentBlock, ComponentPropField } from './DocumentEditor/component-blocks/api';
+import { ComponentBlock, ComponentSchema } from './DocumentEditor/component-blocks/api';
 import { assertNever, ReadonlyPropPath } from './DocumentEditor/component-blocks/utils';
 import { Relationships } from './DocumentEditor/relationship';
 import {
@@ -20,22 +20,22 @@ export class PropValidationError extends Error {
 }
 
 function validateComponentBlockProps(
-  prop: ComponentPropField,
+  schema: ComponentSchema,
   value: unknown,
   relationships: Relationships,
   path: ReadonlyPropPath
 ): any {
-  if (prop.kind === 'form') {
-    if (prop.validate(value)) {
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
       return value;
     }
     throw new PropValidationError('Invalid form prop value', path);
   }
-  if (prop.kind === 'child') {
+  if (schema.kind === 'child') {
     return null;
   }
-  if (prop.kind === 'relationship') {
-    if (prop.many) {
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
       if (Array.isArray(value) && value.every(isRelationshipData)) {
         // yes, ts understands this completely correctly, i'm as suprised as you are
         return value.map(x => ({ id: x.id }));
@@ -50,7 +50,7 @@ function validateComponentBlockProps(
     }
   }
 
-  if (prop.kind === 'conditional') {
+  if (schema.kind === 'conditional') {
     if (typeof value !== 'object' || value === null) {
       throw new PropValidationError('Conditional value must be an object', path);
     }
@@ -68,7 +68,7 @@ function validateComponentBlockProps(
     // so we're doing this so that we avoid setting undefined on objects
     const obj: any = {};
     const discriminantVal = validateComponentBlockProps(
-      prop.discriminant,
+      schema.discriminant,
       discriminant,
       relationships,
       path.concat('discriminant')
@@ -77,7 +77,7 @@ function validateComponentBlockProps(
       obj.discriminant = discriminantVal;
     }
     const conditionalFieldValue = validateComponentBlockProps(
-      prop.values[discriminant],
+      schema.values[discriminant],
       val,
       relationships,
       path.concat('value')
@@ -88,20 +88,20 @@ function validateComponentBlockProps(
     return obj;
   }
 
-  if (prop.kind === 'object') {
+  if (schema.kind === 'object') {
     if (typeof value !== 'object' || value === null) {
       throw new PropValidationError('Object value must be an object', path);
     }
-    const allowedKeysSet = new Set(Object.keys(prop.value));
+    const allowedKeysSet = new Set(Object.keys(schema.value));
     for (const key of Object.keys(value)) {
       if (!allowedKeysSet.has(key)) {
         throw new PropValidationError(`Key on object value "${key}" is not allowed`, path);
       }
     }
     let val: Record<string, any> = {};
-    for (const key of Object.keys(prop.value)) {
+    for (const key of Object.keys(schema.value)) {
       const propVal = validateComponentBlockProps(
-        prop.value[key],
+        schema.value[key],
         (value as any)[key],
         relationships,
         path.concat(key)
@@ -114,15 +114,15 @@ function validateComponentBlockProps(
     }
     return val;
   }
-  if (prop.kind === 'array') {
+  if (schema.kind === 'array') {
     if (!Array.isArray(value)) {
       throw new PropValidationError('Array field value must be an array', path);
     }
     return value.map((innerVal, i) => {
-      return validateComponentBlockProps(prop.element, innerVal, relationships, path.concat(i));
+      return validateComponentBlockProps(schema.element, innerVal, relationships, path.concat(i));
     });
   }
-  assertNever(prop);
+  assertNever(schema);
 }
 
 function isText(node: ElementFromValidation): node is TextWithMarks {
@@ -147,7 +147,7 @@ export function getValidatedNodeWithNormalizedComponentFormProps(
       node = {
         ...node,
         props: validateComponentBlockProps(
-          { kind: 'object', value: componentBlock.props },
+          { kind: 'object', value: componentBlock.schema },
           node.props,
           relationships,
           []
diff --git a/packages/fields-document/src/views.tsx b/packages/fields-document/src/views.tsx
index a678159ae4f..1f1a9c0b372 100644
--- a/packages/fields-document/src/views.tsx
+++ b/packages/fields-document/src/views.tsx
@@ -117,7 +117,7 @@ export const controller = (
 } => {
   const memoizedIsComponentBlockValid = weakMemoize((componentBlock: ComponentBlock) =>
     weakMemoize((props: any) =>
-      clientSideValidateProp({ kind: 'object', value: componentBlock.props }, props)
+      clientSideValidateProp({ kind: 'object', value: componentBlock.schema }, props)
     )
   );
   const componentBlocks: Record<string, ComponentBlock> = config.customViews.componentBlocks || {};
diff --git a/tests/api-tests/fields/types/document.test.ts b/tests/api-tests/fields/types/document.test.ts
index 6b8664b568a..b04e1eaf77b 100644
--- a/tests/api-tests/fields/types/document.test.ts
+++ b/tests/api-tests/fields/types/document.test.ts
@@ -327,7 +327,7 @@ describe('Document field type', () => {
                     someBlock: component({
                       component: () => null,
                       label: 'Some Block',
-                      props: {
+                      schema: {
                         something: fields.object({
                           blah: fields.conditional(fields.checkbox({ label: 'Some conditional' }), {
                             false: fields.empty(),

From 5c5a32c91768809022a5200e666dff26b5322a79 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 11:58:41 +1000
Subject: [PATCH 072/124] More renaming

---
 docs/components/docs/DocumentEditorDemo.tsx   |  2 +-
 .../DocumentEditor/component-blocks/api.tsx   |  6 ++--
 .../component-blocks/edit-mode.tsx            |  4 +--
 .../component-blocks/field-assertions.ts      |  4 +--
 .../component-blocks/form-from-preview.tsx    | 10 +++---
 .../DocumentEditor/component-blocks/index.tsx | 12 +++----
 .../component-blocks/initial-values.ts        | 14 ++++----
 .../insertion-and-preview-props.test.tsx      | 34 +++++++++----------
 .../nested-array-field.test.tsx               |  2 +-
 .../component-blocks/preview-props.tsx        |  6 ++--
 .../component-blocks/utils.test.ts            |  2 +-
 .../DocumentEditor/component-blocks/utils.ts  | 18 +++++-----
 .../with-component-blocks.tsx                 | 14 ++++----
 .../src/component-graphql-input.tsx           |  6 ++--
 .../src/component-graphql-output.tsx          |  2 +-
 .../src/component-views/index.tsx             |  2 +-
 packages/fields-document/src/index.ts         |  2 +-
 .../fields-document/src/relationship-data.tsx |  6 ++--
 packages/fields-document/src/validation.ts    |  8 ++---
 packages/fields-document/src/views.tsx        |  2 +-
 20 files changed, 78 insertions(+), 78 deletions(-)

diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index 26b6f37061c..0b055860b5b 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -77,7 +77,7 @@ const documentFeaturesProp = fields.object({
 
 type DocumentFeaturesFormValue = Parameters<
   InferRenderersForComponentBlocks<
-    Record<'documentFeatures', ComponentBlock<typeof documentFeaturesProp['value']>>
+    Record<'documentFeatures', ComponentBlock<typeof documentFeaturesProp['fields']>>
   >['documentFeatures']
 >[0];
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index bf920201500..fa9474bc926 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -130,10 +130,10 @@ export type RelationshipField<Many extends boolean> = {
 };
 
 export interface ObjectField<
-  Value extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
+  fields extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
 > {
   kind: 'object';
-  value: Value;
+  fields: fields;
   preview?: PreviewComponent;
 }
 
@@ -484,7 +484,7 @@ export const fields = {
       preview?: TypedPreviewComponent<ObjectField<Value>>;
     }
   ): ObjectField<Value> {
-    return { kind: 'object', value, preview: opts?.preview as PreviewComponent };
+    return { kind: 'object', fields: value, preview: opts?.preview as PreviewComponent };
   },
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
index 1f5cb1bf2ad..5cf4e72f849 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
@@ -2,14 +2,14 @@ import { Stack } from '@keystone-ui/core';
 import React, { useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { PreviewProps } from './api';
-import { FormValueContentFromPreview, NonChildFieldComponentPropField } from './form-from-preview';
+import { FormValueContentFromPreview, NonChildFieldComponentSchema } from './form-from-preview';
 
 export function FormValue({
   onClose,
   props,
   isValid,
 }: {
-  props: PreviewProps<NonChildFieldComponentPropField>;
+  props: PreviewProps<NonChildFieldComponentSchema>;
   onClose(): void;
   isValid: boolean;
 }) {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
index a256204177c..a9942cd6739 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -50,9 +50,9 @@ function assertValidComponentSchemaInner(
     }
     if (schema.kind === 'object') {
       schemaAncestors.push(schema);
-      for (const [key, innerProp] of Object.entries(schema.value)) {
+      for (const [key, innerProp] of Object.entries(schema.fields)) {
         propPath.push(key);
-        if (schema.value[key] !== innerProp) {
+        if (schema.fields[key] !== innerProp) {
           throw new Error(
             `Fields on an object field must not change over time but the field at "${propPath.join(
               '.'
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 d5adc8f9008..3f7071eea14 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
@@ -138,7 +138,7 @@ const fieldRenderers: {
   },
 };
 
-export type NonChildFieldComponentPropField =
+export type NonChildFieldComponentSchema =
   | FormField<any, any>
   | ObjectField
   | ConditionalField<FormField<any, any>, { [key: string]: ComponentSchema }>
@@ -147,7 +147,7 @@ export type NonChildFieldComponentPropField =
 
 function isNonChildFieldPreviewProps(
   props: PreviewProps<ComponentSchema>
-): props is PreviewProps<NonChildFieldComponentPropField> {
+): props is PreviewProps<NonChildFieldComponentSchema> {
   const kind: ComponentSchema['kind'] = (props as any)?.field?.kind;
   if (!kind) {
     return false;
@@ -156,7 +156,7 @@ function isNonChildFieldPreviewProps(
 }
 
 export const FormValueContentFromPreview = memo(function FormValueContentFromPreview(
-  props: PreviewProps<NonChildFieldComponentPropField> & {
+  props: PreviewProps<NonChildFieldComponentSchema> & {
     autoFocus?: boolean;
     forceValidation?: boolean;
   }
@@ -183,7 +183,7 @@ const SortableItemInForm = memo(function SortableItemInForm(
 });
 
 function findFocusableObjectFieldKey(schema: ObjectField): string | undefined {
-  for (const [key, innerProp] of Object.entries(schema.value)) {
+  for (const [key, innerProp] of Object.entries(schema.fields)) {
     const childFocusable = canFieldBeFocused(innerProp);
     if (childFocusable) {
       return key;
@@ -205,7 +205,7 @@ export function canFieldBeFocused(schema: ComponentSchema): boolean {
     return false;
   }
   if (schema.kind === 'object') {
-    for (const innerProp of Object.values(schema.value)) {
+    for (const innerProp of Object.values(schema.fields)) {
       if (canFieldBeFocused(innerProp)) {
         return true;
       }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index b086945f385..62343b00b53 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -110,7 +110,7 @@ export const ComponentBlocksElement = ({
   const isValid = useMemo(() => {
     return componentBlock
       ? clientSideValidateProp(
-          { kind: 'object', value: componentBlock.schema },
+          { kind: 'object', fields: componentBlock.schema },
           currentElement.props
         )
       : true;
@@ -136,7 +136,7 @@ export const ComponentBlocksElement = ({
         const childPropPaths = findChildPropPathsWithPrevious(
           newProps,
           prevProps,
-          { kind: 'object', value: componentBlock!.schema },
+          { kind: 'object', fields: componentBlock!.schema },
           [],
           [],
           []
@@ -248,7 +248,7 @@ export const ComponentBlocksElement = ({
         throw new Error('expected component block to exist when called');
       };
     }
-    return createGetPreviewProps({ kind: 'object', value: componentBlock.schema }, onPropsChange);
+    return createGetPreviewProps({ kind: 'object', fields: componentBlock.schema }, onPropsChange);
   }, [componentBlock, onPropsChange]);
 
   if (!componentBlock) {
@@ -451,7 +451,7 @@ function ComponentBlockRender({
   children: any;
 }) {
   const getPreviewProps = useMemo(() => {
-    return createGetPreviewProps({ kind: 'object', value: componentBlock.schema }, props => {
+    return createGetPreviewProps({ kind: 'object', fields: componentBlock.schema }, props => {
       onChange(props);
     });
   }, [onChange, componentBlock]);
@@ -530,12 +530,12 @@ function findChildPropPathsWithPrevious(
       );
     case 'object': {
       let paths: ChildPropPathWithPrevious[] = [];
-      Object.keys(schema.value).forEach(key => {
+      Object.keys(schema.fields).forEach(key => {
         paths.push(
           ...findChildPropPathsWithPrevious(
             value[key],
             prevValue[key],
-            schema.value[key],
+            schema.fields[key],
             newPath.concat(key),
             prevPath?.concat(key),
             pathWithKeys?.concat(key)
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 83ce94ea6f5..f877f9dd6ca 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -3,7 +3,7 @@ import { getKeysForArrayValue, getNewArrayElementKey, setKeysForArrayValue } fro
 import { assertNever, findChildPropPaths } from './utils';
 
 export function getInitialValue(type: string, componentBlock: ComponentBlock) {
-  const props = getInitialPropsValue({ kind: 'object', value: componentBlock.schema });
+  const props = getInitialPropsValue({ kind: 'object', fields: componentBlock.schema });
   return {
     type: 'component-block' as const,
     component: type,
@@ -37,8 +37,8 @@ export function getInitialPropsValue(schema: ComponentSchema): any {
     }
     case 'object': {
       let obj: Record<string, any> = {};
-      Object.keys(schema.value).forEach(key => {
-        obj[key] = getInitialPropsValue(schema.value[key]);
+      Object.keys(schema.fields).forEach(key => {
+        obj[key] = getInitialPropsValue(schema.fields[key]);
       });
       return obj;
     }
@@ -73,9 +73,9 @@ export function getInitialPropsValueFromInitializer(
     }
     case 'object': {
       let obj: Record<string, any> = {};
-      Object.keys(schema.value).forEach(key => {
+      Object.keys(schema.fields).forEach(key => {
         obj[key] = getInitialPropsValueFromInitializer(
-          schema.value[key],
+          schema.fields[key],
           initializer === undefined ? undefined : initializer[key]
         );
       });
@@ -118,8 +118,8 @@ export function updateValue(schema: ComponentSchema, currentValue: any, updater:
     }
     case 'object': {
       let obj: Record<string, any> = {};
-      Object.keys(schema.value).forEach(key => {
-        obj[key] = updateValue(schema.value[key], currentValue[key], updater[key]);
+      Object.keys(schema.fields).forEach(key => {
+        obj[key] = updateValue(schema.fields[key], currentValue[key], updater[key]);
       });
       return obj;
     }
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index 246440dc705..180edb411bb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -175,7 +175,7 @@ test('inserting a complex component block', () => {
 });
 
 const getPreviewProps = (editor: Editor) =>
-  createGetPreviewProps({ kind: 'object', value: componentBlocks.complex.schema }, props => {
+  createGetPreviewProps({ kind: 'object', fields: componentBlocks.complex.schema }, props => {
     Transforms.setNodes(editor, { props: props((editor.children[0] as any).props) }, { at: [0] });
   })((editor.children[0] as any).props);
 
@@ -225,7 +225,7 @@ test('preview props api', () => {
   const expectedPreviewProps: typeof previewProps = {
     schema: {
       kind: 'object',
-      value: componentBlocks.complex.schema,
+      fields: componentBlocks.complex.schema,
     },
     fields: {
       object: {
@@ -233,29 +233,29 @@ test('preview props api', () => {
         fields: {
           block: {
             element: React.createElement(ChildFieldEditable, { path: ['object', 'block'] }),
-            schema: componentBlocks.complex.schema.object.value.block,
+            schema: componentBlocks.complex.schema.object.fields.block,
           },
           conditional: {
             discriminant: false,
-            schema: componentBlocks.complex.schema.object.value.conditional,
+            schema: componentBlocks.complex.schema.object.fields.conditional,
             onChange: expect.any(Function),
             options: undefined,
             value: {
-              schema: componentBlocks.complex.schema.object.value.conditional.values.false,
+              schema: componentBlocks.complex.schema.object.fields.conditional.values.false,
               onChange: expect.any(Function),
               value: null,
             },
           },
           conditionalSelect: {
             discriminant: 'a',
-            schema: componentBlocks.complex.schema.object.value.conditionalSelect,
+            schema: componentBlocks.complex.schema.object.fields.conditionalSelect,
             onChange: expect.any(Function),
             options: [
               { label: 'A', value: 'a' },
               { label: 'B', value: 'b' },
             ],
             value: {
-              schema: componentBlocks.complex.schema.object.value.conditionalSelect.values.a,
+              schema: componentBlocks.complex.schema.object.fields.conditionalSelect.values.a,
               onChange: expect.any(Function),
               options: undefined,
               value: '',
@@ -263,21 +263,21 @@ test('preview props api', () => {
           },
           inline: {
             element: React.createElement(ChildFieldEditable, { path: ['object', 'inline'] }),
-            schema: componentBlocks.complex.schema.object.value.inline,
+            schema: componentBlocks.complex.schema.object.fields.inline,
           },
           many: {
-            schema: componentBlocks.complex.schema.object.value.many,
+            schema: componentBlocks.complex.schema.object.fields.many,
             value: [],
             onChange: expect.any(Function),
           },
           prop: {
-            schema: componentBlocks.complex.schema.object.value.prop,
+            schema: componentBlocks.complex.schema.object.fields.prop,
             onChange: expect.any(Function),
             options: undefined,
             value: '',
           },
           select: {
-            schema: componentBlocks.complex.schema.object.value.select,
+            schema: componentBlocks.complex.schema.object.fields.select,
             onChange: expect.any(Function),
             options: [
               { label: 'A', value: 'a' },
@@ -372,7 +372,7 @@ test('preview props conditional change', () => {
   `);
   const conditionalPreviewProps = getPreviewProps(editor).fields.object.fields.conditional;
   const expectedConditionalPreviewProps: typeof conditionalPreviewProps = {
-    schema: componentBlocks.complex.schema.object.value.conditional,
+    schema: componentBlocks.complex.schema.object.fields.conditional,
     discriminant: true,
     onChange: expect.any(Function),
     options: undefined,
@@ -380,7 +380,7 @@ test('preview props conditional change', () => {
       element: React.createElement(ChildFieldEditable, {
         path: ['object', 'conditional', 'value'],
       }),
-      schema: componentBlocks.complex.schema.object.value.conditional.values.true,
+      schema: componentBlocks.complex.schema.object.fields.conditional.values.true,
     },
   };
   expect(getPreviewProps(editor).fields.object.fields.conditional).toEqual(
@@ -443,14 +443,14 @@ test('changing conditional with form inside', () => {
     getPreviewProps(editor).fields.object.fields.conditionalSelect;
   const expectedConditionalSelectPreviewProps: typeof conditionalSelectPreviewProps = {
     discriminant: 'b',
-    schema: componentBlocks.complex.schema.object.value.conditionalSelect,
+    schema: componentBlocks.complex.schema.object.fields.conditionalSelect,
     onChange: expect.any(Function),
     options: [
       { label: 'A', value: 'a' },
       { label: 'B', value: 'b' },
     ],
     value: {
-      schema: componentBlocks.complex.schema.object.value.conditionalSelect.values.b,
+      schema: componentBlocks.complex.schema.object.fields.conditionalSelect.values.b,
       onChange: expect.any(Function),
       options: undefined,
       value: 'B',
@@ -477,14 +477,14 @@ test('changing form inside conditional', () => {
     getPreviewProps(editor).fields.object.fields.conditionalSelect;
   const expectedConditionalSelectPreviewProps: typeof conditionalSelectPreviewProps = {
     discriminant: 'a',
-    schema: componentBlocks.complex.schema.object.value.conditionalSelect,
+    schema: componentBlocks.complex.schema.object.fields.conditionalSelect,
     onChange: expect.any(Function),
     options: [
       { label: 'A', value: 'a' },
       { label: 'B', value: 'b' },
     ],
     value: {
-      schema: componentBlocks.complex.schema.object.value.conditionalSelect.values.a,
+      schema: componentBlocks.complex.schema.object.fields.conditionalSelect.values.a,
       onChange: expect.any(Function),
       options: undefined,
       value: 'Some content',
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 241d6650370..0872824742b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -277,7 +277,7 @@ test('add to multiple in child field in nested array', () => {
       },
     }
   );
-  const previewProps = createGetPreviewProps({ kind: 'object', value: table.schema }, () => {})(
+  const previewProps = createGetPreviewProps({ kind: 'object', fields: table.schema }, () => {})(
     (editor.children[0] as any).props
   );
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index e4224bd8613..ff17521bf07 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -96,7 +96,7 @@ const memoizedInfoForSchema = castToMemoizedInfoForSchema({
         onChange(value => updateValue(schema, value, updater));
       },
       innerOnChanges: Object.fromEntries(
-        Object.keys(schema.value).map(key => {
+        Object.keys(schema.fields).map(key => {
           return [
             key,
             (newVal: (prevVal: unknown) => unknown) => {
@@ -162,9 +162,9 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
     object(schema, value, memoized, path, getInnerProp) {
       const fields: Record<string, PreviewProps<ComponentSchema>> = {};
 
-      Object.keys(schema.value).forEach(key => {
+      Object.keys(schema.fields).forEach(key => {
         fields[key] = getInnerProp(
-          schema.value[key],
+          schema.fields[key],
           (value as any)[key],
           memoized.innerOnChanges[key],
           key
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
index c7718e37c7a..810be3aaea3 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.test.ts
@@ -39,7 +39,7 @@ test('getChildFieldAtPath', () => {
 });
 
 test('getAncestorFields', () => {
-  let root = { kind: 'object' as const, value: props };
+  let root = { kind: 'object' as const, fields: props };
   expect(getAncestorSchemas(root, ['something', 'blockChild'], falseVal)).toEqual([
     root,
     props.something,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 1059e7ca38a..3c46b2e6162 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -26,8 +26,8 @@ export function findChildPropPathsForProp(
       );
     case 'object': {
       let paths: PathToChildFieldWithOption[] = [];
-      Object.keys(schema.value).forEach(key => {
-        paths.push(...findChildPropPathsForProp(value[key], schema.value[key], path.concat(key)));
+      Object.keys(schema.fields).forEach(key => {
+        paths.push(...findChildPropPathsForProp(value[key], schema.fields[key], path.concat(key)));
       });
       return paths;
     }
@@ -45,7 +45,7 @@ export function findChildPropPaths(
   value: Record<string, any>,
   props: Record<string, ComponentSchema>
 ): { path: ReadonlyPropPath | undefined; options: ChildField['options'] }[] {
-  let propPaths = findChildPropPathsForProp(value, { kind: 'object', value: props }, []);
+  let propPaths = findChildPropPathsForProp(value, { kind: 'object', fields: props }, []);
   if (!propPaths.length) {
     return [
       {
@@ -175,7 +175,7 @@ function getSchemaAtPropPathInner(
   }
   if (schema.kind === 'object') {
     const key = path.shift()!;
-    return getSchemaAtPropPathInner(path, (value as any)[key], schema.value[key]);
+    return getSchemaAtPropPathInner(path, (value as any)[key], schema.fields[key]);
   }
   if (schema.kind === 'array') {
     const index = path.shift()!;
@@ -191,7 +191,7 @@ export function getSchemaAtPropPath(
 ): undefined | ComponentSchema {
   return getSchemaAtPropPathInner([...path], value, {
     kind: 'object',
-    value: props,
+    fields: props,
   });
 }
 
@@ -211,7 +211,7 @@ export function clientSideValidateProp(schema: ComponentSchema, value: any): boo
       return clientSideValidateProp(schema.values[value.discriminant], value.value);
     }
     case 'object': {
-      for (const [key, childProp] of Object.entries(schema.value)) {
+      for (const [key, childProp] of Object.entries(schema.fields)) {
         if (!clientSideValidateProp(childProp, value[key])) {
           return false;
         }
@@ -249,7 +249,7 @@ export function getAncestorSchemas(
       currentValue = (currentValue as any).value;
     } else if (currentProp.kind === 'object') {
       currentValue = (currentValue as any)[key];
-      currentProp = currentProp.value[key];
+      currentProp = currentProp.fields[key];
     } else if (
       currentProp.kind === 'child' ||
       currentProp.kind === 'form' ||
@@ -286,7 +286,7 @@ export function traverseProps(
     return;
   }
   if (schema.kind === 'object') {
-    for (const [key, childProp] of Object.entries(schema.value)) {
+    for (const [key, childProp] of Object.entries(schema.fields)) {
       traverseProps(childProp, (value as any)[key], visitor, [...path, key]);
     }
     visitor(schema, value, path);
@@ -328,7 +328,7 @@ export function replaceValueAtPropPath(
   if (schema.kind === 'object') {
     return {
       ...(value as any),
-      [key]: replaceValueAtPropPath(schema.value[key], (value as any)[key], newValue, newPath),
+      [key]: replaceValueAtPropPath(schema.fields[key], (value as any)[key], newValue, newPath),
     };
   }
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index d2ed092e75f..2ae4f1c8983 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -119,7 +119,7 @@ function canSchemaContainChildField(rootSchema: ComponentSchema) {
     } else if (schema.kind === 'array') {
       queue.add(schema.element);
     } else if (schema.kind === 'object') {
-      for (const innerProp of Object.values(schema.value)) {
+      for (const innerProp of Object.values(schema.fields)) {
         queue.add(innerProp);
       }
     } else if (schema.kind === 'conditional') {
@@ -148,7 +148,7 @@ function doesSchemaOnlyEverContainASingleChildField(rootSchema: ComponentSchema)
         return false;
       }
     } else if (schema.kind === 'object') {
-      for (const innerProp of Object.values(schema.value)) {
+      for (const innerProp of Object.values(schema.fields)) {
         queue.add(innerProp);
       }
     } else if (schema.kind === 'conditional') {
@@ -251,9 +251,9 @@ export function withComponentBlocks(
         Editor.withoutNormalizing(editor, () => {
           const componentBlock = blockComponents[componentBlockNode.component];
           if (componentPropNode.propPath !== undefined && componentBlock !== undefined) {
-            const rootProp = { kind: 'object' as const, value: componentBlock.schema };
+            const rootSchema = { kind: 'object' as const, fields: componentBlock.schema };
             const ancestorFields = getAncestorSchemas(
-              rootProp,
+              rootSchema,
               componentPropNode.propPath,
               componentBlockNode.props
             );
@@ -328,9 +328,9 @@ export function withComponentBlocks(
       if (Element.isElement(node) && node.type === 'component-block') {
         const componentBlock = blockComponents[node.component];
         if (componentBlock) {
-          const rootProp = { kind: 'object' as const, value: componentBlock.schema };
+          const rootSchema = { kind: 'object' as const, fields: componentBlock.schema };
           for (const [propPath, arrayField] of findArrayFieldsWithSingleChildField(
-            rootProp,
+            rootSchema,
             node.props
           )) {
             if (
@@ -392,7 +392,7 @@ export function withComponentBlocks(
             setKeysForArrayValue(newVal, newKeys);
             if (!areArraysEqual(arrVal, newVal)) {
               const transformedProps = replaceValueAtPropPath(
-                rootProp,
+                rootSchema,
                 node.props,
                 newVal,
                 propPath
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
index 22a2db4f056..392acb572b3 100644
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ b/packages/fields-document/src/component-graphql-input.tsx
@@ -35,7 +35,7 @@ function getGraphQLInputTypeInner(
       name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
       fields: () =>
         Object.fromEntries(
-          Object.entries(schema.value).map(
+          Object.entries(schema.fields).map(
             ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
               const type = getGraphQLInputType(
                 `${name}${key[0].toUpperCase()}${key.slice(1)}`,
@@ -119,7 +119,7 @@ export async function getValueForUpdate(
   if (schema.kind === 'object') {
     return Object.fromEntries(
       await Promise.all(
-        Object.entries(schema.value).map(async ([key, val]) => {
+        Object.entries(schema.fields).map(async ([key, val]) => {
           return [
             key,
             await getValueForUpdate(val, value[key], prevValue[key], context, path.concat(key)),
@@ -211,7 +211,7 @@ export async function getValueForCreate(
   if (schema.kind === 'object') {
     return Object.fromEntries(
       await Promise.all(
-        Object.entries(schema.value).map(async ([key, val]) => {
+        Object.entries(schema.fields).map(async ([key, val]) => {
           return [key, await getValueForCreate(val, value[key], context, path.concat(key))];
         })
       )
diff --git a/packages/fields-document/src/component-graphql-output.tsx b/packages/fields-document/src/component-graphql-output.tsx
index b0ef5b80a89..13e6a6aa179 100644
--- a/packages/fields-document/src/component-graphql-output.tsx
+++ b/packages/fields-document/src/component-graphql-output.tsx
@@ -70,7 +70,7 @@ function getOutputGraphQLFieldInner(
         name,
         fields: () =>
           Object.fromEntries(
-            Object.entries(schema.value).map(
+            Object.entries(schema.fields).map(
               ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
                 const field = getOutputGraphQLField(
                   `${name}${key[0].toUpperCase()}${key.slice(1)}`,
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
index 1b9f7f705ee..84233db1727 100644
--- a/packages/fields-document/src/component-views/index.tsx
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -104,7 +104,7 @@ function serializeValue(
   }
   if (schema.kind === 'object') {
     return Object.fromEntries(
-      Object.entries(schema.value).map(([key, val]) => {
+      Object.entries(schema.fields).map(([key, val]) => {
         return [key, serializeValue(val, value[key], kind)];
       })
     );
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 812c45a9126..7741957443e 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -111,7 +111,7 @@ export const document =
     const lists = new Set(Object.keys(meta.lists));
     for (const [name, block] of Object.entries(componentBlocks)) {
       try {
-        assertValidComponentSchema({ kind: 'object', value: block.schema }, lists);
+        assertValidComponentSchema({ kind: 'object', fields: block.schema }, lists);
       } catch (err) {
         throw new Error(
           `Component block ${name} in ${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`
diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index 35d848d5581..452c66e9d5c 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -41,7 +41,7 @@ export function addRelationshipData(
         if (componentBlock) {
           const [props, children] = await Promise.all([
             addRelationshipDataToComponentProps(
-              { kind: 'object', value: componentBlock.schema },
+              { kind: 'object', fields: componentBlock.schema },
               node.props,
               (relationship, data) =>
                 fetchRelationshipData(
@@ -167,9 +167,9 @@ export async function addRelationshipDataToComponentProps(
     case 'object': {
       return Object.fromEntries(
         await Promise.all(
-          Object.keys(schema.value).map(async key => [
+          Object.keys(schema.fields).map(async key => [
             key,
-            await addRelationshipDataToComponentProps(schema.value[key], val[key], fetchData),
+            await addRelationshipDataToComponentProps(schema.fields[key], val[key], fetchData),
           ])
         )
       );
diff --git a/packages/fields-document/src/validation.ts b/packages/fields-document/src/validation.ts
index 615e4c05af4..3d1f1335390 100644
--- a/packages/fields-document/src/validation.ts
+++ b/packages/fields-document/src/validation.ts
@@ -92,16 +92,16 @@ function validateComponentBlockProps(
     if (typeof value !== 'object' || value === null) {
       throw new PropValidationError('Object value must be an object', path);
     }
-    const allowedKeysSet = new Set(Object.keys(schema.value));
+    const allowedKeysSet = new Set(Object.keys(schema.fields));
     for (const key of Object.keys(value)) {
       if (!allowedKeysSet.has(key)) {
         throw new PropValidationError(`Key on object value "${key}" is not allowed`, path);
       }
     }
     let val: Record<string, any> = {};
-    for (const key of Object.keys(schema.value)) {
+    for (const key of Object.keys(schema.fields)) {
       const propVal = validateComponentBlockProps(
-        schema.value[key],
+        schema.fields[key],
         (value as any)[key],
         relationships,
         path.concat(key)
@@ -147,7 +147,7 @@ export function getValidatedNodeWithNormalizedComponentFormProps(
       node = {
         ...node,
         props: validateComponentBlockProps(
-          { kind: 'object', value: componentBlock.schema },
+          { kind: 'object', fields: componentBlock.schema },
           node.props,
           relationships,
           []
diff --git a/packages/fields-document/src/views.tsx b/packages/fields-document/src/views.tsx
index 1f1a9c0b372..293bfc04bd5 100644
--- a/packages/fields-document/src/views.tsx
+++ b/packages/fields-document/src/views.tsx
@@ -117,7 +117,7 @@ export const controller = (
 } => {
   const memoizedIsComponentBlockValid = weakMemoize((componentBlock: ComponentBlock) =>
     weakMemoize((props: any) =>
-      clientSideValidateProp({ kind: 'object', value: componentBlock.schema }, props)
+      clientSideValidateProp({ kind: 'object', fields: componentBlock.schema }, props)
     )
   );
   const componentBlocks: Record<string, ComponentBlock> = config.customViews.componentBlocks || {};

From dab673865ec22829833d4c54f6f2276d078d6184 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 12:15:35 +1000
Subject: [PATCH 073/124] Remove new field type

---
 docs/components/docs/DocumentEditorDemo.tsx   |   4 +-
 .../basic/admin/fieldViews/Blah.tsx           |  33 --
 examples-staging/basic/schema.ts              |  20 +-
 .../component-views/package.json              |   4 -
 .../DocumentEditor/component-blocks/api.tsx   | 123 +----
 .../component-blocks/edit-mode.tsx            |   7 +-
 .../component-blocks/form-from-preview.tsx    |  18 +-
 .../fields-document/src/component-blocks.tsx  |   1 -
 .../src/component-graphql-input.tsx           | 505 ------------------
 .../src/component-graphql-output.tsx          | 194 -------
 .../src/component-views/index.tsx             | 129 -----
 packages/fields-document/src/component.ts     | 144 -----
 packages/fields-document/src/index.ts         |   2 -
 .../src/structured/tests/test-fixtures.ts     | 213 --------
 14 files changed, 24 insertions(+), 1373 deletions(-)
 delete mode 100644 examples-staging/basic/admin/fieldViews/Blah.tsx
 delete mode 100644 packages/fields-document/component-views/package.json
 delete mode 100644 packages/fields-document/src/component-graphql-input.tsx
 delete mode 100644 packages/fields-document/src/component-graphql-output.tsx
 delete mode 100644 packages/fields-document/src/component-views/index.tsx
 delete mode 100644 packages/fields-document/src/component.ts
 delete mode 100644 packages/fields-document/src/structured/tests/test-fixtures.ts

diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index 0b055860b5b..9a9941f675e 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -18,7 +18,7 @@ import {
 } from '@keystone-6/fields-document/component-blocks';
 import { Global, jsx } from '@emotion/react';
 
-import { FormValueContentFromPreview } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
+import { FormValueContentFromPreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
 import { createGetPreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/preview-props';
 import { componentBlocks as componentBlocksInExampleProject } from '../../../examples-staging/basic/admin/fieldViews/Content';
 import { initialContent } from '../../lib/initialDocumentDemoContent';
@@ -260,7 +260,7 @@ export function DocumentFeaturesFormAndCode() {
   const { formValue, setFormValue } = useContext(DocumentFeaturesContext);
   return (
     <div>
-      <FormValueContentFromPreview
+      <FormValueContentFromPreviewProps
         {...createGetPreviewProps(documentFeaturesProp, getNewVal => {
           setFormValue(getNewVal(formValue));
         })(formValue)}
diff --git a/examples-staging/basic/admin/fieldViews/Blah.tsx b/examples-staging/basic/admin/fieldViews/Blah.tsx
deleted file mode 100644
index 8aaa4e81d6f..00000000000
--- a/examples-staging/basic/admin/fieldViews/Blah.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-
-import {
-  fields,
-  ArrayField,
-  ComponentSchemaForGraphQL,
-} 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' },
-      ],
-    }),
-    {
-      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;
-        },
-      }),
-    }
-  )
-);
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index b0e0a968b27..9ca265af395 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -10,10 +10,9 @@ import {
   image,
   file,
 } from '@keystone-6/core/fields';
-import { componentThing, document } from '@keystone-6/fields-document';
+import { document } from '@keystone-6/fields-document';
 import { v4 } from 'uuid';
 import { componentBlocks } from './admin/fieldViews/Content';
-import { schema as blahProp } from './admin/fieldViews/Blah';
 import * as Keystone from '.keystone/types';
 
 type AccessArgs = {
@@ -152,23 +151,6 @@ export const lists: Keystone.Lists = {
         },
         defaultValue: 'draft',
       }),
-      blah: componentThing({
-        schema: blahProp,
-        ui: { views: require.resolve('./admin/fieldViews/Blah.tsx') },
-      }),
-      // something: json({
-      //   hooks: {
-      //     validateInput({ resolvedData, addValidationError }) {
-      //       const x = resolvedData.something;
-      //       if (x !== undefined) {
-      //         const error = myIoTsSchema.validate(x);
-      //         if (error) {
-      //           addValidationError(error);
-      //         }
-      //       }
-      //     },
-      //   },
-      // }),
       content: document({
         ui: { views: require.resolve('./admin/fieldViews/Content.tsx') },
         relationships: {
diff --git a/packages/fields-document/component-views/package.json b/packages/fields-document/component-views/package.json
deleted file mode 100644
index d7f7318638e..00000000000
--- a/packages/fields-document/component-views/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "main": "dist/keystone-6-fields-document-component-views.cjs.js",
-  "module": "dist/keystone-6-fields-document-component-views.esm.js"
-}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index fa9474bc926..83ecff03614 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -1,6 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { graphql } from '@keystone-6/core';
 import { jsx } from '@keystone-ui/core';
 import {
   FieldContainer,
@@ -51,22 +50,6 @@ export type FormField<Value extends FormFieldValue, Options> = {
    * a potentially malicious client
    */
   validate(value: unknown): boolean;
-  preview?: PreviewComponent;
-};
-
-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 =
@@ -117,7 +100,6 @@ export type ChildField = {
 export type ArrayField<ElementField extends ComponentSchema> = {
   kind: 'array';
   element: ElementField;
-  preview?: PreviewComponent;
 };
 
 export type RelationshipField<Many extends boolean> = {
@@ -126,7 +108,6 @@ export type RelationshipField<Many extends boolean> = {
   selection: string | undefined;
   label: string;
   many: Many;
-  preview?: PreviewComponent;
 };
 
 export interface ObjectField<
@@ -134,7 +115,6 @@ export interface ObjectField<
 > {
   kind: 'object';
   fields: fields;
-  preview?: PreviewComponent;
 }
 
 type StringOrBooleanToString<Val extends string | boolean> = Val extends string
@@ -154,14 +134,8 @@ export type ConditionalField<
   kind: 'conditional';
   discriminant: DiscriminantField;
   values: ConditionalValues;
-  preview?: PreviewComponent;
 };
 
-type PreviewComponent = (props: unknown) => ReactElement | null;
-type TypedPreviewComponent<Field extends ComponentSchema> = (
-  props: PreviewProps<Field> & { autoFocus?: boolean }
-) => ReactElement | null;
-
 export type ComponentSchema =
   | ChildField
   | FormField<any, any>
@@ -169,29 +143,16 @@ export type ComponentSchema =
   | 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; preview?: PreviewComponent };
-
-export type ComponentSchemaForGraphQL =
-  | FormFieldWithGraphQLField<any, any>
-  | ObjectField<Record<string, ComponentSchemaForGraphQL>>
-  | ConditionalField<
-      FormFieldWithGraphQLField<any, any>,
-      { [key: string]: ComponentSchemaForGraphQL }
-    >
-  | RelationshipField<boolean>
-  // this is written like this rather than ArrayField<ComponentSchemaForGraphQL> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentSchemaForGraphQL; preview?: PreviewComponent };
+  | { kind: 'array'; element: ComponentSchema };
 
 export const fields = {
   text({
     label,
     defaultValue = '',
-    preview,
   }: {
     label: string;
     defaultValue?: string;
-    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<string, undefined>>;
-  }): FormFieldWithGraphQLField<string, undefined> {
+  }): FormField<string, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -213,22 +174,15 @@ export const fields = {
       validate(value) {
         return typeof value === 'string';
       },
-      graphql: {
-        input: graphql.String,
-        output: graphql.field({ type: graphql.String }),
-      },
-      preview: preview as PreviewComponent,
     };
   },
   url({
     label,
     defaultValue = '',
-    preview,
   }: {
     label: string;
     defaultValue?: string;
-    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<string, undefined>>;
-  }): FormFieldWithGraphQLField<string, undefined> {
+  }): FormField<string, undefined> {
     const validate = (value: unknown) => {
       return typeof value === 'string' && (value === '' || isValidURL(value));
     };
@@ -257,24 +211,17 @@ export const fields = {
       options: undefined,
       defaultValue,
       validate,
-      graphql: {
-        input: graphql.String,
-        output: graphql.field({ type: graphql.String }),
-      },
-      preview: preview as PreviewComponent,
     };
   },
   select<Option extends { label: string; value: string }>({
     label,
     options,
     defaultValue,
-    preview,
   }: {
     label: string;
     options: readonly Option[];
     defaultValue: Option['value'];
-    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<Option['value'], readonly Option[]>>;
-  }): FormFieldWithGraphQLField<Option['value'], readonly Option[]> {
+  }): FormField<Option['value'], readonly Option[]> {
     const optionValuesSet = new Set(options.map(x => x.value));
     if (!optionValuesSet.has(defaultValue)) {
       throw new Error(
@@ -305,32 +252,17 @@ 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;
-          },
-        }),
-      },
-      preview: preview as PreviewComponent,
     };
   },
   multiselect<Option extends { label: string; value: string }>({
     label,
     options,
     defaultValue,
-    preview,
   }: {
     label: string;
     options: readonly Option[];
     defaultValue: readonly Option['value'][];
-    preview?: TypedPreviewComponent<
-      FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]>
-    >;
-  }): FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]> {
+  }): FormField<readonly Option['value'][], readonly Option[]> {
     const valuesToOption = new Map(options.map(x => [x.value, x]));
     return {
       kind: 'form',
@@ -357,28 +289,15 @@ 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;
-          },
-        }),
-      },
-      preview: preview as PreviewComponent,
     };
   },
   checkbox({
     label,
     defaultValue = false,
-    preview,
   }: {
     label: string;
     defaultValue?: boolean;
-    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<boolean, undefined>>;
-  }): FormFieldWithGraphQLField<boolean, undefined> {
+  }): FormField<boolean, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -401,11 +320,6 @@ export const fields = {
       validate(value) {
         return typeof value === 'boolean';
       },
-      graphql: {
-        input: graphql.Boolean,
-        output: graphql.field({ type: graphql.Boolean }),
-      },
-      preview: preview as PreviewComponent,
     };
   },
   empty(): FormField<null, undefined> {
@@ -478,13 +392,8 @@ export const fields = {
             },
     };
   },
-  object<Value extends Record<string, ComponentSchema>>(
-    value: Value,
-    opts?: {
-      preview?: TypedPreviewComponent<ObjectField<Value>>;
-    }
-  ): ObjectField<Value> {
-    return { kind: 'object', fields: value, preview: opts?.preview as PreviewComponent };
+  object<Fields extends Record<string, ComponentSchema>>(fields: Fields): ObjectField<Fields> {
+    return { kind: 'object', fields };
   },
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
@@ -493,10 +402,7 @@ export const fields = {
     }
   >(
     discriminant: DiscriminantField,
-    values: ConditionalValues,
-    opts?: {
-      preview?: TypedPreviewComponent<ConditionalField<DiscriminantField, ConditionalValues>>;
-    }
+    values: ConditionalValues
   ): ConditionalField<DiscriminantField, ConditionalValues> {
     if (
       (discriminant.validate('true') || discriminant.validate('false')) &&
@@ -510,19 +416,16 @@ export const fields = {
       kind: 'conditional',
       discriminant,
       values: values,
-      preview: opts?.preview as PreviewComponent,
     };
   },
   relationship<Many extends boolean | undefined = false>({
     listKey,
     selection,
     label,
-    preview,
     many,
   }: {
     listKey: string;
     label: string;
-    preview?: TypedPreviewComponent<RelationshipField<Many extends true ? true : false>>;
     selection?: string;
   } & (Many extends undefined | false ? { many?: Many } : { many: Many })): RelationshipField<
     Many extends true ? true : false
@@ -533,14 +436,10 @@ export const fields = {
       selection,
       label,
       many: (many ? true : false) as any,
-      preview: preview as PreviewComponent,
     };
   },
-  array<ElementField extends ComponentSchema>(
-    element: ElementField,
-    opts?: { preview?: TypedPreviewComponent<ArrayField<ElementField>> }
-  ): ArrayField<ElementField> {
-    return { kind: 'array', element, preview: opts?.preview as PreviewComponent };
+  array<ElementField extends ComponentSchema>(element: ElementField): ArrayField<ElementField> {
+    return { kind: 'array', element };
   },
 };
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
index 5cf4e72f849..c19e1537249 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
@@ -2,7 +2,10 @@ import { Stack } from '@keystone-ui/core';
 import React, { useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
 import { PreviewProps } from './api';
-import { FormValueContentFromPreview, NonChildFieldComponentSchema } from './form-from-preview';
+import {
+  FormValueContentFromPreviewProps,
+  NonChildFieldComponentSchema,
+} from './form-from-preview';
 
 export function FormValue({
   onClose,
@@ -17,7 +20,7 @@ export function FormValue({
 
   return (
     <Stack gap="xlarge" contentEditable={false}>
-      <FormValueContentFromPreview {...props} forceValidation={forceValidation} />
+      <FormValueContentFromPreviewProps {...props} forceValidation={forceValidation} />
       <KeystoneUIButton
         size="small"
         tone="active"
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 3f7071eea14..09c80bc0d8e 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
@@ -105,7 +105,7 @@ const fieldRenderers: {
         {Object.entries(props.fields).map(
           ([key, propVal]) =>
             isNonChildFieldPreviewProps(propVal) && (
-              <FormValueContentFromPreview
+              <FormValueContentFromPreviewProps
                 autoFocus={key === firstFocusable}
                 key={key}
                 {...propVal}
@@ -131,7 +131,7 @@ const fieldRenderers: {
           [props.autoFocus, discriminant, props.discriminant, props.onChange]
         )}
         {isNonChildFieldPreviewProps(props.value) && (
-          <FormValueContentFromPreview {...props.value} />
+          <FormValueContentFromPreviewProps {...props.value} />
         )}
       </Stack>
     );
@@ -148,23 +148,15 @@ export type NonChildFieldComponentSchema =
 function isNonChildFieldPreviewProps(
   props: PreviewProps<ComponentSchema>
 ): props is PreviewProps<NonChildFieldComponentSchema> {
-  const kind: ComponentSchema['kind'] = (props as any)?.field?.kind;
-  if (!kind) {
-    return false;
-  }
-  return true;
+  return props.schema.kind !== 'child';
 }
 
-export const FormValueContentFromPreview = memo(function FormValueContentFromPreview(
+export const FormValueContentFromPreviewProps = memo(function FormValueContentFromPreview(
   props: PreviewProps<NonChildFieldComponentSchema> & {
     autoFocus?: boolean;
     forceValidation?: boolean;
   }
 ) {
-  if (props.schema.preview) {
-    return <props.schema.preview {...(props as any)} />;
-  }
-
   const Comp = fieldRenderers[props.schema.kind];
   return <Comp props={props as any} />;
 });
@@ -177,7 +169,7 @@ const SortableItemInForm = memo(function SortableItemInForm(
       <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
         <DragHandle />
       </Stack>
-      {isNonChildFieldPreviewProps(props) && <FormValueContentFromPreview {...props} />}
+      {isNonChildFieldPreviewProps(props) && <FormValueContentFromPreviewProps {...props} />}
     </SortableItem>
   );
 });
diff --git a/packages/fields-document/src/component-blocks.tsx b/packages/fields-document/src/component-blocks.tsx
index ac7af409f40..6e131eec1d3 100644
--- a/packages/fields-document/src/component-blocks.tsx
+++ b/packages/fields-document/src/component-blocks.tsx
@@ -10,5 +10,4 @@ export type {
   RelationshipField,
   InferRenderersForComponentBlocks,
   ArrayField,
-  ComponentSchemaForGraphQL,
 } from './DocumentEditor/component-blocks/api';
diff --git a/packages/fields-document/src/component-graphql-input.tsx b/packages/fields-document/src/component-graphql-input.tsx
deleted file mode 100644
index 392acb572b3..00000000000
--- a/packages/fields-document/src/component-graphql-input.tsx
+++ /dev/null
@@ -1,505 +0,0 @@
-import { graphql } from '@keystone-6/core';
-import { 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
-  );
-  return { id };
-}
-
-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/component-graphql-output.tsx b/packages/fields-document/src/component-graphql-output.tsx
deleted file mode 100644
index 13e6a6aa179..00000000000
--- a/packages/fields-document/src/component-graphql-output.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-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,
-  'value'
->;
-
-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 schema.graphql.output;
-  }
-  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])];
-              }
-            )
-          ),
-      }),
-    });
-  }
-  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/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
deleted file mode 100644
index 84233db1727..00000000000
--- a/packages/fields-document/src/component-views/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-/** @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 } from '../DocumentEditor/component-blocks/utils';
-import { FormValueContentFromPreview } 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) });
-    });
-  }, [field.schema, onChange]);
-  return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
-      <FormValueContentFromPreview
-        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,
-    graphqlSelection: `${config.path}Raw(hydrateRelationships: true)`,
-    schema: config.customViews.schema,
-    defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.schema) },
-    deserialize: data => {
-      return {
-        kind: 'update',
-        value: data[`${config.path}Raw`],
-      };
-    },
-    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/component.ts b/packages/fields-document/src/component.ts
deleted file mode 100644
index a56dc0ccf00..00000000000
--- a/packages/fields-document/src/component.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import path from 'path';
-import {
-  BaseListTypeInfo,
-  JSONValue,
-  FieldTypeFunc,
-  CommonFieldConfig,
-  jsonFieldTypePolyfilledForSQLite,
-} from '@keystone-6/core/types';
-import { graphql } from '@keystone-6/core';
-import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
-import { getOutputGraphQLField } from './component-graphql-output';
-import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
-import {
-  getGraphQLInputType,
-  getValueForCreate,
-  getValueForUpdate,
-} from './component-graphql-input';
-import { assertValidComponentSchema } from './DocumentEditor/component-blocks/field-assertions';
-import { addRelationshipDataToComponentProps, fetchRelationshipData } from './relationship-data';
-
-export type ComponentThingFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
-  CommonFieldConfig<ListTypeInfo> & {
-    db?: { map?: string };
-    schema: ComponentSchemaForGraphQL;
-  };
-
-const views = path.join(path.dirname(__dirname), 'component-views');
-
-export const componentThing =
-  <ListTypeInfo extends BaseListTypeInfo>({
-    schema,
-    ...config
-  }: ComponentThingFieldConfig<ListTypeInfo>): FieldTypeFunc<ListTypeInfo> =>
-  meta => {
-    if ((config as any).isIndexed === 'unique') {
-      throw Error("isIndexed: 'unique' is not a supported option for field type component");
-    }
-    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 resolve = (val: JSONValue | undefined) =>
-      val === null && meta.provider === 'postgresql' ? 'JsonNull' : val;
-
-    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 (val === null && meta.provider === 'postgresql') {
-                val = 'JsonNull';
-              }
-              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 resolve(await getValueForCreate(schema, val, context, []));
-            },
-          },
-          update: {
-            arg: graphql.arg({
-              type: getGraphQLInputType(name, schema, 'update', new Map(), meta),
-            }),
-          },
-        },
-        output: getOutputGraphQLField(
-          name,
-          schema,
-          unreferencedConcreteInterfaceImplementations,
-          new Map(),
-          meta
-        ),
-        extraOutputFields: {
-          [`${meta.fieldKey}Raw`]: 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;
-            },
-          }),
-        },
-        views,
-        getAdminMeta: () => ({}),
-        unreferencedConcreteInterfaceImplementations,
-      },
-      {
-        default: {
-          kind: 'literal',
-          value: JSON.stringify(defaultValue),
-        },
-        map: config.db?.map,
-        mode: 'required',
-      }
-    );
-  };
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index 7741957443e..920565c483c 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -16,8 +16,6 @@ import { validateAndNormalizeDocument } from './validation';
 import { addRelationshipData } from './relationship-data';
 import { assertValidComponentSchema } from './DocumentEditor/component-blocks/field-assertions';
 
-export { componentThing } from './component';
-
 type RelationshipsConfig = Record<
   string,
   {
diff --git a/packages/fields-document/src/structured/tests/test-fixtures.ts b/packages/fields-document/src/structured/tests/test-fixtures.ts
deleted file mode 100644
index 703aa92c04e..00000000000
--- a/packages/fields-document/src/structured/tests/test-fixtures.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { componentThing } from '../../component';
-import { ArrayField, ComponentSchemaForGraphQL, fields } from '../../component-blocks';
-
-export const name = 'NEEDS A NAME';
-export const typeFunction = componentThing;
-export const exampleValue = () => [
-  {
-    leaf: {
-      label: 'Keystone',
-      url: 'https://keystonejs.com',
-    },
-  },
-  {
-    group: {
-      label: 'Docs',
-      children: [
-        { leaf: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' } },
-        {
-          group: {
-            label: 'Fields',
-            children: [
-              { leaf: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' } },
-            ],
-          },
-        },
-      ],
-    },
-  },
-];
-export const createReturnedValue = () => [
-  {
-    discriminant: 'leaf',
-    value: { label: 'Keystone', url: 'https://keystonejs.com' },
-  },
-  {
-    discriminant: 'group',
-    value: {
-      label: 'Docs',
-      children: [
-        {
-          discriminant: 'leaf',
-          value: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' },
-        },
-        {
-          discriminant: 'group',
-          value: {
-            label: 'Fields',
-            children: [
-              {
-                discriminant: 'leaf',
-                value: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' },
-              },
-            ],
-          },
-        },
-      ],
-    },
-  },
-];
-export const exampleValue2 = () => [
-  {
-    leaf: {
-      label: 'Keystone',
-      url: 'https://keystonejs.com',
-    },
-  },
-];
-export const updateReturnedValue = () => [
-  {
-    discriminant: 'leaf',
-    value: {
-      label: 'Keystone',
-      url: 'https://keystonejs.com',
-    },
-  },
-];
-
-export const neverNull = true;
-export const supportsUnique = false;
-export const skipRequiredTest = true;
-export const supportsDbMap = true;
-export const fieldName = 'content';
-export const readFieldName = 'contentRaw';
-
-const schema: ArrayField<ComponentSchemaForGraphQL> = fields.array(
-  fields.conditional(
-    fields.select({
-      defaultValue: 'leaf',
-      label: 'Type',
-      options: [
-        { label: 'Leaf', value: 'leaf' },
-        { label: 'Group', value: 'group' },
-      ],
-    }),
-    {
-      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;
-        },
-      }),
-    }
-  )
-);
-
-export const getTestFields = () => ({ content: componentThing(fieldConfig()) });
-export const fieldConfig = () => ({
-  schema,
-});
-
-export const initItems = () => [
-  { name: 'a', content: [] },
-  {
-    name: 'b',
-    content: [{ leaf: { label: 'Keystone', url: 'https://keystonejs.com' } }],
-  },
-  {
-    name: 'c',
-    content: [
-      { leaf: { label: 'Keystone', url: 'https://keystonejs.com' } },
-      {
-        group: {
-          label: 'Docs',
-          children: [
-            { leaf: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' } },
-            {
-              group: {
-                label: 'Fields',
-                children: [
-                  { leaf: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' } },
-                ],
-              },
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    name: 'd',
-    content: [{ group: { label: 'Something' } }],
-  },
-  {
-    name: 'e',
-    content: [{ group: { label: 'Outer', children: [{ group: { label: 'Inner' } }] } }],
-  },
-  { name: 'f' },
-  { name: 'g' },
-];
-
-export const storedValues = () => [
-  { name: 'a', contentRaw: [] },
-  {
-    name: 'b',
-    contentRaw: [
-      { discriminant: 'leaf', value: { label: 'Keystone', url: 'https://keystonejs.com' } },
-    ],
-  },
-  {
-    name: 'c',
-    contentRaw: [
-      { discriminant: 'leaf', value: { label: 'Keystone', url: 'https://keystonejs.com' } },
-      {
-        discriminant: 'group',
-        value: {
-          label: 'Docs',
-          children: [
-            {
-              discriminant: 'leaf',
-              value: { label: 'GraphQL API', url: 'https://keystonejs.com/docs/apis/graphql' },
-            },
-            {
-              discriminant: 'group',
-              value: {
-                label: 'Fields',
-                children: [
-                  {
-                    discriminant: 'leaf',
-                    value: { label: 'Text', url: 'https://keystonejs.com/docs/apis/fields#text' },
-                  },
-                ],
-              },
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    name: 'd',
-    contentRaw: [{ discriminant: 'group', value: { label: 'Something', children: [] } }],
-  },
-  {
-    name: 'e',
-    contentRaw: [
-      {
-        discriminant: 'group',
-        value: {
-          label: 'Outer',
-          children: [{ discriminant: 'group', value: { label: 'Inner', children: [] } }],
-        },
-      },
-    ],
-  },
-  { name: 'f', contentRaw: [] },
-  { name: 'g', contentRaw: [] },
-];
-
-export const supportedFilters = () => [];

From b1dc6bd7a60ac05158d6f2b4b37ab89241e0ba37 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 12:24:43 +1000
Subject: [PATCH 074/124] Remove some more things

---
 examples-staging/basic/schema.graphql | 58 ---------------------------
 examples-staging/basic/schema.prisma  |  1 -
 examples-staging/basic/schema.ts      | 12 ++++--
 examples/document-field/package.json  |  2 +-
 packages/core/package.json            |  2 +-
 5 files changed, 10 insertions(+), 65 deletions(-)

diff --git a/examples-staging/basic/schema.graphql b/examples-staging/basic/schema.graphql
index 4e0da04eff6..58b60875d7e 100644
--- a/examples-staging/basic/schema.graphql
+++ b/examples-staging/basic/schema.graphql
@@ -406,17 +406,11 @@ type Post {
   id: ID!
   title: String
   status: String
-  blah: [PostBlah]
-  blahRaw(hydrateRelationships: Boolean! = false): JSON
   content: Post_content_Document
   publishDate: DateTime
   author: User
 }
 
-interface PostBlah {
-  discriminant: String
-}
-
 type Post_content_Document {
   document(hydrateRelationships: Boolean! = false): JSON!
 }
@@ -428,26 +422,6 @@ input PostWhereUniqueInput {
   id: ID
 }
 
-type PostBlahLeaf implements PostBlah {
-  discriminant: String
-  value: PostBlahLeafValue
-}
-
-type PostBlahLeafValue {
-  label: String
-  url: String
-}
-
-type PostBlahGroup implements PostBlah {
-  discriminant: String
-  value: PostBlahGroupValue
-}
-
-type PostBlahGroupValue {
-  label: String
-  children: [PostBlah]
-}
-
 input PostWhereInput {
   AND: [PostWhereInput!]
   OR: [PostWhereInput!]
@@ -480,27 +454,11 @@ input PostOrderByInput {
 input PostUpdateInput {
   title: String
   status: String
-  blah: [PostBlahUpdateInput]
   content: JSON
   publishDate: DateTime
   author: UserRelateToOneForUpdateInput
 }
 
-input PostBlahUpdateInput {
-  leaf: PostBlahLeafUpdateInput
-  group: PostBlahGroupUpdateInput
-}
-
-input PostBlahLeafUpdateInput {
-  label: String
-  url: String
-}
-
-input PostBlahGroupUpdateInput {
-  label: String
-  children: [PostBlahUpdateInput]
-}
-
 input PostUpdateArgs {
   where: PostWhereUniqueInput!
   data: PostUpdateInput!
@@ -509,27 +467,11 @@ input PostUpdateArgs {
 input PostCreateInput {
   title: String
   status: String
-  blah: [PostBlahCreateInput]
   content: JSON
   publishDate: DateTime
   author: UserRelateToOneForCreateInput
 }
 
-input PostBlahCreateInput {
-  leaf: PostBlahLeafCreateInput
-  group: PostBlahGroupCreateInput
-}
-
-input PostBlahLeafCreateInput {
-  label: String
-  url: String
-}
-
-input PostBlahGroupCreateInput {
-  label: String
-  children: [PostBlahCreateInput]
-}
-
 """
 The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
 """
diff --git a/examples-staging/basic/schema.prisma b/examples-staging/basic/schema.prisma
index 07293662d37..236f81c69c0 100644
--- a/examples-staging/basic/schema.prisma
+++ b/examples-staging/basic/schema.prisma
@@ -45,7 +45,6 @@ model Post {
   id          String    @id @default(cuid())
   title       String    @default("")
   status      String    @default("draft")
-  blah        String    @default("[]")
   content     String    @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")
   publishDate DateTime?
   author      User?     @relation("Post_author", fields: [authorId], references: [id])
diff --git a/examples-staging/basic/schema.ts b/examples-staging/basic/schema.ts
index 9ca265af395..8d5b5c3668b 100644
--- a/examples-staging/basic/schema.ts
+++ b/examples-staging/basic/schema.ts
@@ -132,9 +132,7 @@ export const lists: Keystone.Lists = {
   }),
   Post: list({
     fields: {
-      title: text({
-        // ui: { views: require.resolve('./admin/fieldViews/whatever.tsx') },
-      }),
+      title: text({ access: {} }),
       // TODO: expand this out into a proper example project
       // Enable this line to test custom field views
       // test: text({ ui: { views: require.resolve('./admin/fieldViews/Test.tsx') } }),
@@ -160,7 +158,13 @@ export const lists: Keystone.Lists = {
           },
         },
         formatting: true,
-        layouts: [[1], [1, 1], [1, 1, 1], [2, 1], [1, 2], [1, 2, 1]],
+        layouts: [
+          [1, 1],
+          [1, 1, 1],
+          [2, 1],
+          [1, 2],
+          [1, 2, 1],
+        ],
         links: true,
         dividers: true,
         componentBlocks,
diff --git a/examples/document-field/package.json b/examples/document-field/package.json
index e57c09a394f..f8a2d43a345 100644
--- a/examples/document-field/package.json
+++ b/examples/document-field/package.json
@@ -24,4 +24,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/examples/document-field"
-}
\ No newline at end of file
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index 789ea8f26a0..1c88fed1693 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -164,4 +164,4 @@
     ]
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/packages/core"
-}
\ No newline at end of file
+}

From 93f2afd269f065d0b1ad6efa93afe7ab3c779465 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 12:53:32 +1000
Subject: [PATCH 075/124] Remove entrypoint that no longer exists

---
 packages/fields-document/package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index add7d14cdbb..76c1301c0d3 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -17,8 +17,7 @@
       "component-blocks.tsx",
       "index.ts",
       "primitives.ts",
-      "views.tsx",
-      "component-views/index.tsx"
+      "views.tsx"
     ]
   },
   "peerDependencies": {
@@ -71,4 +70,4 @@
   "engines": {
     "node": "^14.15 || ^16.13"
   }
-}
+}
\ No newline at end of file

From 1183fb1b55e8a400e799f363c33aba9c2b9fb771 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 13:58:27 +1000
Subject: [PATCH 076/124] Rename component to preview

---
 .../basic/admin/fieldViews/Content.tsx           | 16 ++++++++--------
 .../src/DocumentEditor/component-blocks/api.tsx  |  4 ++--
 .../component-blocks/array-field.test.tsx        |  2 +-
 ...child-field-in-recursive-array-field.test.tsx |  2 +-
 .../document-features-normalization.test.tsx     |  2 +-
 .../DocumentEditor/component-blocks/index.tsx    |  2 +-
 .../insert-break-and-delete.test.tsx             |  8 ++++----
 .../insertion-and-preview-props.test.tsx         |  4 ++--
 .../multi-child-field-in-array-field.test.tsx    |  2 +-
 .../component-blocks/nested-array-field.test.tsx |  2 +-
 .../component-blocks/normalization.test.tsx      | 14 +++++++-------
 .../markdown-link-shortcut.test.tsx              |  4 ++--
 packages/fields-document/src/validation.test.tsx |  8 ++++----
 tests/api-tests/fields/types/document.test.ts    |  2 +-
 14 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index adf682a7c8e..f06addaed38 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -26,7 +26,7 @@ const noticeIconMap = {
 
 export const componentBlocks = {
   table: component({
-    component: function MyTable(props) {
+    preview: function MyTable(props) {
       useEffect(() => {
         let maxColumns = 1;
         const rows = props.fields.rows;
@@ -121,7 +121,7 @@ export const componentBlocks = {
     },
   }),
   myList: component({
-    component: function MyList(props) {
+    preview: function MyList(props) {
       useEffect(() => {
         if (!props.fields.children.elements.length) {
           props.fields.children.onChange([{ key: undefined }]);
@@ -162,7 +162,7 @@ export const componentBlocks = {
     // chromeless: true,
   }),
   hero: component({
-    component: props => {
+    preview: props => {
       return (
         <div
           css={{
@@ -241,12 +241,12 @@ export const componentBlocks = {
   }),
   void: component({
     label: 'Void',
-    component: props => <NotEditable>{props.fields.value.value}</NotEditable>,
+    preview: props => <NotEditable>{props.fields.value.value}</NotEditable>,
     schema: { value: fields.text({ label: 'Value' }) },
   }),
   conditionallyVoid: component({
     label: 'Conditionally Void',
-    component: props =>
+    preview: props =>
       props.fields.something.discriminant ? (
         <NotEditable>Is void</NotEditable>
       ) : (
@@ -261,7 +261,7 @@ export const componentBlocks = {
   }),
   featuredAuthors: component({
     label: 'Featured Authors',
-    component: props => {
+    preview: props => {
       return (
         <div>
           <h1>{props.fields.title.element}</h1>
@@ -295,7 +295,7 @@ export const componentBlocks = {
     },
   }),
   notice: component({
-    component: function Notice(props) {
+    preview: function Notice(props) {
       const { palette, radii, spacing } = useTheme();
       const intentMap = {
         info: {
@@ -407,7 +407,7 @@ export const componentBlocks = {
     },
   }),
   quote: component({
-    component: props => {
+    preview: props => {
       return (
         <div
           css={{
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 83ecff03614..44e59ac8b9f 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -446,7 +446,7 @@ export const fields = {
 export type ComponentBlock<
   Fields extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
 > = {
-  component: (props: any) => ReactElement | null;
+  preview: (props: any) => ReactElement | null;
   schema: Fields;
   label: string;
 } & (
@@ -601,7 +601,7 @@ export function component<
 >(
   options: {
     /** The preview component shown in the editor */
-    component: (props: PreviewProps<ObjectField<Schema>>) => ReactElement | null;
+    preview: (props: PreviewProps<ObjectField<Schema>>) => ReactElement | null;
     /** The schema for the props that the preview component, toolbar and rendered component will receive */
     schema: Schema;
     /** The label to show in the insert menu and chrome around the block if chromeless is false */
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index f3e7326d187..07e5b4f403a 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -7,7 +7,7 @@ import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
 
 const list = component({
-  component: props =>
+  preview: props =>
     React.createElement(
       'ul',
       null,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
index 941e70a2564..359ce0f98aa 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/child-field-in-recursive-array-field.test.tsx
@@ -46,7 +46,7 @@ function List(props: PreviewProps<ListItems>): ReactElement {
 }
 
 const list = component({
-  component: props => React.createElement(List, props.fields.children),
+  preview: props => React.createElement(List, props.fields.children),
   label: '',
   schema: {
     children,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
index 1f586622ac5..1764f66670e 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
@@ -260,7 +260,7 @@ function makeEditorWithChildField(
     {
       normalization,
       componentBlocks: {
-        comp: component({ component: () => null, label: '', schema: { child: childField } }),
+        comp: component({ preview: () => null, label: '', schema: { child: childField } }),
       },
       relationships: {
         mention: {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 62343b00b53..4a6709ad6bc 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -469,7 +469,7 @@ function ComponentBlockRender({
     }
   });
 
-  const ComponentBlockPreview = componentBlock.component;
+  const ComponentBlockPreview = componentBlock.preview;
 
   return (
     <ChildrenByPathContext.Provider value={childrenByPath}>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
index 09ecf37f089..796eae0b3f6 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
@@ -6,12 +6,12 @@ import { jsx, makeEditor } from '../tests/utils';
 
 const componentBlocks = {
   basic: component({
-    component: () => null,
+    preview: () => null,
     label: 'Basic',
     schema: { prop: fields.text({ label: 'Prop' }) },
   }),
   withChildElements: component({
-    component: () => null,
+    preview: () => null,
     label: 'With Child Elements',
     schema: {
       prop: fields.text({ label: 'Prop' }),
@@ -20,7 +20,7 @@ const componentBlocks = {
     },
   }),
   withChildElementsBlockLast: component({
-    component: () => null,
+    preview: () => null,
     label: 'With Child Elements Block last',
     schema: {
       prop: fields.text({ label: 'Prop' }),
@@ -29,7 +29,7 @@ const componentBlocks = {
     },
   }),
   complex: component({
-    component: () => null,
+    preview: () => null,
     label: 'Complex',
     schema: {
       object: fields.object({
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index 180edb411bb..76987fdfeea 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -43,12 +43,12 @@ const objectProp = fields.object({
 
 const componentBlocks = {
   void: component({
-    component: () => null,
+    preview: () => null,
     label: 'Void',
     schema: { text: fields.text({ label: 'Text' }) },
   }),
   complex: component({
-    component: props => {
+    preview: props => {
       return React.createElement(
         'div',
         null,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
index ec1845ee65b..ca773c36a54 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/multi-child-field-in-array-field.test.tsx
@@ -7,7 +7,7 @@ import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
 
 const qAndA = component({
-  component: props =>
+  preview: props =>
     React.createElement(
       'div',
       null,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 0872824742b..82ab265fb4b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -7,7 +7,7 @@ import { component, fields } from '../../component-blocks';
 import { createGetPreviewProps } from './preview-props';
 
 const table = component({
-  component: props =>
+  preview: props =>
     React.createElement(
       'div',
       null,
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
index fcc393af6a8..7618c57ae3b 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/normalization.test.tsx
@@ -8,12 +8,12 @@ import { insertComponentBlock } from '.';
 
 const componentBlocks = {
   basic: component({
-    component: () => null,
+    preview: () => null,
     label: 'Basic',
     schema: { prop: fields.text({ label: 'Prop' }) },
   }),
   withChildElements: component({
-    component: () => null,
+    preview: () => null,
     label: 'With Child Elements',
     schema: {
       prop: fields.text({ label: 'Prop' }),
@@ -22,7 +22,7 @@ const componentBlocks = {
     },
   }),
   withLotsOfChildElements: component({
-    component: () => null,
+    preview: () => null,
     label: 'With Lots of Child Elements',
     schema: {
       block: fields.child({ kind: 'block', placeholder: '' }),
@@ -563,7 +563,7 @@ test('toggling to heading when in an inline prop', () => {
     {
       componentBlocks: {
         inline: component({
-          component: () => null,
+          preview: () => null,
           label: '',
           schema: {
             child: fields.child({ kind: 'inline', placeholder: '' }),
@@ -633,7 +633,7 @@ test('child field in array field insertBreak', () => {
     {
       componentBlocks: {
         myList: component({
-          component: () => null,
+          preview: () => null,
           label: '',
           schema: {
             children: fields.array(
@@ -732,7 +732,7 @@ test('child field in array field deleteBackward at end', () => {
       skipRenderingDOM: true,
       componentBlocks: {
         myList: component({
-          component: () => null,
+          preview: () => null,
           label: '',
           schema: {
             children: fields.array(
@@ -820,7 +820,7 @@ test('child field in array field deleteBackward in middle', () => {
       skipRenderingDOM: true,
       componentBlocks: {
         myList: component({
-          component: () => null,
+          preview: () => null,
           label: '',
           schema: {
             children: fields.array(
diff --git a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
index fa6f23d398d..74783a39955 100644
--- a/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/markdown-link-shortcut.test.tsx
@@ -264,7 +264,7 @@ test("link shortcut doesn't do anything when inside of a component block with li
     {
       componentBlocks: {
         comp: component({
-          component: props => React.createElement('div', null, props.fields.child.element),
+          preview: props => React.createElement('div', null, props.fields.child.element),
           label: '',
           schema: { child: fields.child({ kind: 'inline', placeholder: '' }) },
         }),
@@ -317,7 +317,7 @@ test('link shortcut works when inside of a component block with links option inh
     {
       componentBlocks: {
         comp: component({
-          component: props => React.createElement('div', null, props.fields.child.element),
+          preview: props => React.createElement('div', null, props.fields.child.element),
           label: '',
           schema: { child: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }) },
         }),
diff --git a/packages/fields-document/src/validation.test.tsx b/packages/fields-document/src/validation.test.tsx
index 3e3434a3b86..b59aa0b9ebd 100644
--- a/packages/fields-document/src/validation.test.tsx
+++ b/packages/fields-document/src/validation.test.tsx
@@ -19,12 +19,12 @@ const relationships: Relationships = {
 
 const componentBlocks: Record<string, ComponentBlock> = {
   basic: component({
-    component: () => null,
+    preview: () => null,
     label: '',
     schema: { prop: fields.text({ label: '' }) },
   }),
   relationship: component({
-    component: () => null,
+    preview: () => null,
     label: '',
     schema: {
       one: fields.relationship({ label: '', listKey: 'Post', selection: 'something' }),
@@ -32,7 +32,7 @@ const componentBlocks: Record<string, ComponentBlock> = {
     },
   }),
   object: component({
-    component: () => null,
+    preview: () => null,
     label: '',
     schema: {
       prop: fields.object({
@@ -41,7 +41,7 @@ const componentBlocks: Record<string, ComponentBlock> = {
     },
   }),
   conditional: component({
-    component: () => null,
+    preview: () => null,
     label: '',
     schema: {
       prop: fields.conditional(fields.checkbox({ label: '' }), {
diff --git a/tests/api-tests/fields/types/document.test.ts b/tests/api-tests/fields/types/document.test.ts
index b04e1eaf77b..2e9de670868 100644
--- a/tests/api-tests/fields/types/document.test.ts
+++ b/tests/api-tests/fields/types/document.test.ts
@@ -325,7 +325,7 @@ describe('Document field type', () => {
                 content: document({
                   componentBlocks: {
                     someBlock: component({
-                      component: () => null,
+                      preview: () => null,
                       label: 'Some Block',
                       schema: {
                         something: fields.object({

From 51c206aa1c68bb8819cac90995b0e162e717b0b4 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 27 Apr 2022 15:06:30 +1000
Subject: [PATCH 077/124] Little things

---
 docs/package.json                                    |  2 +-
 .../src/DocumentEditor/component-blocks/api.tsx      | 12 ++----------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index e8e79ebc1f2..8de8a8f0b4a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -50,4 +50,4 @@
     "node": "^14.15 || ^16.13"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/docs"
-}
\ No newline at end of file
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 44e59ac8b9f..1d733e75c43 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -117,18 +117,10 @@ export interface ObjectField<
   fields: fields;
 }
 
-type StringOrBooleanToString<Val extends string | boolean> = Val extends string
-  ? Val
-  : Val extends true
-  ? 'true'
-  : Val extends false
-  ? 'false'
-  : never;
-
 export type ConditionalField<
   DiscriminantField extends FormField<string | boolean, any>,
   ConditionalValues extends {
-    [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentSchema;
+    [Key in `${DiscriminantField['defaultValue']}`]: ComponentSchema;
   }
 > = {
   kind: 'conditional';
@@ -398,7 +390,7 @@ export const fields = {
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
     ConditionalValues extends {
-      [Key in StringOrBooleanToString<DiscriminantField['defaultValue']>]: ComponentSchema;
+      [Key in `${DiscriminantField['defaultValue']}`]: ComponentSchema;
     }
   >(
     discriminant: DiscriminantField,

From 96cb17ddf968679a082a5d4e5cea1840ba288d51 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 3 May 2022 11:38:12 +1000
Subject: [PATCH 078/124] First pass at changeset

---
 .changeset/silver-bottles-drum.md | 204 ++++++++++++++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 .changeset/silver-bottles-drum.md

diff --git a/.changeset/silver-bottles-drum.md b/.changeset/silver-bottles-drum.md
new file mode 100644
index 00000000000..318cf8cbc2c
--- /dev/null
+++ b/.changeset/silver-bottles-drum.md
@@ -0,0 +1,204 @@
+---
+'@keystone-6/fields-document': major
+---
+
+This release contains substantial changes to the component blocks API and the addition of array fields in component blocks. The breaking changes are entirely about defining components, _no data migration_ is required.
+
+The main breaking changes that will affect all usages of component blocks are:
+
+- In the arguments to the `component` function from `@keystone-6/fields-document/component-blocks`, the following have been renamed
+  - `component` -> `preview`
+  - `props` -> `schema`
+- To access the preview props for the inner fields on an object field, you need to access `.fields.something` instead of `.something`
+- The React element to render a child field is now at `props.element` instead of being `props`
+
+As an example, the change needed for updating the "Hero" component block that can be seen on https://keystonejs.com/docs/guides/document-field-demo are shown below
+
+```diff
+   hero: component({
+-    component: props => {
++    preview: props => {
+       return (
+         <div
+           css={{
+             backgroundColor: 'white',
+-            backgroundImage: `url(${props.imageSrc.value})`,
++            backgroundImage: `url(${props.fields.imageSrc.value})`,
+             backgroundPosition: 'center',
+             backgroundSize: 'cover',
+             display: 'flex',
+@@ -51,7 +189,7 @@ export const componentBlocks = {
+               textShadow: '0px 1px 3px black',
+             }}
+           >
+-            {props.title}
++            {props.fields.title.element}
+           </div>
+           <div
+             css={{
+@@ -63,9 +201,9 @@ export const componentBlocks = {
+               textShadow: '0px 1px 3px black',
+             }}
+           >
+-            {props.content}
++            {props.fields.content.element}
+           </div>
+-          {props.cta.discriminant ? (
++          {props.fields.cta.discriminant ? (
+             <div
+               css={{
+                 backgroundColor: '#F9BF12',
+@@ -78,14 +216,14 @@ export const componentBlocks = {
+                 padding: '12px 16px',
+               }}
+             >
+-              {props.cta.value.text}
++              {props.fields.cta.value.fields.text.element}
+             </div>
+           ) : null}
+         </div>
+       );
+     },
+     label: 'Hero',
+-    props: {
++    schema: {
+       title: fields.child({ kind: 'inline', placeholder: 'Title...' }),
+       content: fields.child({ kind: 'block', placeholder: '...' }),
+       imageSrc: fields.text({
+```
+
+This release introduces array fields to component blocks which accept another field (like an object, conditional, form or child field) and allow storing many of that inner field.
+
+Here's an example of implementing a question & answers component block with the array field:
+
+```tsx
+import { fields, component, NotEditable } from '@keystone-6/fields-document/component-blocks';
+
+component({
+  label: 'Questions & Answers',
+  schema: {
+    questions: fields.array(
+      fields.object({
+        question: fields.child({ placeholder: 'Question' }),
+        answer: fields.child({ placeholder: 'Answer', formatting: 'inherit' }),
+      })
+    ),
+  },
+  preview: props => {
+    return (
+      <div>
+        {props.fields.questions.map(questionAndAnswer => {
+          return (
+            <div key={questionAndAnswer.key}>
+              <h2>{questionAndAnswer.fields.question.element}</h2>
+              <p>{questionAndAnswer.fields.answer.element}</p>
+              <NotEditable>
+                <Button
+                  onClick={() => {
+                    props.questions.onChange(
+                      props.questions
+                        .filter(x => x.key !== questionAndAnswer.key)
+                        .map(x => ({ key: x.key }))
+                    );
+                  }}
+                >
+                  Remove
+                </Button>
+              </NotEditable>
+            </div>
+          );
+        })}
+        <NotEditable>
+          <Button
+            onClick={() => {
+              props.questions.onChange([
+                ...props.questions.map(x => ({ key: x.key })),
+                { key: undefined },
+              ]);
+            }}
+          >
+            Insert
+          </Button>
+        </NotEditable>
+      </div>
+    );
+  },
+});
+```
+
+When there is a single child field within an array field, the document editor will allow pressing enter at the end of an element to add/delete at the start to delete, this allows creating editing experiences similar to the built-in lists. For example, here's a checkbox list:
+
+```tsx
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@keystone-ui/core';
+import { useEffect } from 'react';
+import { fields, component } from '@keystone-6/fields-document/component-blocks';
+
+component({
+  label: 'Checkbox List',
+  schema: {
+    children: fields.array(
+      fields.object({
+        done: fields.checkbox({ label: 'Done' }),
+        content: fields.child({ kind: 'inline', placeholder: '', formatting: 'inherit' }),
+      })
+    ),
+  },
+  chromeless: true,
+  preview: function MyList(props) {
+    useEffect(() => {
+      if (!props.fields.children.elements.length) {
+        props.fields.children.onChange([{ key: undefined }]);
+      }
+    });
+    return (
+      <ul css={{ padding: 0 }}>
+        {props.fields.children.elements.map(element => (
+          <li css={{ listStyle: 'none' }} key={element.key}>
+            <input
+              contentEditable="false"
+              css={{ marginRight: 8 }}
+              type="checkbox"
+              checked={element.fields.done.value}
+              onChange={event => element.fields.done.onChange(event.target.checked)}
+            />
+            <span
+              style={{
+                textDecoration: element.fields.done.value ? 'line-through' : undefined,
+              }}
+            >
+              {element.fields.content.element}
+            </span>
+          </li>
+        ))}
+      </ul>
+    );
+  },
+});
+```
+
+For more details on the API of array fields, see the docs.
+
+There are also some smaller improvements:
+
+- All preview props now have an `onChange` function so that you can update more than one field in a component at a time
+- All preview props now have a `schema` property to access the schema for those preview props
+- Preview props are now referentially stable between renders when their value is stable
+
+And other breaking changes that are unlikely to affect most users:
+
+- The `ComponentPropField` type is now named `ComponentSchema`
+- `FormField`'s are constrained to no longer allow storing `undefined`. They must be a string, number, boolean, null, array of one of these or object with one of these. This is required so that they can be represented within an array
+- In the `props` object on a component block node, child fields are now stored as `null` instead of undefined. This is required so that they can be represented within an array. Loading documents that stored `undefined` instead of `null` for a child field will still work though, no data migration is required.
+- `ObjectField` stores the fields on a property named `fields` instead of `value`
+- The `ConditionalField` type now has two type parameters that look like this:
+  ```ts
+  type ConditionalField<
+    DiscriminantField extends FormField<string | boolean, any>,
+    ConditionalValues extends {
+      [Key in `${DiscriminantField['defaultValue']}`]: ComponentSchema;
+    }
+  > = ...
+  ```
+

From 5af9ed2955e4b0fff7107497a540c6fe191fbb05 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 3 May 2022 14:00:50 +1000
Subject: [PATCH 079/124] Fix toolbar preview props

---
 docs/components/docs/DocumentEditorDemo.tsx   |  10 +-
 .../basic/admin/fieldViews/Content.tsx        |   6 +-
 .../DocumentEditor/component-blocks/api.tsx   |  13 +-
 .../component-blocks/edit-mode.tsx            |   4 +-
 .../component-blocks/form-from-preview.tsx    |  12 +-
 .../DocumentEditor/component-blocks/index.tsx |  18 +-
 .../insertion-and-preview-props.test.tsx      |  12 +-
 .../nested-array-field.test.tsx               |   8 +-
 .../component-blocks/preview-props.test.ts    |  48 +++--
 .../component-blocks/preview-props.tsx        | 166 ++++++++++--------
 10 files changed, 171 insertions(+), 126 deletions(-)

diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index 9a9941f675e..5fcc371e84d 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -261,9 +261,13 @@ export function DocumentFeaturesFormAndCode() {
   return (
     <div>
       <FormValueContentFromPreviewProps
-        {...createGetPreviewProps(documentFeaturesProp, getNewVal => {
-          setFormValue(getNewVal(formValue));
-        })(formValue)}
+        {...createGetPreviewProps(
+          documentFeaturesProp,
+          getNewVal => {
+            setFormValue(getNewVal(formValue));
+          },
+          () => undefined
+        )(formValue)}
       />
     </div>
   );
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index f06addaed38..31323752bcd 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -373,16 +373,16 @@ export const componentBlocks = {
     toolbar({ props, onRemove }) {
       return (
         <ToolbarGroup>
-          {props.intent.options.map(opt => {
+          {props.fields.intent.options.map(opt => {
             const Icon = noticeIconMap[opt.value];
 
             return (
               <Tooltip key={opt.value} content={opt.label} weight="subtle">
                 {attrs => (
                   <ToolbarButton
-                    isSelected={props.intent.value === opt.value}
+                    isSelected={props.fields.intent.value === opt.value}
                     onClick={() => {
-                      props.intent.onChange(opt.value);
+                      props.fields.intent.onChange(opt.value);
                     }}
                     {...attrs}
                   >
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 1d733e75c43..c168421c289 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -457,7 +457,10 @@ export type ComponentBlock<
     }
 );
 
-type GenericPreviewProps<Prop extends ComponentSchema, ChildFieldType> = Prop extends ChildField
+export type GenericPreviewProps<
+  Prop extends ComponentSchema,
+  ChildFieldType
+> = Prop extends ChildField
   ? {
       readonly element: ChildFieldType;
       readonly schema: Prop;
@@ -602,18 +605,14 @@ export function component<
     | {
         chromeless: true;
         toolbar?: (props: {
-          props: {
-            [Key in keyof Schema]: PreviewPropsForToolbar<Schema[Key]>;
-          };
+          props: PreviewPropsForToolbar<ObjectField<Schema>>;
           onRemove(): void;
         }) => ReactElement;
       }
     | {
         chromeless?: false;
         toolbar?: (props: {
-          props: {
-            [Key in keyof Schema]: PreviewPropsForToolbar<Schema[Key]>;
-          };
+          props: PreviewPropsForToolbar<ObjectField<Schema>>;
           onShowEditMode(): void;
           onRemove(): void;
         }) => ReactElement;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
index c19e1537249..fa9ec2c50c5 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/edit-mode.tsx
@@ -1,7 +1,7 @@
 import { Stack } from '@keystone-ui/core';
 import React, { useState } from 'react';
 import { Button as KeystoneUIButton } from '@keystone-ui/button';
-import { PreviewProps } from './api';
+import { GenericPreviewProps } from './api';
 import {
   FormValueContentFromPreviewProps,
   NonChildFieldComponentSchema,
@@ -12,7 +12,7 @@ export function FormValue({
   props,
   isValid,
 }: {
-  props: PreviewProps<NonChildFieldComponentSchema>;
+  props: GenericPreviewProps<NonChildFieldComponentSchema, unknown>;
   onClose(): void;
   isValid: boolean;
 }) {
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 09c80bc0d8e..45d88362681 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
@@ -13,8 +13,8 @@ import {
   ComponentSchema,
   ConditionalField,
   FormField,
+  GenericPreviewProps,
   ObjectField,
-  PreviewProps,
   RelationshipData,
   RelationshipField,
 } from './api';
@@ -22,7 +22,7 @@ import { assertNever } from './utils';
 
 const fieldRenderers: {
   [Key in ComponentSchema['kind']]: (props: {
-    props: PreviewProps<Extract<ComponentSchema, { kind: Key }>> & {
+    props: GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
       autoFocus?: boolean;
       forceValidation?: boolean;
     };
@@ -146,13 +146,13 @@ export type NonChildFieldComponentSchema =
   | ArrayField<ComponentSchema>;
 
 function isNonChildFieldPreviewProps(
-  props: PreviewProps<ComponentSchema>
-): props is PreviewProps<NonChildFieldComponentSchema> {
+  props: GenericPreviewProps<ComponentSchema, unknown>
+): props is GenericPreviewProps<NonChildFieldComponentSchema, unknown> {
   return props.schema.kind !== 'child';
 }
 
 export const FormValueContentFromPreviewProps = memo(function FormValueContentFromPreview(
-  props: PreviewProps<NonChildFieldComponentSchema> & {
+  props: GenericPreviewProps<NonChildFieldComponentSchema, unknown> & {
     autoFocus?: boolean;
     forceValidation?: boolean;
   }
@@ -162,7 +162,7 @@ export const FormValueContentFromPreviewProps = memo(function FormValueContentFr
 });
 
 const SortableItemInForm = memo(function SortableItemInForm(
-  props: PreviewProps<ComponentSchema> & { elementKey: string }
+  props: GenericPreviewProps<ComponentSchema, unknown> & { elementKey: string }
 ) {
   return (
     <SortableItem elementKey={props.elementKey}>
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 4a6709ad6bc..541ce749c55 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -31,7 +31,7 @@ import {
 import { assert } from '../utils';
 import { areArraysEqual } from '../document-features-normalization';
 import { clientSideValidateProp, getSchemaAtPropPath, ReadonlyPropPath } from './utils';
-import { ChildrenByPathContext, getKeysForArrayValue } from './preview-props';
+import { ChildFieldEditable, ChildrenByPathContext, getKeysForArrayValue } from './preview-props';
 import { getInitialPropsValue, getInitialValue } from './initial-values';
 import { FormValue } from './edit-mode';
 import { createGetPreviewProps } from './preview-props';
@@ -248,7 +248,11 @@ export const ComponentBlocksElement = ({
         throw new Error('expected component block to exist when called');
       };
     }
-    return createGetPreviewProps({ kind: 'object', fields: componentBlock.schema }, onPropsChange);
+    return createGetPreviewProps(
+      { kind: 'object', fields: componentBlock.schema },
+      onPropsChange,
+      () => undefined
+    );
   }, [componentBlock, onPropsChange]);
 
   if (!componentBlock) {
@@ -451,9 +455,13 @@ function ComponentBlockRender({
   children: any;
 }) {
   const getPreviewProps = useMemo(() => {
-    return createGetPreviewProps({ kind: 'object', fields: componentBlock.schema }, props => {
-      onChange(props);
-    });
+    return createGetPreviewProps(
+      { kind: 'object', fields: componentBlock.schema },
+      props => {
+        onChange(props);
+      },
+      path => <ChildFieldEditable path={path} />
+    );
   }, [onChange, componentBlock]);
 
   const previewProps = getPreviewProps(element.props);
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
index 76987fdfeea..9f830156966 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -2,7 +2,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { Transforms, Editor } from 'slate';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { jsx, makeEditor } from '../tests/utils';
 import { component, fields } from '../../component-blocks';
 import { ChildFieldEditable, createGetPreviewProps } from './preview-props';
@@ -175,9 +175,13 @@ test('inserting a complex component block', () => {
 });
 
 const getPreviewProps = (editor: Editor) =>
-  createGetPreviewProps({ kind: 'object', fields: componentBlocks.complex.schema }, props => {
-    Transforms.setNodes(editor, { props: props((editor.children[0] as any).props) }, { at: [0] });
-  })((editor.children[0] as any).props);
+  createGetPreviewProps(
+    { kind: 'object', fields: componentBlocks.complex.schema },
+    props => {
+      Transforms.setNodes(editor, { props: props((editor.children[0] as any).props) }, { at: [0] });
+    },
+    (path): ReactElement => React.createElement(ChildFieldEditable, { path })
+  )((editor.children[0] as any).props);
 
 const makeEditorWithComplexComponentBlock = () =>
   makeEditor(
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
index 82ab265fb4b..1704a2760be 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/nested-array-field.test.tsx
@@ -277,9 +277,11 @@ test('add to multiple in child field in nested array', () => {
       },
     }
   );
-  const previewProps = createGetPreviewProps({ kind: 'object', fields: table.schema }, () => {})(
-    (editor.children[0] as any).props
-  );
+  const previewProps = createGetPreviewProps(
+    { kind: 'object', fields: table.schema },
+    () => {},
+    () => undefined
+  )((editor.children[0] as any).props);
 
   previewProps.fields.children.elements[0].onChange([
     ...previewProps.fields.children.elements[0].elements.map(x => ({ key: x.key })),
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
index 9ac993b63d9..2d3a85660ee 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.test.ts
@@ -9,10 +9,14 @@ test('onChange on a conditional field updates props.value', () => {
     false: fields.array(fields.checkbox({ label: '' })),
   });
   let val = getInitialPropsValue(field);
-  const getPreviewProps = createGetPreviewProps(field, newVal => {
-    val = newVal(val);
-    props = getPreviewProps(val);
-  });
+  const getPreviewProps = createGetPreviewProps(
+    field,
+    newVal => {
+      val = newVal(val);
+      props = getPreviewProps(val);
+    },
+    () => undefined
+  );
   let props = getPreviewProps(val);
   assert(props.discriminant === false);
   expect(props.value.schema).toBe(field.values.false);
@@ -28,10 +32,14 @@ test("onChange on a conditional field updates props.value where the value doesn'
     false: fields.text({ label: 'false' }),
   });
   let val = getInitialPropsValue(field);
-  const getPreviewProps = createGetPreviewProps(field, newVal => {
-    val = newVal(val);
-    props = getPreviewProps(val);
-  });
+  const getPreviewProps = createGetPreviewProps(
+    field,
+    newVal => {
+      val = newVal(val);
+      props = getPreviewProps(val);
+    },
+    () => undefined
+  );
   let props = getPreviewProps(val);
   assert(props.discriminant === false);
   expect(props.value.schema).toBe(field.values.false);
@@ -43,10 +51,14 @@ test("onChange on a conditional field updates props.value where the value doesn'
 test("array fields don't keep the props of an array item around after removing the item", () => {
   const field = fields.array(fields.text({ label: '' }));
   let val = getInitialPropsValue(field);
-  const getPreviewProps = createGetPreviewProps(field, newVal => {
-    val = newVal(val);
-    props = getPreviewProps(val);
-  });
+  const getPreviewProps = createGetPreviewProps(
+    field,
+    newVal => {
+      val = newVal(val);
+      props = getPreviewProps(val);
+    },
+    () => undefined
+  );
   let props = getPreviewProps(val);
   props.onChange([
     { key: '1', value: 'blah' },
@@ -68,10 +80,14 @@ test('the props of two array fields in a conditional field change when the discr
     false: fields.array(fields.checkbox({ label: '' })),
   });
   let val = getInitialPropsValue(field);
-  const getPreviewProps = createGetPreviewProps(field, newVal => {
-    val = newVal(val);
-    props = getPreviewProps(val);
-  });
+  const getPreviewProps = createGetPreviewProps(
+    field,
+    newVal => {
+      val = newVal(val);
+      props = getPreviewProps(val);
+    },
+    () => undefined
+  );
   let props = getPreviewProps(val);
   assert(props.discriminant === false);
   let prevArrayOnChange = props.value.onChange;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index ff17521bf07..aa4568e7c26 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -8,8 +8,8 @@ import {
   FormFieldValue,
   HydratedRelationshipData,
   ObjectField,
-  PreviewProps,
   RelationshipField,
+  GenericPreviewProps,
 } from './api';
 import { updateValue } from './initial-values';
 
@@ -61,58 +61,6 @@ function castToMemoizedInfoForSchema<
   return val;
 }
 
-const memoizedInfoForSchema = castToMemoizedInfoForSchema({
-  form(schema, onChange) {
-    return (newVal: unknown) => onChange(() => newVal);
-  },
-  array(schema, onChange) {
-    return {
-      rawOnChange: onChange,
-      inner: new Map<
-        string,
-        {
-          onChange: (cb: (val: unknown) => unknown) => void;
-          elementWithKey: { key: string } & PreviewProps<ComponentSchema>;
-          element: PreviewProps<ComponentSchema>;
-        }
-      >(),
-      onChange(updater: readonly { key: string | undefined; value?: unknown }[]) {
-        onChange(value => updateValue(schema, value, updater));
-      },
-    };
-  },
-  child() {},
-  conditional(schema, onChange) {
-    return {
-      onChange: (discriminant: string | boolean, value?: unknown) =>
-        onChange(val => updateValue(schema, val, { discriminant, value })),
-      onChangeForValue: (cb: (prevVal: unknown) => unknown) =>
-        onChange(val => ({ discriminant: val.discriminant, value: cb(val.value) })),
-    };
-  },
-  object(schema, onChange) {
-    return {
-      onChange: (updater: Record<string, unknown>) => {
-        onChange(value => updateValue(schema, value, updater));
-      },
-      innerOnChanges: Object.fromEntries(
-        Object.keys(schema.fields).map(key => {
-          return [
-            key,
-            (newVal: (prevVal: unknown) => unknown) => {
-              onChange(val => ({ ...(val as any), [key]: newVal((val as any)[key]) }));
-            },
-          ];
-        })
-      ),
-    };
-  },
-  relationship(schema, onChange) {
-    return (newVal: HydratedRelationshipData | readonly HydratedRelationshipData[] | null) =>
-      onChange(() => newVal);
-  },
-});
-
 type GeneralMap<K, V> = {
   has(key: K): boolean;
   get(key: K): V | undefined;
@@ -126,12 +74,68 @@ function getOrInsert<K, V>(map: GeneralMap<K, V>, key: K, val: (key: K) => V): V
   return map.get(key)!;
 }
 
-export function createGetPreviewProps<Schema extends ComponentSchema>(
+export function createGetPreviewProps<Schema extends ComponentSchema, ChildFieldElement>(
   rootSchema: Schema,
   rootOnChange: (
     cb: (val: ValueForComponentSchema<Schema>) => ValueForComponentSchema<Schema>
-  ) => void
-) {
+  ) => void,
+  getChildFieldElement: (path: readonly string[]) => ChildFieldElement
+): (value: ValueForComponentSchema<Schema>) => GenericPreviewProps<Schema, ChildFieldElement> {
+  const memoizedInfoForSchema = castToMemoizedInfoForSchema({
+    form(schema, onChange) {
+      return (newVal: unknown) => onChange(() => newVal);
+    },
+    array(schema, onChange) {
+      return {
+        rawOnChange: onChange,
+        inner: new Map<
+          string,
+          {
+            onChange: (cb: (val: unknown) => unknown) => void;
+            elementWithKey: { key: string } & GenericPreviewProps<
+              ComponentSchema,
+              ChildFieldElement
+            >;
+            element: GenericPreviewProps<ComponentSchema, ChildFieldElement>;
+          }
+        >(),
+        onChange(updater: readonly { key: string | undefined; value?: unknown }[]) {
+          onChange(value => updateValue(schema, value, updater));
+        },
+      };
+    },
+    child() {},
+    conditional(schema, onChange) {
+      return {
+        onChange: (discriminant: string | boolean, value?: unknown) =>
+          onChange(val => updateValue(schema, val, { discriminant, value })),
+        onChangeForValue: (cb: (prevVal: unknown) => unknown) =>
+          onChange(val => ({ discriminant: val.discriminant, value: cb(val.value) })),
+      };
+    },
+    object(schema, onChange) {
+      return {
+        onChange: (updater: Record<string, unknown>) => {
+          onChange(value => updateValue(schema, value, updater));
+        },
+        innerOnChanges: Object.fromEntries(
+          Object.keys(schema.fields).map(key => {
+            return [
+              key,
+              (newVal: (prevVal: unknown) => unknown) => {
+                onChange(val => ({ ...(val as any), [key]: newVal((val as any)[key]) }));
+              },
+            ];
+          })
+        ),
+      };
+    },
+    relationship(schema, onChange) {
+      return (newVal: HydratedRelationshipData | readonly HydratedRelationshipData[] | null) =>
+        onChange(() => newVal);
+    },
+  });
+
   const previewPropsFactories: {
     [Kind in ComponentSchema['kind']]: (
       schema: Extract<ComponentSchema, { kind: Kind }>,
@@ -145,8 +149,8 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
           cb: (prevVal: ValueForComponentSchema<Field>) => ValueForComponentSchema<Field>
         ) => void,
         key: string
-      ) => PreviewProps<Field>
-    ) => PreviewProps<Extract<ComponentSchema, { kind: Kind }>>;
+      ) => GenericPreviewProps<Field, ChildFieldElement>
+    ) => GenericPreviewProps<Extract<ComponentSchema, { kind: Kind }>, ChildFieldElement>;
   } = {
     form(schema, value, onChange) {
       return {
@@ -157,10 +161,10 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
       };
     },
     child(schema, value, onChange, path) {
-      return { element: <ChildFieldEditable path={path} />, schema: schema };
+      return { element: getChildFieldElement(path), schema: schema };
     },
     object(schema, value, memoized, path, getInnerProp) {
-      const fields: Record<string, PreviewProps<ComponentSchema>> = {};
+      const fields: Record<string, GenericPreviewProps<ComponentSchema, ChildFieldElement>> = {};
 
       Object.keys(schema.fields).forEach(key => {
         fields[key] = getInnerProp(
@@ -171,7 +175,10 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
         );
       });
 
-      const previewProps: PreviewProps<ObjectField<Record<string, ComponentSchema>>> = {
+      const previewProps: GenericPreviewProps<
+        ObjectField<Record<string, ComponentSchema>>,
+        ChildFieldElement
+      > = {
         fields,
         onChange: memoized.onChange,
         schema: schema,
@@ -184,7 +191,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
 
       const unusedKeys = new Set(getKeysForArrayValue(value));
 
-      const props: PreviewProps<ArrayField<ComponentSchema>> = {
+      const props: GenericPreviewProps<ArrayField<ComponentSchema>, ChildFieldElement> = {
         elements: arrayValue.map((val, i) => {
           const key = keys[i];
           unusedKeys.delete(key);
@@ -228,7 +235,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
       return props;
     },
     relationship(schema, value, onChange) {
-      const props: PreviewProps<RelationshipField<boolean>> = {
+      const props: GenericPreviewProps<RelationshipField<boolean>, ChildFieldElement> = {
         value: value,
         onChange,
         schema: schema,
@@ -236,8 +243,9 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
       return props;
     },
     conditional(schema, value, memoized, path, getInnerProp) {
-      const props: PreviewProps<
-        ConditionalField<FormField<string | boolean, unknown>, { [key: string]: ComponentSchema }>
+      const props: GenericPreviewProps<
+        ConditionalField<FormField<string | boolean, unknown>, { [key: string]: ComponentSchema }>,
+        ChildFieldElement
       > = {
         discriminant: value.discriminant as any,
         onChange: memoized.onChange,
@@ -266,8 +274,8 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
         cb: (prevVal: ValueForComponentSchema<Field>) => ValueForComponentSchema<Field>
       ) => void,
       key: string
-    ) => PreviewProps<Field>
-  ): PreviewProps<Schema> {
+    ) => GenericPreviewProps<Field, ChildFieldElement>
+  ): GenericPreviewProps<Schema, ChildFieldElement> {
     return previewPropsFactories[schema.kind](
       schema as any,
       value as any,
@@ -321,7 +329,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
     ) => void,
     memoState: MemoState<Schema>,
     path: readonly string[]
-  ): PreviewProps<Schema> {
+  ): GenericPreviewProps<Schema, ChildFieldElement> {
     if (memoState.schema !== schema) {
       Object.assign(memoState, getInitialMemoState(schema, value, onChange, path));
       return memoState.props;
@@ -362,8 +370,20 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
     }
     return memoState.props;
   }
+
+  type MemoState<Schema extends ComponentSchema> = {
+    props: GenericPreviewProps<Schema, ChildFieldElement>;
+    value: unknown;
+    schema: Schema;
+    cached: ReturnType<typeof memoizedInfoForSchema[Schema['kind']]>;
+    inner: Map<string, MemoState<ComponentSchema>>;
+  };
+
   let memoState: MemoState<Schema>;
-  return (value: ValueForComponentSchema<Schema>): PreviewProps<Schema> => {
+
+  return (
+    value: ValueForComponentSchema<Schema>
+  ): GenericPreviewProps<Schema, ChildFieldElement> => {
     if (memoState === undefined) {
       memoState = getInitialMemoState(rootSchema, value, rootOnChange, []);
       return memoState.props;
@@ -371,11 +391,3 @@ export function createGetPreviewProps<Schema extends ComponentSchema>(
     return getUpToDateProps(rootSchema, value, rootOnChange, memoState, []);
   };
 }
-
-type MemoState<Schema extends ComponentSchema> = {
-  props: PreviewProps<Schema>;
-  value: unknown;
-  schema: Schema;
-  cached: ReturnType<typeof memoizedInfoForSchema[Schema['kind']]>;
-  inner: Map<string, MemoState<ComponentSchema>>;
-};

From c28f362c34500ba7ed9a2696d53ceb8add696bef Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 3 May 2022 14:08:51 +1000
Subject: [PATCH 080/124] Renaming

---
 .../DocumentEditor/component-blocks/api.tsx   | 99 ++++++++++---------
 1 file changed, 50 insertions(+), 49 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index c168421c289..a4b59e72878 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -458,21 +458,21 @@ export type ComponentBlock<
 );
 
 export type GenericPreviewProps<
-  Prop extends ComponentSchema,
+  Schema extends ComponentSchema,
   ChildFieldType
-> = Prop extends ChildField
+> = Schema extends ChildField
   ? {
       readonly element: ChildFieldType;
-      readonly schema: Prop;
+      readonly schema: Schema;
     }
-  : Prop extends FormField<infer Value, infer Options>
+  : Schema extends FormField<infer Value, infer Options>
   ? {
       readonly value: Value;
       onChange(value: Value): void;
       readonly options: Options;
-      readonly schema: Prop;
+      readonly schema: Schema;
     }
-  : Prop extends ObjectField<infer Value>
+  : Schema extends ObjectField<infer Value>
   ? {
       readonly fields: {
         readonly [Key in keyof Value]: GenericPreviewProps<Value[Key], ChildFieldType>;
@@ -480,9 +480,9 @@ export type GenericPreviewProps<
       onChange(value: {
         readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
       }): void;
-      readonly schema: Prop;
+      readonly schema: Schema;
     }
-  : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+  : Schema extends ConditionalField<infer DiscriminantField, infer Values>
   ? {
       readonly [Key in keyof Values]: {
         readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
@@ -494,10 +494,10 @@ export type GenericPreviewProps<
         ): void;
         readonly options: DiscriminantField['options'];
         readonly value: GenericPreviewProps<Values[Key], ChildFieldType>;
-        readonly schema: Prop;
+        readonly schema: Schema;
       };
     }[keyof Values]
-  : Prop extends RelationshipField<infer Many>
+  : Schema extends RelationshipField<infer Many>
   ? {
       readonly value: Many extends true
         ? readonly HydratedRelationshipData[]
@@ -507,9 +507,9 @@ export type GenericPreviewProps<
           ? readonly HydratedRelationshipData[]
           : HydratedRelationshipData | null
       ): void;
-      readonly schema: Prop;
+      readonly schema: Schema;
     }
-  : Prop extends ArrayField<infer ElementField>
+  : Schema extends ArrayField<infer ElementField>
   ? {
       readonly elements: readonly (GenericPreviewProps<ElementField, ChildFieldType> & {
         readonly key: string;
@@ -520,11 +520,11 @@ export type GenericPreviewProps<
           value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
         }[]
       ) => void;
-      readonly schema: Prop;
+      readonly schema: Schema;
     }
   : never;
 
-export type PreviewProps<Prop extends ComponentSchema> = GenericPreviewProps<Prop, ReactNode>;
+export type PreviewProps<Schema extends ComponentSchema> = GenericPreviewProps<Schema, ReactNode>;
 
 type GetFromKey<Obj, Key> = Key extends keyof Obj ? Obj[Key] : never;
 
@@ -534,27 +534,27 @@ type DiscrimiantToString<Discriminant extends string | boolean> = Discriminant e
   ? 'false'
   : Discriminant;
 
-export type InitialOrUpdateValueFromComponentPropField<Prop extends ComponentSchema> =
-  Prop extends ChildField
+export type InitialOrUpdateValueFromComponentPropField<Schema extends ComponentSchema> =
+  Schema extends ChildField
     ? undefined
-    : Prop extends FormField<infer Value, any>
+    : Schema extends FormField<infer Value, any>
     ? Value | undefined
-    : Prop extends ObjectField<infer Value>
+    : Schema extends ObjectField<infer Value>
     ? {
         readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
       }
-    : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+    : Schema extends ConditionalField<infer DiscriminantField, infer Values>
     ? {
         readonly [Key in keyof Values]: {
           readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
           readonly value?: InitialOrUpdateValueFromComponentPropField<Values[Key]>;
         };
       }[keyof Values]
-    : Prop extends RelationshipField<infer Many>
+    : Schema extends RelationshipField<infer Many>
     ? Many extends true
       ? readonly HydratedRelationshipData[]
       : HydratedRelationshipData | null
-    : Prop extends ArrayField<infer ElementField>
+    : Schema extends ArrayField<infer ElementField>
     ? readonly {
         key: string | undefined;
         value?: InitialOrUpdateValueFromComponentPropField<ElementField>;
@@ -572,8 +572,8 @@ type DiscriminantStringToDiscriminantValue<
     : never
   : DiscriminantString;
 
-export type PreviewPropsForToolbar<Prop extends ComponentSchema> = GenericPreviewProps<
-  Prop,
+export type PreviewPropsForToolbar<Schema extends ComponentSchema> = GenericPreviewProps<
+  Schema,
   undefined
 >;
 
@@ -630,45 +630,46 @@ export const NotEditable = ({ children, ...props }: HTMLAttributes<HTMLDivElemen
 
 type Comp<Props> = (props: Props) => ReactElement | null;
 
-type ValueForRenderingFromComponentPropField<Prop extends ComponentSchema> = Prop extends ChildField
-  ? ReactNode
-  : Prop extends FormField<infer Value, any>
-  ? Value
-  : Prop extends ObjectField<infer Value>
-  ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
-  : Prop extends ConditionalField<infer DiscriminantField, infer Values>
-  ? {
-      readonly [Key in keyof Values]: {
-        readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
-        readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
-      };
-    }[keyof Values]
-  : Prop extends RelationshipField<infer Many>
-  ? Many extends true
-    ? readonly HydratedRelationshipData[]
-    : HydratedRelationshipData | null
-  : Prop extends ArrayField<infer ElementField>
-  ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
-  : never;
+type ValueForRenderingFromComponentPropField<Schema extends ComponentSchema> =
+  Schema extends ChildField
+    ? ReactNode
+    : Schema extends FormField<infer Value, any>
+    ? Value
+    : Schema extends ObjectField<infer Value>
+    ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
+    : Schema extends ConditionalField<infer DiscriminantField, infer Values>
+    ? {
+        readonly [Key in keyof Values]: {
+          readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
+          readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
+        };
+      }[keyof Values]
+    : Schema extends RelationshipField<infer Many>
+    ? Many extends true
+      ? readonly HydratedRelationshipData[]
+      : HydratedRelationshipData | null
+    : Schema extends ArrayField<infer ElementField>
+    ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
+    : never;
 
-export type ValueForComponentSchema<Prop extends ComponentSchema> = Prop extends ChildField
+export type ValueForComponentSchema<Schema extends ComponentSchema> = Schema extends ChildField
   ? null
-  : Prop extends FormField<infer Value, any>
+  : Schema extends FormField<infer Value, any>
   ? Value
-  : Prop extends ObjectField<infer Value>
+  : Schema extends ObjectField<infer Value>
   ? { readonly [Key in keyof Value]: ValueForRenderingFromComponentPropField<Value[Key]> }
-  : Prop extends ConditionalField<infer DiscriminantField, infer Values>
+  : Schema extends ConditionalField<infer DiscriminantField, infer Values>
   ? {
       readonly [Key in keyof Values]: {
         readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
         readonly value: ValueForRenderingFromComponentPropField<Values[Key]>;
       };
     }[keyof Values]
-  : Prop extends RelationshipField<infer Many>
+  : Schema extends RelationshipField<infer Many>
   ? Many extends true
     ? readonly HydratedRelationshipData[]
     : HydratedRelationshipData | null
-  : Prop extends ArrayField<infer ElementField>
+  : Schema extends ArrayField<infer ElementField>
   ? readonly ValueForRenderingFromComponentPropField<ElementField>[]
   : never;
 

From ec05bdd99c88f7e4ca6ef7ffb78b02e04d06439f Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 3 May 2022 15:27:21 +1000
Subject: [PATCH 081/124] Simplify a type

---
 .../DocumentEditor/component-blocks/api.tsx   | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index a4b59e72878..8bfc5bcd098 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -459,10 +459,10 @@ export type ComponentBlock<
 
 export type GenericPreviewProps<
   Schema extends ComponentSchema,
-  ChildFieldType
+  ChildFieldElement
 > = Schema extends ChildField
   ? {
-      readonly element: ChildFieldType;
+      readonly element: ChildFieldElement;
       readonly schema: Schema;
     }
   : Schema extends FormField<infer Value, infer Options>
@@ -475,7 +475,7 @@ export type GenericPreviewProps<
   : Schema extends ObjectField<infer Value>
   ? {
       readonly fields: {
-        readonly [Key in keyof Value]: GenericPreviewProps<Value[Key], ChildFieldType>;
+        readonly [Key in keyof Value]: GenericPreviewProps<Value[Key], ChildFieldElement>;
       };
       onChange(value: {
         readonly [Key in keyof Value]?: InitialOrUpdateValueFromComponentPropField<Value[Key]>;
@@ -488,12 +488,10 @@ export type GenericPreviewProps<
         readonly discriminant: DiscriminantStringToDiscriminantValue<DiscriminantField, Key>;
         onChange<Discriminant extends DiscriminantField['defaultValue']>(
           discriminant: Discriminant,
-          value?: InitialOrUpdateValueFromComponentPropField<
-            GetFromKey<Values, DiscrimiantToString<Discriminant>>
-          >
+          value?: InitialOrUpdateValueFromComponentPropField<Values[`${Discriminant}`]>
         ): void;
         readonly options: DiscriminantField['options'];
-        readonly value: GenericPreviewProps<Values[Key], ChildFieldType>;
+        readonly value: GenericPreviewProps<Values[Key], ChildFieldElement>;
         readonly schema: Schema;
       };
     }[keyof Values]
@@ -511,7 +509,7 @@ export type GenericPreviewProps<
     }
   : Schema extends ArrayField<infer ElementField>
   ? {
-      readonly elements: readonly (GenericPreviewProps<ElementField, ChildFieldType> & {
+      readonly elements: readonly (GenericPreviewProps<ElementField, ChildFieldElement> & {
         readonly key: string;
       })[];
       readonly onChange: (
@@ -526,14 +524,6 @@ export type GenericPreviewProps<
 
 export type PreviewProps<Schema extends ComponentSchema> = GenericPreviewProps<Schema, ReactNode>;
 
-type GetFromKey<Obj, Key> = Key extends keyof Obj ? Obj[Key] : never;
-
-type DiscrimiantToString<Discriminant extends string | boolean> = Discriminant extends true
-  ? 'true'
-  : Discriminant extends false
-  ? 'false'
-  : Discriminant;
-
 export type InitialOrUpdateValueFromComponentPropField<Schema extends ComponentSchema> =
   Schema extends ChildField
     ? undefined

From 9ceec733a201b6736a835141e5199812e7a24869 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 4 May 2022 09:04:33 +1000
Subject: [PATCH 082/124] Fix example

---
 .changeset/silver-bottles-drum.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/.changeset/silver-bottles-drum.md b/.changeset/silver-bottles-drum.md
index 318cf8cbc2c..d23a5820ce9 100644
--- a/.changeset/silver-bottles-drum.md
+++ b/.changeset/silver-bottles-drum.md
@@ -79,15 +79,15 @@ component({
   schema: {
     questions: fields.array(
       fields.object({
-        question: fields.child({ placeholder: 'Question' }),
-        answer: fields.child({ placeholder: 'Answer', formatting: 'inherit' }),
+        question: fields.child({ placeholder: 'Question', kind: 'inline' }),
+        answer: fields.child({ placeholder: 'Answer', formatting: 'inherit', kind: 'block' }),
       })
     ),
   },
   preview: props => {
     return (
       <div>
-        {props.fields.questions.map(questionAndAnswer => {
+        {props.fields.questions.elements.map(questionAndAnswer => {
           return (
             <div key={questionAndAnswer.key}>
               <h2>{questionAndAnswer.fields.question.element}</h2>
@@ -95,8 +95,8 @@ component({
               <NotEditable>
                 <Button
                   onClick={() => {
-                    props.questions.onChange(
-                      props.questions
+                    props.fields.questions.onChange(
+                      props.fields.questions.elements
                         .filter(x => x.key !== questionAndAnswer.key)
                         .map(x => ({ key: x.key }))
                     );
@@ -111,8 +111,8 @@ component({
         <NotEditable>
           <Button
             onClick={() => {
-              props.questions.onChange([
-                ...props.questions.map(x => ({ key: x.key })),
+              props.fields.questions.onChange([
+                ...props.fields.questions.elements,
                 { key: undefined },
               ]);
             }}

From 3c827708c2701490f20ca2dab418b8b1fcd8f054 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 6 May 2022 13:59:55 +1000
Subject: [PATCH 083/124] Docs updates

---
 .changeset/silver-bottles-drum.md          |   2 -
 docs/pages/docs/guides/document-fields.mdx | 141 +++++++++++++++++----
 2 files changed, 116 insertions(+), 27 deletions(-)

diff --git a/.changeset/silver-bottles-drum.md b/.changeset/silver-bottles-drum.md
index d23a5820ce9..d76f5a235c0 100644
--- a/.changeset/silver-bottles-drum.md
+++ b/.changeset/silver-bottles-drum.md
@@ -178,8 +178,6 @@ component({
 });
 ```
 
-For more details on the API of array fields, see the docs.
-
 There are also some smaller improvements:
 
 - All preview props now have an `onChange` function so that you can update more than one field in a component at a time
diff --git a/docs/pages/docs/guides/document-fields.mdx b/docs/pages/docs/guides/document-fields.mdx
index f191e6f88ed..3fc6e1ff9ff 100644
--- a/docs/pages/docs/guides/document-fields.mdx
+++ b/docs/pages/docs/guides/document-fields.mdx
@@ -312,7 +312,7 @@ import { NotEditable, component, fields } from '@keystone-6/fields-document/comp
 // expects to find the components like on the componentBlocks export
 export const componentBlocks = {
   quote: component({
-    component: ({ attribution, content }) => {
+    preview: (props) => {
       return (
         <div
           style={{
@@ -320,16 +320,16 @@ export const componentBlocks = {
             paddingLeft: 16,
           }}
         >
-          <div style={{ fontStyle: 'italic', color: '#4A5568' }}>{content}</div>
+          <div style={{ fontStyle: 'italic', color: '#4A5568' }}>{props.fields.content.element}</div>
           <div style={{ fontWeight: 'bold', color: '#718096' }}>
             <NotEditable>— </NotEditable>
-            {attribution}
+            {props.fields.attribution.element}
           </div>
         </div>
       );
     },
     label: 'Quote',
-    props: {
+    schema: {
       content: fields.child({
         kind: 'block',
         placeholder: 'Quote...',
@@ -382,7 +382,7 @@ import { component, fields } from '@keystone-6/fields-document/component-blocks'
 
 export const componentBlocks = {
   notice: component({
-    component: function Notice({ content, intent }) {
+    preview: function Notice(props) {
       const { palette, radii, spacing } = useTheme();
       const intentMap = {
         info: {
@@ -406,7 +406,7 @@ export const componentBlocks = {
           icon: noticeIconMap.success,
         },
       };
-      const intentConfig = intentMap[intent.value];
+      const intentConfig = intentMap[props.fields.intent.value];
 
       return (
         <div
@@ -420,24 +420,24 @@ export const componentBlocks = {
             background: intentConfig.background,
           }}
         >
-          <div
-            contentEditable={false}
-            css={{
-              color: intentConfig.foreground,
-              marginRight: spacing.small,
-              marginTop: '1em',
-              userSelect: 'none',
-            }}
-          >
-            <intentConfig.icon />
-          </div>
-          <div css={{ flex: 1 }}>{content}</div>
+          <NotEditable>
+            <div
+              css={{
+                color: intentConfig.foreground,
+                marginRight: spacing.small,
+                marginTop: '1em',
+              }}
+            >
+              <intentConfig.icon />
+            </div>
+          </NotEditable>
+          <div css={{ flex: 1 }}>{props.fields.content.element}</div>
         </div>
       );
     },
     label: 'Notice',
     chromeless: true,
-    props: {
+    schema: {
       intent: fields.select({
         label: 'Intent',
         options: [
@@ -493,6 +493,84 @@ export const componentBlocks = {
       );
     },
   }),
+  hero: component({
+    preview: props => {
+      return (
+        <div
+          css={{
+            backgroundColor: 'white',
+            backgroundImage: `url(${props.fields.imageSrc.value})`,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            display: 'flex',
+            flexDirection: 'column',
+            fontSize: 28,
+            justifyContent: 'space-between',
+            minHeight: 200,
+            padding: 16,
+            width: '100%',
+          }}
+        >
+          <div
+            css={{
+              color: 'white',
+              fontWeight: 'bold',
+              fontSize: 48,
+              textAlign: 'center',
+              margin: 16,
+              textShadow: '0px 1px 3px black',
+            }}
+          >
+            {props.fields.title.element}
+          </div>
+          <div
+            css={{
+              color: 'white',
+              fontSize: 24,
+              fontWeight: 'bold',
+              margin: 16,
+              textAlign: 'center',
+              textShadow: '0px 1px 3px black',
+            }}
+          >
+            {props.fields.content.element}
+          </div>
+          {props.fields.cta.discriminant ? (
+            <div
+              css={{
+                backgroundColor: '#F9BF12',
+                borderRadius: 6,
+                color: '#002B55',
+                display: 'inline-block',
+                fontSize: 16,
+                fontWeight: 'bold',
+                margin: '16px auto',
+                padding: '12px 16px',
+              }}
+            >
+              {props.fields.cta.value.fields.text.element}
+            </div>
+          ) : null}
+        </div>
+      );
+    },
+    label: 'Hero',
+    schema: {
+      title: fields.child({ kind: 'inline', placeholder: 'Title...' }),
+      content: fields.child({ kind: 'block', placeholder: '...' }),
+      imageSrc: fields.text({
+        label: 'Image URL',
+        defaultValue: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809',
+      }),
+      cta: fields.conditional(fields.checkbox({ label: 'Show CTA' }), {
+        false: fields.empty(),
+        true: fields.object({
+          text: fields.child({ kind: 'inline', placeholder: 'CTA...' }),
+          href: fields.url({ label: 'Call to action link' }),
+        }),
+      }),
+    },
+  }),
 };
 ```
 
@@ -525,7 +603,7 @@ If they are not rendered, you will receive errors.
 import { NotEditable, component, fields } from '@keystone-6/fields-document/component-blocks';
 
 component({
-  component: ({ attribution, content }) => {
+  preview: (props) => {
     return (
       <div
         style={{
@@ -533,16 +611,16 @@ component({
           paddingLeft: 16,
         }}
       >
-        <div style={{ fontStyle: 'italic', color: '#4A5568' }}>{content}</div>
+        <div style={{ fontStyle: 'italic', color: '#4A5568' }}>{props.fields.content.element}</div>
         <div style={{ fontWeight: 'bold', color: '#718096' }}>
           <NotEditable>— </NotEditable>
-          {attribution}
+          {props.fields.attribution.element}
         </div>
       </div>
     );
   },
   label: 'Quote',
-  props: {
+  schema: {
     content: fields.child({
       kind: 'block',
       placeholder: 'Quote...',
@@ -665,6 +743,19 @@ fields.conditional(fields.checkbox({ label: 'Show Call to action' }), {
 
 > You might find `fields.empty()` useful which stores and renders nothing if you want to have a field in one case and nothing anything in another
 
+### Array Fields
+
+Array fields allow you to store an array of another component block field type.
+
+```tsx
+import { fields } from '@keystone-6/fields-document/component-blocks';
+
+fields.array(fields.object({
+  isComplete: fields.checkbox({ label: 'Is Complete' }),
+  content: fields.child({ kind: 'inline', placeholder: '' }),
+}))
+```
+
 {/* * TBC: ### Preview Props * */}
 
 ### Chromeless
@@ -673,11 +764,11 @@ If you want to hide the default UI around your component block, you can set `chr
 
 ```jsx
 quote: component({
-  component: ({ attribution, content }) => {
+  preview: ({ attribution, content }) => {
     ...
   },
   label: 'Quote',
-  props: {
+  schema: {
     ...
   },
   chromeless: true,

From 6e1e750e6fe75ed658f48996bbb915a6254381e5 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 6 May 2022 14:02:57 +1000
Subject: [PATCH 084/124] Insert new child field elements before removing
 previous elements to have better selection positions

---
 .../DocumentEditor/component-blocks/index.tsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 541ce749c55..8bb0e029eb0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -13,7 +13,7 @@ import {
   useRef,
 } from 'react';
 import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
-import { Editor, Element, PathRef, Transforms, Node } from 'slate';
+import { Editor, Element, PathRef, Transforms, Node, Range, Path } from 'slate';
 
 import { jsx, useTheme } from '@keystone-ui/core';
 import { Trash2Icon } from '@keystone-ui/icons/icons/Trash2Icon';
@@ -142,6 +142,7 @@ export const ComponentBlocksElement = ({
           []
         );
         const basePath = ReactEditor.findPath(editor, elementForChildren);
+        console.log(editor.selection);
         if (childPropPaths.length === 0) {
           const indexes = elementForChildren.children.map((_, i) => i).reverse();
           for (const idx of indexes) {
@@ -186,15 +187,7 @@ export const ComponentBlocksElement = ({
             initialPropPathsToEditorPath.delete(stringifiedPath);
           }
         }
-        const pathsToRemove: PathRef[] = [];
-        for (const [, idxInChildren] of initialPropPathsToEditorPath) {
-          pathsToRemove.push(Editor.pathRef(editor, [...basePath, idxInChildren]));
-        }
-        for (const pathRef of pathsToRemove) {
-          const path = pathRef.unref();
-          assert(path !== null);
-          Transforms.removeNodes(editor, { at: path });
-        }
+
         const getNode = () => Node.get(editor, basePath) as Element;
         let newIdx = getNode().children.length;
         for (const childProp of childrenLeftToAdd) {
@@ -213,6 +206,17 @@ export const ComponentBlocksElement = ({
           );
           newIdx++;
         }
+
+        const pathsToRemove: PathRef[] = [];
+        for (const [, idxInChildren] of initialPropPathsToEditorPath) {
+          pathsToRemove.push(Editor.pathRef(editor, [...basePath, idxInChildren]));
+        }
+        for (const pathRef of pathsToRemove) {
+          const path = pathRef.unref();
+          assert(path !== null);
+          Transforms.removeNodes(editor, { at: path });
+        }
+
         const propPathsToExpectedIndexes = new Map<string, number>();
         for (const [idx, thing] of childPropPaths.entries()) {
           propPathsToExpectedIndexes.set(JSON.stringify(thing.path), idx);

From f2bfa892f5c9d1b29afe160011d92a89e9a6e048 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 6 May 2022 15:37:33 +1000
Subject: [PATCH 085/124] Fix a bug

---
 .../basic/admin/fieldViews/Content.tsx        | 50 ++++++++++++++
 .../component-blocks/array-field.test.tsx     | 69 ++++++++++++++++++-
 .../DocumentEditor/component-blocks/index.tsx | 16 ++++-
 3 files changed, 129 insertions(+), 6 deletions(-)

diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 31323752bcd..7f276e01e8e 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -25,6 +25,56 @@ const noticeIconMap = {
 };
 
 export const componentBlocks = {
+  questionsAndAnswers: component({
+    label: 'Questions & Answers',
+    schema: {
+      questions: fields.array(
+        fields.object({
+          question: fields.child({ placeholder: 'Question', kind: 'inline' }),
+          answer: fields.child({ placeholder: 'Answer', formatting: 'inherit', kind: 'block' }),
+        })
+      ),
+    },
+    preview: props => {
+      return (
+        <div>
+          {props.fields.questions.elements.map(questionAndAnswer => {
+            return (
+              <div key={questionAndAnswer.key}>
+                <h2>{questionAndAnswer.fields.question.element}</h2>
+                <p>{questionAndAnswer.fields.answer.element}</p>
+                <NotEditable>
+                  <Button
+                    onClick={() => {
+                      props.fields.questions.onChange(
+                        props.fields.questions.elements
+                          .filter(x => x.key !== questionAndAnswer.key)
+                          .map(x => ({ key: x.key }))
+                      );
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </NotEditable>
+              </div>
+            );
+          })}
+          <NotEditable>
+            <Button
+              onClick={() => {
+                props.fields.questions.onChange([
+                  ...props.fields.questions.elements,
+                  { key: undefined },
+                ]);
+              }}
+            >
+              Insert
+            </Button>
+          </NotEditable>
+        </div>
+      );
+    },
+  }),
   table: component({
     preview: function MyTable(props) {
       useEffect(() => {
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
index 07e5b4f403a..2abb8b32793 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/array-field.test.tsx
@@ -11,12 +11,30 @@ const list = component({
     React.createElement(
       'ul',
       null,
-      props.fields.children.elements.map(x => {
-        return React.createElement('li', { key: x.key }, x.fields.content.element);
+      props.fields.children.elements.map((x, i) => {
+        return React.createElement(
+          'li',
+          { key: x.key },
+          x.fields.content.element,
+          React.createElement(
+            'button',
+            {
+              'data-remove': i,
+              onClick: () =>
+                props.onChange({
+                  children: props.fields.children.elements
+                    .filter(element => element.key !== x.key)
+                    .map(x => ({ key: x.key })),
+                }),
+            },
+            'Remove'
+          )
+        );
       }),
       React.createElement(
         'button',
         {
+          'data-insert': true,
           onClick: () =>
             props.fields.children.onChange([
               ...props.fields.children.elements.map(x => ({ key: x.key })),
@@ -424,7 +442,7 @@ test('inserting an item from empty works', () => {
     </editor>,
     { componentBlocks: { list } }
   );
-  editor.container!.querySelector('button')!.click();
+  (editor.container!.querySelector('button[data-insert]') as HTMLButtonElement).click();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <component-block
@@ -462,3 +480,48 @@ test('inserting an item from empty works', () => {
     </editor>
   `);
 });
+
+test('removing an item using the preview props works', () => {
+  const editor = makeEditor(
+    <editor>
+      <component-block
+        component="list"
+        props={{
+          children: [{ content: null, done: false }],
+        }}
+      >
+        <component-inline-prop propPath={['children', 0, 'content']}>
+          <text>something</text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>,
+    { componentBlocks: { list } }
+  );
+  (editor.container!.querySelector('button[data-remove]') as HTMLButtonElement).click();
+  expect(editor).toMatchInlineSnapshot(`
+    <editor>
+      <component-block
+        component="list"
+        props={
+          Object {
+            "children": Array [],
+          }
+        }
+      >
+        <component-inline-prop>
+          <text>
+            
+          </text>
+        </component-inline-prop>
+      </component-block>
+      <paragraph>
+        <text>
+          
+        </text>
+      </paragraph>
+    </editor>
+  `);
+});
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 8bb0e029eb0..88c2ad69fc0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -142,7 +142,7 @@ export const ComponentBlocksElement = ({
           []
         );
         const basePath = ReactEditor.findPath(editor, elementForChildren);
-        console.log(editor.selection);
+
         if (childPropPaths.length === 0) {
           const indexes = elementForChildren.children.map((_, i) => i).reverse();
           for (const idx of indexes) {
@@ -496,14 +496,24 @@ function ComponentBlockRender({
   );
 }
 
+// note this is written to avoid crashing when the given prop path doesn't exist in the value
+// this is because editor updates happen asynchronously but we have some logic to ensure
+// that updating the props of a component block synchronously updates it
+// (this is primarily to not mess up things like cursors in inputs)
+// this means that sometimes the child elements will be inconsistent with the values
+// so to deal with this, we return a prop path this is "wrong" but won't break anything
 function propPathWithIndiciesToKeys(propPath: ReadonlyPropPath, val: any): readonly string[] {
   return propPath.map(key => {
     if (typeof key === 'string') {
-      val = val[key];
+      val = val?.[key];
       return key;
     }
+    if (!Array.isArray(val)) {
+      val = undefined;
+      return '';
+    }
     const keys = getKeysForArrayValue(val);
-    val = val[key];
+    val = val?.[key];
     return keys[key];
   });
 }

From 0b8c92cafc9cff473c5c7901247885f498a1d42f Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 9 May 2022 10:10:52 +1000
Subject: [PATCH 086/124] Remove unused imports

---
 .../src/DocumentEditor/component-blocks/index.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 88c2ad69fc0..c32a8abaf57 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -13,7 +13,7 @@ import {
   useRef,
 } from 'react';
 import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-react';
-import { Editor, Element, PathRef, Transforms, Node, Range, Path } from 'slate';
+import { Editor, Element, PathRef, Transforms, Node } from 'slate';
 
 import { jsx, useTheme } from '@keystone-ui/core';
 import { Trash2Icon } from '@keystone-ui/icons/icons/Trash2Icon';

From a6497c23b3059e10566b8d4f6b06bbd310e0bf3c Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 9 May 2022 10:22:02 +1000
Subject: [PATCH 087/124] Add checkbox list to website

---
 docs/components/docs/DocumentEditorDemo.tsx   |  2 +-
 docs/pages/docs/guides/document-fields.mdx    | 45 ++++++++++++++++++-
 .../basic/admin/fieldViews/Content.tsx        |  8 ++--
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/docs/components/docs/DocumentEditorDemo.tsx b/docs/components/docs/DocumentEditorDemo.tsx
index 5fcc371e84d..0af500207fa 100644
--- a/docs/components/docs/DocumentEditorDemo.tsx
+++ b/docs/components/docs/DocumentEditorDemo.tsx
@@ -87,6 +87,7 @@ const componentBlocks = {
   notice: componentBlocksInExampleProject.notice,
   hero: componentBlocksInExampleProject.hero,
   quote: componentBlocksInExampleProject.quote,
+  checkboxList: componentBlocksInExampleProject.checkboxList,
 };
 
 type DocumentFieldConfig = Parameters<typeof import('@keystone-6/fields-document').document>[0];
@@ -307,7 +308,6 @@ export const DocumentEditorDemo = () => {
         h5: { fontSize: 'var(--font-xsmall)' },
         h6: { fontSize: 'var(--font-xxsmall)' },
         'ul, ol': {
-          paddingLeft: 40,
           lineHeight: 1.75,
         },
       }}
diff --git a/docs/pages/docs/guides/document-fields.mdx b/docs/pages/docs/guides/document-fields.mdx
index 3fc6e1ff9ff..b26ebc707c8 100644
--- a/docs/pages/docs/guides/document-fields.mdx
+++ b/docs/pages/docs/guides/document-fields.mdx
@@ -371,8 +371,8 @@ export default config({
 <details>
 
 <summary>
-  In the [document editor demo](/docs/guides/document-field-demo), the insertable Quote, Notice and Hero items are
-  implemented as component blocks, see the implementation for Notice and Hero by expanding this.
+  In the [document editor demo](/docs/guides/document-field-demo), the insertable Quote, Notice, Hero and Checkbox List items are
+  implemented as component blocks, see the implementation for Notice, Hero and Checkbox List by expanding this.
 </summary>
 
 ```tsx
@@ -571,6 +571,47 @@ export const componentBlocks = {
       }),
     },
   }),
+  checkboxList: component({
+    preview: function CheckboxList(props) {
+      useEffect(() => {
+        if (!props.fields.children.elements.length) {
+          props.fields.children.onChange([{ key: undefined }]);
+        }
+      });
+      return (
+        <ul css={{ padding: 0 }}>
+          {props.fields.children.elements.map(element => (
+            <li css={{ listStyle: 'none' }} key={element.key}>
+              <input
+                contentEditable="false"
+                css={{ marginRight: 8 }}
+                type="checkbox"
+                checked={element.fields.done.value}
+                onChange={event => element.fields.done.onChange(event.target.checked)}
+              />
+              <span
+                style={{
+                  textDecoration: element.fields.done.value ? 'line-through' : undefined,
+                }}
+              >
+                {element.fields.content.element}
+              </span>
+            </li>
+          ))}
+        </ul>
+      );
+    },
+    label: 'Checkbox List',
+    schema: {
+      children: fields.array(
+        fields.object({
+          done: fields.checkbox({ label: 'Done' }),
+          content: fields.child({ kind: 'inline', placeholder: '', formatting: 'inherit' }),
+        })
+      ),
+    },
+    chromeless: true,
+  }),
 };
 ```
 
diff --git a/examples-staging/basic/admin/fieldViews/Content.tsx b/examples-staging/basic/admin/fieldViews/Content.tsx
index 7f276e01e8e..5b9b8d8810e 100644
--- a/examples-staging/basic/admin/fieldViews/Content.tsx
+++ b/examples-staging/basic/admin/fieldViews/Content.tsx
@@ -170,8 +170,8 @@ export const componentBlocks = {
       }),
     },
   }),
-  myList: component({
-    preview: function MyList(props) {
+  checkboxList: component({
+    preview: function CheckboxList(props) {
       useEffect(() => {
         if (!props.fields.children.elements.length) {
           props.fields.children.onChange([{ key: undefined }]);
@@ -200,7 +200,7 @@ export const componentBlocks = {
         </ul>
       );
     },
-    label: 'My List',
+    label: 'Checkbox List',
     schema: {
       children: fields.array(
         fields.object({
@@ -209,7 +209,7 @@ export const componentBlocks = {
         })
       ),
     },
-    // chromeless: true,
+    chromeless: true,
   }),
   hero: component({
     preview: props => {

From 8430ee729357a9c03317db0c88102ade5c84309d Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Mon, 9 May 2022 10:37:22 +1000
Subject: [PATCH 088/124] Fix type errors

---
 examples-staging/basic/admin/pages/post/[id].tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples-staging/basic/admin/pages/post/[id].tsx b/examples-staging/basic/admin/pages/post/[id].tsx
index 63bee59ac36..60f20a54702 100644
--- a/examples-staging/basic/admin/pages/post/[id].tsx
+++ b/examples-staging/basic/admin/pages/post/[id].tsx
@@ -16,7 +16,8 @@ type ComponentBlockRenderers = InferRenderersForComponentBlocks<
 >;
 
 const componentBlockRenderers: ComponentBlockRenderers = {
-  myList: props => {
+  questionsAndAnswers: () => null,
+  checkboxList: props => {
     return (
       <ul>
         {props.children.map((x, i) => {

From b5fc0882da4616fd1b491f1c95775af5881e588d Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@hamil.town>
Date: Fri, 13 May 2022 11:14:42 +1000
Subject: [PATCH 089/124] Delete famous-cherries-joke.md

---
 .changeset/famous-cherries-joke.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/famous-cherries-joke.md

diff --git a/.changeset/famous-cherries-joke.md b/.changeset/famous-cherries-joke.md
deleted file mode 100644
index 32e0d78c2ed..00000000000
--- a/.changeset/famous-cherries-joke.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@keystone-6/fields-document': patch
----
-
-Fixed z-index issue for toolbar of the document editor

From 5ef1879ac1de7108a410bc2f3645dc639ddd9a5f Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Fri, 13 May 2022 11:15:56 +1000
Subject: [PATCH 090/124] Remove old changesets

---
 .changeset/happy-stingrays-smash.md |  5 -----
 .changeset/proud-turkeys-arrive.md  |  5 -----
 .changeset/rotten-eyes-speak.md     |  5 -----
 .changeset/shy-cycles-check.md      | 25 -------------------------
 4 files changed, 40 deletions(-)
 delete mode 100644 .changeset/happy-stingrays-smash.md
 delete mode 100644 .changeset/proud-turkeys-arrive.md
 delete mode 100644 .changeset/rotten-eyes-speak.md
 delete mode 100644 .changeset/shy-cycles-check.md

diff --git a/.changeset/happy-stingrays-smash.md b/.changeset/happy-stingrays-smash.md
deleted file mode 100644
index 693fb901fc9..00000000000
--- a/.changeset/happy-stingrays-smash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@keystone-6/core": patch
----
-
-Updated `@preconstruct/next` to v4
diff --git a/.changeset/proud-turkeys-arrive.md b/.changeset/proud-turkeys-arrive.md
deleted file mode 100644
index c2b0e1c45a8..00000000000
--- a/.changeset/proud-turkeys-arrive.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@keystone-6/core': patch
----
-
-Fixed React key warning when showing GraphQL errors
diff --git a/.changeset/rotten-eyes-speak.md b/.changeset/rotten-eyes-speak.md
deleted file mode 100644
index a26864aea4f..00000000000
--- a/.changeset/rotten-eyes-speak.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@keystone-6/core': patch
----
-
-Fixed Reset to default button bug.
diff --git a/.changeset/shy-cycles-check.md b/.changeset/shy-cycles-check.md
deleted file mode 100644
index 388fb090506..00000000000
--- a/.changeset/shy-cycles-check.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-'@keystone-6/example-assets-cloud': patch
-'@keystone-6/example-assets-local': patch
-'@keystone-6/example-auth': patch
-'@keystone-6/examples-app-basic': patch
-'@keystone-6/example-ecommerce': patch
-'@keystone-6/example-embedded-nextjs': patch
-'@keystone-6/example-graphql-api-endpoint': patch
-'@keystone-6/example-roles': patch
-'@keystone-6/example-blog': patch
-'@keystone-6/example-custom-admin-ui-logo': patch
-'@keystone-6/example-custom-admin-ui-navigation': patch
-'@keystone-6/example-custom-admin-ui-pages': patch
-'@keystone-6/example-custom-field': patch
-'@keystone-6/example-custom-field-view': patch
-'@keystone-6/example-default-values': patch
-'@keystone-6/example-document-field': patch
-'@keystone-6/example-extend-graphql-schema': patch
-'@keystone-6/example-extend-graphql-schema-graphql-ts': patch
-'@keystone-6/example-extend-graphql-schema-nexus': patch
-'@keystone-6/example-json-field': patch
-'@keystone-6/example-rest-api': patch
----
-
-Added sandbox configs to allow launching sandboxes on codesandbox.io service

From a1efc5dc82d697e16eaffd7ff24bb89d7d1528b4 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 11:48:18 +1000
Subject: [PATCH 091/124] prefer const

---
 packages/fields-document/src/relationship-data.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index 452c66e9d5c..ab8428c38d6 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -89,7 +89,7 @@ export async function fetchRelationshipData(
 
     if (ids.length) {
       const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
-      let val = await context.graphql.run({
+      const val = await context.graphql.run({
         query: `query($ids: [ID!]!) {items:${
           context.gqlNames(listKey).listQueryName
         }(where: { id: { in: $ids } }) {${idFieldAlias}:id ${labelFieldAlias}:${labelField}\n${

From 0e76266d9a5fa05cc036be6bacb74745de4425d4 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 11:49:10 +1000
Subject: [PATCH 092/124] prefer flattened early exits

---
 .../fields-document/src/relationship-data.tsx | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index ab8428c38d6..a838d5251d2 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -84,29 +84,26 @@ export async function fetchRelationshipData(
   selection: string,
   data: any
 ) {
-  if (many) {
-    const ids = Array.isArray(data) ? data.filter(item => item.id != null).map(x => x.id) : [];
+  if (!many) return fetchDataForOne(context, listKey, selection, data);
 
-    if (ids.length) {
-      const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
-      const val = await context.graphql.run({
-        query: `query($ids: [ID!]!) {items:${
-          context.gqlNames(listKey).listQueryName
-        }(where: { id: { in: $ids } }) {${idFieldAlias}:id ${labelFieldAlias}:${labelField}\n${
-          selection || ''
-        }}}`,
-        variables: { ids },
-      });
+  const ids = Array.isArray(data) ? data.filter(item => item.id != null).map(x => x.id) : [];
+  if (!ids.length) return [];
 
-      return Array.isArray(val.items)
-        ? val.items.map(({ [labelFieldAlias]: label, [idFieldAlias]: id, ...data }) => {
-            return { id, label, data };
-          })
-        : [];
-    }
-    return [];
-  }
-  return fetchDataForOne(context, listKey, selection, data);
+  const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
+  const val = await context.graphql.run({
+    query: `query($ids: [ID!]!) {items:${
+      context.gqlNames(listKey).listQueryName
+    }(where: { id: { in: $ids } }) {${idFieldAlias}:id ${labelFieldAlias}:${labelField}\n${
+      selection || ''
+    }}}`,
+    variables: { ids },
+  });
+
+  return Array.isArray(val.items)
+    ? val.items.map(({ [labelFieldAlias]: label, [idFieldAlias]: id, ...data }) => {
+        return { id, label, data };
+      })
+    : [];
 }
 
 async function fetchDataForOne(

From 29e50abb8071e39b6089979427268a8bc687d309 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 11:54:03 +1000
Subject: [PATCH 093/124] prefer early exits

---
 .../fields-document/src/relationship-data.tsx | 61 ++++++++++---------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/fields-document/src/relationship-data.tsx b/packages/fields-document/src/relationship-data.tsx
index a838d5251d2..ea257fa100a 100644
--- a/packages/fields-document/src/relationship-data.tsx
+++ b/packages/fields-document/src/relationship-data.tsx
@@ -114,38 +114,39 @@ async function fetchDataForOne(
 ): Promise<RelationshipData | null> {
   // Single related item
   const id = data?.id;
-  if (id != null) {
-    const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
-    // An exception here indicates something wrong with either the system or the
-    // configuration (e.g. a bad selection field). These will surface as system
-    // errors from the GraphQL field resolver.
-    const val = await context.graphql.run({
-      query: `query($id: ID!) {item:${
-        context.gqlNames(listKey).itemQueryName
-      }(where: {id:$id}) {${labelFieldAlias}:${labelField}\n${selection}}}`,
-      variables: { id },
-    });
-    if (val.item === null) {
-      if (!process.env.TEST_ADAPTER) {
-        // If we're unable to find the item (e.g. we have a dangling reference), or access was denied
-        // then simply return { id } and leave `label` and `data` undefined.
-        console.error(
-          `Unable to fetch relationship data: listKey: ${listKey}, many: false, selection: ${selection}, id: ${id} `
-        );
-      }
-      return { id, data: undefined, label: undefined };
+  if (id == null) return null;
+
+  const labelField = getLabelFieldsForLists(context.graphql.schema)[listKey];
+
+  // An exception here indicates something wrong with either the system or the
+  // configuration (e.g. a bad selection field). These will surface as system
+  // errors from the GraphQL field resolver.
+  const val = await context.graphql.run({
+    query: `query($id: ID!) {item:${
+      context.gqlNames(listKey).itemQueryName
+    }(where: {id:$id}) {${labelFieldAlias}:${labelField}\n${selection}}}`,
+    variables: { id },
+  });
+
+  if (val.item === null) {
+    if (!process.env.TEST_ADAPTER) {
+      // If we're unable to find the item (e.g. we have a dangling reference), or access was denied
+      // then simply return { id } and leave `label` and `data` undefined.
+      console.error(
+        `Unable to fetch relationship data: listKey: ${listKey}, many: false, selection: ${selection}, id: ${id} `
+      );
     }
-    return {
-      id,
-      label: val.item[labelFieldAlias],
-      data: (() => {
-        const { [labelFieldAlias]: _ignore, ...otherData } = val.item;
-        return otherData;
-      })(),
-    };
-  } else {
-    return null;
+    return { id, data: undefined, label: undefined };
   }
+
+  return {
+    id,
+    label: val.item[labelFieldAlias],
+    data: (() => {
+      const { [labelFieldAlias]: _ignore, ...otherData } = val.item;
+      return otherData;
+    })(),
+  };
 }
 
 export async function addRelationshipDataToComponentProps(

From 357fc68d30b50314bdc80ff7d02cf934b2337123 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 12:01:37 +1000
Subject: [PATCH 094/124] dont fallthrough in switch statements

---
 .../component-blocks/initial-values.ts        | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index f877f9dd6ca..1f9e86bf655 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -36,7 +36,7 @@ export function getInitialPropsValue(schema: ComponentSchema): any {
       };
     }
     case 'object': {
-      let obj: Record<string, any> = {};
+      const obj: Record<string, any> = {};
       Object.keys(schema.fields).forEach(key => {
         obj[key] = getInitialPropsValue(schema.fields[key]);
       });
@@ -72,7 +72,7 @@ export function getInitialPropsValueFromInitializer(
       };
     }
     case 'object': {
-      let obj: Record<string, any> = {};
+      const obj: Record<string, any> = {};
       Object.keys(schema.fields).forEach(key => {
         obj[key] = getInitialPropsValueFromInitializer(
           schema.fields[key],
@@ -91,15 +91,12 @@ export function getInitialPropsValueFromInitializer(
 }
 
 export function updateValue(schema: ComponentSchema, currentValue: any, updater: any): any {
-  if (updater === undefined) {
-    return currentValue;
-  }
+  if (updater === undefined) return currentValue;
+
   switch (schema.kind) {
-    case 'relationship':
-    case 'form':
-      return updater;
-    case 'child':
-      return null;
+    case 'relationship': return updater;
+    case 'form': return updater;
+    case 'child': return null;
     case 'conditional': {
       return {
         discriminant: updater.discriminant,
@@ -117,7 +114,7 @@ export function updateValue(schema: ComponentSchema, currentValue: any, updater:
       };
     }
     case 'object': {
-      let obj: Record<string, any> = {};
+      const obj: Record<string, any> = {};
       Object.keys(schema.fields).forEach(key => {
         obj[key] = updateValue(schema.fields[key], currentValue[key], updater[key]);
       });
@@ -136,9 +133,7 @@ export function updateValue(schema: ComponentSchema, currentValue: any, updater:
         }
       }
       const keys = newVal.map(x => {
-        if (x.key !== undefined) {
-          return x.key;
-        }
+        if (x.key !== undefined) return x.key;
         let elementKey = getNewArrayElementKey();
         // just in case someone gives a key that is above our counter
         while (uniqueKeys.has(elementKey)) {

From 7b3f6cbf4aa9497ec1e43077c1af4f96ad5040b2 Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@hamil.town>
Date: Thu, 19 May 2022 12:16:12 +1000
Subject: [PATCH 095/124] Update packages/fields-document/package.json

---
 packages/fields-document/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index 7b546e29aef..1e5651169f7 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -9,8 +9,7 @@
     "dist",
     "component-blocks",
     "primitives",
-    "views",
-    "component-views"
+    "views"
   ],
   "preconstruct": {
     "entrypoints": [

From 0e03ec6cc02b671def432e7149e6309f1cbab1d6 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 13:25:55 +1000
Subject: [PATCH 096/124] yarn format

---
 .../DocumentEditor/component-blocks/initial-values.ts    | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index 1f9e86bf655..f64cbb70d9d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -94,9 +94,12 @@ export function updateValue(schema: ComponentSchema, currentValue: any, updater:
   if (updater === undefined) return currentValue;
 
   switch (schema.kind) {
-    case 'relationship': return updater;
-    case 'form': return updater;
-    case 'child': return null;
+    case 'relationship':
+      return updater;
+    case 'form':
+      return updater;
+    case 'child':
+      return null;
     case 'conditional': {
       return {
         discriminant: updater.discriminant,

From dfd30b5c5552f6248643a81fa11b2fae735743cc Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 13:57:32 +1000
Subject: [PATCH 097/124] remove double-spacing

---
 .../DocumentEditor/component-blocks/field-assertions.test.ts    | 2 +-
 .../src/DocumentEditor/component-blocks/field-assertions.ts     | 2 +-
 tests/api-tests/fields/types/document.test.ts                   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
index c18057ab966..4bba2d07656 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
@@ -158,7 +158,7 @@ test('relationship field where no list exists with that name', () => {
       new Set()
     );
   }).toThrowErrorMatchingInlineSnapshot(
-    `"The relationship field at \\"object.a\\"  has the listKey \\"Blah\\" but no list named \\"Blah\\" exists."`
+    `"The relationship field at \\"object.a\\" has the listKey \\"Blah\\" but no list named \\"Blah\\" exists."`
   );
 });
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
index a9942cd6739..960f26e2074 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -25,7 +25,7 @@ function assertValidComponentSchemaInner(
       return;
     }
     throw new Error(
-      `The relationship field at "${propPath.join('.')}"  has the listKey "${
+      `The relationship field at "${propPath.join('.')}" has the listKey "${
         schema.listKey
       }" but no list named "${schema.listKey}" exists.`
     );
diff --git a/tests/api-tests/fields/types/document.test.ts b/tests/api-tests/fields/types/document.test.ts
index 2e9de670868..b9d65cb368e 100644
--- a/tests/api-tests/fields/types/document.test.ts
+++ b/tests/api-tests/fields/types/document.test.ts
@@ -347,7 +347,7 @@ describe('Document field type', () => {
         }),
       })
     ).rejects.toMatchInlineSnapshot(
-      `[Error: Component block someBlock in Post.content: The relationship field at "object.something.object.blah.conditional.true"  has the listKey "Author" but no list named "Author" exists.]`
+      `[Error: Component block someBlock in Post.content: The relationship field at "object.something.object.blah.conditional.true" has the listKey "Author" but no list named "Author" exists.]`
     );
   });
 });

From a50e5c0e5c3648bfcb50121f4a0f38e46398affa Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 15:45:21 +1000
Subject: [PATCH 098/124] remove explicit any

---
 packages/fields-document/src/DocumentEditor/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fields-document/src/DocumentEditor/utils.ts b/packages/fields-document/src/DocumentEditor/utils.ts
index 9a14d180327..715f3ea51e3 100644
--- a/packages/fields-document/src/DocumentEditor/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/utils.ts
@@ -101,7 +101,7 @@ export function useElementWithSetNodes<TElement extends Element>(
       Transforms.setNodes(editor, changes, { at: ReactEditor.findPath(editor, currentElement) });
       setState({
         element: currentElement,
-        elementWithChanges: { ...currentElement, ...changes } as any,
+        elementWithChanges: { ...currentElement, ...changes },
       });
     },
     [editor]

From ac6401866249c48d114694e7bfba905e94355689 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 15:53:25 +1000
Subject: [PATCH 099/124] rename Sortable* to Orderable*

---
 .../component-blocks/form-from-preview.tsx         | 14 +++++++-------
 .../src/DocumentEditor/primitives/index.tsx        |  2 +-
 .../primitives/{sortable.tsx => orderable.tsx}     |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)
 rename packages/fields-document/src/DocumentEditor/primitives/{sortable.tsx => orderable.tsx} (95%)

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 45d88362681..2a2d231162b 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
@@ -7,7 +7,7 @@ import { jsx, Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import { memo, useMemo } from 'react';
 import { ReactElement } from 'react';
-import { DragHandle, SortableItem, SortableList } from '../primitives/sortable';
+import { DragHandle, OrderableItem, OrderableList } from '../primitives/orderable';
 import {
   ArrayField,
   ComponentSchema,
@@ -31,11 +31,11 @@ const fieldRenderers: {
   array({ props }) {
     return (
       <Stack gap="medium">
-        <SortableList {...props}>
+        <OrderableList {...props}>
           {props.elements.map(val => {
-            return <SortableItemInForm elementKey={val.key} {...val} />;
+            return <OrderableItemInForm elementKey={val.key} {...val} />;
           })}
-        </SortableList>
+        </OrderableList>
         <Button
           autoFocus={props.autoFocus}
           onClick={() => {
@@ -161,16 +161,16 @@ export const FormValueContentFromPreviewProps = memo(function FormValueContentFr
   return <Comp props={props as any} />;
 });
 
-const SortableItemInForm = memo(function SortableItemInForm(
+const OrderableItemInForm = memo(function OrderableItemInForm(
   props: GenericPreviewProps<ComponentSchema, unknown> & { elementKey: string }
 ) {
   return (
-    <SortableItem elementKey={props.elementKey}>
+    <OrderableItem elementKey={props.elementKey}>
       <Stack across align="center" gap="small" css={{ justifyContent: 'center' }}>
         <DragHandle />
       </Stack>
       {isNonChildFieldPreviewProps(props) && <FormValueContentFromPreviewProps {...props} />}
-    </SortableItem>
+    </OrderableItem>
   );
 });
 
diff --git a/packages/fields-document/src/DocumentEditor/primitives/index.tsx b/packages/fields-document/src/DocumentEditor/primitives/index.tsx
index 2f37baea9af..ca169d22863 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/index.tsx
@@ -1,3 +1,3 @@
 export * from './inline-dialog';
 export * from './toolbar';
-export * from './sortable';
+export * from './orderable';
diff --git a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx b/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
similarity index 95%
rename from packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
rename to packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
index cfdd41646ef..050230168f4 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/sortable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
@@ -25,7 +25,7 @@ import { ToolbarButton } from '.';
 
 const RemoveContext = createContext<null | ((index: number) => void)>(null);
 
-export function SortableList(props: {
+export function OrderableList(props: {
   onChange: (elements: readonly { key: string }[]) => void;
   elements: readonly { key: string }[];
   children: ReactNode;
@@ -95,7 +95,7 @@ const DragHandleListenersContext = createContext<Pick<
   'listeners' | 'isDragging' | 'attributes' | 'index'
 > | null>(null);
 
-export function SortableItem(props: { elementKey: string; children: ReactNode }) {
+export function OrderableItem(props: { elementKey: string; children: ReactNode }) {
   const { attributes, isDragging, listeners, setNodeRef, transform, transition, index } =
     useSortable({
       id: props.elementKey,
@@ -151,12 +151,12 @@ export function SortableItem(props: { elementKey: string; children: ReactNode })
 export function DragHandle() {
   const sortable = useContext(DragHandleListenersContext);
   if (sortable === null) {
-    throw new Error('Must use SortableItem above DragHandle');
+    throw new Error('Must use OrderableItem above DragHandle');
   }
 
   const onRemove = useContext(RemoveContext);
   if (onRemove === null) {
-    throw new Error('Must use SortableList above DragHandle');
+    throw new Error('Must use OrderableItem above DragHandle');
   }
 
   return (

From c265751df4cd2cf8128c9cba4faeca86ec59c21c Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:00:39 +1000
Subject: [PATCH 100/124] prefer const

---
 .../component-blocks/with-component-blocks.tsx             | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 2ae4f1c8983..3ab338be5ef 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -414,7 +414,8 @@ export function withComponentBlocks(
               return;
             }
           }
-          let missingKeys = new Map(
+
+          const missingKeys = new Map(
             findChildPropPaths(node.props, componentBlock.schema).map(x => [
               JSON.stringify(x.path) as string | undefined,
               x.options.kind,
@@ -438,9 +439,9 @@ export function withComponentBlocks(
             return;
           }
 
-          let foundProps = new Set<string>();
+          const foundProps = new Set<string>();
 
-          let stringifiedInlinePropPaths: Record<
+          const stringifiedInlinePropPaths: Record<
             string,
             { options: ChildField['options']; index: number } | undefined
           > = {};

From f7b489dff25e70e299c4a2a4408affc3de28cfd3 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:00:44 +1000
Subject: [PATCH 101/124] flatten branches

---
 .../with-component-blocks.tsx                 | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 3ab338be5ef..39d579097ae 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -455,43 +455,46 @@ export function withComponentBlocks(
             if (
               // children that are not these will be handled by
               // the generic allowedChildren normalization
-              childNode.type === 'component-inline-prop' ||
-              childNode.type === 'component-block-prop'
+              childNode.type !== 'component-inline-prop' &&
+              childNode.type !== 'component-block-prop'
+            ) continue;
+
+            const childPath = [...path, index];
+            const stringifiedPropPath = JSON.stringify(childNode.propPath);
+            if (stringifiedInlinePropPaths[stringifiedPropPath] === undefined) {
+              Transforms.removeNodes(editor, { at: childPath });
+              return;
+            }
+
+            if (foundProps.has(stringifiedPropPath)) {
+              Transforms.removeNodes(editor, { at: childPath });
+              return;
+            }
+
+            foundProps.add(stringifiedPropPath);
+            const propInfo = stringifiedInlinePropPaths[stringifiedPropPath]!;
+            const expectedIndex = propInfo.index;
+            if (index !== expectedIndex) {
+              Transforms.moveNodes(editor, { at: childPath, to: [...path, expectedIndex] });
+              return;
+            }
+
+            const expectedChildNodeType = `component-${propInfo.options.kind}-prop` as const;
+            if (childNode.type !== expectedChildNodeType) {
+              Transforms.setNodes(editor, { type: expectedChildNodeType }, { at: childPath });
+              return;
+            }
+
+            const documentFeatures = memoizedGetDocumentFeaturesForChildField(propInfo.options);
+            if (
+              normalizeNodeWithinComponentProp(
+                [childNode, childPath],
+                editor,
+                documentFeatures,
+                relationships
+              )
             ) {
-              const childPath = [...path, index];
-              const stringifiedPropPath = JSON.stringify(childNode.propPath);
-              if (stringifiedInlinePropPaths[stringifiedPropPath] === undefined) {
-                Transforms.removeNodes(editor, { at: childPath });
-                return;
-              } else {
-                if (foundProps.has(stringifiedPropPath)) {
-                  Transforms.removeNodes(editor, { at: childPath });
-                  return;
-                }
-                foundProps.add(stringifiedPropPath);
-                const propInfo = stringifiedInlinePropPaths[stringifiedPropPath]!;
-                const expectedIndex = propInfo.index;
-                if (index !== expectedIndex) {
-                  Transforms.moveNodes(editor, { at: childPath, to: [...path, expectedIndex] });
-                  return;
-                }
-                const expectedChildNodeType = `component-${propInfo.options.kind}-prop` as const;
-                if (childNode.type !== expectedChildNodeType) {
-                  Transforms.setNodes(editor, { type: expectedChildNodeType }, { at: childPath });
-                  return;
-                }
-                const documentFeatures = memoizedGetDocumentFeaturesForChildField(propInfo.options);
-                if (
-                  normalizeNodeWithinComponentProp(
-                    [childNode, childPath],
-                    editor,
-                    documentFeatures,
-                    relationships
-                  )
-                ) {
-                  return;
-                }
-              }
+              return;
             }
           }
         }

From 6a80c896e76e94416531aa5b285e91a0fd613d08 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:18:06 +1000
Subject: [PATCH 102/124] use lodash, not DIY

---
 packages/fields-document/package.json                  |  3 ++-
 .../component-blocks/with-component-blocks.tsx         | 10 +---------
 yarn.lock                                              |  2 +-
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index 1e5651169f7..7e2a63fa5f5 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -44,6 +44,7 @@
     "io-ts": "^2.2.16",
     "io-ts-excess": "^1.0.1",
     "is-hotkey": "^0.2.0",
+    "lodash": "^4.17.0",
     "match-sorter": "^6.3.1",
     "mdast-util-definitions": "^4.0.0",
     "mdast-util-from-markdown": "^0.8.5",
@@ -69,4 +70,4 @@
   "engines": {
     "node": "^14.15 || ^16.13"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 39d579097ae..cee5d097518 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -1,5 +1,6 @@
 import { Editor, Element, Transforms, Range, NodeEntry, Path, Node, Text } from 'slate';
 
+import findLastIndex from 'lodash/findLastIndex';
 import weakMemoize from '@emotion/weak-memoize';
 import { ChildField, ComponentBlock, ComponentSchema } from '../../component-blocks';
 import { assert, moveChildren } from '../utils';
@@ -506,12 +507,3 @@ export function withComponentBlocks(
 
   return editor;
 }
-
-function findLastIndex<T>(array: readonly T[], predicate: (item: T) => boolean): number {
-  for (let i = array.length - 1; i >= 0; --i) {
-    if (predicate(array[i])) {
-      return i;
-    }
-  }
-  return -1;
-}
diff --git a/yarn.lock b/yarn.lock
index 82cabea013a..5a2e567989c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8892,7 +8892,7 @@ lodash.union@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
   integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=
 
-lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.0, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

From a858c7bc4b07ca69cd1e42f255f4375e127d32a7 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:25:49 +1000
Subject: [PATCH 103/124] shorter error message

---
 .../fields-document/src/DocumentEditor/component-blocks/api.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 8bfc5bcd098..8085870ad90 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -401,7 +401,7 @@ export const fields = {
       (discriminant.validate(true) || discriminant.validate(false))
     ) {
       throw new Error(
-        'The discriminant of a conditional field must not allow both strings and booleans to be valid values. only strings or only booleans can be valid'
+        'The discriminant of a conditional field only supports string values, or boolean values, not both.'
       );
     }
     return {

From d5cf920ca5f47f05d99b0192fe068d3d97eb86d5 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:29:30 +1000
Subject: [PATCH 104/124] shorter recursion error message

---
 .../component-blocks/field-assertions.test.ts          | 10 +++++-----
 .../component-blocks/field-assertions.ts               |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
index 4bba2d07656..2817e0e1007 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.test.ts
@@ -16,7 +16,7 @@ test('does not allow circular object', () => {
   expect(() => {
     assertValidComponentSchema(easilyCircularObject, new Set());
   }).toThrowErrorMatchingInlineSnapshot(
-    `"The field at \\"object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+    `"The field \\"object.x\\" is the same as it's ancestor. Use an array or conditional field for recursive structures."`
   );
 });
 
@@ -24,7 +24,7 @@ test('does not allow a circular object within an array', () => {
   expect(() => {
     assertValidComponentSchema(fields.array(easilyCircularObject), new Set());
   }).toThrowErrorMatchingInlineSnapshot(
-    `"The field at \\"array.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+    `"The field \\"array.object.x\\" is the same as it's ancestor. Use an array or conditional field for recursive structures."`
   );
 });
 
@@ -38,7 +38,7 @@ test('does not allow a circular object within a value for a default discriminant
       new Set()
     );
   }).toThrowErrorMatchingInlineSnapshot(
-    `"The field at \\"conditional.false.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+    `"The field \\"conditional.false.object.x\\" is the same as it's ancestor. Use an array or conditional field for recursive structures."`
   );
 });
 
@@ -52,7 +52,7 @@ test('does not allow a circular object within a value for a non-default discrimi
       new Set()
     );
   }).toThrowErrorMatchingInlineSnapshot(
-    `"The field at \\"conditional.true.object.x\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+    `"The field \\"conditional.true.object.x\\" is the same as it's ancestor. Use an array or conditional field for recursive structures."`
   );
 });
 
@@ -84,7 +84,7 @@ test("does not allow a circular conditional if it's the default", () => {
   expect(() => {
     assertValidComponentSchema(conditional, new Set());
   }).toThrowErrorMatchingInlineSnapshot(
-    `"The field at \\"conditional.false\\" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure."`
+    `"The field \\"conditional.false\\" is the same as it's ancestor. Use an array or conditional field for recursive structures."`
   );
 });
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
index 960f26e2074..55b2ed6dafe 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/field-assertions.ts
@@ -33,9 +33,9 @@ function assertValidComponentSchemaInner(
   const ancestor = schemaAncestors.indexOf(schema);
   if (ancestor !== -1) {
     throw new Error(
-      `The field at "${propPath.join(
+      `The field "${propPath.join(
         '.'
-      )}" is a field that is also its ancestor, this is not allowed because it would create an infinitely recursive structure. Introduce an array or conditional field to represent recursive structure.`
+      )}" is the same as it's ancestor. Use an array or conditional field for recursive structures.`
     );
   }
   if (seenProps.has(schema)) {

From 8c240bef36936c86c7f13166a31aebb04e60589b Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:46:10 +1000
Subject: [PATCH 105/124] remove console.log

---
 .../src/DocumentEditor/component-blocks/utils.ts               | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 3c46b2e6162..47f5912ebf2 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -255,8 +255,7 @@ export function getAncestorSchemas(
       currentProp.kind === 'form' ||
       currentProp.kind === 'relationship'
     ) {
-      console.log(key);
-      throw new Error('unexpected prop');
+      throw new Error(`unexpected prop "${key}"`);
     } else {
       assertNever(currentProp);
     }

From 7e326f7835b32be8f3965bc2fa3e11c86163209e Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 16:50:45 +1000
Subject: [PATCH 106/124] prefer const

---
 .../src/DocumentEditor/component-blocks/utils.ts            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
index 47f5912ebf2..33370ea52cd 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/utils.ts
@@ -25,14 +25,14 @@ export function findChildPropPathsForProp(
         path.concat('value')
       );
     case 'object': {
-      let paths: PathToChildFieldWithOption[] = [];
+      const paths: PathToChildFieldWithOption[] = [];
       Object.keys(schema.fields).forEach(key => {
         paths.push(...findChildPropPathsForProp(value[key], schema.fields[key], path.concat(key)));
       });
       return paths;
     }
     case 'array': {
-      let paths: PathToChildFieldWithOption[] = [];
+      const paths: PathToChildFieldWithOption[] = [];
       (value as any[]).forEach((val, i) => {
         paths.push(...findChildPropPathsForProp(val, schema.element, path.concat(i)));
       });
@@ -45,7 +45,7 @@ export function findChildPropPaths(
   value: Record<string, any>,
   props: Record<string, ComponentSchema>
 ): { path: ReadonlyPropPath | undefined; options: ChildField['options'] }[] {
-  let propPaths = findChildPropPathsForProp(value, { kind: 'object', fields: props }, []);
+  const propPaths = findChildPropPathsForProp(value, { kind: 'object', fields: props }, []);
   if (!propPaths.length) {
     return [
       {

From b18444065b5146c81272126ffad69633c895130c Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 17:02:20 +1000
Subject: [PATCH 107/124] prefer const

---
 .../src/DocumentEditor/component-blocks/preview-props.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index aa4568e7c26..e3209e720af 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -293,7 +293,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
     ) => void,
     path: readonly string[]
   ): MemoState<Schema> {
-    let innerState = new Map<string, MemoState<ComponentSchema>>();
+    const innerState = new Map<string, MemoState<ComponentSchema>>();
     const memoizedInfo = (
       memoizedInfoForSchema[schema.kind] as (
         schema: ComponentSchema,
@@ -302,7 +302,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
         ) => void
       ) => any
     )(schema, onChange);
-    let state: MemoState<ComponentSchema> = {
+    const state: MemoState<ComponentSchema> = {
       value,
       inner: innerState,
       props: getPreviewPropsForProp(

From 164ee2b59dbb124ce2df44810c46f9afd19c2f35 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 17:03:02 +1000
Subject: [PATCH 108/124] no as any needed

---
 .../src/DocumentEditor/component-blocks/preview-props.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index e3209e720af..1be37cf47b1 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -123,7 +123,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
             return [
               key,
               (newVal: (prevVal: unknown) => unknown) => {
-                onChange(val => ({ ...(val as any), [key]: newVal((val as any)[key]) }));
+                onChange(val => ({ ...val, [key]: newVal(val[key]) }));
               },
             ];
           })
@@ -169,7 +169,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
       Object.keys(schema.fields).forEach(key => {
         fields[key] = getInnerProp(
           schema.fields[key],
-          (value as any)[key],
+          value[key],
           memoized.innerOnChanges[key],
           key
         );
@@ -278,7 +278,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
   ): GenericPreviewProps<Schema, ChildFieldElement> {
     return previewPropsFactories[schema.kind](
       schema as any,
-      value as any,
+      value,
       memoedThing as any,
       path,
       getInnerProp

From ca1895a6977c50f8f6e44affe2194dfef1ccb95d Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Thu, 19 May 2022 17:06:26 +1000
Subject: [PATCH 109/124] remove duplicate text

---
 examples/blog/README.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/examples/blog/README.md b/examples/blog/README.md
index 0d9ce24fd56..e77b2bbbb47 100644
--- a/examples/blog/README.md
+++ b/examples/blog/README.md
@@ -19,12 +19,6 @@ You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://
 
 Congratulations, you're now up and running with Keystone! 🚀
 
-### Online sandox
-
-You can play with this example online in web browser using free [codesandbox.io](https://codesandbox.io/) service. To launch the sandbox just open the url https://githubbox.com/keystonejs/keystone/tree/main/examples/blog and that's all.
-
-You can even fork this sanbox to make your own changes.
-
 ### Optional: add sample data
 
 This example includes sample data. To add it to your database:

From c75038cc3396d6322d4b564aaa9821eb2ac8c544 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Tue, 24 May 2022 12:00:09 +1000
Subject: [PATCH 110/124] dont use findLastIndex or lodash

---
 packages/core/src/lib/core/prisma-schema.ts         | 10 +---------
 packages/fields-document/package.json               |  1 -
 .../component-blocks/with-component-blocks.tsx      | 12 ++++++------
 .../document-features-normalization.ts              | 13 ++-----------
 yarn.lock                                           |  2 +-
 5 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/packages/core/src/lib/core/prisma-schema.ts b/packages/core/src/lib/core/prisma-schema.ts
index e7131364d7c..55c8ec50ffc 100644
--- a/packages/core/src/lib/core/prisma-schema.ts
+++ b/packages/core/src/lib/core/prisma-schema.ts
@@ -4,15 +4,7 @@ import { InitialisedList } from './types-for-lists';
 import { getDBFieldKeyForFieldOnMultiField } from './utils';
 
 function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
-  if (a.length !== b.length) {
-    return false;
-  }
-  for (var i = 0; i < a.length; ++i) {
-    if (a[i] !== b[i]) {
-      return false;
-    }
-  }
-  return true;
+  return a.length === b.length && a.every((x, i) => x === b[i]);
 }
 
 const modifiers = {
diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index 7e2a63fa5f5..779c7cfe905 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -44,7 +44,6 @@
     "io-ts": "^2.2.16",
     "io-ts-excess": "^1.0.1",
     "is-hotkey": "^0.2.0",
-    "lodash": "^4.17.0",
     "match-sorter": "^6.3.1",
     "mdast-util-definitions": "^4.0.0",
     "mdast-util-from-markdown": "^0.8.5",
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index cee5d097518..e830eefe737 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -1,6 +1,5 @@
 import { Editor, Element, Transforms, Range, NodeEntry, Path, Node, Text } from 'slate';
 
-import findLastIndex from 'lodash/findLastIndex';
 import weakMemoize from '@emotion/weak-memoize';
 import { ChildField, ComponentBlock, ComponentSchema } from '../../component-blocks';
 import { assert, moveChildren } from '../utils';
@@ -351,11 +350,12 @@ export function withComponentBlocks(
                   childNode.type === 'component-inline-prop') &&
                 childNode.propPath !== undefined
               ) {
-                const indexForLastArrayIndex = findLastIndex(
-                  childNode.propPath,
-                  x => typeof x === 'number'
-                );
-                if (areArraysEqual(propPath, childNode.propPath.slice(0, indexForLastArrayIndex))) {
+                const subPath = childNode.propPath.concat();
+                while (subPath.length) {
+                  if (typeof subPath.pop() === 'number') break;
+                }
+
+                if (areArraysEqual(propPath, subPath)) {
                   nodesWithin.push([idx, childNode]);
                 }
               }
diff --git a/packages/fields-document/src/DocumentEditor/document-features-normalization.ts b/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
index 30c23c35684..9a89eeac1fe 100644
--- a/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
+++ b/packages/fields-document/src/DocumentEditor/document-features-normalization.ts
@@ -2,17 +2,8 @@ import { Text, Transforms, Element, NodeEntry, Editor, Node } from 'slate';
 import { DocumentFeatures } from '../views';
 import { Relationships } from './relationship';
 
-export function areArraysEqual(arrA: readonly unknown[], arrB: readonly unknown[]) {
-  if (arrA.length !== arrB.length) {
-    return false;
-  }
-
-  for (let i = 0; i < arrA.length; i++) {
-    if (arrA[i] !== arrB[i]) {
-      return false;
-    }
-  }
-  return true;
+export function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
+  return a.length === b.length && a.every((x, i) => x === b[i]);
 }
 
 export function normalizeTextBasedOnInlineMarksAndSoftBreaks(
diff --git a/yarn.lock b/yarn.lock
index 5a2e567989c..82cabea013a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8892,7 +8892,7 @@ lodash.union@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
   integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=
 
-lodash@^4.17.0, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

From 133841d7e4593231b3a028dff03cd64d1bf7a0b0 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Tue, 24 May 2022 15:11:16 +1000
Subject: [PATCH 111/124] remove redundant Object.keys

---
 .../component-blocks/initial-values.ts               | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index f64cbb70d9d..d660a45da09 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -37,9 +37,9 @@ export function getInitialPropsValue(schema: ComponentSchema): any {
     }
     case 'object': {
       const obj: Record<string, any> = {};
-      Object.keys(schema.fields).forEach(key => {
+      for (const key in schema.fields) {
         obj[key] = getInitialPropsValue(schema.fields[key]);
-      });
+      }
       return obj;
     }
     case 'array': {
@@ -73,12 +73,12 @@ export function getInitialPropsValueFromInitializer(
     }
     case 'object': {
       const obj: Record<string, any> = {};
-      Object.keys(schema.fields).forEach(key => {
+      for (const key in schema.fields) {
         obj[key] = getInitialPropsValueFromInitializer(
           schema.fields[key],
           initializer === undefined ? undefined : initializer[key]
         );
-      });
+      }
       return obj;
     }
     case 'array': {
@@ -118,9 +118,9 @@ export function updateValue(schema: ComponentSchema, currentValue: any, updater:
     }
     case 'object': {
       const obj: Record<string, any> = {};
-      Object.keys(schema.fields).forEach(key => {
+      for (const key in schema.fields) {
         obj[key] = updateValue(schema.fields[key], currentValue[key], updater[key]);
-      });
+      }
       return obj;
     }
     case 'array': {

From 32234139333a3cd5a938450ef8fcbca31eb68e22 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 11:42:55 +1000
Subject: [PATCH 112/124] prefer canonical props pattern

---
 .../component-blocks/form-from-preview.tsx    | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

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 2a2d231162b..01b08c2b782 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
@@ -21,14 +21,14 @@ import {
 import { assertNever } from './utils';
 
 const fieldRenderers: {
-  [Key in ComponentSchema['kind']]: (props: {
-    props: GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
+  [Key in ComponentSchema['kind']]: (props:
+    GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
       autoFocus?: boolean;
       forceValidation?: boolean;
-    };
-  }) => ReactElement | null;
+    }
+  ) => ReactElement | null;
 } = {
-  array({ props }) {
+  array: function ArrayField(props) {
     return (
       <Stack gap="medium">
         <OrderableList {...props}>
@@ -47,40 +47,40 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  relationship: function RelationshipField({ props }) {
+  relationship: function RelationshipField({ schema, autoFocus, onChange, value }) {
     const keystone = useKeystone();
     return (
       <FieldContainer>
-        <FieldLabel>{props.schema.label}</FieldLabel>
+        <FieldLabel>{schema.label}</FieldLabel>
         <RelationshipSelect
-          autoFocus={props.autoFocus}
+          autoFocus={autoFocus}
           controlShouldRenderValue
           isDisabled={false}
-          list={keystone.adminMeta.lists[props.schema.listKey]}
-          extraSelection={props.schema.selection || ''}
+          list={keystone.adminMeta.lists[schema.listKey]}
+          extraSelection={schema.selection || ''}
           portalMenu
           state={
-            props.schema.many
+            schema.many
               ? {
                   kind: 'many',
-                  value: (props.value as RelationshipData[]).map(x => ({
+                  value: (value as RelationshipData[]).map(x => ({
                     id: x.id,
                     label: x.label || x.id,
                     data: x.data,
                   })),
-                  onChange: props.onChange,
+                  onChange: onChange,
                 }
               : {
                   kind: 'one',
-                  value: props.value
+                  value: value
                     ? {
-                        ...(props.value as RelationshipData),
+                        ...(value as RelationshipData),
                         label:
-                          (props.value as RelationshipData).label ||
-                          (props.value as RelationshipData).id,
+                          (value as RelationshipData).label ||
+                          (value as RelationshipData).id,
                       }
                     : null,
-                  onChange: props.onChange,
+                  onChange: onChange,
                 }
           }
         />
@@ -88,21 +88,21 @@ const fieldRenderers: {
     );
   },
   child: () => null,
-  form: function FormField({ props }) {
+  form: function FormField({ schema, autoFocus, forceValidation, onChange, value }) {
     return (
-      <props.schema.Input
-        autoFocus={!!props.autoFocus}
-        value={props.value}
-        onChange={props.onChange}
-        forceValidation={!!props.forceValidation}
+      <schema.Input
+        autoFocus={!!autoFocus}
+        value={value}
+        onChange={onChange}
+        forceValidation={!!forceValidation}
       />
     );
   },
-  object: function ObjectField({ props }) {
-    const firstFocusable = props.autoFocus ? findFocusableObjectFieldKey(props.schema) : undefined;
+  object: function ObjectField({ schema, autoFocus, fields }) {
+    const firstFocusable = autoFocus ? findFocusableObjectFieldKey(schema) : undefined;
     return (
       <Stack gap="xlarge">
-        {Object.entries(props.fields).map(
+        {Object.entries(fields).map(
           ([key, propVal]) =>
             isNonChildFieldPreviewProps(propVal) && (
               <FormValueContentFromPreviewProps
@@ -115,23 +115,23 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  conditional: function ConditionalField({ props }) {
-    const discriminant = props.schema.discriminant as FormField<string | boolean, unknown>;
+  conditional: function ConditionalField({ schema, autoFocus, discriminant, onChange, value }) {
+    const schemaDiscriminant = schema.discriminant as FormField<string | boolean, unknown>;
     return (
       <Stack gap="xlarge">
         {useMemo(
           () => (
-            <discriminant.Input
-              autoFocus={!!props.autoFocus}
-              value={props.discriminant}
-              onChange={props.onChange}
+            <schemaDiscriminant.Input
+              autoFocus={!!autoFocus}
+              value={discriminant}
+              onChange={onChange}
               forceValidation={false}
             />
           ),
-          [props.autoFocus, discriminant, props.discriminant, props.onChange]
+          [autoFocus, schemaDiscriminant, discriminant, onChange]
         )}
-        {isNonChildFieldPreviewProps(props.value) && (
-          <FormValueContentFromPreviewProps {...props.value} />
+        {isNonChildFieldPreviewProps(value) && (
+          <FormValueContentFromPreviewProps {...value} />
         )}
       </Stack>
     );
@@ -158,7 +158,7 @@ export const FormValueContentFromPreviewProps = memo(function FormValueContentFr
   }
 ) {
   const Comp = fieldRenderers[props.schema.kind];
-  return <Comp props={props as any} />;
+  return <Comp {...props as any} />;
 });
 
 const OrderableItemInForm = memo(function OrderableItemInForm(

From 3127c6338b22940b725b09b0cf0069bf786665a3 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 11:43:00 +1000
Subject: [PATCH 113/124] prefer const

---
 .../src/DocumentEditor/component-blocks/index.tsx        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index c32a8abaf57..f1bd0b4a30d 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -131,8 +131,9 @@ export const ComponentBlocksElement = ({
       Editor.withoutNormalizing(editor, () => {
         const prevProps = elementToGetPathRef.current.currentElement.props;
         const elementForChildren = elementToGetPathRef.current.__elementToGetPath;
-        let newProps = cb(prevProps);
+        const newProps = cb(prevProps);
         setElement({ props: newProps });
+
         const childPropPaths = findChildPropPathsWithPrevious(
           newProps,
           prevProps,
@@ -141,8 +142,8 @@ export const ComponentBlocksElement = ({
           [],
           []
         );
-        const basePath = ReactEditor.findPath(editor, elementForChildren);
 
+        const basePath = ReactEditor.findPath(editor, elementForChildren);
         if (childPropPaths.length === 0) {
           const indexes = elementForChildren.children.map((_, i) => i).reverse();
           for (const idx of indexes) {
@@ -157,6 +158,7 @@ export const ComponentBlocksElement = ({
           );
           return;
         }
+
         const initialPropPathsToEditorPath = new Map<undefined | string, number>();
         for (const [idx, node] of elementForChildren.children.entries()) {
           assert(node.type === 'component-block-prop' || node.type === 'component-inline-prop');
@@ -165,11 +167,13 @@ export const ComponentBlocksElement = ({
             idx
           );
         }
+
         const childrenLeftToAdd = new Set(childPropPaths);
         for (const childProp of childPropPaths) {
           if (childProp.prevPath === undefined) {
             continue;
           }
+
           const stringifiedPath = JSON.stringify(childProp.prevPath);
           const idxInChildren = initialPropPathsToEditorPath.get(stringifiedPath);
           if (idxInChildren !== undefined) {
@@ -221,6 +225,7 @@ export const ComponentBlocksElement = ({
         for (const [idx, thing] of childPropPaths.entries()) {
           propPathsToExpectedIndexes.set(JSON.stringify(thing.path), idx);
         }
+
         outer: while (true) {
           for (const [idx, childNode] of getNode().children.entries()) {
             assert(

From 44e3da4ec1cecf7601abf3eade4d282c93259fda Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 14:39:41 +1000
Subject: [PATCH 114/124] prefer const, normal for loops

---
 .../src/DocumentEditor/component-blocks/index.tsx        | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index f1bd0b4a30d..7fd7beff0a9 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -539,6 +539,7 @@ function findChildPropPathsWithPrevious(
 ): ChildPropPathWithPrevious[] {
   switch (schema.kind) {
     case 'form':
+      return [];
     case 'relationship':
       return [];
     case 'child':
@@ -556,8 +557,8 @@ function findChildPropPathsWithPrevious(
         hasChangedDiscriminant ? undefined : pathWithKeys?.concat('value')
       );
     case 'object': {
-      let paths: ChildPropPathWithPrevious[] = [];
-      Object.keys(schema.fields).forEach(key => {
+      const paths: ChildPropPathWithPrevious[] = [];
+      for (const key in schema.fields) {
         paths.push(
           ...findChildPropPathsWithPrevious(
             value[key],
@@ -568,11 +569,11 @@ function findChildPropPathsWithPrevious(
             pathWithKeys?.concat(key)
           )
         );
-      });
+      }
       return paths;
     }
     case 'array': {
-      let paths: ChildPropPathWithPrevious[] = [];
+      const paths: ChildPropPathWithPrevious[] = [];
       const prevKeys = getKeysForArrayValue(prevValue);
       const keys = getKeysForArrayValue(value);
       for (const [i, val] of (value as unknown[]).entries()) {

From 8756714c6c338d8b9b0688f1249306b38d7be3cc Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 14:56:19 +1000
Subject: [PATCH 115/124] prefer normal for loops

---
 .../src/DocumentEditor/component-blocks/preview-props.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 1be37cf47b1..671863f8d63 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -166,14 +166,14 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
     object(schema, value, memoized, path, getInnerProp) {
       const fields: Record<string, GenericPreviewProps<ComponentSchema, ChildFieldElement>> = {};
 
-      Object.keys(schema.fields).forEach(key => {
+      for (const key in schema.fields) {
         fields[key] = getInnerProp(
           schema.fields[key],
           value[key],
           memoized.innerOnChanges[key],
           key
         );
-      });
+      }
 
       const previewProps: GenericPreviewProps<
         ObjectField<Record<string, ComponentSchema>>,

From 5cb6f9232be418dc5f7663d7827284a2dd07e5c7 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 15:03:54 +1000
Subject: [PATCH 116/124] prefer const

---
 .../src/DocumentEditor/component-blocks/index.tsx             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 7fd7beff0a9..7f924a47855 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -62,11 +62,13 @@ export function insertComponentBlock(
   componentBlocks: Record<string, ComponentBlock>,
   componentBlock: string
 ) {
-  let node = getInitialValue(componentBlock, componentBlocks[componentBlock]);
+  const node = getInitialValue(componentBlock, componentBlocks[componentBlock]);
   insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, node);
+
   const componentBlockEntry = Editor.above(editor, {
     match: node => node.type === 'component-block',
   });
+
   if (componentBlockEntry) {
     const start = Editor.start(editor, componentBlockEntry[1]);
     Transforms.setSelection(editor, { anchor: start, focus: start });

From 3e9beb173ce4b445f147a22ebed88cfb8b892aea Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 15:04:08 +1000
Subject: [PATCH 117/124] add comment and flatten goto

---
 .../DocumentEditor/component-blocks/index.tsx   | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 7f924a47855..8906a311ea3 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -238,14 +238,17 @@ export const ComponentBlocksElement = ({
               JSON.stringify(childNode.propPath)
             );
             assert(expectedIndex !== undefined);
-            if (idx !== expectedIndex) {
-              Transforms.moveNodes(editor, {
-                at: [...basePath, idx],
-                to: [...basePath, expectedIndex],
-              });
-              continue outer;
-            }
+            if (idx === expectedIndex) continue;
+
+            Transforms.moveNodes(editor, {
+              at: [...basePath, idx],
+              to: [...basePath, expectedIndex],
+            });
+
+            // start the for-loop again
+            continue outer;
           }
+
           break;
         }
       });

From a5e067e6017f837b7d93ccb9cd15873622e61d74 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Wed, 25 May 2022 16:02:50 +1000
Subject: [PATCH 118/124] Fix casing

---
 .../src/DocumentEditor/component-blocks/api.tsx               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 8085870ad90..4b2fd78a7cb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -111,10 +111,10 @@ export type RelationshipField<Many extends boolean> = {
 };
 
 export interface ObjectField<
-  fields extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
+  Fields extends Record<string, ComponentSchema> = Record<string, ComponentSchema>
 > {
   kind: 'object';
-  fields: fields;
+  fields: Fields;
 }
 
 export type ConditionalField<

From 56a2d40947ccfc40d65a70db4dd4e6b493450016 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 16:06:22 +1000
Subject: [PATCH 119/124] update changeset copy

---
 .changeset/silver-bottles-drum.md | 48 ++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/.changeset/silver-bottles-drum.md b/.changeset/silver-bottles-drum.md
index d76f5a235c0..2377fd6a248 100644
--- a/.changeset/silver-bottles-drum.md
+++ b/.changeset/silver-bottles-drum.md
@@ -2,17 +2,21 @@
 '@keystone-6/fields-document': major
 ---
 
-This release contains substantial changes to the component blocks API and the addition of array fields in component blocks. The breaking changes are entirely about defining components, _no data migration_ is required.
+This release contains substantial changes to the underlying document-editor component block interfaces, with the addition of array fields.
+The breaking changes are only for defining components, _no database migration is needed_.
 
-The main breaking changes that will affect all usages of component blocks are:
+The primary breaking changes for component blocks are:
 
-- In the arguments to the `component` function from `@keystone-6/fields-document/component-blocks`, the following have been renamed
+- For the arguments to the `component` function from `@keystone-6/fields-document/component-blocks`, the following properties have been renamed
   - `component` -> `preview`
   - `props` -> `schema`
-- To access the preview props for the inner fields on an object field, you need to access `.fields.something` instead of `.something`
-- The React element to render a child field is now at `props.element` instead of being `props`
+- When using the fields within your preview component - as defined by your component `.schema` (previous `.props`) - you now use `props.fields.{innerFieldName}` instead of `props.{innerFieldName}`.
+For example, `props.fields.title` instead of `props.title`.
+For a nested example, `props.fields.someObject.fields.title` instead of `props.someObject.title`.
 
-As an example, the change needed for updating the "Hero" component block that can be seen on https://keystonejs.com/docs/guides/document-field-demo are shown below
+- The React element to render for a child field is now `props.{innerFieldName}.element` instead of `props.{innerFieldName}`.
+
+As an example, the changes needed for updating the "Hero" component block as seen on https://keystonejs.com/docs/guides/document-field-demo is shown shown below
 
 ```diff
    hero: component({
@@ -67,9 +71,8 @@ As an example, the change needed for updating the "Hero" component block that ca
        imageSrc: fields.text({
 ```
 
-This release introduces array fields to component blocks which accept another field (like an object, conditional, form or child field) and allow storing many of that inner field.
-
-Here's an example of implementing a question & answers component block with the array field:
+Additionally this release introduces an array field `fields.array` for component block which represents an array of another field type, such as an object, conditional, form or other child field.
+See below for an example of a question & answers component block with the new array field:
 
 ```tsx
 import { fields, component, NotEditable } from '@keystone-6/fields-document/component-blocks';
@@ -126,7 +129,8 @@ component({
 });
 ```
 
-When there is a single child field within an array field, the document editor will allow pressing enter at the end of an element to add/delete at the start to delete, this allows creating editing experiences similar to the built-in lists. For example, here's a checkbox list:
+Similar to the built-in document-editor lists,  when an array field has only 1 element,  pressing enter adds a new element and pressing delete removes an element.
+For example, here's a list of checkboxes:
 
 ```tsx
 /** @jsxRuntime classic */
@@ -146,12 +150,13 @@ component({
     ),
   },
   chromeless: true,
-  preview: function MyList(props) {
+  preview: (props) => {
     useEffect(() => {
       if (!props.fields.children.elements.length) {
         props.fields.children.onChange([{ key: undefined }]);
       }
     });
+
     return (
       <ul css={{ padding: 0 }}>
         {props.fields.children.elements.map(element => (
@@ -178,18 +183,22 @@ component({
 });
 ```
 
-There are also some smaller improvements:
+Finally, some other changes introduced in this release are:
 
-- All preview props now have an `onChange` function so that you can update more than one field in a component at a time
-- All preview props now have a `schema` property to access the schema for those preview props
-- Preview props are now referentially stable between renders when their value is stable
+- Each of the `preview` props `fields` (and their inner fields, if any) now have an `onChange` function so that you can update more than one field in a component at a time
+- Each of the `preview` props `fields` (and their inner fields, if any) now have a `schema` property to access their respective schema at that level
+- Generally, preview props are now referentially stable between renders when their value is stable
 
-And other breaking changes that are unlikely to affect most users:
+Some internal breaking changes that are unlikely to affect users are:
 
 - The `ComponentPropField` type is now named `ComponentSchema`
-- `FormField`'s are constrained to no longer allow storing `undefined`. They must be a string, number, boolean, null, array of one of these or object with one of these. This is required so that they can be represented within an array
-- In the `props` object on a component block node, child fields are now stored as `null` instead of undefined. This is required so that they can be represented within an array. Loading documents that stored `undefined` instead of `null` for a child field will still work though, no data migration is required.
-- `ObjectField` stores the fields on a property named `fields` instead of `value`
+- `FormField`'s are now constrained to prevent storing `undefined`.
+They must be a string, number, boolean, null, array of one of these or an object with one of these.
+This is required so that they can be represented within a JSON array.
+- Within the database, for the `props` object on a component-block node, child fields are now stored as `null` instead of `undefined`.
+This is required so that they can be represented within a JSON array.
+Component-block nodes that previously had `undefined` instead of `null` for a child field will continue to work though, no data migration is required.
+- The `ObjectField` type now has inner fields on a property named `fields` instead of `value`
 - The `ConditionalField` type now has two type parameters that look like this:
   ```ts
   type ConditionalField<
@@ -199,4 +208,3 @@ And other breaking changes that are unlikely to affect most users:
     }
   > = ...
   ```
-

From 920e99f855312b1e9215838995c645fa6238eca2 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 16:06:42 +1000
Subject: [PATCH 120/124] dont shadow types for React component names, ignore
 eslint

---
 .../component-blocks/form-from-preview.tsx        | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

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 01b08c2b782..8f740c592fa 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
@@ -28,7 +28,7 @@ const fieldRenderers: {
     }
   ) => ReactElement | null;
 } = {
-  array: function ArrayField(props) {
+  array (props) {
     return (
       <Stack gap="medium">
         <OrderableList {...props}>
@@ -47,7 +47,8 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  relationship: function RelationshipField({ schema, autoFocus, onChange, value }) {
+  relationship ({ schema, autoFocus, onChange, value }) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const keystone = useKeystone();
     return (
       <FieldContainer>
@@ -88,7 +89,7 @@ const fieldRenderers: {
     );
   },
   child: () => null,
-  form: function FormField({ schema, autoFocus, forceValidation, onChange, value }) {
+  form ({ schema, autoFocus, forceValidation, onChange, value }) {
     return (
       <schema.Input
         autoFocus={!!autoFocus}
@@ -98,7 +99,7 @@ const fieldRenderers: {
       />
     );
   },
-  object: function ObjectField({ schema, autoFocus, fields }) {
+  object ({ schema, autoFocus, fields }) {
     const firstFocusable = autoFocus ? findFocusableObjectFieldKey(schema) : undefined;
     return (
       <Stack gap="xlarge">
@@ -115,11 +116,13 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  conditional: function ConditionalField({ schema, autoFocus, discriminant, onChange, value }) {
+  conditional ({ schema, autoFocus, discriminant, onChange, value }) {
     const schemaDiscriminant = schema.discriminant as FormField<string | boolean, unknown>;
     return (
       <Stack gap="xlarge">
-        {useMemo(
+        {
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          useMemo(
           () => (
             <schemaDiscriminant.Input
               autoFocus={!!autoFocus}

From 3d40234b44789df9d6a8679b36d19af19815689c Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 16:07:55 +1000
Subject: [PATCH 121/124] yarn format

---
 .../component-blocks/form-from-preview.tsx    | 45 +++++++++----------
 .../with-component-blocks.tsx                 |  3 +-
 2 files changed, 23 insertions(+), 25 deletions(-)

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 8f740c592fa..894ff3a7042 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
@@ -21,14 +21,14 @@ import {
 import { assertNever } from './utils';
 
 const fieldRenderers: {
-  [Key in ComponentSchema['kind']]: (props:
-    GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
+  [Key in ComponentSchema['kind']]: (
+    props: GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
       autoFocus?: boolean;
       forceValidation?: boolean;
     }
   ) => ReactElement | null;
 } = {
-  array (props) {
+  array(props) {
     return (
       <Stack gap="medium">
         <OrderableList {...props}>
@@ -47,7 +47,7 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  relationship ({ schema, autoFocus, onChange, value }) {
+  relationship({ schema, autoFocus, onChange, value }) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const keystone = useKeystone();
     return (
@@ -76,9 +76,7 @@ const fieldRenderers: {
                   value: value
                     ? {
                         ...(value as RelationshipData),
-                        label:
-                          (value as RelationshipData).label ||
-                          (value as RelationshipData).id,
+                        label: (value as RelationshipData).label || (value as RelationshipData).id,
                       }
                     : null,
                   onChange: onChange,
@@ -89,7 +87,7 @@ const fieldRenderers: {
     );
   },
   child: () => null,
-  form ({ schema, autoFocus, forceValidation, onChange, value }) {
+  form({ schema, autoFocus, forceValidation, onChange, value }) {
     return (
       <schema.Input
         autoFocus={!!autoFocus}
@@ -99,7 +97,7 @@ const fieldRenderers: {
       />
     );
   },
-  object ({ schema, autoFocus, fields }) {
+  object({ schema, autoFocus, fields }) {
     const firstFocusable = autoFocus ? findFocusableObjectFieldKey(schema) : undefined;
     return (
       <Stack gap="xlarge">
@@ -116,26 +114,25 @@ const fieldRenderers: {
       </Stack>
     );
   },
-  conditional ({ schema, autoFocus, discriminant, onChange, value }) {
+  conditional({ schema, autoFocus, discriminant, onChange, value }) {
     const schemaDiscriminant = schema.discriminant as FormField<string | boolean, unknown>;
     return (
       <Stack gap="xlarge">
         {
           // eslint-disable-next-line react-hooks/rules-of-hooks
           useMemo(
-          () => (
-            <schemaDiscriminant.Input
-              autoFocus={!!autoFocus}
-              value={discriminant}
-              onChange={onChange}
-              forceValidation={false}
-            />
-          ),
-          [autoFocus, schemaDiscriminant, discriminant, onChange]
-        )}
-        {isNonChildFieldPreviewProps(value) && (
-          <FormValueContentFromPreviewProps {...value} />
-        )}
+            () => (
+              <schemaDiscriminant.Input
+                autoFocus={!!autoFocus}
+                value={discriminant}
+                onChange={onChange}
+                forceValidation={false}
+              />
+            ),
+            [autoFocus, schemaDiscriminant, discriminant, onChange]
+          )
+        }
+        {isNonChildFieldPreviewProps(value) && <FormValueContentFromPreviewProps {...value} />}
       </Stack>
     );
   },
@@ -161,7 +158,7 @@ export const FormValueContentFromPreviewProps = memo(function FormValueContentFr
   }
 ) {
   const Comp = fieldRenderers[props.schema.kind];
-  return <Comp {...props as any} />;
+  return <Comp {...(props as any)} />;
 });
 
 const OrderableItemInForm = memo(function OrderableItemInForm(
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index e830eefe737..5a38d3d67b0 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -458,7 +458,8 @@ export function withComponentBlocks(
               // the generic allowedChildren normalization
               childNode.type !== 'component-inline-prop' &&
               childNode.type !== 'component-block-prop'
-            ) continue;
+            )
+              continue;
 
             const childPath = [...path, index];
             const stringifiedPropPath = JSON.stringify(childNode.propPath);

From 39757d36a0b9995995863a1c9c22e7dc01417b18 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 16:21:16 +1000
Subject: [PATCH 122/124] unnest the components, revert to functions

---
 .../component-blocks/form-from-preview.tsx    | 237 +++++++++---------
 1 file changed, 121 insertions(+), 116 deletions(-)

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 894ff3a7042..cf5e7996711 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
@@ -6,7 +6,6 @@ import { Button } from '@keystone-ui/button';
 import { jsx, Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
 import { memo, useMemo } from 'react';
-import { ReactElement } from 'react';
 import { DragHandle, OrderableItem, OrderableList } from '../primitives/orderable';
 import {
   ArrayField,
@@ -20,123 +19,120 @@ import {
 } from './api';
 import { assertNever } from './utils';
 
-const fieldRenderers: {
-  [Key in ComponentSchema['kind']]: (
-    props: GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
-      autoFocus?: boolean;
-      forceValidation?: boolean;
-    }
-  ) => ReactElement | null;
-} = {
-  array(props) {
-    return (
-      <Stack gap="medium">
-        <OrderableList {...props}>
-          {props.elements.map(val => {
-            return <OrderableItemInForm elementKey={val.key} {...val} />;
-          })}
-        </OrderableList>
-        <Button
-          autoFocus={props.autoFocus}
-          onClick={() => {
-            props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
-          }}
-        >
-          Add
-        </Button>
-      </Stack>
-    );
-  },
-  relationship({ schema, autoFocus, onChange, value }) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const keystone = useKeystone();
-    return (
-      <FieldContainer>
-        <FieldLabel>{schema.label}</FieldLabel>
-        <RelationshipSelect
-          autoFocus={autoFocus}
-          controlShouldRenderValue
-          isDisabled={false}
-          list={keystone.adminMeta.lists[schema.listKey]}
-          extraSelection={schema.selection || ''}
-          portalMenu
-          state={
-            schema.many
-              ? {
-                  kind: 'many',
-                  value: (value as RelationshipData[]).map(x => ({
-                    id: x.id,
-                    label: x.label || x.id,
-                    data: x.data,
-                  })),
-                  onChange: onChange,
-                }
-              : {
-                  kind: 'one',
-                  value: value
-                    ? {
-                        ...(value as RelationshipData),
-                        label: (value as RelationshipData).label || (value as RelationshipData).id,
-                      }
-                    : null,
-                  onChange: onChange,
-                }
-          }
-        />
-      </FieldContainer>
-    );
-  },
-  child: () => null,
-  form({ schema, autoFocus, forceValidation, onChange, value }) {
-    return (
-      <schema.Input
-        autoFocus={!!autoFocus}
-        value={value}
-        onChange={onChange}
-        forceValidation={!!forceValidation}
+type DefaultFieldProps<Key> = GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
+  autoFocus?: boolean;
+  forceValidation?: boolean;
+};
+
+function ArrayFieldPreview(props: DefaultFieldProps<'array'>) {
+  return (
+    <Stack gap="medium">
+      <OrderableList {...props}>
+        {props.elements.map(val => {
+          return <OrderableItemInForm elementKey={val.key} {...val} />;
+        })}
+      </OrderableList>
+      <Button
+        autoFocus={props.autoFocus}
+        onClick={() => {
+          props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
+        }}
+      >
+        Add
+      </Button>
+    </Stack>
+  );
+}
+
+function RelationshipFieldPreview({ schema, autoFocus, onChange, value }: DefaultFieldProps<'relationship'>) {
+  const keystone = useKeystone();
+  return (
+    <FieldContainer>
+      <FieldLabel>{schema.label}</FieldLabel>
+      <RelationshipSelect
+        autoFocus={autoFocus}
+        controlShouldRenderValue
+        isDisabled={false}
+        list={keystone.adminMeta.lists[schema.listKey]}
+        extraSelection={schema.selection || ''}
+        portalMenu
+        state={
+          schema.many
+            ? {
+                kind: 'many',
+                value: (value as RelationshipData[]).map(x => ({
+                  id: x.id,
+                  label: x.label || x.id,
+                  data: x.data,
+                })),
+                onChange: onChange,
+              }
+            : {
+                kind: 'one',
+                value: value
+                  ? {
+                      ...(value as RelationshipData),
+                      label: (value as RelationshipData).label || (value as RelationshipData).id,
+                    }
+                  : null,
+                onChange: onChange,
+              }
+        }
       />
-    );
-  },
-  object({ schema, autoFocus, fields }) {
-    const firstFocusable = autoFocus ? findFocusableObjectFieldKey(schema) : undefined;
-    return (
-      <Stack gap="xlarge">
-        {Object.entries(fields).map(
-          ([key, propVal]) =>
-            isNonChildFieldPreviewProps(propVal) && (
-              <FormValueContentFromPreviewProps
-                autoFocus={key === firstFocusable}
-                key={key}
-                {...propVal}
-              />
-            )
-        )}
-      </Stack>
-    );
-  },
-  conditional({ schema, autoFocus, discriminant, onChange, value }) {
-    const schemaDiscriminant = schema.discriminant as FormField<string | boolean, unknown>;
-    return (
-      <Stack gap="xlarge">
-        {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          useMemo(
-            () => (
-              <schemaDiscriminant.Input
-                autoFocus={!!autoFocus}
-                value={discriminant}
-                onChange={onChange}
-                forceValidation={false}
-              />
-            ),
-            [autoFocus, schemaDiscriminant, discriminant, onChange]
+    </FieldContainer>
+  );
+}
+
+function FormFieldPreview({ schema, autoFocus, forceValidation, onChange, value }: DefaultFieldProps<'form'>) {
+  return (
+    <schema.Input
+      autoFocus={!!autoFocus}
+      value={value}
+      onChange={onChange}
+      forceValidation={!!forceValidation}
+    />
+  );
+}
+
+function ObjectFieldPreview({ schema, autoFocus, fields }: DefaultFieldProps<'object'>) {
+  const firstFocusable = autoFocus ? findFocusableObjectFieldKey(schema) : undefined;
+  return (
+    <Stack gap="xlarge">
+      {Object.entries(fields).map(
+        ([key, propVal]) =>
+          isNonChildFieldPreviewProps(propVal) && (
+            <FormValueContentFromPreviewProps
+              autoFocus={key === firstFocusable}
+              key={key}
+              {...propVal}
+            />
           )
-        }
-        {isNonChildFieldPreviewProps(value) && <FormValueContentFromPreviewProps {...value} />}
-      </Stack>
-    );
-  },
-};
+      )}
+    </Stack>
+  );
+}
+
+function ConditionalFieldPreview({ schema, autoFocus, discriminant, onChange, value }: DefaultFieldProps<'conditional'>) {
+  const schemaDiscriminant = schema.discriminant as FormField<string | boolean, unknown>;
+  return (
+    <Stack gap="xlarge">
+      {
+        useMemo(
+          () => (
+            <schemaDiscriminant.Input
+              autoFocus={!!autoFocus}
+              value={discriminant}
+              onChange={onChange}
+              forceValidation={false}
+            />
+          ),
+          [autoFocus, schemaDiscriminant, discriminant, onChange]
+        )
+      }
+      {isNonChildFieldPreviewProps(value) && <FormValueContentFromPreviewProps {...value} />}
+    </Stack>
+  );
+}
 
 export type NonChildFieldComponentSchema =
   | FormField<any, any>
@@ -151,6 +147,15 @@ function isNonChildFieldPreviewProps(
   return props.schema.kind !== 'child';
 }
 
+const fieldRenderers = {
+  array: ArrayFieldPreview,
+  relationship: RelationshipFieldPreview,
+  child: () => null,
+  form: FormFieldPreview,
+  object: ObjectFieldPreview,
+  conditional: ConditionalFieldPreview
+};
+
 export const FormValueContentFromPreviewProps = memo(function FormValueContentFromPreview(
   props: GenericPreviewProps<NonChildFieldComponentSchema, unknown> & {
     autoFocus?: boolean;

From 1625f5cb9a95e4e14308fd9fa99b67782a05ef08 Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 16:29:30 +1000
Subject: [PATCH 123/124] prefer for-of iteration of Object.keys

---
 .../src/DocumentEditor/component-blocks/index.tsx           | 2 +-
 .../src/DocumentEditor/component-blocks/initial-values.ts   | 6 +++---
 .../src/DocumentEditor/component-blocks/preview-props.tsx   | 2 +-
 tests/api-tests/utils.ts                                    | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
index 8906a311ea3..594ede91aff 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/index.tsx
@@ -563,7 +563,7 @@ function findChildPropPathsWithPrevious(
       );
     case 'object': {
       const paths: ChildPropPathWithPrevious[] = [];
-      for (const key in schema.fields) {
+      for (const key of Object.keys(schema.fields)) {
         paths.push(
           ...findChildPropPathsWithPrevious(
             value[key],
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
index d660a45da09..510dc300bd3 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/initial-values.ts
@@ -37,7 +37,7 @@ export function getInitialPropsValue(schema: ComponentSchema): any {
     }
     case 'object': {
       const obj: Record<string, any> = {};
-      for (const key in schema.fields) {
+      for (const key of Object.keys(schema.fields)) {
         obj[key] = getInitialPropsValue(schema.fields[key]);
       }
       return obj;
@@ -73,7 +73,7 @@ export function getInitialPropsValueFromInitializer(
     }
     case 'object': {
       const obj: Record<string, any> = {};
-      for (const key in schema.fields) {
+      for (const key of Object.keys(schema.fields)) {
         obj[key] = getInitialPropsValueFromInitializer(
           schema.fields[key],
           initializer === undefined ? undefined : initializer[key]
@@ -118,7 +118,7 @@ export function updateValue(schema: ComponentSchema, currentValue: any, updater:
     }
     case 'object': {
       const obj: Record<string, any> = {};
-      for (const key in schema.fields) {
+      for (const key of Object.keys(schema.fields)) {
         obj[key] = updateValue(schema.fields[key], currentValue[key], updater[key]);
       }
       return obj;
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
index 671863f8d63..5535b3d3579 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/preview-props.tsx
@@ -166,7 +166,7 @@ export function createGetPreviewProps<Schema extends ComponentSchema, ChildField
     object(schema, value, memoized, path, getInnerProp) {
       const fields: Record<string, GenericPreviewProps<ComponentSchema, ChildFieldElement>> = {};
 
-      for (const key in schema.fields) {
+      for (const key of Object.keys(schema.fields)) {
         fields[key] = getInnerProp(
           schema.fields[key],
           value[key],
diff --git a/tests/api-tests/utils.ts b/tests/api-tests/utils.ts
index 171c838ff70..1c68afc4642 100644
--- a/tests/api-tests/utils.ts
+++ b/tests/api-tests/utils.ts
@@ -259,7 +259,7 @@ export async function seed<T extends Record<keyof T, Record<string, unknown>[]>>
   initialData: T
 ) {
   const results: any = {};
-  for (const listKey in initialData) {
+  for (const listKey of Object.keys(initialData)) {
     results[listKey as keyof T] = await context.sudo().query[listKey].createMany({
       data: initialData[listKey as keyof T],
     });

From efa2c79ade59a9f8fed6cbf15030e7edb8c6a5db Mon Sep 17 00:00:00 2001
From: Daniel Cousens <dcousens@users.noreply.github.com>
Date: Wed, 25 May 2022 16:30:23 +1000
Subject: [PATCH 124/124] yarn format

---
 .../component-blocks/form-from-preview.tsx    | 54 ++++++++++++-------
 .../with-component-blocks.tsx                 |  3 +-
 2 files changed, 38 insertions(+), 19 deletions(-)

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 cf5e7996711..d51896c2044 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
@@ -19,7 +19,10 @@ import {
 } from './api';
 import { assertNever } from './utils';
 
-type DefaultFieldProps<Key> = GenericPreviewProps<Extract<ComponentSchema, { kind: Key }>, unknown> & {
+type DefaultFieldProps<Key> = GenericPreviewProps<
+  Extract<ComponentSchema, { kind: Key }>,
+  unknown
+> & {
   autoFocus?: boolean;
   forceValidation?: boolean;
 };
@@ -44,7 +47,12 @@ function ArrayFieldPreview(props: DefaultFieldProps<'array'>) {
   );
 }
 
-function RelationshipFieldPreview({ schema, autoFocus, onChange, value }: DefaultFieldProps<'relationship'>) {
+function RelationshipFieldPreview({
+  schema,
+  autoFocus,
+  onChange,
+  value,
+}: DefaultFieldProps<'relationship'>) {
   const keystone = useKeystone();
   return (
     <FieldContainer>
@@ -83,7 +91,13 @@ function RelationshipFieldPreview({ schema, autoFocus, onChange, value }: Defaul
   );
 }
 
-function FormFieldPreview({ schema, autoFocus, forceValidation, onChange, value }: DefaultFieldProps<'form'>) {
+function FormFieldPreview({
+  schema,
+  autoFocus,
+  forceValidation,
+  onChange,
+  value,
+}: DefaultFieldProps<'form'>) {
   return (
     <schema.Input
       autoFocus={!!autoFocus}
@@ -112,23 +126,27 @@ function ObjectFieldPreview({ schema, autoFocus, fields }: DefaultFieldProps<'ob
   );
 }
 
-function ConditionalFieldPreview({ schema, autoFocus, discriminant, onChange, value }: DefaultFieldProps<'conditional'>) {
+function ConditionalFieldPreview({
+  schema,
+  autoFocus,
+  discriminant,
+  onChange,
+  value,
+}: DefaultFieldProps<'conditional'>) {
   const schemaDiscriminant = schema.discriminant as FormField<string | boolean, unknown>;
   return (
     <Stack gap="xlarge">
-      {
-        useMemo(
-          () => (
-            <schemaDiscriminant.Input
-              autoFocus={!!autoFocus}
-              value={discriminant}
-              onChange={onChange}
-              forceValidation={false}
-            />
-          ),
-          [autoFocus, schemaDiscriminant, discriminant, onChange]
-        )
-      }
+      {useMemo(
+        () => (
+          <schemaDiscriminant.Input
+            autoFocus={!!autoFocus}
+            value={discriminant}
+            onChange={onChange}
+            forceValidation={false}
+          />
+        ),
+        [autoFocus, schemaDiscriminant, discriminant, onChange]
+      )}
       {isNonChildFieldPreviewProps(value) && <FormValueContentFromPreviewProps {...value} />}
     </Stack>
   );
@@ -153,7 +171,7 @@ const fieldRenderers = {
   child: () => null,
   form: FormFieldPreview,
   object: ObjectFieldPreview,
-  conditional: ConditionalFieldPreview
+  conditional: ConditionalFieldPreview,
 };
 
 export const FormValueContentFromPreviewProps = memo(function FormValueContentFromPreview(
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
index 5a38d3d67b0..1c9ae7423f1 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/with-component-blocks.tsx
@@ -458,8 +458,9 @@ export function withComponentBlocks(
               // the generic allowedChildren normalization
               childNode.type !== 'component-inline-prop' &&
               childNode.type !== 'component-block-prop'
-            )
+            ) {
               continue;
+            }
 
             const childPath = [...path, index];
             const stringifiedPropPath = JSON.stringify(childNode.propPath);