@atlaskit/renderer
Version:
Renderer component
76 lines (75 loc) • 3.48 kB
JavaScript
import { useEffect, useRef, useCallback } from 'react';
import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
import { isRangeInsideOfRendererContainer } from './utils';
import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
export var useUserSelectionRange = function useUserSelectionRange(props) {
var rendererDOM = props.rendererRef.current;
var selectionTimeoutRef = useRef();
var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
clearSelectionRange = _useAnnotationRangeDi.clearSelectionRange,
setSelectionRange = _useAnnotationRangeDi.setSelectionRange;
var _useAnnotationRangeSt = useAnnotationRangeState(),
range = _useAnnotationRangeSt.range,
type = _useAnnotationRangeSt.type,
selectionDraftRange = _useAnnotationRangeSt.selectionDraftRange;
var _useAnnotationManager = useAnnotationManagerDispatch(),
annotationManager = _useAnnotationManager.annotationManager;
var lastRangeRef = useRef(null);
var isAnnotationManagerEnabled = !!annotationManager;
var onSelectionChange = useCallback(function (_event) {
if (selectionTimeoutRef.current) {
clearTimeout(selectionTimeoutRef.current);
}
selectionTimeoutRef.current = setTimeout(function () {
var sel = document.getSelection();
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
lastRangeRef.current = null; // Clear last range if selection is invalid
if (isAnnotationManagerEnabled) {
clearSelectionRange();
}
return;
}
var _range = sel.getRangeAt(0);
// Skip if the selection hasn't changed
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
return;
}
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
var _range2 = _range,
startContainer = _range2.startContainer,
endContainer = _range2.endContainer;
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
if (isTripleClick) {
var p = startContainer;
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
p = p.parentNode;
}
if (p && p.nodeName === 'P' && p instanceof Element) {
var _range3 = document.createRange();
_range3.selectNodeContents(p);
sel.removeAllRanges();
sel.addRange(_range3);
_range = sel.getRangeAt(0);
}
}
setSelectionRange(_range.cloneRange());
lastRangeRef.current = _range;
}
}, 100);
}, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
useEffect(function () {
if (!document || !rendererDOM) {
return;
}
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
document.addEventListener('selectionchange', onSelectionChange);
return function () {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
document.removeEventListener('selectionchange', onSelectionChange);
clearSelectionRange();
};
}, [rendererDOM, onSelectionChange, clearSelectionRange]);
return [type, range, selectionDraftRange, clearSelectionRange];
};