Подсветка выбора текста в браузере исчезает при отображении пользовательской панели инструментов при выборе ⇐ Javascript

[Anonymous]

У меня есть страница чтения, на которой после того, как пользователь выбирает текст, отображается плавающая панель инструментов. Когда появляется панель инструментов, собственная подсветка выбора браузера (синяя подсветка/подсветка, специфичная для ОС) исчезает, делая выбор невидимым.
Я считаю, что панель инструментов или этап рендеринга/обновления приводят к потере выделения или потере его собственной подсветки.
Минимальное воспроизведение/соответствующие файлы
Файл: src/app/reader/(sections)/(content)/index.jsx

Соответствующая логика выбора и рендеринга (я вызываю это при наведении курсора мыши):

Код: Выделить всё

// onMouseUp handler inside each page element
const onSelectText = (e, page) => {
const sel = window.getSelection();
if (!sel || sel.isCollapsed) return;

const txt = sel.toString().trim();
if (!txt) return;

setSelectedTextPage(page);
setSelectedText(txt);
setSelectionPosition({ x: e.clientX + 50, y: e.clientY + 20 });

// compute target paragraph and offsets...
const range = sel.getRangeAt(0);
const preRange = document.createRange();
preRange.selectNodeContents(targetElement);
preRange.setEnd(range.startContainer, range.startOffset);
const start = preRange.toString().length;
const end = start + range.toString().length;
setSelectedMatchOffsets({ start, end });
};

Файл: SelectionTooltip (отображается после выбора)

Код: Выделить всё

const SelectionTooltip = ({ selectionPosition }) => {
const tooltipRef = useRef(null);
const [activeTooltip, setActiveTooltip] = useState();
const {
selectedText,
setSelectedText,
setSelectedMatchIndex,
selectedMatchIndex,
} = useReaderContext();

useEffect(() => {
const handleClickOutside = (event) => {
if (activeTooltip) return;
else if (tooltipRef.current && !tooltipRef.current.contains(event.target))
setTimeout(() => setSelectedText(""), 100);
};

document.addEventListener("mousedown", handleClickOutside);

return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [activeTooltip]);

return (
ref={tooltipRef}
className="absolute bg-white dark:bg-gray-800 shadow-lg rounded-lg p-2 flex space-x-2 select-text"
style={{
position: "absolute",
top: `${selectionPosition.y}px`,
left: `${selectionPosition.x}px`,
display: selectedText.length ? "flex" : "none",
}}
>
{" "}








);
};

Среда

• Next.js (App Router)
• Tailwind CSS + пользовательские компоненты
• Состояние реакции переключает видимость панели инструментов при выборе
• Панель инструментов содержит кнопки/поповеры (с возможностью фокусировки) элементы)

Ожидаемое поведение
Выделенный текст должен оставаться выделенным при отображении плавающей панели инструментов.
Фактическое поведение
Когда появляется панель инструментов, браузер удаляет собственную подсветку выбора, делая выбор невидим.



Подробнее здесь: https://stackoverflow.com/questions/798 ... r-on-selec