payload 0.20.0 → 0.20.3-beta.0

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { Editor, Element } from 'slate';
+export const isLastSelectedElementEmpty = (editor) => {
+    var _a;
+    const currentlySelectedNodes = Array.from(Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, editor.selection),
+        match: (n) => !Editor.isEditor(n) && Element.isElement(n) && (!n.type || n.type === 'p'),
+    }));
+    const lastSelectedNode = currentlySelectedNodes === null || currentlySelectedNodes === void 0 ? void 0 : currentlySelectedNodes[(currentlySelectedNodes === null || currentlySelectedNodes === void 0 ? void 0 : currentlySelectedNodes.length) - 1];
+    return lastSelectedNode && Element.isElement(lastSelectedNode[0])
+        && (!lastSelectedNode[0].type || lastSelectedNode[0].type === 'p')
+        && ((_a = lastSelectedNode[0].children) === null || _a === void 0 ? void 0 : _a[0].text) === '';
+};

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

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

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

@@ -0,0 +1,19 @@
+import { Editor, Element } from 'slate';
+const isListActive = (editor, format) => {
+    var _a;
+    let parentLI;
+    try {
+        parentLI = Editor.parent(editor, editor.selection);
+    }
+    catch (e) {
+        // swallow error, Slate
+    }
+    if (((_a = parentLI === null || parentLI === void 0 ? void 0 : parentLI[1]) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        const ancestor = Editor.above(editor, {
+            at: parentLI[1],
+        });
+        return Element.isElement(ancestor[0]) && ancestor[0].type === format;
+    }
+    return false;
+};
+export default isListActive;

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ReactEditor } from 'slate-react';
+import './index.scss';
+declare const link: {
+    Button: () => JSX.Element;
+    Element: ({ attributes, children, element, editorRef }: {
+        attributes: any;
+        children: any;
+        element: any;
+        editorRef: any;
+    }) => JSX.Element;
+    plugins: ((incomingEditor: import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor & import("../../types").BlurSelectionEditor) => import("slate").BaseEditor & ReactEditor & import("slate-history").HistoryEditor & import("../../types").BlurSelectionEditor)[];
+};
+export default link;

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

@@ -0,0 +1,74 @@
+import React, { Fragment, useCallback, useState } from 'react';
+import { ReactEditor, useSlate } from 'slate-react';
+import { Transforms } from 'slate';
+import ElementButton from '../Button';
+import { withLinks, wrapLink } from './utilities';
+import LinkIcon from '../../../../../icons/Link';
+import Popup from '../../../../../elements/Popup';
+import Button from '../../../../../elements/Button';
+import Check from '../../../../../icons/Check';
+import Error from '../../../../Error';
+import './index.scss';
+const baseClass = 'rich-text-link';
+const Link = ({ attributes, children, element, editorRef }) => {
+    const editor = useSlate();
+    const [error, setError] = useState(false);
+    const [open, setOpen] = useState(element.url === undefined);
+    const handleToggleOpen = useCallback((newOpen) => {
+        setOpen(newOpen);
+        if (element.url === undefined && !newOpen) {
+            const path = ReactEditor.findPath(editor, element);
+            Transforms.setNodes(editor, { url: '' }, { at: path });
+        }
+    }, [editor, element]);
+    return (React.createElement("span", { className: baseClass, ...attributes },
+        React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
+            React.createElement(Popup, { initActive: element.url === undefined, buttonType: "none", size: "small", horizontalAlign: "center", forceOpen: open, onToggleOpen: handleToggleOpen, boundingRef: editorRef, render: ({ close }) => (React.createElement(Fragment, null,
+                    React.createElement("div", { className: `${baseClass}__url-wrap` },
+                        React.createElement("input", { value: element.url || '', className: `${baseClass}__url`, placeholder: "Enter a URL", onChange: (e) => {
+                                const { value } = e.target;
+                                if (value && error) {
+                                    setError(false);
+                                }
+                                const path = ReactEditor.findPath(editor, element);
+                                Transforms.setNodes(editor, { url: value }, { at: path });
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    close();
+                                }
+                            } }),
+                        React.createElement(Button, { className: `${baseClass}__confirm`, buttonStyle: "none", icon: "chevron", onClick: (e) => {
+                                e.preventDefault();
+                                if (element.url) {
+                                    close();
+                                }
+                                else {
+                                    setError(true);
+                                }
+                            } }),
+                        error && (React.createElement(Error, { showError: error, message: "Please enter a valid URL." }))),
+                    React.createElement(Button, { className: [`${baseClass}__new-tab`, element.newTab && `${baseClass}__new-tab--checked`].filter(Boolean).join(' '), buttonStyle: "none", onClick: () => {
+                            const path = ReactEditor.findPath(editor, element);
+                            Transforms.setNodes(editor, { newTab: !element.newTab }, { at: path });
+                        } },
+                        React.createElement(Check, null),
+                        "Open link in new tab"))) })),
+        React.createElement("button", { className: [
+                `${baseClass}__button`,
+                open && `${baseClass}__button--open`,
+            ].filter(Boolean).join(' '), type: "button", onClick: () => setOpen(true) }, children)));
+};
+const LinkButton = () => {
+    const editor = useSlate();
+    return (React.createElement(ElementButton, { format: "link", onClick: () => wrapLink(editor) },
+        React.createElement(LinkIcon, null)));
+};
+const link = {
+    Button: LinkButton,
+    Element: Link,
+    plugins: [
+        withLinks,
+    ],
+};
+export default link;

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

@@ -0,0 +1,97 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-link {
+  position: relative;
+  text-decoration: underline;
+
+  .popup {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.rich-text-link__popup-wrap {
+  cursor: pointer;
+
+  .tooltip {
+    bottom: 80%;
+  }
+}
+
+.rich-text-link__button {
+  @extend %btn-reset;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  position: relative;
+  z-index: 2;
+  text-decoration: underline;
+  cursor: text;
+
+  &--open {
+    z-index: $z-modal + 1;
+  }
+}
+
+.rich-text-link__url-wrap {
+  position: relative;
+  width: 100%;
+  margin-bottom: base(.5);
+}
+
+.rich-text-link__confirm {
+  position: absolute;
+  right: base(.5);
+  top: 50%;
+  transform: translateY(-50%);
+
+  svg {
+    @include color-svg(var(--theme-elevation-0));
+    transform: rotate(-90deg);
+  }
+}
+
+.rich-text-link__url {
+  @include formInput;
+  padding-right: base(1.75);
+  min-width: base(12);
+  width: 100%;
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-1000);
+}
+
+.rich-text-link__new-tab {
+  svg {
+    @include color-svg(var(--theme-elevation-900));
+    background: var(--theme-elevation-100);
+    margin-right: base(.5);
+  }
+
+  path {
+    opacity: 0;
+  }
+
+  &:hover {
+    path {
+      opacity: .2;
+    }
+  }
+
+  &--checked {
+    path {
+      opacity: 1;
+    }
+
+    &:hover {
+      path {
+        opacity: .8;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+import { Editor } from 'slate';
+export declare const unwrapLink: (editor: Editor) => void;
+export declare const wrapLink: (editor: Editor, url?: string, newTab?: boolean) => void;
+export declare const withLinks: (incomingEditor: Editor) => Editor;

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

@@ -0,0 +1,42 @@
+import { Transforms, Range, Element } from 'slate';
+import isElementActive from '../isActive';
+export const unwrapLink = (editor) => {
+    Transforms.unwrapNodes(editor, { match: (n) => Element.isElement(n) && n.type === 'link' });
+};
+export const wrapLink = (editor, url, newTab) => {
+    const { selection, blurSelection } = editor;
+    if (blurSelection) {
+        Transforms.select(editor, blurSelection);
+    }
+    if (isElementActive(editor, 'link')) {
+        unwrapLink(editor);
+    }
+    else {
+        const selectionToUse = selection || blurSelection;
+        const isCollapsed = selectionToUse && Range.isCollapsed(selectionToUse);
+        const link = {
+            type: 'link',
+            url,
+            newTab,
+            children: isCollapsed ? [{ text: url }] : [],
+        };
+        if (isCollapsed) {
+            Transforms.insertNodes(editor, link);
+        }
+        else {
+            Transforms.wrapNodes(editor, link, { split: true });
+            Transforms.collapse(editor, { edge: 'end' });
+        }
+    }
+};
+export const withLinks = (incomingEditor) => {
+    const editor = incomingEditor;
+    const { isInline } = editor;
+    editor.isInline = (element) => {
+        if (element.type === 'link') {
+            return true;
+        }
+        return isInline(element);
+    };
+    return editor;
+};

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

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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

@@ -0,0 +1 @@
+export default ['ol', 'ul'];

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import ListButton from '../ListButton';
+import OLIcon from '../../../../../icons/OrderedList';
+import './index.scss';
+const OL = ({ attributes, children }) => (React.createElement("ol", { className: "rich-text-ol", ...attributes }, children));
+const ol = {
+    Button: () => (React.createElement(ListButton, { format: "ol" },
+        React.createElement(OLIcon, null))),
+    Element: OL,
+};
+export default ol;

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

@@ -0,0 +1,7 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-ol {
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const RelationshipFields: () => JSX.Element;
+export default RelationshipFields;

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

@@ -0,0 +1,33 @@
+import React, { Fragment, useState, useEffect } from 'react';
+import { useConfig } from '../../../../../../../utilities/Config';
+import { useAuth } from '../../../../../../../utilities/Auth';
+import { useWatchForm } from '../../../../../../Form/context';
+import Relationship from '../../../../../Relationship';
+import Select from '../../../../../Select';
+const createOptions = (collections, permissions) => collections.reduce((options, collection) => {
+    var _a, _b, _c, _d;
+    if (((_c = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.read) === null || _c === void 0 ? void 0 : _c.permission) && ((_d = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _d === void 0 ? void 0 : _d.enableRichTextRelationship)) {
+        return [
+            ...options,
+            {
+                label: collection.labels.plural,
+                value: collection.slug,
+            },
+        ];
+    }
+    return options;
+}, []);
+const RelationshipFields = () => {
+    const { collections } = useConfig();
+    const { permissions } = useAuth();
+    const [options, setOptions] = useState(() => createOptions(collections, permissions));
+    const { getData } = useWatchForm();
+    const { relationTo } = getData();
+    useEffect(() => {
+        setOptions(createOptions(collections, permissions));
+    }, [collections, permissions]);
+    return (React.createElement(Fragment, null,
+        React.createElement(Select, { required: true, label: "Relation To", name: "relationTo", options: options }),
+        relationTo && (React.createElement(Relationship, { label: "Related Document", name: "value", relationTo: relationTo, required: true }))));
+};
+export default RelationshipFields;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+declare const RelationshipButton: React.FC<{
+    path: string;
+}>;
+export default RelationshipButton;

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

@@ -0,0 +1,75 @@
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlate } from 'slate-react';
+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 './index.scss';
+const initialFormData = {};
+const baseClass = 'relationship-rich-text-button';
+const insertRelationship = (editor, { value, relationTo }) => {
+    const text = { text: ' ' };
+    const relationship = {
+        type: 'relationship',
+        value,
+        relationTo,
+        children: [
+            text,
+        ],
+    };
+    if (editor.blurSelection) {
+        Transforms.select(editor, editor.blurSelection);
+    }
+    injectVoidElement(editor, relationship);
+    ReactEditor.focus(editor);
+};
+const RelationshipButton = ({ path }) => {
+    const { open, closeAll } = useModal();
+    const editor = useSlate();
+    const { serverURL, routes: { api }, collections } = useConfig();
+    const [renderModal, setRenderModal] = useState(false);
+    const [loading, setLoading] = useState(false);
+    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`);
+        const json = await res.json();
+        insertRelationship(editor, { value: { id: json.id }, relationTo });
+        closeAll();
+        setRenderModal(false);
+        setLoading(false);
+    }, [editor, closeAll, api, serverURL]);
+    useEffect(() => {
+        if (renderModal) {
+            open(modalSlug);
+        }
+    }, [renderModal, open, modalSlug]);
+    if (!hasEnabledCollections)
+        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, "Add Relationship"),
+                    React.createElement(Button, { buttonStyle: "none", onClick: () => {
+                            closeAll();
+                            setRenderModal(false);
+                        } },
+                        React.createElement(X, null))),
+                React.createElement(Form, { onSubmit: handleAddRelationship, initialData: initialFormData, disabled: loading },
+                    React.createElement(Fields, null),
+                    React.createElement(Submit, null, "Add relationship")))))));
+};
+export default RelationshipButton;

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

@@ -0,0 +1,35 @@
+@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);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.scss';
+declare const Element: (props: any) => JSX.Element;
+export default Element;

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { useFocused, useSelected } from 'slate-react';
+import { useConfig } from '../../../../../../utilities/Config';
+import RelationshipIcon from '../../../../../../icons/Relationship';
+import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
+import './index.scss';
+const baseClass = 'rich-text-relationship';
+const initialParams = {
+    depth: 0,
+};
+const Element = (props) => {
+    var _a;
+    const { attributes, children, element } = props;
+    const { relationTo, value } = element;
+    const { collections, serverURL, routes: { api } } = useConfig();
+    const [relatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
+    const selected = useSelected();
+    const focused = useFocused();
+    const [{ data }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
+    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` },
+                relatedCollection.labels.singular,
+                ' ',
+                "Relationship"),
+            React.createElement("h5", null, data[((_a = relatedCollection === null || relatedCollection === void 0 ? void 0 : relatedCollection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id'])),
+        children));
+};
+export default Element;

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

@@ -0,0 +1,38 @@
+@import '../../../../../../../scss/styles.scss';
+
+.rich-text-relationship {
+  @extend %body;
+  @include shadow-sm;
+  padding: base(.5);
+  display: flex;
+  align-items: flex-start;
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
+  max-width: base(15);
+  font-family: var(--font-body);
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+
+  svg {
+    width: base(1.25);
+    height: base(1.25);
+    margin-right: base(.5);
+  }
+
+  h5 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &--selected {
+    box-shadow: $focus-box-shadow;
+    outline: none;
+  }
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    Button: import("react").FC<{
+        path: string;
+    }>;
+    Element: (props: any) => JSX.Element;
+    plugins: ((incomingEditor: any) => any)[];
+};
+export default _default;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/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/relationship/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/relationship/plugin.js

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

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

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

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

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