From 73d4b15040faf0b7f16f8d859964b55e1de7db3f Mon Sep 17 00:00:00 2001 From: Neal <543741870@qq.com> Date: Mon, 25 Jul 2022 09:24:34 +0800 Subject: [PATCH] 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 --- packages/core/client/package.json | 1 + .../src/plugin-manager/PluginManager.tsx | 24 ++++++++++++-- .../core/DesignableSwitch.tsx | 6 ++++ yarn.lock | 32 +++++++++++++++++-- 4 files changed, 58 insertions(+), 5 deletions(-) diff --git a/packages/core/client/package.json b/packages/core/client/package.json index a69b9d686..3ee85dc30 100644 --- a/packages/core/client/package.json +++ b/packages/core/client/package.json @@ -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", diff --git a/packages/core/client/src/plugin-manager/PluginManager.tsx b/packages/core/client/src/plugin-manager/PluginManager.tsx index 916647e7e..aad505828 100644 --- a/packages/core/client/src/plugin-manager/PluginManager.tsx +++ b/packages/core/client/src/plugin-manager/PluginManager.tsx @@ -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 & { - Item?: React.FC; + Item?: React.FC; }; }; @@ -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 && ( +
{subtitle}
+ ) + + const titleComponent = ( +
+
{title}
+ {subtitleComponent} +
+ ) + return ( - + {icon} diff --git a/packages/core/client/src/schema-component/core/DesignableSwitch.tsx b/packages/core/client/src/schema-component/core/DesignableSwitch.tsx index 60f996f05..ccc62c061 100644 --- a/packages/core/client/src/schema-component/core/DesignableSwitch.tsx +++ b/packages/core/client/src/schema-component/core/DesignableSwitch.tsx @@ -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 ( } title={t('UI Editor')} + subtitle={'Ctrl+Shift+U'} style={style} onClick={() => { setDesignable(!designable); diff --git a/yarn.lock b/yarn.lock index 6ed3d9d5f..af02acc29 100644 --- a/yarn.lock +++ b/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"