diff --git a/docs/apps.md b/docs/apps.md index 5ede84e..6bfd5b0 100644 --- a/docs/apps.md +++ b/docs/apps.md @@ -105,8 +105,8 @@ export default function ExampleApp({ setTitle }: AppProps) { `HighlightLayer` (`src/apps/articles/HighlightLayer.tsx`) tracks `window.getSelection()` against the rendered article, not the raw markdown — the highlighted text saved to a kind -9802 event is whatever `Range.toString()` returns, i.e. the plain-text content the reader -actually saw, not markdown syntax. +9802 event is whatever that `Selection`'s `.toString()` returns, i.e. the plain-text content +the reader actually saw, not markdown syntax. ### Follow lists are a whole-list replacement diff --git a/src/apps/articles/HighlightLayer.tsx b/src/apps/articles/HighlightLayer.tsx index 29bb723..1aad1b4 100644 --- a/src/apps/articles/HighlightLayer.tsx +++ b/src/apps/articles/HighlightLayer.tsx @@ -34,6 +34,12 @@ export function HighlightLayer({ const { toast } = useToast(); useEffect(() => { + // No point tracking selection at all when highlighting can't happen — + // signed out, or the article has no usable address to attach one to. + // (Stale selection state from before either went missing is harmless: + // the button below also requires `user && address` to render.) + if (!user || !address) return; + function handleSelectionChange() { const sel = window.getSelection(); const container = containerRef.current; @@ -60,10 +66,10 @@ export function HighlightLayer({ document.addEventListener('selectionchange', handleSelectionChange); return () => document.removeEventListener('selectionchange', handleSelectionChange); - }, []); + }, [user, address]); const handleHighlight = async () => { - if (!selection) return; + if (!selection || !address) return; const { text } = selection; window.getSelection()?.removeAllRanges(); setSelection(null); @@ -84,7 +90,7 @@ export function HighlightLayer({