@ckeditor/ckeditor5-typing 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 +27 -27
- package/LICENSE.md +3 -3
- package/package.json +4 -4
- package/src/augmentation.d.ts +27 -27
- package/src/augmentation.js +5 -5
- package/src/delete.d.ts +32 -32
- package/src/delete.js +82 -82
- package/src/deletecommand.d.ts +83 -83
- package/src/deletecommand.js +201 -201
- package/src/deleteobserver.d.ts +55 -55
- package/src/deleteobserver.js +261 -261
- package/src/index.d.ts +24 -24
- package/src/index.js +18 -18
- package/src/input.d.ts +21 -21
- package/src/input.js +141 -141
- package/src/inserttextcommand.d.ts +76 -76
- package/src/inserttextcommand.js +83 -80
- package/src/inserttextobserver.d.ts +59 -59
- package/src/inserttextobserver.js +108 -108
- package/src/texttransformation.d.ts +33 -33
- package/src/texttransformation.js +228 -228
- package/src/textwatcher.d.ts +138 -138
- package/src/textwatcher.js +105 -105
- package/src/twostepcaretmovement.d.ts +232 -199
- package/src/twostepcaretmovement.js +622 -435
- package/src/typing.d.ts +23 -23
- package/src/typing.js +27 -27
- package/src/typingconfig.d.ts +204 -204
- package/src/typingconfig.js +5 -5
- package/src/utils/changebuffer.d.ts +103 -103
- package/src/utils/changebuffer.js +123 -123
- package/src/utils/findattributerange.d.ts +33 -33
- package/src/utils/findattributerange.js +41 -41
- package/src/utils/getlasttextline.d.ts +49 -49
- package/src/utils/getlasttextline.js +43 -43
- package/src/utils/inlinehighlight.d.ts +33 -33
- package/src/utils/inlinehighlight.js +74 -74
package/src/deleteobserver.d.ts
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
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 { DomEventData, Observer, type BubblingEvent, type ViewDocumentSelection, type ViewSelection, type View } from '@ckeditor/ckeditor5-engine';
|
|
6
|
-
/**
|
|
7
|
-
* Delete observer introduces the {@link module:engine/view/document~Document#event:delete} event.
|
|
8
|
-
*/
|
|
9
|
-
export default class DeleteObserver extends Observer {
|
|
10
|
-
/**
|
|
11
|
-
* @inheritDoc
|
|
12
|
-
*/
|
|
13
|
-
constructor(view: View);
|
|
14
|
-
/**
|
|
15
|
-
* @inheritDoc
|
|
16
|
-
*/
|
|
17
|
-
observe(): void;
|
|
18
|
-
/**
|
|
19
|
-
* @inheritDoc
|
|
20
|
-
*/
|
|
21
|
-
stopObserving(): void;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Event fired when the user tries to delete content (e.g. presses <kbd>Delete</kbd> or <kbd>Backspace</kbd>).
|
|
25
|
-
*
|
|
26
|
-
* Note: This event is fired by the {@link module:typing/deleteobserver~DeleteObserver delete observer}
|
|
27
|
-
* (usually registered by the {@link module:typing/delete~Delete delete feature}).
|
|
28
|
-
*
|
|
29
|
-
* @eventName module:engine/view/document~Document#delete
|
|
30
|
-
* @param data The event data.
|
|
31
|
-
*/
|
|
32
|
-
export type ViewDocumentDeleteEvent = BubblingEvent<{
|
|
33
|
-
name: 'delete';
|
|
34
|
-
args: [data: DeleteEventData];
|
|
35
|
-
}>;
|
|
36
|
-
export interface DeleteEventData extends DomEventData<InputEvent> {
|
|
37
|
-
/**
|
|
38
|
-
* The direction in which the deletion should happen.
|
|
39
|
-
*/
|
|
40
|
-
direction: 'backward' | 'forward';
|
|
41
|
-
/**
|
|
42
|
-
* The "amount" of content that should be deleted.
|
|
43
|
-
*/
|
|
44
|
-
unit: 'selection' | 'codePoint' | 'character' | 'word';
|
|
45
|
-
/**
|
|
46
|
-
* A number describing which subsequent delete event it is without the key being released.
|
|
47
|
-
* If it's 2 or more it means that the key was pressed and hold.
|
|
48
|
-
*/
|
|
49
|
-
sequence: number;
|
|
50
|
-
/**
|
|
51
|
-
* View selection which content should be removed. If not set,
|
|
52
|
-
* current selection should be used.
|
|
53
|
-
*/
|
|
54
|
-
selectionToRemove?: ViewSelection | ViewDocumentSelection;
|
|
55
|
-
}
|
|
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 { DomEventData, Observer, type BubblingEvent, type ViewDocumentSelection, type ViewSelection, type View } from '@ckeditor/ckeditor5-engine';
|
|
6
|
+
/**
|
|
7
|
+
* Delete observer introduces the {@link module:engine/view/document~Document#event:delete} event.
|
|
8
|
+
*/
|
|
9
|
+
export default class DeleteObserver extends Observer {
|
|
10
|
+
/**
|
|
11
|
+
* @inheritDoc
|
|
12
|
+
*/
|
|
13
|
+
constructor(view: View);
|
|
14
|
+
/**
|
|
15
|
+
* @inheritDoc
|
|
16
|
+
*/
|
|
17
|
+
observe(): void;
|
|
18
|
+
/**
|
|
19
|
+
* @inheritDoc
|
|
20
|
+
*/
|
|
21
|
+
stopObserving(): void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Event fired when the user tries to delete content (e.g. presses <kbd>Delete</kbd> or <kbd>Backspace</kbd>).
|
|
25
|
+
*
|
|
26
|
+
* Note: This event is fired by the {@link module:typing/deleteobserver~DeleteObserver delete observer}
|
|
27
|
+
* (usually registered by the {@link module:typing/delete~Delete delete feature}).
|
|
28
|
+
*
|
|
29
|
+
* @eventName module:engine/view/document~Document#delete
|
|
30
|
+
* @param data The event data.
|
|
31
|
+
*/
|
|
32
|
+
export type ViewDocumentDeleteEvent = BubblingEvent<{
|
|
33
|
+
name: 'delete';
|
|
34
|
+
args: [data: DeleteEventData];
|
|
35
|
+
}>;
|
|
36
|
+
export interface DeleteEventData extends DomEventData<InputEvent> {
|
|
37
|
+
/**
|
|
38
|
+
* The direction in which the deletion should happen.
|
|
39
|
+
*/
|
|
40
|
+
direction: 'backward' | 'forward';
|
|
41
|
+
/**
|
|
42
|
+
* The "amount" of content that should be deleted.
|
|
43
|
+
*/
|
|
44
|
+
unit: 'selection' | 'codePoint' | 'character' | 'word';
|
|
45
|
+
/**
|
|
46
|
+
* A number describing which subsequent delete event it is without the key being released.
|
|
47
|
+
* If it's 2 or more it means that the key was pressed and hold.
|
|
48
|
+
*/
|
|
49
|
+
sequence: number;
|
|
50
|
+
/**
|
|
51
|
+
* View selection which content should be removed. If not set,
|
|
52
|
+
* current selection should be used.
|
|
53
|
+
*/
|
|
54
|
+
selectionToRemove?: ViewSelection | ViewDocumentSelection;
|
|
55
|
+
}
|
package/src/deleteobserver.js
CHANGED
|
@@ -1,261 +1,261 @@
|
|
|
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
|
-
/**
|
|
6
|
-
* @module typing/deleteobserver
|
|
7
|
-
*/
|
|
8
|
-
import { env, keyCodes, isInsideCombinedSymbol, isInsideEmojiSequence, isInsideSurrogatePair } from '@ckeditor/ckeditor5-utils';
|
|
9
|
-
import { BubblingEventInfo, DomEventData, Observer } from '@ckeditor/ckeditor5-engine';
|
|
10
|
-
const DELETE_CHARACTER = 'character';
|
|
11
|
-
const DELETE_WORD = 'word';
|
|
12
|
-
const DELETE_CODE_POINT = 'codePoint';
|
|
13
|
-
const DELETE_SELECTION = 'selection';
|
|
14
|
-
const DELETE_BACKWARD = 'backward';
|
|
15
|
-
const DELETE_FORWARD = 'forward';
|
|
16
|
-
const DELETE_EVENT_TYPES = {
|
|
17
|
-
// --------------------------------------- Backward delete types -----------------------------------------------------
|
|
18
|
-
// This happens in Safari on Mac when some content is selected and Ctrl + K is pressed.
|
|
19
|
-
deleteContent: {
|
|
20
|
-
unit: DELETE_SELECTION,
|
|
21
|
-
// According to the Input Events Level 2 spec, this delete type has no direction
|
|
22
|
-
// but to keep things simple, let's default to backward.
|
|
23
|
-
direction: DELETE_BACKWARD
|
|
24
|
-
},
|
|
25
|
-
// Chrome and Safari on Mac: Backspace or Ctrl + H
|
|
26
|
-
deleteContentBackward: {
|
|
27
|
-
// This kind of deletions must be done on the code point-level instead of target range provided by the DOM beforeinput event.
|
|
28
|
-
// Take for instance "👨👩👧👧", it equals:
|
|
29
|
-
//
|
|
30
|
-
// * [ "👨", "ZERO WIDTH JOINER", "👩", "ZERO WIDTH JOINER", "👧", "ZERO WIDTH JOINER", "👧" ]
|
|
31
|
-
// * or simply "\u{1F468}\u200D\u{1F469}\u200D\u{1F467}\u200D\u{1F467}"
|
|
32
|
-
//
|
|
33
|
-
// The range provided by the browser would cause the entire multi-byte grapheme to disappear while the user
|
|
34
|
-
// intention when deleting backwards ("👨👩👧👧[]", then backspace) is gradual "decomposition" (first to "👨👩👧[]",
|
|
35
|
-
// then to "👨👩[]", etc.).
|
|
36
|
-
//
|
|
37
|
-
// * "👨👩👧👧[]" + backward delete (by code point) -> results in "👨👩👧[]", removed the last "👧" 👍
|
|
38
|
-
// * "👨👩👧👧[]" + backward delete (by character) -> results in "[]", removed the whole grapheme 👎
|
|
39
|
-
//
|
|
40
|
-
// Deleting by code-point is simply a better UX. See "deleteContentForward" to learn more.
|
|
41
|
-
unit: DELETE_CODE_POINT,
|
|
42
|
-
direction: DELETE_BACKWARD
|
|
43
|
-
},
|
|
44
|
-
// On Mac: Option + Backspace.
|
|
45
|
-
// On iOS: Hold the backspace for a while and the whole words will start to disappear.
|
|
46
|
-
deleteWordBackward: {
|
|
47
|
-
unit: DELETE_WORD,
|
|
48
|
-
direction: DELETE_BACKWARD
|
|
49
|
-
},
|
|
50
|
-
// Safari on Mac: Cmd + Backspace
|
|
51
|
-
deleteHardLineBackward: {
|
|
52
|
-
unit: DELETE_SELECTION,
|
|
53
|
-
direction: DELETE_BACKWARD
|
|
54
|
-
},
|
|
55
|
-
// Chrome on Mac: Cmd + Backspace.
|
|
56
|
-
deleteSoftLineBackward: {
|
|
57
|
-
unit: DELETE_SELECTION,
|
|
58
|
-
direction: DELETE_BACKWARD
|
|
59
|
-
},
|
|
60
|
-
// --------------------------------------- Forward delete types -----------------------------------------------------
|
|
61
|
-
// Chrome on Mac: Fn + Backspace or Ctrl + D
|
|
62
|
-
// Safari on Mac: Ctrl + K or Ctrl + D
|
|
63
|
-
deleteContentForward: {
|
|
64
|
-
// Unlike backward delete, this delete must be performed by character instead of by code point, which
|
|
65
|
-
// provides the best UX for working with accented letters.
|
|
66
|
-
// Take, for example "b̂" ("\u0062\u0302", or [ "LATIN SMALL LETTER B", "COMBINING CIRCUMFLEX ACCENT" ]):
|
|
67
|
-
//
|
|
68
|
-
// * "b̂[]" + backward delete (by code point) -> results in "b[]", removed the combining mark 👍
|
|
69
|
-
// * "[]b̂" + forward delete (by code point) -> results in "[]^", a bare combining mark does that not make sense when alone 👎
|
|
70
|
-
// * "[]b̂" + forward delete (by character) -> results in "[]", removed both "b" and the combining mark 👍
|
|
71
|
-
//
|
|
72
|
-
// See: "deleteContentBackward" to learn more.
|
|
73
|
-
unit: DELETE_CHARACTER,
|
|
74
|
-
direction: DELETE_FORWARD
|
|
75
|
-
},
|
|
76
|
-
// On Mac: Fn + Option + Backspace.
|
|
77
|
-
deleteWordForward: {
|
|
78
|
-
unit: DELETE_WORD,
|
|
79
|
-
direction: DELETE_FORWARD
|
|
80
|
-
},
|
|
81
|
-
// Chrome on Mac: Ctrl + K (you have to disable the Link plugin first, though, because it uses the same keystroke)
|
|
82
|
-
// This is weird that it does not work in Safari on Mac despite being listed in the official shortcuts listing
|
|
83
|
-
// on Apple's webpage.
|
|
84
|
-
deleteHardLineForward: {
|
|
85
|
-
unit: DELETE_SELECTION,
|
|
86
|
-
direction: DELETE_FORWARD
|
|
87
|
-
},
|
|
88
|
-
// At this moment there is no known way to trigger this event type but let's keep it for the symmetry with
|
|
89
|
-
// deleteSoftLineBackward.
|
|
90
|
-
deleteSoftLineForward: {
|
|
91
|
-
unit: DELETE_SELECTION,
|
|
92
|
-
direction: DELETE_FORWARD
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
/**
|
|
96
|
-
* Delete observer introduces the {@link module:engine/view/document~Document#event:delete} event.
|
|
97
|
-
*/
|
|
98
|
-
export default class DeleteObserver extends Observer {
|
|
99
|
-
/**
|
|
100
|
-
* @inheritDoc
|
|
101
|
-
*/
|
|
102
|
-
constructor(view) {
|
|
103
|
-
super(view);
|
|
104
|
-
const document = view.document;
|
|
105
|
-
// It matters how many subsequent deletions were made, e.g. when the backspace key was pressed and held
|
|
106
|
-
// by the user for some time. For instance, if such scenario ocurred and the heading the selection was
|
|
107
|
-
// anchored to was the only content of the editor, it will not be converted into a paragraph (the user
|
|
108
|
-
// wanted to clean it up, not remove it, it's about UX). Check out the DeleteCommand implementation to learn more.
|
|
109
|
-
//
|
|
110
|
-
// Fun fact: Safari on Mac won't fire beforeinput for backspace in an empty heading (only content).
|
|
111
|
-
let sequence = 0;
|
|
112
|
-
document.on('keydown', () => {
|
|
113
|
-
sequence++;
|
|
114
|
-
});
|
|
115
|
-
document.on('keyup', () => {
|
|
116
|
-
sequence = 0;
|
|
117
|
-
});
|
|
118
|
-
document.on('beforeinput', (evt, data) => {
|
|
119
|
-
if (!this.isEnabled) {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
const { targetRanges, domEvent, inputType } = data;
|
|
123
|
-
const deleteEventSpec = DELETE_EVENT_TYPES[inputType];
|
|
124
|
-
if (!deleteEventSpec) {
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
const deleteData = {
|
|
128
|
-
direction: deleteEventSpec.direction,
|
|
129
|
-
unit: deleteEventSpec.unit,
|
|
130
|
-
sequence
|
|
131
|
-
};
|
|
132
|
-
if (deleteData.unit == DELETE_SELECTION) {
|
|
133
|
-
deleteData.selectionToRemove = view.createSelection(targetRanges[0]);
|
|
134
|
-
}
|
|
135
|
-
// The default deletion unit for deleteContentBackward is a single code point
|
|
136
|
-
// but if the browser provides a wider target range then we should use it.
|
|
137
|
-
if (inputType === 'deleteContentBackward') {
|
|
138
|
-
// On Android, deleteContentBackward has sequence 1 by default.
|
|
139
|
-
if (env.isAndroid) {
|
|
140
|
-
deleteData.sequence = 1;
|
|
141
|
-
}
|
|
142
|
-
// The beforeInput event wants more than a single character to be removed.
|
|
143
|
-
if (shouldUseTargetRanges(targetRanges)) {
|
|
144
|
-
deleteData.unit = DELETE_SELECTION;
|
|
145
|
-
deleteData.selectionToRemove = view.createSelection(targetRanges);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
const eventInfo = new BubblingEventInfo(document, 'delete', targetRanges[0]);
|
|
149
|
-
document.fire(eventInfo, new DomEventData(view, domEvent, deleteData));
|
|
150
|
-
// Stop the beforeinput event if `delete` event was stopped.
|
|
151
|
-
// https://github.com/ckeditor/ckeditor5/issues/753
|
|
152
|
-
if (eventInfo.stop.called) {
|
|
153
|
-
evt.stop();
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
// TODO: to be removed when https://bugs.chromium.org/p/chromium/issues/detail?id=1365311 is solved.
|
|
157
|
-
if (env.isBlink) {
|
|
158
|
-
enableChromeWorkaround(this);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* @inheritDoc
|
|
163
|
-
*/
|
|
164
|
-
observe() { }
|
|
165
|
-
/**
|
|
166
|
-
* @inheritDoc
|
|
167
|
-
*/
|
|
168
|
-
stopObserving() { }
|
|
169
|
-
}
|
|
170
|
-
/**
|
|
171
|
-
* Enables workaround for the issue https://github.com/ckeditor/ckeditor5/issues/11904.
|
|
172
|
-
*/
|
|
173
|
-
function enableChromeWorkaround(observer) {
|
|
174
|
-
const view = observer.view;
|
|
175
|
-
const document = view.document;
|
|
176
|
-
let pressedKeyCode = null;
|
|
177
|
-
let beforeInputReceived = false;
|
|
178
|
-
document.on('keydown', (evt, { keyCode }) => {
|
|
179
|
-
pressedKeyCode = keyCode;
|
|
180
|
-
beforeInputReceived = false;
|
|
181
|
-
});
|
|
182
|
-
document.on('keyup', (evt, { keyCode, domEvent }) => {
|
|
183
|
-
const selection = document.selection;
|
|
184
|
-
const shouldFireDeleteEvent = observer.isEnabled &&
|
|
185
|
-
keyCode == pressedKeyCode &&
|
|
186
|
-
isDeleteKeyCode(keyCode) &&
|
|
187
|
-
!selection.isCollapsed &&
|
|
188
|
-
!beforeInputReceived;
|
|
189
|
-
pressedKeyCode = null;
|
|
190
|
-
if (shouldFireDeleteEvent) {
|
|
191
|
-
const targetRange = selection.getFirstRange();
|
|
192
|
-
const eventInfo = new BubblingEventInfo(document, 'delete', targetRange);
|
|
193
|
-
const deleteData = {
|
|
194
|
-
unit: DELETE_SELECTION,
|
|
195
|
-
direction: getDeleteDirection(keyCode),
|
|
196
|
-
selectionToRemove: selection
|
|
197
|
-
};
|
|
198
|
-
document.fire(eventInfo, new DomEventData(view, domEvent, deleteData));
|
|
199
|
-
}
|
|
200
|
-
});
|
|
201
|
-
document.on('beforeinput', (evt, { inputType }) => {
|
|
202
|
-
const deleteEventSpec = DELETE_EVENT_TYPES[inputType];
|
|
203
|
-
const isMatchingBeforeInput = isDeleteKeyCode(pressedKeyCode) &&
|
|
204
|
-
deleteEventSpec &&
|
|
205
|
-
deleteEventSpec.direction == getDeleteDirection(pressedKeyCode);
|
|
206
|
-
if (isMatchingBeforeInput) {
|
|
207
|
-
beforeInputReceived = true;
|
|
208
|
-
}
|
|
209
|
-
}, { priority: 'high' });
|
|
210
|
-
document.on('beforeinput', (evt, { inputType, data }) => {
|
|
211
|
-
const shouldIgnoreBeforeInput = pressedKeyCode == keyCodes.delete &&
|
|
212
|
-
inputType == 'insertText' &&
|
|
213
|
-
data == '\x7f'; // Delete character :P
|
|
214
|
-
if (shouldIgnoreBeforeInput) {
|
|
215
|
-
evt.stop();
|
|
216
|
-
}
|
|
217
|
-
}, { priority: 'high' });
|
|
218
|
-
function isDeleteKeyCode(keyCode) {
|
|
219
|
-
return keyCode == keyCodes.backspace || keyCode == keyCodes.delete;
|
|
220
|
-
}
|
|
221
|
-
function getDeleteDirection(keyCode) {
|
|
222
|
-
return keyCode == keyCodes.backspace ? DELETE_BACKWARD : DELETE_FORWARD;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
/**
|
|
226
|
-
* Verifies whether the given target ranges cover more than a single character and should be used instead of a single code-point deletion.
|
|
227
|
-
*/
|
|
228
|
-
function shouldUseTargetRanges(targetRanges) {
|
|
229
|
-
// The collapsed target range could happen for example while deleting inside an inline filler
|
|
230
|
-
// (it's mapped to collapsed position before an inline filler).
|
|
231
|
-
if (targetRanges.length != 1 || targetRanges[0].isCollapsed) {
|
|
232
|
-
return false;
|
|
233
|
-
}
|
|
234
|
-
const walker = targetRanges[0].getWalker({
|
|
235
|
-
direction: 'backward',
|
|
236
|
-
singleCharacters: true,
|
|
237
|
-
ignoreElementEnd: true
|
|
238
|
-
});
|
|
239
|
-
let count = 0;
|
|
240
|
-
for (const { nextPosition } of walker) {
|
|
241
|
-
// There is some element in the range so count it as a single character.
|
|
242
|
-
if (!nextPosition.parent.is('$text')) {
|
|
243
|
-
count++;
|
|
244
|
-
}
|
|
245
|
-
else {
|
|
246
|
-
const data = nextPosition.parent.data;
|
|
247
|
-
const offset = nextPosition.offset;
|
|
248
|
-
// Count combined symbols and emoji sequences as a single character.
|
|
249
|
-
if (isInsideSurrogatePair(data, offset) ||
|
|
250
|
-
isInsideCombinedSymbol(data, offset) ||
|
|
251
|
-
isInsideEmojiSequence(data, offset)) {
|
|
252
|
-
continue;
|
|
253
|
-
}
|
|
254
|
-
count++;
|
|
255
|
-
}
|
|
256
|
-
if (count > 1) {
|
|
257
|
-
return true;
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
return false;
|
|
261
|
-
}
|
|
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
|
+
/**
|
|
6
|
+
* @module typing/deleteobserver
|
|
7
|
+
*/
|
|
8
|
+
import { env, keyCodes, isInsideCombinedSymbol, isInsideEmojiSequence, isInsideSurrogatePair } from '@ckeditor/ckeditor5-utils';
|
|
9
|
+
import { BubblingEventInfo, DomEventData, Observer } from '@ckeditor/ckeditor5-engine';
|
|
10
|
+
const DELETE_CHARACTER = 'character';
|
|
11
|
+
const DELETE_WORD = 'word';
|
|
12
|
+
const DELETE_CODE_POINT = 'codePoint';
|
|
13
|
+
const DELETE_SELECTION = 'selection';
|
|
14
|
+
const DELETE_BACKWARD = 'backward';
|
|
15
|
+
const DELETE_FORWARD = 'forward';
|
|
16
|
+
const DELETE_EVENT_TYPES = {
|
|
17
|
+
// --------------------------------------- Backward delete types -----------------------------------------------------
|
|
18
|
+
// This happens in Safari on Mac when some content is selected and Ctrl + K is pressed.
|
|
19
|
+
deleteContent: {
|
|
20
|
+
unit: DELETE_SELECTION,
|
|
21
|
+
// According to the Input Events Level 2 spec, this delete type has no direction
|
|
22
|
+
// but to keep things simple, let's default to backward.
|
|
23
|
+
direction: DELETE_BACKWARD
|
|
24
|
+
},
|
|
25
|
+
// Chrome and Safari on Mac: Backspace or Ctrl + H
|
|
26
|
+
deleteContentBackward: {
|
|
27
|
+
// This kind of deletions must be done on the code point-level instead of target range provided by the DOM beforeinput event.
|
|
28
|
+
// Take for instance "👨👩👧👧", it equals:
|
|
29
|
+
//
|
|
30
|
+
// * [ "👨", "ZERO WIDTH JOINER", "👩", "ZERO WIDTH JOINER", "👧", "ZERO WIDTH JOINER", "👧" ]
|
|
31
|
+
// * or simply "\u{1F468}\u200D\u{1F469}\u200D\u{1F467}\u200D\u{1F467}"
|
|
32
|
+
//
|
|
33
|
+
// The range provided by the browser would cause the entire multi-byte grapheme to disappear while the user
|
|
34
|
+
// intention when deleting backwards ("👨👩👧👧[]", then backspace) is gradual "decomposition" (first to "👨👩👧[]",
|
|
35
|
+
// then to "👨👩[]", etc.).
|
|
36
|
+
//
|
|
37
|
+
// * "👨👩👧👧[]" + backward delete (by code point) -> results in "👨👩👧[]", removed the last "👧" 👍
|
|
38
|
+
// * "👨👩👧👧[]" + backward delete (by character) -> results in "[]", removed the whole grapheme 👎
|
|
39
|
+
//
|
|
40
|
+
// Deleting by code-point is simply a better UX. See "deleteContentForward" to learn more.
|
|
41
|
+
unit: DELETE_CODE_POINT,
|
|
42
|
+
direction: DELETE_BACKWARD
|
|
43
|
+
},
|
|
44
|
+
// On Mac: Option + Backspace.
|
|
45
|
+
// On iOS: Hold the backspace for a while and the whole words will start to disappear.
|
|
46
|
+
deleteWordBackward: {
|
|
47
|
+
unit: DELETE_WORD,
|
|
48
|
+
direction: DELETE_BACKWARD
|
|
49
|
+
},
|
|
50
|
+
// Safari on Mac: Cmd + Backspace
|
|
51
|
+
deleteHardLineBackward: {
|
|
52
|
+
unit: DELETE_SELECTION,
|
|
53
|
+
direction: DELETE_BACKWARD
|
|
54
|
+
},
|
|
55
|
+
// Chrome on Mac: Cmd + Backspace.
|
|
56
|
+
deleteSoftLineBackward: {
|
|
57
|
+
unit: DELETE_SELECTION,
|
|
58
|
+
direction: DELETE_BACKWARD
|
|
59
|
+
},
|
|
60
|
+
// --------------------------------------- Forward delete types -----------------------------------------------------
|
|
61
|
+
// Chrome on Mac: Fn + Backspace or Ctrl + D
|
|
62
|
+
// Safari on Mac: Ctrl + K or Ctrl + D
|
|
63
|
+
deleteContentForward: {
|
|
64
|
+
// Unlike backward delete, this delete must be performed by character instead of by code point, which
|
|
65
|
+
// provides the best UX for working with accented letters.
|
|
66
|
+
// Take, for example "b̂" ("\u0062\u0302", or [ "LATIN SMALL LETTER B", "COMBINING CIRCUMFLEX ACCENT" ]):
|
|
67
|
+
//
|
|
68
|
+
// * "b̂[]" + backward delete (by code point) -> results in "b[]", removed the combining mark 👍
|
|
69
|
+
// * "[]b̂" + forward delete (by code point) -> results in "[]^", a bare combining mark does that not make sense when alone 👎
|
|
70
|
+
// * "[]b̂" + forward delete (by character) -> results in "[]", removed both "b" and the combining mark 👍
|
|
71
|
+
//
|
|
72
|
+
// See: "deleteContentBackward" to learn more.
|
|
73
|
+
unit: DELETE_CHARACTER,
|
|
74
|
+
direction: DELETE_FORWARD
|
|
75
|
+
},
|
|
76
|
+
// On Mac: Fn + Option + Backspace.
|
|
77
|
+
deleteWordForward: {
|
|
78
|
+
unit: DELETE_WORD,
|
|
79
|
+
direction: DELETE_FORWARD
|
|
80
|
+
},
|
|
81
|
+
// Chrome on Mac: Ctrl + K (you have to disable the Link plugin first, though, because it uses the same keystroke)
|
|
82
|
+
// This is weird that it does not work in Safari on Mac despite being listed in the official shortcuts listing
|
|
83
|
+
// on Apple's webpage.
|
|
84
|
+
deleteHardLineForward: {
|
|
85
|
+
unit: DELETE_SELECTION,
|
|
86
|
+
direction: DELETE_FORWARD
|
|
87
|
+
},
|
|
88
|
+
// At this moment there is no known way to trigger this event type but let's keep it for the symmetry with
|
|
89
|
+
// deleteSoftLineBackward.
|
|
90
|
+
deleteSoftLineForward: {
|
|
91
|
+
unit: DELETE_SELECTION,
|
|
92
|
+
direction: DELETE_FORWARD
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Delete observer introduces the {@link module:engine/view/document~Document#event:delete} event.
|
|
97
|
+
*/
|
|
98
|
+
export default class DeleteObserver extends Observer {
|
|
99
|
+
/**
|
|
100
|
+
* @inheritDoc
|
|
101
|
+
*/
|
|
102
|
+
constructor(view) {
|
|
103
|
+
super(view);
|
|
104
|
+
const document = view.document;
|
|
105
|
+
// It matters how many subsequent deletions were made, e.g. when the backspace key was pressed and held
|
|
106
|
+
// by the user for some time. For instance, if such scenario ocurred and the heading the selection was
|
|
107
|
+
// anchored to was the only content of the editor, it will not be converted into a paragraph (the user
|
|
108
|
+
// wanted to clean it up, not remove it, it's about UX). Check out the DeleteCommand implementation to learn more.
|
|
109
|
+
//
|
|
110
|
+
// Fun fact: Safari on Mac won't fire beforeinput for backspace in an empty heading (only content).
|
|
111
|
+
let sequence = 0;
|
|
112
|
+
document.on('keydown', () => {
|
|
113
|
+
sequence++;
|
|
114
|
+
});
|
|
115
|
+
document.on('keyup', () => {
|
|
116
|
+
sequence = 0;
|
|
117
|
+
});
|
|
118
|
+
document.on('beforeinput', (evt, data) => {
|
|
119
|
+
if (!this.isEnabled) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
const { targetRanges, domEvent, inputType } = data;
|
|
123
|
+
const deleteEventSpec = DELETE_EVENT_TYPES[inputType];
|
|
124
|
+
if (!deleteEventSpec) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
const deleteData = {
|
|
128
|
+
direction: deleteEventSpec.direction,
|
|
129
|
+
unit: deleteEventSpec.unit,
|
|
130
|
+
sequence
|
|
131
|
+
};
|
|
132
|
+
if (deleteData.unit == DELETE_SELECTION) {
|
|
133
|
+
deleteData.selectionToRemove = view.createSelection(targetRanges[0]);
|
|
134
|
+
}
|
|
135
|
+
// The default deletion unit for deleteContentBackward is a single code point
|
|
136
|
+
// but if the browser provides a wider target range then we should use it.
|
|
137
|
+
if (inputType === 'deleteContentBackward') {
|
|
138
|
+
// On Android, deleteContentBackward has sequence 1 by default.
|
|
139
|
+
if (env.isAndroid) {
|
|
140
|
+
deleteData.sequence = 1;
|
|
141
|
+
}
|
|
142
|
+
// The beforeInput event wants more than a single character to be removed.
|
|
143
|
+
if (shouldUseTargetRanges(targetRanges)) {
|
|
144
|
+
deleteData.unit = DELETE_SELECTION;
|
|
145
|
+
deleteData.selectionToRemove = view.createSelection(targetRanges);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
const eventInfo = new BubblingEventInfo(document, 'delete', targetRanges[0]);
|
|
149
|
+
document.fire(eventInfo, new DomEventData(view, domEvent, deleteData));
|
|
150
|
+
// Stop the beforeinput event if `delete` event was stopped.
|
|
151
|
+
// https://github.com/ckeditor/ckeditor5/issues/753
|
|
152
|
+
if (eventInfo.stop.called) {
|
|
153
|
+
evt.stop();
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
// TODO: to be removed when https://bugs.chromium.org/p/chromium/issues/detail?id=1365311 is solved.
|
|
157
|
+
if (env.isBlink) {
|
|
158
|
+
enableChromeWorkaround(this);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* @inheritDoc
|
|
163
|
+
*/
|
|
164
|
+
observe() { }
|
|
165
|
+
/**
|
|
166
|
+
* @inheritDoc
|
|
167
|
+
*/
|
|
168
|
+
stopObserving() { }
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Enables workaround for the issue https://github.com/ckeditor/ckeditor5/issues/11904.
|
|
172
|
+
*/
|
|
173
|
+
function enableChromeWorkaround(observer) {
|
|
174
|
+
const view = observer.view;
|
|
175
|
+
const document = view.document;
|
|
176
|
+
let pressedKeyCode = null;
|
|
177
|
+
let beforeInputReceived = false;
|
|
178
|
+
document.on('keydown', (evt, { keyCode }) => {
|
|
179
|
+
pressedKeyCode = keyCode;
|
|
180
|
+
beforeInputReceived = false;
|
|
181
|
+
});
|
|
182
|
+
document.on('keyup', (evt, { keyCode, domEvent }) => {
|
|
183
|
+
const selection = document.selection;
|
|
184
|
+
const shouldFireDeleteEvent = observer.isEnabled &&
|
|
185
|
+
keyCode == pressedKeyCode &&
|
|
186
|
+
isDeleteKeyCode(keyCode) &&
|
|
187
|
+
!selection.isCollapsed &&
|
|
188
|
+
!beforeInputReceived;
|
|
189
|
+
pressedKeyCode = null;
|
|
190
|
+
if (shouldFireDeleteEvent) {
|
|
191
|
+
const targetRange = selection.getFirstRange();
|
|
192
|
+
const eventInfo = new BubblingEventInfo(document, 'delete', targetRange);
|
|
193
|
+
const deleteData = {
|
|
194
|
+
unit: DELETE_SELECTION,
|
|
195
|
+
direction: getDeleteDirection(keyCode),
|
|
196
|
+
selectionToRemove: selection
|
|
197
|
+
};
|
|
198
|
+
document.fire(eventInfo, new DomEventData(view, domEvent, deleteData));
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
document.on('beforeinput', (evt, { inputType }) => {
|
|
202
|
+
const deleteEventSpec = DELETE_EVENT_TYPES[inputType];
|
|
203
|
+
const isMatchingBeforeInput = isDeleteKeyCode(pressedKeyCode) &&
|
|
204
|
+
deleteEventSpec &&
|
|
205
|
+
deleteEventSpec.direction == getDeleteDirection(pressedKeyCode);
|
|
206
|
+
if (isMatchingBeforeInput) {
|
|
207
|
+
beforeInputReceived = true;
|
|
208
|
+
}
|
|
209
|
+
}, { priority: 'high' });
|
|
210
|
+
document.on('beforeinput', (evt, { inputType, data }) => {
|
|
211
|
+
const shouldIgnoreBeforeInput = pressedKeyCode == keyCodes.delete &&
|
|
212
|
+
inputType == 'insertText' &&
|
|
213
|
+
data == '\x7f'; // Delete character :P
|
|
214
|
+
if (shouldIgnoreBeforeInput) {
|
|
215
|
+
evt.stop();
|
|
216
|
+
}
|
|
217
|
+
}, { priority: 'high' });
|
|
218
|
+
function isDeleteKeyCode(keyCode) {
|
|
219
|
+
return keyCode == keyCodes.backspace || keyCode == keyCodes.delete;
|
|
220
|
+
}
|
|
221
|
+
function getDeleteDirection(keyCode) {
|
|
222
|
+
return keyCode == keyCodes.backspace ? DELETE_BACKWARD : DELETE_FORWARD;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Verifies whether the given target ranges cover more than a single character and should be used instead of a single code-point deletion.
|
|
227
|
+
*/
|
|
228
|
+
function shouldUseTargetRanges(targetRanges) {
|
|
229
|
+
// The collapsed target range could happen for example while deleting inside an inline filler
|
|
230
|
+
// (it's mapped to collapsed position before an inline filler).
|
|
231
|
+
if (targetRanges.length != 1 || targetRanges[0].isCollapsed) {
|
|
232
|
+
return false;
|
|
233
|
+
}
|
|
234
|
+
const walker = targetRanges[0].getWalker({
|
|
235
|
+
direction: 'backward',
|
|
236
|
+
singleCharacters: true,
|
|
237
|
+
ignoreElementEnd: true
|
|
238
|
+
});
|
|
239
|
+
let count = 0;
|
|
240
|
+
for (const { nextPosition } of walker) {
|
|
241
|
+
// There is some element in the range so count it as a single character.
|
|
242
|
+
if (!nextPosition.parent.is('$text')) {
|
|
243
|
+
count++;
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
const data = nextPosition.parent.data;
|
|
247
|
+
const offset = nextPosition.offset;
|
|
248
|
+
// Count combined symbols and emoji sequences as a single character.
|
|
249
|
+
if (isInsideSurrogatePair(data, offset) ||
|
|
250
|
+
isInsideCombinedSymbol(data, offset) ||
|
|
251
|
+
isInsideEmojiSequence(data, offset)) {
|
|
252
|
+
continue;
|
|
253
|
+
}
|
|
254
|
+
count++;
|
|
255
|
+
}
|
|
256
|
+
if (count > 1) {
|
|
257
|
+
return true;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
return false;
|
|
261
|
+
}
|