@wordpress/keyboard-shortcuts 5.44.0 → 5.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/README.md +5 -9
- package/build/components/shortcut-provider.cjs +7 -3
- package/build/components/shortcut-provider.cjs.map +3 -3
- package/build/context.cjs +2 -1
- package/build/context.cjs.map +3 -3
- package/build/hooks/use-shortcut-event-match.cjs +16 -9
- package/build/hooks/use-shortcut-event-match.cjs.map +3 -3
- package/build/hooks/use-shortcut.cjs +4 -3
- package/build/hooks/use-shortcut.cjs.map +3 -3
- package/build/index.cjs +2 -1
- package/build/index.cjs.map +2 -2
- package/build/store/actions.cjs +2 -1
- package/build/store/actions.cjs.map +3 -3
- package/build/store/index.cjs +2 -1
- package/build/store/index.cjs.map +3 -3
- package/build/store/reducer.cjs +2 -1
- package/build/store/reducer.cjs.map +3 -3
- package/build/store/selectors.cjs +14 -2
- package/build/store/selectors.cjs.map +3 -3
- package/build/store/types.cjs +19 -0
- package/build/store/types.cjs.map +7 -0
- package/build-module/components/shortcut-provider.mjs +6 -3
- package/build-module/components/shortcut-provider.mjs.map +3 -3
- package/build-module/context.mjs +1 -1
- package/build-module/context.mjs.map +3 -3
- package/build-module/hooks/use-shortcut-event-match.mjs +15 -9
- package/build-module/hooks/use-shortcut-event-match.mjs.map +3 -3
- package/build-module/hooks/use-shortcut.mjs +3 -3
- package/build-module/hooks/use-shortcut.mjs.map +3 -3
- package/build-module/index.mjs +1 -1
- package/build-module/index.mjs.map +1 -1
- package/build-module/store/actions.mjs +1 -1
- package/build-module/store/actions.mjs.map +3 -3
- package/build-module/store/index.mjs +1 -1
- package/build-module/store/index.mjs.map +3 -3
- package/build-module/store/reducer.mjs +1 -1
- package/build-module/store/reducer.mjs.map +3 -3
- package/build-module/store/selectors.mjs +13 -2
- package/build-module/store/selectors.mjs.map +3 -3
- package/build-module/store/types.mjs +1 -0
- package/build-module/store/types.mjs.map +7 -0
- package/build-types/components/shortcut-provider.d.ts +15 -0
- package/build-types/components/shortcut-provider.d.ts.map +1 -0
- package/build-types/context.d.ts +8 -0
- package/build-types/context.d.ts.map +1 -0
- package/build-types/hooks/use-shortcut-event-match.d.ts +8 -0
- package/build-types/hooks/use-shortcut-event-match.d.ts.map +1 -0
- package/build-types/hooks/use-shortcut.d.ts +14 -0
- package/build-types/hooks/use-shortcut.d.ts.map +1 -0
- package/build-types/hooks/use-shortcut.native.d.ts +3 -0
- package/build-types/hooks/use-shortcut.native.d.ts.map +1 -0
- package/build-types/index.d.ts +5 -0
- package/build-types/index.d.ts.map +1 -0
- package/build-types/store/actions.d.ts +114 -0
- package/build-types/store/actions.d.ts.map +1 -0
- package/build-types/store/index.d.ts +9 -0
- package/build-types/store/index.d.ts.map +1 -0
- package/build-types/store/reducer.d.ts +16 -0
- package/build-types/store/reducer.d.ts.map +1 -0
- package/build-types/store/selectors.d.ts +321 -0
- package/build-types/store/selectors.d.ts.map +1 -0
- package/build-types/store/types.d.ts +9 -0
- package/build-types/store/types.d.ts.map +1 -0
- package/package.json +8 -6
- package/src/components/{shortcut-provider.js → shortcut-provider.tsx} +16 -6
- package/src/{context.js → context.ts} +12 -5
- package/src/hooks/use-shortcut-event-match.ts +51 -0
- package/src/hooks/{use-shortcut.js → use-shortcut.ts} +15 -11
- package/src/store/{actions.js → actions.ts} +21 -19
- package/src/store/{index.js → index.ts} +0 -2
- package/src/store/{reducer.js → reducer.ts} +13 -4
- package/src/store/{selectors.js → selectors.ts} +56 -28
- package/src/store/types.ts +10 -0
- package/src/hooks/use-shortcut-event-match.js +0 -41
- /package/src/hooks/{use-shortcut.native.js → use-shortcut.native.ts} +0 -0
- /package/src/{index.js → index.ts} +0 -0
|
@@ -1,19 +1,25 @@
|
|
|
1
|
-
// packages/keyboard-shortcuts/src/hooks/use-shortcut-event-match.
|
|
1
|
+
// packages/keyboard-shortcuts/src/hooks/use-shortcut-event-match.ts
|
|
2
2
|
import { useSelect } from "@wordpress/data";
|
|
3
|
+
import { useCallback } from "@wordpress/element";
|
|
3
4
|
import { isKeyboardEvent } from "@wordpress/keycodes";
|
|
4
5
|
import { store as keyboardShortcutsStore } from "../store/index.mjs";
|
|
5
6
|
function useShortcutEventMatch() {
|
|
6
7
|
const { getAllShortcutKeyCombinations } = useSelect(
|
|
7
8
|
keyboardShortcutsStore
|
|
8
9
|
);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
return useCallback(
|
|
11
|
+
(name, event) => {
|
|
12
|
+
return getAllShortcutKeyCombinations(name).some(
|
|
13
|
+
(combination) => {
|
|
14
|
+
if (!combination) {
|
|
15
|
+
return false;
|
|
16
|
+
}
|
|
17
|
+
return isKeyboardEvent[combination.modifier ?? "undefined"](event, combination.character);
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
},
|
|
21
|
+
[getAllShortcutKeyCombinations]
|
|
22
|
+
);
|
|
17
23
|
}
|
|
18
24
|
export {
|
|
19
25
|
useShortcutEventMatch as default
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/hooks/use-shortcut-event-match.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as keyboardShortcutsStore } from '../store';\n\n/**\n * Returns a function to check if a keyboard event matches a shortcut name.\n *\n * @return
|
|
5
|
-
"mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAKhC,SAAS,SAAS,8BAA8B;AAQjC,SAAR,
|
|
3
|
+
"sources": ["../../src/hooks/use-shortcut-event-match.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as keyboardShortcutsStore } from '../store';\n\n/**\n * Returns a function to check if a keyboard event matches a shortcut name.\n *\n * @return A function to check if a keyboard event matches a\n * predefined shortcut combination.\n */\nexport default function useShortcutEventMatch(): (\n\tname: string,\n\tevent: KeyboardEvent\n) => boolean {\n\tconst { getAllShortcutKeyCombinations } = useSelect(\n\t\tkeyboardShortcutsStore\n\t);\n\n\t/**\n\t * A function to check if a keyboard event matches a predefined shortcut\n\t * combination.\n\t *\n\t * @param name Shortcut name.\n\t * @param event Event to check.\n\t *\n\t * @return True if the event matches the shortcuts, false if not.\n\t */\n\treturn useCallback(\n\t\t( name: string, event: KeyboardEvent ) => {\n\t\t\treturn getAllShortcutKeyCombinations( name ).some(\n\t\t\t\t( combination ) => {\n\t\t\t\t\tif ( ! combination ) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\t\t\t\t\treturn isKeyboardEvent[\n\t\t\t\t\t\tcombination.modifier ?? 'undefined'\n\t\t\t\t\t]( event, combination.character );\n\t\t\t\t}\n\t\t\t);\n\t\t},\n\t\t[ getAllShortcutKeyCombinations ]\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAKhC,SAAS,SAAS,8BAA8B;AAQjC,SAAR,wBAGM;AACZ,QAAM,EAAE,8BAA8B,IAAI;AAAA,IACzC;AAAA,EACD;AAWA,SAAO;AAAA,IACN,CAAE,MAAc,UAA0B;AACzC,aAAO,8BAA+B,IAAK,EAAE;AAAA,QAC5C,CAAE,gBAAiB;AAClB,cAAK,CAAE,aAAc;AACpB,mBAAO;AAAA,UACR;AACA,iBAAO,gBACN,YAAY,YAAY,WACzB,EAAG,OAAO,YAAY,SAAU;AAAA,QACjC;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,6BAA8B;AAAA,EACjC;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// packages/keyboard-shortcuts/src/hooks/use-shortcut.
|
|
1
|
+
// packages/keyboard-shortcuts/src/hooks/use-shortcut.ts
|
|
2
2
|
import { useContext, useEffect, useRef } from "@wordpress/element";
|
|
3
3
|
import useShortcutEventMatch from "./use-shortcut-event-match.mjs";
|
|
4
4
|
import { context } from "../context.mjs";
|
|
@@ -14,7 +14,7 @@ function useShortcut(name, callback, { isDisabled = false } = {}) {
|
|
|
14
14
|
return;
|
|
15
15
|
}
|
|
16
16
|
function _callback(event) {
|
|
17
|
-
if (isMatch(name, event)) {
|
|
17
|
+
if (isMatch(name, event) && callbackRef.current) {
|
|
18
18
|
callbackRef.current(event);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
@@ -22,7 +22,7 @@ function useShortcut(name, callback, { isDisabled = false } = {}) {
|
|
|
22
22
|
return () => {
|
|
23
23
|
shortcuts.delete(_callback);
|
|
24
24
|
};
|
|
25
|
-
}, [name, isDisabled, shortcuts]);
|
|
25
|
+
}, [name, isDisabled, shortcuts, isMatch]);
|
|
26
26
|
}
|
|
27
27
|
export {
|
|
28
28
|
useShortcut as default
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/hooks/use-shortcut.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useShortcutEventMatch from './use-shortcut-event-match';\nimport { context } from '../context';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param
|
|
5
|
-
"mappings": ";AAGA,SAAS,YAAY,WAAW,cAAc;AAK9C,OAAO,2BAA2B;AAClC,SAAS,eAAe;
|
|
3
|
+
"sources": ["../../src/hooks/use-shortcut.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useShortcutEventMatch from './use-shortcut-event-match';\nimport { context } from '../context';\n\ninterface UseShortcutOptions {\n\tisDisabled?: boolean;\n}\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param name Shortcut name.\n * @param callback Shortcut callback.\n * @param options Shortcut options.\n * @param options.isDisabled Whether to disable the shortcut.\n */\nexport default function useShortcut(\n\tname: string,\n\tcallback: ( event: KeyboardEvent ) => void,\n\t{ isDisabled = false }: UseShortcutOptions = {}\n) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef< ( event: KeyboardEvent ) => void >();\n\n\tuseEffect( () => {\n\t\tcallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction _callback( event: KeyboardEvent ) {\n\t\t\tif ( isMatch( name, event ) && callbackRef.current ) {\n\t\t\t\tcallbackRef.current( event );\n\t\t\t}\n\t\t}\n\n\t\tshortcuts.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled, shortcuts, isMatch ] );\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,YAAY,WAAW,cAAc;AAK9C,OAAO,2BAA2B;AAClC,SAAS,eAAe;AAcT,SAAR,YACN,MACA,UACA,EAAE,aAAa,MAAM,IAAwB,CAAC,GAC7C;AACD,QAAM,YAAY,WAAY,OAAQ;AACtC,QAAM,UAAU,sBAAsB;AACtC,QAAM,cAAc,OAA2C;AAE/D,YAAW,MAAM;AAChB,gBAAY,UAAU;AAAA,EACvB,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AAEA,aAAS,UAAW,OAAuB;AAC1C,UAAK,QAAS,MAAM,KAAM,KAAK,YAAY,SAAU;AACpD,oBAAY,QAAS,KAAM;AAAA,MAC5B;AAAA,IACD;AAEA,cAAU,IAAK,SAAU;AACzB,WAAO,MAAM;AACZ,gBAAU,OAAQ,SAAU;AAAA,IAC7B;AAAA,EACD,GAAG,CAAE,MAAM,YAAY,WAAW,OAAQ,CAAE;AAC7C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-module/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// packages/keyboard-shortcuts/src/index.
|
|
1
|
+
// packages/keyboard-shortcuts/src/index.ts
|
|
2
2
|
import { store } from "./store/index.mjs";
|
|
3
3
|
import { default as default2 } from "./hooks/use-shortcut.mjs";
|
|
4
4
|
import { ShortcutProvider } from "./components/shortcut-provider.mjs";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.
|
|
3
|
+
"sources": ["../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { ShortcutProvider } from './components/shortcut-provider';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"],
|
|
5
5
|
"mappings": ";AAAA,SAAS,aAAa;AACtB,SAAoB,WAAXA,gBAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAoB,WAAXA,gBAAkD;",
|
|
6
6
|
"names": ["default"]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/store/actions.
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
3
|
+
"sources": ["../../src/store/actions.ts"],
|
|
4
|
+
"sourcesContent": ["import type { WPKeycodeModifier } from '@wordpress/keycodes';\n\n/**\n * Keyboard key combination.\n */\nexport interface ShortcutKeyCombination {\n\tcharacter: string;\n\tmodifier: WPKeycodeModifier | undefined;\n}\n\n/**\n * Configuration of a registered keyboard shortcut.\n */\nexport interface ShortcutConfig {\n\tname: string;\n\tcategory: string;\n\tdescription: string;\n\tkeyCombination: ShortcutKeyCombination;\n\taliases?: ShortcutKeyCombination[];\n}\n\nexport type ShortcutAction =\n\t| ReturnType< typeof registerShortcut >\n\t| ReturnType< typeof unregisterShortcut >;\n\n/**\n * Returns an action object used to register a new keyboard shortcut.\n *\n * @param {ShortcutConfig} config Shortcut config.\n *\n * @example\n *\n *```js\n * import { useEffect } from 'react';\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect, useDispatch } from '@wordpress/data';\n * import { __ } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const { registerShortcut } = useDispatch( keyboardShortcutsStore );\n *\n * useEffect( () => {\n * registerShortcut( {\n * name: 'custom/my-custom-shortcut',\n * category: 'my-category',\n * description: __( 'My custom shortcut' ),\n * keyCombination: {\n * modifier: 'primary',\n * character: 'j',\n * },\n * } );\n * }, [] );\n *\n * const shortcut = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutKeyCombination(\n * 'custom/my-custom-shortcut'\n * ),\n * []\n * );\n *\n * return shortcut ? (\n * <p>{ __( 'Shortcut is registered.' ) }</p>\n * ) : (\n * <p>{ __( 'Shortcut is not registered.' ) }</p>\n * );\n * };\n *```\n * @return {Object} action.\n */\nexport function registerShortcut( {\n\tname,\n\tcategory,\n\tdescription,\n\tkeyCombination,\n\taliases,\n}: ShortcutConfig ) {\n\treturn {\n\t\ttype: 'REGISTER_SHORTCUT' as const,\n\t\tname,\n\t\tcategory,\n\t\tkeyCombination,\n\t\taliases,\n\t\tdescription,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a keyboard shortcut.\n *\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { useEffect } from 'react';\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect, useDispatch } from '@wordpress/data';\n * import { __ } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const { unregisterShortcut } = useDispatch( keyboardShortcutsStore );\n *\n * useEffect( () => {\n * unregisterShortcut( 'core/editor/next-region' );\n * }, [] );\n *\n * const shortcut = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutKeyCombination(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return shortcut ? (\n * <p>{ __( 'Shortcut is not unregistered.' ) }</p>\n * ) : (\n * <p>{ __( 'Shortcut is unregistered.' ) }</p>\n * );\n * };\n *```\n * @return {Object} action.\n */\nexport function unregisterShortcut( name: string ) {\n\treturn {\n\t\ttype: 'UNREGISTER_SHORTCUT' as const,\n\t\tname,\n\t};\n}\n"],
|
|
5
|
+
"mappings": ";AAsEO,SAAS,iBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAoB;AACnB,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAuCO,SAAS,mBAAoB,MAAe;AAClD,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACD;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/store/index.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\n\nconst STORE_NAME = 'core/keyboard-shortcuts';\n\n/**\n * Store definition for the keyboard shortcuts namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n
|
|
5
|
-
"mappings": ";AAGA,SAAS,kBAAkB,gBAAgB;AAK3C,OAAO,aAAa;AACpB,YAAY,aAAa;AACzB,YAAY,eAAe;AAE3B,IAAM,aAAa;
|
|
3
|
+
"sources": ["../../src/store/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\n\nconst STORE_NAME = 'core/keyboard-shortcuts';\n\n/**\n * Store definition for the keyboard shortcuts namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,kBAAkB,gBAAgB;AAK3C,OAAO,aAAa;AACpB,YAAY,aAAa;AACzB,YAAY,eAAe;AAE3B,IAAM,aAAa;AAOZ,IAAM,QAAQ,iBAAkB,YAAY;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAEF,SAAU,KAAM;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/store/reducer.
|
|
4
|
-
"sourcesContent": ["/**\n * Reducer returning the registered shortcuts\n *\n * @param
|
|
5
|
-
"mappings": ";
|
|
3
|
+
"sources": ["../../src/store/reducer.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { ShortcutAction } from './actions';\nimport type { ShortcutsState } from './types';\n\n/**\n * Reducer returning the registered shortcuts\n *\n * @param state Current state.\n * @param action Dispatched action.\n *\n * @return Updated state.\n */\nfunction reducer(\n\tstate: ShortcutsState = {},\n\taction: ShortcutAction\n): ShortcutsState {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_SHORTCUT':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tcategory: action.category,\n\t\t\t\t\tkeyCombination: action.keyCombination,\n\t\t\t\t\taliases: action.aliases,\n\t\t\t\t\tdescription: action.description,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_SHORTCUT':\n\t\t\tconst { [ action.name ]: actionName, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t}\n\n\treturn state;\n}\n\nexport default reducer;\n"],
|
|
5
|
+
"mappings": ";AAcA,SAAS,QACR,QAAwB,CAAC,GACzB,QACiB;AACjB,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,gBAAgB,OAAO;AAAA,UACvB,SAAS,OAAO;AAAA,UAChB,aAAa,OAAO;AAAA,QACrB;AAAA,MACD;AAAA,IACD,KAAK;AACJ,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,YAAY,GAAG,eAAe,IAAI;AAC3D,aAAO;AAAA,EACT;AAEA,SAAO;AACR;AAEA,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// packages/keyboard-shortcuts/src/store/selectors.
|
|
1
|
+
// packages/keyboard-shortcuts/src/store/selectors.ts
|
|
2
2
|
import { createSelector } from "@wordpress/data";
|
|
3
3
|
import {
|
|
4
4
|
displayShortcut,
|
|
@@ -7,8 +7,17 @@ import {
|
|
|
7
7
|
} from "@wordpress/keycodes";
|
|
8
8
|
var EMPTY_ARRAY = [];
|
|
9
9
|
var FORMATTING_METHODS = {
|
|
10
|
+
/**
|
|
11
|
+
* Display formatting.
|
|
12
|
+
*/
|
|
10
13
|
display: displayShortcut,
|
|
14
|
+
/**
|
|
15
|
+
* Raw shortcut formatting.
|
|
16
|
+
*/
|
|
11
17
|
raw: rawShortcut,
|
|
18
|
+
/**
|
|
19
|
+
* ARIA label formatting.
|
|
20
|
+
*/
|
|
12
21
|
ariaLabel: shortcutAriaLabel
|
|
13
22
|
};
|
|
14
23
|
function getKeyCombinationRepresentation(shortcut, representation) {
|
|
@@ -37,7 +46,9 @@ var getAllShortcutKeyCombinations = createSelector(
|
|
|
37
46
|
return [
|
|
38
47
|
getShortcutKeyCombination(state, name),
|
|
39
48
|
...getShortcutAliases(state, name)
|
|
40
|
-
].filter(
|
|
49
|
+
].filter(
|
|
50
|
+
(combination) => !!combination
|
|
51
|
+
);
|
|
41
52
|
},
|
|
42
53
|
(state, name) => [state[name]]
|
|
43
54
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/store/selectors.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSelector } from '@wordpress/data';\nimport {\n\tdisplayShortcut,\n\tshortcutAriaLabel,\n\trawShortcut,\n} from '@wordpress/keycodes';\n\n/** @typedef {import('./actions').WPShortcutKeyCombination} WPShortcutKeyCombination */\n\n/** @typedef {import('@wordpress/keycodes').WPKeycodeHandlerByModifier} WPKeycodeHandlerByModifier */\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation.\n *\n * @type {Array<any>}\n */\nconst EMPTY_ARRAY = [];\n\n/**\n * Shortcut formatting methods.\n *\n * @property {WPKeycodeHandlerByModifier} display Display formatting.\n * @property {WPKeycodeHandlerByModifier} rawShortcut Raw shortcut formatting.\n * @property {WPKeycodeHandlerByModifier} ariaLabel ARIA label formatting.\n */\nconst FORMATTING_METHODS = {\n\tdisplay: displayShortcut,\n\traw: rawShortcut,\n\tariaLabel: shortcutAriaLabel,\n};\n\n/**\n * Returns a string representing the key combination.\n *\n * @param {?WPShortcutKeyCombination} shortcut Key combination.\n * @param {keyof FORMATTING_METHODS} representation Type of representation\n * (display, raw, ariaLabel).\n *\n * @return {?string} Shortcut representation.\n */\nfunction getKeyCombinationRepresentation( shortcut, representation ) {\n\tif ( ! shortcut ) {\n\t\treturn null;\n\t}\n\n\treturn shortcut.modifier\n\t\t? FORMATTING_METHODS[ representation ][ shortcut.modifier ](\n\t\t\t\tshortcut.character\n\t\t )\n\t\t: shortcut.character;\n}\n\n/**\n * Returns the main key combination for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n * const {character, modifier} = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutKeyCombination(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * <div>\n * { createInterpolateElement(\n * sprintf(\n * 'Character: <code>%s</code> / Modifier: <code>%s</code>',\n * character,\n * modifier\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </div>\n * );\n * };\n *```\n *\n * @return {WPShortcutKeyCombination?} Key combination.\n */\nexport function getShortcutKeyCombination( state, name ) {\n\treturn state[ name ] ? state[ name ].keyCombination : null;\n}\n\n/**\n * Returns a string representing the main key combination for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n * @param {keyof FORMATTING_METHODS} representation Type of representation\n * (display, raw, ariaLabel).\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { sprintf } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const {display, raw, ariaLabel} = useSelect(\n * ( select ) =>{\n * return {\n * display: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region' ),\n * raw: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region','raw' ),\n * ariaLabel: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region', 'ariaLabel')\n * }\n * },\n * []\n * );\n *\n * return (\n * <ul>\n * <li>{ sprintf( 'display string: %s', display ) }</li>\n * <li>{ sprintf( 'raw string: %s', raw ) }</li>\n * <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>\n * </ul>\n * );\n * };\n *```\n *\n * @return {?string} Shortcut representation.\n */\nexport function getShortcutRepresentation(\n\tstate,\n\tname,\n\trepresentation = 'display'\n) {\n\tconst shortcut = getShortcutKeyCombination( state, name );\n\treturn getKeyCombinationRepresentation( shortcut, representation );\n}\n\n/**\n * Returns the shortcut description given its name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { __ } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n * const shortcutDescription = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutDescription( 'core/editor/next-region' ),\n * []\n * );\n *\n * return shortcutDescription ? (\n * <div>{ shortcutDescription }</div>\n * ) : (\n * <div>{ __( 'No description.' ) }</div>\n * );\n * };\n *```\n * @return {?string} Shortcut description.\n */\nexport function getShortcutDescription( state, name ) {\n\treturn state[ name ] ? state[ name ].description : null;\n}\n\n/**\n * Returns the aliases for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n * const shortcutAliases = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutAliases(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * shortcutAliases.length > 0 && (\n * <ul>\n * { shortcutAliases.map( ( { character, modifier }, index ) => (\n * <li key={ index }>\n * { createInterpolateElement(\n * sprintf(\n * 'Character: <code>%s</code> / Modifier: <code>%s</code>',\n * character,\n * modifier\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </li>\n * ) ) }\n * </ul>\n * )\n * );\n * };\n *```\n *\n * @return {WPShortcutKeyCombination[]} Key combinations.\n */\nexport function getShortcutAliases( state, name ) {\n\treturn state[ name ] && state[ name ].aliases\n\t\t? state[ name ].aliases\n\t\t: EMPTY_ARRAY;\n}\n\n/**\n * Returns the shortcuts that include aliases for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const allShortcutKeyCombinations = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * allShortcutKeyCombinations.length > 0 && (\n * <ul>\n * { allShortcutKeyCombinations.map(\n * ( { character, modifier }, index ) => (\n * <li key={ index }>\n * { createInterpolateElement(\n * sprintf(\n * 'Character: <code>%s</code> / Modifier: <code>%s</code>',\n * character,\n * modifier\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </li>\n * )\n * ) }\n * </ul>\n * )\n * );\n * };\n *```\n *\n * @return {WPShortcutKeyCombination[]} Key combinations.\n */\nexport const getAllShortcutKeyCombinations = createSelector(\n\t( state, name ) => {\n\t\treturn [\n\t\t\tgetShortcutKeyCombination( state, name ),\n\t\t\t...getShortcutAliases( state, name ),\n\t\t].filter( Boolean );\n\t},\n\t( state, name ) => [ state[ name ] ]\n);\n\n/**\n * Returns the raw representation of all the keyboard combinations of a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const allShortcutRawKeyCombinations = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * allShortcutRawKeyCombinations.length > 0 && (\n * <ul>\n * { allShortcutRawKeyCombinations.map(\n * ( shortcutRawKeyCombination, index ) => (\n * <li key={ index }>\n * { createInterpolateElement(\n * sprintf(\n * ' <code>%s</code>',\n * shortcutRawKeyCombination\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </li>\n * )\n * ) }\n * </ul>\n * )\n * );\n * };\n *```\n *\n * @return {string[]} Shortcuts.\n */\nexport const getAllShortcutRawKeyCombinations = createSelector(\n\t( state, name ) => {\n\t\treturn getAllShortcutKeyCombinations( state, name ).map(\n\t\t\t( combination ) =>\n\t\t\t\tgetKeyCombinationRepresentation( combination, 'raw' )\n\t\t);\n\t},\n\t( state, name ) => [ state[ name ] ]\n);\n\n/**\n * Returns the shortcut names list for a given category name.\n *\n * @param {Object} state Global state.\n * @param {string} name Category name.\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n *\n * const ExampleComponent = () => {\n * const categoryShortcuts = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getCategoryShortcuts(\n * 'block'\n * ),\n * []\n * );\n *\n * return (\n * categoryShortcuts.length > 0 && (\n * <ul>\n * { categoryShortcuts.map( ( categoryShortcut ) => (\n * <li key={ categoryShortcut }>{ categoryShortcut }</li>\n * ) ) }\n * </ul>\n * )\n * );\n * };\n *```\n * @return {string[]} Shortcut names.\n */\nexport const getCategoryShortcuts = createSelector(\n\t( state, categoryName ) => {\n\t\treturn Object.entries( state )\n\t\t\t.filter( ( [ , shortcut ] ) => shortcut.category === categoryName )\n\t\t\t.map( ( [ name ] ) => name );\n\t},\n\t( state ) => [ state ]\n);\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,sBAAsB;AAC/B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;
|
|
3
|
+
"sources": ["../../src/store/selectors.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSelector } from '@wordpress/data';\nimport {\n\tdisplayShortcut,\n\tshortcutAriaLabel,\n\trawShortcut,\n} from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport type { ShortcutKeyCombination } from './actions';\n\ninterface ShortcutState {\n\tcategory: string;\n\tkeyCombination: ShortcutKeyCombination;\n\taliases?: ShortcutKeyCombination[];\n\tdescription: string;\n}\n\ntype ShortcutsState = Record< string, ShortcutState >;\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation.\n */\nconst EMPTY_ARRAY: ShortcutKeyCombination[] = [];\n\n/**\n * Shortcut formatting methods.\n */\nconst FORMATTING_METHODS = {\n\t/**\n\t * Display formatting.\n\t */\n\tdisplay: displayShortcut,\n\t/**\n\t * Raw shortcut formatting.\n\t */\n\traw: rawShortcut,\n\t/**\n\t * ARIA label formatting.\n\t */\n\tariaLabel: shortcutAriaLabel,\n};\n\n/**\n * Returns a string representing the key combination.\n *\n * @param shortcut Key combination.\n * @param representation Type of representation\n * (display, raw, ariaLabel).\n *\n * @return Shortcut representation.\n */\nfunction getKeyCombinationRepresentation(\n\tshortcut: ShortcutKeyCombination | null,\n\trepresentation: keyof typeof FORMATTING_METHODS\n): string | null {\n\tif ( ! shortcut ) {\n\t\treturn null;\n\t}\n\n\treturn shortcut.modifier\n\t\t? FORMATTING_METHODS[ representation ][ shortcut.modifier ](\n\t\t\t\tshortcut.character\n\t\t )\n\t\t: shortcut.character;\n}\n\n/**\n * Returns the main key combination for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n * const {character, modifier} = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutKeyCombination(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * <div>\n * { createInterpolateElement(\n * sprintf(\n * 'Character: <code>%s</code> / Modifier: <code>%s</code>',\n * character,\n * modifier\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </div>\n * );\n * };\n *```\n *\n * @return {ShortcutKeyCombination?} Key combination.\n */\nexport function getShortcutKeyCombination(\n\tstate: ShortcutsState,\n\tname: string\n): ShortcutKeyCombination | null {\n\treturn state[ name ] ? state[ name ].keyCombination : null;\n}\n\n/**\n * Returns a string representing the main key combination for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n * @param {keyof FORMATTING_METHODS} representation Type of representation\n * (display, raw, ariaLabel).\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { sprintf } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const {display, raw, ariaLabel} = useSelect(\n * ( select ) =>{\n * return {\n * display: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region' ),\n * raw: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region','raw' ),\n * ariaLabel: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region', 'ariaLabel')\n * }\n * },\n * []\n * );\n *\n * return (\n * <ul>\n * <li>{ sprintf( 'display string: %s', display ) }</li>\n * <li>{ sprintf( 'raw string: %s', raw ) }</li>\n * <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>\n * </ul>\n * );\n * };\n *```\n *\n * @return {?string} Shortcut representation.\n */\nexport function getShortcutRepresentation(\n\tstate: ShortcutsState,\n\tname: string,\n\trepresentation: keyof typeof FORMATTING_METHODS = 'display'\n): string | null {\n\tconst shortcut = getShortcutKeyCombination( state, name );\n\treturn getKeyCombinationRepresentation( shortcut, representation );\n}\n\n/**\n * Returns the shortcut description given its name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { __ } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n * const shortcutDescription = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutDescription( 'core/editor/next-region' ),\n * []\n * );\n *\n * return shortcutDescription ? (\n * <div>{ shortcutDescription }</div>\n * ) : (\n * <div>{ __( 'No description.' ) }</div>\n * );\n * };\n *```\n * @return {?string} Shortcut description.\n */\nexport function getShortcutDescription(\n\tstate: ShortcutsState,\n\tname: string\n): string | null {\n\treturn state[ name ] ? state[ name ].description : null;\n}\n\n/**\n * Returns the aliases for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n * const shortcutAliases = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getShortcutAliases(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * shortcutAliases.length > 0 && (\n * <ul>\n * { shortcutAliases.map( ( { character, modifier }, index ) => (\n * <li key={ index }>\n * { createInterpolateElement(\n * sprintf(\n * 'Character: <code>%s</code> / Modifier: <code>%s</code>',\n * character,\n * modifier\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </li>\n * ) ) }\n * </ul>\n * )\n * );\n * };\n *```\n *\n * @return {ShortcutKeyCombination[]} Key combinations.\n */\nexport function getShortcutAliases(\n\tstate: ShortcutsState,\n\tname: string\n): ShortcutKeyCombination[] {\n\treturn state[ name ] && state[ name ].aliases\n\t\t? state[ name ].aliases\n\t\t: EMPTY_ARRAY;\n}\n\n/**\n * Returns the shortcuts that include aliases for a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const allShortcutKeyCombinations = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * allShortcutKeyCombinations.length > 0 && (\n * <ul>\n * { allShortcutKeyCombinations.map(\n * ( { character, modifier }, index ) => (\n * <li key={ index }>\n * { createInterpolateElement(\n * sprintf(\n * 'Character: <code>%s</code> / Modifier: <code>%s</code>',\n * character,\n * modifier\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </li>\n * )\n * ) }\n * </ul>\n * )\n * );\n * };\n *```\n *\n * @return {ShortcutKeyCombination[]} Key combinations.\n */\nexport const getAllShortcutKeyCombinations = createSelector(\n\t( state, name ) => {\n\t\treturn [\n\t\t\tgetShortcutKeyCombination( state, name ),\n\t\t\t...getShortcutAliases( state, name ),\n\t\t].filter(\n\t\t\t( combination ): combination is ShortcutKeyCombination =>\n\t\t\t\t!! combination\n\t\t);\n\t},\n\t( state, name ) => [ state[ name ] ]\n);\n\n/**\n * Returns the raw representation of all the keyboard combinations of a given shortcut name.\n *\n * @param {Object} state Global state.\n * @param {string} name Shortcut name.\n *\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n * import { createInterpolateElement } from '@wordpress/element';\n * import { sprintf } from '@wordpress/i18n';\n *\n * const ExampleComponent = () => {\n * const allShortcutRawKeyCombinations = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(\n * 'core/editor/next-region'\n * ),\n * []\n * );\n *\n * return (\n * allShortcutRawKeyCombinations.length > 0 && (\n * <ul>\n * { allShortcutRawKeyCombinations.map(\n * ( shortcutRawKeyCombination, index ) => (\n * <li key={ index }>\n * { createInterpolateElement(\n * sprintf(\n * ' <code>%s</code>',\n * shortcutRawKeyCombination\n * ),\n * {\n * code: <code />,\n * }\n * ) }\n * </li>\n * )\n * ) }\n * </ul>\n * )\n * );\n * };\n *```\n *\n * @return {string[]} Shortcuts.\n */\nexport const getAllShortcutRawKeyCombinations = createSelector(\n\t( state, name ) => {\n\t\treturn getAllShortcutKeyCombinations( state, name ).map(\n\t\t\t( combination ) =>\n\t\t\t\tgetKeyCombinationRepresentation( combination, 'raw' )\n\t\t);\n\t},\n\t( state, name ) => [ state[ name ] ]\n);\n\n/**\n * Returns the shortcut names list for a given category name.\n *\n * @param {Object} state Global state.\n * @param {string} name Category name.\n * @example\n *\n *```js\n * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n * import { useSelect } from '@wordpress/data';\n *\n * const ExampleComponent = () => {\n * const categoryShortcuts = useSelect(\n * ( select ) =>\n * select( keyboardShortcutsStore ).getCategoryShortcuts(\n * 'block'\n * ),\n * []\n * );\n *\n * return (\n * categoryShortcuts.length > 0 && (\n * <ul>\n * { categoryShortcuts.map( ( categoryShortcut ) => (\n * <li key={ categoryShortcut }>{ categoryShortcut }</li>\n * ) ) }\n * </ul>\n * )\n * );\n * };\n *```\n * @return {string[]} Shortcut names.\n */\nexport const getCategoryShortcuts = createSelector(\n\t( state: ShortcutsState, categoryName: string ): string[] => {\n\t\treturn Object.entries< ShortcutState >( state )\n\t\t\t.filter( ( [ , shortcut ] ) => shortcut.category === categoryName )\n\t\t\t.map( ( [ name ] ) => name );\n\t},\n\t( state: ShortcutsState ) => [ state ]\n);\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,sBAAsB;AAC/B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAoBP,IAAM,cAAwC,CAAC;AAK/C,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA,EAIT,KAAK;AAAA;AAAA;AAAA;AAAA,EAIL,WAAW;AACZ;AAWA,SAAS,gCACR,UACA,gBACgB;AAChB,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,SAAO,SAAS,WACb,mBAAoB,cAAe,EAAG,SAAS,QAAS;AAAA,IACxD,SAAS;AAAA,EACT,IACA,SAAS;AACb;AA2CO,SAAS,0BACf,OACA,MACgC;AAChC,SAAO,MAAO,IAAK,IAAI,MAAO,IAAK,EAAE,iBAAiB;AACvD;AAwCO,SAAS,0BACf,OACA,MACA,iBAAkD,WAClC;AAChB,QAAM,WAAW,0BAA2B,OAAO,IAAK;AACxD,SAAO,gCAAiC,UAAU,cAAe;AAClE;AA8BO,SAAS,uBACf,OACA,MACgB;AAChB,SAAO,MAAO,IAAK,IAAI,MAAO,IAAK,EAAE,cAAc;AACpD;AAgDO,SAAS,mBACf,OACA,MAC2B;AAC3B,SAAO,MAAO,IAAK,KAAK,MAAO,IAAK,EAAE,UACnC,MAAO,IAAK,EAAE,UACd;AACJ;AAmDO,IAAM,gCAAgC;AAAA,EAC5C,CAAE,OAAO,SAAU;AAClB,WAAO;AAAA,MACN,0BAA2B,OAAO,IAAK;AAAA,MACvC,GAAG,mBAAoB,OAAO,IAAK;AAAA,IACpC,EAAE;AAAA,MACD,CAAE,gBACD,CAAC,CAAE;AAAA,IACL;AAAA,EACD;AAAA,EACA,CAAE,OAAO,SAAU,CAAE,MAAO,IAAK,CAAE;AACpC;AAmDO,IAAM,mCAAmC;AAAA,EAC/C,CAAE,OAAO,SAAU;AAClB,WAAO,8BAA+B,OAAO,IAAK,EAAE;AAAA,MACnD,CAAE,gBACD,gCAAiC,aAAa,KAAM;AAAA,IACtD;AAAA,EACD;AAAA,EACA,CAAE,OAAO,SAAU,CAAE,MAAO,IAAK,CAAE;AACpC;AAmCO,IAAM,uBAAuB;AAAA,EACnC,CAAE,OAAuB,iBAAoC;AAC5D,WAAO,OAAO,QAA0B,KAAM,EAC5C,OAAQ,CAAE,CAAE,EAAE,QAAS,MAAO,SAAS,aAAa,YAAa,EACjE,IAAK,CAAE,CAAE,IAAK,MAAO,IAAK;AAAA,EAC7B;AAAA,EACA,CAAE,UAA2B,CAAE,KAAM;AACtC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.mjs.map
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
interface ShortcutProviderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* Handles callbacks added to context by `useShortcut`.
|
|
6
|
+
* Adding a provider allows to register contextual shortcuts
|
|
7
|
+
* that are only active when a certain part of the UI is focused.
|
|
8
|
+
*
|
|
9
|
+
* @param props Props to pass to `div`.
|
|
10
|
+
*
|
|
11
|
+
* @return Component.
|
|
12
|
+
*/
|
|
13
|
+
export declare function ShortcutProvider(props: ShortcutProviderProps): import("react").JSX.Element;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=shortcut-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shortcut-provider.d.ts","sourceRoot":"","sources":["../../src/components/shortcut-provider.tsx"],"names":[],"mappings":"AAcA,UAAU,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAE,cAAc,CAAE;IAC7E,SAAS,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAE,cAAc,CAAE,KAAM,IAAI,CAAC;CACrE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAE,KAAK,EAAE,qBAAqB,+BAwB7D"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type ShortcutCallback = (event: KeyboardEvent) => void;
|
|
2
|
+
interface ShortcutContextType {
|
|
3
|
+
add: (shortcut: ShortcutCallback) => void;
|
|
4
|
+
delete: (shortcut: ShortcutCallback) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const context: import("react").Context<ShortcutContextType>;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAKA,KAAK,gBAAgB,GAAG,CAAE,KAAK,EAAE,aAAa,KAAM,IAAI,CAAC;AAEzD,UAAU,mBAAmB;IAC5B,GAAG,EAAE,CAAE,QAAQ,EAAE,gBAAgB,KAAM,IAAI,CAAC;IAC5C,MAAM,EAAE,CAAE,QAAQ,EAAE,gBAAgB,KAAM,IAAI,CAAC;CAC/C;AASD,eAAO,MAAM,OAAO,8CAajB,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a function to check if a keyboard event matches a shortcut name.
|
|
3
|
+
*
|
|
4
|
+
* @return A function to check if a keyboard event matches a
|
|
5
|
+
* predefined shortcut combination.
|
|
6
|
+
*/
|
|
7
|
+
export default function useShortcutEventMatch(): (name: string, event: KeyboardEvent) => boolean;
|
|
8
|
+
//# sourceMappingURL=use-shortcut-event-match.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-shortcut-event-match.d.ts","sourceRoot":"","sources":["../../src/hooks/use-shortcut-event-match.ts"],"names":[],"mappings":"AAYA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,IAAI,CAChD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,aAAa,KAChB,OAAO,CA6BX"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface UseShortcutOptions {
|
|
2
|
+
isDisabled?: boolean;
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* Attach a keyboard shortcut handler.
|
|
6
|
+
*
|
|
7
|
+
* @param name Shortcut name.
|
|
8
|
+
* @param callback Shortcut callback.
|
|
9
|
+
* @param options Shortcut options.
|
|
10
|
+
* @param options.isDisabled Whether to disable the shortcut.
|
|
11
|
+
*/
|
|
12
|
+
export default function useShortcut(name: string, callback: (event: KeyboardEvent) => void, { isDisabled }?: UseShortcutOptions): void;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=use-shortcut.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-shortcut.d.ts","sourceRoot":"","sources":["../../src/hooks/use-shortcut.ts"],"names":[],"mappings":"AAWA,UAAU,kBAAkB;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAClC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,CAAE,KAAK,EAAE,aAAa,KAAM,IAAI,EAC1C,EAAE,UAAkB,EAAE,GAAE,kBAAuB,QA0B/C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-shortcut.native.d.ts","sourceRoot":"","sources":["../../src/hooks/use-shortcut.native.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,YAAa,CAAC;AAC/B,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { store } from './store';
|
|
2
|
+
export { default as useShortcut } from './hooks/use-shortcut';
|
|
3
|
+
export { ShortcutProvider } from './components/shortcut-provider';
|
|
4
|
+
export { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import type { WPKeycodeModifier } from '@wordpress/keycodes';
|
|
2
|
+
/**
|
|
3
|
+
* Keyboard key combination.
|
|
4
|
+
*/
|
|
5
|
+
export interface ShortcutKeyCombination {
|
|
6
|
+
character: string;
|
|
7
|
+
modifier: WPKeycodeModifier | undefined;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Configuration of a registered keyboard shortcut.
|
|
11
|
+
*/
|
|
12
|
+
export interface ShortcutConfig {
|
|
13
|
+
name: string;
|
|
14
|
+
category: string;
|
|
15
|
+
description: string;
|
|
16
|
+
keyCombination: ShortcutKeyCombination;
|
|
17
|
+
aliases?: ShortcutKeyCombination[];
|
|
18
|
+
}
|
|
19
|
+
export type ShortcutAction = ReturnType<typeof registerShortcut> | ReturnType<typeof unregisterShortcut>;
|
|
20
|
+
/**
|
|
21
|
+
* Returns an action object used to register a new keyboard shortcut.
|
|
22
|
+
*
|
|
23
|
+
* @param {ShortcutConfig} config Shortcut config.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
*
|
|
27
|
+
*```js
|
|
28
|
+
* import { useEffect } from 'react';
|
|
29
|
+
* import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
|
|
30
|
+
* import { useSelect, useDispatch } from '@wordpress/data';
|
|
31
|
+
* import { __ } from '@wordpress/i18n';
|
|
32
|
+
*
|
|
33
|
+
* const ExampleComponent = () => {
|
|
34
|
+
* const { registerShortcut } = useDispatch( keyboardShortcutsStore );
|
|
35
|
+
*
|
|
36
|
+
* useEffect( () => {
|
|
37
|
+
* registerShortcut( {
|
|
38
|
+
* name: 'custom/my-custom-shortcut',
|
|
39
|
+
* category: 'my-category',
|
|
40
|
+
* description: __( 'My custom shortcut' ),
|
|
41
|
+
* keyCombination: {
|
|
42
|
+
* modifier: 'primary',
|
|
43
|
+
* character: 'j',
|
|
44
|
+
* },
|
|
45
|
+
* } );
|
|
46
|
+
* }, [] );
|
|
47
|
+
*
|
|
48
|
+
* const shortcut = useSelect(
|
|
49
|
+
* ( select ) =>
|
|
50
|
+
* select( keyboardShortcutsStore ).getShortcutKeyCombination(
|
|
51
|
+
* 'custom/my-custom-shortcut'
|
|
52
|
+
* ),
|
|
53
|
+
* []
|
|
54
|
+
* );
|
|
55
|
+
*
|
|
56
|
+
* return shortcut ? (
|
|
57
|
+
* <p>{ __( 'Shortcut is registered.' ) }</p>
|
|
58
|
+
* ) : (
|
|
59
|
+
* <p>{ __( 'Shortcut is not registered.' ) }</p>
|
|
60
|
+
* );
|
|
61
|
+
* };
|
|
62
|
+
*```
|
|
63
|
+
* @return {Object} action.
|
|
64
|
+
*/
|
|
65
|
+
export declare function registerShortcut({ name, category, description, keyCombination, aliases, }: ShortcutConfig): {
|
|
66
|
+
type: "REGISTER_SHORTCUT";
|
|
67
|
+
name: string;
|
|
68
|
+
category: string;
|
|
69
|
+
keyCombination: ShortcutKeyCombination;
|
|
70
|
+
aliases: ShortcutKeyCombination[] | undefined;
|
|
71
|
+
description: string;
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* Returns an action object used to unregister a keyboard shortcut.
|
|
75
|
+
*
|
|
76
|
+
* @param {string} name Shortcut name.
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
*
|
|
80
|
+
*```js
|
|
81
|
+
* import { useEffect } from 'react';
|
|
82
|
+
* import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
|
|
83
|
+
* import { useSelect, useDispatch } from '@wordpress/data';
|
|
84
|
+
* import { __ } from '@wordpress/i18n';
|
|
85
|
+
*
|
|
86
|
+
* const ExampleComponent = () => {
|
|
87
|
+
* const { unregisterShortcut } = useDispatch( keyboardShortcutsStore );
|
|
88
|
+
*
|
|
89
|
+
* useEffect( () => {
|
|
90
|
+
* unregisterShortcut( 'core/editor/next-region' );
|
|
91
|
+
* }, [] );
|
|
92
|
+
*
|
|
93
|
+
* const shortcut = useSelect(
|
|
94
|
+
* ( select ) =>
|
|
95
|
+
* select( keyboardShortcutsStore ).getShortcutKeyCombination(
|
|
96
|
+
* 'core/editor/next-region'
|
|
97
|
+
* ),
|
|
98
|
+
* []
|
|
99
|
+
* );
|
|
100
|
+
*
|
|
101
|
+
* return shortcut ? (
|
|
102
|
+
* <p>{ __( 'Shortcut is not unregistered.' ) }</p>
|
|
103
|
+
* ) : (
|
|
104
|
+
* <p>{ __( 'Shortcut is unregistered.' ) }</p>
|
|
105
|
+
* );
|
|
106
|
+
* };
|
|
107
|
+
*```
|
|
108
|
+
* @return {Object} action.
|
|
109
|
+
*/
|
|
110
|
+
export declare function unregisterShortcut(name: string): {
|
|
111
|
+
type: "UNREGISTER_SHORTCUT";
|
|
112
|
+
name: string;
|
|
113
|
+
};
|
|
114
|
+
//# sourceMappingURL=actions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/store/actions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,sBAAsB,CAAC;IACvC,OAAO,CAAC,EAAE,sBAAsB,EAAE,CAAC;CACnC;AAED,MAAM,MAAM,cAAc,GACvB,UAAU,CAAE,OAAO,gBAAgB,CAAE,GACrC,UAAU,CAAE,OAAO,kBAAkB,CAAE,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,gBAAgB,CAAE,EACjC,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,cAAc,EACd,OAAO,GACP,EAAE,cAAc;;;;;;;EAShB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,kBAAkB,CAAE,IAAI,EAAE,MAAM;;;EAK/C"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as actions from './actions';
|
|
2
|
+
import * as selectors from './selectors';
|
|
3
|
+
/**
|
|
4
|
+
* Store definition for the keyboard shortcuts namespace.
|
|
5
|
+
*
|
|
6
|
+
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
|
|
7
|
+
*/
|
|
8
|
+
export declare const store: import("@wordpress/data").StoreDescriptor<import("@wordpress/data").ReduxStoreConfig<unknown, typeof actions, typeof selectors>>;
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AAIzC;;;;GAIG;AACH,eAAO,MAAM,KAAK,kIAIf,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import type { ShortcutAction } from './actions';
|
|
5
|
+
import type { ShortcutsState } from './types';
|
|
6
|
+
/**
|
|
7
|
+
* Reducer returning the registered shortcuts
|
|
8
|
+
*
|
|
9
|
+
* @param state Current state.
|
|
10
|
+
* @param action Dispatched action.
|
|
11
|
+
*
|
|
12
|
+
* @return Updated state.
|
|
13
|
+
*/
|
|
14
|
+
declare function reducer(state: ShortcutsState | undefined, action: ShortcutAction): ShortcutsState;
|
|
15
|
+
export default reducer;
|
|
16
|
+
//# sourceMappingURL=reducer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../src/store/reducer.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;GAOG;AACH,iBAAS,OAAO,CACf,KAAK,EAAE,cAAc,YAAK,EAC1B,MAAM,EAAE,cAAc,GACpB,cAAc,CAkBhB;AAED,eAAe,OAAO,CAAC"}
|