dorfteich/apps/web/src/editor/wikilink-context.tsx
Claude Opus 4.8 7244b89215
All checks were successful
CD / Build and push images (push) Successful in 3m2s
CI / Lint, typecheck, test (push) Successful in 2m15s
CI / Auth e2e pack (push) Successful in 2m42s
CI / Build container images (push) Has been skipped
CD / Deploy to Test (push) Successful in 8s
CD / Smoke tests against Test (push) Successful in 1m13s
CD / Promote to Int (push) Successful in 11s
Add wikilink node with autocomplete (#46)
Introduce Obsidian-style `[[page links]]` (ADR 0004).

- shared: reserved `wikilink` inline atom in the editor schema (attrs
  `targetSlug`, optional `displayText`); markdown mapping `[[slug]]` /
  `[[slug|text]]` via a markdown-it inline rule + serializer node; plain-text
  and HTML derivation include the shown text. Round-trip + parse unit tests.
- web:
  - `Wikilink` node extension with a React NodeView: shows the explicit
    display text or the target's current title (so a rename updates the link),
    renders a missing target as a dashed phantom with a tooltip, navigates on
    click in read mode.
  - `[[` autocomplete popup (`WikilinkAutocomplete`), dependency-free: filters
    the pond's pages as you type with a create-new-page hint for misses,
    Enter/click inserts the node and removes the typed `[[query`; ↑/↓/Enter/Esc
    intercepted in the capture phase so ProseMirror does not act on them.
  - `WikilinkContext` provides the pond's pages (slug→title) for live
    resolution and the autocomplete, populated by the page editor.
  - i18n `editor.wikilink.*` (de + en); wikilink + phantom + popup styles.
- e2e `wikilink.spec.ts` (new CI pack): type `[[`, autocomplete filters and
  inserts a working link that resolves the target title and persists across a
  reload. Phantom → live resolution on page creation is verified in #47.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PGdhRiwU1WRL4XxJfZYipY
2026-07-09 12:42:01 +02:00

54 lines
1.8 KiB
TypeScript

import { createContext, useContext } from 'react';
/** A page in the current pond, as the wikilink UI needs it (issue #46). */
export interface WikilinkTarget {
slug: string;
title: string;
}
/** How a wikilink node resolves its target for display and navigation. */
export interface WikilinkResolution {
/** Current title of the target page, or null when it does not exist (phantom). */
title: string | null;
exists: boolean;
}
export interface WikilinkContextValue {
/** Pages of the current pond, for the `[[` autocomplete. */
targets: WikilinkTarget[];
/** Resolve a slug to its live title and existence. */
resolve: (slug: string) => WikilinkResolution;
/** Pond slug, so a wikilink can build its navigation URL. */
pondSlug: string;
/** Whether the editor is in edit mode (click behaviour differs from read mode). */
editable: boolean;
}
/**
* Live pond context for wikilinks (issue #46). Provided by the page editor,
* consumed by the wikilink NodeView (title resolution, phantom styling) and the
* autocomplete popup. Defaults are inert so a wikilink still renders (as its
* slug) if it is ever mounted without a provider.
*/
export const WikilinkContext = createContext<WikilinkContextValue>({
targets: [],
resolve: () => ({ title: null, exists: false }),
pondSlug: '',
editable: false,
});
export function useWikilinks(): WikilinkContextValue {
return useContext(WikilinkContext);
}
/** Builds a slug→title lookup and a resolver from a pond's page list. */
export function makeWikilinkResolver(
targets: WikilinkTarget[],
): (slug: string) => WikilinkResolution {
const bySlug = new Map(targets.map((t) => [t.slug, t.title]));
return (slug) => {
const title = bySlug.get(slug);
return title !== undefined ? { title, exists: true } : { title: null, exists: false };
};
}