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
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
63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { Node } from '@tiptap/core';
|
|
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
|
|
import type { NodeViewProps } from '@tiptap/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { attributesFromSpec, nodeSpec } from '../spec-utils';
|
|
import { useWikilinks } from '../wikilink-context';
|
|
|
|
/**
|
|
* Renders a `[[wikilink]]` (issue #46): its shown text is the explicit
|
|
* `displayText` or, when none is set, the target page's current title — so
|
|
* renaming the target updates the link everywhere. A missing target renders as
|
|
* a dashed "phantom" with a tooltip and becomes live once the page exists
|
|
* (resolution is server-side in #47). Click navigates in read mode; in edit
|
|
* mode the atom just selects (no navigation).
|
|
*/
|
|
function WikilinkView({ node, editor }: NodeViewProps): React.JSX.Element {
|
|
const { t } = useTranslation('editor');
|
|
const navigate = useNavigate();
|
|
const { resolve, pondSlug } = useWikilinks();
|
|
|
|
const slug = node.attrs.targetSlug as string;
|
|
const display = node.attrs.displayText as string | null;
|
|
const { title, exists } = resolve(slug);
|
|
const text = display ?? title ?? slug;
|
|
const editable = editor.isEditable;
|
|
|
|
return (
|
|
<NodeViewWrapper as="span" className="wikilink-nodeview">
|
|
<a
|
|
className={exists ? 'wikilink' : 'wikilink wikilink--phantom'}
|
|
href={`/p/${pondSlug}/${slug}`}
|
|
title={exists ? undefined : t('wikilink.phantomTooltip')}
|
|
contentEditable={false}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
// In edit mode a click should not navigate away from the editor.
|
|
if (!editable) navigate(`/p/${pondSlug}/${slug}`);
|
|
}}
|
|
>
|
|
{text}
|
|
</a>
|
|
</NodeViewWrapper>
|
|
);
|
|
}
|
|
|
|
const wikilinkSpec = nodeSpec('wikilink');
|
|
export const Wikilink = Node.create({
|
|
name: 'wikilink',
|
|
group: wikilinkSpec.group,
|
|
inline: wikilinkSpec.inline,
|
|
atom: wikilinkSpec.atom,
|
|
addAttributes() {
|
|
return attributesFromSpec(wikilinkSpec);
|
|
},
|
|
parseHTML: () => wikilinkSpec.parseDOM,
|
|
renderHTML: ({ node }) => wikilinkSpec.toDOM!(node),
|
|
addNodeView() {
|
|
return ReactNodeViewRenderer(WikilinkView);
|
|
},
|
|
});
|