svelte-streamdown 2.0.4 → 2.1.0

package/dist/Elements/Code.svelte

@@ -47,21 +47,23 @@
 <div class={streamdown.theme.code.base} data-language={language}>
 	<div class={streamdown.theme.code.header} data-code-block-header data-language={language}>
 		<span class={streamdown.theme.code.language}>{language}</span>
-		<div class="flex items-center gap-2">
-			<!-- Download button snippet -->
-			<button
-				class={streamdown.theme.code.button}
-				onclick={downloadCode}
-				title="Download file"
-				type="button"
-			>
-				{@render downloadIcon()}
-			</button>
+		{#if streamdown.controls.code}
+			<div class="flex items-center gap-2">
+				<!-- Download button snippet -->
+				<button
+					class={streamdown.theme.code.button}
+					onclick={downloadCode}
+					title="Download file"
+					type="button"
+				>
+					{@render downloadIcon()}
+				</button>
 
-			<button class={streamdown.theme.code.button} onclick={copy.copy} type="button">
-				{@render copyIcon()}
-			</button>
-		</div>
+				<button class={streamdown.theme.code.button} onclick={copy.copy} type="button">
+					{@render copyIcon()}
+				</button>
+			</div>
+		{/if}
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
 		<div>

package/dist/Elements/Element.svelte

@@ -203,6 +203,12 @@
 	<Alert {token} {children} />
 {:else if token.type === 'footnoteRef'}
 	<FootnoteRef {token} />
+{:else if token.type === 'html'}
+	{#if streamdown.renderHtml}
+		{@const content =
+			typeof streamdown.renderHtml === 'function' ? streamdown.renderHtml(token) : token.raw}
+		{@html content}
+	{/if}
 {:else}
 	<!-- For tokens we don't handle specifically, render children or fallback -->
 	{@render children?.()}

package/dist/Elements/Mermaid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { flushSync, onMount, tick } from 'svelte';
 	import { useStreamdown } from '../Streamdown.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
@@ -178,9 +178,7 @@
 			const mergedConfig = { ...defaultConfig };
 			mermaid.initialize(mergedConfig);
 
-			// Use a stable ID based on chart content hash and timestamp to ensure uniqueness
 			const chartHash = code.split('').reduce((acc, char) => {
-				// biome-ignore lint/suspicious/noBitwiseOperators: "Required for Mermaid"
 				return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
 			}, 0);
 
@@ -196,7 +194,6 @@
 				svgTarget.setAttribute(attribute.name, attribute.value);
 			});
 			svgTarget.innerHTML = svg.innerHTML;
-			// After rendering, fit the SVG within its parent container
 
 			panzoom.zoomToFit();
 			panzoom.zoomToFit();
@@ -216,101 +213,103 @@
 		{@attach insider.attach}
 		data-expanded={'false'}
 	>
-		<div class={streamdown.theme.mermaid.buttons}>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Zoom to fit"
-				onclick={() => panzoom.zoomToFit()}
-				data-panzoom-ignore
-			>
-				<svg
-					class={streamdown.theme.mermaid.icon}
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					><path d="M3 7V5a2 2 0 0 1 2-2h2" /><path d="M17 3h2a2 2 0 0 1 2 2v2" /><path
-						d="M21 17v2a2 2 0 0 1-2 2h-2"
-					/><path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect
-						width="10"
-						height="8"
-						x="7"
-						y="8"
-						rx="1"
-					/></svg
+		{#if streamdown.controls.mermaid}
+			<div class={streamdown.theme.mermaid.buttons}>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom to fit"
+					onclick={() => panzoom.zoomToFit()}
+					data-panzoom-ignore
 				>
-			</button>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Zoom in"
-				onclick={() => panzoom.zoomIn()}
-				data-panzoom-ignore
-			>
-				<svg
-					class={streamdown.theme.mermaid.icon}
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
-						x1="11"
-						x2="11"
-						y1="8"
-						y2="14"
-					/><line x1="8" x2="14" y1="11" y2="11" /></svg
+					<svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><path d="M3 7V5a2 2 0 0 1 2-2h2" /><path d="M17 3h2a2 2 0 0 1 2 2v2" /><path
+							d="M21 17v2a2 2 0 0 1-2 2h-2"
+						/><path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect
+							width="10"
+							height="8"
+							x="7"
+							y="8"
+							rx="1"
+						/></svg
+					>
+				</button>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom in"
+					onclick={() => panzoom.zoomIn()}
+					data-panzoom-ignore
 				>
-			</button>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Zoom out"
-				onclick={() => panzoom.zoomOut()}
-				data-panzoom-ignore
-				><svg
-					class={streamdown.theme.mermaid.icon}
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
-						x1="8"
-						x2="14"
-						y1="11"
-						y2="11"
-					/></svg
-				></button
-			>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Toggle expand"
-				onclick={() => panzoom.toggleExpand()}
-				data-panzoom-ignore
-			>
-				<svg
-					class={streamdown.theme.mermaid.icon}
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					><path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path
-						d="M21 8V3h-5"
-					/><path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path
-						d="M9 9 3 3"
-					/></svg
+					<svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
+							x1="11"
+							x2="11"
+							y1="8"
+							y2="14"
+						/><line x1="8" x2="14" y1="11" y2="11" /></svg
+					>
+				</button>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom out"
+					onclick={() => panzoom.zoomOut()}
+					data-panzoom-ignore
+					><svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
+							x1="8"
+							x2="14"
+							y1="11"
+							y2="11"
+						/></svg
+					></button
 				>
-			</button>
-		</div>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Toggle expand"
+					onclick={() => panzoom.toggleExpand()}
+					data-panzoom-ignore
+				>
+					<svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path
+							d="M21 8V3h-5"
+						/><path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path
+							d="M9 9 3 3"
+						/></svg
+					>
+				</button>
+			</div>
+		{/if}
 		<svg {@attach panzoom.attach} data-mermaid-svg></svg>
 	</div>
 {:else}

package/dist/Streamdown.d.ts

@@ -7,6 +7,10 @@ export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets
     snippets: Snippets;
     shikiTheme: BundledTheme;
     theme: Theme;
+    controls: {
+        code: boolean;
+        mermaid: boolean;
+    };
 }
 export declare class StreamdownContext {
     footnotes: {
@@ -86,5 +90,10 @@ export type StreamdownProps = {
             important?: string;
         };
     };
+    controls?: {
+        code?: boolean;
+        mermaid?: boolean;
+    };
+    renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
 } & Partial<Snippets>;
 export {};

package/dist/Streamdown.svelte

@@ -21,6 +21,8 @@
 		baseTheme,
 		mergeTheme: shouldMergeTheme = true,
 		streamdown = $bindable(),
+		renderHtml,
+		controls,
 		...snippets
 	}: StreamdownProps = $props();
 
@@ -60,11 +62,22 @@
 		get katexConfig() {
 			return katexConfig;
 		},
+		get renderHtml() {
+			return renderHtml;
+		},
 		get translations() {
 			return translations;
 		},
 		get shikiPreloadThemes() {
 			return shikiPreloadThemes;
+		},
+		get controls() {
+			const codeControls = controls?.code ?? true;
+			const mermaidControls = controls?.mermaid ?? true;
+			return {
+				code: codeControls,
+				mermaid: mermaidControls
+			};
 		}
 	});
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown } from './Streamdown.js';
-export * from './Elements/index.js';
-export { theme, shadcnTheme, mergeTheme, cn, type Theme } from './theme.js';
+export { useStreamdown, type StreamdownProps } from './Streamdown.js';
+export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
+export { lex, parseBlocks, type StreamdownToken } from './marked/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown } from './Streamdown.js';
-export * from './Elements/index.js';
-export { theme, shadcnTheme, mergeTheme, cn } from './theme.js';
+export { theme, shadcnTheme, mergeTheme } from './theme.js';
+export { lex, parseBlocks } from './marked/index.js';

package/dist/theme.js

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 export const cn = (...inputs) => twMerge(clsx(inputs));
 export const theme = {
     link: {
-        base: 'text-blue-600 font-medium underline',
+        base: 'text-blue-600 font-medium underline wrap-anywhere hover:text-blue-600/80',
         blocked: 'text-gray-500'
     },
     h1: {
@@ -39,8 +39,8 @@ export const theme = {
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
-        container: ' relative overflow-visible bg-gray-100 rounded p-2 font-mono text-sm ',
-        header: 'flex items-center justify-between bg-gray-100/80 p-2 pb-0	 text-gray-600 text-xs',
+        container: ' relative overflow-visible bg-gray-100 p-2 font-mono text-sm ',
+        header: 'flex items-center justify-between bg-gray-100/80 p-2	 text-gray-600 text-xs',
         button: 'cursor-pointer size-6 p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-gray-200 scale-y-90 animate-pulse whitespace-nowrap inline-block',
@@ -130,7 +130,7 @@ export const theme = {
 };
 export const shadcnTheme = {
     link: {
-        base: 'text-primary font-medium underline hover:text-primary/80',
+        base: 'text-primary wrap-anywhere  font-medium underline hover:text-primary/80',
         blocked: 'text-muted-foreground'
     },
     h1: {
@@ -166,8 +166,8 @@ export const shadcnTheme = {
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-lg border border-border flex flex-col',
-        container: 'relative overflow-visible bg-muted rounded p-2 font-mono text-sm',
-        header: 'flex items-center justify-between bg-muted/80 p-2 pb-0 text-muted-foreground text-xs',
+        container: 'relative overflow-visible bg-muted p-2 font-mono text-sm',
+        header: 'flex items-center justify-between bg-muted/80 px-2 py-1 text-muted-foreground text-xs',
         button: 'cursor-pointer size-6 p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-muted',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-border/80 scale-y-90 w-fit animate-pulse whitespace-nowrap inline-block',

package/dist/utils/hightlighter.svelte.d.ts

@@ -3,7 +3,6 @@ import { SvelteSet } from 'svelte/reactivity';
 export declare const loadShiki: () => Promise<[any, import("shiki").CreateHighlighterFactory<BundledLanguage, BundledTheme>]>;
 declare class HighlighterManager {
     initialized: boolean;
-    private highlighter;
     private highlighters;
     private createHighlighter;
     private engine;

package/dist/utils/hightlighter.svelte.js

@@ -1,6 +1,9 @@
-import {} from 'shiki';
+import { bundledLanguages } from 'shiki';
 import { untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+const isLanguageSupported = (language) => {
+    return Object.hasOwn(bundledLanguages, language);
+};
 // Remove background styles from <pre> tags (inline style)
 const removePreBackground = (html) => {
     return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));
@@ -13,7 +16,6 @@ export const loadShiki = async () => {
 };
 class HighlighterManager {
     initialized = $state(false);
-    highlighter = null;
     highlighters = new SvelteMap();
     createHighlighter = null;
     engine = null;
@@ -47,7 +49,7 @@ class HighlighterManager {
             }
             const highlighter = await this.createHighlighter?.({
                 themes: [theme],
-                langs: [language],
+                langs: isLanguageSupported(language) ? [language] : ['text'],
                 engine: this.engine
             });
             this.highlighters.set(`${theme}:${language}`, highlighter);
@@ -66,7 +68,7 @@ class HighlighterManager {
             if (!this.highlighters.has(`${theme}:${language}`)) {
                 const highlighter = await this.createHighlighter({
                     themes: [theme],
-                    langs: [language],
+                    langs: isLanguageSupported(language) ? [language] : ['text'],
                     engine: this.engine
                 });
                 this.highlighters.set(`${theme}:${language}`, highlighter);
@@ -83,7 +85,7 @@ class HighlighterManager {
             return '';
         }
         let html = highlighter.codeToHtml(code, {
-            lang: language,
+            lang: isLanguageSupported(language) ? language : 'text',
             theme: theme
         });
         // Remove background and add custom class if needed

package/dist/utils/parse-incomplete-markdown.js

@@ -244,6 +244,13 @@ const countSingleUnderscores = (text) => {
             if (isWithinMathBlock(text, index)) {
                 return acc;
             }
+            // Skip if underscore is word-internal (between word characters)
+            if (prevChar &&
+                nextChar &&
+                /[\p{L}\p{N}_]/u.test(prevChar) &&
+                /[\p{L}\p{N}_]/u.test(nextChar)) {
+                return acc;
+            }
             if (prevChar !== '_' && nextChar !== '_') {
                 return acc + 1;
             }
@@ -259,13 +266,23 @@ const handleIncompleteSingleUnderscoreItalic = (text) => {
     }
     const singleUnderscoreMatch = text.match(singleUnderscorePattern);
     if (singleUnderscoreMatch) {
-        // Find the first single underscore position (not part of __)
+        // Find the first single underscore position (not part of __ and not word-internal)
         let firstSingleUnderscoreIndex = -1;
         for (let i = 0; i < text.length; i++) {
             if (text[i] === '_' &&
                 text[i - 1] !== '_' &&
                 text[i + 1] !== '_' &&
+                text[i - 1] !== '\\' &&
                 !isWithinMathBlock(text, i)) {
+                // Check if underscore is word-internal (between word characters)
+                const prevChar = i > 0 ? text[i - 1] : '';
+                const nextChar = i < text.length - 1 ? text[i + 1] : '';
+                if (prevChar &&
+                    nextChar &&
+                    /[\p{L}\p{N}_]/u.test(prevChar) &&
+                    /[\p{L}\p{N}_]/u.test(nextChar)) {
+                    continue;
+                }
                 firstSingleUnderscoreIndex = i;
                 break;
             }
@@ -282,6 +299,12 @@ const handleIncompleteSingleUnderscoreItalic = (text) => {
         }
         const singleUnderscores = countSingleUnderscores(text);
         if (singleUnderscores % 2 === 1) {
+            // If text ends with newline(s), insert underscore before them
+            const trailingNewlineMatch = text.match(/\n+$/);
+            if (trailingNewlineMatch) {
+                const textBeforeNewlines = text.slice(0, -trailingNewlineMatch[0].length);
+                return `${textBeforeNewlines}_${trailingNewlineMatch[0]}`;
+            }
             return `${text}_`;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.0.4",
+	"version": "2.1.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",