leaflet.pub
a tool for shared writing and social publishing
fix popover number and threshold
awarm.space
+15
-3
+1
-1
components/Blocks/TextBlock/mountProsemirror.ts
+1
-1
components/Blocks/TextBlock/mountProsemirror.ts
+14
-2
components/Footnotes/FootnotePopover.tsx
+14
-2
components/Footnotes/FootnotePopover.tsx
···
1
"use client";
2
3
-
import { useEffect, useRef, useState, useCallback } from "react";
4
import { create } from "zustand";
5
import { useFootnoteContext } from "./FootnoteContext";
6
import { FootnoteEditor } from "./FootnoteEditor";
···
32
let [position, setPosition] = useState<{ top: number; left: number; arrowLeft: number } | null>(null);
33
34
let footnote = footnotes.find((fn) => fn.footnoteEntityID === activeFootnoteID);
35
36
let updatePosition = useCallback(() => {
37
if (!anchorElement || !popoverRef.current) return;
···
110
>
111
<FootnoteEditor
112
footnoteEntityID={footnote.footnoteEntityID}
113
-
index={footnote.index}
114
editable={permissions.write}
115
onDelete={
116
permissions.write
···
1
"use client";
2
3
+
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
4
import { create } from "zustand";
5
import { useFootnoteContext } from "./FootnoteContext";
6
import { FootnoteEditor } from "./FootnoteEditor";
···
32
let [position, setPosition] = useState<{ top: number; left: number; arrowLeft: number } | null>(null);
33
34
let footnote = footnotes.find((fn) => fn.footnoteEntityID === activeFootnoteID);
35
+
36
+
// Compute the displayed index from DOM order (matching CSS counters)
37
+
// rather than the data model order, which may differ if footnotes
38
+
// were inserted out of order within a block.
39
+
let displayIndex = useMemo(() => {
40
+
if (!anchorElement || !footnote) return footnote?.index ?? 0;
41
+
let container = anchorElement.closest('.postPageContent');
42
+
if (!container) return footnote.index;
43
+
let allRefs = Array.from(container.querySelectorAll('.footnote-ref'));
44
+
let pos = allRefs.indexOf(anchorElement);
45
+
return pos >= 0 ? pos + 1 : footnote.index;
46
+
}, [anchorElement, footnote]);
47
48
let updatePosition = useCallback(() => {
49
if (!anchorElement || !popoverRef.current) return;
···
122
>
123
<FootnoteEditor
124
footnoteEntityID={footnote.footnoteEntityID}
125
+
index={displayIndex}
126
editable={permissions.write}
127
onDelete={
128
permissions.write