feat: expands rich text field config for better coverage

src/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.scss

@@ -25,21 +25,7 @@
     }
   }
 
-  .rich-text__wrap {
-    .field-type-gutter {
-      display: none;
-    }
-  }
-
   .rich-text__toolbar {
-    margin-bottom: 0;
-  }
-
-  .rich-text__editor {
-    background-color: var(--theme-elevation-0);
-    border: 1px solid var(--theme-elevation-150);
-    border-top: none;
-    min-height: base(5);
-    padding: base(.35) base(.5);
+    top: base(1);
   }
 }

src/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.tsx

@@ -13,9 +13,9 @@ import Form from '../../../../../../Form';
 import reduceFieldsToValues from '../../../../../../Form/reduceFieldsToValues';
 import Submit from '../../../../../../Submit';
 import { Field } from '../../../../../../../../../fields/config/types';
+import { useLocale } from '../../../../../../../utilities/Locale';
 
 import './index.scss';
-import { useLocale } from '../../../../../../../utilities/Locale';
 
 const baseClass = 'edit-upload-modal';
 
@@ -51,7 +51,7 @@ export const EditModal: React.FC<Props> = ({ slug, closeModal, relatedCollection
 
   useEffect(() => {
     const awaitInitialState = async () => {
-      const state = await buildStateFromSchema({ fieldSchema, data: element?.fields, user, operation: 'update', locale });
+      const state = await buildStateFromSchema({ fieldSchema, data: { ...element?.fields || {} }, user, operation: 'update', locale });
       setInitialState(state);
     };
 
@@ -63,7 +63,7 @@ export const EditModal: React.FC<Props> = ({ slug, closeModal, relatedCollection
       slug={slug}
       className={baseClass}
     >
-      <MinimalTemplate width="normal">
+      <MinimalTemplate width="wide">
         <header className={`${baseClass}__header`}>
           <h1>
             Edit

test/fields/collections/RichText/index.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig } from '../../../../src/collections/config/types';
+import { loremIpsum } from './loremIpsum';
 
 const RichTextFields: CollectionConfig = {
   slug: 'rich-text-fields',
@@ -38,6 +39,20 @@ const RichTextFields: CollectionConfig = {
       name: 'richText',
       type: 'richText',
       required: true,
+      admin: {
+        upload: {
+          collections: {
+            uploads: {
+              fields: [
+                {
+                  name: 'caption',
+                  type: 'richText',
+                },
+              ],
+            },
+          },
+        },
+      },
     },
   ],
 };
@@ -131,38 +146,44 @@ export const richTextDoc = {
     {
       children: [
         {
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+          text: '',
         },
       ],
+      type: 'upload',
+      value: {
+        id: '',
+      },
+      relationTo: 'uploads',
+      fields: {
+        caption: [
+          ...[...Array(4)].map(() => {
+            return {
+              children: [
+                {
+                  text: loremIpsum,
+                },
+              ],
+            };
+          }),
+        ],
+      },
     },
     {
       children: [
         {
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
-        },
-      ],
-    },
-    {
-      children: [
-        {
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
-        },
-      ],
-    },
-    {
-      children: [
-        {
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
-        },
-      ],
-    },
-    {
-      children: [
-        {
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+          text: '',
         },
       ],
     },
+    ...[...Array(4)].map(() => {
+      return {
+        children: [
+          {
+            text: loremIpsum,
+          },
+        ],
+      };
+    }),
   ],
 };
 

test/fields/collections/RichText/loremIpsum.ts

@@ -0,0 +1 @@
+export const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.'

test/fields/collections/Upload/index.ts

@@ -1,8 +1,11 @@
 import { CollectionConfig } from '../../../../src/collections/config/types';
+import path from 'path';
 
 const Uploads: CollectionConfig = {
   slug: 'uploads',
-  upload: true,
+  upload: {
+    staticDir: path.resolve(__dirname, './uploads'),
+  },
   fields: [
     {
       type: 'text',

test/fields/config.ts

@@ -69,13 +69,19 @@ export default buildConfig({
 
     if (fs.existsSync(uploadsDir)) fs.readdirSync(uploadsDir).forEach((f) => fs.rmSync(`${uploadsDir}/${f}`));
 
-    const filePath = path.resolve(__dirname, './collections/Upload/payload.png');
+    const filePath = path.resolve(__dirname, './collections/Upload/payload.jpg');
     const file = getFileByPath(filePath);
 
     const createdUploadDoc = await payload.create({ collection: 'uploads', data: uploadsDoc, file });
 
     const richTextDocWithRelationship = { ...richTextDoc };
-    richTextDocWithRelationship.richText[2].value = { id: createdTextDoc.id };
+
+    const richTextRelationshipIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'relationship');
+    richTextDocWithRelationship.richText[richTextRelationshipIndex].value = { id: createdTextDoc.id };
+
+    const richTextUploadIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'upload');
+    richTextDocWithRelationship.richText[richTextUploadIndex].value = { id: createdUploadDoc.id };
+
     await payload.create({ collection: 'rich-text-fields', data: richTextDocWithRelationship });
   },
 });