payload 1.3.3 → 1.4.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
-import { useFocused, useSelected } from 'slate-react';
+import React, { useCallback, useReducer, useState } from 'react';
+import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react';
 import { useTranslation } from 'react-i18next';
+import { Transforms } from 'slate';
 import { useConfig } from '../../../../../../utilities/Config';
-import RelationshipIcon from '../../../../../../icons/Relationship';
 import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
+import { useDocumentDrawer } from '../../../../../../elements/DocumentDrawer';
+import Button from '../../../../../../elements/Button';
+import { useListDrawer } from '../../../../../../elements/ListDrawer';
 import { getTranslation } from '../../../../../../../../utilities/getTranslation';
 import './index.scss';
 const baseClass = 'rich-text-relationship';
@@ -11,23 +14,87 @@ const initialParams = {
     depth: 0,
 };
 const Element = (props) => {
-    var _a;
-    const { attributes, children, element } = props;
+    var _a, _b, _c, _d, _e, _f;
+    const { attributes, children, element, fieldProps, } = props;
     const { relationTo, value } = element;
     const { collections, serverURL, routes: { api } } = useConfig();
-    const [relatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
+    const [enabledCollectionSlugs] = useState(() => collections.filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship).map(({ slug }) => slug));
+    const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
     const selected = useSelected();
     const focused = useFocused();
-    const { t, i18n } = useTranslation('fields');
-    const [{ data }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
+    const { t, i18n } = useTranslation(['fields', 'general']);
+    const editor = useSlateStatic();
+    const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0);
+    const [{ data }, { setParams }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
+    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer, },] = useDocumentDrawer({
+        collectionSlug: relatedCollection.slug,
+        id: value === null || value === void 0 ? void 0 : value.id,
+    });
+    const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer, },] = useListDrawer({
+        collectionSlugs: enabledCollectionSlugs,
+        selectedCollection: relatedCollection.slug,
+    });
+    const removeRelationship = useCallback(() => {
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.removeNodes(editor, { at: elementPath });
+    }, [editor, element]);
+    const updateRelationship = React.useCallback(({ doc }) => {
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.setNodes(editor, {
+            type: 'relationship',
+            value: { id: doc.id },
+            relationTo: relatedCollection.slug,
+            children: [
+                { text: ' ' },
+            ],
+        }, { at: elementPath });
+        setParams({
+            ...initialParams,
+            cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed
+        });
+        closeDrawer();
+        dispatchCacheBust();
+    }, [editor, element, relatedCollection, cacheBust, setParams, closeDrawer]);
+    const swapRelationship = React.useCallback(({ docID, collectionConfig }) => {
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.setNodes(editor, {
+            type: 'relationship',
+            value: { id: docID },
+            relationTo: collectionConfig.slug,
+            children: [
+                { text: ' ' },
+            ],
+        }, { at: elementPath });
+        setRelatedCollection(collections.find((coll) => coll.slug === collectionConfig.slug));
+        setParams({
+            ...initialParams,
+            cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed
+        });
+        closeListDrawer();
+        dispatchCacheBust();
+    }, [closeListDrawer, editor, element, cacheBust, setParams, collections]);
     return (React.createElement("div", { className: [
             baseClass,
             (selected && focused) && `${baseClass}--selected`,
         ].filter(Boolean).join(' '), contentEditable: false, ...attributes },
-        React.createElement(RelationshipIcon, null),
         React.createElement("div", { className: `${baseClass}__wrap` },
-            React.createElement("div", { className: `${baseClass}__label` }, t('labelRelationship', { label: getTranslation(relatedCollection.labels.singular, i18n) })),
-            React.createElement("h5", null, data[((_a = relatedCollection === null || relatedCollection === void 0 ? void 0 : relatedCollection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id'])),
+            React.createElement("p", { className: `${baseClass}__label` }, t('labelRelationship', { label: getTranslation(relatedCollection.labels.singular, i18n) })),
+            React.createElement("p", { className: `${baseClass}__title` }, data[((_a = relatedCollection === null || relatedCollection === void 0 ? void 0 : relatedCollection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id'])),
+        React.createElement("div", { className: `${baseClass}__actions` },
+            (value === null || value === void 0 ? void 0 : value.id) && (React.createElement(DocumentDrawerToggler, { className: `${baseClass}__toggler`, disabled: (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _b === void 0 ? void 0 : _b.readOnly },
+                React.createElement(Button, { icon: "edit", round: true, buttonStyle: "icon-label", el: "div", className: `${baseClass}__actionButton`, onClick: (e) => {
+                        e.preventDefault();
+                    }, tooltip: t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) }), disabled: (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _c === void 0 ? void 0 : _c.readOnly }))),
+            React.createElement(ListDrawerToggler, { disabled: (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _d === void 0 ? void 0 : _d.readOnly },
+                React.createElement(Button, { icon: "swap", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: () => {
+                        // do nothing
+                    }, el: "div", tooltip: t('swapRelationship'), disabled: (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _e === void 0 ? void 0 : _e.readOnly })),
+            React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
+                    e.preventDefault();
+                    removeRelationship();
+                }, tooltip: t('fields:removeRelationship'), disabled: (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _f === void 0 ? void 0 : _f.readOnly })),
+        (value === null || value === void 0 ? void 0 : value.id) && (React.createElement(DocumentDrawer, { onSave: updateRelationship })),
+        React.createElement(ListDrawer, { onSelect: swapRelationship }),
         children));
 };
 export default Element;

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

@@ -3,9 +3,9 @@
 .rich-text-relationship {
   @extend %body;
   @include shadow-sm;
-  padding: base(.5);
+  padding: base(.75);
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   background: var(--theme-input-bg);
   border: 1px solid var(--theme-elevation-100);
   max-width: base(15);
@@ -19,20 +19,77 @@
     margin: base(.625) 0;
   }
 
-  svg {
-    width: base(1.25);
-    height: base(1.25);
-    margin-right: base(.5);
+  &__label {
+    margin-bottom: base(0.25);
   }
 
-  h5 {
+  &__title {
+    margin: 0;
+  }
+
+  &__label,
+  &__title {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    line-height: 1 !important;
+  }
+
+  &__title {
+    font-weight: bold;
+  }
+
+  &__wrap {
+    flex-grow: 1;
+    overflow: hidden;
   }
 
   &--selected {
     box-shadow: $focus-box-shadow;
     outline: none;
   }
+
+  &__toggler {
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &:focus,
+    &:focus-within {
+      outline: none;
+    }
+
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: base(0.5);
+
+    & > *:not(:last-child) {
+      margin-right: base(.25);
+    }
+  }
+
+  &__actionButton {
+    margin: 0;
+    border-radius: 0;
+    flex-shrink: 0;
+    width: base(1);
+    height: base(1);
+
+    line {
+      stroke-width: $style-stroke-width-m;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
 }

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

@@ -3,7 +3,12 @@ declare const _default: {
     Button: import("react").FC<{
         path: string;
     }>;
-    Element: (props: any) => JSX.Element;
+    Element: import("react").FC<{
+        attributes: import("react").HTMLAttributes<HTMLDivElement>;
+        children: import("react").ReactNode;
+        element: any;
+        fieldProps: import("../../types").Props;
+    }>;
     plugins: ((incomingEditor: any) => any)[];
 };
 export default _default;

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

@@ -1,2 +1,3 @@
-declare const toggleElement: (editor: any, format: any) => void;
+import { Editor } from 'slate';
+declare const toggleElement: (editor: Editor, format: string) => void;
 export default toggleElement;

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

@@ -1,27 +1,23 @@
-import { Element, Transforms } from 'slate';
+import { Editor, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
 import isElementActive from './isActive';
-import listTypes from './listTypes';
+import { isWithinListItem } from './isWithinListItem';
 const toggleElement = (editor, format) => {
     const isActive = isElementActive(editor, format);
-    const isList = listTypes.includes(format);
     let type = format;
+    const isWithinLI = isWithinListItem(editor);
     if (isActive) {
         type = undefined;
     }
-    else if (isList) {
-        type = 'li';
+    if (!isActive && isWithinLI) {
+        const block = { type: 'li', children: [] };
+        Transforms.wrapNodes(editor, block, {
+            at: Editor.unhangRange(editor, editor.selection),
+        });
     }
-    Transforms.unwrapNodes(editor, {
-        match: (n) => Element.isElement(n) && listTypes.includes(n.type),
-        split: true,
-        mode: 'lowest',
+    Transforms.setNodes(editor, { type }, {
+        at: Editor.unhangRange(editor, editor.selection),
     });
-    Transforms.setNodes(editor, { type });
-    if (!isActive && isList) {
-        const block = { type: format, children: [] };
-        Transforms.wrapNodes(editor, block);
-    }
     ReactEditor.focus(editor);
 };
 export default toggleElement;

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

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

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

@@ -0,0 +1,75 @@
+import { Editor, Element, Node, Text, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { getCommonBlock } from './getCommonBlock';
+import isListActive from './isListActive';
+import listTypes from './listTypes';
+import { unwrapList } from './unwrapList';
+const toggleList = (editor, format) => {
+    let currentListFormat;
+    if (isListActive(editor, 'ol'))
+        currentListFormat = 'ol';
+    if (isListActive(editor, 'ul'))
+        currentListFormat = 'ul';
+    // If the format is currently active,
+    // remove the list
+    if (currentListFormat === format) {
+        const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+        // If on an empty bullet, leave the above list alone
+        // and unwrap only the active bullet
+        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
+            Transforms.unwrapNodes(editor, {
+                match: (n) => Element.isElement(n) && listTypes.includes(n.type),
+                split: true,
+                mode: 'lowest',
+            });
+            Transforms.setNodes(editor, { type: undefined });
+        }
+        else {
+            // Otherwise, we need to unset li on all lis in the parent list
+            // and unwrap the parent list itself
+            const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format);
+            unwrapList(editor, listPath);
+        }
+        // Otherwise, if a list is active and we are changing it,
+        // change it
+    }
+    else if (currentListFormat && currentListFormat !== format) {
+        Transforms.setNodes(editor, {
+            type: format,
+        }, {
+            match: (node) => Element.isElement(node) && listTypes.includes(node.type),
+            mode: 'lowest',
+        });
+        // Otherwise we can assume that we should just activate the list
+    }
+    else {
+        Transforms.wrapNodes(editor, { type: format, children: [] });
+        const [, parentNodePath] = getCommonBlock(editor, (node) => Element.isElement(node) && node.type === format);
+        // Only set li on nodes that don't have type
+        Transforms.setNodes(editor, { type: 'li' }, {
+            voids: true,
+            match: (node, path) => {
+                const match = Element.isElement(node)
+                    && typeof node.type === 'undefined'
+                    && path.length === parentNodePath.length + 1;
+                return match;
+            },
+        });
+        // Wrap nodes that do have a type with an li
+        // so as to not lose their existing formatting
+        const nodesToWrap = Array.from(Editor.nodes(editor, {
+            match: (node, path) => {
+                const match = Element.isElement(node)
+                    && typeof node.type !== 'undefined'
+                    && node.type !== 'li'
+                    && path.length === parentNodePath.length + 1;
+                return match;
+            },
+        }));
+        nodesToWrap.forEach(([, path]) => {
+            Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path });
+        });
+    }
+    ReactEditor.focus(editor);
+};
+export default toggleList;

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

@@ -1,7 +1,9 @@
-/// <reference types="react" />
-export type ButtonProps = {
+import { ElementType } from 'react';
+export declare type ButtonProps = {
     format: string;
     onClick?: (e: React.MouseEvent) => void;
     className?: string;
     children?: React.ReactNode;
+    tooltip?: string;
+    el?: ElementType;
 };

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

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