payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss

@@ -0,0 +1,57 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-upload-modal {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+
+  .template-minimal {
+    padding-top: base(4);
+    align-items: flex-start;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+    display: flex;
+
+    h1 {
+      margin: 0 auto 0 0;
+    }
+
+    .btn {
+      margin: 0 0 0 $baseline;
+    }
+  }
+
+  &__select-collection-wrap {
+    margin-bottom: base(1);
+  }
+
+  &__page-info {
+    margin-right: base(1);
+    margin-left: auto;
+  }
+
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  @include mid-break {
+    .paginator {
+      width: 100%;
+      margin-bottom: $baseline;
+    }
+
+    &__page-controls {
+      flex-wrap: wrap;
+    }
+
+    &__page-info {
+      margin-left: 0;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const _default: {
+    Button: import("react").FC<{
+        path: string;
+    }>;
+    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;

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

@@ -0,0 +1,10 @@
+import plugin from './plugin';
+import Element from './Element';
+import Button from './Button';
+export default {
+    Button,
+    Element,
+    plugins: [
+        plugin,
+    ],
+};

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

@@ -0,0 +1,2 @@
+declare const withRelationship: (incomingEditor: any) => any;
+export default withRelationship;

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

@@ -0,0 +1,7 @@
+const withRelationship = (incomingEditor) => {
+    const editor = incomingEditor;
+    const { isVoid } = editor;
+    editor.isVoid = (element) => (element.type === 'upload' ? true : isVoid(element));
+    return editor;
+};
+export default withRelationship;

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

@@ -0,0 +1,2 @@
+declare const enablePlugins: (CreatedEditor: any, functions: any) => any;
+export default enablePlugins;

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

@@ -0,0 +1,22 @@
+import elementTypes from './elements';
+import leafTypes from './leaves';
+const addPluginReducer = (EditorWithPlugins, plugin) => {
+    if (typeof plugin === 'function')
+        return plugin(EditorWithPlugins);
+    return EditorWithPlugins;
+};
+const enablePlugins = (CreatedEditor, functions) => functions.reduce((CreatedEditorWithPlugins, func) => {
+    if (typeof func === 'object' && Array.isArray(func.plugins)) {
+        return func.plugins.reduce(addPluginReducer, CreatedEditorWithPlugins);
+    }
+    if (typeof func === 'string') {
+        if (elementTypes[func] && elementTypes[func].plugins) {
+            return elementTypes[func].plugins.reduce(addPluginReducer, CreatedEditorWithPlugins);
+        }
+        if (leafTypes[func] && leafTypes[func].plugins) {
+            return leafTypes[func].plugins.reduce(addPluginReducer, CreatedEditorWithPlugins);
+        }
+    }
+    return CreatedEditorWithPlugins;
+}, CreatedEditor);
+export default enablePlugins;

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    'mod+b': string;
+    'mod+i': string;
+    'mod+u': string;
+    'mod+`': string;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export default {
+    'mod+b': 'bold',
+    'mod+i': 'italic',
+    'mod+u': 'underline',
+    'mod+`': 'code',
+};

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

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

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

@@ -0,0 +1,6 @@
+import React, { Suspense, lazy } from 'react';
+import Loading from '../../../elements/Loading';
+const RichText = lazy(() => import('./RichText'));
+const RichTextField = (props) => (React.createElement(Suspense, { fallback: React.createElement(Loading, null) },
+    React.createElement(RichText, { ...props })));
+export default RichTextField;

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

@@ -0,0 +1,124 @@
+@import '../../../../scss/styles.scss';
+
+.rich-text {
+  margin-bottom: base(2);
+  display: flex;
+
+  &__toolbar {
+    @include blur-bg(var(--theme-elevation-0));
+    margin-bottom: $baseline;
+    border: $style-stroke-width-s solid var(--theme-elevation-150);
+    position: sticky;
+    z-index: 2;
+    top: base(4);
+  }
+
+  &__toolbar-wrap {
+    padding: base(.25);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    position: relative;
+    z-index: 1;
+
+    &:after {
+      content: ' ';
+      opacity: .8;
+      position: absolute;
+      top: calc(100% + 1px);
+      background: linear-gradient(var(--theme-elevation-0), transparent);
+      display: block;
+      left: -1px;
+      right: -1px;
+      height: base(1);
+    }
+  }
+
+  &__editor {
+    font-family: var(--font-serif);
+    font-size: base(.625);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: var(--font-body);
+    }
+
+    h1[data-slate-node=element] {
+      font-size: base(1.5);
+      margin: base(1) 0 base(.5);
+    }
+
+    h2[data-slate-node=element] {
+      font-size: base(1.25);
+      margin: base(1) 0 base(.5);
+    }
+
+    h3[data-slate-node=element] {
+      font-size: base(1.125);
+      margin: base(.75) 0 base(.5);
+    }
+
+    h4[data-slate-node=element] {
+      font-size: base(1);
+      margin: base(.5) 0 base(.5);
+    }
+
+    h5[data-slate-node=element] {
+      font-size: base(.875);
+      margin: base(.25) 0 base(.25);
+    }
+
+    h6[data-slate-node=element] {
+      font-size: base(.75);
+      margin: base(.25) 0 base(.25);
+    }
+  }
+
+  &__input {
+    min-height: base(10);
+  }
+
+  &__wrap {
+    width: 100%;
+    position: relative;
+  }
+
+  &__wrapper {
+    width: 100%;
+  }
+
+  &--read-only {
+    .rich-text__editor {
+      background-color: var(--theme-elevation-150);
+      padding: base(.5);
+    }
+  }
+
+  &__button {
+    @extend %btn-reset;
+    padding: base(0.25);
+
+    svg {
+      @include color-svg(var(--theme-elevation-800));
+      width: base(0.75);
+      height: base(0.75);
+    }
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &__button--active,
+    &__button--active:hover {
+      background-color: var(--theme-elevation-150);
+    }
+  }
+}
+
+[data-slate-node=element] {
+  margin-bottom: base(0.25);
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import '../buttons.scss';
+declare const LeafButton: ({ format, children }: {
+    format: any;
+    children: any;
+}) => JSX.Element;
+export default LeafButton;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import isMarkActive from './isActive';
+import toggleLeaf from './toggle';
+import '../buttons.scss';
+const baseClass = 'rich-text__button';
+const LeafButton = ({ format, children }) => {
+    const editor = useSlate();
+    return (React.createElement("button", { type: "button", className: [
+            baseClass,
+            isMarkActive(editor, format) && `${baseClass}__button--active`,
+        ].filter(Boolean).join(' '), onMouseDown: (event) => {
+            event.preventDefault();
+            toggleLeaf(editor, format);
+        } }, children));
+};
+export default LeafButton;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import BoldIcon from '../../../../../icons/Bold';
+const Bold = ({ attributes, children }) => (React.createElement("strong", { ...attributes }, children));
+const bold = {
+    Button: () => (React.createElement(LeafButton, { format: "bold" },
+        React.createElement(BoldIcon, null))),
+    Leaf: Bold,
+};
+export default bold;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import CodeIcon from '../../../../../icons/Code';
+const Code = ({ attributes, children }) => (React.createElement("code", { ...attributes }, children));
+const code = {
+    Button: () => (React.createElement(LeafButton, { format: "code" },
+        React.createElement(CodeIcon, null))),
+    Leaf: Code,
+};
+export default code;

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+declare const _default: {
+    bold: {
+        Button: () => JSX.Element;
+        Leaf: ({ attributes, children }: {
+            attributes: any;
+            children: any;
+        }) => JSX.Element;
+    };
+    code: {
+        Button: () => JSX.Element;
+        Leaf: ({ attributes, children }: {
+            attributes: any;
+            children: any;
+        }) => JSX.Element;
+    };
+    italic: {
+        Button: () => JSX.Element;
+        Leaf: ({ attributes, children }: {
+            attributes: any;
+            children: any;
+        }) => JSX.Element;
+    };
+    strikethrough: {
+        Button: () => JSX.Element;
+        Leaf: ({ attributes, children }: {
+            attributes: any;
+            children: any;
+        }) => JSX.Element;
+    };
+    underline: {
+        Button: () => JSX.Element;
+        Leaf: ({ attributes, children }: {
+            attributes: any;
+            children: any;
+        }) => JSX.Element;
+    };
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+import bold from './bold';
+import code from './code';
+import italic from './italic';
+import strikethrough from './strikethrough';
+import underline from './underline';
+export default {
+    bold,
+    code,
+    italic,
+    strikethrough,
+    underline,
+};

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

@@ -0,0 +1,2 @@
+declare const isLeafActive: (editor: any, format: any) => boolean;
+export default isLeafActive;

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

@@ -0,0 +1,6 @@
+import { Editor } from 'slate';
+const isLeafActive = (editor, format) => {
+    const leaves = Editor.marks(editor);
+    return leaves ? leaves[format] === true : false;
+};
+export default isLeafActive;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import ItalicIcon from '../../../../../icons/Italic';
+const Italic = ({ attributes, children }) => (React.createElement("em", { ...attributes }, children));
+const italic = {
+    Button: () => (React.createElement(LeafButton, { format: "italic" },
+        React.createElement(ItalicIcon, null))),
+    Leaf: Italic,
+};
+export default italic;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import StrikethroughIcon from '../../../../../icons/Strikethrough';
+const Strikethrough = ({ attributes, children }) => (React.createElement("del", { ...attributes }, children));
+const strikethrough = {
+    Button: () => (React.createElement(LeafButton, { format: "strikethrough" },
+        React.createElement(StrikethroughIcon, null))),
+    Leaf: Strikethrough,
+};
+export default strikethrough;

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

@@ -0,0 +1,2 @@
+declare const toggleLeaf: (editor: any, format: any) => void;
+export default toggleLeaf;

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

@@ -0,0 +1,12 @@
+import { Editor } from 'slate';
+import isLeafActive from './isActive';
+const toggleLeaf = (editor, format) => {
+    const isActive = isLeafActive(editor, format);
+    if (isActive) {
+        Editor.removeMark(editor, format);
+    }
+    else {
+        Editor.addMark(editor, format, true);
+    }
+};
+export default toggleLeaf;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import UnderlineIcon from '../../../../../icons/Underline';
+const Underline = ({ attributes, children }) => (React.createElement("u", { ...attributes }, children));
+const underline = {
+    Button: () => (React.createElement(LeafButton, { format: "underline" },
+        React.createElement(UnderlineIcon, null))),
+    Leaf: Underline,
+};
+export default underline;

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

@@ -0,0 +1,2 @@
+declare const _default: (enabledFunctions: any, builtInFunctions: any) => any;
+export default _default;

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

@@ -0,0 +1,21 @@
+export default (enabledFunctions, builtInFunctions) => {
+    const formattedEnabledFunctions = [...enabledFunctions];
+    if (enabledFunctions.indexOf('ul') > -1 || enabledFunctions.indexOf('ol') > -1) {
+        formattedEnabledFunctions.push('li');
+    }
+    return formattedEnabledFunctions.reduce((resultingFunctions, func) => {
+        if (typeof func === 'object' && func.name) {
+            return {
+                ...resultingFunctions,
+                [func.name]: func,
+            };
+        }
+        if (typeof func === 'string' && builtInFunctions[func]) {
+            return {
+                ...resultingFunctions,
+                [func]: builtInFunctions[func],
+            };
+        }
+        return resultingFunctions;
+    }, {});
+};

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

@@ -0,0 +1,2 @@
+declare const withEnterBreakOut: (editor: any) => any;
+export default withEnterBreakOut;

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

@@ -0,0 +1,7 @@
+const enterBreakOutTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'link'];
+const withEnterBreakOut = (editor) => {
+    const newEditor = editor;
+    newEditor.shouldBreakOutOnEnter = (element) => enterBreakOutTypes.includes(String(element.type));
+    return newEditor;
+};
+export default withEnterBreakOut;

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

@@ -0,0 +1,2 @@
+declare const withHTML: (incomingEditor: any) => any;
+export default withHTML;

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

@@ -0,0 +1,78 @@
+import { Transforms } from 'slate';
+import { jsx } from 'slate-hyperscript';
+const ELEMENT_TAGS = {
+    A: (el) => ({ type: 'link', newTab: el.getAttribute('target') === '_blank', url: el.getAttribute('href') }),
+    BLOCKQUOTE: () => ({ type: 'blockquote' }),
+    H1: () => ({ type: 'h1' }),
+    H2: () => ({ type: 'h2' }),
+    H3: () => ({ type: 'h3' }),
+    H4: () => ({ type: 'h4' }),
+    H5: () => ({ type: 'h5' }),
+    H6: () => ({ type: 'h6' }),
+    IMG: (el) => ({ type: 'image', url: el.getAttribute('src') }),
+    LI: () => ({ type: 'li' }),
+    OL: () => ({ type: 'ol' }),
+    P: () => ({ type: 'p' }),
+    PRE: () => ({ type: 'code' }),
+    UL: () => ({ type: 'ul' }),
+};
+const TEXT_TAGS = {
+    CODE: () => ({ code: true }),
+    DEL: () => ({ strikethrough: true }),
+    EM: () => ({ italic: true }),
+    I: () => ({ italic: true }),
+    S: () => ({ strikethrough: true }),
+    STRONG: () => ({ bold: true }),
+    U: () => ({ underline: true }),
+};
+const deserialize = (el) => {
+    if (el.nodeType === 3) {
+        return el.textContent;
+    }
+    if (el.nodeType !== 1) {
+        return null;
+    }
+    if (el.nodeName === 'BR') {
+        return '\n';
+    }
+    const { nodeName } = el;
+    let parent = el;
+    if (nodeName === 'PRE'
+        && el.childNodes[0]
+        && el.childNodes[0].nodeName === 'CODE') {
+        [parent] = el.childNodes;
+    }
+    const children = Array.from(parent.childNodes)
+        .map(deserialize)
+        .flat();
+    if (el.nodeName === 'BODY') {
+        return jsx('fragment', {}, children);
+    }
+    if (ELEMENT_TAGS[nodeName]) {
+        const attrs = ELEMENT_TAGS[nodeName](el);
+        return jsx('element', attrs, children);
+    }
+    if (TEXT_TAGS[nodeName]) {
+        const attrs = TEXT_TAGS[nodeName](el);
+        return children.map((child) => jsx('text', attrs, child));
+    }
+    return children;
+};
+const withHTML = (incomingEditor) => {
+    const { insertData } = incomingEditor;
+    const editor = incomingEditor;
+    editor.insertData = (data) => {
+        if (!data.types.includes('application/x-slate-fragment')) {
+            const html = data.getData('text/html');
+            if (html) {
+                const parsed = new DOMParser().parseFromString(html, 'text/html');
+                const fragment = deserialize(parsed.body);
+                Transforms.insertFragment(editor, fragment);
+                return;
+            }
+        }
+        insertData(data);
+    };
+    return editor;
+};
+export default withHTML;

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

@@ -0,0 +1,8 @@
+import { BaseEditor, Selection } from 'slate';
+import { RichTextField } from '../../../../../fields/config/types';
+export declare type Props = Omit<RichTextField, 'type'> & {
+    path?: string;
+};
+export interface BlurSelectionEditor extends BaseEditor {
+    blurSelection?: Selection;
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import RenderFields from '../../RenderFields';
+import withCondition from '../../withCondition';
+import { fieldAffectsData } from '../../../../../fields/config/types';
+import './index.scss';
+const Row = (props) => {
+    const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, } = props;
+    const classes = [
+        'field-type',
+        'row',
+        className,
+    ].filter(Boolean).join(' ');
+    return (React.createElement(RenderFields, { readOnly: readOnly, className: classes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldTypes: fieldTypes, fieldSchema: fields.map((field) => ({
+            ...field,
+            path: `${path ? `${path}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
+        })) }));
+};
+export default withCondition(Row);