@wordpress/dom 3.8.0 → 3.11.0

package/src/dom/clean-node-list.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { includes, noop } from 'lodash';
+import { includes } from 'lodash';
 
 /**
  * Internal dependencies
@@ -13,6 +13,8 @@ import { isPhrasingContent } from '../phrasing-content';
 import insertAfter from './insert-after';
 import isElement from './is-element';
 
+const noop = () => {};
+
 /* eslint-disable jsdoc/valid-types */
 /**
  * @typedef SchemaItem
@@ -37,150 +39,153 @@ import isElement from './is-element';
  * @param {boolean}  inline   Whether to clean for inline mode.
  */
 export default function cleanNodeList( nodeList, doc, schema, inline ) {
-	Array.from( nodeList ).forEach( (
-		/** @type {Node & { nextElementSibling?: unknown }} */ node
-	) => {
-		const tag = node.nodeName.toLowerCase();
-
-		// It's a valid child, if the tag exists in the schema without an isMatch
-		// function, or with an isMatch function that matches the node.
-		if (
-			schema.hasOwnProperty( tag ) &&
-			( ! schema[ tag ].isMatch || schema[ tag ].isMatch?.( node ) )
-		) {
-			if ( isElement( node ) ) {
-				const {
-					attributes = [],
-					classes = [],
-					children,
-					require = [],
-					allowEmpty,
-				} = schema[ tag ];
-
-				// If the node is empty and it's supposed to have children,
-				// remove the node.
-				if ( children && ! allowEmpty && isEmpty( node ) ) {
-					remove( node );
-					return;
-				}
-
-				if ( node.hasAttributes() ) {
-					// Strip invalid attributes.
-					Array.from( node.attributes ).forEach( ( { name } ) => {
-						if (
-							name !== 'class' &&
-							! includes( attributes, name )
-						) {
-							node.removeAttribute( name );
-						}
-					} );
-
-					// Strip invalid classes.
-					// In jsdom-jscore, 'node.classList' can be undefined.
-					// TODO: Explore patching this in jsdom-jscore.
-					if ( node.classList && node.classList.length ) {
-						const mattchers = classes.map( ( item ) => {
-							if ( typeof item === 'string' ) {
-								return ( /** @type {string} */ className ) =>
-									className === item;
-							} else if ( item instanceof RegExp ) {
-								return ( /** @type {string} */ className ) =>
-									item.test( className );
-							}
+	Array.from( nodeList ).forEach(
+		( /** @type {Node & { nextElementSibling?: unknown }} */ node ) => {
+			const tag = node.nodeName.toLowerCase();
 
-							return noop;
-						} );
+			// It's a valid child, if the tag exists in the schema without an isMatch
+			// function, or with an isMatch function that matches the node.
+			if (
+				schema.hasOwnProperty( tag ) &&
+				( ! schema[ tag ].isMatch || schema[ tag ].isMatch?.( node ) )
+			) {
+				if ( isElement( node ) ) {
+					const {
+						attributes = [],
+						classes = [],
+						children,
+						require = [],
+						allowEmpty,
+					} = schema[ tag ];
+
+					// If the node is empty and it's supposed to have children,
+					// remove the node.
+					if ( children && ! allowEmpty && isEmpty( node ) ) {
+						remove( node );
+						return;
+					}
 
-						Array.from( node.classList ).forEach( ( name ) => {
+					if ( node.hasAttributes() ) {
+						// Strip invalid attributes.
+						Array.from( node.attributes ).forEach( ( { name } ) => {
 							if (
-								! mattchers.some( ( isMatch ) =>
-									isMatch( name )
-								)
+								name !== 'class' &&
+								! includes( attributes, name )
 							) {
-								node.classList.remove( name );
+								node.removeAttribute( name );
 							}
 						} );
 
-						if ( ! node.classList.length ) {
-							node.removeAttribute( 'class' );
+						// Strip invalid classes.
+						// In jsdom-jscore, 'node.classList' can be undefined.
+						// TODO: Explore patching this in jsdom-jscore.
+						if ( node.classList && node.classList.length ) {
+							const mattchers = classes.map( ( item ) => {
+								if ( typeof item === 'string' ) {
+									return (
+										/** @type {string} */ className
+									) => className === item;
+								} else if ( item instanceof RegExp ) {
+									return (
+										/** @type {string} */ className
+									) => item.test( className );
+								}
+
+								return noop;
+							} );
+
+							Array.from( node.classList ).forEach( ( name ) => {
+								if (
+									! mattchers.some( ( isMatch ) =>
+										isMatch( name )
+									)
+								) {
+									node.classList.remove( name );
+								}
+							} );
+
+							if ( ! node.classList.length ) {
+								node.removeAttribute( 'class' );
+							}
 						}
 					}
-				}
-
-				if ( node.hasChildNodes() ) {
-					// Do not filter any content.
-					if ( children === '*' ) {
-						return;
-					}
 
-					// Continue if the node is supposed to have children.
-					if ( children ) {
-						// If a parent requires certain children, but it does
-						// not have them, drop the parent and continue.
-						if (
-							require.length &&
-							! node.querySelector( require.join( ',' ) )
-						) {
-							cleanNodeList(
-								node.childNodes,
-								doc,
-								schema,
-								inline
-							);
-							unwrap( node );
-							// If the node is at the top, phrasing content, and
-							// contains children that are block content, unwrap
-							// the node because it is invalid.
-						} else if (
-							node.parentNode &&
-							node.parentNode.nodeName === 'BODY' &&
-							isPhrasingContent( node )
-						) {
-							cleanNodeList(
-								node.childNodes,
-								doc,
-								schema,
-								inline
-							);
+					if ( node.hasChildNodes() ) {
+						// Do not filter any content.
+						if ( children === '*' ) {
+							return;
+						}
 
+						// Continue if the node is supposed to have children.
+						if ( children ) {
+							// If a parent requires certain children, but it does
+							// not have them, drop the parent and continue.
 							if (
-								Array.from( node.childNodes ).some(
-									( child ) => ! isPhrasingContent( child )
-								)
+								require.length &&
+								! node.querySelector( require.join( ',' ) )
 							) {
+								cleanNodeList(
+									node.childNodes,
+									doc,
+									schema,
+									inline
+								);
 								unwrap( node );
+								// If the node is at the top, phrasing content, and
+								// contains children that are block content, unwrap
+								// the node because it is invalid.
+							} else if (
+								node.parentNode &&
+								node.parentNode.nodeName === 'BODY' &&
+								isPhrasingContent( node )
+							) {
+								cleanNodeList(
+									node.childNodes,
+									doc,
+									schema,
+									inline
+								);
+
+								if (
+									Array.from( node.childNodes ).some(
+										( child ) =>
+											! isPhrasingContent( child )
+									)
+								) {
+									unwrap( node );
+								}
+							} else {
+								cleanNodeList(
+									node.childNodes,
+									doc,
+									children,
+									inline
+								);
 							}
+							// Remove children if the node is not supposed to have any.
 						} else {
-							cleanNodeList(
-								node.childNodes,
-								doc,
-								children,
-								inline
-							);
-						}
-						// Remove children if the node is not supposed to have any.
-					} else {
-						while ( node.firstChild ) {
-							remove( node.firstChild );
+							while ( node.firstChild ) {
+								remove( node.firstChild );
+							}
 						}
 					}
 				}
-			}
-			// Invalid child. Continue with schema at the same place and unwrap.
-		} else {
-			cleanNodeList( node.childNodes, doc, schema, inline );
+				// Invalid child. Continue with schema at the same place and unwrap.
+			} else {
+				cleanNodeList( node.childNodes, doc, schema, inline );
+
+				// For inline mode, insert a line break when unwrapping nodes that
+				// are not phrasing content.
+				if (
+					inline &&
+					! isPhrasingContent( node ) &&
+					node.nextElementSibling
+				) {
+					insertAfter( doc.createElement( 'br' ), node );
+				}
 
-			// For inline mode, insert a line break when unwrapping nodes that
-			// are not phrasing content.
-			if (
-				inline &&
-				! isPhrasingContent( node ) &&
-				node.nextElementSibling
-			) {
-				insertAfter( doc.createElement( 'br' ), node );
+				unwrap( node );
 			}
-
-			unwrap( node );
 		}
-	} );
+	);
 }

package/src/dom/document-has-selection.js

@@ -2,12 +2,12 @@
  * Internal dependencies
  */
 import isTextField from './is-text-field';
-import isNumberInput from './is-number-input';
+import isHTMLInputElement from './is-html-input-element';
 import documentHasTextSelection from './document-has-text-selection';
 
 /**
- * Check whether the current document has a selection. This checks for both
- * focus in an input field and general text selection.
+ * Check whether the current document has a selection. This includes focus in
+ * input fields, textareas, and general rich-text selection.
  *
  * @param {Document} doc The document to check.
  *
@@ -16,8 +16,8 @@ import documentHasTextSelection from './document-has-text-selection';
 export default function documentHasSelection( doc ) {
 	return (
 		!! doc.activeElement &&
-		( isTextField( doc.activeElement ) ||
-			isNumberInput( doc.activeElement ) ||
+		( isHTMLInputElement( doc.activeElement ) ||
+			isTextField( doc.activeElement ) ||
 			documentHasTextSelection( doc ) )
 	);
 }

package/src/dom/document-has-uncollapsed-selection.js

@@ -5,13 +5,13 @@ import documentHasTextSelection from './document-has-text-selection';
 import inputFieldHasUncollapsedSelection from './input-field-has-uncollapsed-selection';
 
 /**
- * Check whether the current document has any sort of selection. This includes
- * ranges of text across elements and any selection inside `<input>` and
- * `<textarea>` elements.
+ * Check whether the current document has any sort of (uncollapsed) selection.
+ * This includes ranges of text across elements and any selection inside
+ * textual `<input>` and `<textarea>` elements.
  *
  * @param {Document} doc The document to check.
  *
- * @return {boolean} Whether there is any sort of "selection" in the document.
+ * @return {boolean} Whether there is any recognizable text selection in the document.
  */
 export default function documentHasUncollapsedSelection( doc ) {
 	return (

package/src/dom/get-rectangle-from-range.js

@@ -63,9 +63,9 @@ export default function getRectangleFromRange( range ) {
 	if ( startContainer.nodeName === 'BR' ) {
 		const { parentNode } = startContainer;
 		assertIsDefined( parentNode, 'parentNode' );
-		const index = /** @type {Node[]} */ ( Array.from(
-			parentNode.childNodes
-		) ).indexOf( startContainer );
+		const index = /** @type {Node[]} */ (
+			Array.from( parentNode.childNodes )
+		).indexOf( startContainer );
 
 		assertIsDefined( ownerDocument, 'ownerDocument' );
 		range = ownerDocument.createRange();

package/src/dom/input-field-has-uncollapsed-selection.js

@@ -2,41 +2,47 @@
  * Internal dependencies
  */
 import isTextField from './is-text-field';
-import isNumberInput from './is-number-input';
+import isHTMLInputElement from './is-html-input-element';
 
 /**
- * Check whether the given element, assumed an input field or textarea,
- * contains a (uncollapsed) selection of text.
+ * Check whether the given input field or textarea contains a (uncollapsed)
+ * selection of text.
  *
- * Note: this is perhaps an abuse of the term "selection", since these elements
- * manage selection differently and aren't covered by Selection#collapsed.
+ * CAVEAT: Only specific text-based HTML inputs support the selection APIs
+ * needed to determine whether they have a collapsed or uncollapsed selection.
+ * This function defaults to returning `true` when the selection cannot be
+ * inspected, such as with `<input type="time">`. The rationale is that this
+ * should cause the block editor to defer to the browser's native selection
+ * handling (e.g. copying and pasting), thereby reducing friction for the user.
  *
- * See: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection#Related_objects.
+ * See: https://html.spec.whatwg.org/multipage/input.html#do-not-apply
  *
  * @param {Element} element The HTML element.
  *
  * @return {boolean} Whether the input/textareaa element has some "selection".
  */
 export default function inputFieldHasUncollapsedSelection( element ) {
-	if ( ! isTextField( element ) && ! isNumberInput( element ) ) {
+	if ( ! isHTMLInputElement( element ) && ! isTextField( element ) ) {
 		return false;
 	}
-	try {
-		const {
-			selectionStart,
-			selectionEnd,
-		} = /** @type {HTMLInputElement | HTMLTextAreaElement} */ ( element );
 
-		return selectionStart !== null && selectionStart !== selectionEnd;
+	// Safari throws a type error when trying to get `selectionStart` and
+	// `selectionEnd` on non-text <input> elements, so a try/catch construct is
+	// necessary.
+	try {
+		const { selectionStart, selectionEnd } =
+			/** @type {HTMLInputElement | HTMLTextAreaElement} */ ( element );
+		return (
+			// `null` means the input type doesn't implement selection, thus we
+			// cannot determine whether the selection is collapsed, so we
+			// default to true.
+			selectionStart === null ||
+			// when not null, compare the two points
+			selectionStart !== selectionEnd
+		);
 	} catch ( error ) {
-		// Safari throws an exception when trying to get `selectionStart`
-		// on non-text <input> elements (which, understandably, don't
-		// have the text selection API). We catch this via a try/catch
-		// block, as opposed to a more explicit check of the element's
-		// input types, because of Safari's non-standard behavior. This
-		// also means we don't have to worry about the list of input
-		// types that support `selectionStart` changing as the HTML spec
-		// evolves over time.
-		return false;
+		// This is Safari's way of saying that the input type doesn't implement
+		// selection, so we default to true.
+		return true;
 	}
 }

package/src/dom/is-edge.js

@@ -36,7 +36,7 @@ export default function isEdge( container, isReverse, onlyVertical = false ) {
 		return container.value.length === container.selectionStart;
 	}
 
-	if ( ! (/** @type {HTMLElement} */ ( container ).isContentEditable) ) {
+	if ( ! ( /** @type {HTMLElement} */ ( container ).isContentEditable ) ) {
 		return true;
 	}
 

package/src/dom/is-empty.js

@@ -19,9 +19,9 @@ export default function isEmpty( element ) {
 				return true;
 			}
 
-			return /** @type {Element[]} */ ( Array.from(
-				element.childNodes
-			) ).every( isEmpty );
+			return /** @type {Element[]} */ (
+				Array.from( element.childNodes )
+			).every( isEmpty );
 		default:
 			return true;
 	}

package/src/dom/is-html-input-element.js

@@ -5,5 +5,5 @@
  */
 export default function isHTMLInputElement( node ) {
 	/* eslint-enable jsdoc/valid-types */
-	return !! node && node.nodeName === 'INPUT';
+	return node?.nodeName === 'INPUT';
 }

package/src/dom/is-number-input.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * Internal dependencies
  */
@@ -5,18 +10,21 @@ import isHTMLInputElement from './is-html-input-element';
 
 /* eslint-disable jsdoc/valid-types */
 /**
- * Check whether the given element is an input field of type number
- * and has a valueAsNumber
+ * Check whether the given element is an input field of type number.
  *
  * @param {Node} node The HTML node.
  *
- * @return {node is HTMLInputElement} True if the node is input and holds a number.
+ * @return {node is HTMLInputElement} True if the node is number input.
  */
 export default function isNumberInput( node ) {
+	deprecated( 'wp.dom.isNumberInput', {
+		since: '6.1',
+		version: '6.5',
+	} );
 	/* eslint-enable jsdoc/valid-types */
 	return (
 		isHTMLInputElement( node ) &&
 		node.type === 'number' &&
-		!! node.valueAsNumber
+		! isNaN( node.valueAsNumber )
 	);
 }

package/src/dom/is-text-field.js

@@ -26,6 +26,8 @@ export default function isTextField( node ) {
 		'reset',
 		'submit',
 		'number',
+		'email',
+		'time',
 	];
 	return (
 		( isHTMLInputElement( node ) &&

package/src/test/dom.js

@@ -5,7 +5,6 @@ import {
 	isHorizontalEdge,
 	placeCaretAtHorizontalEdge,
 	isTextField,
-	isNumberInput,
 	removeInvalidHTML,
 	isEmpty,
 } from '../dom';
@@ -125,6 +124,8 @@ describe( 'DOM', () => {
 			'range',
 			'reset',
 			'submit',
+			'email',
+			'time',
 		];
 
 		/**
@@ -132,13 +133,7 @@ describe( 'DOM', () => {
 		 *
 		 * @type {string[]}
 		 */
-		const TEXT_INPUT_TYPES = [
-			'text',
-			'password',
-			'search',
-			'url',
-			'email',
-		];
+		const TEXT_INPUT_TYPES = [ 'text', 'password', 'search', 'url' ];
 
 		it( 'should return false for non-text input elements', () => {
 			NON_TEXT_INPUT_TYPES.forEach( ( type ) => {
@@ -164,21 +159,6 @@ describe( 'DOM', () => {
 			);
 		} );
 
-		it( 'should return false for empty input element of type number', () => {
-			const input = document.createElement( 'input' );
-			input.type = 'number';
-
-			expect( isNumberInput( input ) ).toBe( false );
-		} );
-
-		it( 'should return true for an input element of type number', () => {
-			const input = document.createElement( 'input' );
-			input.type = 'number';
-			input.valueAsNumber = 23;
-
-			expect( isNumberInput( input ) ).toBe( true );
-		} );
-
 		it( 'should return true for a contenteditable element', () => {
 			const div = document.createElement( 'div' );
 

package/tsconfig.json

@@ -5,7 +5,5 @@
 		"declarationDir": "build-types",
 		"types": [ "gutenberg-env" ]
 	},
-	"include": [
-		"src/**/*"
-	]
+	"include": [ "src/**/*" ]
 }