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,70 +139,68 @@ const WysiwygNav = ({
             icon={<More />}
           />
           {visiblePopover && (
-            <Popover centered source={buttonMoreRef} spacingTop={1} id="popover">
-              <FocusTrap onEscape={handleEscapeMore} restoreFocus={false}>
-                <Row>
-                  <IconButtonGroupMargin>
-                    <CustomIconButton
-                      onClick={() => onActionClick('Strikethrough', editorRef, onTogglePopover)}
-                      id="Strikethrough"
-                      label="Strikethrough"
-                      name="Strikethrough"
-                      icon={<Strikethrough />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('BulletList', editorRef, onTogglePopover)}
-                      id="BulletList"
-                      label="BulletList"
-                      name="BulletList"
-                      icon={<BulletList />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('NumberList', editorRef, onTogglePopover)}
-                      id="NumberList"
-                      label="NumberList"
-                      name="NumberList"
-                      icon={<NumberList />}
-                    />
-                  </IconButtonGroupMargin>
-                  <IconButtonGroup>
-                    <CustomIconButton
-                      onClick={() => onActionClick('Code', editorRef, onTogglePopover)}
-                      id="Code"
-                      label="Code"
-                      name="Code"
-                      icon={<Code />}
-                    />
-                    <CustomIconButton
-                      onClick={onToggleMediaLib}
-                      id="Image"
-                      label="Image"
-                      name="Image"
-                      icon={<Image />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('Link', editorRef, onTogglePopover)}
-                      id="Link"
-                      label="Link"
-                      name="Link"
-                      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                      icon={<Link />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('Quote', editorRef, onTogglePopover)}
-                      id="Quote"
-                      label="Quote"
-                      name="Quote"
-                      icon={<Quote />}
-                    />
-                  </IconButtonGroup>
-                </Row>
-              </FocusTrap>
+            <Popover centered source={buttonMoreRef} spacing={4} id="popover">
+              <Row>
+                <IconButtonGroupMargin>
+                  <CustomIconButton
+                    onClick={() => onActionClick('Strikethrough', editorRef, onTogglePopover)}
+                    id="Strikethrough"
+                    label="Strikethrough"
+                    name="Strikethrough"
+                    icon={<Strikethrough />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('BulletList', editorRef, onTogglePopover)}
+                    id="BulletList"
+                    label="BulletList"
+                    name="BulletList"
+                    icon={<BulletList />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('NumberList', editorRef, onTogglePopover)}
+                    id="NumberList"
+                    label="NumberList"
+                    name="NumberList"
+                    icon={<NumberList />}
+                  />
+                </IconButtonGroupMargin>
+                <IconButtonGroup>
+                  <CustomIconButton
+                    onClick={() => onActionClick('Code', editorRef, onTogglePopover)}
+                    id="Code"
+                    label="Code"
+                    name="Code"
+                    icon={<Code />}
+                  />
+                  <CustomIconButton
+                    onClick={onToggleMediaLib}
+                    id="Image"
+                    label="Image"
+                    name="Image"
+                    icon={<Image />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('Link', editorRef, onTogglePopover)}
+                    id="Link"
+                    label="Link"
+                    name="Link"
+                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                    icon={<Link />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('Quote', editorRef, onTogglePopover)}
+                    id="Quote"
+                    label="Quote"
+                    name="Quote"
+                    icon={<Quote />}
+                  />
+                </IconButtonGroup>
+              </Row>
             </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}