payload 1.3.4 → 1.4.0

package/dist/admin/components/forms/field-types/RichText/elements/isListActive.js

@@ -1,19 +1,21 @@
 import { Editor, Element } from 'slate';
+import { getCommonBlock } from './getCommonBlock';
 const isListActive = (editor, format) => {
-    var _a;
-    let parentLI;
-    try {
-        parentLI = Editor.parent(editor, editor.selection);
-    }
-    catch (e) {
-        // swallow error, Slate
-    }
-    if (((_a = parentLI === null || parentLI === void 0 ? void 0 : parentLI[1]) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-        const ancestor = Editor.above(editor, {
-            at: parentLI[1],
-        });
-        return Element.isElement(ancestor[0]) && ancestor[0].type === format;
-    }
-    return false;
+    if (!editor.selection)
+        return false;
+    const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor);
+    if (Editor.isEditor(topmostSelectedNode))
+        return false;
+    const [match] = Array.from(Editor.nodes(editor, {
+        at: topmostSelectedNodePath,
+        mode: 'lowest',
+        match: (node, path) => {
+            return !Editor.isEditor(node)
+                && Element.isElement(node)
+                && node.type === format
+                && path.length >= topmostSelectedNodePath.length - 2;
+        },
+    }));
+    return !!match;
 };
 export default isListActive;

package/dist/admin/components/forms/field-types/RichText/elements/isWithinListItem.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from 'slate';
+export declare const isWithinListItem: (editor: Editor) => boolean;

package/dist/admin/components/forms/field-types/RichText/elements/isWithinListItem.js

@@ -0,0 +1,15 @@
+import { Editor, Element } from 'slate';
+export const isWithinListItem = (editor) => {
+    var _a;
+    let parentLI;
+    try {
+        parentLI = Editor.parent(editor, editor.selection);
+    }
+    catch (e) {
+        // swallow error, Slate
+    }
+    if (Element.isElement(parentLI === null || parentLI === void 0 ? void 0 : parentLI[0]) && ((_a = parentLI === null || parentLI === void 0 ? void 0 : parentLI[0]) === null || _a === void 0 ? void 0 : _a.type) === 'li') {
+        return true;
+    }
+    return false;
+};

package/dist/admin/components/forms/field-types/RichText/elements/link/Button/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Props as RichTextFieldProps } from '../../../types';
+export declare const LinkButton: React.FC<{
+    path: string;
+    fieldProps: RichTextFieldProps;
+}>;

package/dist/admin/components/forms/field-types/RichText/elements/link/Button/index.js

@@ -0,0 +1,98 @@
+import React, { Fragment, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ReactEditor, useSlate } from 'slate-react';
+import { Transforms, Range } from 'slate';
+import { useModal } from '@faceless-ui/modal';
+import ElementButton from '../../Button';
+import LinkIcon from '../../../../../../icons/Link';
+import reduceFieldsToValues from '../../../../../Form/reduceFieldsToValues';
+import { useConfig } from '../../../../../../utilities/Config';
+import isElementActive from '../../isActive';
+import { unwrapLink } from '../utilities';
+import { useEditDepth } from '../../../../../../utilities/EditDepth';
+import { formatDrawerSlug } from '../../../../../../elements/Drawer';
+import { getBaseFields } from '../LinkDrawer/baseFields';
+import { LinkDrawer } from '../LinkDrawer';
+const insertLink = (editor, fields) => {
+    const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
+    const data = reduceFieldsToValues(fields, true);
+    const newLink = {
+        type: 'link',
+        linkType: data.linkType,
+        url: data.url,
+        doc: data.doc,
+        newTab: data.newTab,
+        fields: data.fields,
+        children: [],
+    };
+    if (isCollapsed || !editor.selection) {
+        // If selection anchor and focus are the same,
+        // Just inject a new node with children already set
+        Transforms.insertNodes(editor, {
+            ...newLink,
+            children: [{ text: String(data.text) }],
+        });
+    }
+    else if (editor.selection) {
+        // Otherwise we need to wrap the selected node in a link,
+        // Delete its old text,
+        // Move the selection one position forward into the link,
+        // And insert the text back into the new link
+        Transforms.wrapNodes(editor, newLink, { split: true });
+        Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' });
+        Transforms.move(editor, { distance: 1, unit: 'offset' });
+        Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
+    }
+    ReactEditor.focus(editor);
+};
+export const LinkButton = ({ fieldProps }) => {
+    var _a, _b;
+    const customFieldSchema = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.fields;
+    const { t } = useTranslation(['upload', 'general']);
+    const editor = useSlate();
+    const config = useConfig();
+    const [fieldSchema] = useState(() => {
+        const fields = [
+            ...getBaseFields(config),
+        ];
+        if (customFieldSchema) {
+            fields.push({
+                name: 'fields',
+                type: 'group',
+                admin: {
+                    style: {
+                        margin: 0,
+                        padding: 0,
+                        borderTop: 0,
+                        borderBottom: 0,
+                    },
+                },
+                fields: customFieldSchema,
+            });
+        }
+        return fields;
+    });
+    const { openModal, closeModal } = useModal();
+    const uuid = useId();
+    const editDepth = useEditDepth();
+    const drawerSlug = formatDrawerSlug({
+        slug: `rich-text-link-${uuid}`,
+        depth: editDepth,
+    });
+    return (React.createElement(Fragment, null,
+        React.createElement(ElementButton, { format: "link", tooltip: t('fields:addLink'), className: "link", onClick: () => {
+                if (isElementActive(editor, 'link')) {
+                    unwrapLink(editor);
+                }
+                else {
+                    openModal(drawerSlug);
+                }
+            } },
+            React.createElement(LinkIcon, null)),
+        React.createElement(LinkDrawer, { drawerSlug: drawerSlug, handleModalSubmit: (fields) => {
+                insertLink(editor, fields);
+                closeModal(drawerSlug);
+            }, fieldSchema: fieldSchema, handleClose: () => {
+                closeModal(drawerSlug);
+            } })));
+};

package/dist/admin/components/forms/field-types/RichText/elements/link/Element/index.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { Props as RichTextFieldProps } from '../../../types';
+import './index.scss';
+export declare const LinkElement: React.FC<{
+    attributes: HTMLAttributes<HTMLDivElement>;
+    children: React.ReactNode;
+    element: any;
+    fieldProps: RichTextFieldProps;
+    editorRef: React.RefObject<HTMLDivElement>;
+}>;

package/dist/admin/components/forms/field-types/RichText/elements/link/{Element.js → Element/index.js}

@@ -1,33 +1,52 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useId, useState } from 'react';
 import { ReactEditor, useSlate } from 'slate-react';
 import { Transforms, Node, Editor } from 'slate';
 import { useModal } from '@faceless-ui/modal';
 import { Trans, useTranslation } from 'react-i18next';
-import { unwrapLink } from './utilities';
-import Popup from '../../../../../elements/Popup';
-import { EditModal } from './Modal';
-import { modalSlug as baseModalSlug } from './shared';
-import buildStateFromSchema from '../../../../Form/buildStateFromSchema';
-import { useAuth } from '../../../../../utilities/Auth';
-import { useLocale } from '../../../../../utilities/Locale';
-import { useConfig } from '../../../../../utilities/Config';
-import { getBaseFields } from './Modal/baseFields';
-import reduceFieldsToValues from '../../../../Form/reduceFieldsToValues';
-import deepCopyObject from '../../../../../../../utilities/deepCopyObject';
-import Button from '../../../../../elements/Button';
-import { getTranslation } from '../../../../../../../utilities/getTranslation';
+import { unwrapLink } from '../utilities';
+import Popup from '../../../../../../elements/Popup';
+import { LinkDrawer } from '../LinkDrawer';
+import buildStateFromSchema from '../../../../../Form/buildStateFromSchema';
+import { useAuth } from '../../../../../../utilities/Auth';
+import { useLocale } from '../../../../../../utilities/Locale';
+import { useConfig } from '../../../../../../utilities/Config';
+import { getBaseFields } from '../LinkDrawer/baseFields';
+import reduceFieldsToValues from '../../../../../Form/reduceFieldsToValues';
+import deepCopyObject from '../../../../../../../../utilities/deepCopyObject';
+import Button from '../../../../../../elements/Button';
+import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+import { useEditDepth } from '../../../../../../utilities/EditDepth';
+import { formatDrawerSlug } from '../../../../../../elements/Drawer';
 import './index.scss';
 const baseClass = 'rich-text-link';
-// TODO: Multiple modal windows stacked go boom (rip). Edit Upload in fields -> rich text
-export const LinkElement = ({ attributes, children, element, editorRef, fieldProps }) => {
+const insertChange = (editor, fields, customFieldSchema) => {
+    const data = reduceFieldsToValues(fields, true);
+    const [, parentPath] = Editor.above(editor);
+    const newNode = {
+        newTab: data.newTab,
+        url: data.url,
+        linkType: data.linkType,
+        doc: data.doc,
+    };
+    if (customFieldSchema) {
+        newNode.fields = data.fields;
+    }
+    Transforms.setNodes(editor, newNode, { at: parentPath });
+    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' });
+    Transforms.move(editor, { distance: 1, unit: 'offset' });
+    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
+    ReactEditor.focus(editor);
+};
+export const LinkElement = (props) => {
     var _a, _b;
+    const { attributes, children, element, editorRef, fieldProps, } = props;
     const customFieldSchema = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.fields;
     const editor = useSlate();
     const config = useConfig();
     const { user } = useAuth();
     const locale = useLocale();
     const { t, i18n } = useTranslation('fields');
-    const { openModal, toggleModal } = useModal();
+    const { openModal, toggleModal, closeModal } = useModal();
     const [renderModal, setRenderModal] = useState(false);
     const [renderPopup, setRenderPopup] = useState(false);
     const [initialState, setInitialState] = useState({});
@@ -52,7 +71,12 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
         }
         return fields;
     });
-    const modalSlug = `${baseModalSlug}-${fieldProps.path}`;
+    const uuid = useId();
+    const editDepth = useEditDepth();
+    const drawerSlug = formatDrawerSlug({
+        slug: `rich-text-link-${uuid}`,
+        depth: editDepth,
+    });
     const handleTogglePopup = useCallback((render) => {
         if (!render) {
             setRenderPopup(render);
@@ -75,28 +99,12 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
     }, [renderModal, element, fieldSchema, user, locale, t]);
     return (React.createElement("span", { className: baseClass, ...attributes },
         React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
-            renderModal && (React.createElement(EditModal, { modalSlug: modalSlug, fieldSchema: fieldSchema, close: () => {
-                    toggleModal(modalSlug);
+            renderModal && (React.createElement(LinkDrawer, { drawerSlug: drawerSlug, fieldSchema: fieldSchema, handleClose: () => {
+                    toggleModal(drawerSlug);
                     setRenderModal(false);
                 }, handleModalSubmit: (fields) => {
-                    toggleModal(modalSlug);
-                    setRenderModal(false);
-                    const data = reduceFieldsToValues(fields, true);
-                    const [, parentPath] = Editor.above(editor);
-                    const newNode = {
-                        newTab: data.newTab,
-                        url: data.url,
-                        linkType: data.linkType,
-                        doc: data.doc,
-                    };
-                    if (customFieldSchema) {
-                        newNode.fields = data.fields;
-                    }
-                    Transforms.setNodes(editor, newNode, { at: parentPath });
-                    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' });
-                    Transforms.move(editor, { distance: 1, unit: 'offset' });
-                    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
-                    ReactEditor.focus(editor);
+                    insertChange(editor, fields, customFieldSchema);
+                    closeModal(drawerSlug);
                 }, initialState: initialState })),
             React.createElement(Popup, { buttonType: "none", size: "small", forceOpen: renderPopup, onToggleOpen: handleTogglePopup, horizontalAlign: "left", verticalAlign: "bottom", boundingRef: editorRef, render: () => {
                     var _a, _b, _c, _d;
@@ -107,7 +115,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
                         React.createElement(Button, { className: `${baseClass}__link-edit`, icon: "edit", round: true, buttonStyle: "icon-label", onClick: (e) => {
                                 e.preventDefault();
                                 setRenderPopup(false);
-                                openModal(modalSlug);
+                                openModal(drawerSlug);
                                 setRenderModal(true);
                             }, tooltip: t('general:edit') }),
                         React.createElement(Button, { className: `${baseClass}__link-close`, icon: "x", round: true, buttonStyle: "icon-label", onClick: (e) => {
@@ -116,7 +124,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
                             }, tooltip: t('general:remove') })));
                 } })),
         React.createElement("span", { tabIndex: 0, role: "button", className: [
-                `${baseClass}__button`,
+                `${baseClass}__popup-toggler`,
             ].filter(Boolean).join(' '), onKeyDown: (e) => { if (e.key === 'Enter')
                 setRenderPopup(true); }, onClick: () => setRenderPopup(true) }, children)));
 };

package/dist/admin/components/forms/field-types/RichText/elements/link/{index.scss → Element/index.scss}

@@ -1,4 +1,4 @@
-@import '../../../../../../scss/styles.scss';
+@import '../../../../../../../scss/styles.scss';
 
 .rich-text-link {
   position: relative;
@@ -11,7 +11,6 @@
     bottom: 0;
     left: 0;
 
-
     .popup__scroll,
     .popup__wrap {
       overflow: visible;
@@ -52,18 +51,19 @@
   }
 }
 
-.rich-text-link__button {
-  @extend %btn-reset;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
+.rich-text-link__popup-toggler {
   position: relative;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
   text-decoration: underline;
   cursor: text;
 
+  &:focus,
+  &:focus-within {
+    outline: none;
+  }
+
   &--open {
     z-index: var(--z-popup);
   }

package/dist/admin/components/forms/field-types/RichText/elements/link/{Modal → LinkDrawer}/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Props } from './types';
 import './index.scss';
-export declare const EditModal: React.FC<Props>;
+export declare const LinkDrawer: React.FC<Props>;

package/dist/admin/components/forms/field-types/RichText/elements/link/{Modal → LinkDrawer}/index.js

@@ -1,7 +1,6 @@
-import { Modal } from '@faceless-ui/modal';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { MinimalTemplate } from '../../../../../..';
+import { Drawer } from '../../../../../../elements/Drawer';
 import Button from '../../../../../../elements/Button';
 import X from '../../../../../../icons/X';
 import Form from '../../../../../Form';
@@ -9,14 +8,15 @@ import FormSubmit from '../../../../../Submit';
 import fieldTypes from '../../../..';
 import RenderFields from '../../../../../RenderFields';
 import './index.scss';
+import { Gutter } from '../../../../../../elements/Gutter';
 const baseClass = 'rich-text-link-edit-modal';
-export const EditModal = ({ close, handleModalSubmit, initialState, fieldSchema, modalSlug, }) => {
+export const LinkDrawer = ({ handleClose, handleModalSubmit, initialState, fieldSchema, drawerSlug, }) => {
     const { t } = useTranslation('fields');
-    return (React.createElement(Modal, { slug: modalSlug, className: baseClass },
-        React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
+    return (React.createElement(Drawer, { slug: drawerSlug, formatSlug: false, className: baseClass },
+        React.createElement(Gutter, { className: `${baseClass}__template` },
             React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("h3", null, t('editLink')),
-                React.createElement(Button, { buttonStyle: "none", onClick: close },
+                React.createElement("h2", { className: `${baseClass}__header-text` }, t('editLink')),
+                React.createElement(Button, { className: `${baseClass}__header-close`, buttonStyle: "none", onClick: handleClose },
                     React.createElement(X, null))),
             React.createElement(Form, { onSubmit: handleModalSubmit, initialState: initialState },
                 React.createElement(RenderFields, { fieldTypes: fieldTypes, readOnly: false, fieldSchema: fieldSchema, forceRender: true }),

package/dist/admin/components/forms/field-types/RichText/elements/link/LinkDrawer/index.scss

@@ -0,0 +1,50 @@
+@import '../../../../../../../scss/styles.scss';
+
+.rich-text-link-edit-modal {
+  &__template {
+    position: relative;
+    z-index: 1;
+    padding-top: base(1);
+    padding-bottom: base(2);
+  }
+
+  &__header {
+    width: 100%;
+    margin-bottom: $baseline;
+    display: flex;
+    justify-content: space-between;
+    margin-top: base(2.5);
+    margin-bottom: base(1);
+
+    @include mid-break {
+      margin-top: base(1.5);
+    }
+  }
+
+  &__header-text {
+    margin: 0;
+  }
+
+  &__header-close {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    width: base(1);
+    height: base(1);
+
+    svg {
+      width: base(2.75);
+      height: base(2.75);
+      position: relative;
+      left: base(-.825);
+      top: base(-.825);
+
+      .stroke {
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
+      }
+    }
+  }
+}

package/dist/admin/components/forms/field-types/RichText/elements/link/{Modal → LinkDrawer}/types.d.ts

@@ -1,8 +1,8 @@
 import { Field } from '../../../../../../../../fields/config/types';
 import { Fields } from '../../../../../Form/types';
-export type Props = {
-    modalSlug: string;
-    close: () => void;
+export declare type Props = {
+    drawerSlug: string;
+    handleClose: () => void;
     handleModalSubmit: (fields: Fields, data: Record<string, unknown>) => void;
     initialState?: Fields;
     fieldSchema: Field[];

package/dist/admin/components/forms/field-types/RichText/elements/link/index.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 declare const link: {
-    Button: ({ fieldProps }: {
-        fieldProps: any;
-    }) => JSX.Element;
-    Element: ({ attributes, children, element, editorRef, fieldProps }: {
-        attributes: any;
-        children: any;
+    Button: import("react").FC<{
+        path: string;
+        fieldProps: import("../../types").Props;
+    }>;
+    Element: import("react").FC<{
+        attributes: import("react").HTMLAttributes<HTMLDivElement>;
+        children: import("react").ReactNode;
         element: any;
-        editorRef: any;
-        fieldProps: any;
-    }) => JSX.Element;
+        fieldProps: import("../../types").Props;
+        editorRef: import("react").RefObject<HTMLDivElement>;
+    }>;
     plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor)[];
 };
 export default link;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.js

@@ -1,20 +1,12 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { Modal, useModal } from '@faceless-ui/modal';
 import { ReactEditor, useSlate } from 'slate-react';
 import { useTranslation } from 'react-i18next';
 import { useConfig } from '../../../../../../utilities/Config';
 import ElementButton from '../../Button';
 import RelationshipIcon from '../../../../../../icons/Relationship';
-import Form from '../../../../../Form';
-import MinimalTemplate from '../../../../../../templates/Minimal';
-import Button from '../../../../../../elements/Button';
-import Submit from '../../../../../Submit';
-import X from '../../../../../../icons/X';
-import Fields from './Fields';
-import { requests } from '../../../../../../../api';
 import { injectVoidElement } from '../../injectVoid';
+import { useListDrawer } from '../../../../../../elements/ListDrawer';
 import './index.scss';
-const initialFormData = {};
 const baseClass = 'relationship-rich-text-button';
 const insertRelationship = (editor, { value, relationTo }) => {
     const text = { text: ' ' };
@@ -29,49 +21,38 @@ const insertRelationship = (editor, { value, relationTo }) => {
     injectVoidElement(editor, relationship);
     ReactEditor.focus(editor);
 };
-const RelationshipButton = ({ path }) => {
-    const { toggleModal } = useModal();
+const RelationshipButton = () => {
+    const { collections } = useConfig();
+    const { t } = useTranslation('fields');
     const editor = useSlate();
-    const { serverURL, routes: { api }, collections } = useConfig();
-    const [renderModal, setRenderModal] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const { t, i18n } = useTranslation('fields');
-    const [hasEnabledCollections] = useState(() => collections.find(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship));
-    const modalSlug = `${path}-add-relationship`;
-    const handleAddRelationship = useCallback(async (_, { relationTo, value }) => {
-        setLoading(true);
-        const res = await requests.get(`${serverURL}${api}/${relationTo}/${value}?depth=0`, {
-            headers: {
-                'Accept-Language': i18n.language,
+    const [enabledCollectionSlugs] = useState(() => collections.filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship).map(({ slug }) => slug));
+    const [selectedCollectionSlug, setSelectedCollectionSlug] = useState(() => enabledCollectionSlugs[0]);
+    const [ListDrawer, ListDrawerToggler, { closeDrawer, isDrawerOpen, },] = useListDrawer({
+        collectionSlugs: enabledCollectionSlugs,
+        selectedCollection: selectedCollectionSlug,
+    });
+    const onSelect = useCallback(({ docID, collectionConfig }) => {
+        insertRelationship(editor, {
+            value: {
+                id: docID,
             },
+            relationTo: collectionConfig.slug,
         });
-        const json = await res.json();
-        insertRelationship(editor, { value: { id: json.id }, relationTo });
-        toggleModal(modalSlug);
-        setRenderModal(false);
-        setLoading(false);
-    }, [i18n.language, editor, toggleModal, modalSlug, api, serverURL]);
+        closeDrawer();
+    }, [editor, closeDrawer]);
     useEffect(() => {
-        if (renderModal) {
-            toggleModal(modalSlug);
-        }
-    }, [renderModal, toggleModal, modalSlug]);
-    if (!hasEnabledCollections)
+        // always reset back to first option
+        // TODO: this is not working, see the ListDrawer component
+        setSelectedCollectionSlug(enabledCollectionSlugs[0]);
+    }, [isDrawerOpen, enabledCollectionSlugs]);
+    if (!enabledCollectionSlugs || enabledCollectionSlugs.length === 0)
         return null;
     return (React.createElement(Fragment, null,
-        React.createElement(ElementButton, { className: baseClass, format: "relationship", onClick: () => setRenderModal(true) },
-            React.createElement(RelationshipIcon, null)),
-        renderModal && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
-            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
-                React.createElement("header", { className: `${baseClass}__header` },
-                    React.createElement("h3", null, t('addRelationship')),
-                    React.createElement(Button, { buttonStyle: "none", onClick: () => {
-                            toggleModal(modalSlug);
-                            setRenderModal(false);
-                        } },
-                        React.createElement(X, null))),
-                React.createElement(Form, { onSubmit: handleAddRelationship, initialData: initialFormData, disabled: loading },
-                    React.createElement(Fields, null),
-                    React.createElement(Submit, null, t('addRelationship'))))))));
+        React.createElement(ListDrawerToggler, null,
+            React.createElement(ElementButton, { className: baseClass, format: "relationship", tooltip: t('addRelationship'), el: "div", onClick: () => {
+                    // do nothing
+                } },
+                React.createElement(RelationshipIcon, null))),
+        React.createElement(ListDrawer, { onSelect: onSelect })));
 };
 export default RelationshipButton;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss

@@ -1,35 +1,7 @@
 @import '../../../../../../../scss/styles.scss';
 
 .relationship-rich-text-button {
-  .btn {
-    margin-right: base(1);
-  }
-
-  &__modal {
-    @include blur-bg;
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-
-  &__modal-template {
-    position: relative;
-    z-index: 1;
-  }
-
-  &__header {
-    width: 100%;
-    margin-bottom: $baseline;
-    display: flex;
-    justify-content: space-between;
-
-    h3 {
-      margin: 0;
-    }
-
-    svg {
-      width: base(1.5);
-      height: base(1.5);
-    }
-  }
+  display: flex;
+  align-items: center;
+  height: 100%;
 }

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Element/index.d.ts

@@ -1,4 +1,10 @@
-/// <reference types="react" />
+import React, { HTMLAttributes } from 'react';
+import { Props as RichTextProps } from '../../../types';
 import './index.scss';
-declare const Element: (props: any) => JSX.Element;
+declare const Element: React.FC<{
+    attributes: HTMLAttributes<HTMLDivElement>;
+    children: React.ReactNode;
+    element: any;
+    fieldProps: RichTextProps;
+}>;
 export default Element;