svelte-streamdown 0.0.1

package/dist/theme.js

@@ -0,0 +1,138 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export const cn = (...inputs) => twMerge(clsx(inputs));
+export const theme = {
+    a: {
+        base: 'text-blue-600 font-medium underline',
+        blocked: 'text-gray-500'
+    },
+    h1: {
+        base: 'mt-6 mb-2 text-3xl font-semibold'
+    },
+    h2: {
+        base: 'mt-6 mb-2 text-2xl font-semibold'
+    },
+    h3: {
+        base: 'mt-6 mb-2 text-xl font-semibold'
+    },
+    h4: {
+        base: 'mt-6 mb-2 text-lg font-semibold'
+    },
+    h5: {
+        base: 'mt-6 mb-2 text-base font-semibold'
+    },
+    h6: {
+        base: 'mt-6 mb-2 text-sm font-semibold'
+    },
+    p: {
+        base: ''
+    },
+    ul: {
+        base: 'ml-4 list-outside list-disc whitespace-normal'
+    },
+    ol: {
+        base: 'ml-4 list-outside list-decimal whitespace-normal'
+    },
+    li: {
+        base: 'py-1'
+    },
+    code: {
+        base: 'bg-gray-100 rounded p-2 font-mono text-sm',
+        container: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
+        header: 'flex items-center justify-between bg-gray-100/80 p-2 pb-0	 text-gray-600 text-xs',
+        button: 'cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900 size-6 p-1',
+        language: 'ml-1 font-mono lowercase',
+        skeleton: 'rounded-md font-mono text-transparent bg-gray-200 whitespace-nowrap inline-block',
+        pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40'
+    },
+    inlineCode: {
+        base: 'bg-gray-100 rounded px-1.5 py-0.5 font-mono text-sm'
+    },
+    img: {
+        container: 'group relative my-4  mx-auto w-fit block',
+        base: 'max-w-full rounded-lg',
+        downloadButton: 'absolute right-2 bottom-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white/90 shadow-sm backdrop-blur-sm transition-all duration-200 hover:bg-white opacity-0 group-hover:opacity-100'
+    },
+    pre: {
+        base: 'overflow-x-auto font-mono text-xs p-4 bg-gray-100/40'
+    },
+    blockquote: {
+        base: 'border-gray-600/30 text-gray-600 my-4 border-l-4 pl-4 italic'
+    },
+    alert: {
+        base: ' relative my-4 border-l-4 p-4',
+        title: 'text-sm font-semibold flex items-center gap-2 mb-2 capitalize',
+        icon: 'size-5',
+        note: '[&>[data-alert-title]]:text-blue-600 border-blue-600 stroke-blue-600',
+        tip: '[&>[data-alert-title]]:text-green-600 border-green-600 stroke-green-600',
+        warning: '[&>[data-alert-title]]:text-yellow-600 border-yellow-600 stroke-yellow-600',
+        caution: '[&>[data-alert-title]]:text-red-600 border-red-600 stroke-red-600',
+        important: '[&>[data-alert-title]]:text-purple-600 border-purple-600 stroke-purple-600'
+    },
+    table: {
+        base: 'border-gray-200 w-full border-collapse border',
+        container: 'my-4 flex flex-col space-y-2'
+    },
+    thead: {
+        base: 'bg-gray-100/80'
+    },
+    tbody: {
+        base: 'divide-gray-200 bg-gray-100/40 divide-y'
+    },
+    tr: {
+        base: 'border-gray-200 border-b'
+    },
+    th: {
+        base: 'px-4 py-2 text-left text-sm font-semibold whitespace-nowrap'
+    },
+    td: {
+        base: 'px-4 py-2 text-sm'
+    },
+    sup: {
+        base: 'text-sm'
+    },
+    sub: {
+        base: 'text-sm'
+    },
+    hr: {
+        base: 'border-gray-200 my-6'
+    },
+    strong: {
+        base: 'font-semibold'
+    },
+    mermaid: {
+        base: 'group relative my-4 h-auto rounded-xl border border-gray-200 p-4',
+        downloadButton: 'cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900'
+    },
+    math: {
+        base: ''
+    },
+    inlineMath: {
+        base: ''
+    },
+    em: {
+        base: 'font-italic'
+    },
+    ins: {
+        base: 'underline'
+    },
+    del: {
+        base: 'line-through'
+    },
+    small: {
+        base: 'text-sm'
+    }
+};
+export const mergeTheme = (customTheme) => {
+    if (!customTheme)
+        return theme;
+    const baseTheme = { ...theme };
+    for (const key in customTheme) {
+        for (const subKey in customTheme[key]) {
+            Object.assign(baseTheme[key], {
+                [subKey]: cn(baseTheme[key], customTheme[key])
+            });
+        }
+    }
+    return baseTheme;
+};

package/dist/utils/alerts.d.ts

@@ -0,0 +1,12 @@
+import type { Root, ElementContent } from 'hast';
+export interface IAlert {
+    keyword: string;
+}
+export type DefaultBuildType = (alertOptions: IAlert, originalChildren: ElementContent[]) => ElementContent | null;
+export interface IOptions {
+    alerts: IAlert[];
+    supportLegacy?: boolean;
+    build?: DefaultBuildType;
+}
+export declare const rehypeGithubAlerts: (options: IOptions) => (tree: Root) => void;
+export declare const defaultBuild: DefaultBuildType;

package/dist/utils/alerts.js

@@ -0,0 +1,207 @@
+import { SKIP, visit } from 'unist-util-visit';
+import { isElement } from 'hast-util-is-element';
+let internalOptions;
+export const rehypeGithubAlerts = (options) => {
+    const defaultOptions = {
+        supportLegacy: false,
+        alerts: [
+            {
+                keyword: 'NOTE'
+            },
+            {
+                keyword: 'IMPORTANT'
+            },
+            {
+                keyword: 'WARNING'
+            },
+            {
+                keyword: 'TIP'
+            },
+            {
+                keyword: 'CAUTION'
+            }
+        ]
+    };
+    internalOptions = Object.assign({}, defaultOptions, options);
+    return (tree) => {
+        visit(tree, 'element', (node, index, parent) => {
+            create(node, index, parent);
+        });
+    };
+};
+const create = (node, index, parent) => {
+    // check if main element is a blockquote
+    if (node.tagName !== 'blockquote') {
+        return [SKIP];
+    }
+    // make sure the blockquote is not empty
+    if (node.children.length < 1) {
+        return [SKIP];
+    }
+    // find the first paragraph inside of the blockquote
+    const firstParagraph = node.children.find((child) => {
+        return child.type === 'element' && child.tagName === 'p';
+    });
+    // typescript type guard
+    // make sure the first paragraph is a valid element
+    if (!isElement(firstParagraph)) {
+        return [SKIP];
+    }
+    // try to find the alert type
+    const headerData = extractHeaderData(firstParagraph);
+    // typescript type guard
+    if (headerData === null) {
+        return [SKIP];
+    }
+    // if the first line contains more than the type
+    // drop out of rendering as alert, this is what
+    // GitHub does (as of Mar. 2024)
+    if (headerData.rest.trim() !== '') {
+        if (!headerData.rest.startsWith('\n') && !headerData.rest.startsWith('\r')) {
+            return [SKIP];
+        }
+    }
+    // try to find options matching the alert keyword
+    const alertOptions = getAlertOptions(headerData.alertType);
+    if (alertOptions === null) {
+        return [SKIP];
+    }
+    // make sure we have parent element and an index
+    // or we won't be able to replace the blockquote
+    // with the new alert element
+    if (!parent || typeof index !== 'number') {
+        return [SKIP];
+    }
+    // use a build to convert the blockquote into an alert
+    const build = internalOptions.build ?? defaultBuild;
+    const alertBodyChildren = [];
+    // for alerts the blockquote first element is always
+    // a paragraph but it can have more children than just
+    // the alert type text node
+    const remainingFirstParagraphChildren = firstParagraph.children.slice(1, firstParagraph.children.length);
+    const newFirstParagraphChildren = [];
+    // remove the first line break from rest if there is one
+    const rest = headerData.rest.replace(/^(\r\n|\r|\n)/, '');
+    // if the rest is empty and the first paragraph has no children
+    // this is a special github case (as of Mar. 2024)
+    // where the alert is only the type (no alert body)
+    // in this case github keeps the original blockquote
+    if (rest === '' && remainingFirstParagraphChildren.length === 0 && node.children.length < 4) {
+        return [SKIP];
+    }
+    if (remainingFirstParagraphChildren.length > 0) {
+        // if the alert type has a hard line break we remove it
+        // to not start the alert with a blank line
+        // meaning we start the slice at 2 to not take
+        // the br element and new line text nodes
+        if (remainingFirstParagraphChildren[0].type === 'element' &&
+            remainingFirstParagraphChildren[0].tagName === 'br') {
+            const remainingChildrenWithoutLineBreak = remainingFirstParagraphChildren.slice(2, firstParagraph.children.length);
+            newFirstParagraphChildren.push(...remainingChildrenWithoutLineBreak);
+        }
+        else {
+            // if the first line of the blockquote has no hard line break
+            // after the alert type but some text, then both the type
+            // and the text will be in a single text node
+            // headerData rest contains the remaining text without the alert type
+            if (rest !== '') {
+                const restAsTextNode = {
+                    type: 'text',
+                    value: rest
+                };
+                remainingFirstParagraphChildren.unshift(restAsTextNode);
+            }
+            // if no hard line break (br) take all the remaining
+            // and add them to new paragraph to mimic the initial structure
+            newFirstParagraphChildren.push(...remainingFirstParagraphChildren);
+        }
+    }
+    else {
+        if (rest !== '') {
+            const restAsTextNode = {
+                type: 'text',
+                value: rest
+            };
+            newFirstParagraphChildren.push(restAsTextNode);
+        }
+    }
+    if (newFirstParagraphChildren.length > 0) {
+        const paragraphElement = {
+            type: 'element',
+            tagName: 'p',
+            properties: {},
+            children: newFirstParagraphChildren
+        };
+        alertBodyChildren.push(paragraphElement);
+    }
+    // outside of the first paragraph there may also be children
+    // we add them too back into the alert body
+    if (node.children.length > 2) {
+        alertBodyChildren.push(...node.children.slice(2, node.children.length));
+    }
+    const alertElement = build(alertOptions, alertBodyChildren);
+    // replace the original blockquote with the
+    // new alert element and its children
+    if (alertElement !== null) {
+        parent.children[index] = alertElement;
+    }
+    return [SKIP];
+};
+export const defaultBuild = (alertOptions, originalChildren) => {
+    // Filter out any title paragraphs that might contain icons or titles
+    const filteredChildren = originalChildren.filter((child) => {
+        if (child.type === 'element' && child.tagName === 'p') {
+            const className = child.properties?.className;
+            // Remove paragraphs with markdown-alert-title class
+            if (className?.includes('markdown-alert-title')) {
+                return false;
+            }
+        }
+        return true;
+    });
+    const alert = {
+        type: 'element',
+        tagName: 'alert',
+        properties: {
+            className: ['markdown-alert', `markdown-alert-${alertOptions.keyword.toLowerCase()}`]
+        },
+        children: filteredChildren
+    };
+    return alert;
+};
+const extractHeaderData = (paragraph) => {
+    const header = paragraph.children[0];
+    let alertType;
+    let rest = '';
+    if (internalOptions.supportLegacy) {
+        if (header.type === 'element' && header.tagName === 'strong') {
+            if (header.children[0].type === 'text') {
+                alertType = header.children[0].value;
+            }
+        }
+    }
+    if (header.type === 'text') {
+        const match = /\[!(.*?)\]/.exec(header.value);
+        if (!match?.input) {
+            return null;
+        }
+        if (match.input.length > match[0].length) {
+            // if in markdown there are no two spaces at the end
+            // then in html there will be no line break
+            // this means in the first line there will be more
+            // content than just the alert type
+            rest = match.input.replace(match[0], '');
+        }
+        alertType = match[1];
+    }
+    if (typeof alertType === 'undefined') {
+        return null;
+    }
+    return { alertType, rest };
+};
+const getAlertOptions = (alertType) => {
+    const alertOptions = internalOptions.alerts.find((alert) => {
+        return alertType.toUpperCase() === alert.keyword.toUpperCase();
+    });
+    return alertOptions ?? null;
+};

package/dist/utils/bind.d.ts

@@ -0,0 +1 @@
+export declare const bind: (ref: any, props: Record<string, any>) => void;

package/dist/utils/bind.js

@@ -0,0 +1,6 @@
+export const bind = (ref, props) => {
+    const descriptors = Object.getOwnPropertyDescriptors(props);
+    for (const key in descriptors) {
+        Object.defineProperty(ref, key, descriptors[key]);
+    }
+};

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

@@ -0,0 +1,7 @@
+export declare const useCopy: (opts: {
+    content: string;
+    timeout?: number;
+}) => {
+    readonly isCopied: boolean;
+    copy: () => Promise<void>;
+};

package/dist/utils/copy.svelte.js

@@ -0,0 +1,35 @@
+import { onDestroy } from 'svelte';
+export const useCopy = (opts) => {
+    let isCopied = $state(false);
+    let timeoutId;
+    const copy = async () => {
+        if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
+            console.error('Clipboard API not available');
+            return;
+        }
+        try {
+            if (!isCopied) {
+                await navigator.clipboard.writeText(opts.content);
+                isCopied = true;
+                if (timeoutId)
+                    clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                    isCopied = false;
+                }, opts.timeout ?? 2000);
+            }
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+        }
+    };
+    onDestroy(() => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+    });
+    return {
+        get isCopied() {
+            return isCopied;
+        },
+        copy
+    };
+};

package/dist/utils/parse-blocks.d.ts

@@ -0,0 +1 @@
+export declare const parseMarkdownIntoBlocks: (markdown: string) => string[];

package/dist/utils/parse-blocks.js

@@ -0,0 +1,40 @@
+import { marked } from 'marked';
+export const parseMarkdownIntoBlocks = (markdown) => {
+    const tokens = marked.use({ gfm: true }).lexer(markdown);
+    const blocks = tokens.map((token) => token.raw);
+    // Post-process to merge consecutive blocks that are part of the same math block
+    const mergedBlocks = [];
+    for (let i = 0; i < blocks.length; i++) {
+        const currentBlock = blocks[i];
+        // Check if this is a standalone $$ that might be a closing delimiter
+        if (currentBlock.trim() === '$$' && mergedBlocks.length > 0) {
+            const previousBlock = mergedBlocks.at(-1);
+            // Check if the previous block starts with $$ but doesn't end with $$
+            const prevStartsWith$$ = previousBlock?.trimStart().startsWith('$$');
+            const prevDollarCount = (previousBlock?.match(/\$\$/g) || []).length;
+            // If previous block has odd number of $$ and starts with $$, merge them
+            if (prevStartsWith$$ && prevDollarCount % 2 === 1) {
+                mergedBlocks[mergedBlocks.length - 1] = previousBlock + currentBlock;
+                continue;
+            }
+        }
+        // Check if current block ends with $$ and previous block started with $$ but didn't close
+        if (mergedBlocks.length > 0 && currentBlock.trimEnd().endsWith('$$')) {
+            const previousBlock = mergedBlocks.at(-1);
+            const prevStartsWith$$ = previousBlock?.trimStart().startsWith('$$');
+            const prevDollarCount = (previousBlock?.match(/\$\$/g) || []).length;
+            const currDollarCount = (currentBlock.match(/\$\$/g) || []).length;
+            // If previous block has unclosed math (odd $$) and current block ends with $$
+            // AND current block doesn't start with $$, it's likely a continuation
+            if (prevStartsWith$$ &&
+                prevDollarCount % 2 === 1 &&
+                !currentBlock.trimStart().startsWith('$$') &&
+                currDollarCount === 1) {
+                mergedBlocks[mergedBlocks.length - 1] = previousBlock + currentBlock;
+                continue;
+            }
+        }
+        mergedBlocks.push(currentBlock);
+    }
+    return mergedBlocks;
+};

package/dist/utils/parse-incomplete-markdown.d.ts

@@ -0,0 +1 @@
+export declare const parseIncompleteMarkdown: (text: string) => string;