leaflet.pub
a tool for shared writing and social publishing
scroll into view comments panel
awarm.space
+18
-10
+18
-10
app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx
+18
-10
app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx
···
14
14
import { setInteractionState } from "./Interactions/Interactions";
15
15
import { PostPageContext } from "./PostPageContext";
16
16
import { PubLeafletPublication } from "lexicons/api";
17
+
import { flushSync } from "react-dom";
18
+
import { scrollIntoView } from "src/utils/scrollIntoView";
17
19
18
20
export function QuoteHandler() {
19
21
let [position, setPosition] = useState<{
···
31
33
? (() => {
32
34
const range = selection.getRangeAt(0);
33
35
const ancestor = range.commonAncestorContainer;
34
-
const element = ancestor.nodeType === Node.ELEMENT_NODE
35
-
? ancestor as Element
36
-
: ancestor.parentElement;
37
-
return element?.closest('.postContent') !== null;
36
+
const element =
37
+
ancestor.nodeType === Node.ELEMENT_NODE
38
+
? (ancestor as Element)
39
+
: ancestor.parentElement;
40
+
return element?.closest(".postContent") !== null;
38
41
})()
39
42
: false;
40
43
···
205
208
className="flex gap-1 items-center hover:font-bold px-1"
206
209
onClick={() => {
207
210
if (!position) return;
208
-
setInteractionState(document_uri, {
209
-
drawer: "comments",
210
-
drawerOpen: true,
211
-
commentBox: { quote: position },
212
-
});
211
+
flushSync(() =>
212
+
setInteractionState(document_uri, {
213
+
drawer: "comments",
214
+
drawerOpen: true,
215
+
commentBox: { quote: position },
216
+
}),
217
+
);
218
+
scrollIntoView("interaction-drawer");
213
219
}}
214
220
>
215
221
<CommentTiny /> Comment
···
220
226
);
221
227
};
222
228
223
-
function findDataIndex(node: Node): { index: string; element: Element; pageId?: string } | null {
229
+
function findDataIndex(
230
+
node: Node,
231
+
): { index: string; element: Element; pageId?: string } | null {
224
232
if (node.nodeType === Node.ELEMENT_NODE) {
225
233
const element = node as Element;
226
234
if (element.hasAttribute("data-index")) {