From d54d511133c8bec1cb3af42d1f0e4f9d386ea78e Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Wed, 19 Jan 2022 17:37:29 -0500
Subject: [PATCH] docs: updates docs to include images for the RTE upload docs

---
 demo/collections/RichText.ts                  | 28 +++++++++----------
 docs/fields/rich-text.mdx                     | 20 +++++++++++--
 .../elements/upload/Element/index.tsx         |  2 +-
 3 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/demo/collections/RichText.ts b/demo/collections/RichText.ts
index bcd3767ab8..72d8df5a1d 100644
--- a/demo/collections/RichText.ts
+++ b/demo/collections/RichText.ts
@@ -22,24 +22,24 @@ const RichText: CollectionConfig = {
           collections: {
             media: {
               fields: [
-                {
-                  type: 'text',
-                  name: 'altText',
-                  label: 'Alt Text',
-                },
                 {
                   type: 'textarea',
                   name: 'caption',
                   label: 'Caption',
                 },
                 {
-                  type: 'group',
-                  name: 'meta',
+                  type: 'row',
                   fields: [
+                    {
+                      type: 'relationship',
+                      relationTo: 'admins',
+                      name: 'linkToAdmin',
+                      label: 'Link to Admin',
+                    },
                     {
                       type: 'select',
-                      name: 'alignment',
-                      label: 'Alignment',
+                      name: 'imageAlignment',
+                      label: 'Image Alignment',
                       options: [
                         {
                           label: 'Left',
@@ -55,13 +55,13 @@ const RichText: CollectionConfig = {
                         },
                       ],
                     },
-                    {
-                      type: 'relationship',
-                      relationTo: 'admins',
-                      name: 'author',
-                    },
                   ],
                 },
+                {
+                  type: 'checkbox',
+                  name: 'wrapText',
+                  label: 'Wrap Text',
+                },
               ],
             },
           },
diff --git a/docs/fields/rich-text.mdx b/docs/fields/rich-text.mdx
index b5694a488c..b86fd08760 100644
--- a/docs/fields/rich-text.mdx
+++ b/docs/fields/rich-text.mdx
@@ -81,6 +81,12 @@ Set this property to `true` to hide this field's gutter within the admin panel.
 
 This allows [fields](/docs/fields/overview) to be saved as meta data on an upload field inside the Rich Text Editor. When this is present, the fields will render inside a modal that can be opened by clicking the "edit" button on the upload element.
 
+![RichText upload element](https://payloadcms.com/images/fields/richText/rte-upload-element.jpg)
+*RichText field using the upload element*
+
+![RichText upload element modal](https://payloadcms.com/images/fields/richText/rte-upload-fields-modal.jpg)
+*RichText upload element modal displaying fields from the config*
+
 ### Relationship element
 
 The built-in `relationship` element is a powerful way to reference other Documents directly within your Rich Text editor.
@@ -147,7 +153,7 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
             ]
           }
         ],
-        elements: [
+        leaves: [
           'bold',
           'italic',
           {
@@ -158,7 +164,17 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
               // any plugins that are required by this leaf go here
             ]
           }
-        ]
+        ],
+        upload: {
+          collections: {
+            media: {
+              fields: [
+                // any fields that you would like to save
+                // on an upload element in the `media` collection
+              ],
+            },
+          },
+        },
       }
     }
   ]
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
index 10f81ce58d..233e518380 100644
--- a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
+++ b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
@@ -98,7 +98,7 @@ const Element = ({ attributes, children, element, path, fieldProps }) => {
                     e.preventDefault();
                     setModalToRender('edit');
                   }}
-                  tooltip="Edit Upload"
+                  tooltip="Upload Fields"
                 />
               )}
               <Button