🌿 Collaborative wiki on ATProto
lichen.wiki
atproto
Fix autocomplete
+39
-11
+39
-11
public/editor/wikilink-autocomplete.ts
+39
-11
public/editor/wikilink-autocomplete.ts
···
1
1
import type { Completion, CompletionSource } from "@codemirror/autocomplete";
2
+
import type { EditorView } from "codemirror";
2
3
3
4
interface NoteItem {
4
5
slug: string;
···
25
26
const match = context.matchBefore(TRIGGER_RE);
26
27
if (!match) return null;
27
28
const inside = match.text.slice(2);
28
-
29
-
// Explicit trigger keeps the popup open even when `inside` is empty.
30
-
if (!inside && !context.explicit) return null;
31
-
32
29
const from = match.from + 2;
33
30
const hashIdx = inside.indexOf("#");
34
31
···
39
36
const url = `${endpoint}?note=${encodeURIComponent(noteSlug)}&q=${encodeURIComponent(headingQuery)}`;
40
37
const items = await fetchItems<HeadingItem>(url, context.aborted);
41
38
if (!items) return null;
39
+
// Anchor `from` after the `#` so CM's filter matches heading text, not the slug.
40
+
const headingFrom = match.from + 2 + hashIdx + 1;
42
41
const options: Completion[] = items.map((h) => ({
43
-
label: `${"#".repeat(Math.min(h.level, 3))} ${h.text}`,
44
-
apply: `${noteSlug}#${h.text}]]`,
42
+
label: h.text,
43
+
apply: applyLink(h.text),
45
44
type: "property",
46
45
}));
47
-
return { from, to: context.pos, options, validFor: /^[^[\]\n]*$/ };
46
+
return {
47
+
from: headingFrom,
48
+
to: context.pos,
49
+
options,
50
+
validFor: /^[^[\]\n]*$/,
51
+
};
48
52
}
49
53
50
54
const url = `${endpoint}?q=${encodeURIComponent(inside)}`;
···
52
56
if (!items) return null;
53
57
const options: Completion[] = items.map((n) => ({
54
58
label: n.title,
55
-
detail: n.slug,
56
-
apply: `${n.slug}]]`,
59
+
apply: applyLink(n.slug),
57
60
type: "text",
58
61
}));
59
62
return { from, to: context.pos, options, validFor: /^[^[\]\n#]*$/ };
60
63
};
61
64
}
62
65
66
+
/**
67
+
* Insert `target` at `[from, to]`. If `closeBrackets` already placed a `]]`
68
+
* just past `to`, leave it and park the cursor before it — so typing `#` next
69
+
* stays inside the link and re-triggers the heading completion.
70
+
*/
71
+
function applyLink(target: string) {
72
+
return (
73
+
view: EditorView,
74
+
_completion: Completion,
75
+
from: number,
76
+
to: number,
77
+
) => {
78
+
const hasClose = view.state.sliceDoc(to, to + 2) === "]]";
79
+
const insert = hasClose ? target : `${target}]]`;
80
+
view.dispatch({
81
+
changes: { from, to, insert },
82
+
selection: { anchor: from + insert.length },
83
+
});
84
+
};
85
+
}
86
+
63
87
async function fetchItems<T>(
64
88
url: string,
65
89
aborted: boolean,
···
67
91
if (aborted) return null;
68
92
try {
69
93
const res = await fetch(url, { credentials: "same-origin" });
70
-
if (!res.ok) return [];
94
+
if (!res.ok) {
95
+
console.warn(`[wikilink-autocomplete] ${res.status} on ${url}`);
96
+
return [];
97
+
}
71
98
const data = (await res.json()) as { items?: T[] };
72
99
return data.items ?? [];
73
-
} catch {
100
+
} catch (err) {
101
+
console.warn("[wikilink-autocomplete] fetch failed", err);
74
102
return null;
75
103
}
76
104
}