@memorysmithapp/markdown-renderer 0.0.0-stage → 0.1.1

package/dist/Markdown.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { isValidElement, useRef, } from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { followable } from './address.js';
+import { CopyButton } from './CopyButton.js';
+import { highlightLanguage, highlightTree } from './highlight.js';
+import { useHost } from './host.js';
+import { readDimensions, readImageAlt } from './image-dimensions.js';
+import { choiceTargetOf, LinkChoice } from './LinkChoice.js';
+import { toUnixNewlines } from './markdown.js';
+import { MermaidDiagram } from './MermaidDiagram.js';
+import { remarkCallouts } from './remark-callouts.js';
+import { remarkBlockIds, remarkComments, remarkHighlight, remarkMathDollarRule } from './remark-ring.js';
+import { CLOBBER_PREFIX, rehypeFootnoteRun, rehypeFootnoteSection } from './footnotes.js';
+import { ordinalAt } from './tasklist.js';
+/**
+ * An image, with the dimensions the specification puts in its alt text
+ * (§3.14). What precedes the pipe is the description and is never dropped;
+ * what follows it is width, or width and height, in CSS pixels, and never
+ * appears as text. A value that is neither stays part of the description,
+ * because deleting an accessibility label is the worse failure.
+ */
+function MarkdownImage({ alt, node: _node, ...rest }) {
+    const read = readImageAlt(alt ?? '');
+    return (_jsx("img", { ...rest, alt: read.description, ...(read.width === null ? {} : { width: read.width }), ...(read.height === null ? {} : { height: read.height }) }));
+}
+/**
+ * A link to a place in the same note: a footnote and its way back (§7.12),
+ * or an anchor an author wrote.
+ *
+ * It must not open the whole page in another tab, and a bare hash is not
+ * enough either: a host may scroll the note inside a pane of its own rather
+ * than the window, and an embedded note renders the same identifiers a second
+ * time. So the target is looked up inside the note the link was drawn in, and
+ * brought into view in whatever scrolls it; the address of the page does not
+ * change, because nothing was navigated.
+ */
+function InPageAnchor({ href, children, ...rest }) {
+    const follow = (event) => {
+        const id = decodeURIComponent(href.slice(1));
+        // The note is the root `NoteBody` draws, since a footnote's way back may
+        // cross runs; inside an embed it is the embed's own run. A match inside
+        // an embed answers only a link inside that same embed.
+        const link = event.currentTarget;
+        const embed = link.closest('.embed');
+        const note = embed ? link.closest('.markdown') : (link.closest('.markdown[data-theme]') ?? link.closest('.markdown'));
+        const target = [...(note?.querySelectorAll(`[id="${CSS.escape(id)}"]`) ?? [])].find((candidate) => candidate.closest('.embed') === embed);
+        if (!(target instanceof HTMLElement))
+            return;
+        event.preventDefault();
+        target.scrollIntoView({ block: 'center' });
+    };
+    return (_jsx("a", { href: href, onClick: follow, ...rest, children: children }));
+}
+/**
+ * A file the notebook keeps, where a note embedded it. The host draws it by its
+ * type — an image, audio, video, or a card — and a name the notebook keeps
+ * nothing under is reported the way a pending link is: a notebook is read most
+ * while it is being written (§5.8).
+ */
+function Attachment({ name, width, height }) {
+    const host = useHost();
+    if (!host.keeps(name)) {
+        return (_jsx("span", { className: "attachment-missing", title: host.strings.attachmentMissing, children: name }));
+    }
+    if (!host.renderAttachment)
+        return _jsx("span", { className: "attachment-loading", children: name });
+    return _jsx(_Fragment, { children: host.renderAttachment({ name, width, height }) });
+}
+function MarkdownAnchor({ href, children, node: _node, ...rest }) {
+    const host = useHost();
+    if (href?.startsWith('attachment:')) {
+        /**
+         * The address carries the dimension the pipe declared, after the encoded
+         * name, where nothing else can be (§3.14).
+         *
+         * **Decoded before it is split**, because the parser percent-encodes what
+         * it does not have to leave alone: the separator arrives as `%7C` and
+         * looking for `|` found nothing, which sent the whole string — dimension
+         * included — to be looked up as the name of a file. A name carrying a
+         * pipe is no name anyway (§5.3), so the last one is the separator or
+         * there is none.
+         */
+        const address = decodeURIComponent(href.slice('attachment:'.length));
+        const at = address.lastIndexOf('|');
+        const measured = at === -1 ? null : readDimensions(address.slice(at + 1));
+        const name = measured ? address.slice(0, at) : address;
+        return _jsx(Attachment, { name: name, width: measured?.width ?? null, height: measured?.height ?? null });
+    }
+    if (href?.startsWith('pending:')) {
+        return (_jsx("span", { className: "wikilink-pending", title: host.strings.pendingLink, children: children }));
+    }
+    // Refused by `followable`: the text stays on the page and stops being
+    // something to click. An author sees they got nothing, which is the same
+    // answer the specification gives for a notation it does not implement.
+    if (!href) {
+        return (_jsx("span", { className: "link-refused", title: host.strings.refusedLink, children: children }));
+    }
+    // A target no single note answers by name opens its choice in place.
+    const choice = choiceTargetOf(href);
+    if (choice !== null)
+        return _jsx(LinkChoice, { target: choice, children: children });
+    // An address of the host's own: its router draws it.
+    if (href.startsWith('/'))
+        return _jsx(_Fragment, { children: host.renderLink({ href, className: 'wikilink', children }) });
+    if (href.startsWith('#')) {
+        return (_jsx(InPageAnchor, { href: href, ...rest, children: children }));
+    }
+    return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", ...rest, children: children }));
+}
+/**
+ * A code span, a fenced block, and the one info string with a rendering rule.
+ *
+ * The order of the three branches is the contract. `mermaid` is checked first
+ * and reaches `MermaidDiagram` with its source untouched, because it is the
+ * only info string the specification attaches a rendering rule to (§7.2) and a
+ * highlighter in front of that check would swallow a diagram. A language the
+ * highlighter carries is tokenised. Everything else — a code span, a fence
+ * with no info string, a language nobody registered — renders exactly as it
+ * did before highlighting existed, which is the pattern the specification sets
+ * for the diagram it cannot draw and the formula it cannot typeset: show the
+ * source, never hide it.
+ *
+ * The tokens arrive as ELEMENTS. `refractor` produces a hast tree and
+ * `toJsxRuntime` builds React out of it, so no note-derived markup is ever
+ * parsed as HTML — the boundary §7.9 draws, held at the one place a
+ * highlighter would otherwise breach it.
+ */
+function MarkdownCode({ className, children, node: _node, ...rest }) {
+    const { theme } = useHost();
+    if (className?.includes('language-mermaid')) {
+        return _jsx(MermaidDiagram, { code: String(children).trim(), theme: theme });
+    }
+    const language = highlightLanguage(className);
+    if (language !== null) {
+        // The source is read and never rewritten: what is on the page is the
+        // bytes, split into spans. React-markdown hands the children of a fence as
+        // a single string ending in the newline before the closing fence.
+        const code = String(children).replace(/\n$/, '');
+        return (_jsx("code", { className: className, ...rest, children: toJsxRuntime(highlightTree(code, language), { Fragment, jsx, jsxs }) }));
+    }
+    return (_jsx("code", { className: className, ...rest, children: children }));
+}
+/**
+ * A fenced block in a frame of its own, with the verb that carries it
+ * somewhere else. The frame is not the `pre`: the `pre` scrolls and never
+ * wraps, since a wrapped line breaks indentation that carries meaning, and the
+ * button has to stay in its corner while the content scrolls under it.
+ *
+ * What is copied is the `textContent` of the code, which is the bytes as
+ * typed because the highlighter's tokens arrive as elements, less the newline
+ * before the closing fence.
+ *
+ * A diagram is not code on the page: its fence is left bare, with no frame and
+ * nothing to copy.
+ */
+function MarkdownPre({ children, node, ...rest }) {
+    const { strings } = useHost();
+    const ref = useRef(null);
+    const code = node?.children?.find((child) => child.tagName === 'code');
+    const classes = code?.properties?.['className'];
+    if (Array.isArray(classes) && classes.includes('language-mermaid')) {
+        return _jsx("pre", { ...rest, children: children });
+    }
+    return (_jsxs("div", { className: "code-block", children: [_jsx("pre", { ref: ref, ...rest, children: children }), _jsx(CopyButton, { className: "code-copy", label: strings.copy, done: strings.copied, text: () => (ref.current?.querySelector('code')?.textContent ?? '').replace(/\n$/, '') })] }));
+}
+/**
+ * Whether this list item is a task box, and how it is ticked.
+ *
+ * The state is read from the child `input` that GFM produces, and NOT from a
+ * `checked` on the item itself: react-markdown 9 hands a component the **hast**
+ * element, which carries no such property. Reading it there returned
+ * `undefined` for every item, which once sent every task box of MemorySmith
+ * down the plain branch and onto the screen as GFM's own disabled checkbox —
+ * no handler, no click, on any note.
+ */
+function taskState(node) {
+    const box = node?.children?.find((child) => child.tagName === 'input');
+    const checked = box?.properties?.['checked'];
+    return typeof checked === 'boolean' ? checked : null;
+}
+/**
+ * A list item that carries a task box. The ordinal comes from the position the
+ * parser reports, mapped back to the n-th task of the source, which is what
+ * lets a click become a one-character change in the original text — made by
+ * the host, never by the package.
+ */
+function TaskItem({ node, children, className, source, toggleTask, writable, ...rest }) {
+    const element = node;
+    const checked = taskState(element);
+    if (checked === null) {
+        return (_jsx("li", { className: className, ...rest, children: children }));
+    }
+    const offset = element?.position?.start?.offset;
+    const ordinal = offset === undefined ? -1 : ordinalAt(source, offset);
+    const enabled = writable && toggleTask !== undefined && ordinal >= 0;
+    return (
+    // Our class comes LAST, because the one react-markdown passes in is on
+    // `className` and spreading it after would silently take the item back.
+    _jsxs("li", { ...rest, className: `${className ?? ''} task-item`.trim(), children: [_jsx("input", { type: "checkbox", checked: checked, disabled: !enabled, onChange: () => enabled && toggleTask(ordinal) }), dropBox(children)] }));
+}
+/**
+ * The children of the item without the checkbox GFM put in front of them.
+ *
+ * It is matched by element type rather than by position, because a leading
+ * space follows it and neither the space nor the order is part of any contract.
+ */
+function dropBox(children) {
+    if (!Array.isArray(children))
+        return children;
+    return children.filter((child) => !(isValidElement(child) && child.type === 'input'));
+}
+/**
+ * The remark plugins of the reading surface, in their order. `planFootnotes` reads a note
+ * through the same list, so it counts the references this surface draws and no other.
+ */
+export function readingPlugins(titleOf) {
+    return [
+        /**
+         * `singleTilde: false` is a decision and not a default.
+         *
+         * GFM specifies strikethrough as `~~x~~`; GitHub also accepts a
+         * single tilde, outside its own specification. Here that extension
+         * actively misrenders a notation the specification leaves out:
+         * somebody writing `H~2~O` for a subscript would get `H` struck-out
+         * `2` `O`, which is a worse answer than nothing. With it off the
+         * characters stay on the page, and the author can see they got what
+         * the specification says they get, which is nothing.
+         */
+        [remarkGfm, { singleTilde: false }],
+        [remarkCallouts, { titleOf }],
+        remarkHighlight,
+        remarkComments,
+        remarkBlockIds,
+        remarkMath,
+        // After remark-math, and it gives back what was never a formula.
+        remarkMathDollarRule,
+    ];
+}
+export function Markdown({ children, source, onToggleTask, writable = false, footnotes }) {
+    const text = toUnixNewlines(children);
+    const { strings } = useHost();
+    const calloutTitle = (kind) => Object.hasOwn(strings.callouts, kind) ? strings.callouts[kind] : undefined;
+    return (_jsx("div", { className: "markdown", children: _jsx(ReactMarkdown, { remarkPlugins: readingPlugins(calloutTitle), 
+            // Raw HTML is NOT enabled, and its absence is the point: no
+            // `rehype-raw` is loaded, so a note carrying `<script>` is text. It is
+            // a security boundary rather than a rendering preference, because a
+            // notebook is written by several people and by agents (§7.9).
+            // A formula KaTeX cannot typeset shows its source, never an error (§7.8).
+            rehypePlugins: [
+                [rehypeKatex, { throwOnError: false }],
+                ...(footnotes === undefined
+                    ? []
+                    : footnotes === 'section'
+                        ? [rehypeFootnoteSection]
+                        : [[rehypeFootnoteRun, footnotes]]),
+            ], 
+            // Footnotes (§7.12): the words around them are the reader's, and the
+            // label heads the notes gathered at the end of the note, where a
+            // reader sees it — GFM hides it, and a stylesheet that hides nothing
+            // shows it as a visible heading, so it is in the reader's language.
+            remarkRehypeOptions: {
+                // remark-rehype's own default, stated: `footnotes.ts` renumbers by it.
+                clobberPrefix: CLOBBER_PREFIX,
+                footnoteLabel: strings.footnotes,
+                footnoteLabelProperties: { className: ['footnotes-label'] },
+                footnoteBackLabel: (referenceIndex) => strings.footnoteBack(referenceIndex + 1),
+            }, 
+            // Which addresses this surface will follow, and the reason the stock
+            // filter is not doing it, are in `address.ts`.
+            urlTransform: followable, components: {
+                a: MarkdownAnchor,
+                code: MarkdownCode,
+                pre: MarkdownPre,
+                img: MarkdownImage,
+                li: (props) => (_jsx(TaskItem, { ...props, source: source ?? text, toggleTask: onToggleTask, writable: writable })),
+            }, children: text }) }));
+}

package/dist/MermaidDiagram.d.ts

@@ -0,0 +1,16 @@
+interface MermaidDiagramProps {
+    readonly code: string;
+    /** The theme the host draws in, which picks Mermaid's own. */
+    readonly theme: 'light' | 'dark';
+}
+/**
+ * A mermaid code block drawn as an SVG diagram (§7.2). The library is heavy, so
+ * it is imported lazily, out of the bundle that draws the rest of the note; on
+ * any error the code is shown instead, and the error never leaves the diagram.
+ *
+ * The SVG is the one markup this surface injects, and it is Mermaid's own
+ * output, not note-derived HTML: Mermaid renders with its default `strict`
+ * security level, which encodes the text of the diagram.
+ */
+export declare function MermaidDiagram({ code, theme }: MermaidDiagramProps): import("react").JSX.Element;
+export {};

package/dist/MermaidDiagram.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+/**
+ * A mermaid code block drawn as an SVG diagram (§7.2). The library is heavy, so
+ * it is imported lazily, out of the bundle that draws the rest of the note; on
+ * any error the code is shown instead, and the error never leaves the diagram.
+ *
+ * The SVG is the one markup this surface injects, and it is Mermaid's own
+ * output, not note-derived HTML: Mermaid renders with its default `strict`
+ * security level, which encodes the text of the diagram.
+ */
+export function MermaidDiagram({ code, theme }) {
+    const id = useId().replace(/[^a-zA-Z0-9]/g, '');
+    const [svg, setSvg] = useState(null);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        let alive = true;
+        let renderId = null;
+        setSvg(null);
+        setFailed(false);
+        void (async () => {
+            try {
+                const { default: mermaid } = await import('mermaid');
+                // Text metrics depend on the webfont; rendering before it loads
+                // truncates node labels.
+                await document.fonts?.ready;
+                mermaid.initialize({
+                    startOnLoad: false,
+                    theme: theme === 'dark' ? 'dark' : 'neutral',
+                    fontFamily: 'Inter, sans-serif',
+                    // SVG text labels measure reliably; HTML labels clip inside nodes
+                    // when the webfont metrics differ from the fallback.
+                    htmlLabels: false,
+                    flowchart: { htmlLabels: false },
+                });
+                /**
+                 * A diagram Mermaid cannot read is shown as its code without drawing
+                 * it. Drawing it anyway failed in the right place, the code, and left
+                 * the scratch container Mermaid draws into — its error bomb included —
+                 * at the end of <body>, under the whole page.
+                 */
+                if ((await mermaid.parse(code, { suppressErrors: true })) === false) {
+                    if (alive)
+                        setFailed(true);
+                    return;
+                }
+                renderId = `mmd-${id}-${Date.now()}`;
+                const rendered = await mermaid.render(renderId, code);
+                if (alive)
+                    setSvg(rendered.svg);
+            }
+            catch {
+                // And should drawing still fail, what it left behind goes with it.
+                if (renderId)
+                    document.getElementById(`d${renderId}`)?.remove();
+                if (alive)
+                    setFailed(true);
+            }
+        })();
+        return () => {
+            alive = false;
+        };
+    }, [code, id, theme]);
+    if (failed) {
+        return (_jsx("pre", { children: _jsx("code", { children: code }) }));
+    }
+    if (!svg)
+        return _jsx("div", { className: "mermaid-diagram mermaid-loading" });
+    return _jsx("div", { className: "mermaid-diagram", dangerouslySetInnerHTML: { __html: svg } });
+}

package/dist/NoteBody.d.ts

@@ -0,0 +1,15 @@
+import { type NoteHost } from './host.js';
+export interface NoteBodyProps extends NoteHost {
+    /**
+     * The note as the host keeps it, frontmatter included. It is drawn from these bytes and never
+     * rewritten; the frontmatter is not drawn, because a host shows it as properties.
+     */
+    readonly markdown: string;
+}
+/**
+ * The body of a note, drawn as MemorySmith's reading page draws it.
+ *
+ * It renders inside `.markdown`, so the stylesheet of the package applies, and asks the host for
+ * every piece of notebook data through the props of `NoteHost`.
+ */
+export declare function NoteBody({ markdown, writable, onToggleTask, ...host }: NoteBodyProps): import("react").JSX.Element;

package/dist/NoteBody.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { HOST_KEYS, HostProvider, resolveHost } from './host.js';
+import { planFootnotes } from './footnotes.js';
+import { Markdown, readingPlugins } from './Markdown.js';
+import { bodyStart, remoteImageHosts, resolveWikilinks } from './markdown.js';
+import { taskBoxes } from './tasklist.js';
+import { Transclusion } from './Transclusion.js';
+import { splitEmbeds } from './transclusion.js';
+import { wikilinkAddress } from './wikilink-address.js';
+/**
+ * The body of a note, drawn as MemorySmith's reading page draws it.
+ *
+ * It renders inside `.markdown`, so the stylesheet of the package applies, and asks the host for
+ * every piece of notebook data through the props of `NoteHost`.
+ */
+export function NoteBody({ markdown, writable = false, onToggleTask, ...host }) {
+    const resolved = useMemo(() => resolveHost(host), 
+    // Every member of the contract, so a host that passes the same functions keeps the same host.
+    HOST_KEYS.map((key) => host[key]));
+    // Frontmatter is shown as properties, not as prose, so the reading surface
+    // starts after it. Everything below counts task items from there.
+    const split = bodyStart(markdown);
+    const body = markdown.slice(split);
+    // The body is cut into runs of text and the embeds between them; each run
+    // is parsed on its own, as on MemorySmith's reading page.
+    const segments = splitEmbeds(body, resolved.keeps).map((segment) => segment.kind === 'text'
+        ? {
+            ...segment,
+            // One resolver for every run: one note is a link, several are the
+            // choice, and none is pending and still asks.
+            rendered: resolveWikilinks(segment.text, (name) => wikilinkAddress(resolved, name), resolved.keeps),
+        }
+        : segment);
+    /**
+     * Whether a click can be mapped back to the bytes at all.
+     *
+     * The ordinal is counted over the text the PARSER saw, which is the one with
+     * the wikilinks already resolved, and it is applied to the text a write
+     * sends, which is the original. Those two agree on how many boxes there are
+     * and in what order, almost always — and `- [[x]]` is where they do not,
+     * because resolving it produces `- [x](/url)`, which is a task box to any
+     * GFM reader. Counting on one side and writing on the other would then
+     * toggle a different item, silently, which is the worst defect this surface
+     * can have. When the two disagree the boxes are read-only: not writing is
+     * always better than writing the wrong one.
+     */
+    const mappable = taskBoxes(body).length ===
+        segments.reduce((total, segment) => total + ('rendered' in segment ? taskBoxes(segment.rendered).length : 0), 0);
+    // The ordinal a click carries is of the WHOLE note, and each rendered run
+    // only knows its own. The count carried across the runs is what bridges
+    // the two, and it has to include anything above the body.
+    let seen = taskBoxes(markdown.slice(0, split)).length;
+    /**
+     * Whom this note asked the browser to talk to (§7.10).
+     *
+     * The specification admits three answers about a remote image and forbids
+     * only silence: never fetching, fetching on the reader's action, or fetching
+     * and saying so. This surface fetches — the destination reaches `<img src>`,
+     * and React even preloads it — so this line is the half that says so, and
+     * the reason it has to exist is that this is the one of the three answers a
+     * person cannot work out from the page.
+     *
+     * It appears only where it is true, naming the hosts, because a notice on
+     * every note would be a thing to scroll past rather than a thing to read.
+     */
+    const hosts = resolved.remoteNotice ? remoteImageHosts(body) : [];
+    // The footnotes of a note an embed cuts (§7.12): each run is handed the
+    // definitions of the others and the numbers of the note, and the note's one
+    // section is drawn at its end, below the last embed too. Null, and nothing
+    // changes, for a note no embed cuts or with no footnote to carry.
+    const runs = segments.flatMap((segment) => ('rendered' in segment ? [segment.rendered] : []));
+    const footnotes = useMemo(() => planFootnotes(runs, runs.length < segments.length, readingPlugins(() => undefined)), 
+    // The runs and whether an embed cut them are the whole input.
+    [runs.join('\u0000'), runs.length < segments.length]);
+    let run = 0;
+    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: "markdown", "data-theme": resolved.theme, children: [segments.map((segment, index) => {
+                    if (!('rendered' in segment)) {
+                        return _jsx(Transclusion, { target: segment.target, anchor: segment.anchor }, index);
+                    }
+                    const base = seen;
+                    seen += taskBoxes(segment.rendered).length;
+                    const planned = footnotes?.runs[run++];
+                    return (_jsx(Markdown, { 
+                        // The text the ordinal is counted over, stated rather than left to
+                        // a default: it is the one the parser reports offsets into, and
+                        // `mappable` above is what makes it safe to write back through.
+                        // A planned run is the same text with definitions appended after
+                        // it, so every box keeps the offset it had.
+                        source: planned?.text ?? segment.rendered, onToggleTask: onToggleTask && ((ordinal) => onToggleTask(base + ordinal)), writable: writable && mappable, ...(planned ? { footnotes: { refs: planned.refs } } : {}), children: planned?.text ?? segment.rendered }, index));
+                }), footnotes && _jsx(Markdown, { footnotes: "section", children: footnotes.section }), hosts.length > 0 && _jsx("p", { className: "remote-notice", children: resolved.strings.remoteImages(hosts) })] }) }));
+}

package/dist/Transclusion.d.ts

@@ -0,0 +1,11 @@
+/**
+ * One transcluded block: the content of another note, shown in place.
+ *
+ * It always says where it came from. A passage pasted without provenance is
+ * indistinguishable from what the author wrote, and a notebook rests on
+ * knowing who asserted what.
+ */
+export declare function Transclusion({ target, anchor }: {
+    target: string;
+    anchor: string | null;
+}): import("react").JSX.Element;

package/dist/Transclusion.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useHost } from './host.js';
+import { Markdown } from './Markdown.js';
+import { bodyStart, resolveWikilinks } from './markdown.js';
+import { blockOf, demoteEmbeds, isBlockAnchor, sectionOf } from './transclusion.js';
+import { wikilinkAddress } from './wikilink-address.js';
+/** The shape of what is coming, in the position it will occupy, while the host answers. */
+function TransclusionSkeleton({ loading }) {
+    return (_jsxs("div", { className: "skeleton-region", "aria-busy": "true", "aria-live": "polite", children: [_jsx("span", { className: "visually-hidden", children: loading }), _jsxs("figure", { className: "embed embed-skeleton", children: [_jsx("div", { className: "embed-body", children: _jsxs("span", { className: "skeleton-text", children: [_jsx("span", { className: "skeleton", style: { width: '96%', height: '1rem' } }), _jsx("span", { className: "skeleton", style: { width: '58%', height: '1rem' } })] }) }), _jsx("figcaption", { className: "embed-source", children: _jsx("span", { className: "skeleton", style: { width: '8rem', height: '0.8rem' } }) })] })] }));
+}
+/**
+ * One transcluded block: the content of another note, shown in place.
+ *
+ * It always says where it came from. A passage pasted without provenance is
+ * indistinguishable from what the author wrote, and a notebook rests on
+ * knowing who asserted what.
+ */
+export function Transclusion({ target, anchor }) {
+    const host = useHost();
+    const { strings } = host;
+    const name = target.normalize('NFC');
+    // A transclusion expands ONE note, so it expands what a wikilink would
+    // navigate to: an ambiguous target is a choice a reader makes and not a
+    // passage the page can inline on their behalf.
+    const one = host.loadNote !== null && host.reaches(name) === 1;
+    const [loaded, setLoaded] = useState({ state: 'loading' });
+    useEffect(() => {
+        if (!one || !host.loadNote)
+            return;
+        let alive = true;
+        setLoaded({ state: 'loading' });
+        host.loadNote(name).then((note) => alive && setLoaded(note ? { state: 'ready', note } : { state: 'missing' }), () => alive && setLoaded({ state: 'missing' }));
+        return () => {
+            alive = false;
+        };
+    }, [one, host, name]);
+    // The same pending marker a wikilink uses. A notebook is read most while it
+    // is still being written, so a target that does not exist yet is an
+    // expected state and never an error that stops the page.
+    if (!one || loaded.state === 'missing') {
+        return (_jsx("p", { className: "embed-pending", children: _jsx("span", { className: "wikilink-pending", title: strings.pendingLink, children: target }) }));
+    }
+    if (loaded.state === 'loading')
+        return _jsx(TransclusionSkeleton, { loading: strings.loading });
+    const { note } = loaded;
+    const whole = note.markdown.slice(bodyStart(note.markdown));
+    // The caption names the note the content came from, and a note may have no
+    // name.
+    const sourceLabel = note.name ?? strings.unnamedNote;
+    // `#^id` addresses a BLOCK and `#Section` a heading. The two are told apart
+    // by the marker and not by trying one and falling back to the other, or a
+    // section named `^x` and a block called `x` would answer for each other.
+    const cut = !anchor ? whole : isBlockAnchor(anchor) ? blockOf(whole, anchor.slice(1)) : sectionOf(whole, anchor);
+    const caption = anchor ? `${sourceLabel} › ${anchor}` : sourceLabel;
+    return (_jsxs("figure", { className: "embed", children: [_jsx("div", { className: "embed-body", children: cut === null ? (_jsx("p", { className: "embed-missing", children: strings.embedSectionMissing(anchor ?? '') })) : (
+                /**
+                 * Resolved, like every other run of the note. Without this every
+                 * `[[link]]` inside transcluded content reached the page with its
+                 * brackets — and the sharpest case is the one the one-level rule
+                 * creates itself: `demoteEmbeds` turns an embed found in embedded
+                 * content into a wikilink, and that embed is drawn as A LINK to its
+                 * target. Raw text is not a link.
+                 */
+                _jsx(Markdown, { children: resolveWikilinks(demoteEmbeds(cut, host.keeps), (each) => wikilinkAddress(host, each), host.keeps) })) }), _jsx("figcaption", { className: "embed-source", children: note.address === null ? caption : host.renderLink({ href: note.address, children: caption }) })] }));
+}

package/dist/address.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Which addresses the reading surface will follow.
+ *
+ * `react-markdown` normally passes every URL through a filter that keeps the
+ * safe schemes and drops the rest, and the reading page once had it **switched
+ * off** — `urlTransform={(url) => url}`. There was a reason: an unresolved
+ * wikilink is rendered as `[text](pending:target)`, and the stock filter does
+ * not know `pending:`, so it erased the pending link from the page. A whole
+ * protection was traded for one scheme.
+ *
+ * This is that trade undone. The list says what passes, never what is
+ * refused, because a notebook is written by several people and by agents, and a
+ * denylist is a promise to have thought of everything.
+ *
+ * **What passes, and why:**
+ *
+ * - `pending:` — ours, and the reason the filter was off in the first place;
+ *   and `attachment:` and `choice:`, ours too.
+ * - A path of the application (`/`), a relative one (`./`, `../`) and an
+ *   anchor of the page (`#`).
+ * - `http:` and `https:` — the web, which is what a note cites.
+ * - `mailto:` — a person, which is what a note cites next most often.
+ *
+ * **What does not, and why each one:**
+ *
+ * - **`obsidian://`, and any other scheme of an editor. Decided, not
+ *   overlooked.** It opens the notebook of whoever has that editor installed and
+ *   that notebook on that machine, so the link works for the person who wrote it
+ *   and does nothing at all for everybody else who opens the note — a promise
+ *   the host cannot keep on behalf of a tool it does not run. A notebook is
+ *   served to whoever reads it, and an address only its author can follow is
+ *   not an address.
+ * - `data:` — a whole page carried inside the address. `data:text/html` is a
+ *   script running in the reader's session, offered by whoever wrote the note.
+ * - `javascript:` and `vbscript:` — script written where an address goes.
+ *   React blocks the first one on its own; that it does is not a reason to
+ *   hand it the chance.
+ * - `file:` — the disk of whoever is reading, addressed by somebody else.
+ *
+ * A refused address is not silently swallowed: the text stays on the page and
+ * stops being clickable, which is what the anchor of the surface does with an
+ * empty href. An author sees they got nothing, the same answer the
+ * specification gives to a notation it does not implement.
+ */
+/**
+ * The address as it will be written, or the empty string when this surface
+ * will not follow it.
+ *
+ * An address with no scheme is a path, an anchor or a relative target, and it
+ * cannot reach outside the page on its own: those pass untouched, which is
+ * what keeps `./note.md`, `/v/a-notebook/note/x` and `#a-heading` working.
+ */
+export declare function followable(url: string): string;