feat: add editor hot key Ctrl+Shift+U (#675)

* feat: menu tooltip add subtitle

* feat: add editor hot key ctrl+shift+E

* feat: add editor hot key ctrl+shift+E

* feat: add editor hot key ctrl+shift+E

* feat: add editor hot key ctrl+shift+E

* feat: add editor hot key Ctrl+E+D

* feat: add editor hot key Ctrl+Shift+U

Co-authored-by: yangpeng <oncwnuFixr6B9ykxIme1UJHE_1U8@git.weixin.qq.com>
This commit is contained in:
Neal 2022-07-25 09:24:34 +08:00 committed by GitHub
parent 54f993f327
commit 73d4b15040
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 5 deletions

View File

@ -35,6 +35,7 @@
"react-contenteditable": "^3.3.6",
"react-drag-listview": "^0.1.9",
"react-helmet": "^6.1.0",
"react-hotkeys-hook": "^3.4.7",
"react-i18next": "^11.15.1",
"react-image-lightbox": "^5.1.4",
"react-quill": "^1.3.5",

View File

@ -1,4 +1,5 @@
import { AppstoreOutlined, EllipsisOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import { ConfigProvider, Menu, MenuItemProps, Spin, Tooltip } from 'antd';
import cls from 'classnames';
import { get } from 'lodash';
@ -19,7 +20,7 @@ export const usePrefixCls = (
type PluginManagerType = {
Toolbar?: React.FC<ToolbarProps> & {
Item?: React.FC<MenuItemProps & { selected?: boolean }>;
Item?: React.FC<MenuItemProps & { selected?: boolean, subtitle?: string }>;
};
};
@ -92,12 +93,29 @@ PluginManager.Toolbar = (props: ToolbarProps) => {
PluginManager.Toolbar.Item = (props) => {
const item = useContext(ToolbarItemContext);
const { selected, icon, title, ...others } = props;
const { selected, icon, title, subtitle, ...others } = props;
const prefix = usePrefixCls();
const className = cls({ [`${prefix}-menu-item-selected`]: selected });
if (item.pin) {
const subtitleComponent = subtitle && (
<div
className={css`
font-size: 12px;
color: #999;
`}
>{subtitle}</div>
)
const titleComponent = (
<div>
<div>{title}</div>
{subtitleComponent}
</div>
)
return (
<Tooltip title={title}>
<Tooltip title={titleComponent}>
<Menu.Item {...others} className={className} eventKey={item.component}>
{icon}
</Menu.Item>

View File

@ -3,6 +3,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDesignable } from '..';
import { PluginManager } from '../../plugin-manager';
import { useHotkeys } from 'react-hotkeys-hook'
export const DesignableSwitch = () => {
const { designable, setDesignable } = useDesignable();
@ -11,11 +12,16 @@ export const DesignableSwitch = () => {
if (designable) {
style['backgroundColor'] = '#f18b62';
}
// 快捷键切换编辑状态
useHotkeys('Ctrl+Shift+U', () => setDesignable(!designable), [designable])
return (
<PluginManager.Toolbar.Item
selected={designable}
icon={<HighlightOutlined />}
title={t('UI Editor')}
subtitle={'Ctrl+Shift+U'}
style={style}
onClick={() => {
setDesignable(!designable);

View File

@ -5230,7 +5230,14 @@
resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
"@types/react-dom@^16.9.8", "@types/react-dom@^17.0.0":
"@types/react-dom@^16.9.8":
version "16.9.16"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.16.tgz#c591f2ed1c6f32e9759dfa6eb4abfd8041f29e39"
integrity sha512-Oqc0RY4fggGA3ltEgyPLc3IV9T73IGoWjkONbsyJ3ZBn+UPPCYpU2ec0i3cEbJuEdZtkqcCF2l1zf2pBdgUGSg==
dependencies:
"@types/react" "^16"
"@types/react-dom@^17.0.0":
version "17.0.11"
resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
@ -5290,7 +5297,7 @@
"@types/history" "*"
"@types/react" "*"
"@types/react@*", "@types/react@>=16.9.11", "@types/react@^16.9.43", "@types/react@^17.0.0":
"@types/react@*", "@types/react@>=16.9.11", "@types/react@^17.0.0":
version "17.0.34"
resolved "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102"
integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==
@ -5299,6 +5306,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@^16", "@types/react@^16.9.43":
version "16.14.28"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.28.tgz#073258f3fe7bb80c748842c1f93aeaafe16dffad"
integrity sha512-83zBE6+XUVXsdL3iFzOyUewdauaU+KviKCHEGOgSW52coAuqW7tEKQM0E9+ZC0Zk6TELQ2/JgogPvp7FavzFwg==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/resolve@1.17.1":
version "1.17.1"
resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@ -11726,6 +11742,11 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
dependencies:
lru-cache "^6.0.0"
hotkeys-js@3.9.4:
version "3.9.4"
resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.9.4.tgz#ce1aa4c3a132b6a63a9dd5644fc92b8a9b9cbfb9"
integrity sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==
hsl-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
@ -18794,6 +18815,13 @@ react-helmet@^6.1.0:
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-hotkeys-hook@^3.4.7:
version "3.4.7"
resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz#e16a0a85f59feed9f48d12cfaf166d7df4c96b7a"
integrity sha512-+bbPmhPAl6ns9VkXkNNyxlmCAIyDAcWbB76O4I0ntr3uWCRuIQf/aRLartUahe9chVMPj+OEzzfk3CQSjclUEQ==
dependencies:
hotkeys-js "3.9.4"
react-i18next@^11.15.1:
version "11.15.1"
resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.1.tgz#1dec5f2bf2cf7bc5043e9fcb391c9d6e24bb9bfe"