Hej, mam kod ktory po kliknieciu prawym przyciskiem myszy na zawartosc strony otwiera ContextMenu i tam mam przycisk "Kopiuj fragment". Po jego wcisnieciu moge myszka wybrac dowolny fragment strony (dodawany jest outline na hover) i po kliknieciu powinien sie skopiowac HTML tego fragmentu. Niestety cos w moim kodzie jest nie tak bo po kliknieciu teoretycznie state odpowiedzialny za to czy uzytkownik wlasnie wybiera jakis fragment jest ustawiany na false
ale juz za chwile jest ponownie true
i mouseover
event jest cal czas aktywny. Tutaj moj kod, bede wdzieczny za pomoc
const [isSelecting, setIsSelecting] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const prevRef = useRef<HTMLElement | null>(null);
const handleMouseOver = (e: MouseEvent) => {
let target = e.target as HTMLElement;
let selectableTarget: HTMLElement | null = target.hasAttribute('data-type')
? target
: null;
while (selectableTarget === null && target.parentElement) {
target = target.parentElement;
selectableTarget = target.hasAttribute('data-type') ? target : null;
}
if (selectableTarget !== prevRef.current) {
prevRef.current?.classList.remove(
'outline-red-500',
'outline-[1px]',
'outline'
);
prevRef.current = selectableTarget;
prevRef.current?.classList.add(
'outline-red-500',
'outline-[1px]',
'outline'
);
}
};
const handleClick = () => {
setIsSelecting((prev) => false);
// await navigator.clipboard.writeText(prevRef.current?.outerHTML || '');
};
useEffect(() => {
if (isSelecting) {
ref.current?.addEventListener('mouseover', handleMouseOver);
ref.current?.addEventListener('click', handleClick);
} else {
ref.current?.removeEventListener('mouseover', handleMouseOver);
ref.current?.removeEventListener('click', handleClick);
}
}, [isSelecting]);
return (
<ContextMenu>
<ContextMenuTrigger asChild>
<div
ref={ref}
className='rich-html prose prose-sm dark:prose-invert md:prose-base lg:prose-lg'
>
{parse(html, options)}
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem asChild>
<Button variant='ghost' onClick={() => setIsSelecting(true)}>
Kopiuj fragment
</Button>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
};