-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
dom.js
493 lines (413 loc) · 13.8 KB
/
dom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
/**
* External dependencies
*/
import { includes, first } from 'lodash';
import tinymce from 'tinymce';
/**
* Browser dependencies
*/
const { getComputedStyle, DOMRect } = window;
const { TEXT_NODE, ELEMENT_NODE } = window.Node;
/**
* Check whether the caret is horizontally at the edge of the container.
*
* @param {Element} container Focusable element.
* @param {boolean} isReverse Set to true to check left, false for right.
* @param {boolean} collapseRanges Whether or not to collapse the selection range before the check.
*
* @return {boolean} True if at the horizontal edge, false if not.
*/
export function isHorizontalEdge( container, isReverse, collapseRanges = false ) {
if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) {
if ( container.selectionStart !== container.selectionEnd ) {
return false;
}
if ( isReverse ) {
return container.selectionStart === 0;
}
return container.value.length === container.selectionStart;
}
if ( ! container.isContentEditable ) {
return true;
}
// If the container is empty, the caret is always at the edge.
if ( tinymce.DOM.isEmpty( container ) ) {
return true;
}
const selection = window.getSelection();
let range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
if ( collapseRanges ) {
range = range.cloneRange();
range.collapse( isReverse );
}
if ( ! range || ! range.collapsed ) {
return false;
}
const position = isReverse ? 'start' : 'end';
const order = isReverse ? 'first' : 'last';
const offset = range[ `${ position }Offset` ];
let node = range.startContainer;
if ( isReverse && offset !== 0 ) {
return false;
}
const maxOffset = node.nodeType === TEXT_NODE ? node.nodeValue.length : node.childNodes.length;
if ( ! isReverse && offset !== maxOffset ) {
return false;
}
while ( node !== container ) {
const parentNode = node.parentNode;
if ( parentNode[ `${ order }Child` ] !== node ) {
return false;
}
node = parentNode;
}
return true;
}
/**
* Check whether the caret is vertically at the edge of the container.
*
* @param {Element} container Focusable element.
* @param {boolean} isReverse Set to true to check top, false for bottom.
* @param {boolean} collapseRanges Whether or not to collapse the selection range before the check.
*
* @return {boolean} True if at the edge, false if not.
*/
export function isVerticalEdge( container, isReverse, collapseRanges = false ) {
if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) {
return isHorizontalEdge( container, isReverse );
}
if ( ! container.isContentEditable ) {
return true;
}
const selection = window.getSelection();
let range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
if ( collapseRanges && range && ! range.collapsed ) {
const newRange = document.createRange();
// Get the end point of the selection (see focusNode vs. anchorNode)
newRange.setStart( selection.focusNode, selection.focusOffset );
newRange.collapse( true );
range = newRange;
}
if ( ! range || ! range.collapsed ) {
return false;
}
const rangeRect = getRectangleFromRange( range );
if ( ! rangeRect ) {
return false;
}
const buffer = rangeRect.height / 2;
const editableRect = container.getBoundingClientRect();
// Too low.
if ( isReverse && rangeRect.top - buffer > editableRect.top ) {
return false;
}
// Too high.
if ( ! isReverse && rangeRect.bottom + buffer < editableRect.bottom ) {
return false;
}
return true;
}
/**
* Get the rectangle of a given Range.
*
* @param {Range} range The range.
*
* @return {DOMRect} The rectangle.
*/
export function getRectangleFromRange( range ) {
// For uncollapsed ranges, get the rectangle that bounds the contents of the
// range; this a rectangle enclosing the union of the bounding rectangles
// for all the elements in the range.
if ( ! range.collapsed ) {
return range.getBoundingClientRect();
}
// If the collapsed range starts (and therefore ends) at an element node,
// `getClientRects` will return undefined. To fix this we can get the
// bounding rectangle of the element node to create a DOMRect based on that.
if ( range.startContainer.nodeType === ELEMENT_NODE ) {
const { x, y, height } = range.startContainer.getBoundingClientRect();
// Create a new DOMRect with zero width.
return new DOMRect( x, y, 0, height );
}
// For normal collapsed ranges (exception above), the bounding rectangle of
// the range may be inaccurate in some browsers. There will only be one
// rectangle since it is a collapsed range, so it is safe to pass this as
// the union of them. This works consistently in all browsers.
return first( range.getClientRects() );
}
/**
* Get the rectangle for the selection in a container.
*
* @param {Element} container Editable container.
*
* @return {?DOMRect} The rectangle.
*/
export function computeCaretRect( container ) {
if ( ! container.isContentEditable ) {
return;
}
const selection = window.getSelection();
const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
if ( ! range || ! range.collapsed ) {
return;
}
return getRectangleFromRange( range );
}
/**
* Places the caret at start or end of a given element.
*
* @param {Element} container Focusable element.
* @param {boolean} isReverse True for end, false for start.
*/
export function placeCaretAtHorizontalEdge( container, isReverse ) {
if ( ! container ) {
return;
}
if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) {
container.focus();
if ( isReverse ) {
container.selectionStart = container.value.length;
container.selectionEnd = container.value.length;
} else {
container.selectionStart = 0;
container.selectionEnd = 0;
}
return;
}
if ( ! container.isContentEditable ) {
container.focus();
return;
}
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents( container );
range.collapse( ! isReverse );
selection.removeAllRanges();
selection.addRange( range );
container.focus();
}
/**
* Polyfill.
* Get a collapsed range for a given point.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint
*
* @param {Document} doc The document of the range.
* @param {number} x Horizontal position within the current viewport.
* @param {number} y Vertical position within the current viewport.
*
* @return {?Range} The best range for the given point.
*/
function caretRangeFromPoint( doc, x, y ) {
if ( doc.caretRangeFromPoint ) {
return doc.caretRangeFromPoint( x, y );
}
if ( ! doc.caretPositionFromPoint ) {
return null;
}
const point = doc.caretPositionFromPoint( x, y );
// If x or y are negative, outside viewport, or there is no text entry node.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint
if ( ! point ) {
return null;
}
const range = doc.createRange();
range.setStart( point.offsetNode, point.offset );
range.collapse( true );
return range;
}
/**
* Get a collapsed range for a given point.
* Gives the container a temporary high z-index (above any UI).
* This is preferred over getting the UI nodes and set styles there.
*
* @param {Document} doc The document of the range.
* @param {number} x Horizontal position within the current viewport.
* @param {number} y Vertical position within the current viewport.
* @param {Element} container Container in which the range is expected to be found.
*
* @return {?Range} The best range for the given point.
*/
function hiddenCaretRangeFromPoint( doc, x, y, container ) {
container.style.zIndex = '10000';
const range = caretRangeFromPoint( doc, x, y );
container.style.zIndex = null;
return range;
}
/**
* Places the caret at the top or bottom of a given element.
*
* @param {Element} container Focusable element.
* @param {boolean} isReverse True for bottom, false for top.
* @param {DOMRect} [rect] The rectangle to position the caret with.
* @param {boolean} [mayUseScroll=true] True to allow scrolling, false to disallow.
*/
export function placeCaretAtVerticalEdge( container, isReverse, rect, mayUseScroll = true ) {
if ( ! container ) {
return;
}
if ( ! rect || ! container.isContentEditable ) {
placeCaretAtHorizontalEdge( container, isReverse );
return;
}
// Offset by a buffer half the height of the caret rect. This is needed
// because caretRangeFromPoint may default to the end of the selection if
// offset is too close to the edge. It's unclear how to precisely calculate
// this threshold; it may be the padded area of some combination of line
// height, caret height, and font size. The buffer offset is effectively
// equivalent to a point at half the height of a line of text.
const buffer = rect.height / 2;
const editableRect = container.getBoundingClientRect();
const x = rect.left + ( rect.width / 2 );
const y = isReverse ? ( editableRect.bottom - buffer ) : ( editableRect.top + buffer );
const selection = window.getSelection();
let range = hiddenCaretRangeFromPoint( document, x, y, container );
if ( ! range || ! container.contains( range.startContainer ) ) {
if ( mayUseScroll && (
( ! range || ! range.startContainer ) ||
! range.startContainer.contains( container ) ) ) {
// Might be out of view.
// Easier than attempting to calculate manually.
container.scrollIntoView( isReverse );
placeCaretAtVerticalEdge( container, isReverse, rect, false );
return;
}
placeCaretAtHorizontalEdge( container, isReverse );
return;
}
// Check if the closest text node is actually further away.
// If so, attempt to get the range again with the y position adjusted to get the right offset.
if ( range.startContainer.nodeType === TEXT_NODE ) {
const parentNode = range.startContainer.parentNode;
const parentRect = parentNode.getBoundingClientRect();
const side = isReverse ? 'bottom' : 'top';
const padding = parseInt( getComputedStyle( parentNode ).getPropertyValue( `padding-${ side }` ), 10 ) || 0;
const actualY = isReverse ? ( parentRect.bottom - padding - buffer ) : ( parentRect.top + padding + buffer );
if ( y !== actualY ) {
range = hiddenCaretRangeFromPoint( document, x, actualY, container );
}
}
selection.removeAllRanges();
selection.addRange( range );
container.focus();
// Editable was already focussed, it goes back to old range...
// This fixes it.
selection.removeAllRanges();
selection.addRange( range );
}
/**
* Check whether the given element is a text field, where text field is defined
* by the ability to select within the input, or that it is contenteditable.
*
* See: https://html.spec.whatwg.org/#textFieldSelection
*
* @param {HTMLElement} element The HTML element.
*
* @return {boolean} True if the element is an text field, false if not.
*/
export function isTextField( element ) {
const { nodeName, selectionStart, contentEditable } = element;
return (
( nodeName === 'INPUT' && selectionStart !== null ) ||
( nodeName === 'TEXTAREA' ) ||
contentEditable === 'true'
);
}
/**
* Check wether the current document has a selection.
* This checks both for focus in an input field and general text selection.
*
* @return {boolean} True if there is selection, false if not.
*/
export function documentHasSelection() {
if ( isTextField( document.activeElement ) ) {
return true;
}
const selection = window.getSelection();
const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
return range && ! range.collapsed;
}
/**
* Given a DOM node, finds the closest scrollable container node.
*
* @param {Element} node Node from which to start.
*
* @return {?Element} Scrollable container node, if found.
*/
export function getScrollContainer( node ) {
if ( ! node ) {
return;
}
// Scrollable if scrollable height exceeds displayed...
if ( node.scrollHeight > node.clientHeight ) {
// ...except when overflow is defined to be hidden or visible
const { overflowY } = window.getComputedStyle( node );
if ( /(auto|scroll)/.test( overflowY ) ) {
return node;
}
}
// Continue traversing
return getScrollContainer( node.parentNode );
}
/**
* Given two DOM nodes, replaces the former with the latter in the DOM.
*
* @param {Element} processedNode Node to be removed.
* @param {Element} newNode Node to be inserted in its place.
* @return {void}
*/
export function replace( processedNode, newNode ) {
insertAfter( newNode, processedNode.parentNode );
remove( processedNode );
}
/**
* Given a DOM node, removes it from the DOM.
*
* @param {Element} node Node to be removed.
* @return {void}
*/
export function remove( node ) {
node.parentNode.removeChild( node );
}
/**
* Given two DOM nodes, inserts the former in the DOM as the next sibling of
* the latter.
*
* @param {Element} newNode Node to be inserted.
* @param {Element} referenceNode Node after which to perform the insertion.
* @return {void}
*/
export function insertAfter( newNode, referenceNode ) {
referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}
/**
* Unwrap the given node. This means any child nodes are moved to the parent.
*
* @param {Node} node The node to unwrap.
*
* @return {void}
*/
export function unwrap( node ) {
const parent = node.parentNode;
while ( node.firstChild ) {
parent.insertBefore( node.firstChild, node );
}
parent.removeChild( node );
}
/**
* Replaces the given node with a new node with the given tag name.
*
* @param {Element} node The node to replace
* @param {string} tagName The new tag name.
* @param {Document} doc The document of the node.
*
* @return {Element} The new node.
*/
export function replaceTag( node, tagName, doc ) {
const newNode = doc.createElement( tagName );
while ( node.firstChild ) {
newNode.appendChild( node.firstChild );
}
node.parentNode.replaceChild( newNode, node );
return newNode;
}