diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index 1aee3439..c07cf8e7 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -74,7 +74,7 @@ const ContentPanel: React.FC = ({ followedPubkeys }) - const { contentRef, handleMouseUp } = useHighlightInteractions({ + const { contentRef, handleSelectionEnd } = useHighlightInteractions({ onHighlightClick, selectedHighlightId, onTextSelection, @@ -138,7 +138,8 @@ const ContentPanel: React.FC = ({ ref={contentRef} className="reader-markdown" dangerouslySetInnerHTML={{ __html: finalHtml }} - onMouseUp={handleMouseUp} + onMouseUp={handleSelectionEnd} + onTouchEnd={handleSelectionEnd} /> ) : (
@@ -152,7 +153,8 @@ const ContentPanel: React.FC = ({ ref={contentRef} className="reader-html" dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }} - onMouseUp={handleMouseUp} + onMouseUp={handleSelectionEnd} + onTouchEnd={handleSelectionEnd} /> ) ) : ( diff --git a/src/hooks/useHighlightInteractions.ts b/src/hooks/useHighlightInteractions.ts index 345dbd02..c4bb5351 100644 --- a/src/hooks/useHighlightInteractions.ts +++ b/src/hooks/useHighlightInteractions.ts @@ -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 } }