yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-07 16:29:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some UI fix for the WYSIWYG

Browse Source 
Signed-off-by: HichamELBSI <elabbassih@gmail.com>
This commit is contained in:
HichamELBSI 2022-01-10 12:42:37 +01:00
parent a666e0a4b4
commit 54c80d9a87
5 changed files with 78 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

@ -1,6 +1,7 @@
import React, { useRef, useState } from 'react'; import React, { useRef, useState } 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/design-system/FocusTrap';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import { IconButtonGroup } from '@strapi/design-system/IconButton'; import { IconButtonGroup } from '@strapi/design-system/IconButton';
@ -41,7 +42,9 @@ const WysiwygNav = ({
}); });
const buttonMoreRef = useRef(); const buttonMoreRef = useRef();
const handleTogglePopover = () => setVisiblePopover(prev => !prev); const handleTogglePopover = () => {
setVisiblePopover(prev => !prev);
};
if (isPreviewMode) { if (isPreviewMode) {
return ( return (
@ -81,10 +84,10 @@ const WysiwygNav = ({
/> />
</MainButtons> </MainButtons>
<MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} /> <MoreButton disabled id="more" label="More" icon={<More />} />
</Flex> </Flex>
<Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview"> <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
{formatMessage({ {formatMessage({
id: 'components.Wysiwyg.ToggleMode.markdown-mode', id: 'components.Wysiwyg.ToggleMode.markdown-mode',
defaultMessage: 'Markdown mode', defaultMessage: 'Markdown mode',
@ -146,65 +149,67 @@ const WysiwygNav = ({
/> />
{visiblePopover && ( {visiblePopover && (
<Popover centered source={buttonMoreRef} spacing={4} id="popover"> <Popover centered source={buttonMoreRef} spacing={4} id="popover">
<Flex> <FocusTrap onEscape={handleTogglePopover}>
<IconButtonGroupMargin> <Flex>
<CustomIconButton <IconButtonGroupMargin>
onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)} <CustomIconButton
id="Strikethrough" onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
label="Strikethrough" id="Strikethrough"
name="Strikethrough" label="Strikethrough"
icon={<Strikethrough />} name="Strikethrough"
/> icon={<Strikethrough />}
<CustomIconButton />
onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)} <CustomIconButton
id="BulletList" onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
label="BulletList" id="BulletList"
name="BulletList" label="BulletList"
icon={<BulletList />} name="BulletList"
/> icon={<BulletList />}
<CustomIconButton />
onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)} <CustomIconButton
id="NumberList" onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
label="NumberList" id="NumberList"
name="NumberList" label="NumberList"
icon={<NumberList />} name="NumberList"
/> icon={<NumberList />}
</IconButtonGroupMargin> />
<IconButtonGroup> </IconButtonGroupMargin>
<CustomIconButton <IconButtonGroup>
onClick={() => onActionClick('Code', editorRef, handleTogglePopover)} <CustomIconButton
id="Code" onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
label="Code" id="Code"
name="Code" label="Code"
icon={<Code />} name="Code"
/> icon={<Code />}
<CustomIconButton />
onClick={() => { <CustomIconButton
handleTogglePopover(); onClick={() => {
onToggleMediaLib(); handleTogglePopover();
}} onToggleMediaLib();
id="Image" }}
label="Image" id="Image"
name="Image" label="Image"
icon={<Image />} name="Image"
/> icon={<Image />}
<CustomLinkIconButton />
onClick={() => onActionClick('Link', editorRef, handleTogglePopover)} <CustomLinkIconButton
id="Link" onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
label="Link" id="Link"
name="Link" label="Link"
// eslint-disable-next-line jsx-a11y/anchor-is-valid name="Link"
icon={<Link />} // eslint-disable-next-line jsx-a11y/anchor-is-valid
/> icon={<Link />}
<CustomIconButton />
onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)} <CustomIconButton
id="Quote" onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
label="Quote" id="Quote"
name="Quote" label="Quote"
icon={<Quote />} name="Quote"
/> icon={<Quote />}
</IconButtonGroup> />
</Flex> </IconButtonGroup>
</Flex>
</FocusTrap>
</Popover> </Popover>
)} )}
</Flex> </Flex>

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

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