From b0fed8a831f2de751de2e579adccee2cc3ad3b30 Mon Sep 17 00:00:00 2001
From: Steven Le <s@blinkk.com>
Date: Thu, 22 Feb 2024 08:50:26 -0800
Subject: [PATCH] feat: add reference field (#253)

---
 .changeset/tiny-scissors-destroy.md           |   5 +
 examples/blog/collections/BlogPosts.schema.ts |  12 +
 examples/blog/root-cms.d.ts                   |  19 +-
 packages/create-root/src/root-version.ts      |   2 +-
 .../root-cms/cli/commands/generate-types.ts   |  15 +-
 packages/root-cms/core/schema.ts              |  24 +-
 .../ui/components/DocEditor/DocEditor.tsx     | 687 +-----------------
 .../DocEditor/fields/BooleanField.tsx         |  39 +
 .../DocEditor/fields/DateTimeField.tsx        |  59 ++
 .../components/DocEditor/fields/FieldProps.ts |  13 +
 .../components/DocEditor/fields/FileField.tsx | 167 +++++
 .../DocEditor/fields/ImageField.tsx           | 210 ++++++
 .../DocEditor/fields/MultiSelectField.tsx     |  53 ++
 .../DocEditor/fields/ReferenceField.css       |  63 ++
 .../DocEditor/fields/ReferenceField.tsx       | 171 +++++
 .../DocEditor/fields/RichTextField.tsx        |  37 +
 .../DocEditor/fields/SelectField.tsx          |  50 ++
 .../DocEditor/fields/StringField.tsx          |  51 ++
 .../DocPickerModal/DocPickerModal.css         |  58 ++
 .../DocPickerModal/DocPickerModal.tsx         | 187 +++++
 .../LocalizationModal/LocalizationModal.tsx   |   4 +
 packages/root-cms/ui/hooks/useDocsList.ts     |  57 ++
 .../pages/CollectionPage/CollectionPage.tsx   |  62 +-
 packages/root-cms/ui/ui.tsx                   |  26 +-
 24 files changed, 1331 insertions(+), 740 deletions(-)
 create mode 100644 .changeset/tiny-scissors-destroy.md
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/BooleanField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/DateTimeField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/FieldProps.ts
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/FileField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/ImageField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/MultiSelectField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/ReferenceField.css
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/ReferenceField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/SelectField.tsx
 create mode 100644 packages/root-cms/ui/components/DocEditor/fields/StringField.tsx
 create mode 100644 packages/root-cms/ui/components/DocPickerModal/DocPickerModal.css
 create mode 100644 packages/root-cms/ui/components/DocPickerModal/DocPickerModal.tsx
 create mode 100644 packages/root-cms/ui/hooks/useDocsList.ts

diff --git a/.changeset/tiny-scissors-destroy.md b/.changeset/tiny-scissors-destroy.md
new file mode 100644
index 00000000..f469c2d1
--- /dev/null
+++ b/.changeset/tiny-scissors-destroy.md
@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': minor
+---
+
+feat: add reference field
diff --git a/examples/blog/collections/BlogPosts.schema.ts b/examples/blog/collections/BlogPosts.schema.ts
index a0748709..daedaaeb 100644
--- a/examples/blog/collections/BlogPosts.schema.ts
+++ b/examples/blog/collections/BlogPosts.schema.ts
@@ -95,6 +95,18 @@ export default schema.collection({
           label: 'Published Date Override',
           help: 'Override for the "Published" date.'
         }),
+        schema.reference({
+          id: 'parentPost',
+          label: 'Parent Post',
+          help: 'Optional parent post for breadcrumbs.',
+          collections: ['BlogPosts'],
+        }),
+        schema.array({
+          id: 'relatedPosts',
+          label: 'Related Posts',
+          help: 'Suggest related blog posts to read.',
+          of: schema.reference({collections: ['BlogPosts', 'BlogPostsSandbox']}),
+        }),
       ],
     }),
   ],
diff --git a/examples/blog/root-cms.d.ts b/examples/blog/root-cms.d.ts
index 3bfe8c86..dd4c7d89 100644
--- a/examples/blog/root-cms.d.ts
+++ b/examples/blog/root-cms.d.ts
@@ -20,11 +20,20 @@ export interface RootCMSRichText {
   blocks: RootCMSRichTextBlock[];
 }
 
+export interface RootCMSReference {
+  /** The id of the doc, e.g. "Pages/foo-bar". */
+  id: string;
+  /** The collection id of the doc, e.g. "Pages". */
+  collection: string;
+  /** The slug of the doc, e.g. "foo-bar". */
+  slug: string;
+}
+
 export interface RootCMSDoc<Fields extends {}> {
   /** The id of the doc, e.g. "Pages/foo-bar". */
   id: string;
   /** The collection id of the doc, e.g. "Pages". */
-  collectionId: string;
+  collection: string;
   /** The slug of the doc, e.g. "foo-bar". */
   slug: string;
   /** System-level metadata. */
@@ -80,6 +89,10 @@ export interface BlogPostsFields {
     };
     /** Published Date Override. Override for the "Published" date. */
     publishedAtOverride?: number;
+    /** Parent Post. Optional parent post for breadcrumbs. */
+    parentPost?: RootCMSReference;
+    /** Related Posts. Suggest related blog posts to read. */
+    relatedPosts?: RootCMSReference[];
   };
 }
 
@@ -123,6 +136,10 @@ export interface BlogPostsSandboxFields {
     };
     /** Published Date Override. Override for the "Published" date. */
     publishedAtOverride?: number;
+    /** Parent Post. Optional parent post for breadcrumbs. */
+    parentPost?: RootCMSReference;
+    /** Related Posts. Suggest related blog posts to read. */
+    relatedPosts?: RootCMSReference[];
   };
 }
 
diff --git a/packages/create-root/src/root-version.ts b/packages/create-root/src/root-version.ts
index d474a53e..41e1ef20 100644
--- a/packages/create-root/src/root-version.ts
+++ b/packages/create-root/src/root-version.ts
@@ -1,2 +1,2 @@
 // This file is autogenerated by update-root-version.mjs.
-export const ROOT_VERSION = '1.0.0-rc.24';
+export const ROOT_VERSION = '1.0.0-rc.25';
diff --git a/packages/root-cms/cli/commands/generate-types.ts b/packages/root-cms/cli/commands/generate-types.ts
index 37f8dd14..2ff988ee 100644
--- a/packages/root-cms/cli/commands/generate-types.ts
+++ b/packages/root-cms/cli/commands/generate-types.ts
@@ -49,11 +49,20 @@ export interface RootCMSRichText {
   blocks: RootCMSRichTextBlock[];
 }
 
+export interface RootCMSReference {
+  /** The id of the doc, e.g. "Pages/foo-bar". */
+  id: string;
+  /** The collection id of the doc, e.g. "Pages". */
+  collection: string;
+  /** The slug of the doc, e.g. "foo-bar". */
+  slug: string;
+}
+
 export interface RootCMSDoc<Fields extends {}> {
   /** The id of the doc, e.g. "Pages/foo-bar". */
   id: string;
   /** The collection id of the doc, e.g. "Pages". */
-  collectionId: string;
+  collection: string;
   /** The slug of the doc, e.g. "foo-bar". */
   slug: string;
   /** System-level metadata. */
@@ -142,6 +151,10 @@ function fieldType(field: Field): dom.Type {
     const oneofType = dom.create.namedTypeReference('RootCMSOneOf');
     return oneofType;
   }
+  if (field.type === 'reference') {
+    const richtextType = dom.create.namedTypeReference('RootCMSReference');
+    return richtextType;
+  }
   if (field.type === 'richtext') {
     const richtextType = dom.create.namedTypeReference('RootCMSRichText');
     return richtextType;
diff --git a/packages/root-cms/core/schema.ts b/packages/root-cms/core/schema.ts
index cfa99944..c2b8c983 100644
--- a/packages/root-cms/core/schema.ts
+++ b/packages/root-cms/core/schema.ts
@@ -176,6 +176,20 @@ export function richtext(field: Omit<RichTextField, 'type'>): RichTextField {
   return {...field, type: 'richtext'};
 }
 
+export type ReferenceField = CommonFieldProps & {
+  type: 'reference';
+  /** List of collection ids the reference can be chosen from. */
+  collections?: string[];
+  /** Initial collection to show when picking a reference. */
+  initialCollection?: string;
+  /** Label for the button. Defaults to "Select". */
+  buttonLabel?: string;
+};
+
+export function reference(field: Omit<ReferenceField, 'type'>): ReferenceField {
+  return {...field, type: 'reference'};
+}
+
 export type Field =
   | StringField
   | NumberField
@@ -189,7 +203,8 @@ export type Field =
   | ObjectField
   | ArrayField
   | OneOfField
-  | RichTextField;
+  | RichTextField
+  | ReferenceField;
 
 /**
  * Similar to {@link Field} but with a required `id`.
@@ -197,7 +212,12 @@ export type Field =
  */
 export type FieldWithId = Field;
 
-export type ObjectLikeField = ImageField | FileField | ObjectField | OneOfField;
+export type ObjectLikeField =
+  | ImageField
+  | FileField
+  | ObjectField
+  | OneOfField
+  | ReferenceField;
 
 export interface Schema {
   name: string;
diff --git a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
index d65d8ca1..661364e0 100644
--- a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
+++ b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
@@ -1,16 +1,4 @@
-import {
-  ActionIcon,
-  Button,
-  Checkbox,
-  LoadingOverlay,
-  Menu,
-  MultiSelect,
-  Select,
-  Textarea,
-  TextInput,
-  Tooltip,
-} from '@mantine/core';
-import {showNotification} from '@mantine/notifications';
+import {ActionIcon, Button, LoadingOverlay, Menu, Select} from '@mantine/core';
 import {
   IconBraces,
   IconCircleArrowDown,
@@ -18,8 +6,6 @@ import {
   IconCirclePlus,
   IconCopy,
   IconDotsVertical,
-  IconFileUpload,
-  IconPhotoUp,
   IconPlanet,
   IconRocket,
   IconRowInsertBottom,
@@ -27,9 +13,7 @@ import {
   IconTrash,
   IconTriangleFilled,
 } from '@tabler/icons-preact';
-import {Timestamp} from 'firebase/firestore';
-import {ChangeEvent} from 'preact/compat';
-import {useEffect, useReducer, useRef, useState} from 'preact/hooks';
+import {useEffect, useReducer, useState} from 'preact/hooks';
 import {route} from 'preact-router';
 
 import * as schema from '../../../core/schema.js';
@@ -38,8 +22,6 @@ import {
   SaveState,
   UseDraftHook,
 } from '../../hooks/useDraft.js';
-import {joinClassNames} from '../../utils/classes.js';
-import {uploadFileToGCS} from '../../utils/gcs.js';
 import {flattenNestedKeys} from '../../utils/objects.js';
 import {getPlaceholderKeys, strFormat} from '../../utils/str-format.js';
 import {
@@ -51,10 +33,16 @@ import {useEditJsonModal} from '../EditJsonModal/EditJsonModal.js';
 import {useLocalizationModal} from '../LocalizationModal/LocalizationModal.js';
 import {usePublishDocModal} from '../PublishDocModal/PublishDocModal.js';
 import './DocEditor.css';
-import {
-  RichTextData,
-  RichTextEditor,
-} from '../RichTextEditor/RichTextEditor.js';
+import {BooleanField} from './fields/BooleanField.js';
+import {DateTimeField} from './fields/DateTimeField.js';
+import {FieldProps} from './fields/FieldProps.js';
+import {FileField} from './fields/FileField.js';
+import {ImageField} from './fields/ImageField.js';
+import {MultiSelectField} from './fields/MultiSelectField.js';
+import {ReferenceField} from './fields/ReferenceField.js';
+import {RichTextField} from './fields/RichTextField.js';
+import {SelectField} from './fields/SelectField.js';
+import {StringField} from './fields/StringField.js';
 
 interface DocEditorProps {
   docId: string;
@@ -149,17 +137,6 @@ export function DocEditor(props: DocEditorProps) {
   );
 }
 
-interface FieldProps {
-  collection: schema.Collection;
-  field: schema.Field;
-  level?: number;
-  hideHeader?: boolean;
-  onChange?: (newValue: any) => void;
-  shallowKey: string;
-  deepKey: string;
-  draft: DraftController;
-}
-
 DocEditor.Field = (props: FieldProps) => {
   const field = props.field;
   const level = props.level ?? 0;
@@ -184,25 +161,27 @@ DocEditor.Field = (props: FieldProps) => {
         {field.type === 'array' ? (
           <DocEditor.ArrayField {...props} />
         ) : field.type === 'boolean' ? (
-          <DocEditor.BooleanField {...props} />
+          <BooleanField {...props} />
         ) : field.type === 'datetime' ? (
-          <DocEditor.DateTimeField {...props} />
+          <DateTimeField {...props} />
         ) : field.type === 'file' ? (
-          <DocEditor.FileField {...props} />
+          <FileField {...props} />
         ) : field.type === 'image' ? (
-          <DocEditor.ImageField {...props} />
+          <ImageField {...props} />
         ) : field.type === 'multiselect' ? (
-          <DocEditor.MultiSelectField {...props} />
+          <MultiSelectField {...props} />
         ) : field.type === 'object' ? (
           <DocEditor.ObjectField {...props} />
         ) : field.type === 'oneof' ? (
           <DocEditor.OneOfField {...props} />
+        ) : field.type === 'reference' ? (
+          <ReferenceField {...props} />
         ) : field.type === 'richtext' ? (
-          <DocEditor.RichTextField {...props} />
+          <RichTextField {...props} />
         ) : field.type === 'select' ? (
-          <DocEditor.SelectField {...props} />
+          <SelectField {...props} />
         ) : field.type === 'string' ? (
-          <DocEditor.StringField {...props} />
+          <StringField {...props} />
         ) : (
           <div className="DocEditor__field__input__unknown">
             Unknown field type: {field.type}
@@ -213,442 +192,6 @@ DocEditor.Field = (props: FieldProps) => {
   );
 };
 
-DocEditor.StringField = (props: FieldProps) => {
-  const field = props.field as schema.StringField;
-  const [value, setValue] = useState('');
-
-  function onChange(newValue: string) {
-    setValue(newValue);
-    props.draft.updateKey(props.deepKey, newValue);
-  }
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: string) => {
-        setValue(newValue);
-      }
-    );
-    return unsubscribe;
-  }, []);
-
-  if (field.variant === 'textarea') {
-    return (
-      <Textarea
-        size="xs"
-        radius={0}
-        autosize
-        minRows={2}
-        maxRows={field.maxRows || 12}
-        value={value}
-        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
-          onChange(e.currentTarget.value);
-        }}
-      />
-    );
-  }
-  return (
-    <TextInput
-      size="xs"
-      radius={0}
-      value={value}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        onChange(e.currentTarget.value);
-      }}
-    />
-  );
-};
-
-DocEditor.RichTextField = (props: FieldProps) => {
-  const field = props.field as schema.RichTextField;
-  const [value, setValue] = useState<RichTextData>({
-    blocks: [{type: 'paragraph', data: {}}],
-  });
-
-  function onChange(newValue: RichTextData) {
-    setValue(newValue);
-    props.draft.updateKey(props.deepKey, newValue);
-  }
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: RichTextData) => {
-        setValue(newValue);
-      }
-    );
-    return unsubscribe;
-  }, []);
-
-  return (
-    <RichTextEditor
-      value={value}
-      placeholder={field.placeholder}
-      onChange={onChange}
-    />
-  );
-};
-
-const IMAGE_MIMETYPES = [
-  'image/png',
-  'image/jpeg',
-  'image/svg+xml',
-  'image/webp',
-];
-
-DocEditor.ImageField = (props: FieldProps) => {
-  const field = props.field as schema.ImageField;
-  const [img, setImg] = useState<any>({});
-  const [loading, setLoading] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const exts = field.exts ?? IMAGE_MIMETYPES;
-  const accept = exts.join(', ');
-
-  async function uploadFile(file: File) {
-    setLoading(true);
-    try {
-      const uploadedImage = await uploadFileToGCS(file);
-      setImg((currentImg: any) => {
-        // Preserve the "alt" text when the image changes.
-        const newImage = Object.assign({}, uploadedImage, {
-          alt: currentImg?.alt || '',
-        });
-        props.draft.updateKey(props.deepKey, newImage);
-        return newImage;
-      });
-      setLoading(false);
-    } catch (err) {
-      console.error('image upload failed');
-      console.error(err);
-      setLoading(false);
-      showNotification({
-        title: 'Image upload failed',
-        message: 'Failed to upload image: ' + String(err),
-        color: 'red',
-        autoClose: false,
-      });
-    }
-
-    // Reset the input element in case the user wishes to re-upload the image.
-    if (inputRef.current) {
-      const inputEl = inputRef.current;
-      inputEl.value = '';
-    }
-  }
-
-  function onFileChange(e: Event) {
-    const inputEl = e.target as HTMLInputElement;
-    const files = inputEl.files || [];
-    const file = files[0];
-    if (file) {
-      uploadFile(file);
-    }
-  }
-
-  async function setAltText(newValue: string) {
-    setImg((currentImg: any) => {
-      return Object.assign({}, currentImg, {alt: newValue});
-    });
-    props.draft.updateKey(`${props.deepKey}.alt`, newValue);
-  }
-
-  async function removeImage() {
-    setImg({});
-    props.draft.removeKey(props.deepKey);
-  }
-
-  const handleDragEnter = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-
-    const files = e.dataTransfer?.files || [];
-    const file = files[0];
-    if (file) {
-      console.log(`file dropped ("${props.deepKey}"):`, file);
-      uploadFile(file);
-    }
-  };
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: string) => {
-        setImg(newValue);
-      }
-    );
-
-    const dropzone = ref.current;
-    document.addEventListener('dragenter', handleDragEnter);
-    document.addEventListener('dragover', handleDragEnter);
-    document.addEventListener('dragleave', handleDragLeave);
-    document.addEventListener('drop', handleDragLeave);
-    if (dropzone) {
-      dropzone.addEventListener('drop', handleDrop);
-    }
-    return () => {
-      unsubscribe();
-      document.removeEventListener('dragenter', handleDragEnter);
-      document.removeEventListener('dragover', handleDragEnter);
-      document.removeEventListener('dragleave', handleDragLeave);
-      document.removeEventListener('drop', handleDragLeave);
-      if (dropzone) {
-        dropzone.removeEventListener('drop', handleDrop);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      className={joinClassNames(
-        'DocEditor__ImageField',
-        isDragging && 'dragging'
-      )}
-      ref={ref}
-    >
-      {img && img.src ? (
-        <div className="DocEditor__ImageField__imagePreview">
-          <div className="DocEditor__ImageField__imagePreview__controls">
-            <Tooltip label="Remove image">
-              <ActionIcon
-                className="DocEditor__ImageField__imagePreview__controls__trash"
-                onClick={() => removeImage()}
-              >
-                <IconTrash size={16} />
-              </ActionIcon>
-            </Tooltip>
-          </div>
-          <div className="DocEditor__ImageField__imagePreview__image">
-            <img
-              src={img.gciUrl || img.src}
-              width={img.width}
-              height={img.height}
-            />
-            <div className="DocEditor__ImageField__imagePreview__dimens">
-              {`${img.width}x${img.height}`}
-            </div>
-          </div>
-          <TextInput
-            className="DocEditor__ImageField__imagePreview__image__url"
-            size="xs"
-            radius={0}
-            value={img.gciUrl || img.src}
-            disabled={true}
-          />
-          <TextInput
-            className="DocEditor__ImageField__imagePreview__image__alt"
-            size="xs"
-            radius={0}
-            value={img.alt}
-            label="Alt text"
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              setAltText(e.currentTarget.value);
-            }}
-          />
-        </div>
-      ) : (
-        <div className="DocEditor__ImageField__noImage">No image</div>
-      )}
-      {/* <Button
-        color="dark"
-        size="xs"
-        leftIcon={<IconPhotoUp size={16} />}
-      >
-        Upload image
-      </Button> */}
-      <label
-        className="DocEditor__ImageField__uploadButton"
-        role="button"
-        aria-disabled={loading}
-      >
-        <input
-          type="file"
-          accept={accept}
-          onChange={onFileChange}
-          ref={inputRef}
-        />
-        <div className="DocEditor__ImageField__uploadButton__icon">
-          <IconPhotoUp size={16} />
-        </div>
-        <div className="DocEditor__ImageField__uploadButton__label">
-          {loading ? 'Uploading...' : 'Upload image'}
-        </div>
-      </label>
-    </div>
-  );
-};
-
-DocEditor.FileField = (props: FieldProps) => {
-  const field = props.field as schema.FileField;
-  const [file, setFile] = useState<any>({});
-  const [loading, setLoading] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  let accept: string | undefined = undefined;
-  if (field.exts) {
-    accept = field.exts.join(',');
-  }
-
-  async function removeFile() {
-    setFile({});
-    props.draft.removeKey(props.deepKey);
-  }
-
-  async function uploadFile(file: File) {
-    setLoading(true);
-    try {
-      const uploadedFile = await uploadFileToGCS(file, {
-        preserveFilename: field.preserveFilename,
-      });
-      props.draft.updateKey(props.deepKey, uploadedFile);
-      setFile(uploadedFile);
-      setLoading(false);
-    } catch (err) {
-      console.error('file upload failed');
-      console.error(err);
-      setLoading(false);
-      showNotification({
-        title: 'File upload failed',
-        message: 'Failed to upload file: ' + String(err),
-        color: 'red',
-        autoClose: false,
-      });
-    }
-    // Reset the input element in case the user wishes to re-upload a file.
-    if (inputRef.current) {
-      const inputEl = inputRef.current;
-      inputEl.value = '';
-    }
-  }
-
-  function onFileChange(e: Event) {
-    const inputEl = e.target as HTMLInputElement;
-    const files = inputEl.files || [];
-    const file = files[0];
-    if (file) {
-      uploadFile(file);
-    }
-  }
-
-  const handleDragEnter = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-
-    const files = e.dataTransfer?.files || [];
-    const file = files[0];
-    if (file) {
-      console.log(`file dropped ("${props.deepKey}"):`, file);
-      uploadFile(file);
-    }
-  };
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: string) => {
-        setFile(newValue);
-      }
-    );
-
-    const dropzone = ref.current;
-    document.addEventListener('dragenter', handleDragEnter);
-    document.addEventListener('dragover', handleDragEnter);
-    document.addEventListener('dragleave', handleDragLeave);
-    document.addEventListener('drop', handleDragLeave);
-    if (dropzone) {
-      dropzone.addEventListener('drop', handleDrop);
-    }
-    return () => {
-      unsubscribe();
-      document.removeEventListener('dragenter', handleDragEnter);
-      document.removeEventListener('dragover', handleDragEnter);
-      document.removeEventListener('dragleave', handleDragLeave);
-      document.removeEventListener('drop', handleDragLeave);
-      if (dropzone) {
-        dropzone.removeEventListener('drop', handleDrop);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      className={joinClassNames(
-        'DocEditor__FileField',
-        isDragging && 'dragging'
-      )}
-      ref={ref}
-    >
-      {file && file.src && (
-        <div className="DocEditor__FileField__controls">
-          <Tooltip label="Remove file">
-            <ActionIcon
-              className="DocEditor__FileField__controls__trash"
-              onClick={() => removeFile()}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Tooltip>
-        </div>
-      )}
-      {file && file.src ? (
-        <div className="DocEditor__FileField__file">
-          <TextInput
-            className="DocEditor__FileField__file__url"
-            size="xs"
-            radius={0}
-            value={file.src}
-            disabled={true}
-          />
-        </div>
-      ) : (
-        <div className="DocEditor__FileField__noFile">No file</div>
-      )}
-      <label
-        className="DocEditor__FileField__uploadButton"
-        role="button"
-        aria-disabled={loading}
-      >
-        <input
-          type="file"
-          accept={accept}
-          onChange={onFileChange}
-          ref={inputRef}
-        />
-        <div className="DocEditor__FileField__uploadButton__icon">
-          <IconFileUpload size={16} />
-        </div>
-        <div className="DocEditor__FileField__uploadButton__label">
-          {loading ? 'Uploading...' : 'Upload file'}
-        </div>
-      </label>
-    </div>
-  );
-};
-
 DocEditor.ObjectField = (props: FieldProps) => {
   const field = props.field as schema.ObjectField;
   return (
@@ -1156,192 +699,6 @@ DocEditor.OneOfField = (props: FieldProps) => {
   );
 };
 
-DocEditor.SelectField = (props: FieldProps) => {
-  const field = props.field as schema.SelectField;
-  const [value, setValue] = useState('');
-
-  const options = (field.options || []).map((option) => {
-    // Mantine requires both label and value to be set.
-    if (typeof option === 'string') {
-      return {label: option, value: option};
-    }
-    return {
-      label: option.label ?? option.value ?? '',
-      value: option.value ?? option.label ?? '',
-    };
-  });
-
-  function onChange(newValue: string) {
-    props.draft.updateKey(`${props.deepKey}`, newValue);
-    setValue(newValue || '');
-  }
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: string) => {
-        setValue(newValue || '');
-      }
-    );
-    return unsubscribe;
-  }, []);
-
-  return (
-    <div className="DocEditor__SelectField">
-      <Select
-        data={options}
-        placeholder={field.placeholder}
-        value={value}
-        onChange={(e: string) => onChange(e || '')}
-        size="xs"
-        radius={0}
-        // Due to issues with preact/compat, use a div for the dropdown el.
-        dropdownComponent="div"
-      />
-    </div>
-  );
-};
-
-DocEditor.MultiSelectField = (props: FieldProps) => {
-  const field = props.field as schema.MultiSelectField;
-  const [value, setValue] = useState<string[]>([]);
-
-  const options = (field.options || []).map((option) => {
-    // Mantine requires both label and value to be set.
-    if (typeof option === 'string') {
-      return {label: option, value: option};
-    }
-    return {
-      label: option.label ?? option.value ?? '',
-      value: option.value ?? option.label ?? '',
-    };
-  });
-
-  function onChange(newValue: string[]) {
-    props.draft.updateKey(props.deepKey, newValue || []);
-    setValue(newValue);
-  }
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: string[]) => {
-        setValue(newValue || []);
-      }
-    );
-    return unsubscribe;
-  }, []);
-
-  return (
-    <div className="DocEditor__MultiSelectField">
-      <MultiSelect
-        data={options}
-        size="xs"
-        radius={0}
-        placeholder={field.placeholder}
-        value={value}
-        searchable
-        creatable={field.creatable || false}
-        getCreateLabel={(query: string) => `+ Add "${query}"`}
-        onChange={(newValue: string[]) => onChange(newValue)}
-        // Due to issues with preact/compat, use a div for the dropdown el.
-        dropdownComponent="div"
-      />
-    </div>
-  );
-};
-
-DocEditor.BooleanField = (props: FieldProps) => {
-  const field = props.field as schema.BooleanField;
-  const label = field.checkboxLabel || 'Enabled';
-  const [value, setValue] = useState<boolean>(false);
-
-  function onChange(newValue: boolean) {
-    setValue(newValue);
-    props.draft.updateKey(props.deepKey, newValue);
-  }
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: boolean) => {
-        setValue(newValue);
-      }
-    );
-    return unsubscribe;
-  }, []);
-
-  return (
-    <div className="DocEditor__BooleanField">
-      <Checkbox
-        label={label}
-        onChange={(e: Event) => {
-          const target = e.currentTarget as HTMLInputElement;
-          onChange(target.checked);
-        }}
-        checked={value}
-        size="xs"
-      />
-    </div>
-  );
-};
-
-DocEditor.DateTimeField = (props: FieldProps) => {
-  // const field = props.field as schema.DateTimeField;
-  const [dateStr, setDateStr] = useState('');
-
-  function onChange(newDateStr: string) {
-    if (newDateStr) {
-      const millis = Math.floor(new Date(newDateStr).getTime());
-      const newValue = Timestamp.fromMillis(millis);
-      setDateStr(toDateStr(newValue));
-      props.draft.updateKey(props.deepKey, newValue);
-    } else {
-      setDateStr('');
-      props.draft.removeKey(props.deepKey);
-    }
-  }
-
-  function toDateStr(ts: Timestamp) {
-    const date = ts.toDate();
-    // Subtract by the timezone offset so that toISOString() returns the local
-    // datetime string.
-    date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-    return date.toISOString().slice(0, 16);
-  }
-
-  useEffect(() => {
-    const unsubscribe = props.draft.subscribe(
-      props.deepKey,
-      (newValue: Timestamp) => {
-        if (newValue) {
-          setDateStr(toDateStr(newValue));
-        } else {
-          setDateStr('');
-        }
-      }
-    );
-    return unsubscribe;
-  }, []);
-
-  return (
-    <div className="DocEditor__DateTimeField">
-      <input
-        type="datetime-local"
-        value={dateStr}
-        onChange={(e: Event) => {
-          const target = e.target as HTMLInputElement;
-          const newDateStr = target.value;
-          onChange(newDateStr);
-        }}
-      />
-      <div className="DocEditor__DateTimeField__timezone">
-        timezone: {Intl.DateTimeFormat().resolvedOptions().timeZone}
-      </div>
-    </div>
-  );
-};
-
 function arraySwap<T = unknown>(arr: T[], index1: number, index2: number) {
   if (arr.length <= 1) {
     return arr;
diff --git a/packages/root-cms/ui/components/DocEditor/fields/BooleanField.tsx b/packages/root-cms/ui/components/DocEditor/fields/BooleanField.tsx
new file mode 100644
index 00000000..b99e57ca
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/BooleanField.tsx
@@ -0,0 +1,39 @@
+import {Checkbox} from '@mantine/core';
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {FieldProps} from './FieldProps.js';
+
+export function BooleanField(props: FieldProps) {
+  const field = props.field as schema.BooleanField;
+  const label = field.checkboxLabel || 'Enabled';
+  const [value, setValue] = useState<boolean>(false);
+
+  function onChange(newValue: boolean) {
+    setValue(newValue);
+    props.draft.updateKey(props.deepKey, newValue);
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: boolean) => {
+        setValue(newValue);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div className="DocEditor__BooleanField">
+      <Checkbox
+        label={label}
+        onChange={(e: Event) => {
+          const target = e.currentTarget as HTMLInputElement;
+          onChange(target.checked);
+        }}
+        checked={value}
+        size="xs"
+      />
+    </div>
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/DateTimeField.tsx b/packages/root-cms/ui/components/DocEditor/fields/DateTimeField.tsx
new file mode 100644
index 00000000..d9f0207a
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/DateTimeField.tsx
@@ -0,0 +1,59 @@
+import {Timestamp} from 'firebase/firestore';
+import {useEffect, useState} from 'preact/hooks';
+import {FieldProps} from './FieldProps.js';
+
+export function DateTimeField(props: FieldProps) {
+  // const field = props.field as schema.DateTimeField;
+  const [dateStr, setDateStr] = useState('');
+
+  function onChange(newDateStr: string) {
+    if (newDateStr) {
+      const millis = Math.floor(new Date(newDateStr).getTime());
+      const newValue = Timestamp.fromMillis(millis);
+      setDateStr(toDateStr(newValue));
+      props.draft.updateKey(props.deepKey, newValue);
+    } else {
+      setDateStr('');
+      props.draft.removeKey(props.deepKey);
+    }
+  }
+
+  function toDateStr(ts: Timestamp) {
+    const date = ts.toDate();
+    // Subtract by the timezone offset so that toISOString() returns the local
+    // datetime string.
+    date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+    return date.toISOString().slice(0, 16);
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: Timestamp) => {
+        if (newValue) {
+          setDateStr(toDateStr(newValue));
+        } else {
+          setDateStr('');
+        }
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div className="DocEditor__DateTimeField">
+      <input
+        type="datetime-local"
+        value={dateStr}
+        onChange={(e: Event) => {
+          const target = e.target as HTMLInputElement;
+          const newDateStr = target.value;
+          onChange(newDateStr);
+        }}
+      />
+      <div className="DocEditor__DateTimeField__timezone">
+        timezone: {Intl.DateTimeFormat().resolvedOptions().timeZone}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/FieldProps.ts b/packages/root-cms/ui/components/DocEditor/fields/FieldProps.ts
new file mode 100644
index 00000000..95575c88
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/FieldProps.ts
@@ -0,0 +1,13 @@
+import * as schema from '../../../../core/schema.js';
+import {DraftController} from '../../../hooks/useDraft.js';
+
+export interface FieldProps {
+  collection: schema.Collection;
+  field: schema.Field;
+  level?: number;
+  hideHeader?: boolean;
+  onChange?: (newValue: any) => void;
+  shallowKey: string;
+  deepKey: string;
+  draft: DraftController;
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/FileField.tsx b/packages/root-cms/ui/components/DocEditor/fields/FileField.tsx
new file mode 100644
index 00000000..e11537a5
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/FileField.tsx
@@ -0,0 +1,167 @@
+import {ActionIcon, TextInput, Tooltip} from '@mantine/core';
+import {showNotification} from '@mantine/notifications';
+import {IconFileUpload, IconTrash} from '@tabler/icons-preact';
+import {useEffect, useRef, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {joinClassNames} from '../../../utils/classes.js';
+import {uploadFileToGCS} from '../../../utils/gcs.js';
+import {FieldProps} from './FieldProps.js';
+
+export function FileField(props: FieldProps) {
+  const field = props.field as schema.FileField;
+  const [file, setFile] = useState<any>({});
+  const [loading, setLoading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  let accept: string | undefined = undefined;
+  if (field.exts) {
+    accept = field.exts.join(',');
+  }
+
+  async function removeFile() {
+    setFile({});
+    props.draft.removeKey(props.deepKey);
+  }
+
+  async function uploadFile(file: File) {
+    setLoading(true);
+    try {
+      const uploadedFile = await uploadFileToGCS(file, {
+        preserveFilename: field.preserveFilename,
+      });
+      props.draft.updateKey(props.deepKey, uploadedFile);
+      setFile(uploadedFile);
+      setLoading(false);
+    } catch (err) {
+      console.error('file upload failed');
+      console.error(err);
+      setLoading(false);
+      showNotification({
+        title: 'File upload failed',
+        message: 'Failed to upload file: ' + String(err),
+        color: 'red',
+        autoClose: false,
+      });
+    }
+    // Reset the input element in case the user wishes to re-upload a file.
+    if (inputRef.current) {
+      const inputEl = inputRef.current;
+      inputEl.value = '';
+    }
+  }
+
+  function onFileChange(e: Event) {
+    const inputEl = e.target as HTMLInputElement;
+    const files = inputEl.files || [];
+    const file = files[0];
+    if (file) {
+      uploadFile(file);
+    }
+  }
+
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const files = e.dataTransfer?.files || [];
+    const file = files[0];
+    if (file) {
+      console.log(`file dropped ("${props.deepKey}"):`, file);
+      uploadFile(file);
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: string) => {
+        setFile(newValue);
+      }
+    );
+
+    const dropzone = ref.current;
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragover', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('drop', handleDragLeave);
+    if (dropzone) {
+      dropzone.addEventListener('drop', handleDrop);
+    }
+    return () => {
+      unsubscribe();
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragover', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('drop', handleDragLeave);
+      if (dropzone) {
+        dropzone.removeEventListener('drop', handleDrop);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={joinClassNames(
+        'DocEditor__FileField',
+        isDragging && 'dragging'
+      )}
+      ref={ref}
+    >
+      {file && file.src && (
+        <div className="DocEditor__FileField__controls">
+          <Tooltip label="Remove file">
+            <ActionIcon
+              className="DocEditor__FileField__controls__trash"
+              onClick={() => removeFile()}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Tooltip>
+        </div>
+      )}
+      {file && file.src ? (
+        <div className="DocEditor__FileField__file">
+          <TextInput
+            className="DocEditor__FileField__file__url"
+            size="xs"
+            radius={0}
+            value={file.src}
+            disabled={true}
+          />
+        </div>
+      ) : (
+        <div className="DocEditor__FileField__noFile">No file</div>
+      )}
+      <label
+        className="DocEditor__FileField__uploadButton"
+        role="button"
+        aria-disabled={loading}
+      >
+        <input
+          type="file"
+          accept={accept}
+          onChange={onFileChange}
+          ref={inputRef}
+        />
+        <div className="DocEditor__FileField__uploadButton__icon">
+          <IconFileUpload size={16} />
+        </div>
+        <div className="DocEditor__FileField__uploadButton__label">
+          {loading ? 'Uploading...' : 'Upload file'}
+        </div>
+      </label>
+    </div>
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/ImageField.tsx b/packages/root-cms/ui/components/DocEditor/fields/ImageField.tsx
new file mode 100644
index 00000000..ceff6418
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/ImageField.tsx
@@ -0,0 +1,210 @@
+import {ActionIcon, TextInput, Tooltip} from '@mantine/core';
+import {showNotification} from '@mantine/notifications';
+import {IconPhotoUp, IconTrash} from '@tabler/icons-preact';
+import {ChangeEvent} from 'preact/compat';
+import {useEffect, useRef, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {joinClassNames} from '../../../utils/classes.js';
+import {uploadFileToGCS} from '../../../utils/gcs.js';
+import {FieldProps} from './FieldProps.js';
+
+export const IMAGE_MIMETYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/svg+xml',
+  'image/webp',
+];
+
+export function ImageField(props: FieldProps) {
+  const field = props.field as schema.ImageField;
+  const [img, setImg] = useState<any>({});
+  const [loading, setLoading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const exts = field.exts ?? IMAGE_MIMETYPES;
+  const accept = exts.join(', ');
+
+  async function uploadFile(file: File) {
+    setLoading(true);
+    try {
+      const uploadedImage = await uploadFileToGCS(file);
+      setImg((currentImg: any) => {
+        // Preserve the "alt" text when the image changes.
+        const newImage = Object.assign({}, uploadedImage, {
+          alt: currentImg?.alt || '',
+        });
+        props.draft.updateKey(props.deepKey, newImage);
+        return newImage;
+      });
+      setLoading(false);
+    } catch (err) {
+      console.error('image upload failed');
+      console.error(err);
+      setLoading(false);
+      showNotification({
+        title: 'Image upload failed',
+        message: 'Failed to upload image: ' + String(err),
+        color: 'red',
+        autoClose: false,
+      });
+    }
+
+    // Reset the input element in case the user wishes to re-upload the image.
+    if (inputRef.current) {
+      const inputEl = inputRef.current;
+      inputEl.value = '';
+    }
+  }
+
+  function onFileChange(e: Event) {
+    const inputEl = e.target as HTMLInputElement;
+    const files = inputEl.files || [];
+    const file = files[0];
+    if (file) {
+      uploadFile(file);
+    }
+  }
+
+  async function setAltText(newValue: string) {
+    setImg((currentImg: any) => {
+      return Object.assign({}, currentImg, {alt: newValue});
+    });
+    props.draft.updateKey(`${props.deepKey}.alt`, newValue);
+  }
+
+  async function removeImage() {
+    setImg({});
+    props.draft.removeKey(props.deepKey);
+  }
+
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const files = e.dataTransfer?.files || [];
+    const file = files[0];
+    if (file) {
+      console.log(`file dropped ("${props.deepKey}"):`, file);
+      uploadFile(file);
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: string) => {
+        setImg(newValue);
+      }
+    );
+
+    const dropzone = ref.current;
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragover', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('drop', handleDragLeave);
+    if (dropzone) {
+      dropzone.addEventListener('drop', handleDrop);
+    }
+    return () => {
+      unsubscribe();
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragover', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('drop', handleDragLeave);
+      if (dropzone) {
+        dropzone.removeEventListener('drop', handleDrop);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={joinClassNames(
+        'DocEditor__ImageField',
+        isDragging && 'dragging'
+      )}
+      ref={ref}
+    >
+      {img && img.src ? (
+        <div className="DocEditor__ImageField__imagePreview">
+          <div className="DocEditor__ImageField__imagePreview__controls">
+            <Tooltip label="Remove image">
+              <ActionIcon
+                className="DocEditor__ImageField__imagePreview__controls__trash"
+                onClick={() => removeImage()}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+          <div className="DocEditor__ImageField__imagePreview__image">
+            <img
+              src={img.gciUrl || img.src}
+              width={img.width}
+              height={img.height}
+            />
+            <div className="DocEditor__ImageField__imagePreview__dimens">
+              {`${img.width}x${img.height}`}
+            </div>
+          </div>
+          <TextInput
+            className="DocEditor__ImageField__imagePreview__image__url"
+            size="xs"
+            radius={0}
+            value={img.gciUrl || img.src}
+            disabled={true}
+          />
+          <TextInput
+            className="DocEditor__ImageField__imagePreview__image__alt"
+            size="xs"
+            radius={0}
+            value={img.alt}
+            label="Alt text"
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setAltText(e.currentTarget.value);
+            }}
+          />
+        </div>
+      ) : (
+        <div className="DocEditor__ImageField__noImage">No image</div>
+      )}
+      {/* <Button
+        color="dark"
+        size="xs"
+        leftIcon={<IconPhotoUp size={16} />}
+      >
+        Upload image
+      </Button> */}
+      <label
+        className="DocEditor__ImageField__uploadButton"
+        role="button"
+        aria-disabled={loading}
+      >
+        <input
+          type="file"
+          accept={accept}
+          onChange={onFileChange}
+          ref={inputRef}
+        />
+        <div className="DocEditor__ImageField__uploadButton__icon">
+          <IconPhotoUp size={16} />
+        </div>
+        <div className="DocEditor__ImageField__uploadButton__label">
+          {loading ? 'Uploading...' : 'Upload image'}
+        </div>
+      </label>
+    </div>
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/MultiSelectField.tsx b/packages/root-cms/ui/components/DocEditor/fields/MultiSelectField.tsx
new file mode 100644
index 00000000..026d4349
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/MultiSelectField.tsx
@@ -0,0 +1,53 @@
+import {MultiSelect} from '@mantine/core';
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {FieldProps} from './FieldProps.js';
+
+export function MultiSelectField(props: FieldProps) {
+  const field = props.field as schema.MultiSelectField;
+  const [value, setValue] = useState<string[]>([]);
+
+  const options = (field.options || []).map((option) => {
+    // Mantine requires both label and value to be set.
+    if (typeof option === 'string') {
+      return {label: option, value: option};
+    }
+    return {
+      label: option.label ?? option.value ?? '',
+      value: option.value ?? option.label ?? '',
+    };
+  });
+
+  function onChange(newValue: string[]) {
+    props.draft.updateKey(props.deepKey, newValue || []);
+    setValue(newValue);
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: string[]) => {
+        setValue(newValue || []);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div className="DocEditor__MultiSelectField">
+      <MultiSelect
+        data={options}
+        size="xs"
+        radius={0}
+        placeholder={field.placeholder}
+        value={value}
+        searchable
+        creatable={field.creatable || false}
+        getCreateLabel={(query: string) => `+ Add "${query}"`}
+        onChange={(newValue: string[]) => onChange(newValue)}
+        // Due to issues with preact/compat, use a div for the dropdown el.
+        dropdownComponent="div"
+      />
+    </div>
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/ReferenceField.css b/packages/root-cms/ui/components/DocEditor/fields/ReferenceField.css
new file mode 100644
index 00000000..1c1f4123
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/ReferenceField.css
@@ -0,0 +1,63 @@
+.ReferenceField__none {
+  font-family: var(--font-family-mono);
+  margin-bottom: 16px;
+}
+
+.ReferenceField__ref {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.ReferenceField__remove {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ReferenceField__Preview {
+  flex: 1;
+  width: 100%;
+}
+
+.ReferenceField__DocCard {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.ReferenceField__DocCard__image {
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.ReferenceField__DocCard__content {
+  display: block;
+  padding: 0 8px;
+  text-decoration: none;
+  flex: 1;
+}
+
+.ReferenceField__DocCard__content__header__docId {
+  font-size: 12px;
+  line-height: 1.2;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.ReferenceField__DocCard__content__title {
+  line-height: 1.2;
+  font-size: 22px;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.ReferenceField__DocCard__content__url {
+  font-size: 12px;
+  font-weight: 500;
+  color: #ababab;
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/ReferenceField.tsx b/packages/root-cms/ui/components/DocEditor/fields/ReferenceField.tsx
new file mode 100644
index 00000000..d987cd6b
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/ReferenceField.tsx
@@ -0,0 +1,171 @@
+import {ActionIcon, Button, Image, Loader, Tooltip} from '@mantine/core';
+import {IconTrash} from '@tabler/icons-preact';
+import {getDoc} from 'firebase/firestore';
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {getDraftDocRef} from '../../../utils/doc.js';
+import {getNestedValue} from '../../../utils/objects.js';
+import {useDocPickerModal} from '../../DocPickerModal/DocPickerModal.js';
+import {FieldProps} from './FieldProps.js';
+import './ReferenceField.css';
+
+export function ReferenceField(props: FieldProps) {
+  const field = props.field as schema.ReferenceField;
+  const [refId, setRefId] = useState('');
+
+  function onChange(newRefId: string) {
+    if (newRefId) {
+      const [collection, slug] = newRefId.split('/');
+      props.draft.updateKey(props.deepKey, {id: newRefId, collection, slug});
+    } else {
+      props.draft.removeKey(props.deepKey);
+    }
+    setRefId(newRefId);
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue?: {id: string}) => {
+        setRefId(newValue?.id || '');
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  const docPickerModal = useDocPickerModal();
+
+  function openDocPicker() {
+    const initialCollection = refId
+      ? refId.split('/')[0]
+      : field.initialCollection;
+    docPickerModal.open({
+      collections: field.collections,
+      initialCollection: initialCollection,
+      onChange: (newRefId: string) => {
+        onChange(newRefId);
+        docPickerModal.close();
+      },
+    });
+  }
+
+  function removeDoc() {
+    onChange('');
+  }
+
+  return (
+    <div className="ReferenceField">
+      {refId ? (
+        <div className="ReferenceField__ref">
+          <ReferenceField.Preview id={refId} />
+          <div className="ReferenceField__remove">
+            <Tooltip label="Remove">
+              <ActionIcon
+                className="ReferenceField__remove__icon"
+                onClick={() => removeDoc()}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+        </div>
+      ) : (
+        <div className="ReferenceField__none">None selected</div>
+      )}
+      <Button color="dark" size="xs" onClick={() => openDocPicker()}>
+        {field.buttonLabel || 'Select'}
+      </Button>
+    </div>
+  );
+}
+
+const REF_PREVIEW_CACHE: Record<string, any> = {};
+
+interface ReferencePreviewProps {
+  id: string;
+}
+
+ReferenceField.Preview = (props: ReferencePreviewProps) => {
+  const [loading, setLoading] = useState(true);
+  const [previewDoc, setPreviewDoc] = useState<any>(null);
+
+  async function fetchDocData() {
+    const docRef = getDraftDocRef(props.id);
+    const doc = await getDoc(docRef);
+    const docData = doc.data();
+    REF_PREVIEW_CACHE[props.id] = docData;
+    setPreviewDoc(docData);
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    const cachedValue = REF_PREVIEW_CACHE[props.id];
+    if (cachedValue) {
+      setPreviewDoc(cachedValue);
+      setLoading(false);
+      return;
+    }
+    fetchDocData();
+  }, []);
+
+  return (
+    <div className="ReferenceField__Preview">
+      {loading ? (
+        <div className="ReferenceField__Preview__loading">
+          <Loader color="gray" size="sm" />
+        </div>
+      ) : (
+        <ReferenceField.DocCard doc={previewDoc} />
+      )}
+    </div>
+  );
+};
+
+ReferenceField.DocCard = (props: {doc: any}) => {
+  const doc = props.doc;
+  // NOTE(stevenle): older db versions stored the doc id as doc.sys.id.
+  const docId = doc.id || doc.sys?.id || '';
+  if (!docId) {
+    return (
+      <div className="ReferenceField__DocCard ReferenceField__DocCard--error">
+        {JSON.stringify(doc)}
+      </div>
+    );
+  }
+  const collection = docId.split('/')[0];
+  const fields = doc.fields || {};
+  const rootCollection = window.__ROOT_CTX.collections[collection];
+  if (!rootCollection) {
+    throw new Error(`could not find collection: ${collection}`);
+  }
+  const previewTitle = getNestedValue(
+    fields,
+    rootCollection.preview?.title || 'meta.title'
+  );
+  const previewImage =
+    getNestedValue(fields, rootCollection.preview?.image || 'meta.image') ||
+    rootCollection.preview?.defaultImage;
+
+  return (
+    <div className="ReferenceField__DocCard">
+      <div className="ReferenceField__DocCard__image">
+        <Image
+          src={previewImage?.src}
+          width={80}
+          height={60}
+          withPlaceholder={!previewImage?.src}
+        />
+      </div>
+      <div className="ReferenceField__DocCard__content">
+        <div className="ReferenceField__DocCard__content__header">
+          <div className="ReferenceField__DocCard__content__header__docId">
+            {docId}
+          </div>
+        </div>
+        <div className="ReferenceField__DocCard__content__title">
+          {previewTitle || '[UNTITLED]'}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx b/packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx
new file mode 100644
index 00000000..a3a42553
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx
@@ -0,0 +1,37 @@
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {
+  RichTextData,
+  RichTextEditor,
+} from '../../RichTextEditor/RichTextEditor.js';
+import {FieldProps} from './FieldProps.js';
+
+export function RichTextField(props: FieldProps) {
+  const field = props.field as schema.RichTextField;
+  const [value, setValue] = useState<RichTextData>({
+    blocks: [{type: 'paragraph', data: {}}],
+  });
+
+  function onChange(newValue: RichTextData) {
+    setValue(newValue);
+    props.draft.updateKey(props.deepKey, newValue);
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: RichTextData) => {
+        setValue(newValue);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <RichTextEditor
+      value={value}
+      placeholder={field.placeholder}
+      onChange={onChange}
+    />
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/SelectField.tsx b/packages/root-cms/ui/components/DocEditor/fields/SelectField.tsx
new file mode 100644
index 00000000..327c6d66
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/SelectField.tsx
@@ -0,0 +1,50 @@
+import {Select} from '@mantine/core';
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {FieldProps} from './FieldProps.js';
+
+export function SelectField(props: FieldProps) {
+  const field = props.field as schema.SelectField;
+  const [value, setValue] = useState('');
+
+  const options = (field.options || []).map((option) => {
+    // Mantine requires both label and value to be set.
+    if (typeof option === 'string') {
+      return {label: option, value: option};
+    }
+    return {
+      label: option.label ?? option.value ?? '',
+      value: option.value ?? option.label ?? '',
+    };
+  });
+
+  function onChange(newValue: string) {
+    props.draft.updateKey(`${props.deepKey}`, newValue);
+    setValue(newValue || '');
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: string) => {
+        setValue(newValue || '');
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div className="DocEditor__SelectField">
+      <Select
+        data={options}
+        placeholder={field.placeholder}
+        value={value}
+        onChange={(e: string) => onChange(e || '')}
+        size="xs"
+        radius={0}
+        // Due to issues with preact/compat, use a div for the dropdown el.
+        dropdownComponent="div"
+      />
+    </div>
+  );
+}
diff --git a/packages/root-cms/ui/components/DocEditor/fields/StringField.tsx b/packages/root-cms/ui/components/DocEditor/fields/StringField.tsx
new file mode 100644
index 00000000..b8eb889c
--- /dev/null
+++ b/packages/root-cms/ui/components/DocEditor/fields/StringField.tsx
@@ -0,0 +1,51 @@
+import {TextInput, Textarea} from '@mantine/core';
+import {ChangeEvent} from 'preact/compat';
+import {useEffect, useState} from 'preact/hooks';
+import * as schema from '../../../../core/schema.js';
+import {FieldProps} from './FieldProps.js';
+
+export function StringField(props: FieldProps) {
+  const field = props.field as schema.StringField;
+  const [value, setValue] = useState('');
+
+  function onChange(newValue: string) {
+    setValue(newValue);
+    props.draft.updateKey(props.deepKey, newValue);
+  }
+
+  useEffect(() => {
+    const unsubscribe = props.draft.subscribe(
+      props.deepKey,
+      (newValue: string) => {
+        setValue(newValue);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  if (field.variant === 'textarea') {
+    return (
+      <Textarea
+        size="xs"
+        radius={0}
+        autosize
+        minRows={2}
+        maxRows={field.maxRows || 12}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+          onChange(e.currentTarget.value);
+        }}
+      />
+    );
+  }
+  return (
+    <TextInput
+      size="xs"
+      radius={0}
+      value={value}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        onChange(e.currentTarget.value);
+      }}
+    />
+  );
+}
diff --git a/packages/root-cms/ui/components/DocPickerModal/DocPickerModal.css b/packages/root-cms/ui/components/DocPickerModal/DocPickerModal.css
new file mode 100644
index 00000000..3ce18cff
--- /dev/null
+++ b/packages/root-cms/ui/components/DocPickerModal/DocPickerModal.css
@@ -0,0 +1,58 @@
+.DocPickerModal__collection__select {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.DocPickerModal__collection__select__label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.DocPickerModal__DocCard {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-top: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.DocPickerModal__DocCard__image {
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.DocPickerModal__DocCard__content {
+  display: block;
+  padding: 0 12px;
+  text-decoration: none;
+  flex: 1;
+}
+
+.DocPickerModal__DocCard__content__header__docId {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.DocPickerModal__DocCard__content__title {
+  line-height: 36px;
+  font-size: 24px;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.DocPickerModal__DocCard__content__url {
+  font-size: 12px;
+  font-weight: 500;
+  color: #ababab;
+}
+
+.DocPickerModal__DocCard__controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
diff --git a/packages/root-cms/ui/components/DocPickerModal/DocPickerModal.tsx b/packages/root-cms/ui/components/DocPickerModal/DocPickerModal.tsx
new file mode 100644
index 00000000..099a400c
--- /dev/null
+++ b/packages/root-cms/ui/components/DocPickerModal/DocPickerModal.tsx
@@ -0,0 +1,187 @@
+import {Button, Image, Loader, Select} from '@mantine/core';
+import {ContextModalProps, useModals} from '@mantine/modals';
+import {useState} from 'preact/hooks';
+import {useDocsList} from '../../hooks/useDocsList.js';
+import {useModalTheme} from '../../hooks/useModalTheme.js';
+import './DocPickerModal.css';
+import {getDocServingUrl} from '../../utils/doc-urls.js';
+import {getNestedValue} from '../../utils/objects.js';
+
+const MODAL_ID = 'DocPickerModal';
+
+export interface DocPickerModalProps {
+  [key: string]: unknown;
+  collections?: string[];
+  initialCollection?: string;
+  onChange?: (id: string) => void;
+}
+
+export function useDocPickerModal() {
+  const modals = useModals();
+  const modalTheme = useModalTheme();
+  return {
+    open: (props: DocPickerModalProps) => {
+      modals.openContextModal(MODAL_ID, {
+        ...modalTheme,
+        innerProps: props,
+        size: '700px',
+        overflow: 'inside',
+      });
+    },
+    close: () => {
+      modals.closeModal(MODAL_ID);
+    },
+  };
+}
+
+export function DocPickerModal(
+  modalProps: ContextModalProps<DocPickerModalProps>
+) {
+  const {innerProps: props, context, id} = modalProps;
+  let collections = Object.keys(window.__ROOT_CTX.collections);
+  if (props.collections?.length) {
+    collections = collections.filter(
+      (collection) => props.collections?.includes(collection)
+    );
+  }
+
+  const dropdownValues: Array<{value: string; label: string}> = [
+    {value: '', label: 'Select'},
+  ];
+  collections.forEach((collection) => {
+    dropdownValues.push({value: collection, label: collection});
+  });
+
+  const [selectedCollectionId, setSelectedCollectionId] = useState(
+    props.initialCollection || (collections.length === 1 ? collections[0] : '')
+  );
+
+  function onDocSelected(doc: any) {
+    if (props.onChange) {
+      props.onChange(doc.id);
+    }
+  }
+
+  return (
+    <div className="DocPickerModal">
+      {collections.length === 0 && (
+        <div className="DocPickerModal__noCollections">
+          No collections matching schema field definition.
+        </div>
+      )}
+      {collections.length > 1 && (
+        <div className="DocPickerModal__collection__select">
+          <div className="DocPickerModal__collection__select__label">
+            Content Type:
+          </div>
+          <Select
+            data={dropdownValues}
+            value={selectedCollectionId}
+            placeholder={'Select'}
+            onChange={(e: string) => {
+              setSelectedCollectionId(e || '');
+            }}
+            size="xs"
+            radius={0}
+            // Due to issues with preact/compat, use a div for the dropdown el.
+            dropdownComponent="div"
+          />
+        </div>
+      )}
+      {selectedCollectionId && (
+        <DocPickerModal.DocsList
+          collection={selectedCollectionId}
+          onDocSelected={onDocSelected}
+        />
+      )}
+    </div>
+  );
+}
+
+DocPickerModal.DocsList = (props: {
+  collection: string;
+  onDocSelected: (doc: any) => void;
+}) => {
+  const [loading, , docs] = useDocsList(props.collection, {
+    orderBy: 'slug',
+  });
+  return (
+    <div className="DocPickerModal__DocsList">
+      {loading ? (
+        <div className="DocPickerModal__DocsList__loading">
+          <Loader color="gray" size="xl" />
+        </div>
+      ) : docs.length === 0 ? (
+        <div className="DocPickerModal__DocsList__empty">
+          Collection is empty.
+        </div>
+      ) : (
+        <div className="DocPickerModal__DocsList__docs">
+          {docs.map((doc) => (
+            <DocPickerModal.DocCard
+              key={doc.id}
+              doc={doc}
+              onDocSelected={props.onDocSelected}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+DocPickerModal.DocCard = (props: {
+  doc: any;
+  onDocSelected: (doc: any) => void;
+}) => {
+  const doc = props.doc;
+  const [collection, slug] = doc.id.split('/');
+  const fields = doc.fields || {};
+  const rootCollection = window.__ROOT_CTX.collections[collection];
+  // const cmsUrl = `/cms/content/${collection}/${slug}`;
+  const liveUrl = getDocServingUrl({
+    collectionId: collection,
+    slug: slug,
+  });
+  const previewTitle = getNestedValue(
+    fields,
+    rootCollection.preview?.title || 'meta.title'
+  );
+  const previewImage =
+    getNestedValue(fields, rootCollection.preview?.image || 'meta.image') ||
+    rootCollection.preview?.defaultImage;
+  return (
+    <div className="DocPickerModal__DocCard">
+      <div className="DocPickerModal__DocCard__image">
+        <Image
+          src={previewImage?.src}
+          width={120}
+          height={90}
+          withPlaceholder={!previewImage?.src}
+        />
+      </div>
+      <div className="DocPickerModal__DocCard__content">
+        <div className="DocPickerModal__DocCard__content__header">
+          <div className="DocPickerModal__DocCard__content__header__docId">
+            {doc.id}
+          </div>
+        </div>
+        <div className="DocPickerModal__DocCard__content__title">
+          {previewTitle || '[UNTITLED]'}
+        </div>
+        <div className="DocPickerModal__DocCard__content__url">{liveUrl}</div>
+      </div>
+      <div className="DocPickerModal__DocCard__controls">
+        <Button
+          color="blue"
+          size="xs"
+          onClick={() => props.onDocSelected(props.doc)}
+        >
+          Select
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+DocPickerModal.id = MODAL_ID;
diff --git a/packages/root-cms/ui/components/LocalizationModal/LocalizationModal.tsx b/packages/root-cms/ui/components/LocalizationModal/LocalizationModal.tsx
index 2120ad46..6d69ebdc 100644
--- a/packages/root-cms/ui/components/LocalizationModal/LocalizationModal.tsx
+++ b/packages/root-cms/ui/components/LocalizationModal/LocalizationModal.tsx
@@ -567,6 +567,10 @@ function extractField(
     if (field.translate) {
       addString(fieldValue);
     }
+  } else if (field.type === 'image') {
+    if (field.translate && fieldValue && fieldValue.alt) {
+      addString(fieldValue.alt);
+    }
   } else if (field.type === 'multiselect') {
     if (field.translate && Array.isArray(fieldValue)) {
       for (const value of fieldValue) {
diff --git a/packages/root-cms/ui/hooks/useDocsList.ts b/packages/root-cms/ui/hooks/useDocsList.ts
new file mode 100644
index 00000000..3d8ae1f0
--- /dev/null
+++ b/packages/root-cms/ui/hooks/useDocsList.ts
@@ -0,0 +1,57 @@
+import {
+  collection,
+  getDocs,
+  orderBy as queryOrderby,
+  Query,
+  query,
+  documentId,
+} from 'firebase/firestore';
+import {useEffect, useState} from 'preact/hooks';
+import {useFirebase} from './useFirebase.js';
+
+export function useDocsList(collectionId: string, options: {orderBy: string}) {
+  const [docs, setDocs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const firebase = useFirebase();
+  const db = firebase.db;
+
+  const projectId = window.__ROOT_CTX.rootConfig.projectId || 'default';
+
+  const listDocs = async () => {
+    setLoading(true);
+    const dbCollection = collection(
+      db,
+      'Projects',
+      projectId,
+      'Collections',
+      collectionId,
+      'Drafts'
+    );
+    let dbQuery: Query = dbCollection;
+    const orderBy = options.orderBy;
+    if (orderBy === 'modifiedAt') {
+      dbQuery = query(dbCollection, queryOrderby('sys.modifiedAt', 'desc'));
+    } else if (orderBy === 'newest') {
+      dbQuery = query(dbCollection, queryOrderby('sys.createdAt', 'desc'));
+    } else if (orderBy === 'oldest') {
+      dbQuery = query(dbCollection, queryOrderby('sys.createdAt'));
+    } else if (orderBy === 'slug') {
+      dbQuery = query(dbCollection, queryOrderby(documentId()));
+    }
+    const snapshot = await getDocs(dbQuery);
+    const docs = snapshot.docs.map((d) => ({
+      ...d.data(),
+      id: `${collectionId}/${d.id}`,
+      slug: d.id,
+    }));
+    setDocs(docs);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    listDocs();
+  }, [collectionId, options.orderBy]);
+
+  return [loading, listDocs, docs] as const;
+}
diff --git a/packages/root-cms/ui/pages/CollectionPage/CollectionPage.tsx b/packages/root-cms/ui/pages/CollectionPage/CollectionPage.tsx
index b2d73dc9..5e4eab3b 100644
--- a/packages/root-cms/ui/pages/CollectionPage/CollectionPage.tsx
+++ b/packages/root-cms/ui/pages/CollectionPage/CollectionPage.tsx
@@ -4,15 +4,8 @@ import {
   IconCirclePlus,
   IconFolder,
 } from '@tabler/icons-preact';
-import {
-  collection,
-  getDocs,
-  orderBy as queryOrderby,
-  Query,
-  query,
-  documentId,
-} from 'firebase/firestore';
-import {useEffect, useState} from 'preact/hooks';
+
+import {useState} from 'preact/hooks';
 import {route} from 'preact-router';
 
 import {DocActionsMenu} from '../../components/DocActionsMenu/DocActionsMenu.js';
@@ -21,65 +14,18 @@ import {Heading} from '../../components/Heading/Heading.js';
 import {Markdown} from '../../components/Markdown/Markdown.js';
 import {NewDocModal} from '../../components/NewDocModal/NewDocModal.js';
 import {SplitPanel} from '../../components/SplitPanel/SplitPanel.js';
-import {useFirebase} from '../../hooks/useFirebase.js';
+import {useDocsList} from '../../hooks/useDocsList.js';
 import {useLocalStorage} from '../../hooks/useLocalStorage.js';
 import {Layout} from '../../layout/Layout.js';
 import {joinClassNames} from '../../utils/classes.js';
+import {getDocServingUrl} from '../../utils/doc-urls.js';
 import {getNestedValue} from '../../utils/objects.js';
 import './CollectionPage.css';
-import {getDocServingUrl} from '../../utils/doc-urls.js';
 
 interface CollectionPageProps {
   collection?: string;
 }
 
-function useDocsList(collectionId: string, options: {orderBy: string}) {
-  const [docs, setDocs] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const firebase = useFirebase();
-  const db = firebase.db;
-
-  const projectId = window.__ROOT_CTX.rootConfig.projectId || 'default';
-
-  const listDocs = async () => {
-    setLoading(true);
-    const dbCollection = collection(
-      db,
-      'Projects',
-      projectId,
-      'Collections',
-      collectionId,
-      'Drafts'
-    );
-    let dbQuery: Query = dbCollection;
-    const orderBy = options.orderBy;
-    if (orderBy === 'modifiedAt') {
-      dbQuery = query(dbCollection, queryOrderby('sys.modifiedAt', 'desc'));
-    } else if (orderBy === 'newest') {
-      dbQuery = query(dbCollection, queryOrderby('sys.createdAt', 'desc'));
-    } else if (orderBy === 'oldest') {
-      dbQuery = query(dbCollection, queryOrderby('sys.createdAt'));
-    } else if (orderBy === 'slug') {
-      dbQuery = query(dbCollection, queryOrderby(documentId()));
-    }
-    const snapshot = await getDocs(dbQuery);
-    const docs = snapshot.docs.map((d) => ({
-      ...d.data(),
-      id: `${collectionId}/${d.id}`,
-      slug: d.id,
-    }));
-    setDocs(docs);
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    setLoading(true);
-    listDocs();
-  }, [collection, options.orderBy]);
-
-  return [loading, listDocs, docs] as const;
-}
-
 export function CollectionPage(props: CollectionPageProps) {
   const [query, setQuery] = useState('');
 
diff --git a/packages/root-cms/ui/ui.tsx b/packages/root-cms/ui/ui.tsx
index 089a11d6..fe038fe1 100644
--- a/packages/root-cms/ui/ui.tsx
+++ b/packages/root-cms/ui/ui.tsx
@@ -26,6 +26,7 @@ import {SettingsPage} from './pages/SettingsPage/SettingsPage.js';
 import {TranslationsPage} from './pages/TranslationsPage/TranslationsPage.js';
 import './styles/global.css';
 import './styles/theme.css';
+import {DocPickerModal} from './components/DocPickerModal/DocPickerModal.js';
 
 declare global {
   interface Window {
@@ -58,16 +59,17 @@ function App() {
       }}
     >
       <NotificationsProvider>
-        <ModalsProvider
-          modals={{
-            [CopyDocModal.id]: CopyDocModal,
-            [EditJsonModal.id]: EditJsonModal,
-            [LocalizationModal.id]: LocalizationModal,
-            [PublishDocModal.id]: PublishDocModal,
-            [VersionHistoryModal.id]: VersionHistoryModal,
-          }}
-        >
-          <FirebaseContext.Provider value={window.firebase}>
+        <FirebaseContext.Provider value={window.firebase}>
+          <ModalsProvider
+            modals={{
+              [CopyDocModal.id]: CopyDocModal,
+              [DocPickerModal.id]: DocPickerModal,
+              [EditJsonModal.id]: EditJsonModal,
+              [LocalizationModal.id]: LocalizationModal,
+              [PublishDocModal.id]: PublishDocModal,
+              [VersionHistoryModal.id]: VersionHistoryModal,
+            }}
+          >
             <Router>
               <Route path="/cms" component={ProjectPage} />
               <Route path="/cms/assets" component={AssetsPage} />
@@ -84,8 +86,8 @@ function App() {
               <Route path="/cms/translations" component={TranslationsPage} />
               <Route default component={NotFoundPage} />
             </Router>
-          </FirebaseContext.Provider>
-        </ModalsProvider>
+          </ModalsProvider>
+        </FirebaseContext.Provider>
       </NotificationsProvider>
     </MantineProvider>
   );