@wordpress/dom - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

build-module/dom/is-text-field.js

@@ -14,3 +14,3 @@ /**
  * @param {Node} node The HTML element.
- * @return {element is HTMLElement} True if the element is an text field, false if not.
+ * @return {node is HTMLElement} True if the element is an text field, false if not.
  */
@@ -17,0 +17,0 @@

build-module/dom/place-caret-at-horizontal-edge.js

@@ -13,10 +13,32 @@ /**
 /**
+ * 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);
+}
+/**
  * 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 {boolean} [mayUseScroll=false] Whether to allow scrolling.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse True for end, false for start.
  */
 
-export default function placeCaretAtHorizontalEdge(container, isReverse, mayUseScroll = false) {
+
+export default function placeCaretAtHorizontalEdge(container, isReverse) {
   if (!container) {
@@ -49,28 +71,18 @@ return;
 
-  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;
-  const range = hiddenCaretRangeFromPoint(ownerDocument, x, y, container); // If no range range can be created or it is outside the container, the
+  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)) {
-    if (!mayUseScroll) {
+    container.scrollIntoView(isReverse);
+    range = getRange(container, isReverse);
+
+    if (!range || !range.startContainer || !container.contains(range.startContainer)) {
       return;
-    } // Only try to scroll into view once to avoid an infinite loop.
-
-
-    mayUseScroll = false;
-    container.scrollIntoView(isReverse);
-    placeCaretAtHorizontalEdge(container, isReverse, mayUseScroll);
-    return;
+    }
   }
 
   const {
+    ownerDocument
+  } = container;
+  const {
     defaultView
@@ -77,0 +89,0 @@ } = ownerDocument;

build-module/dom/place-caret-at-vertical-edge.js

@@ -24,3 +24,5 @@ /**
     return;
-  } // Offset by a buffer half the height of the caret rect. This is needed
+  }
+
+  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
@@ -32,3 +34,2 @@ // offset is too close to the edge. It's unclear how to precisely calculate
 
-
   const buffer = rect.height / 2;
@@ -64,8 +65,3 @@ const editableRect = container.getBoundingClientRect();
   selection.addRange(range);
-  container.focus(); // Editable was already focussed, it goes back to old range...
-  // This fixes it.
-
-  selection.removeAllRanges();
-  selection.addRange(range);
 }
 //# sourceMappingURL=place-caret-at-vertical-edge.js.map

build-types/dom/is-text-field.d.ts

@@ -8,5 +8,5 @@ /**
  * @param {Node} node The HTML element.
- * @return {element is HTMLElement} True if the element is an text field, false if not.
+ * @return {node is HTMLElement} True if the element is an text field, false if not.
  */
-export default function isTextField(node: Node): element is HTMLElement;
+export default function isTextField(node: Node): node is HTMLElement;
 //# sourceMappingURL=is-text-field.d.ts.map

build-types/dom/place-caret-at-horizontal-edge.d.ts

 /**
  * 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 {boolean} [mayUseScroll=false] Whether to allow scrolling.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse True for end, false for start.
  */
-export default function placeCaretAtHorizontalEdge(container: HTMLElement, isReverse: boolean, mayUseScroll?: boolean | undefined): void;
+export default function placeCaretAtHorizontalEdge(container: HTMLElement, isReverse: boolean): void;
 //# sourceMappingURL=place-caret-at-horizontal-edge.d.ts.map

build/dom/is-text-field.js

@@ -25,3 +25,3 @@ "use strict";
  * @param {Node} node The HTML element.
- * @return {element is HTMLElement} True if the element is an text field, false if not.
+ * @return {node is HTMLElement} True if the element is an text field, false if not.
  */
@@ -28,0 +28,0 @@ function isTextField(node) {

build/dom/place-caret-at-horizontal-edge.js

@@ -27,9 +27,31 @@ "use strict";
 /**
+ * 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 = (0, _isRtl.default)(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 (0, _hiddenCaretRangeFromPoint.default)(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 {boolean} [mayUseScroll=false] Whether to allow scrolling.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse True for end, false for start.
  */
-function placeCaretAtHorizontalEdge(container, isReverse, mayUseScroll = false) {
+
+
+function placeCaretAtHorizontalEdge(container, isReverse) {
   if (!container) {
@@ -62,28 +84,18 @@ return;
 
-  const {
-    ownerDocument
-  } = container; // In the case of RTL scripts, the horizontal edge is at the opposite side.
-
-  const isReverseDir = (0, _isRtl.default)(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;
-  const range = (0, _hiddenCaretRangeFromPoint.default)(ownerDocument, x, y, container); // If no range range can be created or it is outside the container, the
+  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)) {
-    if (!mayUseScroll) {
+    container.scrollIntoView(isReverse);
+    range = getRange(container, isReverse);
+
+    if (!range || !range.startContainer || !container.contains(range.startContainer)) {
       return;
-    } // Only try to scroll into view once to avoid an infinite loop.
-
-
-    mayUseScroll = false;
-    container.scrollIntoView(isReverse);
-    placeCaretAtHorizontalEdge(container, isReverse, mayUseScroll);
-    return;
+    }
   }
 
   const {
+    ownerDocument
+  } = container;
+  const {
     defaultView
@@ -90,0 +102,0 @@ } = ownerDocument;

build/dom/place-caret-at-vertical-edge.js

@@ -36,3 +36,5 @@ "use strict";
     return;
-  } // Offset by a buffer half the height of the caret rect. This is needed
+  }
+
+  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
@@ -44,3 +46,2 @@ // offset is too close to the edge. It's unclear how to precisely calculate
 
-
   const buffer = rect.height / 2;
@@ -76,8 +77,3 @@ const editableRect = container.getBoundingClientRect();
   selection.addRange(range);
-  container.focus(); // Editable was already focussed, it goes back to old range...
-  // This fixes it.
-
-  selection.removeAllRanges();
-  selection.addRange(range);
 }
 //# sourceMappingURL=place-caret-at-vertical-edge.js.map

CHANGELOG.md

@@ -5,2 +5,4 @@ <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
+## 3.1.0 (2021-05-20)
+
 ## 3.0.0 (2021-05-14)
@@ -7,0 +9,0 @@

package.json

 {
 	"name": "@wordpress/dom",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "DOM utilities module for WordPress.",
@@ -37,3 +37,3 @@ "author": "The WordPress Contributors",
 	},
-	"gitHead": "0c80fbada8b86cd8e4b4892460caa3a5d0e5f583"
+	"gitHead": "24ad588cb6ea6fc2a654b5e1cc0764726771698a"
 }

README.md

@@ -264,3 +264,3 @@ # DOM
 
--   `element is HTMLElement`: True if the element is an text field, false if not.
+-   `node is HTMLElement`: True if the element is an text field, false if not.
 
@@ -288,3 +288,2 @@ <a name="isVerticalEdge" href="#isVerticalEdge">#</a> **isVerticalEdge**
 -   _isReverse_ `boolean`: True for end, false for start.
--   _mayUseScroll_ `[boolean]`: Whether to allow scrolling.
 
@@ -291,0 +290,0 @@ <a name="placeCaretAtVerticalEdge" href="#placeCaretAtVerticalEdge">#</a> **placeCaretAtVerticalEdge**

src/dom/is-text-field.js

@@ -14,3 +14,3 @@ /**
  * @param {Node} node The HTML element.
- * @return {element is HTMLElement} True if the element is an text field, false if not.
+ * @return {node is HTMLElement} True if the element is an text field, false if not.
  */
@@ -17,0 +17,0 @@ export default function isTextField( node ) {

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

@@ -14,13 +14,28 @@ /**
 /**
+ * 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 );
+}
+
+/**
  * 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 {boolean} [mayUseScroll=false] Whether to allow scrolling.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse True for end, false for start.
  */
-export default function placeCaretAtHorizontalEdge(
-	container,
-	isReverse,
-	mayUseScroll = false
-) {
+export default function placeCaretAtHorizontalEdge( container, isReverse ) {
 	if ( ! container ) {
@@ -53,11 +68,3 @@ return;
 
-	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;
-	const range = hiddenCaretRangeFromPoint( ownerDocument, x, y, container );
+	let range = getRange( container, isReverse );
 
@@ -71,13 +78,15 @@ // If no range range can be created or it is outside the container, the
 	) {
-		if ( ! mayUseScroll ) {
+		container.scrollIntoView( isReverse );
+		range = getRange( container, isReverse );
+
+		if (
+			! range ||
+			! range.startContainer ||
+			! container.contains( range.startContainer )
+		) {
 			return;
 		}
-
-		// Only try to scroll into view once to avoid an infinite loop.
-		mayUseScroll = false;
-		container.scrollIntoView( isReverse );
-		placeCaretAtHorizontalEdge( container, isReverse, mayUseScroll );
-		return;
 	}
 
+	const { ownerDocument } = container;
 	const { defaultView } = ownerDocument;
@@ -84,0 +93,0 @@ assertIsDefined( defaultView, 'defaultView' );

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

@@ -31,2 +31,4 @@ /**
 
+	container.focus();
+
 	// Offset by a buffer half the height of the caret rect. This is needed
@@ -72,7 +74,2 @@ // because caretRangeFromPoint may default to the end of the selection if
 	selection.addRange( range );
-	container.focus();
-	// Editable was already focussed, it goes back to old range...
-	// This fixes it.
-	selection.removeAllRanges();
-	selection.addRange( range );
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

545665

increased by0.05%

Lines of code

6342

increased by0.3%

Worsened metrics

Number of lines in readme file

376

decreased by-0.27%

No dependency changes