Some UI fix for the WYSIWYG

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

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

@@ -25,9 +25,8 @@ const Editor = ({
       lineWrapping: true,
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
-        // Leaving this commented for now
+        Tab: false,
-        // Tab: false,
+        'Shift-Tab': false,
-        // 'Shift-Tab': false,
       },
       readOnly: false,
       smartIndent: false,

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

@@ -68,6 +68,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
             bottom={0}
             zIndex={4}
             justifyContent="center"
+            onClick={onCollapse}
           >
             <Box
               id="wysiwyg-expand"
@@ -77,6 +78,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
               overflow="hidden"
               width="70%"
               height="70%"
+              onClick={e => e.stopPropagation()}
             >
               <Flex height="100%" alignItems="flex-start">
                 <BoxWithBorder flex="1" height="100%">

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

@@ -7,13 +7,13 @@ import { Typography } from '@strapi/design-system/Typography';
 import Expand from '@strapi/icons/Expand';
 import { ExpandButton } from './WysiwygStyles';
 
-const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
+const WysiwygFooter = ({ onToggleExpand }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Box padding={2} background="neutral100" hasRadius>
       <Flex justifyContent="flex-end" alignItems="flex-end">
-        <ExpandButton id="expand" disabled={isPreviewMode} onClick={onToggleExpand}>
+        <ExpandButton id="expand" onClick={onToggleExpand}>
           <Typography>
             {formatMessage({
               id: 'components.WysiwygBottomControls.fullscreen',
@@ -29,12 +29,10 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
 
 WysiwygFooter.defaultProps = {
   onToggleExpand: () => {},
-  isPreviewMode: false,
 };
 
 WysiwygFooter.propTypes = {
   onToggleExpand: PropTypes.func,
-  isPreviewMode: PropTypes.bool,
 };
 
 export default WysiwygFooter;

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { IconButtonGroup } from '@strapi/design-system/IconButton';
@@ -41,7 +42,9 @@ const WysiwygNav = ({
   });
   const buttonMoreRef = useRef();
 
-  const handleTogglePopover = () => setVisiblePopover(prev => !prev);
+  const handleTogglePopover = () => {
+    setVisiblePopover(prev => !prev);
+  };
 
   if (isPreviewMode) {
     return (
@@ -81,10 +84,10 @@ const WysiwygNav = ({
               />
             </MainButtons>
 
-            <MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} />
+            <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
-          <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
+          <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
             {formatMessage({
               id: 'components.Wysiwyg.ToggleMode.markdown-mode',
               defaultMessage: 'Markdown mode',
@@ -146,6 +149,7 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
+              <FocusTrap onEscape={handleTogglePopover}>
                 <Flex>
                   <IconButtonGroupMargin>
                     <CustomIconButton
@@ -205,6 +209,7 @@ const WysiwygNav = ({
                     />
                   </IconButtonGroup>
                 </Flex>
+              </FocusTrap>
             </Popover>
           )}
         </Flex>

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

@@ -54,7 +54,10 @@ const Wysiwyg = ({
 
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
   const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
-  const handleToggleExpand = () => setIsExpandMode(prev => !prev);
+  const handleToggleExpand = () => {
+    setIsPreviewMode(false);
+    setIsExpandMode(prev => !prev);
+  };
 
   const handleActionClick = (value, currentEditorRef, togglePopover) => {
     switch (value) {
@@ -160,9 +163,7 @@ const Wysiwyg = ({
             value={value}
           />
 
-          {!isExpandMode && (
+          {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
-            <WysiwygFooter isPreviewMode={isPreviewMode} onToggleExpand={handleToggleExpand} />
-          )}
         </EditorLayout>
         <Hint description={description} name={name} error={error} />
       </Stack>