diff --git a/examples/example-keyboard-capture/index.html b/examples/example-keyboard-capture/index.html
new file mode 100644
index 000000000..0e7d44f2f
--- /dev/null
+++ b/examples/example-keyboard-capture/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/example-keyboard-capture/package.json b/examples/example-keyboard-capture/package.json
new file mode 100644
index 000000000..91a77f5bb
--- /dev/null
+++ b/examples/example-keyboard-capture/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@lumino/example-keyboard-capture",
+ "version": "2.0.0",
+ "private": true,
+ "scripts": {
+ "build": "tsc && rollup -c",
+ "clean": "rimraf build"
+ },
+ "dependencies": {
+ "@lumino/signaling": "^2.1.3",
+ "@lumino/widgets": "^2.6.0"
+ },
+ "devDependencies": {
+ "@lumino/messaging": "^2.0.2",
+ "@rollup/plugin-node-resolve": "^15.0.1",
+ "rimraf": "^5.0.1",
+ "rollup": "^3.25.1",
+ "rollup-plugin-styles": "^4.0.0",
+ "typescript": "~5.1.3"
+ }
+}
diff --git a/examples/example-keyboard-capture/rollup.config.mjs b/examples/example-keyboard-capture/rollup.config.mjs
new file mode 100644
index 000000000..1e910abb8
--- /dev/null
+++ b/examples/example-keyboard-capture/rollup.config.mjs
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { createRollupExampleConfig } from '@lumino/buildutils';
+const rollupConfig = createRollupExampleConfig();
+export default rollupConfig;
diff --git a/examples/example-keyboard-capture/src/capture.ts b/examples/example-keyboard-capture/src/capture.ts
new file mode 100644
index 000000000..58dcaad04
--- /dev/null
+++ b/examples/example-keyboard-capture/src/capture.ts
@@ -0,0 +1,154 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { KeycodeLayout } from '@lumino/keyboard';
+import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
+import { Widget } from '@lumino/widgets';
+
+/**
+ * A widget for capturing a keyboard layout.
+ */
+export class CaptureWidget extends Widget {
+ /**
+ *
+ */
+ constructor(options?: Widget.IOptions) {
+ super(options);
+ this.addClass('lm-keyboardCaptureArea');
+ if (!options || !options.node) {
+ this.node.tabIndex = 0;
+ }
+ }
+
+ extractLayout(name: string): KeycodeLayout {
+ return new KeycodeLayout(
+ name,
+ this._keyCodeMap,
+ Array.from(this._modifierKeys),
+ this._codeMap
+ );
+ }
+
+ formatMap(): string {
+ return `codes: ${Private.formatCodeMap(
+ this._codeMap
+ )}\n\nmodifiers: [${Array.from(this._modifierKeys)
+ .map(k => `"${k}"`)
+ .sort()
+ .join(', ')}]${
+ Private.isCodeMapEmpty(this._keyCodeMap)
+ ? ''
+ : `\n\nkeyCodes${Private.formatCodeMap(this._keyCodeMap)}`
+ }`;
+ }
+
+ clear(): void {
+ this._codeMap = {};
+ this._keyCodeMap = {};
+ this._modifierKeys.clear();
+ }
+
+ node: HTMLInputElement;
+
+ get dataAdded(): ISignal {
+ return this._dataAdded;
+ }
+
+ /**
+ * Handle the DOM events for the widget.
+ *
+ * @param event - The DOM event sent to the element.
+ */
+ handleEvent(event: Event): void {
+ switch (event.type) {
+ case 'keydown':
+ this._onKeyDown(event as KeyboardEvent);
+ break;
+ case 'keyup':
+ this._onKeyUp(event as KeyboardEvent);
+ break;
+ }
+ }
+
+ /**
+ * A message handler invoked on a `'before-attach'` message.
+ */
+ protected onBeforeAttach(msg: Message): void {
+ this.node.addEventListener('keydown', this);
+ this.node.addEventListener('keyup', this);
+ super.onBeforeAttach(msg);
+ }
+
+ /**
+ * A message handler invoked on an `'after-detach'` message.
+ */
+ protected onAfterDetach(msg: Message): void {
+ super.onAfterDetach(msg);
+ this.node.removeEventListener('keydown', this);
+ this.node.removeEventListener('keyup', this);
+ }
+
+ private _onKeyDown(event: KeyboardEvent): void {
+ event.stopPropagation();
+ event.preventDefault();
+ if (event.getModifierState(event.key)) {
+ this._modifierKeys.add(event.key);
+ this._dataAdded.emit({ key: event.key, type: 'modifier' });
+ }
+ }
+
+ private _onKeyUp(event: KeyboardEvent): void {
+ event.stopPropagation();
+ event.preventDefault();
+ if (event.getModifierState(event.key)) {
+ this._modifierKeys.add(event.key);
+ this._dataAdded.emit({ key: event.key, type: 'modifier' });
+ return;
+ }
+ let { key, code } = event;
+ if (key === 'Dead') {
+ console.log('Dead key', event);
+ return;
+ }
+ if ((!code || code === 'Unidentified') && event.keyCode) {
+ console.log('Unidentified code', event);
+ this._keyCodeMap[event.keyCode] = key;
+ this._dataAdded.emit({ key, code: event.keyCode, type: 'keyCode' });
+ } else {
+ this._codeMap[code] = key;
+ this._dataAdded.emit({ key, code, type: 'code' });
+ }
+ }
+
+ private _codeMap: { [key: string]: string } = {};
+ private _keyCodeMap: { [key: number]: string } = {};
+ private _modifierKeys: Set = new Set();
+ private _dataAdded = new Signal(this);
+}
+
+namespace CaptureWidget {
+ export type Entry = { type: string; code?: string | number; key: string };
+}
+
+namespace Private {
+ export function isCodeMapEmpty(
+ codemap: { [key: string]: string } | { [key: number]: string }
+ ): boolean {
+ return !Object.keys(codemap).length;
+ }
+ export function formatCodeMap(
+ codemap: { [key: string]: string } | { [key: number]: string }
+ ): string {
+ return `{\n${Object.keys(codemap)
+ .sort()
+ .map(
+ k =>
+ ` "${k}": "${
+ (codemap as any)[k] &&
+ (codemap as any)[k][0].toUpperCase() + (codemap as any)[k].slice(1)
+ }"`
+ )
+ .join(',\n')}\n}`;
+ }
+}
diff --git a/examples/example-keyboard-capture/src/index.ts b/examples/example-keyboard-capture/src/index.ts
new file mode 100644
index 000000000..dd960926c
--- /dev/null
+++ b/examples/example-keyboard-capture/src/index.ts
@@ -0,0 +1,49 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Panel, Widget } from '@lumino/widgets';
+import { CaptureWidget } from './capture';
+import { OutputWidget } from './output';
+
+import '../style/index.css';
+
+/**
+ * Initialize the applicaiton.
+ */
+async function init(): Promise {
+ // Add the text editors to a dock panel.
+ let capture = new CaptureWidget();
+ let output = new OutputWidget();
+
+ capture.node.textContent =
+ 'Focus me and hit each key on your keyboard without any modifiers';
+
+ // Add the dock panel to the document.
+ let box = new Panel();
+ box.id = 'main';
+ box.addWidget(capture);
+ box.addWidget(output);
+
+ capture.dataAdded.connect((sender, entry) => {
+ output.value = `Added ${entry.type}: ${
+ entry.code ? `${entry.code} →` : ''
+ } ${entry.key}`;
+ });
+ output.action.connect((sender, action) => {
+ if (action === 'clipboard') {
+ navigator.clipboard.writeText(capture.formatMap());
+ } else if (action === 'clear') {
+ capture.clear();
+ output.value = ' ';
+ } else {
+ output.value = `${capture.formatMap()}`;
+ }
+ });
+
+ window.onresize = () => {
+ box.update();
+ };
+ Widget.attach(box, document.body);
+}
+
+window.onload = init;
diff --git a/examples/example-keyboard-capture/src/output.ts b/examples/example-keyboard-capture/src/output.ts
new file mode 100644
index 000000000..f3b0393ec
--- /dev/null
+++ b/examples/example-keyboard-capture/src/output.ts
@@ -0,0 +1,83 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
+import { Widget } from '@lumino/widgets';
+
+export class OutputWidget extends Widget {
+ /**
+ *
+ */
+ constructor(options?: Widget.IOptions) {
+ super(options);
+ this._output = document.createElement('div');
+ this._exportButton = document.createElement('button');
+ this._exportButton.innerText = 'Show';
+ this._copyButton = document.createElement('button');
+ this._copyButton.innerText = 'Copy';
+ this._clearButton = document.createElement('button');
+ this._clearButton.innerText = 'Clear';
+ this.node.appendChild(this._exportButton);
+ this.node.appendChild(this._copyButton);
+ this.node.appendChild(this._clearButton);
+ this.node.appendChild(this._output);
+ this.addClass('lm-keyboardCaptureOutputArea');
+ }
+
+ set value(content: string) {
+ this._output.innerHTML = content;
+ }
+
+ get action(): ISignal {
+ return this._action;
+ }
+
+ /**
+ * Handle the DOM events for the widget.
+ *
+ * @param event - The DOM event sent to the element.
+ */
+ handleEvent(event: Event): void {
+ switch (event.type) {
+ case 'click':
+ if (event.target === this._exportButton) {
+ event.stopPropagation();
+ this._action.emit('display');
+ } else if (event.target === this._copyButton) {
+ event.stopPropagation();
+ this._action.emit('clipboard');
+ } else if (event.target === this._clearButton) {
+ event.stopPropagation();
+ this._action.emit('clear');
+ }
+ break;
+ }
+ }
+
+ /**
+ * A message handler invoked on a `'before-attach'` message.
+ */
+ protected onBeforeAttach(msg: Message): void {
+ this._exportButton.addEventListener('click', this);
+ this._copyButton.addEventListener('click', this);
+ this._clearButton.addEventListener('click', this);
+ super.onBeforeAttach(msg);
+ }
+
+ /**
+ * A message handler invoked on an `'after-detach'` message.
+ */
+ protected onAfterDetach(msg: Message): void {
+ super.onAfterDetach(msg);
+ this._exportButton.removeEventListener('click', this);
+ this._copyButton.removeEventListener('click', this);
+ this._clearButton.removeEventListener('click', this);
+ }
+
+ private _output: HTMLElement;
+ private _exportButton: HTMLButtonElement;
+ private _copyButton: HTMLButtonElement;
+ private _clearButton: HTMLButtonElement;
+ private _action = new Signal(this);
+}
diff --git a/examples/example-keyboard-capture/style/index.css b/examples/example-keyboard-capture/style/index.css
new file mode 100644
index 000000000..06c716ffe
--- /dev/null
+++ b/examples/example-keyboard-capture/style/index.css
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2017, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|----------------------------------------------------------------------------*/
+@import '~@lumino/widgets/style/index.css';
+
+body {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: 0;
+ padding: 0;
+}
+
+#main {
+ flex: 1 1 auto;
+ overflow: auto;
+ padding: 10px;
+}
+
+.lm-keyboardCaptureArea {
+ border-radius: 5px;
+ border: 3px dashed #88a;
+ padding: 6px;
+ margin: 6px;
+}
+
+.lm-keyboardCaptureOutputArea kbd {
+ background-color: #eee;
+ border-radius: 5px;
+ border: 3px solid #b4b4b4;
+ box-shadow:
+ 0 1px 1px rgba(0, 0, 0, 0.2),
+ 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+ color: #333;
+ display: inline-block;
+ font-size: 0.85em;
+ font-weight: 700;
+ line-height: 1;
+ padding: 2px 4px;
+ white-space: nowrap;
+}
+
+.lm-keyboardCaptureOutputArea button {
+ margin: 4px;
+}
diff --git a/examples/example-keyboard-capture/tsconfig.json b/examples/example-keyboard-capture/tsconfig.json
new file mode 100644
index 000000000..b14ef2b28
--- /dev/null
+++ b/examples/example-keyboard-capture/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "declaration": false,
+ "noImplicitAny": true,
+ "noEmitOnError": true,
+ "noUnusedLocals": true,
+ "strictNullChecks": true,
+ "sourceMap": true,
+ "module": "ES6",
+ "moduleResolution": "node",
+ "target": "ES2018",
+ "outDir": "./build",
+ "lib": ["DOM", "ES2018"],
+ "types": []
+ },
+ "include": ["src/*"]
+}
diff --git a/packages/keyboard/src/index.ts b/packages/keyboard/src/index.ts
index 7676e77d1..d78087490 100644
--- a/packages/keyboard/src/index.ts
+++ b/packages/keyboard/src/index.ts
@@ -12,6 +12,8 @@
* @module keyboard
*/
+import { MODIFIER_KEYS, SPECIAL_KEYS } from './special-keys';
+
/**
* An object which represents an abstract keyboard layout.
*/
@@ -92,6 +94,11 @@ export function getKeyboardLayout(): IKeyboardLayout {
* to a layout which is appropriate for the user's system.
*/
export function setKeyboardLayout(layout: IKeyboardLayout): void {
+ try {
+ Private.unsubscribeBrowserUpdates();
+ } catch (e) {
+ // Ignore exceptions in experimental code
+ }
Private.keyboardLayout = layout;
}
@@ -112,18 +119,30 @@ export class KeycodeLayout implements IKeyboardLayout {
*
* @param name - The human readable name for the layout.
*
- * @param codes - A mapping of keycode to key value.
+ * @param keyCodes - A mapping of legacy keycodes to key values.
*
* @param modifierKeys - Array of modifier key names
+ *
+ * @param codes - A mapping of modern keycodes to key values.
+ *
+ * #### Notes
+ * The legacy mapping is from KeyboardEvent.keyCode values to key
+ * strings, while the modern mapping is from KeyboardEvent.code
+ * values to key strings. While `keyCodes` is required and `codes`
+ * is optional for API backwards-compatability, it is recommended
+ * to always pass the modern mapping, and it should then be safe to
+ * leave the `keyCodes` mapping empty.
*/
constructor(
name: string,
- codes: KeycodeLayout.CodeMap,
- modifierKeys: string[] = []
+ keyCodes: KeycodeLayout.CodeMap,
+ modifierKeys: string[] = [],
+ codes: KeycodeLayout.ModernCodeMap = {}
) {
this.name = name;
- this._codes = codes;
- this._keys = KeycodeLayout.extractKeys(codes);
+ this._legacyCodes = keyCodes;
+ this._modernCodes = codes;
+ this._keys = KeycodeLayout.extractKeys(keyCodes, codes);
this._modifierKeys = KeycodeLayout.convertToKeySet(modifierKeys);
}
@@ -149,7 +168,8 @@ export class KeycodeLayout implements IKeyboardLayout {
* @returns `true` if the key is valid, `false` otherwise.
*/
isValidKey(key: string): boolean {
- return key in this._keys;
+ key = Private.normalizeCtrl(key);
+ return key in this._keys || Private.isSpecialCharacter(key);
}
/**
@@ -160,6 +180,7 @@ export class KeycodeLayout implements IKeyboardLayout {
* @returns `true` if the key is a modifier key, `false` otherwise.
*/
isModifierKey(key: string): boolean {
+ key = Private.normalizeCtrl(key);
return key in this._modifierKeys;
}
@@ -172,11 +193,22 @@ export class KeycodeLayout implements IKeyboardLayout {
* the event does not represent a valid primary key.
*/
keyForKeydownEvent(event: KeyboardEvent): string {
- return this._codes[event.keyCode] || '';
+ if (
+ event.code !== '' &&
+ event.code !== 'Unidentified' &&
+ event.code in this._modernCodes
+ ) {
+ return this._modernCodes[event.code];
+ }
+ return (
+ this._legacyCodes[event.keyCode] ||
+ (Private.isSpecialCharacter(event.key) ? event.key : '')
+ );
}
private _keys: KeycodeLayout.KeySet;
- private _codes: KeycodeLayout.CodeMap;
+ private _legacyCodes: KeycodeLayout.CodeMap;
+ private _modernCodes: KeycodeLayout.ModernCodeMap;
private _modifierKeys: KeycodeLayout.KeySet;
}
@@ -187,7 +219,12 @@ export namespace KeycodeLayout {
/**
* A type alias for a keycode map.
*/
- export type CodeMap = { readonly [code: number]: string };
+ export type CodeMap = { readonly [keyCode: number]: string };
+
+ /**
+ * A type alias for a code map.
+ */
+ export type ModernCodeMap = { readonly [code: string]: string };
/**
* A type alias for a key set.
@@ -197,12 +234,19 @@ export namespace KeycodeLayout {
/**
* Extract the set of keys from a code map.
*
- * @param codes - The code map of interest.
+ * @param keyCodes - A legacy code map mapping form event.keyCode to key.
+ * @param codes - A modern code map mapping from event.code to key.
*
* @returns A set of the keys in the code map.
*/
- export function extractKeys(codes: CodeMap): KeySet {
+ export function extractKeys(
+ keyCodes: CodeMap,
+ codes: ModernCodeMap = {}
+ ): KeySet {
let keys: any = Object.create(null);
+ for (let c in keyCodes) {
+ keys[keyCodes[c]] = true;
+ }
for (let c in codes) {
keys[codes[c]] = true;
}
@@ -253,7 +297,7 @@ export const EN_US: IKeyboardLayout = new KeycodeLayout(
9: 'Tab',
13: 'Enter',
16: 'Shift',
- 17: 'Ctrl',
+ 17: 'Control',
18: 'Alt',
19: 'Pause',
27: 'Escape',
@@ -349,9 +393,139 @@ export const EN_US: IKeyboardLayout = new KeycodeLayout(
222: "'",
224: 'Meta' // firefox
},
- ['Shift', 'Ctrl', 'Alt', 'Meta'] // modifier keys
+ MODIFIER_KEYS,
+ {
+ AltLeft: 'Alt',
+ AltRight: 'Alt',
+ ArrowDown: 'ArrowDown',
+ ArrowLeft: 'ArrowLeft',
+ ArrowRight: 'ArrowRight',
+ ArrowUp: 'ArrowUp',
+ Backquote: '`',
+ Backslash: '\\',
+ Backspace: 'Backspace',
+ BracketLeft: '[',
+ BracketRight: ']',
+ CapsLock: 'CapsLock',
+ Comma: ',',
+ ControlLeft: 'Control',
+ ControlRight: 'Control',
+ Delete: 'Delete',
+ Digit0: '0',
+ Digit1: '1',
+ Digit2: '2',
+ Digit3: '3',
+ Digit4: '4',
+ Digit5: '5',
+ Digit6: '6',
+ Digit7: '7',
+ Digit8: '8',
+ Digit9: '9',
+ End: 'End',
+ Equal: '=',
+ Escape: 'Escape',
+ F1: 'F1',
+ F10: 'F10',
+ F11: 'F11',
+ F12: 'F12',
+ F2: 'F2',
+ F3: 'F3',
+ F4: 'F4',
+ F5: 'F5',
+ F6: 'F6',
+ F7: 'F7',
+ F8: 'F8',
+ F9: 'F9',
+ Home: 'Home',
+ Insert: 'Insert',
+ KeyA: 'A',
+ KeyB: 'B',
+ KeyC: 'C',
+ KeyD: 'D',
+ KeyE: 'E',
+ KeyF: 'F',
+ KeyG: 'G',
+ KeyH: 'H',
+ KeyI: 'I',
+ KeyJ: 'J',
+ KeyK: 'K',
+ KeyL: 'L',
+ KeyM: 'M',
+ KeyN: 'N',
+ KeyO: 'O',
+ KeyP: 'P',
+ KeyQ: 'Q',
+ KeyR: 'R',
+ KeyS: 'S',
+ KeyT: 'T',
+ KeyU: 'U',
+ KeyV: 'V',
+ KeyW: 'W',
+ KeyX: 'X',
+ KeyY: 'Y',
+ KeyZ: 'Z',
+ MetaLeft: 'Meta',
+ MetaRight: 'Meta',
+ Minus: '-',
+ NumLock: 'NumLock',
+ Numpad0: 'Insert',
+ Numpad1: 'End',
+ Numpad2: 'ArrowDown',
+ Numpad3: 'PageDown',
+ Numpad4: 'ArrowLeft',
+ Numpad5: 'Clear',
+ Numpad6: 'ArrowRight',
+ Numpad7: 'Home',
+ Numpad8: 'ArrowUp',
+ Numpad9: 'PageUp',
+ NumpadAdd: '+',
+ NumpadDecimal: 'Delete',
+ NumpadDivide: '/',
+ NumpadEnter: 'Enter',
+ NumpadMultiply: '*',
+ NumpadSubtract: '-',
+ OSLeft: 'OS', // firefox
+ OSRight: 'OS', // firefox
+ PageDown: 'PageDown',
+ PageUp: 'PageUp',
+ Pause: 'Pause',
+ Period: '.',
+ PrintScreen: 'PrintScreen',
+ Quote: "'",
+ Semicolon: ';',
+ ShiftLeft: 'Shift',
+ ShiftRight: 'Shift',
+ Slash: '/',
+ Tab: 'Tab'
+ }
);
+/**
+ * Whether the browser supports inspecting the keyboard layout.
+ *
+ * @alpha
+ */
+export function hasBrowserLayout(): boolean {
+ return !!(navigator as any)?.keyboard?.getLayoutMap;
+}
+
+/**
+ * Use the keyboard layout of the browser if it supports it.
+ *
+ * @alpha
+ * @returns Whether the browser supports inspecting the keyboard layout.
+ */
+export async function useBrowserLayout(): Promise {
+ // avoid updating if already set
+ if (Private.keyboardLayout.name !== Private.INTERNAL_BROWSER_LAYOUT_NAME) {
+ if (!(await Private.updateBrowserLayout())) {
+ return false;
+ }
+ }
+ Private.subscribeBrowserUpdates();
+ return true;
+}
+
/**
* The namespace for the module implementation details.
*/
@@ -360,4 +534,104 @@ namespace Private {
* The global keyboard layout instance.
*/
export let keyboardLayout = EN_US;
+
+ /**
+ * Internal name for browser-based keyboard layout.
+ */
+ export const INTERNAL_BROWSER_LAYOUT_NAME = '__lumino-internal-browser';
+
+ /**
+ * Whether the key value can be considered a special character.
+ *
+ * @param key - The key value that is to be considered
+ */
+ export function isSpecialCharacter(key: string): boolean {
+ // If the value starts with an uppercase latin character and is followed by one
+ // or more alphanumeric basic latin characters, it is likely a special key.
+ return SPECIAL_KEYS.has(key);
+ }
+
+ /**
+ * Normalize Ctrl to Control for backwards compatability.
+ *
+ * @param key - The key value that is to be normalized
+ * @returns The normalized key string
+ */
+ export function normalizeCtrl(key: string): string {
+ return key === 'Ctrl' ? 'Control' : key;
+ }
+
+ /**
+ * Polyfill until Object.fromEntries is available.
+ */
+ function fromEntries(entries: Iterable<[string, T]>) {
+ const ret = {} as { [key: string]: T };
+ for (const [key, value] of entries) {
+ ret[key] = value;
+ }
+ return ret;
+ }
+
+ /**
+ * Get the current browser keyboard layout, or null if unsupported.
+ *
+ * @returns The keyboard layout of the browser at this moment if supported, otherwise null.
+ */
+ export async function getBrowserKeyboardLayout(): Promise<
+ IKeyboardLayout | undefined
+ > {
+ const keyboardApi = (navigator as any)?.keyboard;
+ if (!keyboardApi) {
+ return undefined;
+ }
+ const browserMap = await keyboardApi.getLayoutMap();
+ if (!browserMap) {
+ return undefined;
+ }
+ return new KeycodeLayout(
+ INTERNAL_BROWSER_LAYOUT_NAME,
+ {},
+ MODIFIER_KEYS,
+ fromEntries(
+ browserMap
+ .entries()
+ .map(([k, v]: string[]) => [
+ k,
+ v.charAt(0).toUpperCase() + v.slice(1)
+ ])
+ )
+ );
+ }
+
+ /**
+ * Set the active layout to that of the browser at this moment.
+ */
+ export async function updateBrowserLayout(): Promise {
+ const initial = await getBrowserKeyboardLayout();
+ if (!initial) {
+ return false;
+ }
+ keyboardLayout = initial;
+ return true;
+ }
+
+ /**
+ * Subscribe to any browser updates to keyboard layout
+ */
+ export function subscribeBrowserUpdates(): void {
+ const keyboardApi = (navigator as any)?.keyboard;
+ if (keyboardApi?.addEventListener) {
+ keyboardApi.addEventListener('layoutchange', Private.updateBrowserLayout);
+ }
+ }
+
+ /**
+ * Unsubscribe from any browser updates
+ */
+ export function unsubscribeBrowserUpdates(): void {
+ const keyboardApi = (navigator as any)?.keyboard;
+ if (keyboardApi?.removeEventListener) {
+ keyboardApi.removeEventListener(updateBrowserLayout);
+ }
+ }
}
diff --git a/packages/keyboard/src/special-keys.ts b/packages/keyboard/src/special-keys.ts
new file mode 100644
index 000000000..30acaf2fc
--- /dev/null
+++ b/packages/keyboard/src/special-keys.ts
@@ -0,0 +1,338 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+/**
+ * Known modifier keys.
+ *
+ * Ref. https://www.w3.org/TR/uievents-key/#keys-modifier
+ */
+export const MODIFIER_KEYS = [
+ 'Alt',
+ 'AltGraph',
+ 'CapsLock',
+ 'Control',
+ 'Fn',
+ 'FnLock',
+ 'Meta',
+ 'NumLock',
+ 'ScrollLock',
+ 'Shift',
+ 'Symbol',
+ 'SymbolLock',
+ 'Hyper',
+ 'Super'
+];
+
+/**
+ * The list of predefined special characters according to W3C.
+ *
+ * This list does not include "Unidentified" or "Dead".
+ *
+ * Ref. https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+ */
+export const SPECIAL_KEYS = new Set([
+ 'Alt',
+ 'AltGraph',
+ 'CapsLock',
+ 'Control',
+ 'Fn',
+ 'FnLock',
+ 'Meta',
+ 'NumLock',
+ 'ScrollLock',
+ 'Shift',
+ 'Symbol',
+ 'SymbolLock',
+ 'Hyper',
+ 'Super',
+ 'Enter',
+ 'Tab',
+ 'ArrowDown',
+ 'ArrowLeft',
+ 'ArrowRight',
+ 'ArrowUp',
+ 'End',
+ 'Home',
+ 'PageDown',
+ 'PageUp',
+ 'Backspace',
+ 'Clear',
+ 'Copy',
+ 'CrSel',
+ 'Cut',
+ 'Delete',
+ 'EraseEof',
+ 'ExSel',
+ 'Insert',
+ 'Paste',
+ 'Redo',
+ 'Undo',
+ 'Accept',
+ 'Again',
+ 'Attn',
+ 'Cancel',
+ 'ContextMenu',
+ 'Escape',
+ 'Execute',
+ 'Find',
+ 'Help',
+ 'Pause',
+ 'Play',
+ 'Props',
+ 'Select',
+ 'ZoomIn',
+ 'ZoomOut',
+ 'BrightnessDown',
+ 'BrightnessUp',
+ 'Eject',
+ 'LogOff',
+ 'Power',
+ 'PowerOff',
+ 'PrintScreen',
+ 'Hibernate',
+ 'Standby',
+ 'WakeUp',
+ 'AllCandidates',
+ 'Alphanumeric',
+ 'CodeInput',
+ 'Compose',
+ 'Convert',
+ 'FinalMode',
+ 'GroupFirst',
+ 'GroupLast',
+ 'GroupNext',
+ 'GroupPrevious',
+ 'ModeChange',
+ 'NextCandidate',
+ 'NonConvert',
+ 'PreviousCandidate',
+ 'Process',
+ 'SingleCandidate',
+ 'HangulMode',
+ 'HanjaMode',
+ 'JunjaMode',
+ 'Eisu',
+ 'Hankaku',
+ 'Hiragana',
+ 'HiraganaKatakana',
+ 'KanaMode',
+ 'KanjiMode',
+ 'Katakana',
+ 'Romaji',
+ 'Zenkaku',
+ 'ZenkakuHankaku',
+ 'F1',
+ 'F2',
+ 'F3',
+ 'F4',
+ 'F5',
+ 'F6',
+ 'F7',
+ 'F8',
+ 'F9',
+ 'F10',
+ 'F11',
+ 'F12',
+ 'Soft1',
+ 'Soft2',
+ 'Soft3',
+ 'Soft4',
+ 'ChannelDown',
+ 'ChannelUp',
+ 'Close',
+ 'MailForward',
+ 'MailReply',
+ 'MailSend',
+ 'MediaClose',
+ 'MediaFastForward',
+ 'MediaPause',
+ 'MediaPlay',
+ 'MediaPlayPause',
+ 'MediaRecord',
+ 'MediaRewind',
+ 'MediaStop',
+ 'MediaTrackNext',
+ 'MediaTrackPrevious',
+ 'New',
+ 'Open',
+ 'Print',
+ 'Save',
+ 'SpellCheck',
+ 'Key11',
+ 'Key12',
+ 'AudioBalanceLeft',
+ 'AudioBalanceRight',
+ 'AudioBassBoostDown',
+ 'AudioBassBoostToggle',
+ 'AudioBassBoostUp',
+ 'AudioFaderFront',
+ 'AudioFaderRear',
+ 'AudioSurroundModeNext',
+ 'AudioTrebleDown',
+ 'AudioTrebleUp',
+ 'AudioVolumeDown',
+ 'AudioVolumeUp',
+ 'AudioVolumeMute',
+ 'MicrophoneToggle',
+ 'MicrophoneVolumeDown',
+ 'MicrophoneVolumeUp',
+ 'MicrophoneVolumeMute',
+ 'SpeechCorrectionList',
+ 'SpeechInputToggle',
+ 'LaunchApplication1',
+ 'LaunchApplication2',
+ 'LaunchCalendar',
+ 'LaunchContacts',
+ 'LaunchMail',
+ 'LaunchMediaPlayer',
+ 'LaunchMusicPlayer',
+ 'LaunchPhone',
+ 'LaunchScreenSaver',
+ 'LaunchSpreadsheet',
+ 'LaunchWebBrowser',
+ 'LaunchWebCam',
+ 'LaunchWordProcessor',
+ 'BrowserBack',
+ 'BrowserFavorites',
+ 'BrowserForward',
+ 'BrowserHome',
+ 'BrowserRefresh',
+ 'BrowserSearch',
+ 'BrowserStop',
+ 'AppSwitch',
+ 'Call',
+ 'Camera',
+ 'CameraFocus',
+ 'EndCall',
+ 'GoBack',
+ 'GoHome',
+ 'HeadsetHook',
+ 'LastNumberRedial',
+ 'Notification',
+ 'MannerMode',
+ 'VoiceDial',
+ 'TV',
+ 'TV3DMode',
+ 'TVAntennaCable',
+ 'TVAudioDescription',
+ 'TVAudioDescriptionMixDown',
+ 'TVAudioDescriptionMixUp',
+ 'TVContentsMenu',
+ 'TVDataService',
+ 'TVInput',
+ 'TVInputComponent1',
+ 'TVInputComponent2',
+ 'TVInputComposite1',
+ 'TVInputComposite2',
+ 'TVInputHDMI1',
+ 'TVInputHDMI2',
+ 'TVInputHDMI3',
+ 'TVInputHDMI4',
+ 'TVInputVGA1',
+ 'TVMediaContext',
+ 'TVNetwork',
+ 'TVNumberEntry',
+ 'TVPower',
+ 'TVRadioService',
+ 'TVSatellite',
+ 'TVSatelliteBS',
+ 'TVSatelliteCS',
+ 'TVSatelliteToggle',
+ 'TVTerrestrialAnalog',
+ 'TVTerrestrialDigital',
+ 'TVTimer',
+ 'AVRInput',
+ 'AVRPower',
+ 'ColorF0Red',
+ 'ColorF1Green',
+ 'ColorF2Yellow',
+ 'ColorF3Blue',
+ 'ColorF4Grey',
+ 'ColorF5Brown',
+ 'ClosedCaptionToggle',
+ 'Dimmer',
+ 'DisplaySwap',
+ 'DVR',
+ 'Exit',
+ 'FavoriteClear0',
+ 'FavoriteClear1',
+ 'FavoriteClear2',
+ 'FavoriteClear3',
+ 'FavoriteRecall0',
+ 'FavoriteRecall1',
+ 'FavoriteRecall2',
+ 'FavoriteRecall3',
+ 'FavoriteStore0',
+ 'FavoriteStore1',
+ 'FavoriteStore2',
+ 'FavoriteStore3',
+ 'Guide',
+ 'GuideNextDay',
+ 'GuidePreviousDay',
+ 'Info',
+ 'InstantReplay',
+ 'Link',
+ 'ListProgram',
+ 'LiveContent',
+ 'Lock',
+ 'MediaApps',
+ 'MediaAudioTrack',
+ 'MediaLast',
+ 'MediaSkipBackward',
+ 'MediaSkipForward',
+ 'MediaStepBackward',
+ 'MediaStepForward',
+ 'MediaTopMenu',
+ 'NavigateIn',
+ 'NavigateNext',
+ 'NavigateOut',
+ 'NavigatePrevious',
+ 'NextFavoriteChannel',
+ 'NextUserProfile',
+ 'OnDemand',
+ 'Pairing',
+ 'PinPDown',
+ 'PinPMove',
+ 'PinPToggle',
+ 'PinPUp',
+ 'PlaySpeedDown',
+ 'PlaySpeedReset',
+ 'PlaySpeedUp',
+ 'RandomToggle',
+ 'RcLowBattery',
+ 'RecordSpeedNext',
+ 'RfBypass',
+ 'ScanChannelsToggle',
+ 'ScreenModeNext',
+ 'Settings',
+ 'SplitScreenToggle',
+ 'STBInput',
+ 'STBPower',
+ 'Subtitle',
+ 'Teletext',
+ 'VideoModeNext',
+ 'Wink',
+ 'ZoomToggle',
+ 'AudioVolumeDown',
+ 'AudioVolumeUp',
+ 'AudioVolumeMute',
+ 'BrowserBack',
+ 'BrowserForward',
+ 'ChannelDown',
+ 'ChannelUp',
+ 'ContextMenu',
+ 'Eject',
+ 'End',
+ 'Enter',
+ 'Home',
+ 'MediaFastForward',
+ 'MediaPlay',
+ 'MediaPlayPause',
+ 'MediaRecord',
+ 'MediaRewind',
+ 'MediaStop',
+ 'MediaNextTrack',
+ 'MediaPause',
+ 'MediaPreviousTrack',
+ 'Power'
+]);
diff --git a/packages/keyboard/tests/src/index.spec.ts b/packages/keyboard/tests/src/index.spec.ts
index ca2f97f7c..98763c3fa 100644
--- a/packages/keyboard/tests/src/index.spec.ts
+++ b/packages/keyboard/tests/src/index.spec.ts
@@ -16,6 +16,235 @@ import {
setKeyboardLayout
} from '@lumino/keyboard';
+const MODIFIER_KEYS = [
+ 'Alt',
+ 'AltGraph',
+ 'CapsLock',
+ 'Control',
+ 'Fn',
+ 'FnLock',
+ 'Meta',
+ 'NumLock',
+ 'ScrollLock',
+ 'Shift',
+ 'Symbol',
+ 'SymbolLock'
+];
+
+/**
+ * A common Norwegian keyboard layout.
+ *
+ * Note that this does not include Apple's magic Keyboards, as they map
+ * the keys next to the Enter key differently (BracketRight and
+ * Backslash on en-US).
+ */
+export const NB_NO = new KeycodeLayout('nb-NO', {}, MODIFIER_KEYS, {
+ AltLeft: 'Alt',
+ AltRight: 'AltGraph',
+ Backquote: '|',
+ Backslash: "'",
+ Backspace: 'Backspace',
+ BracketLeft: 'Å',
+ CapsLock: 'CapsLock',
+ Comma: ',',
+ ContextMenu: 'ContextMenu',
+ ControlLeft: 'Control',
+ ControlRight: 'Control',
+ Delete: 'Delete',
+ Digit0: '0',
+ Digit1: '1',
+ Digit2: '2',
+ Digit3: '3',
+ Digit4: '4',
+ Digit5: '5',
+ Digit6: '6',
+ Digit7: '7',
+ Digit8: '8',
+ Digit9: '9',
+ End: 'End',
+ Enter: 'Enter',
+ Equal: '\\',
+ Escape: 'Escape',
+ F1: 'F1',
+ F10: 'F10',
+ F11: 'F11',
+ F12: 'F12',
+ F2: 'F2',
+ F3: 'F3',
+ F4: 'F4',
+ F5: 'F5',
+ F6: 'F6',
+ F7: 'F7',
+ F8: 'F8',
+ F9: 'F9',
+ Home: 'Home',
+ Insert: 'Insert',
+ IntlBackslash: '<',
+ KeyA: 'A',
+ KeyB: 'B',
+ KeyC: 'C',
+ KeyD: 'D',
+ KeyE: 'E',
+ KeyF: 'F',
+ KeyG: 'G',
+ KeyH: 'H',
+ KeyI: 'I',
+ KeyJ: 'J',
+ KeyK: 'K',
+ KeyL: 'L',
+ KeyM: 'M',
+ KeyN: 'N',
+ KeyO: 'O',
+ KeyP: 'P',
+ KeyQ: 'Q',
+ KeyR: 'R',
+ KeyS: 'S',
+ KeyT: 'T',
+ KeyU: 'U',
+ KeyV: 'V',
+ KeyW: 'W',
+ KeyX: 'X',
+ KeyY: 'Y',
+ KeyZ: 'Z',
+ MetaLeft: 'Meta', // chrome
+ MetaRight: 'Meta', // chrome
+ Minus: '+',
+ NumLock: 'NumLock',
+ Numpad0: 'Insert',
+ Numpad1: 'End',
+ Numpad2: 'ArrowDown',
+ Numpad3: 'PageDown',
+ Numpad4: 'ArrowLeft',
+ Numpad5: 'Clear',
+ Numpad6: 'ArrowRight',
+ Numpad7: 'Home',
+ Numpad8: 'ArrowUp',
+ Numpad9: 'PageUp',
+ NumpadAdd: '+',
+ NumpadDecimal: 'Delete',
+ NumpadDivide: '/',
+ NumpadEnter: 'Enter',
+ NumpadMultiply: '*',
+ NumpadSubtract: '-',
+ OSLeft: 'OS', // firefox
+ OSRight: 'OS', // firefox
+ PageDown: 'PageDown',
+ PageUp: 'PageUp',
+ Pause: 'Pause',
+ Period: '.',
+ PrintScreen: 'PrintScreen',
+ Quote: 'Æ',
+ ScrollLock: 'ScrollLock',
+ Semicolon: 'Ø',
+ ShiftLeft: 'Shift',
+ ShiftRight: 'Shift',
+ Slash: '-',
+ Space: ' ',
+ Tab: 'Tab'
+});
+
+/**
+ * A common French keyboard layout
+ */
+export const FR_FR = new KeycodeLayout('fr-FR', {}, MODIFIER_KEYS, {
+ AltLeft: 'Alt',
+ AltRight: 'AltGraph',
+ ArrowDown: 'ArrowDown',
+ ArrowLeft: 'ArrowLeft',
+ ArrowRight: 'ArrowRight',
+ ArrowUp: 'ArrowUp',
+ Backquote: '²',
+ Backslash: '*',
+ Backspace: 'Backspace',
+ BracketRight: '$',
+ Comma: ';',
+ ControlLeft: 'Control',
+ ControlRight: 'Control',
+ Delete: 'Delete',
+ Digit0: 'À',
+ Digit1: '&',
+ Digit2: 'É',
+ Digit3: '"',
+ Digit4: "'",
+ Digit5: '(',
+ Digit6: '-',
+ Digit7: 'È',
+ Digit8: '_',
+ Digit9: 'Ç',
+ End: 'End',
+ Enter: 'Enter',
+ Equal: '=',
+ Escape: 'Escape',
+ F1: 'F1',
+ F10: 'F10',
+ F11: 'F11',
+ F12: 'F12',
+ F2: 'F2',
+ F3: 'F3',
+ F4: 'F4',
+ F5: 'F5',
+ F6: 'F6',
+ F7: 'F7',
+ F8: 'F8',
+ F9: 'F9',
+ Home: 'Home',
+ Insert: 'Insert',
+ IntlBackslash: '<',
+ KeyA: 'Q',
+ KeyB: 'B',
+ KeyC: 'C',
+ KeyD: 'D',
+ KeyE: 'E',
+ KeyF: 'F',
+ KeyG: 'G',
+ KeyH: 'H',
+ KeyI: 'I',
+ KeyJ: 'J',
+ KeyK: 'K',
+ KeyL: 'L',
+ KeyM: ',',
+ KeyN: 'N',
+ KeyO: 'O',
+ KeyP: 'P',
+ KeyQ: 'A',
+ KeyR: 'R',
+ KeyS: 'S',
+ KeyT: 'T',
+ KeyU: 'U',
+ KeyV: 'V',
+ KeyW: 'Z',
+ KeyX: 'X',
+ KeyY: 'Y',
+ KeyZ: 'W',
+ Minus: ')',
+ Numpad0: '0',
+ Numpad1: '1',
+ Numpad2: '2',
+ Numpad3: '3',
+ Numpad4: '4',
+ Numpad5: '5',
+ Numpad6: '6',
+ Numpad7: '7',
+ Numpad8: '8',
+ Numpad9: '9',
+ NumpadAdd: '+',
+ NumpadDecimal: '.',
+ NumpadDivide: '/',
+ NumpadEnter: 'Enter',
+ NumpadMultiply: '*',
+ NumpadSubtract: '-',
+ PageDown: 'PageDown',
+ PageUp: 'PageUp',
+ Period: ':',
+ Quote: 'Ù',
+ ScrollLock: 'ScrollLock',
+ Semicolon: 'M',
+ ShiftLeft: 'Shift',
+ ShiftRight: 'Shift',
+ Slash: '!',
+ Tab: 'Tab'
+});
+
describe('@lumino/keyboard', () => {
describe('getKeyboardLayout()', () => {
it('should return the global keyboard layout', () => {
@@ -50,20 +279,26 @@ describe('@lumino/keyboard', () => {
describe('#keys()', () => {
it('should get an array of all key values supported by the layout', () => {
- let layout = new KeycodeLayout('ab-cd', { 100: 'F' });
+ let layout = new KeycodeLayout('ab-cd', { 100: 'F' }, [], { F4: 'F4' });
let keys = layout.keys();
- expect(keys.length).to.equal(1);
- expect(keys[0]).to.equal('F');
+ expect(keys.length).to.equal(2);
+ expect(keys[0]).to.equal('F', 'F4');
});
});
describe('#isValidKey()', () => {
it('should test whether the key is valid for the layout', () => {
- let layout = new KeycodeLayout('foo', { 100: 'F' });
+ let layout = new KeycodeLayout('foo', { 100: 'F' }, [], { F4: 'F4' });
expect(layout.isValidKey('F')).to.equal(true);
+ expect(layout.isValidKey('F4')).to.equal(true);
expect(layout.isValidKey('A')).to.equal(false);
});
+ it('should treat unmodified special keys as valid', () => {
+ let layout = new KeycodeLayout('foo', { 100: 'F' }, [], { F4: 'F4' });
+ expect(layout.isValidKey('MediaPlayPause')).to.equal(true);
+ });
+
it('should treat modifier keys as valid', () => {
let layout = new KeycodeLayout('foo', { 100: 'F', 101: 'A' }, ['A']);
expect(layout.isValidKey('A')).to.equal(true);
@@ -97,6 +332,50 @@ describe('@lumino/keyboard', () => {
let key = layout.keyForKeydownEvent(event as KeyboardEvent);
expect(key).to.equal('');
});
+
+ it('should get the key from a `code` value', () => {
+ let layout = new KeycodeLayout('foo', { 100: 'F' }, [], {
+ Escape: 'Escape'
+ });
+ let event = new KeyboardEvent('keydown', { code: 'Escape' });
+ let key = layout.keyForKeydownEvent(event as KeyboardEvent);
+ expect(key).to.equal('Escape');
+ });
+
+ it('should fall back to keyCode for Unidentified', () => {
+ let layout = new KeycodeLayout('foo', { 100: 'F' }, [], {
+ Escape: 'Escape'
+ });
+ let event = new KeyboardEvent('keydown', {
+ code: 'Unidentified',
+ keyCode: 100
+ });
+ let key = layout.keyForKeydownEvent(event as KeyboardEvent);
+ expect(key).to.equal('F');
+ });
+
+ it('should treat special keys as valid', () => {
+ let layout = new KeycodeLayout('foo', { 100: 'F' }, [], { F4: 'F4' });
+ let event = new KeyboardEvent('keydown', {
+ code: 'Unidentified',
+ ctrlKey: true,
+ key: 'MediaPlayPause',
+ keyCode: 170
+ });
+ let key = layout.keyForKeydownEvent(event as KeyboardEvent);
+ expect(key).to.equal('MediaPlayPause');
+ });
+
+ it('should use keyCode over special key value', () => {
+ let layout = new KeycodeLayout('foo', { 100: 'F' }, [], { F4: 'F4' });
+ let event = new KeyboardEvent('keydown', {
+ code: 'Unidentified',
+ key: 'MediaPlayPause',
+ keyCode: 100
+ });
+ let key = layout.keyForKeydownEvent(event as KeyboardEvent);
+ expect(key).to.equal('F');
+ });
});
describe('.extractKeys()', () => {
@@ -130,16 +409,75 @@ describe('@lumino/keyboard', () => {
it('should have modifier keys', () => {
expect(EN_US.isValidKey('Shift')).to.equal(true);
- expect(EN_US.isValidKey('Ctrl')).to.equal(true);
+ expect(EN_US.isValidKey('Control')).to.equal(true);
expect(EN_US.isValidKey('Alt')).to.equal(true);
expect(EN_US.isValidKey('Meta')).to.equal(true);
});
it('should correctly detect modifier keys', () => {
expect(EN_US.isModifierKey('Shift')).to.equal(true);
- expect(EN_US.isModifierKey('Ctrl')).to.equal(true);
+ expect(EN_US.isModifierKey('Control')).to.equal(true);
expect(EN_US.isModifierKey('Alt')).to.equal(true);
expect(EN_US.isModifierKey('Meta')).to.equal(true);
});
});
+
+ describe('FR_FR', () => {
+ it('should be a keycode layout', () => {
+ expect(FR_FR).to.be.an.instanceof(KeycodeLayout);
+ });
+
+ it('should have standardized keys', () => {
+ expect(FR_FR.isValidKey('A')).to.equal(true);
+ expect(FR_FR.isValidKey('Z')).to.equal(true);
+ expect(FR_FR.isValidKey('0')).to.equal(true);
+ expect(FR_FR.isValidKey('a')).to.equal(false);
+ expect(FR_FR.isValidKey('Ù')).to.equal(true);
+ });
+
+ it('should have modifier keys', () => {
+ expect(FR_FR.isValidKey('Shift')).to.equal(true);
+ expect(FR_FR.isValidKey('Control')).to.equal(true);
+ expect(FR_FR.isValidKey('Alt')).to.equal(true);
+ expect(NB_NO.isValidKey('AltGraph')).to.equal(true);
+ expect(FR_FR.isValidKey('Meta')).to.equal(true);
+ });
+
+ it('should correctly detect modifier keys', () => {
+ expect(FR_FR.isModifierKey('Shift')).to.equal(true);
+ expect(FR_FR.isModifierKey('Control')).to.equal(true);
+ expect(FR_FR.isModifierKey('Alt')).to.equal(true);
+ expect(FR_FR.isModifierKey('Meta')).to.equal(true);
+ });
+ });
+
+ describe('NB_NO', () => {
+ it('should be a keycode layout', () => {
+ expect(NB_NO).to.be.an.instanceof(KeycodeLayout);
+ });
+
+ it('should have standardized keys', () => {
+ expect(NB_NO.isValidKey('A')).to.equal(true);
+ expect(NB_NO.isValidKey('Z')).to.equal(true);
+ expect(NB_NO.isValidKey('0')).to.equal(true);
+ expect(NB_NO.isValidKey('a')).to.equal(false);
+ expect(NB_NO.isValidKey('Æ')).to.equal(true);
+ });
+
+ it('should have modifier keys', () => {
+ expect(NB_NO.isValidKey('Shift')).to.equal(true);
+ expect(NB_NO.isValidKey('Control')).to.equal(true);
+ expect(NB_NO.isValidKey('Alt')).to.equal(true);
+ expect(NB_NO.isValidKey('AltGraph')).to.equal(true);
+ expect(NB_NO.isValidKey('Meta')).to.equal(true);
+ });
+
+ it('should correctly detect modifier keys', () => {
+ expect(NB_NO.isModifierKey('Shift')).to.equal(true);
+ expect(NB_NO.isModifierKey('Control')).to.equal(true);
+ expect(NB_NO.isModifierKey('Alt')).to.equal(true);
+ expect(NB_NO.isModifierKey('AltGraph')).to.equal(true);
+ expect(NB_NO.isModifierKey('Meta')).to.equal(true);
+ });
+ });
});
diff --git a/review/api/keyboard.api.md b/review/api/keyboard.api.md
index 0eb5a147c..01d94b09a 100644
--- a/review/api/keyboard.api.md
+++ b/review/api/keyboard.api.md
@@ -10,6 +10,9 @@ export const EN_US: IKeyboardLayout;
// @public
export function getKeyboardLayout(): IKeyboardLayout;
+// @alpha
+export function hasBrowserLayout(): boolean;
+
// @public
export interface IKeyboardLayout {
isModifierKey(key: string): boolean;
@@ -21,7 +24,7 @@ export interface IKeyboardLayout {
// @public
export class KeycodeLayout implements IKeyboardLayout {
- constructor(name: string, codes: KeycodeLayout.CodeMap, modifierKeys?: string[]);
+ constructor(name: string, keyCodes: KeycodeLayout.CodeMap, modifierKeys?: string[], codes?: KeycodeLayout.ModernCodeMap);
isModifierKey(key: string): boolean;
isValidKey(key: string): boolean;
keyForKeydownEvent(event: KeyboardEvent): string;
@@ -32,16 +35,22 @@ export class KeycodeLayout implements IKeyboardLayout {
// @public
export namespace KeycodeLayout {
export type CodeMap = {
- readonly [code: number]: string;
+ readonly [keyCode: number]: string;
};
export function convertToKeySet(keys: string[]): KeySet;
- export function extractKeys(codes: CodeMap): KeySet;
+ export function extractKeys(keyCodes: CodeMap, codes?: ModernCodeMap): KeySet;
export type KeySet = {
readonly [key: string]: boolean;
};
+ export type ModernCodeMap = {
+ readonly [code: string]: string;
+ };
}
// @public
export function setKeyboardLayout(layout: IKeyboardLayout): void;
+// @alpha
+export function useBrowserLayout(): Promise;
+
```
diff --git a/yarn.lock b/yarn.lock
index 48fd6d3c9..c0ba01755 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -616,6 +616,21 @@ __metadata:
languageName: unknown
linkType: soft
+"@lumino/example-keyboard-capture@workspace:examples/example-keyboard-capture":
+ version: 0.0.0-use.local
+ resolution: "@lumino/example-keyboard-capture@workspace:examples/example-keyboard-capture"
+ dependencies:
+ "@lumino/messaging": ^2.0.2
+ "@lumino/signaling": ^2.1.3
+ "@lumino/widgets": ^2.6.0
+ "@rollup/plugin-node-resolve": ^15.0.1
+ rimraf: ^5.0.1
+ rollup: ^3.25.1
+ rollup-plugin-styles: ^4.0.0
+ typescript: ~5.1.3
+ languageName: unknown
+ linkType: soft
+
"@lumino/example-menubar@workspace:examples/example-menubar":
version: 0.0.0-use.local
resolution: "@lumino/example-menubar@workspace:examples/example-menubar"