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:
parent
54f993f327
commit
73d4b15040
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
32
yarn.lock
32
yarn.lock
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user