payload 1.0.32 → 1.0.35

package/dist/admin/components/forms/field-types/Relationship/optionsReducer.js

@@ -20,7 +20,7 @@ const sortOptions = (options) => options.sort((a, b) => {
 const optionsReducer = (state, action) => {
     switch (action.type) {
         case 'CLEAR': {
-            return action.required ? [] : [{ value: 'null', label: 'None' }];
+            return [];
         }
         case 'ADD': {
             const { hasMultipleRelations, collection, relation, data, sort, ids = [] } = action;

package/dist/admin/components/forms/field-types/Relationship/types.d.ts

@@ -12,7 +12,6 @@ export declare type Option = {
 };
 declare type CLEAR = {
     type: 'CLEAR';
-    required: boolean;
 };
 declare type ADD = {
     type: 'ADD';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseEditor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { HistoryEditor } from 'slate-history';
-import { Props, BlurSelectionEditor } from './types';
+import { Props } from './types';
 import './index.scss';
 declare type CustomText = {
     text: string;
@@ -14,7 +14,7 @@ declare type CustomElement = {
 };
 declare module 'slate' {
     interface CustomTypes {
-        Editor: BaseEditor & ReactEditor & HistoryEditor & BlurSelectionEditor;
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
         Element: CustomElement;
         Text: CustomText;
     }

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

@@ -69,14 +69,11 @@ const RichText = (props) => {
     ].filter(Boolean).join(' ');
     const editor = useMemo(() => {
         let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor())));
+        CreatedEditor = withHTML(CreatedEditor);
         CreatedEditor = enablePlugins(CreatedEditor, elements);
         CreatedEditor = enablePlugins(CreatedEditor, leaves);
-        CreatedEditor = withHTML(CreatedEditor);
         return CreatedEditor;
     }, [elements, leaves]);
-    const onBlur = useCallback(() => {
-        editor.blurSelection = editor.selection;
-    }, [editor]);
     useEffect(() => {
         if (!loaded) {
             const mergedElements = mergeCustomFunctions(elements, elementTypes);
@@ -128,7 +125,7 @@ const RichText = (props) => {
                                 const elementType = enabledElements[elementName];
                                 const Button = elementType === null || elementType === void 0 ? void 0 : elementType.Button;
                                 if (Button) {
-                                    return (React.createElement(Button, { key: i, path: path }));
+                                    return (React.createElement(Button, { fieldProps: props, key: i, path: path }));
                                 }
                                 return null;
                             }),
@@ -141,12 +138,12 @@ const RichText = (props) => {
                                 const leafType = enabledLeaves[leafName];
                                 const Button = leafType === null || leafType === void 0 ? void 0 : leafType.Button;
                                 if (Button) {
-                                    return (React.createElement(Button, { key: i, path: path }));
+                                    return (React.createElement(Button, { fieldProps: props, key: i, path: path }));
                                 }
                                 return null;
                             }))),
                     React.createElement("div", { className: `${baseClass}__editor`, ref: editorRef },
-                        React.createElement(Editable, { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
+                        React.createElement(Editable, { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onKeyDown: (event) => {
                                 if (event.key === 'Enter') {
                                     if (event.shiftKey) {
                                         event.preventDefault();

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

@@ -13,9 +13,6 @@ const indent = {
         const editor = useSlate();
         const handleIndent = useCallback((e, dir) => {
             e.preventDefault();
-            if (editor.blurSelection) {
-                Transforms.select(editor, editor.blurSelection);
-            }
             if (dir === 'left') {
                 Transforms.unwrapNodes(editor, {
                     match: (n) => Element.isElement(n) && [indentType, ...listTypes].includes(n.type),

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

@@ -43,14 +43,17 @@ declare const elements: {
         }) => JSX.Element;
     };
     link: {
-        Button: () => JSX.Element;
-        Element: ({ attributes, children, element, editorRef }: {
+        Button: ({ fieldProps }: {
+            fieldProps: any;
+        }) => JSX.Element;
+        Element: ({ attributes, children, element, editorRef, fieldProps }: {
             attributes: any;
             children: any;
             element: any;
             editorRef: any;
+            fieldProps: any;
         }) => JSX.Element;
-        plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor & import("../types").BlurSelectionEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor & import("../types").BlurSelectionEditor)[];
+        plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor)[];
     };
     ol: {
         Button: () => JSX.Element;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const LinkButton: ({ fieldProps }: {
+    fieldProps: any;
+}) => JSX.Element;

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

@@ -0,0 +1,105 @@
+import React, { Fragment, useState } from 'react';
+import { ReactEditor, useSlate } from 'slate-react';
+import { Transforms, Editor, Range } from 'slate';
+import { useModal } from '@faceless-ui/modal';
+import ElementButton from '../Button';
+import { unwrapLink } from './utilities';
+import LinkIcon from '../../../../../icons/Link';
+import { EditModal } from './Modal';
+import { modalSlug as baseModalSlug } from './shared';
+import isElementActive from '../isActive';
+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';
+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 modalSlug = `${baseModalSlug}-${fieldProps.path}`;
+    const config = useConfig();
+    const editor = useSlate();
+    const { user } = useAuth();
+    const locale = useLocale();
+    const { toggleModal } = useModal();
+    const [renderModal, setRenderModal] = useState(false);
+    const [initialState, setInitialState] = useState({});
+    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;
+    });
+    return (React.createElement(Fragment, null,
+        React.createElement(ElementButton, { format: "link", onClick: async () => {
+                if (isElementActive(editor, 'link')) {
+                    unwrapLink(editor);
+                }
+                else {
+                    toggleModal(modalSlug);
+                    setRenderModal(true);
+                    const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
+                    if (!isCollapsed) {
+                        const data = {
+                            text: editor.selection ? Editor.string(editor, editor.selection) : '',
+                        };
+                        const state = await buildStateFromSchema({ fieldSchema, data, user, operation: 'create', locale });
+                        setInitialState(state);
+                    }
+                }
+            } },
+            React.createElement(LinkIcon, null)),
+        renderModal && (React.createElement(EditModal, { modalSlug: modalSlug, fieldSchema: fieldSchema, initialState: initialState, close: () => {
+                toggleModal(modalSlug);
+                setRenderModal(false);
+            }, handleModalSubmit: (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 });
+                }
+                toggleModal(modalSlug);
+                setRenderModal(false);
+                ReactEditor.focus(editor);
+            } }))));
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './index.scss';
+export declare const LinkElement: ({ attributes, children, element, editorRef, fieldProps }: {
+    attributes: any;
+    children: any;
+    element: any;
+    editorRef: any;
+    fieldProps: any;
+}) => JSX.Element;

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

@@ -0,0 +1,120 @@
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { ReactEditor, useSlate } from 'slate-react';
+import { Transforms, Node, Editor } from 'slate';
+import { useModal } from '@faceless-ui/modal';
+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 './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 }) => {
+    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 editor = useSlate();
+    const config = useConfig();
+    const { user } = useAuth();
+    const locale = useLocale();
+    const { openModal, toggleModal } = useModal();
+    const [renderModal, setRenderModal] = useState(false);
+    const [renderPopup, setRenderPopup] = useState(false);
+    const [initialState, setInitialState] = useState({});
+    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 modalSlug = `${baseModalSlug}-${fieldProps.path}`;
+    const handleTogglePopup = useCallback((render) => {
+        if (!render) {
+            setRenderPopup(render);
+        }
+    }, []);
+    useEffect(() => {
+        const awaitInitialState = async () => {
+            const data = {
+                text: Node.string(element),
+                linkType: element.linkType,
+                url: element.url,
+                doc: element.doc,
+                newTab: element.newTab,
+                fields: deepCopyObject(element.fields),
+            };
+            const state = await buildStateFromSchema({ fieldSchema, data, user, operation: 'update', locale });
+            setInitialState(state);
+        };
+        awaitInitialState();
+    }, [renderModal, element, fieldSchema, user, locale]);
+    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);
+                    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);
+                }, 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;
+                    return (React.createElement("div", { className: `${baseClass}__popup` },
+                        element.linkType === 'internal' && ((_a = element.doc) === null || _a === void 0 ? void 0 : _a.relationTo) && ((_b = element.doc) === null || _b === void 0 ? void 0 : _b.value) && (React.createElement(Fragment, null,
+                            "Linked to\u00A0",
+                            React.createElement("a", { className: `${baseClass}__link-label`, href: `${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`, target: "_blank", rel: "noreferrer" }, (_d = (_c = config.collections.find(({ slug }) => slug === element.doc.relationTo)) === null || _c === void 0 ? void 0 : _c.labels) === null || _d === void 0 ? void 0 : _d.singular))),
+                        (element.linkType === 'custom' || !element.linkType) && (React.createElement("a", { className: `${baseClass}__link-label`, href: element.url, target: "_blank", rel: "noreferrer" }, element.url)),
+                        React.createElement(Button, { className: `${baseClass}__link-edit`, icon: "edit", round: true, buttonStyle: "icon-label", onClick: (e) => {
+                                e.preventDefault();
+                                setRenderPopup(false);
+                                openModal(modalSlug);
+                                setRenderModal(true);
+                            }, tooltip: "Edit" }),
+                        React.createElement(Button, { className: `${baseClass}__link-close`, icon: "x", round: true, buttonStyle: "icon-label", onClick: (e) => {
+                                e.preventDefault();
+                                unwrapLink(editor);
+                            }, tooltip: "Remove" })));
+                } })),
+        React.createElement("span", { tabIndex: 0, role: "button", className: [
+                `${baseClass}__button`,
+            ].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/Modal/baseFields.d.ts

@@ -0,0 +1,3 @@
+import { Config } from '../../../../../../../../config/types';
+import { Field } from '../../../../../../../../fields/config/types';
+export declare const getBaseFields: (config: Config) => Field[];

package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/baseFields.js

@@ -0,0 +1,56 @@
+export const getBaseFields = (config) => [
+    {
+        name: 'text',
+        label: 'Text to display',
+        type: 'text',
+        required: true,
+    },
+    {
+        name: 'linkType',
+        label: 'Link Type',
+        type: 'radio',
+        required: true,
+        admin: {
+            description: 'Choose between entering a custom text URL or linking to another document.',
+        },
+        defaultValue: 'custom',
+        options: [
+            {
+                label: 'Custom URL',
+                value: 'custom',
+            },
+            {
+                label: 'Internal Link',
+                value: 'internal',
+            },
+        ],
+    },
+    {
+        name: 'url',
+        label: 'Enter a URL',
+        type: 'text',
+        required: true,
+        admin: {
+            condition: ({ linkType, url }) => {
+                return (typeof linkType === 'undefined' && url) || linkType === 'custom';
+            },
+        },
+    },
+    {
+        name: 'doc',
+        label: 'Choose a document to link to',
+        type: 'relationship',
+        required: true,
+        relationTo: config.collections.map(({ slug }) => slug),
+        admin: {
+            condition: ({ linkType }) => {
+                return linkType === 'internal';
+            },
+        },
+    },
+    {
+        name: 'newTab',
+        label: 'Open in new tab',
+        type: 'checkbox',
+    },
+];

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

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

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

@@ -0,0 +1,22 @@
+import { Modal } from '@faceless-ui/modal';
+import React from 'react';
+import { MinimalTemplate } from '../../../../../..';
+import Button from '../../../../../../elements/Button';
+import X from '../../../../../../icons/X';
+import Form from '../../../../../Form';
+import FormSubmit from '../../../../../Submit';
+import fieldTypes from '../../../..';
+import RenderFields from '../../../../../RenderFields';
+import './index.scss';
+const baseClass = 'rich-text-link-edit-modal';
+export const EditModal = ({ close, handleModalSubmit, initialState, fieldSchema, modalSlug, }) => {
+    return (React.createElement(Modal, { slug: modalSlug, className: baseClass },
+        React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("h3", null, "Edit Link"),
+                React.createElement(Button, { buttonStyle: "none", onClick: close },
+                    React.createElement(X, null))),
+            React.createElement(Form, { onSubmit: handleModalSubmit, initialState: initialState },
+                React.createElement(RenderFields, { fieldTypes: fieldTypes, readOnly: false, fieldSchema: fieldSchema, forceRender: true }),
+                React.createElement(FormSubmit, null, "Confirm")))));
+};

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

@@ -0,0 +1,29 @@
+@import '../../../../../../../scss/styles.scss';
+
+.rich-text-link-edit-modal {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__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);
+    }
+  }
+}

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,14 +1,15 @@
 /// <reference types="react" />
-import { ReactEditor } from 'slate-react';
-import './index.scss';
 declare const link: {
-    Button: () => JSX.Element;
-    Element: ({ attributes, children, element, editorRef }: {
+    Button: ({ fieldProps }: {
+        fieldProps: any;
+    }) => JSX.Element;
+    Element: ({ attributes, children, element, editorRef, fieldProps }: {
         attributes: any;
         children: any;
         element: any;
         editorRef: any;
+        fieldProps: any;
     }) => JSX.Element;
-    plugins: ((incomingEditor: import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor & import("../../types").BlurSelectionEditor) => import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor & import("../../types").BlurSelectionEditor)[];
+    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/link/index.js

@@ -1,72 +1,9 @@
-import React, { Fragment, useCallback, useState } from 'react';
-import { ReactEditor, useSlate } from 'slate-react';
-import { Transforms } from 'slate';
-import ElementButton from '../Button';
-import { withLinks, wrapLink } from './utilities';
-import LinkIcon from '../../../../../icons/Link';
-import Popup from '../../../../../elements/Popup';
-import Button from '../../../../../elements/Button';
-import Check from '../../../../../icons/Check';
-import Error from '../../../../Error';
-import './index.scss';
-const baseClass = 'rich-text-link';
-const Link = ({ attributes, children, element, editorRef }) => {
-    const editor = useSlate();
-    const [error, setError] = useState(false);
-    const [open, setOpen] = useState(element.url === undefined);
-    const handleToggleOpen = useCallback((newOpen) => {
-        setOpen(newOpen);
-        if (element.url === undefined && !newOpen) {
-            const path = ReactEditor.findPath(editor, element);
-            Transforms.setNodes(editor, { url: '' }, { at: path });
-        }
-    }, [editor, element]);
-    return (React.createElement("span", { className: baseClass, ...attributes },
-        React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
-            React.createElement(Popup, { initActive: element.url === undefined, buttonType: "none", size: "small", horizontalAlign: "center", forceOpen: open, onToggleOpen: handleToggleOpen, boundingRef: editorRef, render: ({ close }) => (React.createElement(Fragment, null,
-                    React.createElement("div", { className: `${baseClass}__url-wrap` },
-                        React.createElement("input", { value: element.url || '', className: `${baseClass}__url`, placeholder: "Enter a URL", onChange: (e) => {
-                                const { value } = e.target;
-                                if (value && error) {
-                                    setError(false);
-                                }
-                                const path = ReactEditor.findPath(editor, element);
-                                Transforms.setNodes(editor, { url: value }, { at: path });
-                            }, onKeyDown: (e) => {
-                                if (e.key === 'Enter') {
-                                    e.preventDefault();
-                                    close();
-                                }
-                            } }),
-                        React.createElement(Button, { className: `${baseClass}__confirm`, buttonStyle: "none", icon: "chevron", onClick: (e) => {
-                                e.preventDefault();
-                                if (element.url) {
-                                    close();
-                                }
-                                else {
-                                    setError(true);
-                                }
-                            } }),
-                        error && (React.createElement(Error, { showError: error, message: "Please enter a valid URL." }))),
-                    React.createElement(Button, { className: [`${baseClass}__new-tab`, element.newTab && `${baseClass}__new-tab--checked`].filter(Boolean).join(' '), buttonStyle: "none", onClick: () => {
-                            const path = ReactEditor.findPath(editor, element);
-                            Transforms.setNodes(editor, { newTab: !element.newTab }, { at: path });
-                        } },
-                        React.createElement(Check, null),
-                        "Open link in new tab"))) })),
-        React.createElement("button", { className: [
-                `${baseClass}__button`,
-                open && `${baseClass}__button--open`,
-            ].filter(Boolean).join(' '), type: "button", onClick: () => setOpen(true) }, children)));
-};
-const LinkButton = () => {
-    const editor = useSlate();
-    return (React.createElement(ElementButton, { format: "link", onClick: () => wrapLink(editor) },
-        React.createElement(LinkIcon, null)));
-};
+import { withLinks } from './utilities';
+import { LinkButton } from './Button';
+import { LinkElement } from './Element';
 const link = {
     Button: LinkButton,
-    Element: Link,
+    Element: LinkElement,
     plugins: [
         withLinks,
     ],