@wordpress/dom 3.2.2 → 3.2.6

package/src/dom/place-caret-at-edge.js

@@ -0,0 +1,95 @@
+/**
+ * Internal dependencies
+ */
+import hiddenCaretRangeFromPoint from './hidden-caret-range-from-point';
+import { assertIsDefined } from '../utils/assert-is-defined';
+import isInputOrTextArea from './is-input-or-text-area';
+import isRTL from './is-rtl';
+
+/**
+ * Gets the range to place.
+ *
+ * @param {HTMLElement}      container Focusable element.
+ * @param {boolean}          isReverse True for end, false for start.
+ * @param {number|undefined} x         X coordinate to vertically position.
+ *
+ * @return {Range|null} The range to place.
+ */
+function getRange( container, isReverse, x ) {
+	const { ownerDocument } = container;
+	// In the case of RTL scripts, the horizontal edge is at the opposite side.
+	const isReverseDir = isRTL( container ) ? ! isReverse : isReverse;
+	const containerRect = container.getBoundingClientRect();
+	// When placing at the end (isReverse), find the closest range to the bottom
+	// right corner. When placing at the start, to the top left corner.
+	if ( x === undefined ) {
+		x = isReverse ? containerRect.right - 1 : containerRect.left + 1;
+	}
+	const y = isReverseDir ? containerRect.bottom - 1 : containerRect.top + 1;
+	return hiddenCaretRangeFromPoint( ownerDocument, x, y, container );
+}
+
+/**
+ * Places the caret at start or end of a given element.
+ *
+ * @param {HTMLElement}      container Focusable element.
+ * @param {boolean}          isReverse True for end, false for start.
+ * @param {number|undefined} x         X coordinate to vertically position.
+ */
+export default function placeCaretAtEdge( container, isReverse, x ) {
+	if ( ! container ) {
+		return;
+	}
+
+	container.focus();
+
+	if ( isInputOrTextArea( container ) ) {
+		// The element may not support selection setting.
+		if ( typeof container.selectionStart !== 'number' ) {
+			return;
+		}
+
+		if ( isReverse ) {
+			container.selectionStart = container.value.length;
+			container.selectionEnd = container.value.length;
+		} else {
+			container.selectionStart = 0;
+			container.selectionEnd = 0;
+		}
+
+		return;
+	}
+
+	if ( ! container.isContentEditable ) {
+		return;
+	}
+
+	let range = getRange( container, isReverse, x );
+
+	// If no range range can be created or it is outside the container, the
+	// element may be out of view.
+	if (
+		! range ||
+		! range.startContainer ||
+		! container.contains( range.startContainer )
+	) {
+		container.scrollIntoView( isReverse );
+		range = range = getRange( container, isReverse, x );
+
+		if (
+			! range ||
+			! range.startContainer ||
+			! container.contains( range.startContainer )
+		) {
+			return;
+		}
+	}
+
+	const { ownerDocument } = container;
+	const { defaultView } = ownerDocument;
+	assertIsDefined( defaultView, 'defaultView' );
+	const selection = defaultView.getSelection();
+	assertIsDefined( selection, 'selection' );
+	selection.removeAllRanges();
+	selection.addRange( range );
+}

package/src/dom/place-caret-at-horizontal-edge.js

@@ -1,34 +1,7 @@
 /**
  * Internal dependencies
  */
-import { assertIsDefined } from '../utils/assert-is-defined';
-
-/**
- * Internal dependencies
- */
-import hiddenCaretRangeFromPoint from './hidden-caret-range-from-point';
-import isInputOrTextArea from './is-input-or-text-area';
-import isRTL from './is-rtl';
-
-/**
- * Gets the range to place.
- *
- * @param {HTMLElement} container Focusable element.
- * @param {boolean}     isReverse True for end, false for start.
- *
- * @return {Range|null} The range to place.
- */
-function getRange( container, isReverse ) {
-	const { ownerDocument } = container;
-	// In the case of RTL scripts, the horizontal edge is at the opposite side.
-	const isReverseDir = isRTL( container ) ? ! isReverse : isReverse;
-	const containerRect = container.getBoundingClientRect();
-	// When placing at the end (isReverse), find the closest range to the bottom
-	// right corner. When placing at the start, to the top left corner.
-	const x = isReverse ? containerRect.right - 1 : containerRect.left + 1;
-	const y = isReverseDir ? containerRect.bottom - 1 : containerRect.top + 1;
-	return hiddenCaretRangeFromPoint( ownerDocument, x, y, container );
-}
+import placeCaretAtEdge from './place-caret-at-edge';
 
 /**
  * Places the caret at start or end of a given element.
@@ -37,59 +10,5 @@ function getRange( container, isReverse ) {
  * @param {boolean}     isReverse True for end, false for start.
  */
 export default function placeCaretAtHorizontalEdge( container, isReverse ) {
-	if ( ! container ) {
-		return;
-	}
-
-	container.focus();
-
-	if ( isInputOrTextArea( container ) ) {
-		// The element may not support selection setting.
-		if ( typeof container.selectionStart !== 'number' ) {
-			return;
-		}
-
-		if ( isReverse ) {
-			container.selectionStart = container.value.length;
-			container.selectionEnd = container.value.length;
-		} else {
-			container.selectionStart = 0;
-			container.selectionEnd = 0;
-		}
-
-		return;
-	}
-
-	if ( ! container.isContentEditable ) {
-		return;
-	}
-
-	let range = getRange( container, isReverse );
-
-	// If no range range can be created or it is outside the container, the
-	// element may be out of view.
-	if (
-		! range ||
-		! range.startContainer ||
-		! container.contains( range.startContainer )
-	) {
-		container.scrollIntoView( isReverse );
-		range = getRange( container, isReverse );
-
-		if (
-			! range ||
-			! range.startContainer ||
-			! container.contains( range.startContainer )
-		) {
-			return;
-		}
-	}
-
-	const { ownerDocument } = container;
-	const { defaultView } = ownerDocument;
-	assertIsDefined( defaultView, 'defaultView' );
-	const selection = defaultView.getSelection();
-	assertIsDefined( selection, 'selection' );
-	selection.removeAllRanges();
-	selection.addRange( range );
+	return placeCaretAtEdge( container, isReverse, undefined );
 }

package/src/dom/place-caret-at-vertical-edge.js

@@ -1,73 +1,15 @@
 /**
  * Internal dependencies
  */
-import placeCaretAtHorizontalEdge from './place-caret-at-horizontal-edge';
-import hiddenCaretRangeFromPoint from './hidden-caret-range-from-point';
-import { assertIsDefined } from '../utils/assert-is-defined';
+import placeCaretAtEdge from './place-caret-at-edge';
 
 /**
  * Places the caret at the top or bottom of a given element.
  *
- * @param {HTMLElement} 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.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse True for bottom, false for top.
+ * @param {DOMRect}     [rect]    The rectangle to position the caret with.
  */
-export default function placeCaretAtVerticalEdge(
-	container,
-	isReverse,
-	rect,
-	mayUseScroll = true
-) {
-	if ( ! container ) {
-		return;
-	}
-
-	if ( ! rect || ! container.isContentEditable ) {
-		placeCaretAtHorizontalEdge( container, isReverse );
-		return;
-	}
-
-	container.focus();
-
-	// 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;
-	const y = isReverse
-		? editableRect.bottom - buffer
-		: editableRect.top + buffer;
-
-	const { ownerDocument } = container;
-	const { defaultView } = ownerDocument;
-	const range = hiddenCaretRangeFromPoint( ownerDocument, 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;
-	}
-
-	assertIsDefined( defaultView, 'defaultView' );
-	const selection = defaultView.getSelection();
-	assertIsDefined( selection, 'selection' );
-	selection.removeAllRanges();
-	selection.addRange( range );
+export default function placeCaretAtVerticalEdge( container, isReverse, rect ) {
+	return placeCaretAtEdge( container, isReverse, rect?.left );
 }

package/src/dom/strip-html.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import safeHTML from './safe-html';
+
 /**
  * Removes any HTML tags from the provided string.
  *
@@ -6,9 +11,11 @@
  * @return {string} The text content with any html removed.
  */
 export default function stripHTML( html ) {
-	const document = new window.DOMParser().parseFromString(
-		html,
-		'text/html'
-	);
-	return document.body.textContent || '';
+	// Remove any script tags or on* attributes otherwise their *contents* will be left
+	// in place following removal of HTML tags.
+	html = safeHTML( html );
+
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = html;
+	return doc.body.textContent || '';
 }

package/src/dom/test/strip-html.js

@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import stripHTML from '../strip-html';
+
+describe( 'stripHTML', () => {
+	it( 'should strip valid HTML, scripts and on attributes', () => {
+		const input = `<strong onClick="alert('and on attributes')">Here is some text</strong> that contains <em>HTML markup</em><script>alert("and scripts")</script>.`;
+		const output = 'Here is some text that contains HTML markup.';
+		expect( stripHTML( input ) ).toBe( output );
+	} );
+
+	it( 'should strip invalid HTML, scripts and on attributes', () => {
+		const input = `<strong onClick="alert('and on attributes')">Here is some text</em> <p></div>that contains HTML markup</p><script>alert("and scripts")</script>.`;
+		const output = 'Here is some text that contains HTML markup.';
+		expect( stripHTML( input ) ).toBe( output );
+	} );
+
+	describe( 'whitespace preservation', () => {
+		it( 'should preserve leading spaces', () => {
+			const input =
+				'       <strong>Here is some text</strong> with <em>leading spaces</em>.';
+			const output = '       Here is some text with leading spaces.';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve leading spaces with HTML', () => {
+			const input =
+				'<strong>      Here is some text</strong> with <em>leading spaces</em>.';
+			const output = '      Here is some text with leading spaces.';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve trailing spaces with HTML', () => {
+			const input =
+				'<strong>Here is some text</strong> with <em>trailing spaces</em>.          ';
+			const output = 'Here is some text with trailing spaces.          ';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve consecutive spaces within string', () => {
+			const input =
+				'<strong>Here is some          text</strong> with                  <em>a lot of spaces inside</em>.';
+			const output =
+				'Here is some          text with                  a lot of spaces inside.';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve new lines in multi-line HTML string', () => {
+			const input = `<div>
+        Here is some
+        <em>text</em>
+        with new lines
+        </div>`;
+
+			const output = `
+        Here is some
+        text
+        with new lines
+        `;
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+	} );
+} );

package/src/focusable.js

@@ -17,19 +17,32 @@
  *  - https://w3c.github.io/html/editing.html#data-model
  */
 
-const SELECTOR = [
-	'[tabindex]',
-	'a[href]',
-	'button:not([disabled])',
-	'input:not([type="hidden"]):not([disabled])',
-	'select:not([disabled])',
-	'textarea:not([disabled])',
-	'iframe',
-	'object',
-	'embed',
-	'area[href]',
-	'[contenteditable]:not([contenteditable=false])',
-].join( ',' );
+/**
+ * Returns a CSS selector used to query for focusable elements.
+ *
+ * @param {boolean} sequential If set, only query elements that are sequentially
+ *                             focusable. Non-interactive elements with a
+ *                             negative `tabindex` are focusable but not
+ *                             sequentially focusable.
+ *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
+ *
+ * @return {string} CSS selector.
+ */
+function buildSelector( sequential ) {
+	return [
+		sequential ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]',
+		'a[href]',
+		'button:not([disabled])',
+		'input:not([type="hidden"]):not([disabled])',
+		'select:not([disabled])',
+		'textarea:not([disabled])',
+		'iframe:not([tabindex^="-"])',
+		'object',
+		'embed',
+		'area[href]',
+		'[contenteditable]:not([contenteditable=false])',
+	].join( ',' );
+}
 
 /**
  * Returns true if the specified element is visible (i.e. neither display: none
@@ -47,21 +60,6 @@ function isVisible( element ) {
 	);
 }
 
-/**
- * Returns true if the specified element should be skipped from focusable elements.
- * For now it rather specific for `iframes` and  if tabindex attribute is set to -1.
- *
- * @param {Element} element DOM element to test.
- *
- * @return {boolean} Whether element should be skipped from focusable elements.
- */
-function skipFocus( element ) {
-	return (
-		element.nodeName.toLowerCase() === 'iframe' &&
-		element.getAttribute( 'tabindex' ) === '-1'
-	);
-}
-
 /**
  * Returns true if the specified area element is a valid focusable element, or
  * false otherwise. Area is only focusable if within a map where a named map
@@ -88,18 +86,25 @@ function isValidFocusableArea( element ) {
 /**
  * Returns all focusable elements within a given context.
  *
- * @param {Element} context Element in which to search.
+ * @param {Element} context              Element in which to search.
+ * @param {Object}  [options]
+ * @param {boolean} [options.sequential] If set, only return elements that are
+ *                                       sequentially focusable.
+ *                                       Non-interactive elements with a
+ *                                       negative `tabindex` are focusable but
+ *                                       not sequentially focusable.
+ *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
  *
  * @return {Element[]} Focusable elements.
  */
-export function find( context ) {
+export function find( context, { sequential = false } = {} ) {
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {NodeListOf<HTMLElement>} */
 	/* eslint-enable jsdoc/no-undefined-types */
-	const elements = context.querySelectorAll( SELECTOR );
+	const elements = context.querySelectorAll( buildSelector( sequential ) );
 
 	return Array.from( elements ).filter( ( element ) => {
-		if ( ! isVisible( element ) || skipFocus( element ) ) {
+		if ( ! isVisible( element ) ) {
 			return false;
 		}
 

package/src/phrasing-content.js

@@ -32,7 +32,7 @@ const textContentSchema = {
 	s: {},
 	del: {},
 	ins: {},
-	a: { attributes: [ 'href', 'target', 'rel' ] },
+	a: { attributes: [ 'href', 'target', 'rel', 'id' ] },
 	code: {},
 	abbr: { attributes: [ 'title' ] },
 	sub: {},

package/src/tabbable.js

@@ -181,10 +181,8 @@ export function findNext( element ) {
 	const focusables = findFocusable( element.ownerDocument.body );
 	const index = focusables.indexOf( element );
 
-	// Remove all focusables before and inside `element`.
-	const remaining = focusables
-		.slice( index + 1 )
-		.filter( ( node ) => ! element.contains( node ) );
+	// Remove all focusables before and including `element`.
+	const remaining = focusables.slice( index + 1 );
 
 	return first( filterTabbable( remaining ) );
 }

package/src/test/dom.js

@@ -5,7 +5,6 @@ import {
 	isHorizontalEdge,
 	placeCaretAtHorizontalEdge,
 	isTextField,
-	__unstableStripHTML as stripHTML,
 	isNumberInput,
 	removeInvalidHTML,
 	isEmpty,
@@ -84,6 +83,14 @@ describe( 'DOM', () => {
 			expect( isHorizontalEdge( div, true ) ).toBe( true );
 			expect( isHorizontalEdge( div, false ) ).toBe( true );
 		} );
+
+		it( 'should return true for input types that do not have selection ranges', () => {
+			const input = document.createElement( 'input' );
+			input.setAttribute( 'type', 'checkbox' );
+			parent.appendChild( input );
+			expect( isHorizontalEdge( input, true ) ).toBe( true );
+			expect( isHorizontalEdge( input, false ) ).toBe( true );
+		} );
 	} );
 
 	describe( 'placeCaretAtHorizontalEdge', () => {
@@ -186,20 +193,6 @@ describe( 'DOM', () => {
 			);
 		} );
 	} );
-
-	describe( 'stripHTML', () => {
-		it( 'removes any HTML from a text string', () => {
-			expect( stripHTML( 'This is <em>emphasized</em>' ) ).toBe(
-				'This is emphasized'
-			);
-		} );
-
-		it( 'removes script tags, but does not execute them', () => {
-			const html = 'This will not <script>throw "Error"</script>';
-			expect( stripHTML( html ) ).toBe( 'This will not throw "Error"' );
-			expect( () => stripHTML( html ) ).not.toThrow();
-		} );
-	} );
 } );
 
 describe( 'removeInvalidHTML', () => {