yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-23 15:29:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11084 from strapi/wysiwyg-fix

Browse Source 
MigrationQA / Wysiwyg issues
This commit is contained in:
cyril lopez 2021-09-28 05:24:17 +02:00 committed by GitHub
commit fdc1cd9572
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -6,7 +6,6 @@ import { Button } from '@strapi/parts/Button';
import { IconButtonGroup } from '@strapi/parts/IconButton'; import { IconButtonGroup } from '@strapi/parts/IconButton';
import { Option, Select } from '@strapi/parts/Select'; import { Option, Select } from '@strapi/parts/Select';
import { Popover } from '@strapi/parts/Popover'; import { Popover } from '@strapi/parts/Popover';
import { FocusTrap } from '@strapi/parts/FocusTrap';
import { Row } from '@strapi/parts/Row'; import { Row } from '@strapi/parts/Row';
import Bold from '@strapi/icons/Bold'; import Bold from '@strapi/icons/Bold';
import Italic from '@strapi/icons/Italic'; import Italic from '@strapi/icons/Italic';
@ -28,6 +27,7 @@ const WysiwygNav = ({
onToggleMediaLib, onToggleMediaLib,
onTogglePopover, onTogglePopover,
onTogglePreviewMode, onTogglePreviewMode,
noPreviewMode,
visiblePopover, visiblePopover,
}) => { }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@ -36,10 +36,6 @@ const WysiwygNav = ({
defaultMessage: 'Add a title', defaultMessage: 'Add a title',
}); });
const buttonMoreRef = useRef(); const buttonMoreRef = useRef();
const handleEscapeMore = () => {
onTogglePopover();
buttonMoreRef.current.focus();
};
if (isPreviewMode) { if (isPreviewMode) {
return ( return (
@ -143,70 +139,68 @@ const WysiwygNav = ({
icon={<More />} icon={<More />}
/> />
{visiblePopover && ( {visiblePopover && (
<Popover centered source={buttonMoreRef} spacingTop={1} id="popover"> <Popover centered source={buttonMoreRef} spacing={4} id="popover">
<FocusTrap onEscape={handleEscapeMore} restoreFocus={false}> <Row>
<Row> <IconButtonGroupMargin>
<IconButtonGroupMargin> <CustomIconButton
<CustomIconButton onClick={() => onActionClick('Strikethrough', editorRef, onTogglePopover)}
onClick={() => onActionClick('Strikethrough', editorRef, onTogglePopover)} id="Strikethrough"
id="Strikethrough" label="Strikethrough"
label="Strikethrough" name="Strikethrough"
name="Strikethrough" icon={<Strikethrough />}
icon={<Strikethrough />} />
/> <CustomIconButton
<CustomIconButton onClick={() => onActionClick('BulletList', editorRef, onTogglePopover)}
onClick={() => onActionClick('BulletList', editorRef, onTogglePopover)} id="BulletList"
id="BulletList" label="BulletList"
label="BulletList" name="BulletList"
name="BulletList" icon={<BulletList />}
icon={<BulletList />} />
/> <CustomIconButton
<CustomIconButton onClick={() => onActionClick('NumberList', editorRef, onTogglePopover)}
onClick={() => onActionClick('NumberList', editorRef, onTogglePopover)} id="NumberList"
id="NumberList" label="NumberList"
label="NumberList" name="NumberList"
name="NumberList" icon={<NumberList />}
icon={<NumberList />} />
/> </IconButtonGroupMargin>
</IconButtonGroupMargin> <IconButtonGroup>
<IconButtonGroup> <CustomIconButton
<CustomIconButton onClick={() => onActionClick('Code', editorRef, onTogglePopover)}
onClick={() => onActionClick('Code', editorRef, onTogglePopover)} id="Code"
id="Code" label="Code"
label="Code" name="Code"
name="Code" icon={<Code />}
icon={<Code />} />
/> <CustomIconButton
<CustomIconButton onClick={onToggleMediaLib}
onClick={onToggleMediaLib} id="Image"
id="Image" label="Image"
label="Image" name="Image"
name="Image" icon={<Image />}
icon={<Image />} />
/> <CustomIconButton
<CustomIconButton onClick={() => onActionClick('Link', editorRef, onTogglePopover)}
onClick={() => onActionClick('Link', editorRef, onTogglePopover)} id="Link"
id="Link" label="Link"
label="Link" name="Link"
name="Link" // eslint-disable-next-line jsx-a11y/anchor-is-valid
// eslint-disable-next-line jsx-a11y/anchor-is-valid icon={<Link />}
icon={<Link />} />
/> <CustomIconButton
<CustomIconButton onClick={() => onActionClick('Quote', editorRef, onTogglePopover)}
onClick={() => onActionClick('Quote', editorRef, onTogglePopover)} id="Quote"
id="Quote" label="Quote"
label="Quote" name="Quote"
name="Quote" icon={<Quote />}
icon={<Quote />} />
/> </IconButtonGroup>
</IconButtonGroup> </Row>
</Row>
</FocusTrap>
</Popover> </Popover>
)} )}
</Row> </Row>
{onTogglePreviewMode && ( {!noPreviewMode && onTogglePreviewMode && (
<Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview"> <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
{formatMessage({ {formatMessage({
id: 'components.Wysiwyg.ToggleMode.preview-mode', id: 'components.Wysiwyg.ToggleMode.preview-mode',
@ -225,6 +219,7 @@ WysiwygNav.defaultProps = {
onToggleMediaLib: () => {}, onToggleMediaLib: () => {},
onTogglePopover: () => {}, onTogglePopover: () => {},
onTogglePreviewMode: () => {}, onTogglePreviewMode: () => {},
noPreviewMode: false,
visiblePopover: false, visiblePopover: false,
}; };
@ -236,6 +231,7 @@ WysiwygNav.propTypes = {
onTogglePopover: PropTypes.func, onTogglePopover: PropTypes.func,
onTogglePreviewMode: PropTypes.func, onTogglePreviewMode: PropTypes.func,
visiblePopover: PropTypes.bool, visiblePopover: PropTypes.bool,
noPreviewMode: PropTypes.bool,
}; };
export default WysiwygNav; export default WysiwygNav;

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

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

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

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