@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.mjs

@@ -0,0 +1,211 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box, Button, Popover, Flex, Field } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { Path, Range, Editor, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { styled } from 'styled-components';
+import { useBlocksEditorContext } from '../BlocksEditor.mjs';
+import { removeLink, editLink } from '../utils/links.mjs';
+import { isLinkNode } from '../utils/types.mjs';
+
+const StyledLink = styled(Box)`
+  text-decoration: none;
+`;
+const RemoveButton = styled(Button)`
+  visibility: ${(props)=>props.$visible ? 'visible' : 'hidden'};
+`;
+const LinkContent = /*#__PURE__*/ React.forwardRef(({ link, children, attributes }, forwardedRef)=>{
+    const { formatMessage } = useIntl();
+    const { editor } = useBlocksEditorContext('Link');
+    const path = ReactEditor.findPath(editor, link);
+    const [popoverOpen, setPopoverOpen] = React.useState(editor.lastInsertedLinkPath ? Path.equals(path, editor.lastInsertedLinkPath) : false);
+    const elementText = link.children.map((child)=>child.text).join('');
+    const [linkText, setLinkText] = React.useState(elementText);
+    const [linkUrl, setLinkUrl] = React.useState(link.url);
+    const linkInputRef = React.useRef(null);
+    const isLastInsertedLink = editor.lastInsertedLinkPath ? !Path.equals(path, editor.lastInsertedLinkPath) : true;
+    const [isSaveDisabled, setIsSaveDisabled] = React.useState(false);
+    const onLinkChange = (e)=>{
+        setIsSaveDisabled(false);
+        setLinkUrl(e.target.value);
+        try {
+            // eslint-disable-next-line no-new
+            new URL(e.target.value?.startsWith('/') ? `https://strapi.io${e.target.value}` : e.target.value);
+        } catch (error) {
+            setIsSaveDisabled(true);
+        }
+    };
+    const handleSave = (e)=>{
+        e.stopPropagation();
+        // If the selection is collapsed, we select the parent node because we want all the link to be replaced)
+        if (editor.selection && Range.isCollapsed(editor.selection)) {
+            const [, parentPath] = Editor.parent(editor, editor.selection.focus?.path);
+            Transforms.select(editor, parentPath);
+        }
+        editLink(editor, {
+            url: linkUrl,
+            text: linkText
+        });
+        setPopoverOpen(false);
+        editor.lastInsertedLinkPath = null;
+        ReactEditor.focus(editor);
+    };
+    const handleClose = ()=>{
+        if (link.url === '') {
+            removeLink(editor);
+        }
+        setPopoverOpen(false);
+        ReactEditor.focus(editor);
+    };
+    React.useEffect(()=>{
+        // Focus on the link input element when the popover opens
+        if (popoverOpen) linkInputRef.current?.focus();
+    }, [
+        popoverOpen
+    ]);
+    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        open: popoverOpen,
+        children: [
+            /*#__PURE__*/ jsx(Popover.Trigger, {
+                children: /*#__PURE__*/ jsx(StyledLink, {
+                    ...attributes,
+                    ref: forwardedRef,
+                    tag: "a",
+                    href: link.url,
+                    onClick: ()=>setPopoverOpen(true),
+                    color: "primary600",
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(Popover.Content, {
+                onPointerDownOutside: handleClose,
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    padding: 4,
+                    direction: "column",
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ jsx(Field.Root, {
+                            width: "368px",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                gap: 1,
+                                alignItems: "stretch",
+                                children: [
+                                    /*#__PURE__*/ jsx(Field.Label, {
+                                        children: formatMessage({
+                                            id: 'components.Blocks.popover.text',
+                                            defaultMessage: 'Text'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Field.Input, {
+                                        name: "text",
+                                        placeholder: formatMessage({
+                                            id: 'components.Blocks.popover.text.placeholder',
+                                            defaultMessage: 'Enter link text'
+                                        }),
+                                        value: linkText,
+                                        onChange: (e)=>{
+                                            setLinkText(e.target.value);
+                                        }
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Field.Root, {
+                            width: "368px",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                gap: 1,
+                                alignItems: "stretch",
+                                children: [
+                                    /*#__PURE__*/ jsx(Field.Label, {
+                                        children: formatMessage({
+                                            id: 'components.Blocks.popover.link',
+                                            defaultMessage: 'Link'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Field.Input, {
+                                        ref: linkInputRef,
+                                        name: "url",
+                                        placeholder: formatMessage({
+                                            id: 'components.Blocks.popover.link.placeholder',
+                                            defaultMessage: 'Paste link'
+                                        }),
+                                        value: linkUrl,
+                                        onChange: onLinkChange
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Flex, {
+                            justifyContent: "space-between",
+                            width: "100%",
+                            children: [
+                                /*#__PURE__*/ jsx(RemoveButton, {
+                                    variant: "danger-light",
+                                    onClick: ()=>removeLink(editor),
+                                    $visible: isLastInsertedLink,
+                                    children: formatMessage({
+                                        id: 'components.Blocks.popover.remove',
+                                        defaultMessage: 'Remove'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    gap: 2,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Button, {
+                                            variant: "tertiary",
+                                            onClick: handleClose,
+                                            children: formatMessage({
+                                                id: 'global.cancel',
+                                                defaultMessage: 'Cancel'
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            disabled: Boolean(inputNotDirty) || isSaveDisabled,
+                                            onClick: handleSave,
+                                            children: formatMessage({
+                                                id: 'global.save',
+                                                defaultMessage: 'Save'
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+});
+const Link = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    if (!isLinkNode(props.element)) {
+        return null;
+    }
+    // LinkContent uses React hooks that rely on props.element being a link. If the type guard above
+    // doesn't pass, those hooks would be called conditionnally, which is not allowed.
+    // Hence the need for a separate component.
+    return /*#__PURE__*/ jsx(LinkContent, {
+        ...props,
+        link: props.element,
+        ref: forwardedRef
+    });
+});
+const linkBlocks = {
+    link: {
+        renderElement: (props)=>/*#__PURE__*/ jsx(Link, {
+                element: props.element,
+                attributes: props.attributes,
+                children: props.children
+            }),
+        // No handleConvert here, links are created via the link button in the toolbar
+        matchNode: (node)=>node.type === 'link',
+        isInBlocksSelector: false
+    }
+};
+
+export { linkBlocks };
+//# sourceMappingURL=Link.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Link.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Flex, Popover, useComposedRefs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Editor, Path, Range, Transforms } from 'slate';\nimport { type RenderElementProps, ReactEditor } from 'slate-react';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore, useBlocksEditorContext } from '../BlocksEditor';\nimport { editLink, removeLink } from '../utils/links';\nimport { isLinkNode, type Block } from '../utils/types';\n\nconst StyledLink = styled(Box)`\n  text-decoration: none;\n`;\n\nconst RemoveButton = styled(Button)<{ $visible: boolean }>`\n  visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')};\n`;\n\ninterface LinkContentProps extends RenderElementProps {\n  link: Block<'link'>;\n}\n\nconst LinkContent = React.forwardRef<HTMLAnchorElement, LinkContentProps>(\n  ({ link, children, attributes }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const { editor } = useBlocksEditorContext('Link');\n    const path = ReactEditor.findPath(editor, link);\n    const [popoverOpen, setPopoverOpen] = React.useState(\n      editor.lastInsertedLinkPath ? Path.equals(path, editor.lastInsertedLinkPath) : false\n    );\n    const elementText = link.children.map((child) => child.text).join('');\n    const [linkText, setLinkText] = React.useState(elementText);\n    const [linkUrl, setLinkUrl] = React.useState(link.url);\n    const linkInputRef = React.useRef<HTMLInputElement>(null);\n    const isLastInsertedLink = editor.lastInsertedLinkPath\n      ? !Path.equals(path, editor.lastInsertedLinkPath)\n      : true;\n    const [isSaveDisabled, setIsSaveDisabled] = React.useState(false);\n\n    const onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setIsSaveDisabled(false);\n      setLinkUrl(e.target.value);\n\n      try {\n        // eslint-disable-next-line no-new\n        new URL(\n          e.target.value?.startsWith('/') ? `https://strapi.io${e.target.value}` : e.target.value\n        );\n      } catch (error) {\n        setIsSaveDisabled(true);\n      }\n    };\n\n    const handleSave: React.FormEventHandler = (e) => {\n      e.stopPropagation();\n\n      // If the selection is collapsed, we select the parent node because we want all the link to be replaced)\n      if (editor.selection && Range.isCollapsed(editor.selection)) {\n        const [, parentPath] = Editor.parent(editor, editor.selection.focus?.path);\n        Transforms.select(editor, parentPath);\n      }\n\n      editLink(editor, { url: linkUrl, text: linkText });\n      setPopoverOpen(false);\n      editor.lastInsertedLinkPath = null;\n      ReactEditor.focus(editor);\n    };\n\n    const handleClose = () => {\n      if (link.url === '') {\n        removeLink(editor);\n      }\n\n      setPopoverOpen(false);\n      ReactEditor.focus(editor);\n    };\n\n    React.useEffect(() => {\n      // Focus on the link input element when the popover opens\n      if (popoverOpen) linkInputRef.current?.focus();\n    }, [popoverOpen]);\n\n    const inputNotDirty =\n      !linkText ||\n      !linkUrl ||\n      (link.url && link.url === linkUrl && elementText && elementText === linkText);\n\n    return (\n      <Popover.Root open={popoverOpen}>\n        <Popover.Trigger>\n          <StyledLink\n            {...attributes}\n            ref={forwardedRef}\n            tag=\"a\"\n            href={link.url}\n            onClick={() => setPopoverOpen(true)}\n            color=\"primary600\"\n          >\n            {children}\n          </StyledLink>\n        </Popover.Trigger>\n        <Popover.Content onPointerDownOutside={handleClose}>\n          <Flex padding={4} direction=\"column\" gap={4}>\n            <Field.Root width=\"368px\">\n              <Flex direction=\"column\" gap={1} alignItems=\"stretch\">\n                <Field.Label>\n                  {formatMessage({\n                    id: 'components.Blocks.popover.text',\n                    defaultMessage: 'Text',\n                  })}\n                </Field.Label>\n                <Field.Input\n                  name=\"text\"\n                  placeholder={formatMessage({\n                    id: 'components.Blocks.popover.text.placeholder',\n                    defaultMessage: 'Enter link text',\n                  })}\n                  value={linkText}\n                  onChange={(e) => {\n                    setLinkText(e.target.value);\n                  }}\n                />\n              </Flex>\n            </Field.Root>\n            <Field.Root width=\"368px\">\n              <Flex direction=\"column\" gap={1} alignItems=\"stretch\">\n                <Field.Label>\n                  {formatMessage({\n                    id: 'components.Blocks.popover.link',\n                    defaultMessage: 'Link',\n                  })}\n                </Field.Label>\n                <Field.Input\n                  ref={linkInputRef}\n                  name=\"url\"\n                  placeholder={formatMessage({\n                    id: 'components.Blocks.popover.link.placeholder',\n                    defaultMessage: 'Paste link',\n                  })}\n                  value={linkUrl}\n                  onChange={onLinkChange}\n                />\n              </Flex>\n            </Field.Root>\n            <Flex justifyContent=\"space-between\" width=\"100%\">\n              <RemoveButton\n                variant=\"danger-light\"\n                onClick={() => removeLink(editor)}\n                $visible={isLastInsertedLink}\n              >\n                {formatMessage({\n                  id: 'components.Blocks.popover.remove',\n                  defaultMessage: 'Remove',\n                })}\n              </RemoveButton>\n              <Flex gap={2}>\n                <Button variant=\"tertiary\" onClick={handleClose}>\n                  {formatMessage({\n                    id: 'global.cancel',\n                    defaultMessage: 'Cancel',\n                  })}\n                </Button>\n                <Button disabled={Boolean(inputNotDirty) || isSaveDisabled} onClick={handleSave}>\n                  {formatMessage({\n                    id: 'global.save',\n                    defaultMessage: 'Save',\n                  })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Popover.Content>\n      </Popover.Root>\n    );\n  }\n);\n\nconst Link = React.forwardRef<HTMLAnchorElement, RenderElementProps>((props, forwardedRef) => {\n  if (!isLinkNode(props.element)) {\n    return null;\n  }\n\n  // LinkContent uses React hooks that rely on props.element being a link. If the type guard above\n  // doesn't pass, those hooks would be called conditionnally, which is not allowed.\n  // Hence the need for a separate component.\n  return <LinkContent {...props} link={props.element} ref={forwardedRef} />;\n});\n\nconst linkBlocks: Pick<BlocksStore, 'link'> = {\n  link: {\n    renderElement: (props) => (\n      <Link element={props.element} attributes={props.attributes}>\n        {props.children}\n      </Link>\n    ),\n    // No handleConvert here, links are created via the link button in the toolbar\n    matchNode: (node) => node.type === 'link',\n    isInBlocksSelector: false,\n  },\n};\n\nexport { linkBlocks };\n"],"names":["StyledLink","styled","Box","RemoveButton","Button","props","$visible","LinkContent","React","forwardRef","link","children","attributes","forwardedRef","formatMessage","useIntl","editor","useBlocksEditorContext","path","ReactEditor","findPath","popoverOpen","setPopoverOpen","useState","lastInsertedLinkPath","Path","equals","elementText","map","child","text","join","linkText","setLinkText","linkUrl","setLinkUrl","url","linkInputRef","useRef","isLastInsertedLink","isSaveDisabled","setIsSaveDisabled","onLinkChange","e","target","value","URL","startsWith","error","handleSave","stopPropagation","selection","Range","isCollapsed","parentPath","Editor","parent","focus","Transforms","select","editLink","handleClose","removeLink","useEffect","current","inputNotDirty","_jsxs","Popover","Root","open","_jsx","Trigger","ref","tag","href","onClick","color","Content","onPointerDownOutside","Flex","padding","direction","gap","Field","width","alignItems","Label","id","defaultMessage","Input","name","placeholder","onChange","justifyContent","variant","disabled","Boolean","Link","isLinkNode","element","linkBlocks","renderElement","matchNode","node","type","isInBlocksSelector"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/List.js

@@ -0,0 +1,360 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var slate = require('slate');
+var slateReact = require('slate-react');
+var styledComponents = require('styled-components');
+var conversions = require('../utils/conversions.js');
+var types = require('../utils/types.js');
+
+const listStyle = styledComponents.css`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme })=>theme.spaces[2]};
+  margin-inline-start: ${({ theme })=>theme.spaces[0]};
+  margin-inline-end: ${({ theme })=>theme.spaces[0]};
+  padding-inline-start: ${({ theme })=>theme.spaces[2]};
+
+  ol,
+  ul {
+    margin-block-start: ${({ theme })=>theme.spaces[0]};
+    margin-block-end: ${({ theme })=>theme.spaces[0]};
+  }
+
+  li {
+    margin-inline-start: ${({ theme })=>theme.spaces[3]};
+  }
+`;
+const Orderedlist = styledComponents.styled.ol`
+  list-style-type: ${(props)=>props.$listStyleType};
+  ${listStyle}
+`;
+const Unorderedlist = styledComponents.styled.ul`
+  list-style-type: ${(props)=>props.$listStyleType};
+  ${listStyle}
+`;
+const orderedStyles = [
+    'decimal',
+    'lower-alpha',
+    'upper-roman'
+];
+const unorderedStyles = [
+    'disc',
+    'circle',
+    'square'
+];
+const List = ({ attributes, children, element })=>{
+    if (!types.isListNode(element)) {
+        return null;
+    }
+    // Decide the subsequent style by referencing the given styles according to the format,
+    // allowing for infinite nested lists
+    const listStyles = element.format === 'ordered' ? orderedStyles : unorderedStyles;
+    const nextIndex = (element.indentLevel || 0) % listStyles.length;
+    const listStyleType = listStyles[nextIndex];
+    if (element.format === 'ordered') {
+        return /*#__PURE__*/ jsxRuntime.jsx(Orderedlist, {
+            $listStyleType: listStyleType,
+            ...attributes,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(Unorderedlist, {
+        $listStyleType: listStyleType,
+        ...attributes,
+        children: children
+    });
+};
+const replaceListWithEmptyBlock = (editor, currentListPath)=>{
+    // Delete the empty list
+    slate.Transforms.removeNodes(editor, {
+        at: currentListPath
+    });
+    if (currentListPath[0] === 0) {
+        // If the list was the only (or first) block element then insert empty paragraph as editor needs default value
+        slate.Transforms.insertNodes(editor, {
+            type: 'paragraph',
+            children: [
+                {
+                    type: 'text',
+                    text: ''
+                }
+            ]
+        }, {
+            at: currentListPath
+        });
+        slate.Transforms.select(editor, currentListPath);
+    }
+};
+const isText = (node)=>{
+    return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === 'text';
+};
+/**
+ * Common handler for the backspace event on ordered and unordered lists
+ */ const handleBackspaceKeyOnList = (editor, event)=>{
+    if (!editor.selection) return;
+    const [currentListItem, currentListItemPath] = slate.Editor.parent(editor, editor.selection.anchor);
+    const [currentList, currentListPath] = slate.Editor.parent(editor, currentListItemPath);
+    const isListEmpty = currentList.children.length === 1 && isText(currentListItem.children[0]) && currentListItem.children[0].text === '';
+    const isListItemEmpty = currentListItem.children.length === 1 && isText(currentListItem.children[0]) && currentListItem.children[0].text === '';
+    const isFocusAtTheBeginningOfAChild = editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-2) === 0;
+    if (isListEmpty) {
+        const parentListEntry = slate.Editor.above(editor, {
+            at: currentListPath,
+            match: (node)=>!slate.Editor.isEditor(node) && node.type === 'list'
+        });
+        if (!parentListEntry) {
+            event.preventDefault();
+            replaceListWithEmptyBlock(editor, currentListPath);
+        }
+    } else if (isFocusAtTheBeginningOfAChild) {
+        // If the focus is at the beginning of a child node we need to replace it with a paragraph
+        slate.Transforms.liftNodes(editor, {
+            match: (node)=>!slate.Editor.isEditor(node) && node.type === 'list-item'
+        });
+        slate.Transforms.setNodes(editor, {
+            type: 'paragraph'
+        });
+    } else if (isListItemEmpty) {
+        const previousEntry = slate.Editor.previous(editor, {
+            at: currentListItemPath
+        });
+        const nextEntry = slate.Editor.next(editor, {
+            at: currentListItemPath
+        });
+        if (previousEntry && nextEntry) {
+            // If previous and next nodes are lists or list-items, delete empty list item
+            event.preventDefault();
+            slate.Transforms.removeNodes(editor, {
+                at: currentListItemPath
+            });
+            // If previous and next nodes are lists with same format and indent Levels, then merge the nodes
+            const [previousList] = previousEntry;
+            const [nextList] = nextEntry;
+            if (!slate.Editor.isEditor(previousList) && !isText(previousList) && types.isListNode(previousList) && !slate.Editor.isEditor(nextList) && !isText(nextList) && types.isListNode(nextList)) {
+                if (previousList.type === 'list' && nextList.type === 'list' && previousList.format === nextList.format && previousList.indentLevel === nextList.indentLevel) {
+                    slate.Transforms.mergeNodes(editor, {
+                        at: currentListItemPath
+                    });
+                }
+            }
+        }
+    }
+};
+/**
+ * Common handler for the enter key on ordered and unordered lists
+ */ const handleEnterKeyOnList = (editor)=>{
+    const currentListItemEntry = slate.Editor.above(editor, {
+        match: (node)=>!slate.Editor.isEditor(node) && node.type === 'list-item'
+    });
+    if (!currentListItemEntry || !editor.selection) {
+        return;
+    }
+    const [currentListItem, currentListItemPath] = currentListItemEntry;
+    const [currentList, currentListPath] = slate.Editor.parent(editor, currentListItemPath);
+    const isListEmpty = currentList.children.length === 1 && isText(currentListItem.children[0]) && currentListItem.children[0].text === '';
+    const isListItemEmpty = currentListItem.children.length === 1 && isText(currentListItem.children[0]) && currentListItem.children[0].text === '';
+    const isFocusAtTheBeginningOfAChild = editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-1) === 0;
+    if (isListEmpty) {
+        replaceListWithEmptyBlock(editor, currentListPath);
+    } else if (isFocusAtTheBeginningOfAChild && !isListItemEmpty) {
+        // If the focus is at the beginning of a child node, shift below the list item and create a new list-item
+        const currentNode = slate.Editor.above(editor, {
+            at: editor.selection.anchor
+        });
+        slate.Transforms.insertNodes(editor, {
+            type: 'list-item',
+            children: [
+                {
+                    type: 'text',
+                    text: ''
+                }
+            ]
+        });
+        if (currentNode) {
+            const path = currentNode[1];
+            const updatedPath = [
+                ...path.slice(0, -1),
+                path[path.length - 1] + 1
+            ];
+            slate.Transforms.select(editor, {
+                anchor: {
+                    path: updatedPath.concat(0),
+                    offset: 0
+                },
+                focus: {
+                    path: updatedPath.concat(0),
+                    offset: 0
+                }
+            });
+        }
+    } else if (isListItemEmpty) {
+        // Check if there is a list above the current list and shift list-item under it
+        if (!slate.Editor.isEditor(currentList) && types.isListNode(currentList) && currentList?.indentLevel && currentList.indentLevel > 0) {
+            const previousIndentLevel = currentList.indentLevel - 1;
+            const parentListNodeEntry = slate.Editor.above(editor, {
+                match: (node)=>!slate.Editor.isEditor(node) && node.type === 'list' && (node.indentLevel || 0) === previousIndentLevel
+            });
+            if (parentListNodeEntry) {
+                // Get the parent list path and add 1 to it to exit from the current list
+                const modifiedPath = currentListItemPath.slice(0, -1);
+                if (modifiedPath.length > 0) {
+                    modifiedPath[modifiedPath.length - 1] += 1;
+                }
+                // Shift list-item under parent list
+                slate.Transforms.moveNodes(editor, {
+                    at: currentListItemPath,
+                    to: modifiedPath
+                });
+                return;
+            }
+        }
+        // Otherwise delete the empty list item and create a new paragraph below the parent list
+        slate.Transforms.removeNodes(editor, {
+            at: currentListItemPath
+        });
+        const createdParagraphPath = slate.Path.next(currentListPath);
+        slate.Transforms.insertNodes(editor, {
+            type: 'paragraph',
+            children: [
+                {
+                    type: 'text',
+                    text: ''
+                }
+            ]
+        }, {
+            at: createdParagraphPath
+        });
+        // Move the selection to the newly created paragraph
+        slate.Transforms.select(editor, createdParagraphPath);
+    } else {
+        // Check if the cursor is at the end of the list item
+        const isNodeEnd = slate.Editor.isEnd(editor, editor.selection.anchor, currentListItemPath);
+        if (isNodeEnd) {
+            // If there was nothing after the cursor, create a fresh new list item,
+            // in order to avoid carrying over the modifiers from the previous list item
+            slate.Transforms.insertNodes(editor, {
+                type: 'list-item',
+                children: [
+                    {
+                        type: 'text',
+                        text: ''
+                    }
+                ]
+            });
+        } else {
+            // If there is something after the cursor, split the current list item,
+            // so that we keep the content and the modifiers
+            slate.Transforms.splitNodes(editor);
+        }
+    }
+};
+/**
+ * Common handler for converting a node to a list
+ */ const handleConvertToList = (editor, format)=>{
+    const convertedPath = conversions.baseHandleConvert(editor, {
+        type: 'list-item'
+    });
+    if (!convertedPath) return;
+    slate.Transforms.wrapNodes(editor, {
+        type: 'list',
+        format,
+        children: []
+    }, {
+        at: convertedPath
+    });
+};
+/**
+ * Common handler for the tab key on ordered and unordered lists
+ */ const handleTabOnList = (editor)=>{
+    const currentListItemEntry = slate.Editor.above(editor, {
+        match: (node)=>!slate.Editor.isEditor(node) && node.type === 'list-item'
+    });
+    if (!currentListItemEntry || !editor.selection) {
+        return;
+    }
+    const [currentListItem, currentListItemPath] = currentListItemEntry;
+    const [currentList] = slate.Editor.parent(editor, currentListItemPath);
+    // Skip tabbing if list-item is the first item in the list
+    if (currentListItem === currentList.children[0]) return;
+    const currentListItemIndex = currentList.children.findIndex((item)=>item === currentListItem);
+    const previousNode = currentList.children[currentListItemIndex - 1];
+    // If previous node is a list block then move the list-item under it
+    if (previousNode.type === 'list') {
+        const nodePath = slateReact.ReactEditor.findPath(editor, previousNode);
+        const insertAtPath = previousNode.children.length;
+        slate.Transforms.moveNodes(editor, {
+            at: currentListItemPath,
+            to: nodePath.concat(insertAtPath)
+        });
+        return;
+    }
+    if (!slate.Editor.isEditor(currentList) && types.isListNode(currentList)) {
+        // Wrap list-item with list block on tab
+        slate.Transforms.wrapNodes(editor, {
+            type: 'list',
+            format: currentList.format,
+            indentLevel: (currentList.indentLevel || 0) + 1,
+            children: []
+        });
+    }
+};
+const listBlocks = {
+    'list-ordered': {
+        renderElement: (props)=>/*#__PURE__*/ jsxRuntime.jsx(List, {
+                ...props
+            }),
+        label: {
+            id: 'components.Blocks.blocks.orderedList',
+            defaultMessage: 'Numbered list'
+        },
+        icon: Icons.NumberList,
+        matchNode: (node)=>node.type === 'list' && node.format === 'ordered',
+        isInBlocksSelector: true,
+        handleConvert: (editor)=>handleConvertToList(editor, 'ordered'),
+        handleEnterKey: handleEnterKeyOnList,
+        handleBackspaceKey: handleBackspaceKeyOnList,
+        handleTab: handleTabOnList,
+        snippets: [
+            '1.'
+        ]
+    },
+    'list-unordered': {
+        renderElement: (props)=>/*#__PURE__*/ jsxRuntime.jsx(List, {
+                ...props
+            }),
+        label: {
+            id: 'components.Blocks.blocks.unorderedList',
+            defaultMessage: 'Bulleted list'
+        },
+        icon: Icons.BulletList,
+        matchNode: (node)=>node.type === 'list' && node.format === 'unordered',
+        isInBlocksSelector: true,
+        handleConvert: (editor)=>handleConvertToList(editor, 'unordered'),
+        handleEnterKey: handleEnterKeyOnList,
+        handleBackspaceKey: handleBackspaceKeyOnList,
+        handleTab: handleTabOnList,
+        snippets: [
+            '-',
+            '*',
+            '+'
+        ]
+    },
+    'list-item': {
+        renderElement: (props)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                tag: "li",
+                ...props.attributes,
+                children: props.children
+            }),
+        // No handleConvert, list items are created when converting to the parent list
+        matchNode: (node)=>node.type === 'list-item',
+        isInBlocksSelector: false,
+        dragHandleTopMargin: '-2px'
+    }
+};
+
+exports.listBlocks = listBlocks;
+//# sourceMappingURL=List.js.map