fix: renders rte upload drawer #2178

src/admin/components/elements/Button/index.tsx

@@ -7,6 +7,7 @@ import x from '../../icons/X';
 import chevron from '../../icons/Chevron';
 import edit from '../../icons/Edit';
 import swap from '../../icons/Swap';
+import linkIcon from '../../icons/Link';
 import Tooltip from '../Tooltip';
 
 import './index.scss';
@@ -17,6 +18,7 @@ const icons = {
   chevron,
   edit,
   swap,
+  link: linkIcon,
 };
 
 const baseClass = 'btn';

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

@@ -49,16 +49,18 @@
     outline: none;
   }
 
+  .rich-text-relationship__doc-drawer-toggler {
+    text-decoration: underline;
+    pointer-events: all;
+    line-height: inherit;
+  }
+
   &__actions {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-left: base(0.5);
 
-    .rich-text-relationship__doc-drawer-toggler {
-      pointer-events: all;
-    }
-
     & > *:not(:last-child) {
       margin-right: base(.25);
     }

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

@@ -146,25 +146,13 @@ const Element: React.FC<Props> = (props) => {
         <p className={`${baseClass}__label`}>
           {t('labelRelationship', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
         </p>
-        <p className={`${baseClass}__title`}>
+        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
-          {data[relatedCollection?.admin?.useAsTitle || 'id']}
+          <p className={`${baseClass}__title`}>
-        </p>
+            {data[relatedCollection?.admin?.useAsTitle || 'id']}
+          </p>
+        </DocumentDrawerToggler>
       </div>
       <div className={`${baseClass}__actions`}>
-        {value?.id && (
-          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
-            <Button
-              icon="edit"
-              round
-              buttonStyle="icon-label"
-              el="div"
-              onClick={(e) => {
-                e.preventDefault();
-              }}
-              tooltip={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
-            />
-          </DocumentDrawerToggler>
-        )}
         <ListDrawerToggler
           disabled={fieldProps?.admin?.readOnly}
           className={`${baseClass}__list-drawer-toggler`}

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

@@ -0,0 +1,82 @@
+import { useModal } from '@faceless-ui/modal';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlateStatic } from 'slate-react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ElementProps } from '..';
+import fieldTypes from '../../../../..';
+import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
+import { Drawer } from '../../../../../../../elements/Drawer';
+import { useAuth } from '../../../../../../../utilities/Auth';
+import { useLocale } from '../../../../../../../utilities/Locale';
+import Form from '../../../../../../Form';
+import RenderFields from '../../../../../../RenderFields';
+import FormSubmit from '../../../../../../Submit';
+import buildStateFromSchema from '../../../../../../Form/buildStateFromSchema';
+import { getTranslation } from '../../../../../../../../../utilities/getTranslation';
+
+export const UploadDrawer: React.FC<ElementProps & {
+  drawerSlug: string
+  relatedCollection: SanitizedCollectionConfig
+}> = (props) => {
+  const editor = useSlateStatic();
+
+  const {
+    fieldProps,
+    relatedCollection,
+    drawerSlug,
+    element,
+  } = props;
+
+  const { t, i18n } = useTranslation();
+  const locale = useLocale();
+  const { user } = useAuth();
+  const { closeModal } = useModal();
+  const [initialState, setInitialState] = useState({});
+  const fieldSchema = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;
+
+  const handleUpdateEditData = useCallback((_, data) => {
+    const newNode = {
+      fields: data,
+    };
+
+    const elementPath = ReactEditor.findPath(editor, element);
+
+    Transforms.setNodes(
+      editor,
+      newNode,
+      { at: elementPath },
+    );
+    closeModal(drawerSlug);
+  }, [closeModal, editor, element, drawerSlug]);
+
+  useEffect(() => {
+    const awaitInitialState = async () => {
+      const state = await buildStateFromSchema({ fieldSchema, data: { ...element?.fields || {} }, user, operation: 'update', locale, t });
+      setInitialState(state);
+    };
+
+    awaitInitialState();
+  }, [fieldSchema, element.fields, user, locale, t]);
+
+  return (
+    <Drawer
+      slug={drawerSlug}
+      title={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
+    >
+      <Form
+        onSubmit={handleUpdateEditData}
+        initialState={initialState}
+      >
+        <RenderFields
+          readOnly={false}
+          fieldTypes={fieldTypes}
+          fieldSchema={fieldSchema}
+        />
+        <FormSubmit>
+          {t('fields:saveChanges')}
+        </FormSubmit>
+      </Form>
+    </Drawer>
+  );
+};

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

@@ -84,8 +84,22 @@
     }
   }
 
+  &__upload-drawer-toggler  {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    line-height: inherit;
+  }
+
+  &__doc-drawer-toggler {
+    text-decoration: underline;
+  }
+
   &__doc-drawer-toggler,
-  &__list-drawer-toggler {
+  &__list-drawer-toggler,
+  &__upload-drawer-toggler {
     & > * {
       margin: 0;
     }

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

@@ -13,6 +13,9 @@ import { useListDrawer } from '../../../../../../elements/ListDrawer';
 import { SanitizedCollectionConfig } from '../../../../../../../../collections/config/types';
 import { Props as RichTextProps } from '../../../types';
 import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition';
+import { useDrawerSlug } from '../../../../../../elements/Drawer/useDrawerSlug';
+import { UploadDrawer } from './UploadDrawer';
+import { DrawerToggler } from '../../../../../../elements/Drawer';
 
 import './index.scss';
 
@@ -22,7 +25,7 @@ const initialParams = {
   depth: 0,
 };
 
-type ElementProps = {
+export type ElementProps = {
   attributes: HTMLAttributes<HTMLDivElement>
   children: React.ReactNode
   element: any
@@ -48,6 +51,8 @@ const Element: React.FC<ElementProps> = (props) => {
   const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0);
   const [relatedCollection, setRelatedCollection] = useState<SanitizedCollectionConfig>(() => collections.find((coll) => coll.slug === relationTo));
 
+  const drawerSlug = useDrawerSlug('upload-drawer');
+
   const [
     ListDrawer,
     ListDrawerToggler,
@@ -142,6 +147,8 @@ const Element: React.FC<ElementProps> = (props) => {
     closeListDrawer();
   }, [closeListDrawer, editor, element, collections]);
 
+  const customFields = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;
+
   return (
     <div
       className={[
@@ -168,8 +175,12 @@ const Element: React.FC<ElementProps> = (props) => {
               {getTranslation(relatedCollection.labels.singular, i18n)}
             </div>
             <div className={`${baseClass}__actions`}>
-              {value?.id && (
+              {customFields?.length > 0 && (
-                <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
+                <DrawerToggler
+                  slug={drawerSlug}
+                  className={`${baseClass}__upload-drawer-toggler`}
+                  disabled={fieldProps?.admin?.readOnly}
+                >
                   <Button
                     icon="edit"
                     round
@@ -178,9 +189,9 @@ const Element: React.FC<ElementProps> = (props) => {
                     onClick={(e) => {
                       e.preventDefault();
                     }}
-                    tooltip={t('general:editLabel', { label: relatedCollection.labels.singular })}
+                    tooltip={t('fields:editRelationship')}
                   />
-                </DocumentDrawerToggler>
+                </DrawerToggler>
               )}
               <ListDrawerToggler
                 className={`${baseClass}__list-drawer-toggler`}
@@ -214,9 +225,11 @@ const Element: React.FC<ElementProps> = (props) => {
           </div>
         </div>
         <div className={`${baseClass}__bottomRow`}>
-          <strong>
+          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
-            {data?.filename}
+            <strong>
-          </strong>
+              {data?.filename}
+            </strong>
+          </DocumentDrawerToggler>
         </div>
       </div>
       {children}
@@ -224,6 +237,11 @@ const Element: React.FC<ElementProps> = (props) => {
         <DocumentDrawer onSave={updateUpload} />
       )}
       <ListDrawer onSelect={swapUpload} />
+      <UploadDrawer
+        drawerSlug={drawerSlug}
+        relatedCollection={relatedCollection}
+        {...props}
+      />
     </div>
   );
 };

src/admin/components/icons/Link/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles';
+
+.icon--link {
+  width: $baseline;
+  height: $baseline;
+
+  .stroke {
+    stroke: var(--theme-elevation-800);
+    stroke-width: $style-stroke-width;
+  }
+}

src/admin/components/icons/Link/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './index.scss';
+
 const LinkIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
@@ -7,7 +9,7 @@ const LinkIcon: React.FC = () => (
     focusable="false"
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
-    className="graphic link"
+    className="graphic link icon icon--link"
   >
     <path
       fill="none"

src/translations/cs.json

@@ -106,6 +106,7 @@
     "customURL": "Vlastní URL",
     "editLabelData": "Upravit data {{label}}",
     "editLink": "Upravit odkaz",
+    "editRelationship": "Upravit vztah",
     "enterURL": "Zadejte URL",
     "internalLink": "Interní odkaz",
     "itemsAndMore": "{{items}} a {{count}} dalších",

src/translations/de.json

@@ -105,6 +105,7 @@
     "collapseAll": "Alle einklappen",
     "customURL": "Eigene URL",
     "editLink": "Bearbeite Link",
+    "editRelationship": "Beziehung Hinzufügen",
     "editLabelData": "{{label}} bearbeiten",
     "enterURL": "URL eingeben",
     "internalLink": "Interner Link",

src/translations/en.json

@@ -107,6 +107,7 @@
     "customURL": "Custom URL",
     "editLabelData": "Edit {{label}} data",
     "editLink": "Edit Link",
+    "editRelationship": "Edit Relationship",
     "enterURL": "Enter a URL",
     "internalLink": "Internal Link",
     "itemsAndMore": "{{items}} and {{count}} more",

src/translations/es.json

@@ -107,6 +107,7 @@
     "customURL": "URL Personalizado",
     "editLabelData": "Editar información de {{label}}",
     "editLink": "Editar Enlace",
+    "editRelationship": "Editar Relación",
     "enterURL": "Ingresar URL",
     "internalLink": "Enlace Interno",
     "itemsAndMore": "{{items}} y {{count}} más",

src/translations/fr.json

@@ -103,6 +103,8 @@
     "chooseLabel": "Choisir un(e) {{label}}",
     "collapseAll": "Tout réduire",
     "editLabelData": "Modifier les données de ou du {{label}}",
+    "editLink": "Modifier le lien",
+    "editRelationship": "Modifier la relation",
     "itemsAndMore": "{{items}} et {{count}} de plus",
     "labelRelationship": "Relation de ou du {{label}} ",
     "latitude": "Latitude",

src/translations/hr.json

@@ -107,6 +107,7 @@
     "customURL": "Prilagođeni URL",
     "editLabelData": "Uredi {{label}} podatke",
     "editLink": "Uredi poveznicu",
+    "editRelationship": "Uredi odnos",
     "enterURL": "Unesi URL",
     "internalLink": "Interna poveznika",
     "itemsAndMore": "{{items}} i {{count}} više",

src/translations/hu.json

@@ -107,6 +107,7 @@
         "customURL": "Egyéni URL",
         "editLabelData": "{{label}} adatok szerkesztése",
         "editLink": "Link szerkesztése",
+        "editRelationship": "Kapcsolat hozzáadása",
         "enterURL": "Adjon meg egy URL-t",
         "internalLink": "Belső link",
         "itemsAndMore": "{{items}} és további {{count}}",
@@ -324,4 +325,4 @@
         "viewingVersions": "A {{entityLabel}} {{documentTitle}} verzióinak megtekintése",
         "viewingVersionsGlobal": "A globális {{entityLabel}} verzióinak megtekintése"
     }
-}
+}

src/translations/index.ts

@@ -3,7 +3,7 @@ import de from './de.json';
 import en from './en.json';
 import es from './es.json';
 import fr from './fr.json';
-import hr from "./hr.json";
+import hr from './hr.json';
 import it from './it.json';
 import ja from './ja.json';
 import my from './my.json';

src/translations/it.json

@@ -103,6 +103,8 @@
     "chooseLabel": "Scegli {{label}}",
     "collapseAll": "Comprimi tutto",
     "editLabelData": "Modifica i dati di {{label}}",
+    "editLink": "Modifica Collegamento",
+    "editRelationship": "Modifica Relazione",
     "itemsAndMore": "{{items}} e altri {{count}}",
     "labelRelationship": "Relazione {{label}}",
     "latitude": "Latitudine",

src/translations/ja.json

@@ -102,6 +102,8 @@
     "chooseLabel": "{{label}} を選択",
     "collapseAll": "すべて閉じる",
     "editLabelData": "{{label}} データを編集",
+    "editLink": "リンクを編集",
+    "editRelationship": "リレーションシップを編集",
     "itemsAndMore": "{{items}} 他{{count}}件",
     "labelRelationship": "{{label}} リレーションシップ",
     "latitude": "緯度",

src/translations/my.json

@@ -102,6 +102,8 @@
     "chooseLabel": "{{label}} အားရွေးချယ်ပါ။",
     "collapseAll": "အားလုံးကို ခေါက်သိမ်းပါ။",
     "editLabelData": "ဒေတာ {{label}} ကို တည်းဖြတ်ပါ။",
+    "editLink": "လင့်ခ်ကို တည်းဖြတ်ပါ။",
+    "editRelationship": "Relationship ကို တည်းဖြတ်ပါ။",
     "itemsAndMore": "{{items}} နှင့် နောက်ထပ် {{count}} ခု",
     "labelRelationship": "{{label}} Relationship",
     "latitude": "vĩ độ",

src/translations/nb.json

@@ -107,6 +107,7 @@
     "customURL": "Egendefinert URL",
     "editLabelData": "Rediger {{label}}-data",
     "editLink": "Rediger lenke",
+    "editRelationship": "Rediger relasjon",
     "enterURL": "Skriv inn en URL",
     "internalLink": "Intern lenke",
     "itemsAndMore": "{{items}} og {{count}} flere",

src/translations/nl.json

@@ -103,6 +103,8 @@
     "chooseLabel": "Kies {{label}}",
     "collapseAll": "Alles samenvouwen",
     "editLabelData": "Bewerk gegevens van {{label}}",
+    "editLink": "Link bewerken",
+    "editRelationship": "Relatie Relatie",
     "itemsAndMore": "{{items}} en {{count}} meer",
     "labelRelationship": "{{label}} relatie",
     "latitude": "Breedtegraad",

src/translations/pl.json

@@ -102,6 +102,8 @@
     "chooseLabel": "Wybierz {{label}}",
     "collapseAll": "Zwiń wszystko",
     "editLabelData": "Edytuj dane {{label}}",
+    "editLink": "Edytuj Link",
+    "editRelationship": "Edytuj Relacje",
     "itemsAndMore": "{{items}} i {{count}} więcej",
     "labelRelationship": "Relacja {{label}}",
     "latitude": "Szerokość",

src/translations/pt.json

@@ -102,6 +102,8 @@
     "chooseLabel": "Escolher {{label}}",
     "collapseAll": "Recolher todos",
     "editLabelData": "Editar dados de {{label}}",
+    "editLink": "Editar Link",
+    "editRelationship": "Editar Relacionamento",
     "itemsAndMore": "{{items}} e mais {{count}}",
     "labelRelationship": "Relacionado a {{label}}",
     "latitude": "Latitude",

src/translations/ru.json

@@ -107,6 +107,7 @@
     "customURL": "Пользовательский URL",
     "editLabelData": "Редактировать данные {{label}}",
     "editLink": "Редактировать ссылку",
+    "editRelationship": "Редактировать Отношения",
     "enterURL": "Введите URL",
     "internalLink": "Внутренняя ссылка",
     "itemsAndMore": "{{items}} и ещё {{count}}",

src/translations/sv.json

@@ -103,6 +103,8 @@
     "chooseLabel": "Välj {{label}}",
     "collapseAll": "kollapsa Alla",
     "editLabelData": "Redigera {{label}} data",
+    "editLink": "Redigera Länk",
+    "editRelationship": "Redigera Relation",
     "itemsAndMore": "{{items}} och {{count}} mer",
     "labelRelationship": "{{label}} Relation",
     "latitude": "Latitud",

src/translations/th.json

@@ -107,6 +107,7 @@
     "customURL": "URL ที่กำหนดเอง",
     "editLabelData": "แก้ไขข้อมูล {{label}}",
     "editLink": "แก้ไขลิงก์",
+    "editRelationship": "แก้ไขความสัมพันธ์",
     "enterURL": "ระบุ URL",
     "internalLink": "ลิงก์ภายใน",
     "itemsAndMore": "{{items}} และเพิ่มเติมอีก {{count}}",

src/translations/tr.json

@@ -94,6 +94,7 @@
     "chooseDocumentToLink": "Bağlantı verilecek bir döküman seçin.",
     "customURL": "Özel URL",
     "editLink": "Bağlantıyı Düzenle",
+    "editRelationship": "İlişkiyi Ekle",
     "enterURL": "Bir URL girin",
     "internalLink": "İç bağlantı",
     "linkType": "Bağlantı türü",

src/translations/translation-schema.json

@@ -384,6 +384,9 @@
         "editLink": {
           "type": "string"
         },
+        "editRelationship": {
+          "type": "string"
+        },
         "enterURL": {
           "type": "string"
         },
@@ -497,6 +500,7 @@
         "chooseDocumentToLink",
         "customURL",
         "editLink",
+        "editRelationship",
         "enterURL",
         "internalLink",
         "linkType",

src/translations/ua.json

@@ -105,6 +105,7 @@
     "customURL": "Власний URL",
     "editLabelData": "Редагувати данні {{label}}",
     "editLink": "Редагувати посилання",
+    "editRelationship": "Редагувати взаємозв'язок",
     "enterURL": "Введіть URL",
     "internalLink": "Внутрішнє посилання",
     "itemsAndMore": "{{items}} і ще {{count}}",

src/translations/vi.json

@@ -103,6 +103,8 @@
     "chooseLabel": "Chọn: {{label}}",
     "collapseAll": "Ẩn toàn bộ",
     "editLabelData": "Chỉnh sửa nội dung của: {{label}}",
+    "editLink": "Chỉnh sửa liên kết",
+    "editRelationship": "Chỉnh sửa mối quan hệ",
     "itemsAndMore": "{{items}} và {{count}} món nữa",
     "labelRelationship": "Mối quan hệ của {{label}} (Relationship)",
     "latitude": "Vĩ độ",

src/translations/zh.json

@@ -107,6 +107,7 @@
     "customURL": "自定义URL",
     "editLabelData": "编辑{{label}}数据",
     "editLink": "编辑链接",
+    "editRelationship": "编辑关系",
     "enterURL": "输入一个URL",
     "internalLink": "内部链接",
     "itemsAndMore": "{{items}}和{{count}}更多",

test/fields/e2e.spec.ts

@@ -480,7 +480,20 @@ describe('fields', () => {
         await expect(editLinkModal).toBeHidden();
       });
 
-      test('should open uploads drawer from read-only field', async () => {
+      test('should open upload drawer and render custom relationship fields', async () => {
+        navigateToRichTextFields();
+        const field = await page.locator('#field-richText');
+        const button = await field.locator('button.rich-text-upload__upload-drawer-toggler');
+
+        await button.click();
+
+        const documentDrawer = await page.locator('[id^=drawer_1_upload-drawer-]');
+        await expect(documentDrawer).toBeVisible();
+        const caption = await documentDrawer.locator('#field-caption');
+        await expect(caption).toBeVisible();
+      });
+
+      test('should open upload document drawer from read-only field', async () => {
         navigateToRichTextFields();
         const field = await page.locator('#field-richTextReadOnly');
         const button = await field.locator('button.rich-text-upload__doc-drawer-toggler.doc-drawer__toggler');
@@ -491,7 +504,7 @@ describe('fields', () => {
         await expect(documentDrawer).toBeVisible();
       });
 
-      test('should open relationship drawer from read-only field', async () => {
+      test('should open relationship document drawer from read-only field', async () => {
         navigateToRichTextFields();
         const field = await page.locator('#field-richTextReadOnly');
         const button = await field.locator('button.rich-text-relationship__doc-drawer-toggler.doc-drawer__toggler');