@strapi/content-manager 0.0.0-experimental.3f0da6c47a9691860812c214ad0ea5ed99e620e7 → 0.0.0-experimental.402a8c65252458d28f0c291ad2aaabec270b591d

package/dist/admin/chunks/{Input-DLJZHw9Y.js → Input-BUaeK7Zs.js}

@@ -6,7 +6,7 @@ var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var index = require('./index-BHimg6jW.js');
+var index = require('./index-BFvBqzd6.js');
 var styledComponents = require('styled-components');
 var slate = require('slate');
 var slateHistory = require('slate-history');
@@ -68,10 +68,10 @@ var Toolbar = require('@radix-ui/react-toolbar');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var reactRouterDom = require('react-router-dom');
 var objects = require('./objects-C3EebVVe.js');
-var Relations = require('./Relations-o7_hVGyK.js');
+var Relations = require('./Relations-CIVG7vfG.js');
 var pipe$1 = require('lodash/fp/pipe');
 var ComponentIcon = require('./ComponentIcon-C-EjOUPA.js');
-var relations = require('./relations-XOYEEqMz.js');
+var relations = require('./relations-DPq9jPO4.js');
 var CodeMirror = require('codemirror5');
 var sanitizeHtml = require('sanitize-html');
 var highlight_js = require('highlight.js');
@@ -1053,7 +1053,7 @@ const isListNode$1 = (element)=>{
     return element.type === 'list';
 };
 
-const StyledLink = styledComponents.styled(designSystem.Box)`
+const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
   text-decoration: none;
 `;
 const RemoveButton = styledComponents.styled(designSystem.Button)`
@@ -1113,10 +1113,9 @@ const LinkContent = /*#__PURE__*/ React__namespace.forwardRef(({ link, children,
         open: popoverOpen,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(StyledLink, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(StyledBaseLink, {
                     ...attributes,
                     ref: forwardedRef,
-                    tag: "a",
                     href: link.url,
                     onClick: ()=>setPopoverOpen(true),
                     color: "primary600",
@@ -1720,102 +1719,13 @@ const quoteBlocks = {
     }
 };
 
-const ObservedToolbarComponent = ({ index, lastVisibleIndex, setLastVisibleIndex, rootRef, children })=>{
-    const isVisible = index <= lastVisibleIndex;
-    const containerRef = strapiAdmin.useElementOnScreen((isVisible)=>{
-        /**
-       * It's the MoreMenu's job to make an item not visible when there's not room for it.
-       * But we need to react here to the element becoming visible again.
-       */ if (isVisible) {
-            setLastVisibleIndex((prev)=>Math.max(prev, index));
-        }
-    }, {
-        threshold: 1,
-        root: rootRef.current
-    });
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        ref: containerRef,
-        style: {
-            /**
-         * Use visibility so that the element occupies the space if requires even when there's not
-         * enough room for it to be visible. The empty reserved space will be clipped by the
-         * overflow:hidden rule on the parent, so it doesn't affect the UI.
-         * This way we can keep observing its visiblity and react to browser resize events.
-         */ visibility: isVisible ? 'visible' : 'hidden'
-        },
-        children: children
-    });
-};
-const EditorToolbarObserver = ({ observedComponents, menuTriggerVariant = 'ghost' })=>{
-    const { formatMessage } = reactIntl.useIntl();
-    const toolbarRef = React__namespace.useRef(null);
-    const [lastVisibleIndex, setLastVisibleIndex] = React__namespace.useState(observedComponents.length - 1);
-    const hasHiddenItems = lastVisibleIndex < observedComponents.length - 1;
-    const menuIndex = lastVisibleIndex + 1;
-    const [open, setOpen] = React__namespace.useState(false);
-    const isMenuOpenWithContent = open && hasHiddenItems;
-    const menuTriggerRef = strapiAdmin.useElementOnScreen((isVisible)=>{
-        // We only react to the menu becoming invisible. When that happens, we hide the last item.
-        if (!isVisible) {
-            /**
-         * If there's no room for any item, the index can be -1.
-         * This is intentional, in that case only the more menu will be visible.
-         **/ setLastVisibleIndex((prev)=>prev - 1);
-            // Maintain the menu state if it has content
-            setOpen(isMenuOpenWithContent);
-        }
-    }, {
-        threshold: 1,
-        root: toolbarRef.current
-    });
-    return observedComponents.map((component, index)=>{
-        return /*#__PURE__*/ jsxRuntime.jsx(ObservedToolbarComponent, {
-            index: index,
-            lastVisibleIndex: lastVisibleIndex,
-            setLastVisibleIndex: setLastVisibleIndex,
-            rootRef: toolbarRef,
-            children: component.toolbar
-        }, component.key);
-    }).toSpliced(menuIndex, 0, /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
-        defaultOpen: false,
-        open: isMenuOpenWithContent,
-        onOpenChange: setOpen,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
-                paddingLeft: 0,
-                paddingRight: 0,
-                ref: menuTriggerRef,
-                variant: menuTriggerVariant,
-                style: {
-                    visibility: hasHiddenItems ? 'visible' : 'hidden'
-                },
-                label: formatMessage({
-                    id: 'global.more',
-                    defaultMessage: 'More'
-                }),
-                tag: designSystem.IconButton,
-                icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {})
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
-                onCloseAutoFocus: (e)=>e.preventDefault(),
-                maxHeight: "100%",
-                minWidth: "256px",
-                popoverPlacement: "bottom-end",
-                children: observedComponents.slice(menuIndex).map((component)=>/*#__PURE__*/ jsxRuntime.jsx(React__namespace.Fragment, {
-                        children: component.menu
-                    }, component.key))
-            })
-        ]
-    }, "more-menu"));
-};
-
 const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
     background: ${({ theme })=>theme.colors.neutral150};
   }
 `;
-const ToolbarSeparator = styledComponents.styled(Toolbar__namespace.Separator)`
+const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
   background: ${({ theme })=>theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
@@ -1885,7 +1795,7 @@ const ToolbarButton = ({ icon: Icon, name, label, isActive, disabled, handleClic
     const labelMessage = formatMessage(label);
     const enabledColor = isActive ? 'primary600' : 'neutral600';
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-        label: labelMessage,
+        description: labelMessage,
         children: /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleItem, {
             value: name,
             "data-state": isActive ? 'on' : 'off',
@@ -2077,9 +1987,8 @@ const BlockOption = ({ value, icon: Icon, label, blockSelected })=>{
 const isListNode = (node)=>{
     return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === 'list';
 };
-const ListButton = ({ block, format, location = 'toolbar' })=>{
+const ListButton = ({ block, format })=>{
     const { editor, disabled, blocks } = useBlocksEditorContext('ListButton');
-    const { formatMessage } = reactIntl.useIntl();
     const isListActive = ()=>{
         if (!editor.selection) return false;
         // Get the parent list at selection anchor node
@@ -2155,18 +2064,6 @@ const ListButton = ({ block, format, location = 'toolbar' })=>{
             }
         }
     };
-    if (location === 'menu') {
-        const Icon = block.icon;
-        return /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
-            onSelect: ()=>toggleList(format),
-            isActive: isListActive(),
-            disabled: isListDisabled(),
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
-                formatMessage(block.label)
-            ]
-        });
-    }
     return /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
         icon: block.icon,
         name: format,
@@ -2176,9 +2073,8 @@ const ListButton = ({ block, format, location = 'toolbar' })=>{
         handleClick: ()=>toggleList(format)
     });
 };
-const LinkButton = ({ disabled, location = 'toolbar' })=>{
+const LinkButton = ({ disabled })=>{
     const { editor } = useBlocksEditorContext('LinkButton');
-    const { formatMessage } = reactIntl.useIntl();
     const isLinkActive = ()=>{
         const { selection } = editor;
         if (!selection) return false;
@@ -2219,55 +2115,20 @@ const LinkButton = ({ disabled, location = 'toolbar' })=>{
             url: ''
         });
     };
-    const label = {
-        id: 'components.Blocks.link',
-        defaultMessage: 'Link'
-    };
-    if (location === 'menu') {
-        return /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
-            onSelect: addLink,
-            isActive: isLinkActive(),
-            disabled: isLinkDisabled(),
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
-                formatMessage(label)
-            ]
-        });
-    }
     return /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
         icon: Icons.Link,
         name: "link",
-        label: label,
+        label: {
+            id: 'components.Blocks.link',
+            defaultMessage: 'Link'
+        },
         isActive: isLinkActive(),
         handleClick: addLink,
         disabled: isLinkDisabled()
     });
 };
-const StyledMenuItem = styledComponents.styled(designSystem.Menu.Item)`
-  &:hover {
-    background-color: ${({ theme })=>theme.colors.primary100};
-  }
-
-  ${(props)=>props.isActive && styledComponents.css`
-      font-weight: bold;
-      background-color: ${({ theme })=>theme.colors.primary100};
-      color: ${({ theme })=>theme.colors.primary600};
-      font-weight: bold;
-    `}
-
-  > span {
-    display: inline-flex;
-    gap: ${({ theme })=>theme.spaces[2]};
-    align-items: center;
-  }
-
-  svg {
-    fill: ${({ theme, isActive })=>isActive ? theme.colors.primary600 : theme.colors.neutral600};
-  }
-`;
 const BlocksToolbar = ()=>{
     const { editor, blocks, modifiers, disabled } = useBlocksEditorContext('BlocksToolbar');
-    const { formatMessage } = reactIntl.useIntl();
     /**
    * The modifier buttons are disabled when an image is selected.
    */ const checkButtonDisabled = ()=>{
@@ -2288,94 +2149,6 @@ const BlocksToolbar = ()=>{
         return false;
     };
     const isButtonDisabled = checkButtonDisabled();
-    /**
-   * Observed components are ones that may or may not be visible in the toolbar, depending on the
-   * available space. They provide two render props:
-   * - renderInToolbar: for when we try to render the component in the toolbar (may be hidden)
-   * - renderInMenu: for when the component didn't fit in the toolbar and is relegated
-   *   to the "more" menu
-   */ const observedComponents = [
-        ...Object.entries(modifiers).map(([name, modifier])=>{
-            const Icon = modifier.icon;
-            const isActive = modifier.checkIsActive(editor);
-            const handleSelect = ()=>modifier.handleToggle(editor);
-            return {
-                toolbar: /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
-                    name: name,
-                    icon: modifier.icon,
-                    label: modifier.label,
-                    isActive: modifier.checkIsActive(editor),
-                    handleClick: handleSelect,
-                    disabled: isButtonDisabled
-                }, name),
-                menu: /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
-                    onSelect: handleSelect,
-                    isActive: isActive,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
-                        formatMessage(modifier.label)
-                    ]
-                }),
-                key: `modifier.${name}`
-            };
-        }),
-        {
-            toolbar: /*#__PURE__*/ jsxRuntime.jsx(LinkButton, {
-                disabled: isButtonDisabled,
-                location: "toolbar"
-            }),
-            menu: /*#__PURE__*/ jsxRuntime.jsx(LinkButton, {
-                disabled: isButtonDisabled,
-                location: "menu"
-            }),
-            key: 'block.link'
-        },
-        {
-            // List buttons can only be rendered together when in the toolbar
-            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                direction: "row",
-                gap: 1,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
-                        type: "single",
-                        asChild: true,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            gap: 1,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                                    block: blocks['list-unordered'],
-                                    format: "unordered",
-                                    location: "toolbar"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                                    block: blocks['list-ordered'],
-                                    format: "ordered",
-                                    location: "toolbar"
-                                })
-                            ]
-                        })
-                    })
-                ]
-            }),
-            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                        block: blocks['list-unordered'],
-                        format: "unordered",
-                        location: "menu"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                        block: blocks['list-ordered'],
-                        format: "ordered",
-                        location: "menu"
-                    })
-                ]
-            }),
-            key: 'block.list'
-        }
-    ];
     return /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.Root, {
         "aria-disabled": disabled,
         asChild: true,
@@ -2385,18 +2158,43 @@ const BlocksToolbar = ()=>{
             width: "100%",
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx(BlocksDropdown, {}),
-                /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(Separator, {}),
                 /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
                     type: "multiple",
                     asChild: true,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                        direction: "row",
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                         gap: 1,
-                        grow: 1,
-                        overflow: "hidden",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(EditorToolbarObserver, {
-                            observedComponents: observedComponents
-                        })
+                        children: [
+                            Object.entries(modifiers).map(([name, modifier])=>/*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
+                                    name: name,
+                                    icon: modifier.icon,
+                                    label: modifier.label,
+                                    isActive: modifier.checkIsActive(editor),
+                                    handleClick: ()=>modifier.handleToggle(editor),
+                                    disabled: isButtonDisabled
+                                }, name)),
+                            /*#__PURE__*/ jsxRuntime.jsx(LinkButton, {
+                                disabled: isButtonDisabled
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(Separator, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
+                    type: "single",
+                    asChild: true,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
+                                block: blocks['list-unordered'],
+                                format: "unordered"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
+                                block: blocks['list-ordered'],
+                                format: "ordered"
+                            })
+                        ]
                     })
                 })
             ]
@@ -5752,14 +5550,14 @@ const quoteAndCodeHandler = (editor, markdownType)=>{
 };
 
 // NAV BUTTONS
-styledComponents.styled(designSystem.IconButtonGroup)`
+const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-left: ${({ theme })=>theme.spaces[4]};
 `;
-styledComponents.styled(designSystem.IconButton)`
+const MoreButton = styledComponents.styled(designSystem.IconButton)`
   margin: ${({ theme })=>`0 ${theme.spaces[2]}`};
 `;
 // NAV
-styledComponents.styled(designSystem.IconButtonGroup)`
+const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-right: ${({ theme })=>`${theme.spaces[2]}`};
 `;
 // FOOTER
@@ -5817,515 +5615,245 @@ const WysiwygFooter = ({ onToggleExpand })=>{
 
 /**
  * TODO: refactor this mess.
- */ const WysiwygNav = ({ disabled, editorRef, isPreviewMode, onToggleMediaLib, onTogglePreviewMode })=>{
+ */ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode })=>{
+    const [visiblePopover, setVisiblePopover] = React__namespace.useState(false);
     const { formatMessage } = reactIntl.useIntl();
-    const isDisabled = disabled || isPreviewMode;
-    const handleActionClick = (value, currentEditorRef)=>{
-        switch(value){
-            case 'Link':
-                {
-                    markdownHandler(currentEditorRef, value);
-                    break;
-                }
-            case 'Code':
-            case 'Quote':
-                {
-                    quoteAndCodeHandler(currentEditorRef, value);
-                    break;
-                }
-            case 'Bold':
-            case 'Italic':
-            case 'Underline':
-            case 'Strikethrough':
-                {
-                    markdownHandler(currentEditorRef, value);
-                    break;
-                }
-            case 'BulletList':
-            case 'NumberList':
-                {
-                    listHandler(currentEditorRef, value);
-                    break;
-                }
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-                {
-                    titleHandler(currentEditorRef, value);
-                    break;
-                }
-        }
+    const selectPlaceholder = formatMessage({
+        id: 'components.Wysiwyg.selectOptions.title',
+        defaultMessage: 'Add a title'
+    });
+    React__namespace.useRef(null);
+    const handleTogglePopover = ()=>{
+        setVisiblePopover((prev)=>!prev);
     };
-    const observedComponents = [
-        {
-            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Bold', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.modifiers.bold',
-                            defaultMessage: 'Bold'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.modifiers.bold',
-                            defaultMessage: 'Bold'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Italic', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.modifiers.italic',
-                            defaultMessage: 'Italic'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.modifiers.italic',
-                            defaultMessage: 'Italic'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Underline', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.modifiers.underline',
-                            defaultMessage: 'Underline'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.modifiers.underline',
-                            defaultMessage: 'Underline'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Strikethrough', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.modifiers.strikethrough',
-                            defaultMessage: 'Strikethrough'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.modifiers.strikethrough',
-                            defaultMessage: 'Strikethrough'
+    if (disabled || isPreviewMode) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            padding: 2,
+            background: "neutral100",
+            justifyContent: "space-between",
+            borderRadius: `0.4rem 0.4rem 0 0`,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
+                                disabled: true,
+                                placeholder: selectPlaceholder,
+                                "aria-label": selectPlaceholder,
+                                size: "S",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                        value: "h1",
+                                        children: "h1"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                        value: "h2",
+                                        children: "h2"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                        value: "h3",
+                                        children: "h3"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                        value: "h4",
+                                        children: "h4"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                        value: "h5",
+                                        children: "h5"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                        value: "h6",
+                                        children: "h6"
+                                    })
+                                ]
+                            })
                         }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {})
-                    })
-                ]
-            }),
-            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('Bold', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.bold',
-                                    defaultMessage: 'Bold'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('Italic', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.italic',
-                                    defaultMessage: 'Italic'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('Underline', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
+                        /*#__PURE__*/ jsxRuntime.jsxs(MainButtons, {
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    disabled: true,
+                                    label: "Bold",
+                                    name: "Bold",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.underline',
-                                    defaultMessage: 'Underline'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('Strikethrough', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    disabled: true,
+                                    label: "Italic",
+                                    name: "Italic",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {})
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.strikethrough',
-                                    defaultMessage: 'Strikethrough'
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    disabled: true,
+                                    label: "Underline",
+                                    name: "Underline",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
                                 })
                             ]
-                        })
-                    })
-                ]
-            }),
-            key: 'formatting-group-1'
-        },
-        {
-            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('BulletList', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.blocks.bulletList',
-                            defaultMessage: 'Bulleted list'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.blocks.bulletList',
-                            defaultMessage: 'Bulleted list'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('NumberList', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.blocks.numberList',
-                            defaultMessage: 'Numbered list'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.blocks.numberList',
-                            defaultMessage: 'Numbered list'
                         }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {})
-                    })
-                ]
-            }),
-            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('BulletList', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.unorderedList',
-                                    defaultMessage: 'Bulleted list'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('NumberList', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.orderedList',
-                                    defaultMessage: 'Numbered list'
-                                })
-                            ]
+                        /*#__PURE__*/ jsxRuntime.jsx(MoreButton, {
+                            disabled: true,
+                            label: "More",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {})
                         })
+                    ]
+                }),
+                !isExpandMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                    onClick: onTogglePreviewMode,
+                    variant: "tertiary",
+                    children: formatMessage({
+                        id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+                        defaultMessage: 'Markdown mode'
                     })
-                ]
-            }),
-            key: 'formatting-group-2'
-        },
-        {
-            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Code', editorRef),
-                        label: formatMessage({
-                            id: 'components.Wysiwyg.blocks.code',
-                            defaultMessage: 'Code'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Wysiwyg.blocks.code',
-                            defaultMessage: 'Code'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>{
-                            onToggleMediaLib();
-                        },
-                        label: formatMessage({
-                            id: 'components.Blocks.blocks.image',
-                            defaultMessage: 'Image'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.blocks.image',
-                            defaultMessage: 'Image'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Link', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.popover.link',
-                            defaultMessage: 'Link'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.popover.link',
-                            defaultMessage: 'Link'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        disabled: isDisabled,
-                        onClick: ()=>handleActionClick('Quote', editorRef),
-                        label: formatMessage({
-                            id: 'components.Blocks.blocks.quote',
-                            defaultMessage: 'Quote'
-                        }),
-                        name: formatMessage({
-                            id: 'components.Blocks.blocks.quote',
-                            defaultMessage: 'Quote'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {})
-                    })
-                ]
-            }),
-            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        padding: 2,
+        background: "neutral100",
+        justifyContent: "space-between",
+        borderRadius: `0.4rem 0.4rem 0 0`,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('Code', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
+                            placeholder: selectPlaceholder,
+                            "aria-label": selectPlaceholder,
+                            // @ts-expect-error – DS v2 will only allow strings.
+                            onChange: (value)=>onActionClick(value, editorRef),
+                            size: "S",
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    value: "h1",
+                                    children: "h1"
                                 }),
-                                formatMessage({
-                                    id: 'components.Wysiwyg.blocks.code',
-                                    defaultMessage: 'Code'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {}),
-                        onSelect: ()=>{
-                            onToggleMediaLib();
-                        },
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    value: "h2",
+                                    children: "h2"
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.image',
-                                    defaultMessage: 'Image'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
-                        onSelect: ()=>handleActionClick('Link', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    value: "h3",
+                                    children: "h3"
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.popover.link',
-                                    defaultMessage: 'Link'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        onSelect: ()=>handleActionClick('Quote', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            tag: "span",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    value: "h4",
+                                    children: "h4"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    value: "h5",
+                                    children: "h5"
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.quote',
-                                    defaultMessage: 'Quote'
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                    value: "h6",
+                                    children: "h6"
                                 })
                             ]
                         })
-                    })
-                ]
-            }),
-            key: 'formatting-group-3'
-        }
-    ];
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-        padding: 2,
-        background: "neutral100",
-        justifyContent: "space-between",
-        borderRadius: "0.4rem 0.4rem 0 0",
-        width: "100%",
-        gap: 4,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
-                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
-                    disabled: isDisabled,
-                    placeholder: formatMessage({
-                        id: 'components.Wysiwyg.selectOptions.title',
-                        defaultMessage: 'Headings'
                     }),
-                    "aria-label": formatMessage({
-                        id: 'components.Wysiwyg.selectOptions.title',
-                        defaultMessage: 'Headings'
-                    }),
-                    // @ts-expect-error – DS v2 will only allow strings.
-                    onChange: (value)=>handleActionClick(value, editorRef),
-                    size: "S",
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                            value: "h1",
-                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingOne, {
-                                fill: "neutral600"
-                            }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H1',
-                                defaultMessage: 'Heading 1'
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                            value: "h2",
-                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingTwo, {
-                                fill: "neutral600"
-                            }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H2',
-                                defaultMessage: 'Heading 2'
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                            value: "h3",
-                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingThree, {
-                                fill: "neutral600"
-                            }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H3',
-                                defaultMessage: 'Heading 3'
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                            value: "h4",
-                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingFour, {
-                                fill: "neutral600"
+                    /*#__PURE__*/ jsxRuntime.jsxs(MainButtons, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                onClick: ()=>onActionClick('Bold', editorRef),
+                                label: "Bold",
+                                name: "Bold",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
                             }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H4',
-                                defaultMessage: 'Heading 4'
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                            value: "h5",
-                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingFive, {
-                                fill: "neutral600"
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                onClick: ()=>onActionClick('Italic', editorRef),
+                                label: "Italic",
+                                name: "Italic",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {})
                             }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H5',
-                                defaultMessage: 'Heading 5'
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                onClick: ()=>onActionClick('Underline', editorRef),
+                                label: "Underline",
+                                name: "Underline",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
                             })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                            value: "h6",
-                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingSix, {
-                                fill: "neutral600"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(MoreButton, {
+                                    label: "More",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {})
+                                })
                             }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H6',
-                                defaultMessage: 'Heading 6'
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                                sideOffset: 12,
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    padding: 2,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs(IconButtonGroupMargin, {
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>onActionClick('Strikethrough', editorRef, handleTogglePopover),
+                                                    label: "Strikethrough",
+                                                    name: "Strikethrough",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {})
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>onActionClick('BulletList', editorRef, handleTogglePopover),
+                                                    label: "BulletList",
+                                                    name: "BulletList",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {})
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>onActionClick('NumberList', editorRef, handleTogglePopover),
+                                                    label: "NumberList",
+                                                    name: "NumberList",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {})
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>onActionClick('Code', editorRef, handleTogglePopover),
+                                                    label: "Code",
+                                                    name: "Code",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {})
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>{
+                                                        handleTogglePopover();
+                                                        onToggleMediaLib();
+                                                    },
+                                                    label: "Image",
+                                                    name: "Image",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {})
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>onActionClick('Link', editorRef, handleTogglePopover),
+                                                    label: "Link",
+                                                    name: "Link",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {})
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                    onClick: ()=>onActionClick('Quote', editorRef, handleTogglePopover),
+                                                    label: "Quote",
+                                                    name: "Quote",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {})
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
                             })
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                width: "100%",
-                justifyContent: "space-between",
-                overflow: "hidden",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                        gap: 2,
-                        overflow: "hidden",
-                        width: "100%",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(EditorToolbarObserver, {
-                            menuTriggerVariant: "tertiary",
-                            observedComponents: observedComponents
-                        })
-                    }),
-                    onTogglePreviewMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                        onClick: onTogglePreviewMode,
-                        variant: "tertiary",
-                        minWidth: "132px",
-                        children: isPreviewMode ? formatMessage({
-                            id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-                            defaultMessage: 'Markdown mode'
-                        }) : formatMessage({
-                            id: 'components.Wysiwyg.ToggleMode.preview-mode',
-                            defaultMessage: 'Preview mode'
-                        })
+                        ]
                     })
                 ]
+            }),
+            onTogglePreviewMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                onClick: onTogglePreviewMode,
+                variant: "tertiary",
+                children: formatMessage({
+                    id: 'components.Wysiwyg.ToggleMode.preview-mode',
+                    defaultMessage: 'Preview mode'
+                })
             })
         ]
     });
@@ -6346,6 +5874,48 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
         setIsPreviewMode(false);
         setIsExpandMode((prev)=>!prev);
     };
+    const handleActionClick = (value, currentEditorRef, togglePopover)=>{
+        switch(value){
+            case 'Link':
+            case 'Strikethrough':
+                {
+                    markdownHandler(currentEditorRef, value);
+                    togglePopover?.();
+                    break;
+                }
+            case 'Code':
+            case 'Quote':
+                {
+                    quoteAndCodeHandler(currentEditorRef, value);
+                    togglePopover?.();
+                    break;
+                }
+            case 'Bold':
+            case 'Italic':
+            case 'Underline':
+                {
+                    markdownHandler(currentEditorRef, value);
+                    break;
+                }
+            case 'BulletList':
+            case 'NumberList':
+                {
+                    listHandler(currentEditorRef, value);
+                    togglePopover?.();
+                    break;
+                }
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+                {
+                    titleHandler(currentEditorRef, value);
+                    break;
+                }
+        }
+    };
     const handleSelectAssets = (files)=>{
         const formattedFiles = files.map((f)=>({
                 alt: f.alternativeText || f.name,
@@ -6380,6 +5950,7 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
                                 isExpandMode: isExpandMode,
                                 editorRef: editorRef,
                                 isPreviewMode: isPreviewMode,
+                                onActionClick: handleActionClick,
                                 onToggleMediaLib: handleToggleMediaLib,
                                 onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode,
                                 disabled: disabled
@@ -6643,7 +6214,7 @@ const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
     ${({ col })=>col && `grid-column: span ${col};`}
   }
 `;
-const FormLayout = ({ layout, hasBackground = false })=>{
+const FormLayout = ({ layout })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { model } = index.useDoc();
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -6676,13 +6247,14 @@ const FormLayout = ({ layout, hasBackground = false })=>{
                 }, field.name);
             }
             return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                ...!hasBackground && {
-                    padding: 6,
-                    borderColor: 'neutral150',
-                    background: 'neutral0',
-                    hasRadius: true,
-                    shadow: 'tableShadow'
-                },
+                hasRadius: true,
+                background: "neutral0",
+                shadow: "tableShadow",
+                paddingLeft: 6,
+                paddingRight: 6,
+                paddingTop: 6,
+                paddingBottom: 6,
+                borderColor: "neutral150",
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     direction: "column",
                     alignItems: "stretch",
@@ -7218,4 +6790,4 @@ exports.NotAllowedInput = NotAllowedInput;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Input-DLJZHw9Y.js.map
+//# sourceMappingURL=Input-BUaeK7Zs.js.map