Merge pull request #11084 from strapi/wysiwyg-fix

MigrationQA / Wysiwyg issues

packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -9,6 +9,7 @@ const Wrapper = styled.div`
   padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
   font-size: ${14 / 16}rem;
   background-color: ${({ theme }) => theme.colors.neutral0};
+  z-index: 2;
   cursor: not-allowed;
   color: ${({ theme }) => theme.colors.neutral800};
 

packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygExpand.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { FocusTrap } from '@strapi/parts/FocusTrap';
@@ -36,6 +36,15 @@ const WysiwygExpand = ({
   const [visiblePopover, setVisiblePopover] = useState(false);
   const [mediaLibVisible, setMediaLibVisible] = useState(false);
 
+  useEffect(() => {
+    const body = document.body;
+    body.classList.add('lock-body-scroll');
+
+    return () => {
+      body.classList.remove('lock-body-scroll');
+    };
+  }, []);
+
   const handleTogglePopover = () => setVisiblePopover(prev => !prev);
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
 
@@ -47,6 +56,7 @@ const WysiwygExpand = ({
             <ExpandContainer background="neutral0" hasRadius shadow="popupShadow">
               <WysiwygContainer>
                 <WysiwygNav
+                  noPreviewMode
                   editorRef={editorRef}
                   onActionClick={onActionClick}
                   onToggleMediaLib={handleToggleMediaLib}

packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -6,7 +6,6 @@ import { Button } from '@strapi/parts/Button';
 import { IconButtonGroup } from '@strapi/parts/IconButton';
 import { Option, Select } from '@strapi/parts/Select';
 import { Popover } from '@strapi/parts/Popover';
-import { FocusTrap } from '@strapi/parts/FocusTrap';
 import { Row } from '@strapi/parts/Row';
 import Bold from '@strapi/icons/Bold';
 import Italic from '@strapi/icons/Italic';
@@ -28,6 +27,7 @@ const WysiwygNav = ({
   onToggleMediaLib,
   onTogglePopover,
   onTogglePreviewMode,
+  noPreviewMode,
   visiblePopover,
 }) => {
   const { formatMessage } = useIntl();
@@ -36,10 +36,6 @@ const WysiwygNav = ({
     defaultMessage: 'Add a title',
   });
   const buttonMoreRef = useRef();
-  const handleEscapeMore = () => {
-    onTogglePopover();
-    buttonMoreRef.current.focus();
-  };
 
   if (isPreviewMode) {
     return (
@@ -143,8 +139,7 @@ const WysiwygNav = ({
             icon={<More />}
           />
           {visiblePopover && (
-            <Popover centered source={buttonMoreRef} spacingTop={1} id="popover">
+            <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <FocusTrap onEscape={handleEscapeMore} restoreFocus={false}>
               <Row>
                 <IconButtonGroupMargin>
                   <CustomIconButton
@@ -201,12 +196,11 @@ const WysiwygNav = ({
                   />
                 </IconButtonGroup>
               </Row>
-              </FocusTrap>
             </Popover>
           )}
         </Row>
 
-        {onTogglePreviewMode && (
+        {!noPreviewMode && onTogglePreviewMode && (
           <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
             {formatMessage({
               id: 'components.Wysiwyg.ToggleMode.preview-mode',
@@ -225,6 +219,7 @@ WysiwygNav.defaultProps = {
   onToggleMediaLib: () => {},
   onTogglePopover: () => {},
   onTogglePreviewMode: () => {},
+  noPreviewMode: false,
   visiblePopover: false,
 };
 
@@ -236,6 +231,7 @@ WysiwygNav.propTypes = {
   onTogglePopover: PropTypes.func,
   onTogglePreviewMode: PropTypes.func,
   visiblePopover: PropTypes.bool,
+  noPreviewMode: PropTypes.bool,
 };
 
 export default WysiwygNav;

packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js

@@ -73,7 +73,7 @@ const setOpacity = (hex, alpha) =>
 
 export const ExpandWrapper = styled.div`
   position: absolute;
-  z-index: 2;
+  z-index: 4;
   inset: 0;
   background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
   padding: 0 ${({ theme }) => theme.spaces[8]};

packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js

@@ -129,7 +129,7 @@ const Wysiwyg = ({
         <ButtonText>{label}</ButtonText>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
       </Row>
-      <WysiwygWrapper paddingTop={1} hasRadius error={error}>
+      <WysiwygWrapper hasRadius error={error}>
         <WysiwygNav
           editorRef={editorRef}
           isPreviewMode={isPreviewMode}