Refactor image thumbnails to use optional Cell component on fields

Replace special-case image detection in CollectionPage with a generic
Cell component that any field can define. The image field now provides
its own ImageCell for thumbnail rendering in collection list views.

Author: mrprkr

packages/keystatic/src/app/CollectionPage.tsx

@@ -38,7 +38,6 @@ import {
 import { Heading, Text } from '@keystar/ui/typography';
 
 import { Config } from '../config';
-import { ComponentSchema } from '../form/api';
 import { sortBy } from './collection-sort';
 import l10nMessages from './l10n';
 import { useRouter } from './router';
@@ -567,10 +566,13 @@ function CollectionTable(
                   nameCell,
                   ...collection.columns.map(column => {
                     const raw = item.data?.[column];
-                    const isImage = isImageColumn(
-                      collection.schema,
-                      column
-                    );
+                    const field = collection.schema[column];
+                    const FieldCell =
+                      field &&
+                      'kind' in field &&
+                      field.kind === 'form' &&
+                      'Cell' in field &&
+                      field.Cell;
 
                     if (raw == null) {
                       return (
@@ -585,13 +587,13 @@ function CollectionTable(
 
                     const strVal = raw + '';
 
-                    if (isImage && isImagePath(strVal)) {
+                    if (FieldCell) {
                       return (
                         <Cell
                           key={column + item.name}
                           textValue={strVal}
                         >
-                          <ImageThumbnail src={strVal} />
+                          <FieldCell value={raw} />
                         </Cell>
                       );
                     }
@@ -620,55 +622,6 @@ function CollectionTable(
   );
 }
 
-const IMAGE_EXTENSIONS = new Set([
-  'jpg',
-  'jpeg',
-  'png',
-  'gif',
-  'webp',
-  'avif',
-  'svg',
-  'ico',
-  'bmp',
-]);
-
-function isImagePath(value: string): boolean {
-  const ext = value.split('.').pop()?.toLowerCase();
-  return ext != null && IMAGE_EXTENSIONS.has(ext);
-}
-
-function isImageColumn(
-  schema: Record<string, ComponentSchema>,
-  columnKey: string
-): boolean {
-  const field = schema[columnKey];
-  return field != null && 'formKind' in field && field.formKind === 'asset';
-}
-
-function ImageThumbnail({ src }: { src: string }) {
-  const [errored, setErrored] = useState(false);
-  if (errored) {
-    return (
-      <Text color="neutralTertiary" size="small">
-        {src}
-      </Text>
-    );
-  }
-  return (
-    <img
-      src={src}
-      alt=""
-      onError={() => setErrored(true)}
-      className={css({
-        width: tokenSchema.size.scale[400],
-        height: tokenSchema.size.scale[400],
-        objectFit: 'cover',
-        borderRadius: tokenSchema.size.radius.small,
-        flexShrink: 0,
-      })}
-    />
-  );
-}
 
 function getItemPath(
   basePath: string,

packages/keystatic/src/form/api.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, ComponentType } from 'react';
 import { Glob } from '../config';
 
 import { ChildField } from './fields/child';
@@ -48,6 +48,7 @@ export type BasicFormField<
     parse(value: FormFieldStoredValue): ReaderValue;
   };
   label?: string;
+  Cell?: ComponentType<{ value: any }>;
 };
 
 export type SlugFormField<
@@ -85,6 +86,7 @@ export type SlugFormField<
     ): ReaderValueAsSlugField;
   };
   label?: string;
+  Cell?: ComponentType<{ value: any }>;
 };
 
 export type AssetFormField<
@@ -127,6 +129,7 @@ export type AssetFormField<
     parse(value: FormFieldStoredValue): ReaderValue;
   };
   label?: string;
+  Cell?: ComponentType<{ value: any }>;
 };
 
 export type AssetsFormField<

packages/keystatic/src/form/fields/empty-field-ui.tsx

@@ -19,6 +19,7 @@ export let SlugFieldInput = empty,
   IntegerFieldInput = empty,
   NumberFieldInput = empty,
   ImageFieldInput = empty,
+  ImageCell = empty,
   FileFieldInput = empty,
   DatetimeFieldInput = empty,
   DateFieldInput = empty,

packages/keystatic/src/form/fields/image/index.tsx

@@ -3,7 +3,7 @@ import { AssetFormField } from '../../api';
 import { FieldDataError } from '../error';
 import { RequiredValidation, assertRequired } from '../utils';
 import { getSrcPrefix } from './getSrcPrefix';
-import { ImageFieldInput } from '#field-ui/image';
+import { ImageFieldInput, ImageCell } from '#field-ui/image';
 
 export function image<IsRequired extends boolean | undefined>({
   label,
@@ -34,6 +34,7 @@ export function image<IsRequired extends boolean | undefined>({
     kind: 'form',
     formKind: 'asset',
     label,
+    Cell: ImageCell,
     Input(props) {
       return (
         <ImageFieldInput

packages/keystatic/src/form/fields/image/ui.tsx

@@ -1,7 +1,8 @@
 import { ButtonGroup, ActionButton } from '@keystar/ui/button';
 import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { Flex, Box } from '@keystar/ui/layout';
-import { tokenSchema } from '@keystar/ui/style';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
 import { TextField } from '@keystar/ui/text-field';
 
 import { useIsInDocumentEditor } from '../document/DocumentEditor';
@@ -171,3 +172,29 @@ export function ImageFieldInput(
     </Flex>
   );
 }
+
+export function ImageCell({ value }: { value: string | null }) {
+  const [errored, setErrored] = useState(false);
+  if (!value) return null;
+  if (errored) {
+    return (
+      <Text color="neutralTertiary" size="small">
+        {value}
+      </Text>
+    );
+  }
+  return (
+    <img
+      src={value}
+      alt=""
+      onError={() => setErrored(true)}
+      className={css({
+        width: tokenSchema.size.scale[400],
+        height: tokenSchema.size.scale[400],
+        objectFit: 'cover',
+        borderRadius: tokenSchema.size.radius.small,
+        flexShrink: 0,
+      })}
+    />
+  );
+}