mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-10 05:29:08 +08:00
feat: add shortcuts modal
This commit is contained in:
QiShaoXuan
@@ -0,0 +1,66 @@
|
||||
export const macKeyboardShortcuts = {
|
||||
Undo: 'cmd + Z',
|
||||
Redo: 'cmd + shift + Z',
|
||||
Bold: 'cmd + B',
|
||||
Italic: 'cmd + I',
|
||||
Underline: 'cmd + U',
|
||||
Strikethrough: 'cmd + Shit + S',
|
||||
'Inline code': ' cmd + E',
|
||||
Link: 'cmd + K',
|
||||
'Body text': 'cmd + Option + 0',
|
||||
'Heading 1': 'cmd + Option + 1',
|
||||
'Heading 2': 'cmd + Option + 2',
|
||||
'Heading 3': 'cmd + Option + 3',
|
||||
'Heading 4': 'cmd + Option + 4',
|
||||
'Heading 5': 'cmd + Option + 5',
|
||||
'Heading 6': 'cmd + Option + 6',
|
||||
'Increase indent': 'Tab',
|
||||
'Reduce indent': 'Shift + Tab',
|
||||
};
|
||||
|
||||
export const macMarkdownShortcuts = {
|
||||
Bold: '**Text**',
|
||||
Italic: '*Text*',
|
||||
Underline: '~Text~',
|
||||
Strikethrough: '~~Text~~',
|
||||
'Inline code': '`Code`',
|
||||
'Heading 1': '# + Space',
|
||||
'Heading 2': '## + Space',
|
||||
'Heading 3': '### + Space',
|
||||
'Heading 4': '#### + Space',
|
||||
'Heading 5': '##### + Space',
|
||||
'Heading 6': '###### + Space',
|
||||
};
|
||||
|
||||
export const windowsKeyboardShortcuts = {
|
||||
Undo: 'Ctrl + Z',
|
||||
Redo: 'Ctrl + Y',
|
||||
Bold: 'Ctrl + B',
|
||||
Italic: 'Ctrl + I',
|
||||
Underline: 'Ctrl + U',
|
||||
Strikethrough: 'Ctrl + Shit + S',
|
||||
'Inline code': ' Ctrl + E',
|
||||
Link: 'Ctrl + K',
|
||||
'Body text': 'Ctrl + Shift + 0',
|
||||
'Heading 1': 'Ctrl + Shift + 1',
|
||||
'Heading 2': 'Ctrl + Shift + 2',
|
||||
'Heading 3': 'Ctrl + Shift + 3',
|
||||
'Heading 4': 'Ctrl + Shift + 4',
|
||||
'Heading 5': 'Ctrl + Shift + 5',
|
||||
'Heading 6': 'Ctrl + Shift + 6',
|
||||
'Increase indent': 'Tab',
|
||||
'Reduce indent': 'Shift + Tab',
|
||||
};
|
||||
export const winMarkdownShortcuts = {
|
||||
Bold: '**Text** + Space',
|
||||
Italic: '*Text* + Space',
|
||||
Underline: '~Text~ + Space',
|
||||
Strikethrough: '~~Text~~ + Space',
|
||||
'Inline code': '`Code` + Space',
|
||||
'Heading 1': '# + Space',
|
||||
'Heading 2': '## + Space',
|
||||
'Heading 3': '### + Space',
|
||||
'Heading 4': '#### + Space',
|
||||
'Heading 5': '##### + Space',
|
||||
'Heading 6': '###### + Space',
|
||||
};
|
||||
@@ -11,3 +11,17 @@ export const CloseIcon = () => {
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const KeyboardIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="15"
|
||||
viewBox="0 0 20 15"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M17.745 0C18.3417 0 18.914 0.237053 19.336 0.65901C19.7579 1.08097 19.995 1.65326 19.995 2.25V11.755C19.995 12.3517 19.7579 12.924 19.336 13.346C18.914 13.7679 18.3417 14.005 17.745 14.005H2.25C1.95453 14.005 1.66194 13.9468 1.38896 13.8337C1.11598 13.7207 0.867941 13.5549 0.65901 13.346C0.450078 13.1371 0.284344 12.889 0.171271 12.616C0.058198 12.3431 0 12.0505 0 11.755V2.25C0 1.65326 0.237053 1.08097 0.65901 0.65901C1.08097 0.237053 1.65326 0 2.25 0H17.745ZM17.745 1.5H2.25C2.05109 1.5 1.86032 1.57902 1.71967 1.71967C1.57902 1.86032 1.5 2.05109 1.5 2.25V11.755C1.5 12.169 1.836 12.505 2.25 12.505H17.745C17.9439 12.505 18.1347 12.426 18.2753 12.2853C18.416 12.1447 18.495 11.9539 18.495 11.755V2.25C18.495 2.05109 18.416 1.86032 18.2753 1.71967C18.1347 1.57902 17.9439 1.5 17.745 1.5ZM4.75 9.5H15.25C15.44 9.50006 15.6229 9.57224 15.7618 9.70197C15.9006 9.8317 15.9851 10.0093 15.998 10.1989C16.011 10.3885 15.9515 10.5759 15.8316 10.7233C15.7117 10.8707 15.5402 10.9671 15.352 10.993L15.25 11H4.75C4.55998 10.9999 4.37706 10.9278 4.23821 10.798C4.09936 10.6683 4.01493 10.4907 4.00197 10.3011C3.98902 10.1115 4.04852 9.92411 4.16843 9.7767C4.28835 9.62929 4.45975 9.5329 4.648 9.507L4.75 9.5H15.25H4.75ZM14.5 6C14.7652 6 15.0196 6.10536 15.2071 6.29289C15.3946 6.48043 15.5 6.73478 15.5 7C15.5 7.26522 15.3946 7.51957 15.2071 7.70711C15.0196 7.89464 14.7652 8 14.5 8C14.2348 8 13.9804 7.89464 13.7929 7.70711C13.6054 7.51957 13.5 7.26522 13.5 7C13.5 6.73478 13.6054 6.48043 13.7929 6.29289C13.9804 6.10536 14.2348 6 14.5 6ZM8.505 6C8.77022 6 9.02457 6.10536 9.21211 6.29289C9.39964 6.48043 9.505 6.73478 9.505 7C9.505 7.26522 9.39964 7.51957 9.21211 7.70711C9.02457 7.89464 8.77022 8 8.505 8C8.23978 8 7.98543 7.89464 7.79789 7.70711C7.61036 7.51957 7.505 7.26522 7.505 7C7.505 6.73478 7.61036 6.48043 7.79789 6.29289C7.98543 6.10536 8.23978 6 8.505 6ZM5.505 6C5.77022 6 6.02457 6.10536 6.21211 6.29289C6.39964 6.48043 6.505 6.73478 6.505 7C6.505 7.26522 6.39964 7.51957 6.21211 7.70711C6.02457 7.89464 5.77022 8 5.505 8C5.23978 8 4.98543 7.89464 4.79789 7.70711C4.61036 7.51957 4.505 7.26522 4.505 7C4.505 6.73478 4.61036 6.48043 4.79789 6.29289C4.98543 6.10536 5.23978 6 5.505 6ZM11.505 6C11.7702 6 12.0246 6.10536 12.2121 6.29289C12.3996 6.48043 12.505 6.73478 12.505 7C12.505 7.26522 12.3996 7.51957 12.2121 7.70711C12.0246 7.89464 11.7702 8 11.505 8C11.2398 8 10.9854 7.89464 10.7979 7.70711C10.6104 7.51957 10.505 7.26522 10.505 7C10.505 6.73478 10.6104 6.48043 10.7979 6.29289C10.9854 6.10536 11.2398 6 11.505 6ZM4 3C4.26522 3 4.51957 3.10536 4.70711 3.29289C4.89464 3.48043 5 3.73478 5 4C5 4.26522 4.89464 4.51957 4.70711 4.70711C4.51957 4.89464 4.26522 5 4 5C3.73478 5 3.48043 4.89464 3.29289 4.70711C3.10536 4.51957 3 4.26522 3 4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM6.995 3C7.26022 3 7.51457 3.10536 7.70211 3.29289C7.88964 3.48043 7.995 3.73478 7.995 4C7.995 4.26522 7.88964 4.51957 7.70211 4.70711C7.51457 4.89464 7.26022 5 6.995 5C6.72978 5 6.47543 4.89464 6.28789 4.70711C6.10036 4.51957 5.995 4.26522 5.995 4C5.995 3.73478 6.10036 3.48043 6.28789 3.29289C6.47543 3.10536 6.72978 3 6.995 3ZM9.995 3C10.2602 3 10.5146 3.10536 10.7021 3.29289C10.8896 3.48043 10.995 3.73478 10.995 4C10.995 4.26522 10.8896 4.51957 10.7021 4.70711C10.5146 4.89464 10.2602 5 9.995 5C9.72978 5 9.47543 4.89464 9.28789 4.70711C9.10036 4.51957 8.995 4.26522 8.995 4C8.995 3.73478 9.10036 3.48043 9.28789 3.29289C9.47543 3.10536 9.72978 3 9.995 3ZM12.995 3C13.2602 3 13.5146 3.10536 13.7021 3.29289C13.8896 3.48043 13.995 3.73478 13.995 4C13.995 4.26522 13.8896 4.51957 13.7021 4.70711C13.5146 4.89464 13.2602 5 12.995 5C12.7298 5 12.4754 4.89464 12.2879 4.70711C12.1004 4.51957 11.995 4.26522 11.995 4C11.995 3.73478 12.1004 3.48043 12.2879 3.29289C12.4754 3.10536 12.7298 3 12.995 3ZM15.995 3C16.2602 3 16.5146 3.10536 16.7021 3.29289C16.8896 3.48043 16.995 3.73478 16.995 4C16.995 4.26522 16.8896 4.51957 16.7021 4.70711C16.5146 4.89464 16.2602 5 15.995 5C15.7298 5 15.4754 4.89464 15.2879 4.70711C15.1004 4.51957 14.995 4.26522 14.995 4C14.995 3.73478 15.1004 3.48043 15.2879 3.29289C15.4754 3.10536 15.7298 3 15.995 3Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,19 +1,78 @@
|
||||
import { styled } from '@/styles';
|
||||
import Fade from '@mui/material/Fade';
|
||||
|
||||
|
||||
const StyledModal = styled('div')(({ theme }) => {
|
||||
return {
|
||||
color: theme.colors.textColor,
|
||||
};
|
||||
});
|
||||
|
||||
type TransitionsModalProps = {
|
||||
import { createPortal } from 'react-dom';
|
||||
import { KeyboardIcon } from './icons';
|
||||
import {
|
||||
StyledListItem,
|
||||
StyledModalHeader,
|
||||
StyledShortcutsModal,
|
||||
StyledSubTitle,
|
||||
StyledTitle,
|
||||
CloseButton,
|
||||
} from './style';
|
||||
import {
|
||||
macKeyboardShortcuts,
|
||||
macMarkdownShortcuts,
|
||||
windowsKeyboardShortcuts,
|
||||
winMarkdownShortcuts,
|
||||
} from '@/components/shortcuts-modal/config';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Slide from '@mui/material/Slide';
|
||||
type ModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
children: JSX.Element;
|
||||
};
|
||||
|
||||
export const ShortcutsModal = (props: TransitionsModalProps) => {
|
||||
return <div>111</div>;
|
||||
const isMac = () => {
|
||||
return /macintosh|mac os x/i.test(navigator.userAgent);
|
||||
};
|
||||
|
||||
export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
|
||||
const markdownShortcuts = isMac()
|
||||
? macMarkdownShortcuts
|
||||
: winMarkdownShortcuts;
|
||||
const keyboardShortcuts = isMac()
|
||||
? macKeyboardShortcuts
|
||||
: windowsKeyboardShortcuts;
|
||||
return createPortal(
|
||||
<Slide direction="left" in={open} mountOnEnter unmountOnExit>
|
||||
<StyledShortcutsModal>
|
||||
<>
|
||||
<StyledModalHeader>
|
||||
<StyledTitle>
|
||||
<KeyboardIcon />
|
||||
Shortcuts
|
||||
</StyledTitle>
|
||||
|
||||
<CloseButton
|
||||
onClick={() => {
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</CloseButton>
|
||||
</StyledModalHeader>
|
||||
<StyledSubTitle>Keyboard shortcuts</StyledSubTitle>
|
||||
{Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
|
||||
return (
|
||||
<StyledListItem key={title}>
|
||||
<span>{title}</span>
|
||||
<span>{shortcuts}</span>
|
||||
</StyledListItem>
|
||||
);
|
||||
})}
|
||||
<StyledSubTitle>Markdown shortcuts</StyledSubTitle>
|
||||
{Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
|
||||
return (
|
||||
<StyledListItem key={title}>
|
||||
<span>{title}</span>
|
||||
<span>{shortcuts}</span>
|
||||
</StyledListItem>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
</StyledShortcutsModal>
|
||||
</Slide>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
|
||||
export default ShortcutsModal;
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { styled } from '@/styles';
|
||||
|
||||
export const StyledShortcutsModal = styled.div(({ theme }) => ({
|
||||
width: '268px',
|
||||
height: '66vh',
|
||||
backgroundColor: theme.colors.popoverBackground,
|
||||
boxShadow: theme.shadow.popover,
|
||||
color: theme.colors.popoverColor,
|
||||
padding: '8px 16px',
|
||||
overflow: 'auto',
|
||||
boxRadius: '10px',
|
||||
position: 'fixed',
|
||||
right: '12px',
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
margin: 'auto',
|
||||
zIndex: theme.zIndex.modal,
|
||||
}));
|
||||
export const StyledTitle = styled.div(({ theme }) => ({
|
||||
color: theme.colors.textColor,
|
||||
fontWeight: '600',
|
||||
fontSize: theme.font.sm,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
svg: {
|
||||
width: '20px',
|
||||
marginRight: '14px',
|
||||
color: theme.colors.primaryColor,
|
||||
},
|
||||
}));
|
||||
export const StyledSubTitle = styled.div(({ theme }) => ({
|
||||
color: theme.colors.textColor,
|
||||
fontWeight: '500',
|
||||
fontSize: '12px',
|
||||
height: '36px',
|
||||
lineHeight: '36px',
|
||||
}));
|
||||
export const StyledModalHeader = styled.div(({ theme }) => ({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
height: '36px',
|
||||
}));
|
||||
|
||||
export const StyledListItem = styled.div(({ theme }) => ({
|
||||
height: '32px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: theme.font.xs,
|
||||
}));
|
||||
|
||||
export const CloseButton = styled('div')(({ theme }) => {
|
||||
return {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '5px',
|
||||
color: theme.colors.iconColor,
|
||||
cursor: 'pointer',
|
||||
':hover': {
|
||||
background: theme.colors.hoverBackground,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user