payload 0.14.5-beta.0 → 0.14.9-beta.0

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const indent: {
+    Button: () => JSX.Element;
+    Element: ({ attributes, children }: {
+        attributes: any;
+        children: any;
+    }) => JSX.Element;
+};
+export default indent;

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

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import { useSlate, ReactEditor } from 'slate-react';
+import { Editor, Element, Transforms } from 'slate';
+import IndentLeft from '../../../../../icons/IndentLeft';
+import IndentRight from '../../../../../icons/IndentRight';
+import { baseClass } from '../Button';
+import isElementActive from '../isActive';
+import listTypes from '../listTypes';
+const indentType = 'indent';
+const IndentWithPadding = ({ attributes, children }) => (React.createElement("div", { style: { paddingLeft: 25 }, ...attributes }, children));
+const indent = {
+    Button: () => {
+        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),
+                    split: true,
+                    mode: 'lowest',
+                });
+                if (isElementActive(editor, 'li')) {
+                    const [, parentLocation] = Editor.parent(editor, editor.selection);
+                    const [, parentDepth] = parentLocation;
+                    if (parentDepth > 0 || parentDepth === 0) {
+                        Transforms.unwrapNodes(editor, {
+                            match: (n) => Element.isElement(n) && n.type === 'li',
+                            split: true,
+                            mode: 'lowest',
+                        });
+                    }
+                    else {
+                        Transforms.unsetNodes(editor, ['type']);
+                    }
+                }
+            }
+            if (dir === 'right') {
+                const isCurrentlyOL = isElementActive(editor, 'ol');
+                const isCurrentlyUL = isElementActive(editor, 'ul');
+                if (isCurrentlyOL || isCurrentlyUL) {
+                    Transforms.wrapNodes(editor, {
+                        type: 'li',
+                        children: [],
+                    });
+                    Transforms.wrapNodes(editor, { type: isCurrentlyOL ? 'ol' : 'ul', children: [{ text: ' ' }] });
+                    Transforms.setNodes(editor, { type: 'li' });
+                }
+                else {
+                    Transforms.wrapNodes(editor, { type: indentType, children: [] });
+                }
+            }
+            ReactEditor.focus(editor);
+        }, [editor]);
+        const canDeIndent = isElementActive(editor, 'li') || isElementActive(editor, indentType);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("button", { type: "button", className: [
+                    baseClass,
+                    !canDeIndent && `${baseClass}--disabled`,
+                ].filter(Boolean).join(' '), onClick: canDeIndent ? (e) => handleIndent(e, 'left') : undefined },
+                React.createElement(IndentLeft, null)),
+            React.createElement("button", { type: "button", className: baseClass, onClick: (e) => handleIndent(e, 'right') },
+                React.createElement(IndentRight, null))));
+    },
+    Element: IndentWithPadding,
+};
+export default indent;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const _default: {
+declare const elements: {
     h1: {
         Button: () => JSX.Element;
         Element: ({ attributes, children }: {
@@ -49,7 +49,7 @@ declare const _default: {
             children: any;
             element: any;
         }) => JSX.Element;
-        plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor)[];
+        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)[];
     };
     ol: {
         Button: () => JSX.Element;
@@ -66,6 +66,10 @@ declare const _default: {
         }) => JSX.Element;
     };
     li: {
+        Element: (props: any) => JSX.Element;
+    };
+    indent: {
+        Button: () => JSX.Element;
         Element: ({ attributes, children }: {
             attributes: any;
             children: any;
@@ -82,13 +86,14 @@ declare const _default: {
         Button: import("react").FC<{
             path: string;
         }>;
-        Element: ({ attributes, children, element, path }: {
+        Element: ({ attributes, children, element, path, fieldProps }: {
             attributes: any;
             children: any;
             element: any;
             path: any;
+            fieldProps: any;
         }) => JSX.Element;
         plugins: ((incomingEditor: any) => any)[];
     };
 };
-export default _default;
+export default elements;

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

@@ -8,9 +8,10 @@ import link from './link';
 import ol from './ol';
 import ul from './ul';
 import li from './li';
+import indent from './indent';
 import relationship from './relationship';
 import upload from './upload';
-export default {
+const elements = {
     h1,
     h2,
     h3,
@@ -21,6 +22,8 @@ export default {
     ol,
     ul,
     li,
+    indent,
     relationship,
     upload,
 };
+export default elements;

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

@@ -1,8 +1,11 @@
 import { Editor, Element } from 'slate';
 const isElementActive = (editor, format) => {
-    const [match] = Editor.nodes(editor, {
-        match: (n) => Element.isElement(n) && n.type === format,
-    });
+    if (!editor.selection)
+        return false;
+    const [match] = Array.from(Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, editor.selection),
+        match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === format,
+    }));
     return !!match;
 };
 export default isElementActive;

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

@@ -0,0 +1,3 @@
+import { Editor } from 'slate';
+declare const isListActive: (editor: Editor, format: string) => boolean;
+export default isListActive;

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

@@ -0,0 +1,21 @@
+import { Editor, Element } from 'slate';
+const isListActive = (editor, format) => {
+    if (!editor.selection
+        // If focus or anchor is at root of editor,
+        // Return false - as Editor.parent will fail
+        || editor.selection.focus.path[1] === 0
+        // || editor.selection.focus.path.length === 0
+        || editor.selection.anchor.path[1] === 0
+    // || editor.selection.anchor.path.length === 0
+    )
+        return false;
+    const parentLI = Editor.parent(editor, editor.selection);
+    if (parentLI[1].length > 0) {
+        const ancestor = Editor.above(editor, {
+            at: parentLI[1],
+        });
+        return Element.isElement(ancestor[0]) && ancestor[0].type === format;
+    }
+    return false;
+};
+export default isListActive;

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

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 declare const _default: {
-    Element: ({ attributes, children }: {
-        attributes: any;
-        children: any;
-    }) => JSX.Element;
+    Element: (props: any) => JSX.Element;
 };
 export default _default;

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

@@ -1,5 +1,11 @@
 import React from 'react';
-const LI = ({ attributes, children }) => (React.createElement("li", { ...attributes }, children));
+import listTypes from '../listTypes';
+const LI = (props) => {
+    var _a, _b;
+    const { attributes, element, children } = props;
+    const disableListStyle = element.children.length >= 1 && listTypes.includes((_b = (_a = element.children) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type);
+    return (React.createElement("li", { style: { listStyle: disableListStyle ? 'none' : undefined }, ...attributes }, children));
+};
 export default {
     Element: LI,
 };

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

@@ -8,6 +8,6 @@ declare const link: {
         children: any;
         element: any;
     }) => JSX.Element;
-    plugins: ((incomingEditor: import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor) => import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor)[];
+    plugins: ((incomingEditor: import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor & import("../../types").BlurSelectionEditor) => import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor & import("../../types").BlurSelectionEditor)[];
 };
 export default link;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import ElementButton from '../Button';
+import ListButton from '../ListButton';
 import OLIcon from '../../../../../icons/OrderedList';
 const OL = ({ attributes, children }) => (React.createElement("ol", { ...attributes }, children));
 const ol = {
-    Button: () => (React.createElement(ElementButton, { format: "ol" },
+    Button: () => (React.createElement(ListButton, { format: "ol" },
         React.createElement(OLIcon, null))),
     Element: OL,
 };

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

@@ -7,7 +7,7 @@ const toggleElement = (editor, format) => {
     const isList = listTypes.includes(format);
     let type = format;
     if (isActive) {
-        type = 'p';
+        type = undefined;
     }
     else if (isList) {
         type = 'li';
@@ -18,6 +18,7 @@ const toggleElement = (editor, format) => {
     Transforms.unwrapNodes(editor, {
         match: (n) => Element.isElement(n) && listTypes.includes(n.type),
         split: true,
+        mode: 'lowest',
     });
     Transforms.setNodes(editor, { type });
     if (!isActive && isList) {

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import ElementButton from '../Button';
 import ULIcon from '../../../../../icons/UnorderedList';
+import ListButton from '../ListButton';
 const UL = ({ attributes, children }) => (React.createElement("ul", { ...attributes }, children));
 const ul = {
-    Button: () => (React.createElement(ElementButton, { format: "ul" },
+    Button: () => (React.createElement(ListButton, { format: "ul" },
         React.createElement(ULIcon, null))),
     Element: UL,
 };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Element } from 'slate';
+import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
+import { Field } from '../../../../../../../../../fields/config/types';
+import './index.scss';
+declare type Props = {
+    slug: string;
+    closeModal: () => void;
+    relatedCollectionConfig: SanitizedCollectionConfig;
+    fieldSchema: Field[];
+    element: Element & {
+        fields: Field[];
+    };
+};
+export declare const EditModal: React.FC<Props>;
+export {};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlateStatic } from 'slate-react';
+import { Modal } from '@faceless-ui/modal';
+import buildStateFromSchema from '../../../../../../Form/buildStateFromSchema';
+import MinimalTemplate from '../../../../../../../templates/Minimal';
+import Button from '../../../../../../../elements/Button';
+import RenderFields from '../../../../../../RenderFields';
+import fieldTypes from '../../../../..';
+import Form from '../../../../../../Form';
+import reduceFieldsToValues from '../../../../../../Form/reduceFieldsToValues';
+import Submit from '../../../../../../Submit';
+import './index.scss';
+const baseClass = 'edit-upload-modal';
+export const EditModal = ({ slug, closeModal, relatedCollectionConfig, fieldSchema, element }) => {
+    const editor = useSlateStatic();
+    const [initialState, setInitialState] = useState({});
+    const handleUpdateEditData = useCallback((fields) => {
+        const newNode = {
+            fields: reduceFieldsToValues(fields, true),
+        };
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.setNodes(editor, newNode, { at: elementPath });
+        closeModal();
+    }, [closeModal, editor, element]);
+    useEffect(() => {
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema(fieldSchema, element === null || element === void 0 ? void 0 : element.fields);
+            setInitialState(state);
+        };
+        awaitInitialState();
+    }, [fieldSchema, element.fields]);
+    return (React.createElement(Modal, { slug: slug, className: baseClass },
+        React.createElement(MinimalTemplate, { width: "normal" },
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("h1", null,
+                    "Edit",
+                    ' ',
+                    relatedCollectionConfig.labels.singular,
+                    ' ',
+                    "data"),
+                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", onClick: closeModal })),
+            React.createElement("div", null,
+                React.createElement(Form, { onSubmit: handleUpdateEditData, initialState: initialState },
+                    React.createElement(RenderFields, { readOnly: false, fieldTypes: fieldTypes, fieldSchema: fieldSchema }),
+                    React.createElement(Submit, null, "Save changes"))))));
+};

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

@@ -0,0 +1,25 @@
+@import '../../../../../../../../scss/styles.scss';
+
+.edit-upload-modal {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+
+  .template-minimal {
+    padding-top: base(4);
+    align-items: flex-start;
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+    display: flex;
+
+    h1 {
+      margin: 0 auto 0 0;
+    }
+
+    .btn {
+      margin: 0 0 0 $baseline;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Element } from 'slate';
+import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
+import './index.scss';
+declare type Props = {
+    slug: string;
+    element: Element;
+    closeModal: () => void;
+    setRelatedCollectionConfig: (collectionConfig: SanitizedCollectionConfig) => void;
+    relatedCollectionConfig: SanitizedCollectionConfig;
+};
+export declare const SwapUploadModal: React.FC<Props>;
+export {};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/SwapUploadModal/index.js

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Modal } from '@faceless-ui/modal';
+import { useConfig } from '@payloadcms/config-provider';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlateStatic } from 'slate-react';
+import usePayloadAPI from '../../../../../../../../hooks/usePayloadAPI';
+import MinimalTemplate from '../../../../../../../templates/Minimal';
+import Button from '../../../../../../../elements/Button';
+import Label from '../../../../../../Label';
+import ReactSelect from '../../../../../../../elements/ReactSelect';
+import ListControls from '../../../../../../../elements/ListControls';
+import UploadGallery from '../../../../../../../elements/UploadGallery';
+import Paginator from '../../../../../../../elements/Paginator';
+import PerPage from '../../../../../../../elements/PerPage';
+import formatFields from '../../../../../../../views/collections/List/formatFields';
+import './index.scss';
+const baseClass = 'swap-upload-modal';
+export const SwapUploadModal = ({ closeModal, element, setRelatedCollectionConfig, relatedCollectionConfig, slug }) => {
+    const { collections, serverURL, routes: { api } } = useConfig();
+    const editor = useSlateStatic();
+    const [modalCollection, setModalCollection] = React.useState(relatedCollectionConfig);
+    const [modalCollectionOption, setModalCollectionOption] = React.useState({ label: relatedCollectionConfig.labels.singular, value: relatedCollectionConfig.slug });
+    const [availableCollections] = React.useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
+    const [fields, setFields] = React.useState(() => formatFields(modalCollection));
+    const [limit, setLimit] = React.useState();
+    const [sort, setSort] = React.useState(null);
+    const [where, setWhere] = React.useState(null);
+    const [page, setPage] = React.useState(null);
+    const moreThanOneAvailableCollection = availableCollections.length > 1;
+    const apiURL = `${serverURL}${api}/${modalCollection.slug}`;
+    const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
+    const handleUpdateUpload = React.useCallback((doc) => {
+        const newNode = {
+            type: 'upload',
+            value: { id: doc.id },
+            relationTo: modalCollection.slug,
+            children: [
+                { text: ' ' },
+            ],
+        };
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.setNodes(editor, newNode, { at: elementPath });
+        closeModal();
+    }, [closeModal, editor, element, modalCollection]);
+    React.useEffect(() => {
+        const params = {};
+        if (page)
+            params.page = page;
+        if (where)
+            params.where = where;
+        if (sort)
+            params.sort = sort;
+        if (limit)
+            params.limit = limit;
+        setParams(params);
+    }, [setParams, page, sort, where, limit]);
+    React.useEffect(() => {
+        setFields(formatFields(modalCollection));
+        setLimit(modalCollection.admin.pagination.defaultLimit);
+    }, [modalCollection]);
+    React.useEffect(() => {
+        setModalCollection(collections.find(({ slug: collectionSlug }) => modalCollectionOption.value === collectionSlug));
+    }, [modalCollectionOption, collections]);
+    return (React.createElement(Modal, { className: baseClass, slug: slug },
+        React.createElement(MinimalTemplate, { width: "wide" },
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("h1", null,
+                    "Choose",
+                    ' ',
+                    modalCollection.labels.singular),
+                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: closeModal })),
+            moreThanOneAvailableCollection && (React.createElement("div", { className: `${baseClass}__select-collection-wrap` },
+                React.createElement(Label, { label: "Select a Collection to Browse" }),
+                React.createElement(ReactSelect, { className: `${baseClass}__select-collection`, value: modalCollectionOption, onChange: setModalCollectionOption, options: availableCollections.map((coll) => ({ label: coll.labels.singular, value: coll.slug })) }))),
+            React.createElement(ListControls, { collection: {
+                    ...modalCollection,
+                    fields,
+                }, enableColumns: false, enableSort: true, modifySearchQuery: false, handleSortChange: setSort, handleWhereChange: setWhere }),
+            React.createElement(UploadGallery, { docs: data === null || data === void 0 ? void 0 : data.docs, collection: modalCollection, onCardClick: (doc) => {
+                    handleUpdateUpload(doc);
+                    setRelatedCollectionConfig(modalCollection);
+                    closeModal();
+                } }),
+            React.createElement("div", { className: `${baseClass}__page-controls` },
+                React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1, onChange: setPage, disableHistoryChange: true }),
+                (data === null || data === void 0 ? void 0 : data.totalDocs) > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: `${baseClass}__page-info` },
+                        data.page,
+                        "-",
+                        data.totalPages > 1 ? data.limit : data.totalDocs,
+                        ' ',
+                        "of",
+                        ' ',
+                        data.totalDocs),
+                    React.createElement(PerPage, { collection: modalCollection, limit: limit, modifySearchParams: false, handleChange: setLimit })))))));
+};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/SwapUploadModal/index.scss

@@ -0,0 +1,25 @@
+@import '../../../../../../../../scss/styles.scss';
+
+.swap-upload-modal {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+
+  .template-minimal {
+    padding-top: base(4);
+    align-items: flex-start;
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+    display: flex;
+
+    h1 {
+      margin: 0 auto 0 0;
+    }
+
+    .btn {
+      margin: 0 0 0 $baseline;
+    }
+  }
+}

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

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