Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@wordpress/dom

Package Overview
Dependencies
Maintainers
21
Versions
193
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wordpress/dom - npm Package Compare versions

Comparing version 3.2.3 to 3.2.4

build-module/dom/place-caret-at-edge.js
build-module/dom/place-caret-at-edge.js.map
build-types/dom/place-caret-at-edge.d.ts
build-types/dom/place-caret-at-edge.d.ts.map
build/dom/place-caret-at-edge.js
build/dom/place-caret-at-edge.js.map
src/dom/place-caret-at-edge.js

4

build-module/dom/caret-range-from-point.js

@@ -8,4 +8,4 @@ /**

* @param {DocumentMaybeWithCaretPositionFromPoint} 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 {number} x Horizontal position within the current viewport.
* @param {number} y Vertical position within the current viewport.
*

@@ -12,0 +12,0 @@ * @return {Range | null} The best range for the given point.

2

build-module/dom/is-edge.js

@@ -24,3 +24,3 @@ /**

export default function isEdge(container, isReverse, onlyVertical = false) {
if (isInputOrTextArea(container)) {
if (isInputOrTextArea(container) && typeof container.selectionStart === 'number') {
if (container.selectionStart !== container.selectionEnd) {

@@ -27,0 +27,0 @@ return false;

83

build-module/dom/place-caret-at-horizontal-edge.js
/**
* Internal dependencies
*/
import { assertIsDefined } from '../utils/assert-is-defined';
import placeCaretAtEdge from './place-caret-at-edge';
/**
* 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);
}
/**
* Places the caret at start or end of a given element.

@@ -41,55 +12,5 @@ *

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);
}
//# sourceMappingURL=place-caret-at-horizontal-edge.js.map

60

build-module/dom/place-caret-at-vertical-edge.js
/**
* 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 === null || rect === void 0 ? void 0 : rect.left);
}
//# sourceMappingURL=place-caret-at-vertical-edge.js.map

4

build-types/dom/caret-range-from-point.d.ts

@@ -8,4 +8,4 @@ /**

* @param {DocumentMaybeWithCaretPositionFromPoint} 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 {number} x Horizontal position within the current viewport.
* @param {number} y Vertical position within the current viewport.
*

@@ -12,0 +12,0 @@ * @return {Range | null} The best range for the given point.

9

build-types/dom/place-caret-at-vertical-edge.d.ts
/**
* 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: HTMLElement, isReverse: boolean, rect?: DOMRect | undefined, mayUseScroll?: boolean | undefined): void;
export default function placeCaretAtVerticalEdge(container: HTMLElement, isReverse: boolean, rect?: DOMRect | undefined): void;
//# sourceMappingURL=place-caret-at-vertical-edge.d.ts.map

4

build/dom/caret-range-from-point.js

@@ -15,4 +15,4 @@ "use strict";

* @param {DocumentMaybeWithCaretPositionFromPoint} 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 {number} x Horizontal position within the current viewport.
* @param {number} y Vertical position within the current viewport.
*

@@ -19,0 +19,0 @@ * @return {Range | null} The best range for the given point.

2

build/dom/is-edge.js

@@ -40,3 +40,3 @@ "use strict";

function isEdge(container, isReverse, onlyVertical = false) {
if ((0, _isInputOrTextArea.default)(container)) {
if ((0, _isInputOrTextArea.default)(container) && typeof container.selectionStart === 'number') {
if (container.selectionStart !== container.selectionEnd) {

@@ -43,0 +43,0 @@ return false;

86

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

@@ -10,10 +10,4 @@ "use strict";

var _assertIsDefined = require("../utils/assert-is-defined");
var _placeCaretAtEdge = _interopRequireDefault(require("./place-caret-at-edge"));
var _hiddenCaretRangeFromPoint = _interopRequireDefault(require("./hidden-caret-range-from-point"));
var _isInputOrTextArea = _interopRequireDefault(require("./is-input-or-text-area"));
var _isRtl = _interopRequireDefault(require("./is-rtl"));
/**

@@ -24,27 +18,2 @@ * Internal dependencies

/**
* Internal dependencies
*/
/**
* 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.

@@ -55,56 +24,5 @@ *

*/
function placeCaretAtHorizontalEdge(container, isReverse) {
if (!container) {
return;
}
container.focus();
if ((0, _isInputOrTextArea.default)(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;
(0, _assertIsDefined.assertIsDefined)(defaultView, 'defaultView');
const selection = defaultView.getSelection();
(0, _assertIsDefined.assertIsDefined)(selection, 'selection');
selection.removeAllRanges();
selection.addRange(range);
return (0, _placeCaretAtEdge.default)(container, isReverse, undefined);
}
//# sourceMappingURL=place-caret-at-horizontal-edge.js.map

62

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

@@ -10,8 +10,4 @@ "use strict";

var _placeCaretAtHorizontalEdge = _interopRequireDefault(require("./place-caret-at-horizontal-edge"));
var _placeCaretAtEdge = _interopRequireDefault(require("./place-caret-at-edge"));
var _hiddenCaretRangeFromPoint = _interopRequireDefault(require("./hidden-caret-range-from-point"));
var _assertIsDefined = require("../utils/assert-is-defined");
/**

@@ -24,55 +20,9 @@ * Internal dependencies

*
* @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.
*/
function placeCaretAtVerticalEdge(container, isReverse, rect, mayUseScroll = true) {
if (!container) {
return;
}
if (!rect || !container.isContentEditable) {
(0, _placeCaretAtHorizontalEdge.default)(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 = (0, _hiddenCaretRangeFromPoint.default)(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;
}
(0, _placeCaretAtHorizontalEdge.default)(container, isReverse);
return;
}
(0, _assertIsDefined.assertIsDefined)(defaultView, 'defaultView');
const selection = defaultView.getSelection();
(0, _assertIsDefined.assertIsDefined)(selection, 'selection');
selection.removeAllRanges();
selection.addRange(range);
function placeCaretAtVerticalEdge(container, isReverse, rect) {
return (0, _placeCaretAtEdge.default)(container, isReverse, rect === null || rect === void 0 ? void 0 : rect.left);
}
//# sourceMappingURL=place-caret-at-vertical-edge.js.map

4

package.json
{
"name": "@wordpress/dom",
"version": "3.2.3",
"version": "3.2.4",
"description": "DOM utilities module for WordPress.",

@@ -37,3 +37,3 @@ "author": "The WordPress Contributors",

},
"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
}

1

README.md

@@ -297,3 +297,2 @@ # DOM

- _rect_ `[DOMRect]`: The rectangle to position the caret with.
- _mayUseScroll_ `[boolean]`: True to allow scrolling, false to disallow.

@@ -300,0 +299,0 @@ ### remove

4

src/dom/caret-range-from-point.js

@@ -8,4 +8,4 @@ /**

* @param {DocumentMaybeWithCaretPositionFromPoint} 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 {number} x Horizontal position within the current viewport.
* @param {number} y Vertical position within the current viewport.
*

@@ -12,0 +12,0 @@ * @return {Range | null} The best range for the given point.

5

src/dom/is-edge.js

@@ -24,3 +24,6 @@ /**

export default function isEdge( container, isReverse, onlyVertical = false ) {
if ( isInputOrTextArea( container ) ) {
if (
isInputOrTextArea( container ) &&
typeof container.selectionStart === 'number'
) {
if ( container.selectionStart !== container.selectionEnd ) {

@@ -27,0 +30,0 @@ return false;

85

src/dom/place-caret-at-horizontal-edge.js
/**
* Internal dependencies
*/
import { assertIsDefined } from '../utils/assert-is-defined';
import placeCaretAtEdge from './place-caret-at-edge';
/**
* 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 );
}
/**
* Places the caret at start or end of a given element.

@@ -40,57 +13,3 @@ *

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 );
}

70

src/dom/place-caret-at-vertical-edge.js
/**
* 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';

@@ -11,64 +9,8 @@ /**

*
* @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 );
}

8

src/test/dom.js

@@ -87,2 +87,10 @@ /**

} );
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 );
} );
} );

@@ -89,0 +97,0 @@ 

build-module/dom/caret-range-from-point.js.map

Sorry, the diff of this file is not supported yet

build-module/dom/is-edge.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

build-types/dom/is-edge.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

build/dom/caret-range-from-point.js.map

Sorry, the diff of this file is not supported yet

build/dom/is-edge.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc