leaflet.pub
a tool for shared writing and social publishing
simplify active highlight rendering to support comments
awarm.space
+9
-15
+1
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+1
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
···
95
95
useActiveHighlightState.setState({ activeHighlight: null });
96
96
}}
97
97
onMouseEnter={() => {
98
-
useActiveHighlightState.setState({ activeHighlight: props.index });
98
+
useActiveHighlightState.setState({ activeHighlight: props.position });
99
99
}}
100
100
>
101
101
<div
···
175
175
176
176
blocks.forEach((block, index) => {
177
177
const blockPath = [...currentPath, index];
178
-
console.log(blockPath);
179
178
180
179
// Handle different block types
181
180
if (PubLeafletBlocksUnorderedList.isMain(block.block)) {
+8
-13
app/lish/[did]/[publication]/[rkey]/useHighlight.tsx
+8
-13
app/lish/[did]/[publication]/[rkey]/useHighlight.tsx
···
1
1
// Generated w/ Claude 4
2
2
"use client";
3
3
4
-
import { useParams, useSearchParams } from "next/navigation";
4
+
import { useParams } from "next/navigation";
5
5
import { useContext } from "react";
6
6
import { PostPageContext } from "./PostPageContext";
7
7
import { create } from "zustand";
8
-
import { decodeQuotePosition } from "./quotePosition";
8
+
import { decodeQuotePosition, QuotePosition } from "./quotePosition";
9
9
10
10
export const useActiveHighlightState = create(() => ({
11
-
activeHighlight: null as null | number,
11
+
activeHighlight: null as null | QuotePosition,
12
12
}));
13
13
14
14
export const useHighlight = (pos: number[]) => {
···
17
17
let activeHighlight = useActiveHighlightState(
18
18
(state) => state.activeHighlight,
19
19
);
20
-
let highlights =
21
-
doc?.document_mentions_in_bsky
22
-
.filter((m, i) => i === activeHighlight)
23
-
.map((mention) => {
24
-
return new URL(mention.link).pathname.split("/l-quote/")[1];
25
-
})
26
-
.filter((s) => s !== null) || [];
27
-
if (quote) highlights.push(quote as string);
20
+
let highlights = activeHighlight ? [activeHighlight] : [];
21
+
let decodedQuote = quote ? decodeQuotePosition(quote as string) : null;
22
+
if (decodedQuote) highlights.push(decodedQuote);
23
+
console.log(highlights);
28
24
return highlights
29
-
.map((highlight) => {
30
-
let quotePosition = decodeQuotePosition(highlight);
25
+
.map((quotePosition) => {
31
26
if (!quotePosition) return null;
32
27
let maxLength = Math.max(
33
28
quotePosition.start.block.length,