How to use getActiveElementDeep method in Playwright Internal

1import { TEXT_NODE, ELEMENT_NODE } from '../../../HTMLNodeType';
2
3import { getActiveElement } from './getActiveElement';
4import { getOffsets, setOffsets } from './ReactDOMSelection';
5
6const isSameOriginFrame = (iframe) => {
7  try {
8    return typeof iframe.contentWindow.location.href === 'string';
9  } catch (err) {
10    return false;
11  }
12};
13
14const getActiveElementDeep = () => {
15  let win = window;
16  let element = getActiveElement();
17  while (element instanceof win.HTMLIFrameElement) {
18    if (isSameOriginFrame(element)) {
19      win = element.contentWindow;
20    } else {
21      return element;
22    }
23    element = getActiveElement(win.document);
24  }
25  return element;
26};
27
28const hasSelectionCapabilities = (elem) => {
29  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
30  return (
31    nodeName &&
32    ((nodeName === 'input' &&
33      (elem.type === 'text' ||
34        elem.type === 'search' ||
35        elem.type === 'tel' ||
36        elem.type === 'url' ||
37        elem.type === 'password')) ||
38      nodeName === 'textarea' ||
39      elem.contentEditable === 'true')
40  );
41};
42
43const getSelection = (input) => {
44  let selection;
45
46  if ('selectionStart' in input) {
47    selection = {
48      start: input.selectionStart,
49      end: input.selectionEnd,
50    };
51  } else {
52    selection = getOffsets(input);
53  }
54
55  return selection || { start: 0, end: 0 };
56};
57
58const getSelectionInformation = () => {
59  const focusedElem = getActiveElementDeep();
60  return {
61    focusedElem: focusedElem,
62    selectionRange: hasSelectionCapabilities(focusedElem)
63      ? getSelection(focusedElem)
64      : null,
65  };
66};
67
68const isTextNode = (node) => {
69  return node && node.nodeType === TEXT_NODE;
70};
71
72const containsNode = (outerNode, innerNode) => {
73  if (!outerNode || !innerNode) {
74    return false;
75  } else if (outerNode === innerNode) {
76    return true;
77  } else if (isTextNode(outerNode)) {
78    return false;
79  } else if (isTextNode(innerNode)) {
80    return containsNode(outerNode, innerNode.parentNode);
81  } else if ('contains' in outerNode) {
82    return outerNode.contains(innerNode);
83  } else if (outerNode.compareDocumentPosition) {
84    return !!(outerNode.compareDocumentPosition(innerNode) & 16);
85  } else {
86    return false;
87  }
88};
89
90const isInDocument = (node) => {
91  return (
92    node &&
93    node.ownerDocument &&
94    containsNode(node.ownerDocument.documentElement, node)
95  );
96};
97
98const setSelection = (input, offsets) => {
99  const start = offsets.start;
100  let end = offsets.end;
101  if (end === undefined) {
102    end = start;
103  }
104
105  if ('selectionStart' in input) {
106    input.selectionStart = start;
107    input.selectionEnd = Math.min(end, input.value.length);
108  } else {
109    setOffsets(input, offsets);
110  }
111};
112
113const restoreSelection = (priorSelectionInformation) => {
114  const curFocusedElem = getActiveElementDeep();
115  const priorFocusedElem = priorSelectionInformation.focusedElem;
116  const priorSelectionRange = priorSelectionInformation.selectionRange;
117  if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
118    if (
119      priorSelectionRange !== null &&
120      hasSelectionCapabilities(priorFocusedElem)
121    ) {
122      setSelection(priorFocusedElem, priorSelectionRange);
123    }
124
125    const ancestors = [];
126    let ancestor = priorFocusedElem;
127    while ((ancestor = ancestor.parentNode)) {
128      if (ancestor.nodeType === ELEMENT_NODE) {
129        ancestors.push({
130          element: ancestor,
131          left: ancestor.scrollLeft,
132          top: ancestor.scrollTop,
133        });
134      }
135    }
136
137    if (typeof priorFocusedElem.focus === 'function') {
138      priorFocusedElem.focus();
139    }
140
141    for (let i = 0; i < ancestors.length; i++) {
142      const info = ancestors[i];
143      info.element.scrollLeft = info.left;
144      info.element.scrollTop = info.top;
145    }
146  }
147};
148
149export {
150  getSelectionInformation,
151  hasSelectionCapabilities,
152  getSelection,
153  restoreSelection,
154};
155

Source: ReactInputSelection.js

import { TEXT_NODE, ELEMENT_NODE } from '../../../HTMLNodeType';

import { getActiveElement } from './getActiveElement';
import { getOffsets, setOffsets } from './ReactDOMSelection';

const isSameOriginFrame = (iframe) => {
  try {
    return typeof iframe.contentWindow.location.href === 'string';
  } catch (err) {
    return false;
  }
};

const getActiveElementDeep = () => {
  let win = window;
  let element = getActiveElement();
  while (element instanceof win.HTMLIFrameElement) {
    if (isSameOriginFrame(element)) {
      win = element.contentWindow;
    } else {
      return element;
    }
    element = getActiveElement(win.document);
  }
  return element;
};

const hasSelectionCapabilities = (elem) => {
  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
  return (
    nodeName &&
    ((nodeName === 'input' &&
      (elem.type === 'text' ||
        elem.type === 'search' ||
        elem.type === 'tel' ||
        elem.type === 'url' ||
        elem.type === 'password')) ||
      nodeName === 'textarea' ||
      elem.contentEditable === 'true')
  );
};

const getSelection = (input) => {
  let selection;

  if ('selectionStart' in input) {
    selection = {
      start: input.selectionStart,
      end: input.selectionEnd,
    };
  } else {
    selection = getOffsets(input);
  }

  return selection || { start: 0, end: 0 };
};

const getSelectionInformation = () => {
  const focusedElem = getActiveElementDeep();
  return {
    focusedElem: focusedElem,
    selectionRange: hasSelectionCapabilities(focusedElem)
      ? getSelection(focusedElem)
      : null,
  };
};

const isTextNode = (node) => {
  return node && node.nodeType === TEXT_NODE;
};

const containsNode = (outerNode, innerNode) => {
  if (!outerNode || !innerNode) {
    return false;
  } else if (outerNode === innerNode) {
    return true;
  } else if (isTextNode(outerNode)) {
    return false;
  } else if (isTextNode(innerNode)) {
    return containsNode(outerNode, innerNode.parentNode);
  } else if ('contains' in outerNode) {
    return outerNode.contains(innerNode);
  } else if (outerNode.compareDocumentPosition) {
    return !!(outerNode.compareDocumentPosition(innerNode) & 16);
  } else {
    return false;
  }
};

const isInDocument = (node) => {
  return (
    node &&
    node.ownerDocument &&
    containsNode(node.ownerDocument.documentElement, node)
  );
};

const setSelection = (input, offsets) => {
  const start = offsets.start;
  let end = offsets.end;
  if (end === undefined) {
    end = start;
  }

  if ('selectionStart' in input) {
    input.selectionStart = start;
    input.selectionEnd = Math.min(end, input.value.length);
  } else {
    setOffsets(input, offsets);
  }
};

const restoreSelection = (priorSelectionInformation) => {
  const curFocusedElem = getActiveElementDeep();
  const priorFocusedElem = priorSelectionInformation.focusedElem;
  const priorSelectionRange = priorSelectionInformation.selectionRange;
  if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
    if (
      priorSelectionRange !== null &&
      hasSelectionCapabilities(priorFocusedElem)
    ) {
      setSelection(priorFocusedElem, priorSelectionRange);
    }

    const ancestors = [];
    let ancestor = priorFocusedElem;
    while ((ancestor = ancestor.parentNode)) {
      if (ancestor.nodeType === ELEMENT_NODE) {
        ancestors.push({
          element: ancestor,
          left: ancestor.scrollLeft,
          top: ancestor.scrollTop,
        });
      }
    }

    if (typeof priorFocusedElem.focus === 'function') {
      priorFocusedElem.focus();
    }

    for (let i = 0; i < ancestors.length; i++) {
      const info = ancestors[i];
      info.element.scrollLeft = info.left;
      info.element.scrollTop = info.top;
    }
  }
};

export {
  getSelectionInformation,
  hasSelectionCapabilities,
  getSelection,
  restoreSelection,
};