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

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

@@ -6,23 +6,72 @@ 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-BhFoy2kH.js');
+var index = require('./index-BHimg6jW.js');
 var styledComponents = require('styled-components');
 var slate = require('slate');
 var slateHistory = require('slate-history');
 var slateReact = require('slate-react');
 var Prism = require('prismjs');
 require('prismjs/themes/prism-solarizedlight.css');
+require('prismjs/components/prism-asmatmel');
+require('prismjs/components/prism-bash');
+require('prismjs/components/prism-basic');
+require('prismjs/components/prism-c');
+require('prismjs/components/prism-clojure');
+require('prismjs/components/prism-cobol');
+require('prismjs/components/prism-cpp');
+require('prismjs/components/prism-csharp');
+require('prismjs/components/prism-dart');
+require('prismjs/components/prism-docker');
+require('prismjs/components/prism-elixir');
+require('prismjs/components/prism-erlang');
+require('prismjs/components/prism-fortran');
+require('prismjs/components/prism-fsharp');
+require('prismjs/components/prism-go');
+require('prismjs/components/prism-graphql');
+require('prismjs/components/prism-groovy');
+require('prismjs/components/prism-haskell');
+require('prismjs/components/prism-haxe');
+require('prismjs/components/prism-ini');
+require('prismjs/components/prism-java');
+require('prismjs/components/prism-javascript');
+require('prismjs/components/prism-jsx');
+require('prismjs/components/prism-json');
+require('prismjs/components/prism-julia');
+require('prismjs/components/prism-kotlin');
+require('prismjs/components/prism-latex');
+require('prismjs/components/prism-lua');
+require('prismjs/components/prism-markdown');
+require('prismjs/components/prism-matlab');
+require('prismjs/components/prism-makefile');
+require('prismjs/components/prism-objectivec');
+require('prismjs/components/prism-perl');
+require('prismjs/components/prism-php');
+require('prismjs/components/prism-powershell');
+require('prismjs/components/prism-python');
+require('prismjs/components/prism-r');
+require('prismjs/components/prism-ruby');
+require('prismjs/components/prism-rust');
+require('prismjs/components/prism-sas');
+require('prismjs/components/prism-scala');
+require('prismjs/components/prism-scheme');
+require('prismjs/components/prism-sql');
+require('prismjs/components/prism-stata');
+require('prismjs/components/prism-swift');
+require('prismjs/components/prism-typescript');
+require('prismjs/components/prism-tsx');
+require('prismjs/components/prism-vbnet');
+require('prismjs/components/prism-yaml');
 var usePrev = require('./usePrev-DIYl-IAL.js');
 var useDragAndDrop = require('./useDragAndDrop-gcqEJMnO.js');
 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-CzrnshXy.js');
+var Relations = require('./Relations-o7_hVGyK.js');
 var pipe$1 = require('lodash/fp/pipe');
 var ComponentIcon = require('./ComponentIcon-C-EjOUPA.js');
-var relations = require('./relations--SHAQ-Ch.js');
+var relations = require('./relations-XOYEEqMz.js');
 var CodeMirror = require('codemirror5');
 var sanitizeHtml = require('sanitize-html');
 var highlight_js = require('highlight.js');
@@ -57,6 +106,7 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var Prism__namespace = /*#__PURE__*/_interopNamespaceDefault(Prism);
 var Toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(Toolbar);
 
 const componentStore = new Map();
@@ -431,56 +481,6 @@ const isText$2 = (node)=>{
     }
 };
 
-require('prismjs/components/prism-asmatmel');
-require('prismjs/components/prism-bash');
-require('prismjs/components/prism-basic');
-require('prismjs/components/prism-c');
-require('prismjs/components/prism-clojure');
-require('prismjs/components/prism-cobol');
-require('prismjs/components/prism-cpp');
-require('prismjs/components/prism-csharp');
-require('prismjs/components/prism-dart');
-require('prismjs/components/prism-docker');
-require('prismjs/components/prism-elixir');
-require('prismjs/components/prism-erlang');
-require('prismjs/components/prism-fortran');
-require('prismjs/components/prism-fsharp');
-require('prismjs/components/prism-go');
-require('prismjs/components/prism-graphql');
-require('prismjs/components/prism-groovy');
-require('prismjs/components/prism-haskell');
-require('prismjs/components/prism-haxe');
-require('prismjs/components/prism-ini');
-require('prismjs/components/prism-java');
-require('prismjs/components/prism-javascript');
-require('prismjs/components/prism-jsx');
-require('prismjs/components/prism-json');
-require('prismjs/components/prism-julia');
-require('prismjs/components/prism-kotlin');
-require('prismjs/components/prism-latex');
-require('prismjs/components/prism-lua');
-require('prismjs/components/prism-markdown');
-require('prismjs/components/prism-matlab');
-require('prismjs/components/prism-makefile');
-require('prismjs/components/prism-objectivec');
-require('prismjs/components/prism-perl');
-require('prismjs/components/prism-php');
-require('prismjs/components/prism-powershell');
-require('prismjs/components/prism-python');
-require('prismjs/components/prism-r');
-require('prismjs/components/prism-ruby');
-require('prismjs/components/prism-rust');
-require('prismjs/components/prism-sas');
-require('prismjs/components/prism-scala');
-require('prismjs/components/prism-scheme');
-require('prismjs/components/prism-sql');
-require('prismjs/components/prism-stata');
-require('prismjs/components/prism-swift');
-require('prismjs/components/prism-typescript');
-require('prismjs/components/prism-tsx');
-require('prismjs/components/prism-vbnet');
-require('prismjs/components/prism-yaml');
-
 const decorateCode = ([node, path])=>{
     const ranges = [];
     // make sure it is an Slate Element
@@ -489,9 +489,9 @@ const decorateCode = ([node, path])=>{
     const text = slate.Node.string(node);
     const language = codeLanguages.find((lang)=>lang.value === node.language);
     const decorateKey = language?.decorate ?? language?.value;
-    const selectedLanguage = Prism.languages[decorateKey || 'plaintext'];
+    const selectedLanguage = Prism__namespace.languages[decorateKey || 'plaintext'];
     // create "tokens" with "prismjs" and put them in "ranges"
-    const tokens = Prism.tokenize(text, selectedLanguage);
+    const tokens = Prism__namespace.tokenize(text, selectedLanguage);
     let start = 0;
     for (const token of tokens){
         const length = token.length;
@@ -1053,7 +1053,7 @@ const isListNode$1 = (element)=>{
     return element.type === 'list';
 };
 
-const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
+const StyledLink = styledComponents.styled(designSystem.Box)`
   text-decoration: none;
 `;
 const RemoveButton = styledComponents.styled(designSystem.Button)`
@@ -1113,9 +1113,10 @@ const LinkContent = /*#__PURE__*/ React__namespace.forwardRef(({ link, children,
         open: popoverOpen,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(StyledBaseLink, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(StyledLink, {
                     ...attributes,
                     ref: forwardedRef,
+                    tag: "a",
                     href: link.url,
                     onClick: ()=>setPopoverOpen(true),
                     color: "primary600",
@@ -1719,13 +1720,102 @@ 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 Separator = styledComponents.styled(Toolbar__namespace.Separator)`
+const ToolbarSeparator = styledComponents.styled(Toolbar__namespace.Separator)`
   background: ${({ theme })=>theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
@@ -1795,7 +1885,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, {
-        description: labelMessage,
+        label: labelMessage,
         children: /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleItem, {
             value: name,
             "data-state": isActive ? 'on' : 'off',
@@ -1987,8 +2077,9 @@ 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 })=>{
+const ListButton = ({ block, format, location = 'toolbar' })=>{
     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
@@ -2064,6 +2155,18 @@ const ListButton = ({ block, format })=>{
             }
         }
     };
+    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,
@@ -2073,8 +2176,9 @@ const ListButton = ({ block, format })=>{
         handleClick: ()=>toggleList(format)
     });
 };
-const LinkButton = ({ disabled })=>{
+const LinkButton = ({ disabled, location = 'toolbar' })=>{
     const { editor } = useBlocksEditorContext('LinkButton');
+    const { formatMessage } = reactIntl.useIntl();
     const isLinkActive = ()=>{
         const { selection } = editor;
         if (!selection) return false;
@@ -2115,20 +2219,55 @@ const LinkButton = ({ disabled })=>{
             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: {
-            id: 'components.Blocks.link',
-            defaultMessage: 'Link'
-        },
+        label: label,
         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 = ()=>{
@@ -2149,6 +2288,94 @@ 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,
@@ -2158,43 +2385,18 @@ const BlocksToolbar = ()=>{
             width: "100%",
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx(BlocksDropdown, {}),
-                /*#__PURE__*/ jsxRuntime.jsx(Separator, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {}),
                 /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
                     type: "multiple",
                     asChild: true,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        gap: 1,
-                        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, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        direction: "row",
                         gap: 1,
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                                block: blocks['list-unordered'],
-                                format: "unordered"
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                                block: blocks['list-ordered'],
-                                format: "ordered"
-                            })
-                        ]
+                        grow: 1,
+                        overflow: "hidden",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(EditorToolbarObserver, {
+                            observedComponents: observedComponents
+                        })
                     })
                 })
             ]
@@ -5550,14 +5752,14 @@ const quoteAndCodeHandler = (editor, markdownType)=>{
 };
 
 // NAV BUTTONS
-const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
+styledComponents.styled(designSystem.IconButtonGroup)`
   margin-left: ${({ theme })=>theme.spaces[4]};
 `;
-const MoreButton = styledComponents.styled(designSystem.IconButton)`
+styledComponents.styled(designSystem.IconButton)`
   margin: ${({ theme })=>`0 ${theme.spaces[2]}`};
 `;
 // NAV
-const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
+styledComponents.styled(designSystem.IconButtonGroup)`
   margin-right: ${({ theme })=>`${theme.spaces[2]}`};
 `;
 // FOOTER
@@ -5615,245 +5817,515 @@ const WysiwygFooter = ({ onToggleExpand })=>{
 
 /**
  * TODO: refactor this mess.
- */ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode })=>{
-    const [visiblePopover, setVisiblePopover] = React__namespace.useState(false);
+ */ const WysiwygNav = ({ disabled, editorRef, isPreviewMode, onToggleMediaLib, onTogglePreviewMode })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const selectPlaceholder = formatMessage({
-        id: 'components.Wysiwyg.selectOptions.title',
-        defaultMessage: 'Add a title'
-    });
-    React__namespace.useRef(null);
-    const handleTogglePopover = ()=>{
-        setVisiblePopover((prev)=>!prev);
+    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;
+                }
+        }
     };
-    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"
-                                    })
-                                ]
-                            })
+    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'
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsxs(MainButtons, {
+                        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(designSystem.IconButton, {
-                                    disabled: true,
-                                    label: "Bold",
-                                    name: "Bold",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {
+                                    "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.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"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                    disabled: true,
-                                    label: "Underline",
-                                    name: "Underline",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
+                                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,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                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"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.strikethrough',
+                                    defaultMessage: 'Strikethrough'
                                 })
                             ]
-                        }),
-                        /*#__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'
                     })
-                })
-            ]
-        });
-    }
-    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, {
+                ]
+            }),
+            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.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",
+                    /*#__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(designSystem.SingleSelectOption, {
-                                    value: "h1",
-                                    children: "h1"
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h2",
-                                    children: "h2"
+                                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"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h3",
-                                    children: "h3"
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.orderedList',
+                                    defaultMessage: 'Numbered list'
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            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, {
+                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,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h4",
-                                    children: "h4"
+                                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: "h5",
-                                    children: "h5"
+                                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: "h6",
-                                    children: "h6"
+                                formatMessage({
+                                    id: 'components.Blocks.popover.link',
+                                    defaultMessage: 'Link'
                                 })
                             ]
                         })
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsxs(MainButtons, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                onClick: ()=>onActionClick('Bold', editorRef),
-                                label: "Bold",
-                                name: "Bold",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
+                    /*#__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"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.quote',
+                                    defaultMessage: 'Quote'
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            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"
                             }),
-                            /*#__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.H1',
+                                defaultMessage: 'Heading 1'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h2",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingTwo, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                onClick: ()=>onActionClick('Underline', editorRef),
-                                label: "Underline",
-                                name: "Underline",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H2',
+                                defaultMessage: 'Heading 2'
                             })
-                        ]
-                    }),
-                    /*#__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, {})
-                                })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h3",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingThree, {
+                                fill: "neutral600"
                             }),
-                            /*#__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, {})
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
+                            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"
+                            }),
+                            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"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H5',
+                                defaultMessage: 'Heading 5'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h6",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingSix, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H6',
+                                defaultMessage: 'Heading 6'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__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'
-                })
             })
         ]
     });
@@ -5874,48 +6346,6 @@ 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,
@@ -5950,7 +6380,6 @@ 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
@@ -6095,6 +6524,13 @@ const MemoizedWysiwyg = /*#__PURE__*/ React__namespace.memo(Wysiwyg);
                 disabled: fieldIsDisabled
             });
         case 'relation':
+            if (window.strapi.future.isEnabled('unstableRelationsOnTheFly')) {
+                return /*#__PURE__*/ jsxRuntime.jsx(Relations.MemoizedUnstableRelationsField, {
+                    ...props,
+                    hint: hint,
+                    disabled: fieldIsDisabled
+                });
+            }
             return /*#__PURE__*/ jsxRuntime.jsx(Relations.MemoizedRelationsField, {
                 ...props,
                 hint: hint,
@@ -6207,7 +6643,7 @@ const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
     ${({ col })=>col && `grid-column: span ${col};`}
   }
 `;
-const FormLayout = ({ layout })=>{
+const FormLayout = ({ layout, hasBackground = false })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { model } = index.useDoc();
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -6240,14 +6676,13 @@ const FormLayout = ({ layout })=>{
                 }, field.name);
             }
             return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                hasRadius: true,
-                background: "neutral0",
-                shadow: "tableShadow",
-                paddingLeft: 6,
-                paddingRight: 6,
-                paddingTop: 6,
-                paddingBottom: 6,
-                borderColor: "neutral150",
+                ...!hasBackground && {
+                    padding: 6,
+                    borderColor: 'neutral150',
+                    background: 'neutral0',
+                    hasRadius: true,
+                    shadow: 'tableShadow'
+                },
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     direction: "column",
                     alignItems: "stretch",
@@ -6783,4 +7218,4 @@ exports.NotAllowedInput = NotAllowedInput;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Input-Dr7YL5Sv.js.map
+//# sourceMappingURL=Input-DLJZHw9Y.js.map