From ed437efcd24a85dbe648cdccdadb55c1d9418e82 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 24 Dec 2019 11:25:41 +0100 Subject: [PATCH] Refactor edit post shortcuts to use the keyboard-shortcuts package --- .../data/data-core-keyboard-shortcuts.md | 14 +++ package-lock.json | 1 + .../components/block-settings-menu/index.js | 28 ++--- packages/edit-post/package.json | 1 + .../edit-post/src/components/header/index.js | 54 ++++----- .../components/header/mode-switcher/index.js | 44 +++---- .../keyboard-shortcut-help-modal/config.js | 13 +- .../components/keyboard-shortcuts/index.js | 114 +++++++++--------- .../sidebar/sidebar-header/index.js | 29 ++--- .../visual-editor/block-inspector-button.js | 42 +++---- packages/edit-post/src/index.js | 1 + packages/edit-post/src/keyboard-shortcuts.js | 16 --- .../keyboard-shortcuts/src/store/selectors.js | 31 +++++ 13 files changed, 192 insertions(+), 196 deletions(-) delete mode 100644 packages/edit-post/src/keyboard-shortcuts.js diff --git a/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md b/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md index 76d694cc5a415..fd1f49576a622 100644 --- a/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md +++ b/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md @@ -45,6 +45,20 @@ _Returns_ - `?WPShortcutKeyCombination`: Key combination. +# **getShortcutRepresentation** + +Returns a string representing the main key combination for a given shortcut name. + +_Parameters_ + +- _state_ `Object`: Global state. +- _name_ `string`: Shortcut name. +- _representation_ `string`: Type of reprensentation. (display, raw, ariaLabel ) + +_Returns_ + +- `string`: Shortcut representation. + diff --git a/package-lock.json b/package-lock.json index 0c7e5790f2bb6..6d1425443f251 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7884,6 +7884,7 @@ "@wordpress/element": "file:packages/element", "@wordpress/hooks": "file:packages/hooks", "@wordpress/i18n": "file:packages/i18n", + "@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/media-utils": "file:packages/media-utils", "@wordpress/notices": "file:packages/notices", diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index 1f15f301510f2..7a2fd7a8c7e1b 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -14,7 +14,6 @@ import { MenuItem, } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; -import { displayShortcut } from '@wordpress/keycodes'; /** * Internal dependencies @@ -37,24 +36,15 @@ export function BlockSettingsMenu( { clientIds } ) { const firstBlockClientId = blockClientIds[ 0 ]; const shortcuts = useSelect( ( select ) => { - const { getShortcutKeyCombination } = select( 'core/keyboard-shortcuts' ); + const { getShortcutRepresentation } = select( 'core/keyboard-shortcuts' ); return { - duplicate: getShortcutKeyCombination( 'core/block-editor/duplicate' ), - remove: getShortcutKeyCombination( 'core/block-editor/remove' ), - insertAfter: getShortcutKeyCombination( 'core/block-editor/insert-after' ), - insertBefore: getShortcutKeyCombination( 'core/block-editor/insert-before' ), + duplicate: getShortcutRepresentation( 'core/block-editor/duplicate' ), + remove: getShortcutRepresentation( 'core/block-editor/remove' ), + insertAfter: getShortcutRepresentation( 'core/block-editor/insert-after' ), + insertBefore: getShortcutRepresentation( 'core/block-editor/insert-before' ), }; }, [] ); - const getShortcutDisplay = ( shortcut ) => { - if ( ! shortcut ) { - return null; - } - return shortcut.modifier ? - displayShortcut[ shortcut.modifier ]( shortcut.character ) : - shortcut.character; - }; - return ( { ( { @@ -94,7 +84,7 @@ export function BlockSettingsMenu( { clientIds } ) { className="block-editor-block-settings-menu__control" onClick={ flow( onClose, onDuplicate ) } icon="admin-page" - shortcut={ getShortcutDisplay( shortcuts.duplicate ) } + shortcut={ shortcuts.duplicate } > { __( 'Duplicate' ) } @@ -105,7 +95,7 @@ export function BlockSettingsMenu( { clientIds } ) { className="block-editor-block-settings-menu__control" onClick={ flow( onClose, onInsertBefore ) } icon="insert-before" - shortcut={ getShortcutDisplay( shortcuts.insertBefore ) } + shortcut={ shortcuts.insertBefore } > { __( 'Insert Before' ) } @@ -113,7 +103,7 @@ export function BlockSettingsMenu( { clientIds } ) { className="block-editor-block-settings-menu__control" onClick={ flow( onClose, onInsertAfter ) } icon="insert-after" - shortcut={ getShortcutDisplay( shortcuts.insertAfter ) } + shortcut={ shortcuts.insertAfter } > { __( 'Insert After' ) } @@ -135,7 +125,7 @@ export function BlockSettingsMenu( { clientIds } ) { className="block-editor-block-settings-menu__control" onClick={ flow( onClose, onRemove ) } icon="trash" - shortcut={ getShortcutDisplay( shortcuts.remove ) } + shortcut={ shortcuts.remove } > { _n( 'Remove Block', 'Remove Blocks', count ) } diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 8970592dda8b0..c200b26fca999 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -35,6 +35,7 @@ "@wordpress/element": "file:../element", "@wordpress/hooks": "file:../hooks", "@wordpress/i18n": "file:../i18n", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/keycodes": "file:../keycodes", "@wordpress/media-utils": "file:../media-utils", "@wordpress/notices": "file:../notices", diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 26dd1812d6b5e..bb63b6401f045 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -7,8 +7,7 @@ import { PostPreviewButton, PostSavedState, } from '@wordpress/editor'; -import { withDispatch, withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -18,17 +17,28 @@ import HeaderToolbar from './header-toolbar'; import MoreMenu from './more-menu'; import PinnedPlugins from './pinned-plugins'; import PostPublishButtonOrToggle from './post-publish-button-or-toggle'; -import shortcuts from '../../keyboard-shortcuts'; -function Header( { - closeGeneralSidebar, - hasActiveMetaboxes, - isEditorSidebarOpened, - isPublishSidebarOpened, - isSaving, - openGeneralSidebar, -} ) { - const toggleGeneralSidebar = isEditorSidebarOpened ? closeGeneralSidebar : openGeneralSidebar; +function Header() { + const { + shortcut, + hasActiveMetaboxes, + isEditorSidebarOpened, + isPublishSidebarOpened, + isSaving, + getBlockSelectionStart, + } = useSelect( ( select ) => ( { + shortcut: select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ), + hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), + isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(), + isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(), + isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(), + getBlockSelectionStart: select( 'core/block-editor' ).getBlockSelectionStart, + } ), [] ); + const { openGeneralSidebar, closeGeneralSidebar } = useDispatch( 'core/edit-post' ); + + const toggleGeneralSidebar = isEditorSidebarOpened ? + closeGeneralSidebar : + () => openGeneralSidebar( getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document' ); return (
@@ -62,7 +72,7 @@ function Header( { onClick={ toggleGeneralSidebar } isPressed={ isEditorSidebarOpened } aria-expanded={ isEditorSidebarOpened } - shortcut={ shortcuts.toggleSidebar } + shortcut={ shortcut } /> @@ -71,20 +81,4 @@ function Header( { ); } -export default compose( - withSelect( ( select ) => ( { - hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), - isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(), - isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(), - isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(), - } ) ), - withDispatch( ( dispatch, ownProps, { select } ) => { - const { getBlockSelectionStart } = select( 'core/block-editor' ); - const { openGeneralSidebar, closeGeneralSidebar } = dispatch( 'core/edit-post' ); - - return { - openGeneralSidebar: () => openGeneralSidebar( getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document' ), - closeGeneralSidebar, - }; - } ), -)( Header ); +export default Header; diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index 1e970dc694168..49569b034b915 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -3,13 +3,8 @@ */ import { __ } from '@wordpress/i18n'; import { MenuItemsChoice, MenuGroup } from '@wordpress/components'; -import { compose, ifCondition } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; -/** - * Internal dependencies - */ -import shortcuts from '../../../keyboard-shortcuts'; /** * Set of available mode options. * @@ -26,14 +21,31 @@ const MODES = [ }, ]; -function ModeSwitcher( { onSwitch, mode } ) { +function ModeSwitcher() { + const { + shortcut, + isRichEditingEnabled, + isCodeEditingEnabled, + mode, + } = useSelect( ( select ) => ( { + shortcut: select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-mode' ), + isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, + isCodeEditingEnabled: select( 'core/editor' ).getEditorSettings().codeEditingEnabled, + mode: select( 'core/edit-post' ).getEditorMode(), + } ), [] ); + const { switchEditorMode } = useDispatch( 'core/edit-post' ); + const choices = MODES.map( ( choice ) => { if ( choice.value !== mode ) { - return { ...choice, shortcut: shortcuts.toggleEditorMode.display }; + return { ...choice, shortcut }; } return choice; } ); + if ( ! isRichEditingEnabled || ! isCodeEditingEnabled ) { + return null; + } + return ( ); } -export default compose( [ - withSelect( ( select ) => ( { - isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, - isCodeEditingEnabled: select( 'core/editor' ).getEditorSettings().codeEditingEnabled, - mode: select( 'core/edit-post' ).getEditorMode(), - } ) ), - ifCondition( ( { isRichEditingEnabled, isCodeEditingEnabled } ) => isRichEditingEnabled && isCodeEditingEnabled ), - withDispatch( ( dispatch ) => ( { - onSwitch( mode ) { - dispatch( 'core/edit-post' ).switchEditorMode( mode ); - }, - } ) ), -] )( ModeSwitcher ); +export default ModeSwitcher; diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js index a1336b8ccd635..b630d82ec053d 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js @@ -9,8 +9,6 @@ const { primary, // Shift+Cmd+ on a mac, Ctrl+Shift+ elsewhere. primaryShift, - // Shift+Alt+Cmd+ on a mac, Ctrl+Shift+Akt+ elsewhere. - secondary, // Ctrl+Alt+ on a mac, Shift+Alt+ elsewhere. access, ctrl, @@ -38,11 +36,7 @@ export const globalShortcuts = [ keyCombination: primaryShift( 'z' ), description: __( 'Redo your last undo.' ), }, - { - keyCombination: primaryShift( ',' ), - description: __( 'Show or hide the settings sidebar.' ), - ariaLabel: shortcutAriaLabel.primaryShift( ',' ), - }, + 'core/edit-post/toggle-sidebar', { keyCombination: access( 'o' ), description: __( 'Open the block navigation menu.' ), @@ -69,10 +63,7 @@ export const globalShortcuts = [ keyCombination: alt( 'F10' ), description: __( 'Navigate to the nearest toolbar.' ), }, - { - keyCombination: secondary( 'm' ), - description: __( 'Switch between Visual editor and Code editor.' ), - }, + 'core/edit-post/toggle-mode', ]; export const textFormattingShortcuts = [ diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index bc1815921e955..1ca26a2b96c9f 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -1,77 +1,77 @@ /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; -import { KeyboardShortcuts } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; +import { useEffect } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { useShortcut } from '@wordpress/keyboard-shortcuts'; +import { __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import shortcuts from '../../keyboard-shortcuts'; +function EditorModeKeyboardShortcuts() { + const { + getBlockSelectionStart, + getEditorSettings, + getEditorMode, + isEditorSidebarOpen, + } = useSelect( ( select ) => { + return { + getBlockSelectionStart: select( 'core/block-editor' ).getBlockSelectionStart, + getEditorSettings: select( 'core/editor' ).getEditorSettings, + getEditorMode: select( 'core/edit-post' ).getEditorMode, + isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened, + }; + } ); + + const { + switchEditorMode, + openGeneralSidebar, + closeGeneralSidebar, + } = useDispatch( 'core/edit-post' ); + const { registerShortcut } = useDispatch( 'core/keyboard-shortcuts' ); -class EditorModeKeyboardShortcuts extends Component { - constructor() { - super( ...arguments ); + useEffect( () => { + registerShortcut( { + name: 'core/edit-post/toggle-mode', + category: 'global', + description: __( 'Switch between Visual editor and Code editor.' ), + keyCombination: { + modifier: 'secondary', + character: 'm', + }, + } ); - this.toggleMode = this.toggleMode.bind( this ); - this.toggleSidebar = this.toggleSidebar.bind( this ); - } + registerShortcut( { + name: 'core/edit-post/toggle-sidebar', + category: 'global', + description: __( 'Show or hide the settings sidebar.' ), + keyCombination: { + modifier: 'primaryShift', + character: ',', + }, + } ); + }, [] ); - toggleMode() { - const { mode, switchMode, isModeSwitchEnabled } = this.props; - if ( ! isModeSwitchEnabled ) { + useShortcut( 'core/edit-post/toggle-mode', () => { + const { richEditingEnabled, codeEditingEnabled } = getEditorSettings(); + if ( ! richEditingEnabled || ! codeEditingEnabled ) { return; } - switchMode( mode === 'visual' ? 'text' : 'visual' ); - } + switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' ); + }, { bindGlobal: true } ); - toggleSidebar( event ) { + useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => { // This shortcut has no known clashes, but use preventDefault to prevent any // obscure shortcuts from triggering. event.preventDefault(); - const { isEditorSidebarOpen, closeSidebar, openSidebar } = this.props; if ( isEditorSidebarOpen ) { - closeSidebar(); + closeGeneralSidebar(); } else { - openSidebar(); + const sidebarToOpen = getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document'; + openGeneralSidebar( sidebarToOpen ); } - } + }, { bindGlobal: true } ); - render() { - return ( - - ); - } + return null; } -export default compose( [ - withSelect( ( select ) => { - const { richEditingEnabled, codeEditingEnabled } = select( 'core/editor' ).getEditorSettings(); - - return { - isModeSwitchEnabled: richEditingEnabled && codeEditingEnabled, - mode: select( 'core/edit-post' ).getEditorMode(), - isEditorSidebarOpen: select( 'core/edit-post' ).isEditorSidebarOpened(), - }; - } ), - withDispatch( ( dispatch, ownProps, { select } ) => ( { - switchMode( mode ) { - dispatch( 'core/edit-post' ).switchEditorMode( mode ); - }, - openSidebar() { - const { getBlockSelectionStart } = select( 'core/block-editor' ); - const sidebarToOpen = getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document'; - dispatch( 'core/edit-post' ).openGeneralSidebar( sidebarToOpen ); - }, - closeSidebar: dispatch( 'core/edit-post' ).closeGeneralSidebar, - } ) ), -] )( EditorModeKeyboardShortcuts ); +export default EditorModeKeyboardShortcuts; diff --git a/packages/edit-post/src/components/sidebar/sidebar-header/index.js b/packages/edit-post/src/components/sidebar/sidebar-header/index.js index 375491985ef46..ef891dd8b2a29 100644 --- a/packages/edit-post/src/components/sidebar/sidebar-header/index.js +++ b/packages/edit-post/src/components/sidebar/sidebar-header/index.js @@ -6,17 +6,17 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { compose } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { IconButton } from '@wordpress/components'; -import { withDispatch, withSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; -/** - * Internal dependencies - */ -import shortcuts from '../../../keyboard-shortcuts'; +const SidebarHeader = ( { children, className, closeLabel } ) => { + const { shortcut, title } = useSelect( ( select ) => ( { + shortcut: select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ), + title: select( 'core/editor' ).getEditedPostAttribute( 'title' ), + } ), [] ); + const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); -const SidebarHeader = ( { children, className, closeLabel, closeSidebar, title } ) => { return ( <>
@@ -24,7 +24,7 @@ const SidebarHeader = ( { children, className, closeLabel, closeSidebar, title } { title || __( '(no title)' ) } @@ -32,21 +32,14 @@ const SidebarHeader = ( { children, className, closeLabel, closeSidebar, title }
{ children }
); }; -export default compose( - withSelect( ( select ) => ( { - title: select( 'core/editor' ).getEditedPostAttribute( 'title' ), - } ) ), - withDispatch( ( dispatch ) => ( { - closeSidebar: dispatch( 'core/edit-post' ).closeGeneralSidebar, - } ) ), -)( SidebarHeader ); +export default SidebarHeader; diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js index bc2f4d000cb16..4e80905ba3d70 100644 --- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js +++ b/packages/edit-post/src/components/visual-editor/block-inspector-button.js @@ -1,29 +1,26 @@ /** * External dependencies */ -import { flow, noop } from 'lodash'; +import { noop } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { MenuItem, withSpokenMessages } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import shortcuts from '../../keyboard-shortcuts'; +import { useSelect, useDispatch } from '@wordpress/data'; export function BlockInspectorButton( { - areAdvancedSettingsOpened, - closeSidebar, - openEditorSidebar, onClick = noop, small = false, speak, } ) { + const { shortcut, areAdvancedSettingsOpened } = useSelect( ( select ) => ( { + shortcut: select( 'core/keyborad-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ), + areAdvancedSettingsOpened: select( 'core/edit-post' ).getActiveGeneralSidebarName() === 'edit-post/block', + } ), [] ); + const { openGeneralSidebar, closeGeneralSidebar } = useDispatch( 'core/edit-post' ); + const speakMessage = () => { if ( areAdvancedSettingsOpened ) { speak( __( 'Block settings closed' ) ); @@ -37,22 +34,21 @@ export function BlockInspectorButton( { return ( { + if ( areAdvancedSettingsOpened ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-post/block' ); + speakMessage(); + onClick(); + } + } } icon="admin-generic" - shortcut={ shortcuts.toggleSidebar } + shortcut={ shortcut } > { ! small && label } ); } -export default compose( - withSelect( ( select ) => ( { - areAdvancedSettingsOpened: select( 'core/edit-post' ).getActiveGeneralSidebarName() === 'edit-post/block', - } ) ), - withDispatch( ( dispatch ) => ( { - openEditorSidebar: () => dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' ), - closeSidebar: dispatch( 'core/edit-post' ).closeGeneralSidebar, - } ) ), - withSpokenMessages, -)( BlockInspectorButton ); +export default withSpokenMessages( BlockInspectorButton ); diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index c0f956a677b6d..fa3f9baec5d55 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -4,6 +4,7 @@ import '@wordpress/core-data'; import '@wordpress/block-editor'; import '@wordpress/editor'; +import '@wordpress/keyboard-shortcuts'; import '@wordpress/viewport'; import '@wordpress/notices'; import { registerCoreBlocks, __experimentalRegisterExperimentalCoreBlocks } from '@wordpress/block-library'; diff --git a/packages/edit-post/src/keyboard-shortcuts.js b/packages/edit-post/src/keyboard-shortcuts.js deleted file mode 100644 index 0f119a7edf3f6..0000000000000 --- a/packages/edit-post/src/keyboard-shortcuts.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * WordPress dependencies - */ -import { rawShortcut, displayShortcut, shortcutAriaLabel } from '@wordpress/keycodes'; - -export default { - toggleEditorMode: { - raw: rawShortcut.secondary( 'm' ), - display: displayShortcut.secondary( 'm' ), - }, - toggleSidebar: { - raw: rawShortcut.primaryShift( ',' ), - display: displayShortcut.primaryShift( ',' ), - ariaLabel: shortcutAriaLabel.primaryShift( ',' ), - }, -}; diff --git a/packages/keyboard-shortcuts/src/store/selectors.js b/packages/keyboard-shortcuts/src/store/selectors.js index 97228e1ad6e9d..9951ad7b753c9 100644 --- a/packages/keyboard-shortcuts/src/store/selectors.js +++ b/packages/keyboard-shortcuts/src/store/selectors.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { displayShortcut, shortcutAriaLabel, rawShortcut } from '@wordpress/keycodes'; + /** @typedef {import('./actions').WPShortcutKeyCombination} WPShortcutKeyCombination */ /** @@ -20,6 +25,32 @@ export function getShortcutKeyCombination( state, name ) { return state[ name ] ? state[ name ].keyCombination : null; } +/** + * Returns a string representing the main key combination for a given shortcut name. + * + * @param {Object} state Global state. + * @param {string} name Shortcut name. + * @param {string} representation Type of reprensentation. (display, raw, ariaLabel ) + * + * @return {string} Shortcut representation. + */ +export function getShortcutRepresentation( state, name, representation = 'display' ) { + const shortcut = getShortcutKeyCombination( state, name ); + if ( ! shortcut ) { + return null; + } + + const formattingMethods = { + display: displayShortcut, + raw: rawShortcut, + ariaLabel: shortcutAriaLabel, + }; + + return shortcut.modifier ? + formattingMethods[ representation ][ shortcut.modifier ]( shortcut.character ) : + shortcut.character; +} + /** * Returns the shortcut description given its name. *