svelte-streamdown 2.4.5 → 2.5.1

package/dist/Elements/Element.svelte

@@ -10,11 +10,14 @@
 	import Slot from './Slot.svelte';
 	import { useStreamdown } from '../context.svelte.js';
 	import FootnoteRef from './FootnoteRef.svelte';
+	import Citation from './Citation.svelte';
+	import TableDownload from './TableDownload.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
 
 	// Only apply animation on block level elements. Leaves text elements to be animated by their text children.
 	const style = $derived(streamdown.isMounted ? streamdown.animationBlockStyle : '');
+	const id = $props.id();
 </script>
 
 {#if token.type === 'heading'}
@@ -26,67 +29,71 @@
 		render={streamdown.snippets.heading}
 	>
 		{#if token.depth === 1}
-			<h1 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h1 data-streamdown-heading-1={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h1>
 		{:else if token.depth === 2}
-			<h2 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h2 data-streamdown-heading-2={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h2>
 		{:else if token.depth === 3}
-			<h3 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h3 data-streamdown-heading-3={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h3>
 		{:else if token.depth === 4}
-			<h4 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h4 data-streamdown-heading-4={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h4>
 		{:else if token.depth === 5}
-			<h5 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h5 data-streamdown-heading-5={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h5>
 		{:else if token.depth === 6}
-			<h6 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h6 data-streamdown-heading-6={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h6>
 		{/if}
 	</Slot>
 {:else if token.type === 'paragraph'}
 	<Slot props={{ children, token }} render={streamdown.snippets.paragraph}>
-		<p {style} class={streamdown.theme.paragraph.base}>
+		<p data-streamdown-paragraph={id} {style} class={streamdown.theme.paragraph.base}>
 			{@render children()}
 		</p>
 	</Slot>
 {:else if token.type === 'blockquote'}
 	<Slot props={{ children, token }} render={streamdown.snippets.blockquote}>
-		<blockquote {style} class={streamdown.theme.blockquote.base}>
+		<blockquote data-streamdown-blockquote={id} {style} class={streamdown.theme.blockquote.base}>
 			{@render children()}
 		</blockquote>
 	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Mermaid {token} />
+		<Mermaid {id} {token} />
 	</Slot>
 {:else if token.type === 'code'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Code {token} />
+		<Code {id} {token} />
 	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
-		<code class={streamdown.theme.codespan.base}>
+		<code data-streamdown-codespan={id} class={streamdown.theme.codespan.base}>
 			{@render children()}
 		</code>
 	</Slot>
 {:else if token.type === 'list'}
 	{#if token.ordered}
 		<Slot props={{ children, token }} render={streamdown.snippets.ol}>
-			<ol style:list-style-type={token.listType} class={streamdown.theme.ol.base}>
+			<ol
+				data-streamdown-ol={id}
+				style:list-style-type={token.listType}
+				class={streamdown.theme.ol.base}
+			>
 				{@render children()}
 			</ol>
 		</Slot>
 	{:else}
 		<Slot props={{ children, token }} render={streamdown.snippets.ul}>
-			<ul class={streamdown.theme.ul.base}>
+			<ul data-streamdown-ul={id} class={streamdown.theme.ul.base}>
 				{@render children()}
 			</ul>
 		</Slot>
@@ -94,6 +101,7 @@
 {:else if token.type === 'list_item'}
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
+			data-streamdown-li={id}
 			{style}
 			style:list-style-type={token.task ? 'none' : undefined}
 			{...token.value && !token.task ? { value: token.value } : {}}
@@ -112,7 +120,15 @@
 	</Slot>
 {:else if token.type === 'table'}
 	<Slot props={{ token, children }} render={streamdown.snippets.table}>
-		<div {style} class={streamdown.theme.table.base}>
+		{#if streamdown.controls.table}
+			<TableDownload {id} {token} />
+		{/if}
+		<div
+			data-streamdown-table={id}
+			{style}
+			class={`${streamdown.theme.table.base} group`}
+			style:overscroll-behavior-x="none"
+		>
 			<table class={streamdown.theme.table.table}>
 				{@render children()}
 			</table>
@@ -120,25 +136,25 @@
 	</Slot>
 {:else if token.type === 'thead'}
 	<Slot props={{ token, children }} render={streamdown.snippets.thead}>
-		<thead {style} class={streamdown.theme.thead.base}>
+		<thead data-streamdown-thead={id} {style} class={streamdown.theme.thead.base}>
 			{@render children?.()}
 		</thead>
 	</Slot>
 {:else if token.type === 'tbody'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
-		<tbody {style} class={streamdown.theme.tbody.base}>
+		<tbody data-streamdown-tbody={id} {style} class={streamdown.theme.tbody.base}>
 			{@render children?.()}
 		</tbody>
 	</Slot>
 {:else if token.type === 'tfoot'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tfoot}>
-		<tfoot {style} class={streamdown.theme.tfoot.base}>
+		<tfoot data-streamdown-tfoot={id} {style} class={streamdown.theme.tfoot.base}>
 			{@render children?.()}
 		</tfoot>
 	</Slot>
 {:else if token.type === 'tr'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tr}>
-		<tr {style} class={streamdown.theme.tr.base}>
+		<tr data-streamdown-tr={id} {style} class={streamdown.theme.tr.base}>
 			{@render children?.()}
 		</tr>
 	</Slot>
@@ -147,6 +163,7 @@
 		<Slot props={{ children, token }} render={streamdown.snippets.td}>
 			<td
 				{style}
+				data-streamdown-td={id}
 				class={streamdown.theme.td.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -163,6 +180,7 @@
 		<Slot props={{ children, token }} render={streamdown.snippets.th}>
 			<th
 				{style}
+				data-streamdown-th={id}
 				class={streamdown.theme.th.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -175,45 +193,45 @@
 		</Slot>
 	{/if}
 {:else if token.type === 'image'}
-	<Image {token} {children} />
+	<Image {id} {token} {children} />
 {:else if token.type === 'link'}
-	<Link {token} {children} />
+	<Link {id} {token} {children} />
 {:else if token.type === 'sub'}
 	<Slot props={{ children, token }} render={streamdown.snippets.sub}>
-		<sub class={streamdown.theme.sub.base}>
+		<sub data-streamdown-sub={id} class={streamdown.theme.sub.base}>
 			{@render children()}
 		</sub>
 	</Slot>
 {:else if token.type === 'sup'}
 	<Slot props={{ children, token }} render={streamdown.snippets.sup}>
-		<sup class={streamdown.theme.sup.base}>
+		<sup data-streamdown-sup={id} class={streamdown.theme.sup.base}>
 			{@render children()}
 		</sup>
 	</Slot>
 {:else if token.type === 'strong'}
 	<Slot props={{ children, token }} render={streamdown.snippets.strong}>
-		<strong class={streamdown.theme.strong.base}>
+		<strong data-streamdown-strong={id} class={streamdown.theme.strong.base}>
 			{@render children()}
 		</strong>
 	</Slot>
 {:else if token.type === 'em'}
 	<Slot props={{ children, token }} render={streamdown.snippets.em}>
-		<em class={streamdown.theme.em.base}>
+		<em data-streamdown-em={id} class={streamdown.theme.em.base}>
 			{@render children()}
 		</em>
 	</Slot>
 {:else if token.type === 'del'}
 	<Slot props={{ children, token }} render={streamdown.snippets.del}>
-		<del class={streamdown.theme.del.base}>
+		<del data-streamdown-del={id} class={streamdown.theme.del.base}>
 			{@render children()}
 		</del>
 	</Slot>
 {:else if token.type === 'hr'}
 	<Slot props={{ children, token }} render={streamdown.snippets.hr}>
-		<hr {style} class={streamdown.theme.hr.base} />
+		<hr data-streamdown-hr={id} {style} class={streamdown.theme.hr.base} />
 	</Slot>
 {:else if token.type === 'br'}
-	<br />
+	<br data-streamdown-br={id} />
 {:else if token.type === 'math'}
 	<Slot
 		props={{
@@ -222,17 +240,27 @@
 		}}
 		render={streamdown.snippets.math}
 	>
-		<Math {token} />
+		<Math {id} {token} />
 	</Slot>
 {:else if token.type === 'alert'}
-	<Alert {token} {children} />
+	<Alert {id} {token} {children} />
 {:else if token.type === 'footnoteRef'}
-	<FootnoteRef {token} />
+	<Slot props={{ token }} render={streamdown.snippets.footnoteRef}>
+		<FootnoteRef {token} />
+	</Slot>
+{:else if token.type === 'inline-citations'}
+	<Slot props={{ token }} render={streamdown.snippets.inlineCitation}>
+		<Citation {token} />
+	</Slot>
 {:else if token.type === 'footnote'}
 	<!-- TODO Footnotes are rendered inside the FootnoteRef popover -->
 {:else if token.type === 'descriptionList'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
-		<dl style={streamdown.animationBlockStyle} class={streamdown.theme.descriptionList.base}>
+		<dl
+			data-streamdown-description-list={id}
+			style={streamdown.animationBlockStyle}
+			class={streamdown.theme.descriptionList.base}
+		>
 			{@render children()}
 		</dl>
 	</Slot>
@@ -242,13 +270,17 @@
 	</Slot>
 {:else if token.type === 'descriptionTerm'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionTerm}>
-		<dt {style} class={streamdown.theme.descriptionTerm.base}>
+		<dt data-streamdown-description-term={id} {style} class={streamdown.theme.descriptionTerm.base}>
 			{@render children()}
 		</dt>
 	</Slot>
 {:else if token.type === 'descriptionDetail'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionDetail}>
-		<dd {style} class={streamdown.theme.descriptionDetail.base}>
+		<dd
+			data-streamdown-description-detail={id}
+			{style}
+			class={streamdown.theme.descriptionDetail.base}
+		>
 			{@render children()}
 		</dd>
 	</Slot>

package/dist/Elements/FootnoteRef.svelte

@@ -2,18 +2,12 @@
 	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { FootnoteRef } from '../marked/marked-footnotes.js';
-	import {
-		autoPlacement,
-		computePosition,
-		autoUpdate,
-		hide,
-		offset,
-		shift
-	} from '@floating-ui/dom';
+
 	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
 	import { scale } from 'svelte/transition';
 	import Block from '../Block.svelte';
 	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import { Popover } from './popover.svelte.js';
 
 	const streamdown = useStreamdown();
 
@@ -24,106 +18,64 @@
 	} = $props();
 
 	const id = $props.id();
-	let isOpen = $state(false);
-
-	let reference = $state<HTMLButtonElement>();
-	let content = $state<HTMLDialogElement>();
+	const popover = new Popover();
 
-	const clickOutside = useClickOutside({
+	useKeyDown({
+		keys: ['Escape'],
 		get isActive() {
-			return isOpen;
+			return popover.isOpen;
 		},
 		callback: () => {
-			isOpen = false;
+			popover.isOpen = false;
 		}
 	});
-
-	useKeyDown({
-		keys: ['Escape'],
+	const clickOutside = useClickOutside({
 		get isActive() {
-			return isOpen;
+			return popover.isOpen;
 		},
 		callback: () => {
-			isOpen = false;
+			popover.isOpen = false;
 		}
 	});
-
-	const place = async (node: HTMLElement) => {
-		const middleware = [
-			hide(),
-			offset(0),
-			shift({
-				mainAxis: true
-			}),
-			autoPlacement({
-				allowedPlacements: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start']
-			})
-		];
-		const { x, y, strategy, placement, middlewareData } = await computePosition(reference!, node, {
-			strategy: 'fixed',
-			middleware
-		});
-
-		Object.assign(node.style, {
-			position: strategy,
-			left: `${x}px`,
-			top: `${y}px`
-		});
-	};
-
-	const popoverAttachment = (node: HTMLDialogElement) => {
-		content = node;
-		void place(node);
-		const off = autoUpdate(reference!, node, () => place(node));
-		return () => {
-			off();
-		};
-	};
 </script>
 
-{#if isOpen}
-	<Slot
-		props={{
-			token,
-			isOpen
-		}}
-		render={streamdown.snippets.footnotePopover}
+{#if popover.isOpen}
+	<dialog
+		data-streamdown-footnote-popover={id}
+		id={'footnote-popover-' + id}
+		aria-modal="false"
+		transition:scale|global={{ start: 0.95, duration: 100 }}
+		{@attach clickOutside.attachment}
+		{@attach popover.popoverAttachment}
+		open
+		class={`${streamdown.theme.components.popover}`}
 	>
-		<dialog
-			style="z-index: 1000; position: fixed;"
-			id={'footnote-popover-' + id}
-			aria-modal="false"
-			transition:scale|global={{ start: 0.95, duration: 100 }}
-			{@attach clickOutside.attachment}
-			{@attach popoverAttachment}
-			open
-			class={`${streamdown.theme.footnotePopover.base}`}
+		<Slot
+			props={{
+				token,
+				isOpen: popover.isOpen
+			}}
+			render={streamdown.snippets.footnotePopover}
 		>
 			{#each token.content.lines as line}
-				<Block insideFootnote block={line} />
+				<Block block={line} />
 			{/each}
-		</dialog>
-	</Slot>
+		</Slot>
+	</dialog>
 {/if}
 
 {#if token.label !== 'streamdown:footnote'}
-	<Slot
-		props={{
-			token
-		}}
-		render={streamdown.snippets.footnoteRef}
+	<button
+		data-streamdown-footnote-ref={id}
+		style={streamdown.animationBlockStyle}
+		bind:this={popover.reference}
+		class={streamdown.theme.footnoteRef.base}
+		onclick={() => (popover.isOpen = !popover.isOpen)}
+		aria-expanded={popover.isOpen}
+		aria-haspopup="dialog"
+		aria-controls={'footnote-popover-' + id}
+		{@attach clickOutside.attachment}
 	>
-		<button
-			style={streamdown.animationBlockStyle}
-			bind:this={reference}
-			class={streamdown.theme.footnoteRef.base}
-			onclick={() => (isOpen = !isOpen)}
-			aria-expanded={isOpen}
-			aria-haspopup="dialog"
-			aria-controls={'footnote-popover-' + id}
-			{@attach clickOutside.attachment}
-		>
-			{token.label.replace('^', '')}
-		</button>
-	</Slot>
+		{token.label.replace('^', '')}
+	</button>
 {/if}

package/dist/Elements/Image.svelte

@@ -9,10 +9,12 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
 		children: Snippet;
 		token: Tokens.Image;
+		id: string;
 	} = $props();
 
 	const transformedUrl = $derived(
@@ -32,6 +34,7 @@
 			render={streamdown.snippets.image}
 		>
 			<span
+				data-streamdown-image={id}
 				style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 				class={streamdown.theme.image.base}
 			>
@@ -40,6 +43,7 @@
 		</Slot>
 	{:else}
 		<span
+			data-streamdown-image-blocked={id}
 			class="inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400"
 			title={`Blocked URL: ${token.href}`}
 		>

package/dist/Elements/Image.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     children: Snippet;
     token: Tokens.Image;
+    id: string;
 };
 declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
 type Image = ReturnType<typeof Image>;

package/dist/Elements/Link.svelte

@@ -9,10 +9,12 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
 		children: Snippet;
 		token: Tokens.Link;
+		id: string;
 	} = $props();
 
 	const transformedUrl = $derived(
@@ -33,6 +35,7 @@
 		render={streamdown.snippets.link}
 	>
 		<a
+			data-streamdown-link={id}
 			class={streamdown.theme.link.base}
 			href={transformedUrl}
 			target="_blank"
@@ -43,6 +46,7 @@
 	</Slot>
 {:else}
 	<span
+		data-streamdown-link-blocked={id}
 		class={streamdown.theme.link.blocked}
 		title={token.title ? `Blocked URL: ${token.href}` : undefined}
 	>

package/dist/Elements/Link.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     children: Snippet;
     token: Tokens.Link;
+    id: string;
 };
 declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
 type Link = ReturnType<typeof Link>;

package/dist/Elements/Math.svelte

@@ -6,9 +6,11 @@
 	import 'katex/dist/katex.min.css';
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: MathToken;
+		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -46,6 +48,7 @@
 
 {#if token.isInline}
 	<span
+		data-streamdown-inline-math={id}
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={inner}
 		class={streamdown.theme.math.inline}
@@ -53,7 +56,12 @@
 		{@html html}
 	</span>
 {:else}
-	<div style={streamdown.isMounted ? streamdown.animationBlockStyle : ''} class="h-fit w-full">
+	<div
+		data-streamdown-block-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		style:height="fit-content"
+		style:width="100%"
+	>
 		<div class="overflow-x-auto">
 			<div bind:this={inner} class={streamdown.theme.math.block}>
 				{@html html}

package/dist/Elements/Math.svelte.d.ts

@@ -2,6 +2,7 @@ import type { MathToken } from '../marked/index.js';
 import 'katex/dist/katex.min.css';
 type $$ComponentProps = {
     token: MathToken;
+    id: string;
 };
 declare const Math: import("svelte").Component<$$ComponentProps, {}, "">;
 type Math = ReturnType<typeof Math>;