payload 0.20.0 → 0.20.1

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

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Modal } from '@faceless-ui/modal';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlateStatic } from 'slate-react';
+import { useConfig } from '../../../../../../../utilities/Config';
+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 '../../addSwapModals.scss';
+const baseClass = 'rich-text-upload-modal';
+export const SwapUploadModal = ({ closeModal, element, setRelatedCollectionConfig, relatedCollectionConfig, slug }) => {
+    var _a, _b;
+    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, { limits: (_b = (_a = modalCollection === null || modalCollection === void 0 ? void 0 : modalCollection.admin) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.limits, limit: limit, modifySearchParams: false, handleChange: setLimit })))))));
+};

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

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

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

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlateStatic, useFocused, useSelected } from 'slate-react';
+import { useConfig } from '../../../../../../utilities/Config';
+import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
+import FileGraphic from '../../../../../../graphics/File';
+import useThumbnail from '../../../../../../../hooks/useThumbnail';
+import Button from '../../../../../../elements/Button';
+import { SwapUploadModal } from './SwapUploadModal';
+import { EditModal } from './EditModal';
+import './index.scss';
+const baseClass = 'rich-text-upload';
+const initialParams = {
+    depth: 0,
+};
+const Element = ({ attributes, children, element, path, fieldProps }) => {
+    var _a, _b, _c, _d;
+    const { relationTo, value } = element;
+    const { closeAll, open } = useModal();
+    const { collections, serverURL, routes: { api } } = useConfig();
+    const [modalToRender, setModalToRender] = useState(undefined);
+    const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
+    const editor = useSlateStatic();
+    const selected = useSelected();
+    const focused = useFocused();
+    const modalSlug = `${path}-edit-upload-${modalToRender}`;
+    // Get the referenced document
+    const [{ data: upload }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
+    const thumbnailSRC = useThumbnail(relatedCollection, upload);
+    const removeUpload = useCallback(() => {
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.removeNodes(editor, { at: elementPath });
+    }, [editor, element]);
+    const closeModal = useCallback(() => {
+        closeAll();
+        setModalToRender(null);
+    }, [closeAll]);
+    useEffect(() => {
+        if (modalToRender && modalSlug) {
+            open(`${modalSlug}`);
+        }
+    }, [modalToRender, open, modalSlug]);
+    const fieldSchema = (_d = (_c = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.upload) === null || _b === void 0 ? void 0 : _b.collections) === null || _c === void 0 ? void 0 : _c[relatedCollection.slug]) === null || _d === void 0 ? void 0 : _d.fields;
+    return (React.createElement("div", { className: [
+            baseClass,
+            (selected && focused) && `${baseClass}--selected`,
+        ].filter(Boolean).join(' '), contentEditable: false, ...attributes },
+        React.createElement("div", { className: `${baseClass}__card` },
+            React.createElement("div", { className: `${baseClass}__topRow` },
+                React.createElement("div", { className: `${baseClass}__thumbnail` }, thumbnailSRC ? (React.createElement("img", { src: thumbnailSRC, alt: upload === null || upload === void 0 ? void 0 : upload.filename })) : (React.createElement(FileGraphic, null))),
+                React.createElement("div", { className: `${baseClass}__topRowRightPanel` },
+                    React.createElement("div", { className: `${baseClass}__collectionLabel` }, relatedCollection.labels.singular),
+                    React.createElement("div", { className: `${baseClass}__actions` },
+                        fieldSchema && (React.createElement(Button, { icon: "edit", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
+                                e.preventDefault();
+                                setModalToRender('edit');
+                            }, tooltip: "Edit" })),
+                        React.createElement(Button, { icon: "swap", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
+                                e.preventDefault();
+                                setModalToRender('swap');
+                            }, tooltip: "Swap Upload" }),
+                        React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
+                                e.preventDefault();
+                                removeUpload();
+                            }, tooltip: "Remove Upload" })))),
+            React.createElement("div", { className: `${baseClass}__bottomRow` },
+                React.createElement("h5", null, upload === null || upload === void 0 ? void 0 : upload.filename))),
+        children,
+        modalToRender === 'swap' && (React.createElement(SwapUploadModal, { slug: modalSlug, element: element, closeModal: closeModal, setRelatedCollectionConfig: setRelatedCollection, relatedCollectionConfig: relatedCollection })),
+        (modalToRender === 'edit' && fieldSchema) && (React.createElement(EditModal, { slug: modalSlug, closeModal: closeModal, relatedCollectionConfig: relatedCollection, fieldSchema: fieldSchema, element: element }))));
+};
+export default Element;

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

@@ -0,0 +1,89 @@
+@import '../../../../../../../scss/styles.scss';
+
+.rich-text-upload {
+  max-width: base(15);
+  display: flex;
+  align-items: center;
+  background: white;
+  position: relative;
+
+  &__card {
+    @include soft-shadow-bottom;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__topRow {
+    display: flex;
+  }
+
+  &__thumbnail {
+    width: base(3.25);
+    height: auto;
+    position: relative;
+    overflow: hidden;
+
+    img, svg {
+      position: absolute;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      background-color: $color-dark-gray;
+    }
+  }
+
+  &__topRowRightPanel {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    padding: base(.75) base(1);
+    justify-content: space-between;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+  }
+
+  &__actionButton {
+    margin: 0;
+    margin-right: base(.5);
+    border-radius: 0;
+
+    line {
+      stroke-width: $style-stroke-width-m;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &__collectionLabel {
+    margin-right: base(3);
+  }
+
+  &__bottomRow {
+    padding: base(.5);
+    border-top: 1px solid $color-background-gray;
+  }
+
+  h5 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &__wrap {
+    padding: base(.5) base(.5) base(.5) base(1);
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &--selected {
+    box-shadow: $focus-box-shadow;
+    outline: none;
+  }
+}

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

@@ -0,0 +1,55 @@
+@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;
+  }
+
+  &__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,78 @@
+@import '../../../../scss/styles.scss';
+
+.rich-text {
+  margin-bottom: base(2);
+  display: flex;
+
+  &__toolbar {
+    @include blur-bg(white);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    margin-bottom: $baseline;
+    border: $style-stroke-width-s solid $color-light-gray;
+    padding: base(.25);
+    position: sticky;
+    top: base(5);
+  }
+
+  &__editor {
+
+    [data-slate-node=element] {
+      margin-bottom: base(0.25);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      margin-bottom: base(.5);
+    }
+  }
+
+  &__input {
+    min-height: base(10);
+  }
+
+  &__wrap {
+    width: 100%;
+    position: relative;
+  }
+
+  &__wrapper {
+    width: 100%;
+  }
+
+  &--read-only {
+    .rich-text__editor {
+      background-color: $color-light-gray;
+      padding: base(.5);
+    }
+  }
+
+  &__button {
+    @extend %btn-reset;
+    padding: base(0.25);
+
+    svg {
+      @include color-svg($color-dark-gray);
+      width: base(0.75);
+      height: base(0.75);
+    }
+
+    &:hover {
+      background-color: $color-background-gray;
+    }
+
+    &__button--active,
+    &__button--active:hover {
+      background-color: $color-light-gray;
+    }
+  }
+}
+
+.field-type.blocks {
+  .rich-text__toolbar {
+    top: base(7);
+  }
+}

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;