payload 1.3.4 → 1.4.1

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

@@ -1,7 +1,7 @@
-type RelationMap = {
+declare type RelationMap = {
     [relation: string]: unknown[];
 };
-type CreateRelationMap = (args: {
+declare type CreateRelationMap = (args: {
     hasMany: boolean;
     relationTo: string | string[];
     value: unknown;

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

@@ -1,6 +1,6 @@
 import { Option } from '../../../elements/ReactSelect/types';
 import { OptionGroup, Value } from './types';
-type Args = {
+declare type Args = {
     value: Value | Value[];
     options: OptionGroup[];
 };

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

@@ -80,6 +80,7 @@ const Relationship = (props) => {
                         limit: maxResultsPerRequest,
                         page: lastLoadedPageToUse,
                         sort: fieldToSearch,
+                        locale: i18n.language,
                         depth: 0,
                     };
                     if (searchArg) {
@@ -170,6 +171,7 @@ const Relationship = (props) => {
                         },
                     },
                     depth: 0,
+                    locale: i18n.language,
                     limit: idsToLoad.length,
                 };
                 if (!errorLoading) {
@@ -225,6 +227,9 @@ const Relationship = (props) => {
         setLastLoadedPage(1);
         setHasLoadedFirstPage(false);
     }, [relationTo, filterOptionsResult]);
+    const onSave = useCallback((args) => {
+        dispatchOptions({ type: 'UPDATE', doc: args.doc, collection: args.collectionConfig, i18n });
+    }, [i18n]);
     const classes = [
         'field-type',
         baseClass,
@@ -283,6 +288,7 @@ const Relationship = (props) => {
                     disableMouseDown: drawerIsOpen,
                     disableKeyDown: drawerIsOpen,
                     setDrawerIsOpen,
+                    onSave,
                 }, onMenuOpen: () => {
                     if (!hasLoadedFirstPage) {
                         setIsLoading(true);

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

@@ -19,10 +19,24 @@ const sortOptions = (options) => options.sort((a, b) => {
     return 0;
 });
 const optionsReducer = (state, action) => {
+    var _a;
     switch (action.type) {
         case 'CLEAR': {
             return [];
         }
+        case 'UPDATE': {
+            const { collection, doc, i18n } = action;
+            const relation = collection.slug;
+            const newOptions = [...state];
+            const labelKey = collection.admin.useAsTitle || 'id';
+            const foundOptionGroup = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
+            const foundOption = (_a = foundOptionGroup === null || foundOptionGroup === void 0 ? void 0 : foundOptionGroup.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === doc.id);
+            if (foundOption) {
+                foundOption.label = doc[labelKey] || `${i18n.t('general:untitled')} - ID: ${doc.id}`;
+                foundOption.relationTo = relation;
+            }
+            return newOptions;
+        }
         case 'ADD': {
             const { collection, docs, sort, ids = [], i18n } = action;
             const relation = collection.slug;

package/dist/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.js

@@ -9,7 +9,7 @@ import './index.scss';
 const baseClass = 'relationship--multi-value-label';
 export const MultiValueLabel = (props) => {
     var _a, _b, _c;
-    const { data: { value, relationTo, label, }, selectProps: { setDrawerIsOpen, draggableProps, }, } = props;
+    const { data: { value, relationTo, label, }, selectProps: { setDrawerIsOpen, draggableProps, onSave, }, } = props;
     const { permissions } = useAuth();
     const [showTooltip, setShowTooltip] = useState(false);
     const { t } = useTranslation('general');
@@ -32,5 +32,5 @@ export const MultiValueLabel = (props) => {
             React.createElement(DocumentDrawerToggler, { className: `${baseClass}__drawer-toggler`, "aria-label": `Edit ${label}`, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: () => setShowTooltip(false) },
                 React.createElement(Tooltip, { className: `${baseClass}__tooltip`, show: showTooltip }, t('editLabel', { label: '' })),
                 React.createElement(Edit, null)),
-            React.createElement(DocumentDrawer, null)))));
+            React.createElement(DocumentDrawer, { onSave: onSave })))));
 };

package/dist/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss

@@ -15,14 +15,11 @@
   &__text {
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 
   &__drawer-toggler {
     position: relative;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.js

@@ -9,7 +9,7 @@ import './index.scss';
 const baseClass = 'relationship--single-value';
 export const SingleValue = (props) => {
     var _a, _b, _c;
-    const { data: { value, relationTo, label, }, children, selectProps: { selectProps: { setDrawerIsOpen, }, }, } = props;
+    const { data: { value, relationTo, label, }, children, selectProps: { selectProps: { setDrawerIsOpen, onSave, }, }, } = props;
     const [showTooltip, setShowTooltip] = useState(false);
     const { t } = useTranslation('general');
     const { permissions } = useAuth();
@@ -30,5 +30,5 @@ export const SingleValue = (props) => {
                     React.createElement(DocumentDrawerToggler, { className: `${baseClass}__drawer-toggler`, "aria-label": t('editLabel', { label }), onMouseDown: (e) => e.stopPropagation(), onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: () => setShowTooltip(false) },
                         React.createElement(Tooltip, { className: `${baseClass}__tooltip`, show: showTooltip }, t('edit')),
                         React.createElement(Edit, null)))))),
-        relationTo && hasReadPermission && (React.createElement(DocumentDrawer, null))));
+        relationTo && hasReadPermission && (React.createElement(DocumentDrawer, { onSave: onSave }))));
 };

package/dist/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss

@@ -10,14 +10,17 @@
     display: flex;
     align-items: center;
     overflow: visible;
+    width: 100%;
+    flex-shrink: 1;
+  }
+
+  &__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__drawer-toggler {
     position: relative;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;

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

@@ -2,27 +2,33 @@ import i18n from 'i18next';
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
 import { RelationshipField } from '../../../../../fields/config/types';
 import { Where } from '../../../../../types';
-export type Props = Omit<RelationshipField, 'type'> & {
+export declare type Props = Omit<RelationshipField, 'type'> & {
     path?: string;
 };
-export type Option = {
+export declare type Option = {
     label: string;
     value: string | number;
     relationTo?: string;
     options?: Option[];
 };
-export type OptionGroup = {
+export declare type OptionGroup = {
     label: string;
     options: Option[];
 };
-export type Value = {
+export declare type Value = {
     relationTo: string;
     value: string | number;
 } | string | number;
-type CLEAR = {
+declare type CLEAR = {
     type: 'CLEAR';
 };
-type ADD = {
+declare type UPDATE = {
+    type: 'UPDATE';
+    doc: any;
+    collection: SanitizedCollectionConfig;
+    i18n: typeof i18n;
+};
+declare type ADD = {
     type: 'ADD';
     docs: any[];
     collection: SanitizedCollectionConfig;
@@ -30,12 +36,12 @@ type ADD = {
     ids?: unknown[];
     i18n: typeof i18n;
 };
-export type Action = CLEAR | ADD;
-export type ValueWithRelation = {
+export declare type Action = CLEAR | ADD | UPDATE;
+export declare type ValueWithRelation = {
     relationTo: string;
     value: string;
 };
-export type GetResults = (args: {
+export declare type GetResults = (args: {
     lastFullyLoadedRelation?: number;
     lastLoadedPage?: number;
     search?: string;
@@ -43,7 +49,7 @@ export type GetResults = (args: {
     sort?: boolean;
     onSuccess?: () => void;
 }) => Promise<void>;
-export type FilterOptionsResult = {
+export declare type FilterOptionsResult = {
     [relation: string]: Where;
 };
 export {};

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

@@ -2,21 +2,13 @@ import React from 'react';
 import { BaseEditor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { HistoryEditor } from 'slate-history';
-import { Props } from './types';
+import { ElementNode, TextNode, Props } from './types';
 import './index.scss';
-type CustomText = {
-    text: string;
-    [x: string]: unknown;
-};
-type CustomElement = {
-    type?: string;
-    children: CustomText[];
-};
 declare module 'slate' {
     interface CustomTypes {
         Editor: BaseEditor & ReactEditor & HistoryEditor;
-        Element: CustomElement;
-        Text: CustomText;
+        Element: ElementNode;
+        Text: TextNode;
     }
 }
 declare const _default: React.FC<Props>;

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

@@ -21,6 +21,7 @@ import listTypes from './elements/listTypes';
 import mergeCustomFunctions from './mergeCustomFunctions';
 import withEnterBreakOut from './plugins/withEnterBreakOut';
 import { getTranslation } from '../../../../../utilities/getTranslation';
+import { useEditDepth } from '../../../utilities/EditDepth';
 import './index.scss';
 const defaultElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'indent', 'link', 'relationship', 'upload'];
 const defaultLeaves = ['bold', 'italic', 'underline', 'strikethrough', 'code'];
@@ -36,6 +37,8 @@ const RichText = (props) => {
     const [enabledLeaves, setEnabledLeaves] = useState({});
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
+    const drawerDepth = useEditDepth();
+    const drawerIsOpen = drawerDepth > 1;
     const renderElement = useCallback(({ attributes, children, element }) => {
         const matchedElement = enabledElements[element === null || element === void 0 ? void 0 : element.type];
         const Element = matchedElement === null || matchedElement === void 0 ? void 0 : matchedElement.Element;
@@ -82,6 +85,23 @@ const RichText = (props) => {
         CreatedEditor = enablePlugins(CreatedEditor, leaves);
         return CreatedEditor;
     }, [elements, leaves]);
+    // All slate changes fire the onChange event
+    // including selection changes
+    // so we will filter the set_selection operations out
+    // and only fire setValue when onChange is because of value
+    const handleChange = useCallback((val) => {
+        const ops = editor.operations.filter((o) => {
+            if (o) {
+                return o.type !== 'set_selection';
+            }
+            return false;
+        });
+        if (ops && Array.isArray(ops) && ops.length > 0) {
+            if (!readOnly && val !== defaultValue && val !== value) {
+                setValue(val);
+            }
+        }
+    }, [editor.operations, readOnly, setValue, value]);
     useEffect(() => {
         if (!loaded) {
             const mergedElements = mergeCustomFunctions(elements, elementTypes);
@@ -115,13 +135,13 @@ const RichText = (props) => {
         };
     }, [loaded, readOnly]);
     useEffect(() => {
-        // If there is a change to the initial value, we need to reset Slate
-        // to the new initial value, and clear selection
+        // If there is a change to the initial value, we need to reset Slate history
+        // and clear selection because the old selection may no longer be valid
+        // as returned JSON may be modified in hooks and have a different shape
         if (Array.isArray(initialValue) && initialValue.length > 0) {
             if (editor.selection)
                 ReactEditor.deselect(editor);
             editor.history = { redos: [], undos: [] };
-            editor.children = initialValue;
         }
     }, [initialValue, editor]);
     if (!loaded) {
@@ -146,13 +166,12 @@ const RichText = (props) => {
         React.createElement("div", { className: `${baseClass}__wrap` },
             React.createElement(Error, { showError: showError, message: errorMessage }),
             React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
-            React.createElement(Slate, { editor: editor, value: valueToRender, onChange: (val) => {
-                    if (!readOnly && val !== defaultValue && val !== value) {
-                        setValue(val);
-                    }
-                } },
+            React.createElement(Slate, { editor: editor, value: valueToRender, onChange: handleChange },
                 React.createElement("div", { className: `${baseClass}__wrapper` },
-                    React.createElement("div", { className: `${baseClass}__toolbar`, ref: toolbarRef },
+                    React.createElement("div", { className: [
+                            `${baseClass}__toolbar`,
+                            drawerIsOpen && `${baseClass}__drawerIsOpen`,
+                        ].filter(Boolean).join(' '), ref: toolbarRef },
                         React.createElement("div", { className: `${baseClass}__toolbar-wrap` },
                             elements.map((element, i) => {
                                 let elementName;
@@ -209,12 +228,14 @@ const RichText = (props) => {
                                     const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
                                     if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
                                         const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                                        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 1) {
+                                        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
+                                            event.preventDefault();
                                             Transforms.unwrapNodes(editor, {
                                                 match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),
                                                 split: true,
+                                                mode: 'lowest',
                                             });
-                                            Transforms.setNodes(editor, {});
+                                            Transforms.setNodes(editor, { type: undefined });
                                         }
                                     }
                                     else if (editor.isVoid(selectedElement)) {

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

@@ -1,6 +1,9 @@
 @import '../../../../scss/styles.scss';
 
 .rich-text__button {
+  position: relative;
+  cursor: pointer;
+
   svg {
     width: base(.75);
     height: base(.75);

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

@@ -1,19 +1,26 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useSlate } from 'slate-react';
 import isElementActive from './isActive';
 import toggleElement from './toggle';
+import Tooltip from '../../../../elements/Tooltip';
 import '../buttons.scss';
 export const baseClass = 'rich-text__button';
-const ElementButton = ({ format, children, onClick, className }) => {
+const ElementButton = (props) => {
+    const { format, children, onClick, className, tooltip, el = 'button', } = props;
     const editor = useSlate();
+    const [showTooltip, setShowTooltip] = useState(false);
     const defaultOnClick = useCallback((event) => {
         event.preventDefault();
+        setShowTooltip(false);
         toggleElement(editor, format);
     }, [editor, format]);
-    return (React.createElement("button", { type: "button", className: [
+    const Tag = el;
+    return (React.createElement(Tag, { ...el === 'button' && { type: 'button' }, className: [
             baseClass,
             className,
             isElementActive(editor, format) && `${baseClass}__button--active`,
-        ].filter(Boolean).join(' '), onClick: onClick || defaultOnClick }, children));
+        ].filter(Boolean).join(' '), onClick: onClick || defaultOnClick, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+        tooltip && (React.createElement(Tooltip, { show: showTooltip }, tooltip)),
+        children));
 };
 export default ElementButton;

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

@@ -1,14 +1,14 @@
 import React, { useCallback } from 'react';
 import { useSlate } from 'slate-react';
+import toggleList from './toggleList';
 import isListActive from './isListActive';
-import toggleElement from './toggle';
 import '../buttons.scss';
 export const baseClass = 'rich-text__button';
 const ListButton = ({ format, children, onClick, className }) => {
     const editor = useSlate();
     const defaultOnClick = useCallback((event) => {
         event.preventDefault();
-        toggleElement(editor, format);
+        toggleList(editor, format);
     }, [editor, format]);
     return (React.createElement("button", { type: "button", className: [
             baseClass,

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

@@ -0,0 +1,2 @@
+import { Node } from 'slate';
+export declare const areAllChildrenElements: (node: Node) => boolean;

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

@@ -0,0 +1,4 @@
+import { Element } from 'slate';
+export const areAllChildrenElements = (node) => {
+    return Array.isArray(node.children) && node.children.every((child) => Element.isElement(child));
+};

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

@@ -0,0 +1,2 @@
+import { Editor, Node, NodeEntry, NodeMatch } from 'slate';
+export declare const getCommonBlock: (editor: Editor, match?: NodeMatch<Node>) => NodeEntry<Node>;

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

@@ -0,0 +1,12 @@
+import { Editor, Node } from 'slate';
+export const getCommonBlock = (editor, match) => {
+    const range = Editor.unhangRange(editor, editor.selection, { voids: true });
+    const [common, path] = Node.common(editor, range.anchor.path, range.focus.path);
+    if (Editor.isBlock(editor, common) || Editor.isEditor(common)) {
+        return [common, path];
+    }
+    return Editor.above(editor, {
+        at: path,
+        match: match || ((n) => Editor.isBlock(editor, n) || Editor.isEditor(n)),
+    });
+};

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

@@ -1,11 +1,13 @@
 import React, { useCallback } from 'react';
 import { useSlate, ReactEditor } from 'slate-react';
-import { Editor, Element, Transforms } from 'slate';
+import { Editor, Element, Text, 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';
+import { getCommonBlock } from '../getCommonBlock';
+import { unwrapList } from '../unwrapList';
 const indentType = 'indent';
 const IndentWithPadding = ({ attributes, children }) => (React.createElement("div", { style: { paddingLeft: 25 }, ...attributes }, children));
 const indent = {
@@ -14,36 +16,130 @@ const indent = {
         const handleIndent = useCallback((e, dir) => {
             e.preventDefault();
             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',
-                        });
+                    const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && listTypes.includes(n.type));
+                    const matchedParentList = Editor.above(editor, {
+                        at: listPath,
+                        match: (n) => !Editor.isEditor(n) && Editor.isBlock(editor, n),
+                    });
+                    if (matchedParentList) {
+                        const [parentListItem, parentListItemPath] = matchedParentList;
+                        if (parentListItem.children.length > 1) {
+                            // Remove nested list
+                            Transforms.unwrapNodes(editor, {
+                                at: parentListItemPath,
+                                match: (node, path) => {
+                                    const matches = !Editor.isEditor(node)
+                                        && Element.isElement(node)
+                                        && listTypes.includes(node.type)
+                                        && path.length === parentListItemPath.length + 1;
+                                    return matches;
+                                },
+                            });
+                            // Set li type on any children that don't have a type
+                            Transforms.setNodes(editor, { type: 'li' }, {
+                                at: parentListItemPath,
+                                match: (node, path) => {
+                                    const matches = !Editor.isEditor(node)
+                                        && Element.isElement(node)
+                                        && node.type !== 'li'
+                                        && path.length === parentListItemPath.length + 1;
+                                    return matches;
+                                },
+                            });
+                            // Parent list item path has changed at this point
+                            // so we need to re-fetch the parent node
+                            const [newParentNode] = Editor.node(editor, parentListItemPath);
+                            // If the parent node is an li,
+                            // lift all li nodes within
+                            if (Element.isElement(newParentNode) && newParentNode.type === 'li') {
+                                // Lift the nested lis
+                                Transforms.liftNodes(editor, {
+                                    at: parentListItemPath,
+                                    match: (node, path) => {
+                                        const matches = !Editor.isEditor(node)
+                                            && Element.isElement(node)
+                                            && path.length === parentListItemPath.length + 1
+                                            && node.type === 'li';
+                                        return matches;
+                                    },
+                                });
+                            }
+                        }
+                        else {
+                            Transforms.unwrapNodes(editor, {
+                                at: parentListItemPath,
+                                match: (node, path) => {
+                                    return Element.isElement(node)
+                                        && node.type === 'li'
+                                        && path.length === parentListItemPath.length;
+                                },
+                            });
+                            Transforms.unwrapNodes(editor, {
+                                match: (n) => Element.isElement(n) && listTypes.includes(n.type),
+                            });
+                        }
                     }
                     else {
-                        Transforms.unsetNodes(editor, ['type']);
+                        unwrapList(editor, listPath);
                     }
                 }
+                else {
+                    Transforms.unwrapNodes(editor, {
+                        match: (n) => Element.isElement(n) && n.type === indentType,
+                        split: true,
+                        mode: 'lowest',
+                    });
+                }
             }
             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' });
+                    // Get the path of the first selected li -
+                    // Multiple lis could be selected
+                    // and the selection may start in the middle of the first li
+                    const [[, firstSelectedLIPath]] = Array.from(Editor.nodes(editor, {
+                        mode: 'lowest',
+                        match: (node) => Element.isElement(node) && node.type === 'li',
+                    }));
+                    // Is the first selected li the first in its list?
+                    const hasPrecedingLI = firstSelectedLIPath[firstSelectedLIPath.length - 1] > 0;
+                    // If the first selected li is NOT the first in its list,
+                    // we need to inject it into the prior li
+                    if (hasPrecedingLI) {
+                        const [, precedingLIPath] = Editor.previous(editor, {
+                            at: firstSelectedLIPath,
+                        });
+                        const [precedingLIChildren] = Editor.node(editor, [...precedingLIPath, 0]);
+                        const precedingLIChildrenIsText = Text.isText(precedingLIChildren);
+                        if (precedingLIChildrenIsText) {
+                            // Wrap the prior li text content so that it can be nested next to a list
+                            Transforms.wrapNodes(editor, { children: [] }, { at: [...precedingLIPath, 0] });
+                        }
+                        // Move the selected lis after the prior li contents
+                        Transforms.moveNodes(editor, {
+                            to: [...precedingLIPath, 1],
+                            match: (node) => Element.isElement(node) && node.type === 'li',
+                            mode: 'lowest',
+                        });
+                        // Wrap the selected lis in a new list
+                        Transforms.wrapNodes(editor, {
+                            type: isCurrentlyOL ? 'ol' : 'ul', children: [],
+                        }, {
+                            match: (node) => Element.isElement(node) && node.type === 'li',
+                            mode: 'lowest',
+                        });
+                    }
+                    else {
+                        // Otherwise, just wrap the node in a list / li
+                        Transforms.wrapNodes(editor, {
+                            type: isCurrentlyOL ? 'ol' : 'ul', children: [{ type: 'li', children: [] }],
+                        }, {
+                            match: (node) => Element.isElement(node) && node.type === 'li',
+                            mode: 'lowest',
+                        });
+                    }
                 }
                 else {
                     Transforms.wrapNodes(editor, { type: indentType, children: [] });