@ckeditor/ckeditor5-utils 40.0.0 → 40.2.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 +26 -26
- package/LICENSE.md +3 -3
- package/package.json +1 -1
- package/src/abortabledebounce.d.ts +17 -0
- package/src/abortabledebounce.js +22 -0
- package/src/areconnectedthroughproperties.d.ts +11 -11
- package/src/areconnectedthroughproperties.js +73 -73
- package/src/ckeditorerror.d.ts +123 -123
- package/src/ckeditorerror.js +176 -176
- package/src/collection.d.ts +433 -427
- package/src/collection.js +583 -575
- package/src/comparearrays.d.ts +30 -30
- package/src/comparearrays.js +47 -47
- package/src/config.d.ts +163 -163
- package/src/config.js +163 -162
- package/src/count.d.ts +18 -18
- package/src/count.js +24 -24
- package/src/delay.d.ts +19 -19
- package/src/delay.js +26 -26
- package/src/diff.d.ts +31 -31
- package/src/diff.js +115 -115
- package/src/difftochanges.d.ts +59 -59
- package/src/difftochanges.js +79 -79
- package/src/dom/createelement.d.ts +57 -57
- package/src/dom/createelement.js +40 -40
- package/src/dom/emittermixin.d.ts +142 -142
- package/src/dom/emittermixin.js +239 -239
- package/src/dom/findclosestscrollableancestor.d.ts +11 -11
- package/src/dom/findclosestscrollableancestor.js +31 -31
- package/src/dom/getancestors.d.ts +17 -17
- package/src/dom/getancestors.js +27 -27
- package/src/dom/getborderwidths.d.ts +24 -24
- package/src/dom/getborderwidths.js +24 -24
- package/src/dom/getcommonancestor.d.ts +12 -12
- package/src/dom/getcommonancestor.js +25 -25
- package/src/dom/getdatafromelement.d.ts +14 -14
- package/src/dom/getdatafromelement.js +20 -20
- package/src/dom/getpositionedancestor.d.ts +10 -10
- package/src/dom/getpositionedancestor.js +22 -22
- package/src/dom/global.d.ts +32 -32
- package/src/dom/global.js +35 -35
- package/src/dom/indexof.d.ts +14 -14
- package/src/dom/indexof.js +21 -21
- package/src/dom/insertat.d.ts +15 -15
- package/src/dom/insertat.js +17 -17
- package/src/dom/iscomment.d.ts +11 -11
- package/src/dom/iscomment.js +14 -14
- package/src/dom/isnode.d.ts +11 -11
- package/src/dom/isnode.js +21 -21
- package/src/dom/isrange.d.ts +11 -11
- package/src/dom/isrange.js +13 -13
- package/src/dom/istext.d.ts +11 -11
- package/src/dom/istext.js +13 -13
- package/src/dom/isvalidattributename.d.ts +10 -10
- package/src/dom/isvalidattributename.js +22 -22
- package/src/dom/isvisible.d.ts +18 -18
- package/src/dom/isvisible.js +20 -20
- package/src/dom/iswindow.d.ts +11 -11
- package/src/dom/iswindow.js +22 -22
- package/src/dom/position.d.ts +211 -211
- package/src/dom/position.js +313 -313
- package/src/dom/rect.d.ts +195 -195
- package/src/dom/rect.js +474 -474
- package/src/dom/remove.d.ts +13 -13
- package/src/dom/remove.js +18 -18
- package/src/dom/resizeobserver.d.ts +74 -74
- package/src/dom/resizeobserver.js +126 -126
- package/src/dom/scroll.d.ts +73 -73
- package/src/dom/scroll.js +383 -383
- package/src/dom/setdatainelement.d.ts +14 -14
- package/src/dom/setdatainelement.js +20 -20
- package/src/dom/tounit.d.ts +22 -22
- package/src/dom/tounit.js +16 -16
- package/src/elementreplacer.d.ts +31 -31
- package/src/elementreplacer.js +43 -43
- package/src/emittermixin.d.ts +312 -312
- package/src/emittermixin.js +453 -453
- package/src/env.d.ts +117 -117
- package/src/env.js +122 -122
- package/src/eventinfo.d.ts +58 -58
- package/src/eventinfo.js +26 -26
- package/src/fastdiff.d.ts +112 -112
- package/src/fastdiff.js +248 -248
- package/src/first.d.ts +11 -11
- package/src/first.js +17 -17
- package/src/focustracker.d.ts +75 -75
- package/src/focustracker.js +95 -95
- package/src/index.d.ts +64 -61
- package/src/index.js +63 -60
- package/src/inserttopriorityarray.d.ts +30 -30
- package/src/inserttopriorityarray.js +21 -21
- package/src/isiterable.d.ts +14 -14
- package/src/isiterable.js +16 -16
- package/src/keyboard.d.ts +126 -126
- package/src/keyboard.js +221 -221
- package/src/keystrokehandler.d.ts +87 -87
- package/src/keystrokehandler.js +122 -122
- package/src/language.d.ts +17 -17
- package/src/language.js +19 -19
- package/src/locale.d.ts +120 -120
- package/src/locale.js +76 -76
- package/src/mapsequal.d.ts +15 -15
- package/src/mapsequal.js +27 -27
- package/src/mix.d.ts +85 -85
- package/src/mix.js +50 -50
- package/src/nth.d.ts +16 -16
- package/src/nth.js +24 -24
- package/src/objecttomap.d.ts +23 -23
- package/src/objecttomap.js +27 -27
- package/src/observablemixin.d.ts +560 -560
- package/src/observablemixin.js +580 -580
- package/src/priorities.d.ts +33 -33
- package/src/priorities.js +23 -23
- package/src/retry.d.ts +33 -0
- package/src/retry.js +47 -0
- package/src/splicearray.d.ts +26 -26
- package/src/splicearray.js +40 -40
- package/src/spy.d.ts +21 -21
- package/src/spy.js +22 -22
- package/src/toarray.d.ts +25 -25
- package/src/toarray.js +7 -7
- package/src/tomap.d.ts +19 -19
- package/src/tomap.js +29 -29
- package/src/translation-service.d.ts +168 -168
- package/src/translation-service.js +198 -198
- package/src/uid.d.ts +15 -15
- package/src/uid.js +57 -57
- package/src/unicode.d.ts +54 -54
- package/src/unicode.js +85 -85
- package/src/verifylicense.d.ts +15 -15
- package/src/verifylicense.js +87 -87
- package/src/version.d.ts +10 -10
- package/src/version.js +153 -153
- package/src/wait.d.ts +16 -0
- package/src/wait.js +29 -0
package/src/keyboard.js
CHANGED
|
@@ -1,221 +1,221 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
import CKEditorError from './ckeditorerror';
|
|
6
|
-
import env from './env';
|
|
7
|
-
const modifiersToGlyphsMac = {
|
|
8
|
-
ctrl: '⌃',
|
|
9
|
-
cmd: '⌘',
|
|
10
|
-
alt: '⌥',
|
|
11
|
-
shift: '⇧'
|
|
12
|
-
};
|
|
13
|
-
const modifiersToGlyphsNonMac = {
|
|
14
|
-
ctrl: 'Ctrl+',
|
|
15
|
-
alt: 'Alt+',
|
|
16
|
-
shift: 'Shift+'
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* An object with `keyName => keyCode` pairs for a set of known keys.
|
|
20
|
-
*
|
|
21
|
-
* Contains:
|
|
22
|
-
*
|
|
23
|
-
* * `a-z`,
|
|
24
|
-
* * `0-9`,
|
|
25
|
-
* * `f1-f12`,
|
|
26
|
-
* * `` ` ``, `-`, `=`, `[`, `]`, `;`, `'`, `,`, `.`, `/`, `\`,
|
|
27
|
-
* * `arrow(left|up|right|bottom)`,
|
|
28
|
-
* * `backspace`, `delete`, `enter`, `esc`, `tab`,
|
|
29
|
-
* * `ctrl`, `cmd`, `shift`, `alt`.
|
|
30
|
-
*/
|
|
31
|
-
export const keyCodes = generateKnownKeyCodes();
|
|
32
|
-
const keyCodeNames = Object.fromEntries(Object.entries(keyCodes).map(([name, code]) => [code, name.charAt(0).toUpperCase() + name.slice(1)]));
|
|
33
|
-
/**
|
|
34
|
-
* Converts a key name or {@link module:utils/keyboard~KeystrokeInfo keystroke info} into a key code.
|
|
35
|
-
*
|
|
36
|
-
* Note: Key names are matched with {@link module:utils/keyboard#keyCodes} in a case-insensitive way.
|
|
37
|
-
*
|
|
38
|
-
* @param key A key name (see {@link module:utils/keyboard#keyCodes}) or a keystroke data object.
|
|
39
|
-
* @returns Key or keystroke code.
|
|
40
|
-
*/
|
|
41
|
-
export function getCode(key) {
|
|
42
|
-
let keyCode;
|
|
43
|
-
if (typeof key == 'string') {
|
|
44
|
-
keyCode = keyCodes[key.toLowerCase()];
|
|
45
|
-
if (!keyCode) {
|
|
46
|
-
/**
|
|
47
|
-
* Unknown key name. Only key names included in the {@link module:utils/keyboard#keyCodes} can be used.
|
|
48
|
-
*
|
|
49
|
-
* @error keyboard-unknown-key
|
|
50
|
-
* @param {String} key
|
|
51
|
-
*/
|
|
52
|
-
throw new CKEditorError('keyboard-unknown-key', null, { key });
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
keyCode = key.keyCode +
|
|
57
|
-
(key.altKey ? keyCodes.alt : 0) +
|
|
58
|
-
(key.ctrlKey ? keyCodes.ctrl : 0) +
|
|
59
|
-
(key.shiftKey ? keyCodes.shift : 0) +
|
|
60
|
-
(key.metaKey ? keyCodes.cmd : 0);
|
|
61
|
-
}
|
|
62
|
-
return keyCode;
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Parses the keystroke and returns a keystroke code that will match the code returned by
|
|
66
|
-
* {@link module:utils/keyboard~getCode} for the corresponding {@link module:utils/keyboard~KeystrokeInfo keystroke info}.
|
|
67
|
-
*
|
|
68
|
-
* The keystroke can be passed in two formats:
|
|
69
|
-
*
|
|
70
|
-
* * as a single string – e.g. `ctrl + A`,
|
|
71
|
-
* * as an array of {@link module:utils/keyboard~keyCodes known key names} and key codes – e.g.:
|
|
72
|
-
* * `[ 'ctrl', 32 ]` (ctrl + space),
|
|
73
|
-
* * `[ 'ctrl', 'a' ]` (ctrl + A).
|
|
74
|
-
*
|
|
75
|
-
* Note: Key names are matched with {@link module:utils/keyboard#keyCodes} in a case-insensitive way.
|
|
76
|
-
*
|
|
77
|
-
* Note: Only keystrokes with a single non-modifier key are supported (e.g. `ctrl+A` is OK, but `ctrl+A+B` is not).
|
|
78
|
-
*
|
|
79
|
-
* Note: On macOS, keystroke handling is translating the `Ctrl` key to the `Cmd` key and handling only that keystroke.
|
|
80
|
-
* For example, a registered keystroke `Ctrl+A` will be translated to `Cmd+A` on macOS. To disable the translation of some keystroke,
|
|
81
|
-
* use the forced modifier: `Ctrl!+A` (note the exclamation mark).
|
|
82
|
-
*
|
|
83
|
-
* @param keystroke The keystroke definition.
|
|
84
|
-
* @returns Keystroke code.
|
|
85
|
-
*/
|
|
86
|
-
export function parseKeystroke(keystroke) {
|
|
87
|
-
if (typeof keystroke == 'string') {
|
|
88
|
-
keystroke = splitKeystrokeText(keystroke);
|
|
89
|
-
}
|
|
90
|
-
return keystroke
|
|
91
|
-
.map(key => (typeof key == 'string') ? getEnvKeyCode(key) : key)
|
|
92
|
-
.reduce((key, sum) => sum + key, 0);
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Translates any keystroke string text like `"Ctrl+A"` to an
|
|
96
|
-
* environment–specific keystroke, i.e. `"⌘A"` on macOS.
|
|
97
|
-
*
|
|
98
|
-
* @param keystroke The keystroke text.
|
|
99
|
-
* @returns The keystroke text specific for the environment.
|
|
100
|
-
*/
|
|
101
|
-
export function getEnvKeystrokeText(keystroke) {
|
|
102
|
-
let keystrokeCode = parseKeystroke(keystroke);
|
|
103
|
-
const modifiersToGlyphs = Object.entries((env.isMac || env.isiOS) ? modifiersToGlyphsMac : modifiersToGlyphsNonMac);
|
|
104
|
-
const modifiers = modifiersToGlyphs.reduce((modifiers, [name, glyph]) => {
|
|
105
|
-
// Modifier keys are stored as a bit mask so extract those from the keystroke code.
|
|
106
|
-
if ((keystrokeCode & keyCodes[name]) != 0) {
|
|
107
|
-
keystrokeCode &= ~keyCodes[name];
|
|
108
|
-
modifiers += glyph;
|
|
109
|
-
}
|
|
110
|
-
return modifiers;
|
|
111
|
-
}, '');
|
|
112
|
-
return modifiers + (keystrokeCode ? keyCodeNames[keystrokeCode] : '');
|
|
113
|
-
}
|
|
114
|
-
/**
|
|
115
|
-
* Returns `true` if the provided key code represents one of the arrow keys.
|
|
116
|
-
*
|
|
117
|
-
* @param keyCode A key code as in {@link module:utils/keyboard~KeystrokeInfo#keyCode}.
|
|
118
|
-
*/
|
|
119
|
-
export function isArrowKeyCode(keyCode) {
|
|
120
|
-
return keyCode == keyCodes.arrowright ||
|
|
121
|
-
keyCode == keyCodes.arrowleft ||
|
|
122
|
-
keyCode == keyCodes.arrowup ||
|
|
123
|
-
keyCode == keyCodes.arrowdown;
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Returns the direction in which the {@link module:engine/model/documentselection~DocumentSelection selection}
|
|
127
|
-
* will move when the provided arrow key code is pressed considering the language direction of the editor content.
|
|
128
|
-
*
|
|
129
|
-
* For instance, in right–to–left (RTL) content languages, pressing the left arrow means moving the selection right (forward)
|
|
130
|
-
* in the model structure. Similarly, pressing the right arrow moves the selection left (backward).
|
|
131
|
-
*
|
|
132
|
-
* @param keyCode A key code as in {@link module:utils/keyboard~KeystrokeInfo#keyCode}.
|
|
133
|
-
* @param contentLanguageDirection The content language direction, corresponding to
|
|
134
|
-
* {@link module:utils/locale~Locale#contentLanguageDirection}.
|
|
135
|
-
* @returns Localized arrow direction or `undefined` for non-arrow key codes.
|
|
136
|
-
*/
|
|
137
|
-
export function getLocalizedArrowKeyCodeDirection(keyCode, contentLanguageDirection) {
|
|
138
|
-
const isLtrContent = contentLanguageDirection === 'ltr';
|
|
139
|
-
switch (keyCode) {
|
|
140
|
-
case keyCodes.arrowleft:
|
|
141
|
-
return isLtrContent ? 'left' : 'right';
|
|
142
|
-
case keyCodes.arrowright:
|
|
143
|
-
return isLtrContent ? 'right' : 'left';
|
|
144
|
-
case keyCodes.arrowup:
|
|
145
|
-
return 'up';
|
|
146
|
-
case keyCodes.arrowdown:
|
|
147
|
-
return 'down';
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
/**
|
|
151
|
-
* Converts a key name to the key code with mapping based on the env.
|
|
152
|
-
*
|
|
153
|
-
* See: {@link module:utils/keyboard~getCode}.
|
|
154
|
-
*
|
|
155
|
-
* @param key The key name (see {@link module:utils/keyboard#keyCodes}).
|
|
156
|
-
* @returns Key code.
|
|
157
|
-
*/
|
|
158
|
-
function getEnvKeyCode(key) {
|
|
159
|
-
// Don't remap modifier key for forced modifiers.
|
|
160
|
-
if (key.endsWith('!')) {
|
|
161
|
-
return getCode(key.slice(0, -1));
|
|
162
|
-
}
|
|
163
|
-
const code = getCode(key);
|
|
164
|
-
return (env.isMac || env.isiOS) && code == keyCodes.ctrl ? keyCodes.cmd : code;
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* Determines if the provided key code moves the {@link module:engine/model/documentselection~DocumentSelection selection}
|
|
168
|
-
* forward or backward considering the language direction of the editor content.
|
|
169
|
-
*
|
|
170
|
-
* For instance, in right–to–left (RTL) languages, pressing the left arrow means moving forward
|
|
171
|
-
* in the model structure. Similarly, pressing the right arrow moves the selection backward.
|
|
172
|
-
*
|
|
173
|
-
* @param keyCode A key code as in {@link module:utils/keyboard~KeystrokeInfo#keyCode}.
|
|
174
|
-
* @param contentLanguageDirection The content language direction, corresponding to
|
|
175
|
-
* {@link module:utils/locale~Locale#contentLanguageDirection}.
|
|
176
|
-
*/
|
|
177
|
-
export function isForwardArrowKeyCode(keyCode, contentLanguageDirection) {
|
|
178
|
-
const localizedKeyCodeDirection = getLocalizedArrowKeyCodeDirection(keyCode, contentLanguageDirection);
|
|
179
|
-
return localizedKeyCodeDirection === 'down' || localizedKeyCodeDirection === 'right';
|
|
180
|
-
}
|
|
181
|
-
function generateKnownKeyCodes() {
|
|
182
|
-
const keyCodes = {
|
|
183
|
-
arrowleft: 37,
|
|
184
|
-
arrowup: 38,
|
|
185
|
-
arrowright: 39,
|
|
186
|
-
arrowdown: 40,
|
|
187
|
-
backspace: 8,
|
|
188
|
-
delete: 46,
|
|
189
|
-
enter: 13,
|
|
190
|
-
space: 32,
|
|
191
|
-
esc: 27,
|
|
192
|
-
tab: 9,
|
|
193
|
-
// The idea about these numbers is that they do not collide with any real key codes, so we can use them
|
|
194
|
-
// like bit masks.
|
|
195
|
-
ctrl: 0x110000,
|
|
196
|
-
shift: 0x220000,
|
|
197
|
-
alt: 0x440000,
|
|
198
|
-
cmd: 0x880000
|
|
199
|
-
};
|
|
200
|
-
// a-z
|
|
201
|
-
for (let code = 65; code <= 90; code++) {
|
|
202
|
-
const letter = String.fromCharCode(code);
|
|
203
|
-
keyCodes[letter.toLowerCase()] = code;
|
|
204
|
-
}
|
|
205
|
-
// 0-9
|
|
206
|
-
for (let code = 48; code <= 57; code++) {
|
|
207
|
-
keyCodes[code - 48] = code;
|
|
208
|
-
}
|
|
209
|
-
// F1-F12
|
|
210
|
-
for (let code = 112; code <= 123; code++) {
|
|
211
|
-
keyCodes['f' + (code - 111)] = code;
|
|
212
|
-
}
|
|
213
|
-
// other characters
|
|
214
|
-
for (const char of '`-=[];\',./\\') {
|
|
215
|
-
keyCodes[char] = char.charCodeAt(0);
|
|
216
|
-
}
|
|
217
|
-
return keyCodes;
|
|
218
|
-
}
|
|
219
|
-
function splitKeystrokeText(keystroke) {
|
|
220
|
-
return keystroke.split('+').map(key => key.trim());
|
|
221
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
+
*/
|
|
5
|
+
import CKEditorError from './ckeditorerror';
|
|
6
|
+
import env from './env';
|
|
7
|
+
const modifiersToGlyphsMac = {
|
|
8
|
+
ctrl: '⌃',
|
|
9
|
+
cmd: '⌘',
|
|
10
|
+
alt: '⌥',
|
|
11
|
+
shift: '⇧'
|
|
12
|
+
};
|
|
13
|
+
const modifiersToGlyphsNonMac = {
|
|
14
|
+
ctrl: 'Ctrl+',
|
|
15
|
+
alt: 'Alt+',
|
|
16
|
+
shift: 'Shift+'
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* An object with `keyName => keyCode` pairs for a set of known keys.
|
|
20
|
+
*
|
|
21
|
+
* Contains:
|
|
22
|
+
*
|
|
23
|
+
* * `a-z`,
|
|
24
|
+
* * `0-9`,
|
|
25
|
+
* * `f1-f12`,
|
|
26
|
+
* * `` ` ``, `-`, `=`, `[`, `]`, `;`, `'`, `,`, `.`, `/`, `\`,
|
|
27
|
+
* * `arrow(left|up|right|bottom)`,
|
|
28
|
+
* * `backspace`, `delete`, `enter`, `esc`, `tab`,
|
|
29
|
+
* * `ctrl`, `cmd`, `shift`, `alt`.
|
|
30
|
+
*/
|
|
31
|
+
export const keyCodes = generateKnownKeyCodes();
|
|
32
|
+
const keyCodeNames = Object.fromEntries(Object.entries(keyCodes).map(([name, code]) => [code, name.charAt(0).toUpperCase() + name.slice(1)]));
|
|
33
|
+
/**
|
|
34
|
+
* Converts a key name or {@link module:utils/keyboard~KeystrokeInfo keystroke info} into a key code.
|
|
35
|
+
*
|
|
36
|
+
* Note: Key names are matched with {@link module:utils/keyboard#keyCodes} in a case-insensitive way.
|
|
37
|
+
*
|
|
38
|
+
* @param key A key name (see {@link module:utils/keyboard#keyCodes}) or a keystroke data object.
|
|
39
|
+
* @returns Key or keystroke code.
|
|
40
|
+
*/
|
|
41
|
+
export function getCode(key) {
|
|
42
|
+
let keyCode;
|
|
43
|
+
if (typeof key == 'string') {
|
|
44
|
+
keyCode = keyCodes[key.toLowerCase()];
|
|
45
|
+
if (!keyCode) {
|
|
46
|
+
/**
|
|
47
|
+
* Unknown key name. Only key names included in the {@link module:utils/keyboard#keyCodes} can be used.
|
|
48
|
+
*
|
|
49
|
+
* @error keyboard-unknown-key
|
|
50
|
+
* @param {String} key
|
|
51
|
+
*/
|
|
52
|
+
throw new CKEditorError('keyboard-unknown-key', null, { key });
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
keyCode = key.keyCode +
|
|
57
|
+
(key.altKey ? keyCodes.alt : 0) +
|
|
58
|
+
(key.ctrlKey ? keyCodes.ctrl : 0) +
|
|
59
|
+
(key.shiftKey ? keyCodes.shift : 0) +
|
|
60
|
+
(key.metaKey ? keyCodes.cmd : 0);
|
|
61
|
+
}
|
|
62
|
+
return keyCode;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Parses the keystroke and returns a keystroke code that will match the code returned by
|
|
66
|
+
* {@link module:utils/keyboard~getCode} for the corresponding {@link module:utils/keyboard~KeystrokeInfo keystroke info}.
|
|
67
|
+
*
|
|
68
|
+
* The keystroke can be passed in two formats:
|
|
69
|
+
*
|
|
70
|
+
* * as a single string – e.g. `ctrl + A`,
|
|
71
|
+
* * as an array of {@link module:utils/keyboard~keyCodes known key names} and key codes – e.g.:
|
|
72
|
+
* * `[ 'ctrl', 32 ]` (ctrl + space),
|
|
73
|
+
* * `[ 'ctrl', 'a' ]` (ctrl + A).
|
|
74
|
+
*
|
|
75
|
+
* Note: Key names are matched with {@link module:utils/keyboard#keyCodes} in a case-insensitive way.
|
|
76
|
+
*
|
|
77
|
+
* Note: Only keystrokes with a single non-modifier key are supported (e.g. `ctrl+A` is OK, but `ctrl+A+B` is not).
|
|
78
|
+
*
|
|
79
|
+
* Note: On macOS, keystroke handling is translating the `Ctrl` key to the `Cmd` key and handling only that keystroke.
|
|
80
|
+
* For example, a registered keystroke `Ctrl+A` will be translated to `Cmd+A` on macOS. To disable the translation of some keystroke,
|
|
81
|
+
* use the forced modifier: `Ctrl!+A` (note the exclamation mark).
|
|
82
|
+
*
|
|
83
|
+
* @param keystroke The keystroke definition.
|
|
84
|
+
* @returns Keystroke code.
|
|
85
|
+
*/
|
|
86
|
+
export function parseKeystroke(keystroke) {
|
|
87
|
+
if (typeof keystroke == 'string') {
|
|
88
|
+
keystroke = splitKeystrokeText(keystroke);
|
|
89
|
+
}
|
|
90
|
+
return keystroke
|
|
91
|
+
.map(key => (typeof key == 'string') ? getEnvKeyCode(key) : key)
|
|
92
|
+
.reduce((key, sum) => sum + key, 0);
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Translates any keystroke string text like `"Ctrl+A"` to an
|
|
96
|
+
* environment–specific keystroke, i.e. `"⌘A"` on macOS.
|
|
97
|
+
*
|
|
98
|
+
* @param keystroke The keystroke text.
|
|
99
|
+
* @returns The keystroke text specific for the environment.
|
|
100
|
+
*/
|
|
101
|
+
export function getEnvKeystrokeText(keystroke) {
|
|
102
|
+
let keystrokeCode = parseKeystroke(keystroke);
|
|
103
|
+
const modifiersToGlyphs = Object.entries((env.isMac || env.isiOS) ? modifiersToGlyphsMac : modifiersToGlyphsNonMac);
|
|
104
|
+
const modifiers = modifiersToGlyphs.reduce((modifiers, [name, glyph]) => {
|
|
105
|
+
// Modifier keys are stored as a bit mask so extract those from the keystroke code.
|
|
106
|
+
if ((keystrokeCode & keyCodes[name]) != 0) {
|
|
107
|
+
keystrokeCode &= ~keyCodes[name];
|
|
108
|
+
modifiers += glyph;
|
|
109
|
+
}
|
|
110
|
+
return modifiers;
|
|
111
|
+
}, '');
|
|
112
|
+
return modifiers + (keystrokeCode ? keyCodeNames[keystrokeCode] : '');
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Returns `true` if the provided key code represents one of the arrow keys.
|
|
116
|
+
*
|
|
117
|
+
* @param keyCode A key code as in {@link module:utils/keyboard~KeystrokeInfo#keyCode}.
|
|
118
|
+
*/
|
|
119
|
+
export function isArrowKeyCode(keyCode) {
|
|
120
|
+
return keyCode == keyCodes.arrowright ||
|
|
121
|
+
keyCode == keyCodes.arrowleft ||
|
|
122
|
+
keyCode == keyCodes.arrowup ||
|
|
123
|
+
keyCode == keyCodes.arrowdown;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Returns the direction in which the {@link module:engine/model/documentselection~DocumentSelection selection}
|
|
127
|
+
* will move when the provided arrow key code is pressed considering the language direction of the editor content.
|
|
128
|
+
*
|
|
129
|
+
* For instance, in right–to–left (RTL) content languages, pressing the left arrow means moving the selection right (forward)
|
|
130
|
+
* in the model structure. Similarly, pressing the right arrow moves the selection left (backward).
|
|
131
|
+
*
|
|
132
|
+
* @param keyCode A key code as in {@link module:utils/keyboard~KeystrokeInfo#keyCode}.
|
|
133
|
+
* @param contentLanguageDirection The content language direction, corresponding to
|
|
134
|
+
* {@link module:utils/locale~Locale#contentLanguageDirection}.
|
|
135
|
+
* @returns Localized arrow direction or `undefined` for non-arrow key codes.
|
|
136
|
+
*/
|
|
137
|
+
export function getLocalizedArrowKeyCodeDirection(keyCode, contentLanguageDirection) {
|
|
138
|
+
const isLtrContent = contentLanguageDirection === 'ltr';
|
|
139
|
+
switch (keyCode) {
|
|
140
|
+
case keyCodes.arrowleft:
|
|
141
|
+
return isLtrContent ? 'left' : 'right';
|
|
142
|
+
case keyCodes.arrowright:
|
|
143
|
+
return isLtrContent ? 'right' : 'left';
|
|
144
|
+
case keyCodes.arrowup:
|
|
145
|
+
return 'up';
|
|
146
|
+
case keyCodes.arrowdown:
|
|
147
|
+
return 'down';
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Converts a key name to the key code with mapping based on the env.
|
|
152
|
+
*
|
|
153
|
+
* See: {@link module:utils/keyboard~getCode}.
|
|
154
|
+
*
|
|
155
|
+
* @param key The key name (see {@link module:utils/keyboard#keyCodes}).
|
|
156
|
+
* @returns Key code.
|
|
157
|
+
*/
|
|
158
|
+
function getEnvKeyCode(key) {
|
|
159
|
+
// Don't remap modifier key for forced modifiers.
|
|
160
|
+
if (key.endsWith('!')) {
|
|
161
|
+
return getCode(key.slice(0, -1));
|
|
162
|
+
}
|
|
163
|
+
const code = getCode(key);
|
|
164
|
+
return (env.isMac || env.isiOS) && code == keyCodes.ctrl ? keyCodes.cmd : code;
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Determines if the provided key code moves the {@link module:engine/model/documentselection~DocumentSelection selection}
|
|
168
|
+
* forward or backward considering the language direction of the editor content.
|
|
169
|
+
*
|
|
170
|
+
* For instance, in right–to–left (RTL) languages, pressing the left arrow means moving forward
|
|
171
|
+
* in the model structure. Similarly, pressing the right arrow moves the selection backward.
|
|
172
|
+
*
|
|
173
|
+
* @param keyCode A key code as in {@link module:utils/keyboard~KeystrokeInfo#keyCode}.
|
|
174
|
+
* @param contentLanguageDirection The content language direction, corresponding to
|
|
175
|
+
* {@link module:utils/locale~Locale#contentLanguageDirection}.
|
|
176
|
+
*/
|
|
177
|
+
export function isForwardArrowKeyCode(keyCode, contentLanguageDirection) {
|
|
178
|
+
const localizedKeyCodeDirection = getLocalizedArrowKeyCodeDirection(keyCode, contentLanguageDirection);
|
|
179
|
+
return localizedKeyCodeDirection === 'down' || localizedKeyCodeDirection === 'right';
|
|
180
|
+
}
|
|
181
|
+
function generateKnownKeyCodes() {
|
|
182
|
+
const keyCodes = {
|
|
183
|
+
arrowleft: 37,
|
|
184
|
+
arrowup: 38,
|
|
185
|
+
arrowright: 39,
|
|
186
|
+
arrowdown: 40,
|
|
187
|
+
backspace: 8,
|
|
188
|
+
delete: 46,
|
|
189
|
+
enter: 13,
|
|
190
|
+
space: 32,
|
|
191
|
+
esc: 27,
|
|
192
|
+
tab: 9,
|
|
193
|
+
// The idea about these numbers is that they do not collide with any real key codes, so we can use them
|
|
194
|
+
// like bit masks.
|
|
195
|
+
ctrl: 0x110000,
|
|
196
|
+
shift: 0x220000,
|
|
197
|
+
alt: 0x440000,
|
|
198
|
+
cmd: 0x880000
|
|
199
|
+
};
|
|
200
|
+
// a-z
|
|
201
|
+
for (let code = 65; code <= 90; code++) {
|
|
202
|
+
const letter = String.fromCharCode(code);
|
|
203
|
+
keyCodes[letter.toLowerCase()] = code;
|
|
204
|
+
}
|
|
205
|
+
// 0-9
|
|
206
|
+
for (let code = 48; code <= 57; code++) {
|
|
207
|
+
keyCodes[code - 48] = code;
|
|
208
|
+
}
|
|
209
|
+
// F1-F12
|
|
210
|
+
for (let code = 112; code <= 123; code++) {
|
|
211
|
+
keyCodes['f' + (code - 111)] = code;
|
|
212
|
+
}
|
|
213
|
+
// other characters
|
|
214
|
+
for (const char of '`-=[];\',./\\') {
|
|
215
|
+
keyCodes[char] = char.charCodeAt(0);
|
|
216
|
+
}
|
|
217
|
+
return keyCodes;
|
|
218
|
+
}
|
|
219
|
+
function splitKeystrokeText(keystroke) {
|
|
220
|
+
return keystroke.split('+').map(key => key.trim());
|
|
221
|
+
}
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
import type { Emitter } from './emittermixin';
|
|
6
|
-
import { type KeystrokeInfo } from './keyboard';
|
|
7
|
-
import type { PriorityString } from './priorities';
|
|
8
|
-
/**
|
|
9
|
-
* Keystroke handler allows registering callbacks for given keystrokes.
|
|
10
|
-
*
|
|
11
|
-
* The most frequent use of this class is through the {@link module:core/editor/editor~Editor#keystrokes `editor.keystrokes`}
|
|
12
|
-
* property. It allows listening to keystrokes executed in the editing view:
|
|
13
|
-
*
|
|
14
|
-
* ```ts
|
|
15
|
-
* editor.keystrokes.set( 'Ctrl+A', ( keyEvtData, cancel ) => {
|
|
16
|
-
* console.log( 'Ctrl+A has been pressed' );
|
|
17
|
-
* cancel();
|
|
18
|
-
* } );
|
|
19
|
-
* ```
|
|
20
|
-
*
|
|
21
|
-
* However, this utility class can be used in various part of the UI. For instance, a certain {@link module:ui/view~View}
|
|
22
|
-
* can use it like this:
|
|
23
|
-
*
|
|
24
|
-
* ```ts
|
|
25
|
-
* class MyView extends View {
|
|
26
|
-
* constructor() {
|
|
27
|
-
* this.keystrokes = new KeystrokeHandler();
|
|
28
|
-
*
|
|
29
|
-
* this.keystrokes.set( 'tab', handleTabKey );
|
|
30
|
-
* }
|
|
31
|
-
*
|
|
32
|
-
* render() {
|
|
33
|
-
* super.render();
|
|
34
|
-
*
|
|
35
|
-
* this.keystrokes.listenTo( this.element );
|
|
36
|
-
* }
|
|
37
|
-
* }
|
|
38
|
-
* ```
|
|
39
|
-
*
|
|
40
|
-
* That keystroke handler will listen to `keydown` events fired in this view's main element.
|
|
41
|
-
*
|
|
42
|
-
*/
|
|
43
|
-
export default class KeystrokeHandler {
|
|
44
|
-
/**
|
|
45
|
-
* Listener used to listen to events for easier keystroke handler destruction.
|
|
46
|
-
*/
|
|
47
|
-
private readonly _listener;
|
|
48
|
-
/**
|
|
49
|
-
* Creates an instance of the keystroke handler.
|
|
50
|
-
*/
|
|
51
|
-
constructor();
|
|
52
|
-
/**
|
|
53
|
-
* Starts listening for `keydown` events from a given emitter.
|
|
54
|
-
*/
|
|
55
|
-
listenTo(emitter: Emitter | HTMLElement | Window): void;
|
|
56
|
-
/**
|
|
57
|
-
* Registers a handler for the specified keystroke.
|
|
58
|
-
*
|
|
59
|
-
* @param keystroke Keystroke defined in a format accepted by
|
|
60
|
-
* the {@link module:utils/keyboard~parseKeystroke} function.
|
|
61
|
-
* @param callback A function called with the
|
|
62
|
-
* {@link module:engine/view/observer/keyobserver~KeyEventData key event data} object and
|
|
63
|
-
* a helper function to call both `preventDefault()` and `stopPropagation()` on the underlying event.
|
|
64
|
-
* @param options Additional options.
|
|
65
|
-
* @param options.priority The priority of the keystroke
|
|
66
|
-
* callback. The higher the priority value the sooner the callback will be executed. Keystrokes having the same priority
|
|
67
|
-
* are called in the order they were added.
|
|
68
|
-
*/
|
|
69
|
-
set(keystroke: string | ReadonlyArray<string | number>, callback: (ev: KeyboardEvent, cancel: () => void) => void, options?: {
|
|
70
|
-
readonly priority?: PriorityString;
|
|
71
|
-
}): void;
|
|
72
|
-
/**
|
|
73
|
-
* Triggers a keystroke handler for a specified key combination, if such a keystroke was {@link #set defined}.
|
|
74
|
-
*
|
|
75
|
-
* @param keyEvtData Key event data.
|
|
76
|
-
* @returns Whether the keystroke was handled.
|
|
77
|
-
*/
|
|
78
|
-
press(keyEvtData: Readonly<KeystrokeInfo>): boolean;
|
|
79
|
-
/**
|
|
80
|
-
* Stops listening to `keydown` events from the given emitter.
|
|
81
|
-
*/
|
|
82
|
-
stopListening(emitter?: Emitter | HTMLElement | Window): void;
|
|
83
|
-
/**
|
|
84
|
-
* Destroys the keystroke handler.
|
|
85
|
-
*/
|
|
86
|
-
destroy(): void;
|
|
87
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
+
*/
|
|
5
|
+
import type { Emitter } from './emittermixin';
|
|
6
|
+
import { type KeystrokeInfo } from './keyboard';
|
|
7
|
+
import type { PriorityString } from './priorities';
|
|
8
|
+
/**
|
|
9
|
+
* Keystroke handler allows registering callbacks for given keystrokes.
|
|
10
|
+
*
|
|
11
|
+
* The most frequent use of this class is through the {@link module:core/editor/editor~Editor#keystrokes `editor.keystrokes`}
|
|
12
|
+
* property. It allows listening to keystrokes executed in the editing view:
|
|
13
|
+
*
|
|
14
|
+
* ```ts
|
|
15
|
+
* editor.keystrokes.set( 'Ctrl+A', ( keyEvtData, cancel ) => {
|
|
16
|
+
* console.log( 'Ctrl+A has been pressed' );
|
|
17
|
+
* cancel();
|
|
18
|
+
* } );
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* However, this utility class can be used in various part of the UI. For instance, a certain {@link module:ui/view~View}
|
|
22
|
+
* can use it like this:
|
|
23
|
+
*
|
|
24
|
+
* ```ts
|
|
25
|
+
* class MyView extends View {
|
|
26
|
+
* constructor() {
|
|
27
|
+
* this.keystrokes = new KeystrokeHandler();
|
|
28
|
+
*
|
|
29
|
+
* this.keystrokes.set( 'tab', handleTabKey );
|
|
30
|
+
* }
|
|
31
|
+
*
|
|
32
|
+
* render() {
|
|
33
|
+
* super.render();
|
|
34
|
+
*
|
|
35
|
+
* this.keystrokes.listenTo( this.element );
|
|
36
|
+
* }
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* That keystroke handler will listen to `keydown` events fired in this view's main element.
|
|
41
|
+
*
|
|
42
|
+
*/
|
|
43
|
+
export default class KeystrokeHandler {
|
|
44
|
+
/**
|
|
45
|
+
* Listener used to listen to events for easier keystroke handler destruction.
|
|
46
|
+
*/
|
|
47
|
+
private readonly _listener;
|
|
48
|
+
/**
|
|
49
|
+
* Creates an instance of the keystroke handler.
|
|
50
|
+
*/
|
|
51
|
+
constructor();
|
|
52
|
+
/**
|
|
53
|
+
* Starts listening for `keydown` events from a given emitter.
|
|
54
|
+
*/
|
|
55
|
+
listenTo(emitter: Emitter | HTMLElement | Window): void;
|
|
56
|
+
/**
|
|
57
|
+
* Registers a handler for the specified keystroke.
|
|
58
|
+
*
|
|
59
|
+
* @param keystroke Keystroke defined in a format accepted by
|
|
60
|
+
* the {@link module:utils/keyboard~parseKeystroke} function.
|
|
61
|
+
* @param callback A function called with the
|
|
62
|
+
* {@link module:engine/view/observer/keyobserver~KeyEventData key event data} object and
|
|
63
|
+
* a helper function to call both `preventDefault()` and `stopPropagation()` on the underlying event.
|
|
64
|
+
* @param options Additional options.
|
|
65
|
+
* @param options.priority The priority of the keystroke
|
|
66
|
+
* callback. The higher the priority value the sooner the callback will be executed. Keystrokes having the same priority
|
|
67
|
+
* are called in the order they were added.
|
|
68
|
+
*/
|
|
69
|
+
set(keystroke: string | ReadonlyArray<string | number>, callback: (ev: KeyboardEvent, cancel: () => void) => void, options?: {
|
|
70
|
+
readonly priority?: PriorityString;
|
|
71
|
+
}): void;
|
|
72
|
+
/**
|
|
73
|
+
* Triggers a keystroke handler for a specified key combination, if such a keystroke was {@link #set defined}.
|
|
74
|
+
*
|
|
75
|
+
* @param keyEvtData Key event data.
|
|
76
|
+
* @returns Whether the keystroke was handled.
|
|
77
|
+
*/
|
|
78
|
+
press(keyEvtData: Readonly<KeystrokeInfo>): boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Stops listening to `keydown` events from the given emitter.
|
|
81
|
+
*/
|
|
82
|
+
stopListening(emitter?: Emitter | HTMLElement | Window): void;
|
|
83
|
+
/**
|
|
84
|
+
* Destroys the keystroke handler.
|
|
85
|
+
*/
|
|
86
|
+
destroy(): void;
|
|
87
|
+
}
|