links: clickable [[wiki-links]] on cards
CI & Build / Python lint (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 5s
CI & Build / Python tests (push) Successful in 10s
CI & Build / Build & push image (push) Successful in 27s

LinkedText now makes each [[link]] segment interactive: click (or Enter when
focused) resolves the title and opens the target note, creating it first if
it doesn't exist. Reuses the palette's /?open=<id> open path. @click.stop /
keydown.stop keep the surrounding card's click-to-open from also firing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
This commit is contained in:
2026-07-20 11:23:57 -04:00
co-authored by Claude Opus 4.8
parent 2a06f7499a
commit 9be8920362
+31 -4
View File
@@ -1,16 +1,23 @@
<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useNotesStore } from "../stores/notes";
import { useTitlesStore } from "../stores/titles";
const props = defineProps<{ text: string }>();
const router = useRouter();
const notes = useNotesStore();
const titles = useTitlesStore();
interface Part {
text: string;
link: boolean;
}
// Split the body into plain segments and [[wiki-link]] segments (styled, non-
// interactive here — navigation happens from the editor's Links / Linked-from
// lists so we don't nest interactive controls inside the card's open target).
// Split the body into plain segments and [[wiki-link]] segments. Link segments
// are clickable here on the card: they resolve the title and open the target
// note (creating it first if it doesn't exist yet).
const parts = computed<Part[]>(() => {
const result: Part[] = [];
const re = /\[\[([^[\]]+)\]\]/g;
@@ -24,12 +31,32 @@ const parts = computed<Part[]>(() => {
if (last < props.text.length) result.push({ text: props.text.slice(last), link: false });
return result;
});
// Reuses the command palette's open mechanism: navigate to the board with
// ?open=<id>, which BoardView watches to open the editor.
async function follow(title: string) {
await titles.load();
let hit = titles.resolve(title);
if (!hit) {
const created = await notes.createTitled(title);
await titles.reload();
hit = { id: created.id, title: created.title ?? title };
}
void router.push({ path: "/", query: { open: hit.id } });
}
</script>
<template>
<span class="whitespace-pre-wrap break-words"
><template v-for="(part, i) in parts" :key="i"
><span v-if="part.link" class="font-medium text-brand-700 dark:text-brand">{{ part.text }}</span
><span
v-if="part.link"
role="link"
tabindex="0"
class="cursor-pointer font-medium text-brand-700 underline-offset-2 hover:underline dark:text-brand"
@click.stop="follow(part.text)"
@keydown.enter.stop.prevent="follow(part.text)"
>{{ part.text }}</span
><template v-else>{{ part.text }}</template></template
></span
>