From 9bd25f6ce3e5bf45c33c3e615ababf87d6f58f7e Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Mon, 20 Jul 2026 00:34:15 +0200 Subject: [PATCH] #146: Transparente Einbettung $[[Seite]] ohne Rahmen und Titel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Neues bare-Attr am transclusion-Node; $-Präfix in Markdown-Regel, Serializer und Autocomplete; HTML-Placeholder trägt data-transclusion-bare, Server-Expansion und NodeView lassen bei bare Rahmen und Titel weg. Gleiche Tiefen-/Zyklen-/Permission-Regeln, zählt weiter als Link. Unit- und DB-Tests ergänzt. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC --- apps/api/src/public/public.e2e.db.test.ts | 22 ++++++++++ apps/api/src/public/public.service.ts | 9 +++- apps/web/src/editor/WikilinkAutocomplete.tsx | 24 +++++++---- apps/web/src/editor/nodes/transclusion.tsx | 17 +++++++- packages/shared/i18n/de/editor.json | 1 + packages/shared/i18n/en/editor.json | 1 + packages/shared/src/editor-schema/html.ts | 6 ++- packages/shared/src/editor-schema/markdown.ts | 17 +++++--- packages/shared/src/editor-schema/schema.ts | 7 +++- .../src/editor-schema/transclusion.test.ts | 41 +++++++++++++++++++ 10 files changed, 124 insertions(+), 21 deletions(-) diff --git a/apps/api/src/public/public.e2e.db.test.ts b/apps/api/src/public/public.e2e.db.test.ts index 9cb5a39..def1f8f 100644 --- a/apps/api/src/public/public.e2e.db.test.ts +++ b/apps/api/src/public/public.e2e.db.test.ts @@ -169,6 +169,28 @@ describe.skipIf(!hasTestDb)('public read access (e2e, issue #56)', () => { expect(html).toContain(`data-wikilink="ghost-${suffix}"`); }); + it('expands a bare embed without frame or title (issue #146)', async () => { + const targetSlug = `bare-target-${suffix}`; + const hostSlug = `bare-host-${suffix}`; + await makePage(pondId, targetSlug, 'Bare Target', '

Bare body text.

'); + await makePage( + pondId, + hostSlug, + 'Bare Host', + `

Before.

` + + `
Bare Target
`, + ); + + const res = await api().get(`/api/v1/public/${pondSlug}/${hostSlug}/content`).expect(200); + const html = (res.body as { html: string }).html; + // The target's body is spliced in verbatim — no dt-embed frame, no title. + expect(html).toContain('Bare body text.'); + expect(html).not.toContain('dt-embed'); + expect(html).not.toContain('Bare Target'); + expect(html).not.toContain('dt-transclusion'); + }); + it('404s all public endpoints once the public grant is removed', async () => { await prisma.roleGrant.delete({ where: { id: publicGrantId } }); // The API route invalidates on its own mutations; this test deletes diff --git a/apps/api/src/public/public.service.ts b/apps/api/src/public/public.service.ts index fa33498..58236d5 100644 --- a/apps/api/src/public/public.service.ts +++ b/apps/api/src/public/public.service.ts @@ -115,9 +115,11 @@ export class PublicService { depth: number, visited: Set, ): Promise { - const placeholder = /
[^<]*<\/div>/g; - return replaceAsync(html, placeholder, async (_match, rawSlug) => { + const placeholder = + /
[^<]*<\/div>/g; + return replaceAsync(html, placeholder, async (_match, rawSlug, bareAttr) => { const slug = rawSlug as string; + const bare = Boolean(bareAttr); const target = await this.prisma.page.findFirst({ where: { pondId, slug, deletedAt: null }, select: { id: true, pondId: true, slug: true, title: true }, @@ -133,6 +135,9 @@ export class PublicService { depth + 1, new Set(visited).add(slug), ); + // A bare embed (`$[[…]]`, #146) reads as part of the host page: no + // frame, no title — just the expanded content. + if (bare) return inner; return ( `
` + `` + diff --git a/apps/web/src/editor/WikilinkAutocomplete.tsx b/apps/web/src/editor/WikilinkAutocomplete.tsx index 18f1a8e..6d46315 100644 --- a/apps/web/src/editor/WikilinkAutocomplete.tsx +++ b/apps/web/src/editor/WikilinkAutocomplete.tsx @@ -6,11 +6,13 @@ import { useTranslation } from 'react-i18next'; import { useWikilinks } from './wikilink-context'; /** An open `[[` context: the query typed so far and where its `[[` began. - * `embed` is true when it was opened as `![[` — a page embed (issue #135). */ + * `embed` is true when it was opened as `![[` — a page embed (issue #135); + * `bare` when it was `$[[` — the frameless variant (issue #146). */ interface QueryState { query: string; from: number; embed: boolean; + bare: boolean; coords: { left: number; bottom: number }; } @@ -18,21 +20,24 @@ interface QueryState { type Suggestion = { kind: 'page'; slug: string; label: string } | { kind: 'create'; slug: string; label: string }; -/** Detects a `[[query` (link) or `![[query` (embed, #135) immediately before a - * collapsed cursor (issue #46). The optional leading `!` opens an embed. */ -function detectQuery(editor: Editor): { query: string; from: number; embed: boolean } | null { +/** Detects a `[[query` (link), `![[query` (embed, #135) or `$[[query` (bare + * embed, #146) immediately before a collapsed cursor (issue #46). */ +function detectQuery( + editor: Editor, +): { query: string; from: number; embed: boolean; bare: boolean } | null { const { selection } = editor.state; if (!selection.empty) return null; const $from = selection.$from; if (!$from.parent.isTextblock) return null; const start = Math.max(0, $from.parentOffset - 200); const before = $from.parent.textBetween(start, $from.parentOffset, undefined, ''); - const match = /(!?)\[\[([^[\]\n]*)$/.exec(before); + const match = /([!$]?)\[\[([^[\]\n]*)$/.exec(before); if (!match) return null; - const embed = match[1] === '!'; + const embed = match[1] === '!' || match[1] === '$'; + const bare = match[1] === '$'; const query = match[2] ?? ''; - // `[[` is 2 chars; an embed's leading `!` is one more to swallow. - return { query, from: selection.from - query.length - 2 - (embed ? 1 : 0), embed }; + // `[[` is 2 chars; an embed's leading `!`/`$` is one more to swallow. + return { query, from: selection.from - query.length - 2 - (embed ? 1 : 0), embed, bare }; } /** @@ -79,12 +84,13 @@ export function WikilinkAutocomplete({ editor }: { editor: Editor }): React.JSX. if (current.embed) { // A page embed is a block node (#135) — replace the typed `![[query` with // the transclusion block; ProseMirror lifts it out of the paragraph. + // `$[[` opens the frameless variant (#146). editor .chain() .focus() .insertContentAt(range, { type: 'transclusion', - attrs: { targetSlug: item.slug, displayText: null }, + attrs: { targetSlug: item.slug, displayText: null, bare: current.bare }, }) .run(); } else { diff --git a/apps/web/src/editor/nodes/transclusion.tsx b/apps/web/src/editor/nodes/transclusion.tsx index 4cd0d6e..0873080 100644 --- a/apps/web/src/editor/nodes/transclusion.tsx +++ b/apps/web/src/editor/nodes/transclusion.tsx @@ -27,6 +27,7 @@ function TransclusionView({ node, editor }: NodeViewProps): React.JSX.Element { const slug = node.attrs.targetSlug as string; const display = node.attrs.displayText as string | null; + const bare = node.attrs.bare as boolean; const { title, exists } = resolve(slug); const label = display ?? title ?? slug; const editable = editor.isEditable; @@ -45,7 +46,7 @@ function TransclusionView({ node, editor }: NodeViewProps): React.JSX.Element { ⧉ - {t('transclusion.embedded', { title: label })} + {t(bare ? 'transclusion.embeddedBare' : 'transclusion.embedded', { title: label })} {t('transclusion.open')} @@ -54,6 +55,20 @@ function TransclusionView({ node, editor }: NodeViewProps): React.JSX.Element { ); } + if (bare) { + // `$[[…]]` (#146): the embed reads as part of the host page — no frame, + // no title, just the target's rendered content. + return ( + + {content.data ? ( +
+ ) : ( +
+ )} + + ); + } + return (
diff --git a/packages/shared/i18n/de/editor.json b/packages/shared/i18n/de/editor.json index 379b840..08fe3f6 100644 --- a/packages/shared/i18n/de/editor.json +++ b/packages/shared/i18n/de/editor.json @@ -175,6 +175,7 @@ }, "transclusion": { "embedded": "Eingebettet: {{title}}", + "embeddedBare": "Nahtlos eingebettet: {{title}}", "open": "Öffnen" }, "notFound": { diff --git a/packages/shared/i18n/en/editor.json b/packages/shared/i18n/en/editor.json index 9684ddf..846f907 100644 --- a/packages/shared/i18n/en/editor.json +++ b/packages/shared/i18n/en/editor.json @@ -175,6 +175,7 @@ }, "transclusion": { "embedded": "Embedded: {{title}}", + "embeddedBare": "Embedded seamlessly: {{title}}", "open": "Open" }, "notFound": { diff --git a/packages/shared/src/editor-schema/html.ts b/packages/shared/src/editor-schema/html.ts index 9f79ec3..28014c1 100644 --- a/packages/shared/src/editor-schema/html.ts +++ b/packages/shared/src/editor-schema/html.ts @@ -136,10 +136,12 @@ function renderBlock(node: Node): string { // A page embed (#135). The static HTML is a placeholder carrying the // target slug; the read view / public renderer expands it server-side to // the target page's rendered HTML (permission-checked, recursion limited). - // Left un-expanded (here) it degrades to a labelled block. + // Left un-expanded (here) it degrades to a labelled block. The `bare` + // flag (#146) rides along so the expansion can drop frame + title. const slug = escapeHtml(node.attrs.targetSlug as string); const display = node.attrs.displayText ? escapeHtml(node.attrs.displayText as string) : slug; - return `
${display}
`; + const bare = node.attrs.bare ? ' data-transclusion-bare="1"' : ''; + return `
${display}
`; } case 'code_block': return `
${escapeHtml(node.textContent)}
`; diff --git a/packages/shared/src/editor-schema/markdown.ts b/packages/shared/src/editor-schema/markdown.ts index 5bb7565..d2a9a83 100644 --- a/packages/shared/src/editor-schema/markdown.ts +++ b/packages/shared/src/editor-schema/markdown.ts @@ -192,14 +192,16 @@ function wikilinkRule(state: StateInline, silent: boolean): boolean { return true; } -/** A whole line that is only `![[slug]]` / `![[slug|display]]` embeds a page (#135). */ -const TRANSCLUSION_LINE = /^!\[\[([^[\]\n|]+)(?:\|([^[\]\n]+))?\]\]\s*$/; +/** A whole line that is only `![[slug]]` / `![[slug|display]]` embeds a page + * (#135); the `$[[slug]]` prefix embeds without frame or title (#146). */ +const TRANSCLUSION_LINE = /^([!$])\[\[([^[\]\n|]+)(?:\|([^[\]\n]+))?\]\]\s*$/; /** * Block rule for page embeds (issue #135). A line consisting solely of * `![[slug]]` becomes a `transclusion` block node; anything else (including * `![[x]]` mid-paragraph) is left untouched. Registered before `paragraph` so - * the lone-embed line is not swallowed as ordinary text. + * the lone-embed line is not swallowed as ordinary text. A `$` prefix marks + * the embed as `bare` (frameless/titleless, issue #146). */ function transclusionRule( state: StateBlock, @@ -213,9 +215,10 @@ function transclusionRule( if (!match) return false; if (silent) return true; const token = state.push('transclusion', '', 0); - token.attrSet('target', match[1]!.trim()); - const display = match[2]?.trim(); + token.attrSet('target', match[2]!.trim()); + const display = match[3]?.trim(); if (display) token.attrSet('display', display); + if (match[1] === '$') token.attrSet('bare', '1'); token.map = [startLine, startLine + 1]; state.line = startLine + 1; return true; @@ -349,6 +352,7 @@ const markdownParser = new MarkdownParser(editorSchema, createTokenizer(), { getAttrs: (tok) => ({ targetSlug: tok.attrGet('target') ?? '', displayText: tok.attrGet('display') || null, + bare: tok.attrGet('bare') === '1', }), }, em: { mark: 'italic' }, @@ -477,7 +481,8 @@ const markdownSerializer = new MarkdownSerializer( transclusion(state, node) { const slug = node.attrs.targetSlug as string; const display = node.attrs.displayText as string | null; - state.write(display ? `![[${slug}|${display}]]` : `![[${slug}]]`); + const prefix = node.attrs.bare ? '$' : '!'; + state.write(display ? `${prefix}[[${slug}|${display}]]` : `${prefix}[[${slug}]]`); state.closeBlock(node); }, hard_break(state, node, parent, index) { diff --git a/packages/shared/src/editor-schema/schema.ts b/packages/shared/src/editor-schema/schema.ts index 543cddd..640b5e8 100644 --- a/packages/shared/src/editor-schema/schema.ts +++ b/packages/shared/src/editor-schema/schema.ts @@ -261,13 +261,16 @@ export const editorSchema = new Schema({ // it to the target page's rendered HTML (permission-checked, recursion // limited), while the editor shows a placeholder card. Like `wikilink` it // stores slug + optional display text only — live resolution happens where - // the pond's pages are known. + // the pond's pages are known. The `$[[slug]]` variant (issue #146) sets + // `bare`: the expansion drops the frame and title, so the embedded content + // reads as part of the host page. transclusion: { group: 'block', atom: true, attrs: { targetSlug: { validate: 'string' }, displayText: { default: null }, + bare: { default: false }, }, parseDOM: [ { @@ -275,6 +278,7 @@ export const editorSchema = new Schema({ getAttrs: (dom) => ({ targetSlug: dom.getAttribute('data-transclusion'), displayText: dom.getAttribute('data-display') || null, + bare: dom.getAttribute('data-transclusion-bare') === '1', }), }, ], @@ -286,6 +290,7 @@ export const editorSchema = new Schema({ class: 'dt-transclusion', }; if (display) attrs['data-display'] = display; + if (node.attrs.bare) attrs['data-transclusion-bare'] = '1'; return ['div', attrs, display ?? slug]; }, }, diff --git a/packages/shared/src/editor-schema/transclusion.test.ts b/packages/shared/src/editor-schema/transclusion.test.ts index a92e79b..0b023d6 100644 --- a/packages/shared/src/editor-schema/transclusion.test.ts +++ b/packages/shared/src/editor-schema/transclusion.test.ts @@ -48,3 +48,44 @@ describe('page embed / transclusion (issue #135)', () => { expect(firstTransclusion(doc)).toBeNull(); }); }); + +describe('bare page embed `$[[…]]` (issue #146)', () => { + it('parses a lone $[[slug]] line to a bare transclusion and round-trips', () => { + const doc = markdownToDoc('Intro\n\n$[[rennrad]]\n\nOutro'); + const node = firstTransclusion(doc); + expect(node).not.toBeNull(); + expect(node!.attrs.targetSlug).toBe('rennrad'); + expect(node!.attrs.bare).toBe(true); + expect(docToMarkdown(doc)).toContain('$[[rennrad]]'); + }); + + it('keeps `![[…]]` non-bare and round-trips both prefixes side by side', () => { + const doc = markdownToDoc('![[dota]]\n\n$[[rennrad]]'); + const markdown = docToMarkdown(doc); + expect(markdown).toContain('![[dota]]'); + expect(markdown).toContain('$[[rennrad]]'); + let bares = 0; + doc.descendants((node) => { + if (node.type.name === 'transclusion' && node.attrs.bare) bares += 1; + }); + expect(bares).toBe(1); + }); + + it('marks the placeholder div so the server expansion can drop the frame', () => { + const html = docToHtml(markdownToDoc('$[[rennrad]]')); + expect(html).toContain('data-transclusion="rennrad"'); + expect(html).toContain('data-transclusion-bare="1"'); + // The framed variant must NOT carry the marker. + expect(docToHtml(markdownToDoc('![[rennrad]]'))).not.toContain('data-transclusion-bare'); + }); + + it('registers the bare embed target as an outgoing link too', () => { + const doc = markdownToDoc('$[[rennrad]]'); + expect(extractWikilinkSlugs(doc)).toEqual(['rennrad']); + }); + + it('does not treat mid-paragraph $[[x]] as a transclusion', () => { + const doc = markdownToDoc('costs $[[rennrad]] inline'); + expect(firstTransclusion(doc)).toBeNull(); + }); +});