@strapi/content-manager 0.0.0-next.ce84fada19d58a7dfbdd553035e6558f8befcba4 → 0.0.0-next.d190a700af70e9360d767221b76cd8e815bd01aa

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+var conversions = require('../utils/conversions.js');
+var enterKey = require('../utils/enterKey.js');
+
+const Blockquote = styledComponents.styled.blockquote.attrs({
+    role: 'blockquote'
+})`
+  font-weight: ${({ theme })=>theme.fontWeights.regular};
+  border-left: ${({ theme })=>`${theme.spaces[1]} solid ${theme.colors.neutral200}`};
+  padding: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
+  color: ${({ theme })=>theme.colors.neutral600};
+`;
+const quoteBlocks = {
+    quote: {
+        renderElement: (props)=>// The div is needed to make sure the padding bottom from BlocksContent is applied properly
+            // when the quote is the last block in the editor
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Blockquote, {
+                    ...props.attributes,
+                    children: props.children
+                })
+            }),
+        icon: Icons.Quotes,
+        label: {
+            id: 'components.Blocks.blocks.quote',
+            defaultMessage: 'Quote'
+        },
+        matchNode: (node)=>node.type === 'quote',
+        isInBlocksSelector: true,
+        handleConvert (editor) {
+            conversions.baseHandleConvert(editor, {
+                type: 'quote'
+            });
+        },
+        handleEnterKey (editor) {
+            enterKey.pressEnterTwiceToExit(editor);
+        },
+        snippets: [
+            '>'
+        ]
+    }
+};
+
+exports.quoteBlocks = quoteBlocks;
+//# sourceMappingURL=Quote.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Quote.tsx"],"sourcesContent":["import { Quotes } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { pressEnterTwiceToExit } from '../utils/enterKey';\nimport { type Block } from '../utils/types';\n\nconst Blockquote = styled.blockquote.attrs({ role: 'blockquote' })`\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};\n  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};\n  color: ${({ theme }) => theme.colors.neutral600};\n`;\n\nconst quoteBlocks: Pick<BlocksStore, 'quote'> = {\n  quote: {\n    renderElement: (props) => (\n      // The div is needed to make sure the padding bottom from BlocksContent is applied properly\n      // when the quote is the last block in the editor\n      <div>\n        <Blockquote {...props.attributes}>{props.children}</Blockquote>\n      </div>\n    ),\n    icon: Quotes,\n    label: {\n      id: 'components.Blocks.blocks.quote',\n      defaultMessage: 'Quote',\n    },\n    matchNode: (node) => node.type === 'quote',\n    isInBlocksSelector: true,\n    handleConvert(editor) {\n      baseHandleConvert<Block<'quote'>>(editor, { type: 'quote' });\n    },\n    handleEnterKey(editor) {\n      pressEnterTwiceToExit(editor);\n    },\n    snippets: ['>'],\n  },\n};\n\nexport { quoteBlocks };\n"],"names":["Blockquote","styled","blockquote","attrs","role","theme","fontWeights","regular","spaces","colors","neutral200","neutral600","quoteBlocks","quote","renderElement","props","_jsx","div","attributes","children","icon","Quotes","label","id","defaultMessage","matchNode","node","type","isInBlocksSelector","handleConvert","editor","baseHandleConvert","handleEnterKey","pressEnterTwiceToExit","snippets"],"mappings":";;;;;;;;AAQA,MAAMA,UAAaC,GAAAA,uBAAAA,CAAOC,UAAU,CAACC,KAAK,CAAC;IAAEC,IAAM,EAAA;AAAa,CAAA,CAAE;eACnD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,OAAO,CAAC;AAC3C,eAAA,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMG,MAAM,CAAC,CAAE,CAAA,CAAC,OAAO,EAAEH,KAAAA,CAAMI,MAAM,CAACC,UAAU,EAAE,CAAC;WAC3E,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;SACrE,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACE,UAAU,CAAC;AAClD,CAAC;AAED,MAAMC,WAA0C,GAAA;IAC9CC,KAAO,EAAA;QACLC,aAAe,EAAA,CAACC;;0BAGdC,cAACC,CAAAA,KAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAD,cAAChB,CAAAA,UAAAA,EAAAA;AAAY,oBAAA,GAAGe,MAAMG,UAAU;AAAGH,oBAAAA,QAAAA,EAAAA,KAAAA,CAAMI;;;QAG7CC,IAAMC,EAAAA,YAAAA;QACNC,KAAO,EAAA;YACLC,EAAI,EAAA,gCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;AACAC,QAAAA,SAAAA,EAAW,CAACC,IAAAA,GAASA,IAAKC,CAAAA,IAAI,KAAK,OAAA;QACnCC,kBAAoB,EAAA,IAAA;AACpBC,QAAAA,aAAAA,CAAAA,CAAcC,MAAM,EAAA;AAClBC,YAAAA,6BAAAA,CAAkCD,MAAQ,EAAA;gBAAEH,IAAM,EAAA;AAAQ,aAAA,CAAA;AAC5D,SAAA;AACAK,QAAAA,cAAAA,CAAAA,CAAeF,MAAM,EAAA;YACnBG,8BAAsBH,CAAAA,MAAAA,CAAAA;AACxB,SAAA;QACAI,QAAU,EAAA;AAAC,YAAA;AAAI;AACjB;AACF;;;;"}

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

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { Quotes } from '@strapi/icons';
+import { styled } from 'styled-components';
+import { baseHandleConvert } from '../utils/conversions.mjs';
+import { pressEnterTwiceToExit } from '../utils/enterKey.mjs';
+
+const Blockquote = styled.blockquote.attrs({
+    role: 'blockquote'
+})`
+  font-weight: ${({ theme })=>theme.fontWeights.regular};
+  border-left: ${({ theme })=>`${theme.spaces[1]} solid ${theme.colors.neutral200}`};
+  padding: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
+  color: ${({ theme })=>theme.colors.neutral600};
+`;
+const quoteBlocks = {
+    quote: {
+        renderElement: (props)=>// The div is needed to make sure the padding bottom from BlocksContent is applied properly
+            // when the quote is the last block in the editor
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(Blockquote, {
+                    ...props.attributes,
+                    children: props.children
+                })
+            }),
+        icon: Quotes,
+        label: {
+            id: 'components.Blocks.blocks.quote',
+            defaultMessage: 'Quote'
+        },
+        matchNode: (node)=>node.type === 'quote',
+        isInBlocksSelector: true,
+        handleConvert (editor) {
+            baseHandleConvert(editor, {
+                type: 'quote'
+            });
+        },
+        handleEnterKey (editor) {
+            pressEnterTwiceToExit(editor);
+        },
+        snippets: [
+            '>'
+        ]
+    }
+};
+
+export { quoteBlocks };
+//# sourceMappingURL=Quote.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Quote.tsx"],"sourcesContent":["import { Quotes } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { pressEnterTwiceToExit } from '../utils/enterKey';\nimport { type Block } from '../utils/types';\n\nconst Blockquote = styled.blockquote.attrs({ role: 'blockquote' })`\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};\n  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};\n  color: ${({ theme }) => theme.colors.neutral600};\n`;\n\nconst quoteBlocks: Pick<BlocksStore, 'quote'> = {\n  quote: {\n    renderElement: (props) => (\n      // The div is needed to make sure the padding bottom from BlocksContent is applied properly\n      // when the quote is the last block in the editor\n      <div>\n        <Blockquote {...props.attributes}>{props.children}</Blockquote>\n      </div>\n    ),\n    icon: Quotes,\n    label: {\n      id: 'components.Blocks.blocks.quote',\n      defaultMessage: 'Quote',\n    },\n    matchNode: (node) => node.type === 'quote',\n    isInBlocksSelector: true,\n    handleConvert(editor) {\n      baseHandleConvert<Block<'quote'>>(editor, { type: 'quote' });\n    },\n    handleEnterKey(editor) {\n      pressEnterTwiceToExit(editor);\n    },\n    snippets: ['>'],\n  },\n};\n\nexport { quoteBlocks };\n"],"names":["Blockquote","styled","blockquote","attrs","role","theme","fontWeights","regular","spaces","colors","neutral200","neutral600","quoteBlocks","quote","renderElement","props","_jsx","div","attributes","children","icon","Quotes","label","id","defaultMessage","matchNode","node","type","isInBlocksSelector","handleConvert","editor","baseHandleConvert","handleEnterKey","pressEnterTwiceToExit","snippets"],"mappings":";;;;;;AAQA,MAAMA,UAAaC,GAAAA,MAAAA,CAAOC,UAAU,CAACC,KAAK,CAAC;IAAEC,IAAM,EAAA;AAAa,CAAA,CAAE;eACnD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,OAAO,CAAC;AAC3C,eAAA,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMG,MAAM,CAAC,CAAE,CAAA,CAAC,OAAO,EAAEH,KAAAA,CAAMI,MAAM,CAACC,UAAU,EAAE,CAAC;WAC3E,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;SACrE,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACE,UAAU,CAAC;AAClD,CAAC;AAED,MAAMC,WAA0C,GAAA;IAC9CC,KAAO,EAAA;QACLC,aAAe,EAAA,CAACC;;0BAGdC,GAACC,CAAAA,KAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAD,GAAChB,CAAAA,UAAAA,EAAAA;AAAY,oBAAA,GAAGe,MAAMG,UAAU;AAAGH,oBAAAA,QAAAA,EAAAA,KAAAA,CAAMI;;;QAG7CC,IAAMC,EAAAA,MAAAA;QACNC,KAAO,EAAA;YACLC,EAAI,EAAA,gCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;AACAC,QAAAA,SAAAA,EAAW,CAACC,IAAAA,GAASA,IAAKC,CAAAA,IAAI,KAAK,OAAA;QACnCC,kBAAoB,EAAA,IAAA;AACpBC,QAAAA,aAAAA,CAAAA,CAAcC,MAAM,EAAA;AAClBC,YAAAA,iBAAAA,CAAkCD,MAAQ,EAAA;gBAAEH,IAAM,EAAA;AAAQ,aAAA,CAAA;AAC5D,SAAA;AACAK,QAAAA,cAAAA,CAAAA,CAAeF,MAAM,EAAA;YACnBG,qBAAsBH,CAAAA,MAAAA,CAAAA;AACxB,SAAA;QACAI,QAAU,EAAA;AAAC,YAAA;AAAI;AACjB;AACF;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.js

@@ -0,0 +1,529 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var slate = require('slate');
+var slateReact = require('slate-react');
+var styledComponents = require('styled-components');
+var dragAndDrop = require('../../../../../constants/dragAndDrop.js');
+var useDragAndDrop = require('../../../../../hooks/useDragAndDrop.js');
+var translations = require('../../../../../utils/translations.js');
+var Code = require('./Blocks/Code.js');
+var BlocksEditor = require('./BlocksEditor.js');
+var BlocksToolbar = require('./BlocksToolbar.js');
+var types = require('./utils/types.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const StyledEditable = styledComponents.styled(slateReact.Editable)`
+  // The outline style is set on the wrapper with :focus-within
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme })=>theme.spaces[3]};
+  height: 100%;
+  // For fullscreen align input in the center with fixed width
+  width: ${(props)=>props.isExpandedMode ? '512px' : '100%'};
+  margin: auto;
+
+  > *:last-child {
+    padding-bottom: ${({ theme })=>theme.spaces[3]};
+  }
+`;
+const Wrapper = styledComponents.styled(designSystem.Box)`
+  position: ${({ isOverDropTarget })=>isOverDropTarget && 'relative'};
+`;
+const DropPlaceholder = styledComponents.styled(designSystem.Box)`
+  position: absolute;
+  right: 0;
+
+  // Show drop placeholder 8px above or below the drop target
+  ${({ dragDirection, theme, placeholderMargin })=>styledComponents.css`
+    top: ${dragDirection === useDragAndDrop.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
+    bottom: ${dragDirection === useDragAndDrop.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
+  `}
+`;
+const DragItem = styledComponents.styled(designSystem.Flex)`
+  // Style each block rendered using renderElement()
+  & > [data-slate-node='element'] {
+    width: 100%;
+    opacity: inherit;
+  }
+
+  // Set the visibility of drag button
+  [role='button'] {
+    visibility: ${(props)=>props.$dragVisibility};
+    opacity: inherit;
+  }
+  &[aria-disabled='true'] {
+    user-drag: none;
+  }
+`;
+const DragIconButton = styledComponents.styled(designSystem.IconButton)`
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  padding-left: ${({ theme })=>theme.spaces[0]};
+  padding-right: ${({ theme })=>theme.spaces[0]};
+  padding-top: ${({ theme })=>theme.spaces[1]};
+  padding-bottom: ${({ theme })=>theme.spaces[1]};
+  visibility: hidden;
+  cursor: grab;
+  opacity: inherit;
+  margin-top: ${(props)=>props.$dragHandleTopMargin ?? 0};
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.neutral100};
+  }
+  &:active {
+    cursor: grabbing;
+    background: ${({ theme })=>theme.colors.neutral150};
+  }
+  &[aria-disabled='true'] {
+    visibility: hidden;
+  }
+  svg {
+    min-width: ${({ theme })=>theme.spaces[3]};
+
+    path {
+      fill: ${({ theme })=>theme.colors.neutral500};
+    }
+  }
+`;
+const DragAndDropElement = ({ children, index, setDragDirection, dragDirection, dragHandleTopMargin })=>{
+    const { editor, disabled, name: name1, setLiveText } = BlocksEditor.useBlocksEditorContext('drag-and-drop');
+    const { formatMessage } = reactIntl.useIntl();
+    const [dragVisibility, setDragVisibility] = React__namespace.useState('hidden');
+    const handleMoveBlock = React__namespace.useCallback((newIndex, currentIndex)=>{
+        slate.Transforms.moveNodes(editor, {
+            at: currentIndex,
+            to: newIndex
+        });
+        // Add 1 to the index for the live text message
+        const currentIndexPosition = [
+            currentIndex[0] + 1,
+            ...currentIndex.slice(1)
+        ];
+        const newIndexPosition = [
+            newIndex[0] + 1,
+            ...newIndex.slice(1)
+        ];
+        setLiveText(formatMessage({
+            id: translations.getTranslation('components.Blocks.dnd.reorder'),
+            defaultMessage: '{item}, moved. New position in the editor: {position}.'
+        }, {
+            item: `${name1}.${currentIndexPosition.join(',')}`,
+            position: `${newIndexPosition.join(',')} of ${editor.children.length}`
+        }));
+    }, [
+        editor,
+        formatMessage,
+        name1,
+        setLiveText
+    ]);
+    const [{ handlerId, isDragging, isOverDropTarget, direction }, blockRef, dropRef, dragRef] = useDragAndDrop.useDragAndDrop(!disabled, {
+        type: `${dragAndDrop.ItemTypes.BLOCKS}_${name1}`,
+        index,
+        item: {
+            index,
+            displayedValue: children
+        },
+        onDropItem (currentIndex, newIndex) {
+            if (newIndex) handleMoveBlock(newIndex, currentIndex);
+        }
+    });
+    const composedBoxRefs = designSystem.useComposedRefs(blockRef, dropRef);
+    // Set Drag direction before loosing state while dragging
+    React__namespace.useEffect(()=>{
+        if (direction) {
+            setDragDirection(direction);
+        }
+    }, [
+        direction,
+        setDragDirection
+    ]);
+    // On selection change hide drag handle
+    React__namespace.useEffect(()=>{
+        setDragVisibility('hidden');
+    }, [
+        editor.selection
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(Wrapper, {
+        ref: composedBoxRefs,
+        isOverDropTarget: isOverDropTarget,
+        children: [
+            isOverDropTarget && /*#__PURE__*/ jsxRuntime.jsx(DropPlaceholder, {
+                borderStyle: "solid",
+                borderColor: "secondary200",
+                borderWidth: "2px",
+                width: "calc(100% - 24px)",
+                marginLeft: "auto",
+                dragDirection: dragDirection,
+                // For list items placeholder reduce the margin around
+                placeholderMargin: children.props.as && children.props.as === 'li' ? 1 : 2
+            }),
+            isDragging ? /*#__PURE__*/ jsxRuntime.jsx(CloneDragItem, {
+                dragHandleTopMargin: dragHandleTopMargin,
+                children: children
+            }) : /*#__PURE__*/ jsxRuntime.jsxs(DragItem, {
+                ref: dragRef,
+                "data-handler-id": handlerId,
+                gap: 2,
+                paddingLeft: 2,
+                alignItems: "start",
+                onDragStart: (event)=>{
+                    const target = event.target;
+                    const currentTarget = event.currentTarget;
+                    // Dragging action should only trigger drag event when button is dragged, however update styles on the whole dragItem.
+                    if (target.getAttribute('role') !== 'button') {
+                        event.preventDefault();
+                    } else {
+                        // Setting styles using dragging state is not working, so set it on current target element as nodes get dragged
+                        currentTarget.style.opacity = '0.5';
+                    }
+                },
+                onDragEnd: (event)=>{
+                    const currentTarget = event.currentTarget;
+                    currentTarget.style.opacity = '1';
+                },
+                onMouseMove: ()=>setDragVisibility('visible'),
+                onSelect: ()=>setDragVisibility('visible'),
+                onMouseLeave: ()=>setDragVisibility('hidden'),
+                "aria-disabled": disabled,
+                $dragVisibility: dragVisibility,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(DragIconButton, {
+                        tag: "div",
+                        contentEditable: false,
+                        role: "button",
+                        tabIndex: 0,
+                        withTooltip: false,
+                        label: formatMessage({
+                            id: translations.getTranslation('components.DragHandle-label'),
+                            defaultMessage: 'Drag'
+                        }),
+                        onClick: (e)=>e.stopPropagation(),
+                        "aria-disabled": disabled,
+                        disabled: disabled,
+                        draggable: true,
+                        // For some blocks top margin added to drag handle to align at the text level
+                        $dragHandleTopMargin: dragHandleTopMargin,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {
+                            color: "primary500"
+                        })
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+};
+// To prevent applying opacity to the original item being dragged, display a cloned element without opacity.
+const CloneDragItem = ({ children, dragHandleTopMargin })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(DragItem, {
+        gap: 2,
+        paddingLeft: 2,
+        alignItems: "start",
+        $dragVisibility: "visible",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(DragIconButton, {
+                tag: "div",
+                role: "button",
+                withTooltip: false,
+                label: formatMessage({
+                    id: translations.getTranslation('components.DragHandle-label'),
+                    defaultMessage: 'Drag'
+                }),
+                $dragHandleTopMargin: dragHandleTopMargin,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {
+                    color: "neutral600"
+                })
+            }),
+            children
+        ]
+    });
+};
+const baseRenderLeaf = (props, modifiers)=>{
+    // Recursively wrap the children for each active modifier
+    const wrappedChildren = types.getEntries(modifiers).reduce((currentChildren, modifierEntry)=>{
+        const [name1, modifier] = modifierEntry;
+        if (props.leaf[name1]) {
+            return modifier.renderLeaf(currentChildren);
+        }
+        return currentChildren;
+    }, props.children);
+    return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        ...props.attributes,
+        className: props.leaf.className,
+        children: wrappedChildren
+    });
+};
+const baseRenderElement = ({ props, blocks, editor, setDragDirection, dragDirection })=>{
+    const { element } = props;
+    const blockMatch = Object.values(blocks).find((block)=>block.matchNode(element));
+    const block = blockMatch || blocks.paragraph;
+    const nodePath = slateReact.ReactEditor.findPath(editor, element);
+    // Link is inline block so it cannot be dragged
+    // List items and nested list blocks i.e. lists with indent level higher than 0 are skipped from dragged items
+    if (types.isLinkNode(element) || types.isListNode(element) && element.indentLevel && element.indentLevel > 0 || element.type === 'list-item') {
+        return block.renderElement(props);
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(DragAndDropElement, {
+        index: nodePath,
+        setDragDirection: setDragDirection,
+        dragDirection: dragDirection,
+        dragHandleTopMargin: block.dragHandleTopMargin,
+        children: block.renderElement(props)
+    });
+};
+const dragNoop = ()=>true;
+const BlocksContent = ({ placeholder, ariaLabelId })=>{
+    const { editor, disabled, blocks, modifiers, setLiveText, isExpandedMode } = BlocksEditor.useBlocksEditorContext('BlocksContent');
+    const blocksRef = React__namespace.useRef(null);
+    const { formatMessage } = reactIntl.useIntl();
+    const [dragDirection, setDragDirection] = React__namespace.useState(null);
+    const { modalElement, handleConversionResult } = BlocksToolbar.useConversionModal();
+    // Create renderLeaf function based on the modifiers store
+    const renderLeaf = React__namespace.useCallback((props)=>baseRenderLeaf(props, modifiers), [
+        modifiers
+    ]);
+    const handleMoveBlocks = (editor, event)=>{
+        if (!editor.selection) return;
+        const start = slate.Range.start(editor.selection);
+        const currentIndex = [
+            start.path[0]
+        ];
+        let newIndexPosition = 0;
+        if (event.key === 'ArrowUp') {
+            newIndexPosition = currentIndex[0] > 0 ? currentIndex[0] - 1 : currentIndex[0];
+        } else {
+            newIndexPosition = currentIndex[0] < editor.children.length - 1 ? currentIndex[0] + 1 : currentIndex[0];
+        }
+        const newIndex = [
+            newIndexPosition
+        ];
+        if (newIndexPosition !== currentIndex[0]) {
+            slate.Transforms.moveNodes(editor, {
+                at: currentIndex,
+                to: newIndex
+            });
+            setLiveText(formatMessage({
+                id: translations.getTranslation('components.Blocks.dnd.reorder'),
+                defaultMessage: '{item}, moved. New position in the editor: {position}.'
+            }, {
+                item: `${name}.${currentIndex[0] + 1}`,
+                position: `${newIndex[0] + 1} of ${editor.children.length}`
+            }));
+            event.preventDefault();
+        }
+    };
+    // Create renderElement function base on the blocks store
+    const renderElement = React__namespace.useCallback((props)=>baseRenderElement({
+            props,
+            blocks,
+            editor,
+            dragDirection,
+            setDragDirection
+        }), [
+        blocks,
+        editor,
+        dragDirection,
+        setDragDirection
+    ]);
+    const checkSnippet = (event)=>{
+        // Get current text block
+        if (!editor.selection) {
+            return;
+        }
+        const [textNode, textNodePath] = slate.Editor.node(editor, editor.selection.anchor.path);
+        // Narrow the type to a text node
+        if (slate.Editor.isEditor(textNode) || textNode.type !== 'text') {
+            return;
+        }
+        // Don't check for snippets if we're not at the start of a block
+        if (textNodePath.at(-1) !== 0) {
+            return;
+        }
+        // Check if the text node starts with a known snippet
+        const blockMatchingSnippet = Object.values(blocks).find((block)=>{
+            return block.snippets?.includes(textNode.text);
+        });
+        if (blockMatchingSnippet?.handleConvert) {
+            // Prevent the space from being created and delete the snippet
+            event.preventDefault();
+            slate.Transforms.delete(editor, {
+                distance: textNode.text.length,
+                unit: 'character',
+                reverse: true
+            });
+            // Convert the selected block
+            const maybeRenderModal = blockMatchingSnippet.handleConvert(editor);
+            handleConversionResult(maybeRenderModal);
+        }
+    };
+    const handleEnter = (event)=>{
+        if (!editor.selection) {
+            return;
+        }
+        const selectedNode = editor.children[editor.selection.anchor.path[0]];
+        const selectedBlock = Object.values(blocks).find((block)=>block.matchNode(selectedNode));
+        if (!selectedBlock) {
+            return;
+        }
+        // Allow forced line breaks when shift is pressed
+        if (event.shiftKey && selectedNode.type !== 'image') {
+            slate.Transforms.insertText(editor, '\n');
+            return;
+        }
+        // Check if there's an enter handler for the selected block
+        if (selectedBlock.handleEnterKey) {
+            selectedBlock.handleEnterKey(editor);
+        } else {
+            blocks.paragraph.handleEnterKey(editor);
+        }
+    };
+    const handleBackspaceEvent = (event)=>{
+        if (!editor.selection) {
+            return;
+        }
+        const selectedNode = editor.children[editor.selection.anchor.path[0]];
+        const selectedBlock = Object.values(blocks).find((block)=>block.matchNode(selectedNode));
+        if (!selectedBlock) {
+            return;
+        }
+        if (selectedBlock.handleBackspaceKey) {
+            selectedBlock.handleBackspaceKey(editor, event);
+        }
+    };
+    const handleTab = (event)=>{
+        if (!editor.selection) {
+            return;
+        }
+        const selectedNode = editor.children[editor.selection.anchor.path[0]];
+        const selectedBlock = Object.values(blocks).find((block)=>block.matchNode(selectedNode));
+        if (!selectedBlock) {
+            return;
+        }
+        if (selectedBlock.handleTab) {
+            event.preventDefault();
+            selectedBlock.handleTab(editor);
+        }
+    };
+    const handleKeyboardShortcuts = (event)=>{
+        const isCtrlOrCmd = event.metaKey || event.ctrlKey;
+        if (isCtrlOrCmd) {
+            // Check if there's a modifier to toggle
+            Object.values(modifiers).forEach((value)=>{
+                if (value.isValidEventKey(event)) {
+                    value.handleToggle(editor);
+                    return;
+                }
+            });
+            if (event.shiftKey && [
+                'ArrowUp',
+                'ArrowDown'
+            ].includes(event.key)) {
+                handleMoveBlocks(editor, event);
+            }
+        }
+    };
+    const handleKeyDown = (event)=>{
+        // Find the right block-specific handlers for enter and backspace key presses
+        switch(event.key){
+            case 'Enter':
+                event.preventDefault();
+                return handleEnter(event);
+            case 'Backspace':
+                return handleBackspaceEvent(event);
+            case 'Tab':
+                return handleTab(event);
+            case 'Escape':
+                return slateReact.ReactEditor.blur(editor);
+        }
+        handleKeyboardShortcuts(event);
+        // Check if a snippet was triggered
+        if (event.key === ' ') {
+            checkSnippet(event);
+        }
+    };
+    /**
+   *  scrollSelectionIntoView : Slate's default method to scroll a DOM selection into the view,
+   *  thats shifting layout for us when there is a overflowY:scroll on the viewport.
+   *  We are overriding it to check if the selection is not fully within the visible area of the editor,
+   *  we use scrollBy one line to the bottom
+   */ const handleScrollSelectionIntoView = React__namespace.useCallback(()=>{
+        if (!editor.selection || !blocksRef.current) {
+            return;
+        }
+        const domRange = slateReact.ReactEditor.toDOMRange(editor, editor.selection);
+        const domRect = domRange.getBoundingClientRect();
+        const editorRect = blocksRef.current.getBoundingClientRect();
+        // Check if the selection is not fully within the visible area of the editor
+        if (domRect.top < editorRect.top || domRect.bottom > editorRect.bottom) {
+            // Scroll by one line to the bottom
+            blocksRef.current.scrollBy({
+                top: 28,
+                behavior: 'smooth'
+            });
+        }
+    }, [
+        editor
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        ref: blocksRef,
+        grow: 1,
+        width: "100%",
+        overflow: "auto",
+        fontSize: 2,
+        background: "neutral0",
+        color: "neutral800",
+        lineHeight: 6,
+        paddingRight: 7,
+        paddingTop: 6,
+        paddingBottom: 3,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(StyledEditable, {
+                "aria-labelledby": ariaLabelId,
+                readOnly: disabled,
+                placeholder: placeholder,
+                isExpandedMode: isExpandedMode,
+                decorate: Code.decorateCode,
+                renderElement: renderElement,
+                renderLeaf: renderLeaf,
+                onKeyDown: handleKeyDown,
+                scrollSelectionIntoView: handleScrollSelectionIntoView,
+                // As we have our own handler to drag and drop the elements returing true will skip slate's own event handler
+                onDrop: dragNoop,
+                onDragStart: dragNoop
+            }),
+            modalElement
+        ]
+    });
+};
+
+exports.BlocksContent = BlocksContent;
+//# sourceMappingURL=BlocksContent.js.map