fix: add touch event support for highlight creation on mobile

This commit is contained in:
Gigi
2025-10-10 21:24:46 +01:00
parent a3127c7836
commit d529d83eb8
2 changed files with 8 additions and 6 deletions

View File

@@ -74,7 +74,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
followedPubkeys
})
const { contentRef, handleMouseUp } = useHighlightInteractions({
const { contentRef, handleSelectionEnd } = useHighlightInteractions({
onHighlightClick,
selectedHighlightId,
onTextSelection,
@@ -138,7 +138,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
ref={contentRef}
className="reader-markdown"
dangerouslySetInnerHTML={{ __html: finalHtml }}
onMouseUp={handleMouseUp}
onMouseUp={handleSelectionEnd}
onTouchEnd={handleSelectionEnd}
/>
) : (
<div className="reader-markdown">
@@ -152,7 +153,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
ref={contentRef}
className="reader-html"
dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
onMouseUp={handleMouseUp}
onMouseUp={handleSelectionEnd}
onTouchEnd={handleSelectionEnd}
/>
)
) : (

View File

@@ -56,8 +56,8 @@ export const useHighlightInteractions = ({
}
}, [selectedHighlightId])
// Handle text selection
const handleMouseUp = useCallback(() => {
// Handle text selection (works for both mouse and touch)
const handleSelectionEnd = useCallback(() => {
setTimeout(() => {
const selection = window.getSelection()
if (!selection || selection.rangeCount === 0) {
@@ -76,6 +76,6 @@ export const useHighlightInteractions = ({
}, 10)
}, [onTextSelection, onClearSelection])
return { contentRef, handleMouseUp }
return { contentRef, handleSelectionEnd }
}