svelte-streamdown 1.0.8 → 2.0.0

package/dist/utils/useClickOutside.svelte.js

@@ -0,0 +1,41 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { on } from 'svelte/events';
+export const useClickOutside = (props) => {
+    const refs = new SvelteSet();
+    let listener = null;
+    const onClickOutside = (e) => {
+        let inRef = false;
+        if (props.isActive) {
+            const path = e.composedPath();
+            path.forEach((node) => {
+                refs.forEach((ref) => {
+                    if (ref instanceof Node && node instanceof Node && ref?.isSameNode(node)) {
+                        inRef = true;
+                    }
+                });
+            });
+            if (!inRef) {
+                props.callback();
+            }
+        }
+    };
+    return {
+        get attachment() {
+            return props.isActive
+                ? (node) => {
+                    refs.add(node);
+                    if (!listener) {
+                        listener = on(node.ownerDocument, 'pointerdown', onClickOutside);
+                    }
+                    return () => {
+                        refs.delete(node);
+                        if (listener && refs.size === 0) {
+                            listener();
+                            listener = null;
+                        }
+                    };
+                }
+                : null;
+        }
+    };
+};

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

@@ -0,0 +1,5 @@
+export declare const useKeyDown: (opts: {
+    isActive: boolean;
+    callback: () => void;
+    keys: string[];
+}) => void;

package/dist/utils/useKeyDown.svelte.js

@@ -0,0 +1,23 @@
+import { on } from 'svelte/events';
+export const useKeyDown = (opts) => {
+    let listener;
+    const eventCallback = (event) => {
+        if (opts.keys.includes(event.key)) {
+            event.preventDefault();
+            opts.callback();
+        }
+    };
+    $effect(() => {
+        if (opts.isActive && !listener) {
+            listener = on(window, 'keydown', eventCallback);
+        }
+        else {
+            listener?.();
+            listener = null;
+        }
+        return () => {
+            listener?.();
+            listener = null;
+        };
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "1.0.8",
+	"version": "2.0.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -68,6 +68,7 @@
 		]
 	},
 	"dependencies": {
+		"@floating-ui/dom": "^1.7.4",
 		"clsx": "^2.1.1",
 		"html-url-attributes": "^3.0.1",
 		"katex": "^0.16.22",

package/dist/Elements/Blockquote.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Blockquote;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.blockquote}
->
-	<blockquote class={streamdown.theme.blockquote.base}>
-		{@render children()}
-	</blockquote>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Blockquote;
-};
-declare const Blockquote: import("svelte").Component<$$ComponentProps, {}, "">;
-type Blockquote = ReturnType<typeof Blockquote>;
-export default Blockquote;

package/dist/Elements/Del.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Del;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.del}
->
-	<del class={streamdown.theme.del.base}>
-		{@render children()}
-	</del>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Del;
-};
-declare const Del: import("svelte").Component<$$ComponentProps, {}, "">;
-type Del = ReturnType<typeof Del>;
-export default Del;

package/dist/Elements/Em.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Em;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.em}
->
-	<em class={streamdown.theme.em.base}>
-		{@render children()}
-	</em>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Em;
-};
-declare const Em: import("svelte").Component<$$ComponentProps, {}, "">;
-type Em = ReturnType<typeof Em>;
-export default Em;

package/dist/Elements/Heading.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const { token, children }: { token: Tokens.Heading; children: Snippet } = $props();
-
-	const level = $derived(`h${token.depth}`) as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-	const className = $derived(streamdown.theme[level].base);
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.heading}
->
-	<svelte:element this={level} class={className}>
-		{@render children()}
-	</svelte:element>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    token: Tokens.Heading;
-    children: Snippet;
-};
-declare const Heading: import("svelte").Component<$$ComponentProps, {}, "">;
-type Heading = ReturnType<typeof Heading>;
-export default Heading;

package/dist/Elements/Hr.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Hr;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.hr}
->
-	<hr class={streamdown.theme.hr.base} />
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Hr;
-};
-declare const Hr: import("svelte").Component<$$ComponentProps, {}, "">;
-type Hr = ReturnType<typeof Hr>;
-export default Hr;

package/dist/Elements/InlineCode.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Codespan;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.inlineCode}
->
-	<code class={streamdown.theme.inlineCode.base}>
-		{token.text}
-	</code>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Codespan;
-};
-declare const InlineCode: import("svelte").Component<$$ComponentProps, {}, "">;
-type InlineCode = ReturnType<typeof InlineCode>;
-export default InlineCode;

package/dist/Elements/Li.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.ListItem;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.li}
->
-	<li class={streamdown.theme.li.base}>
-		{@render children()}
-	</li>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.ListItem;
-};
-declare const Li: import("svelte").Component<$$ComponentProps, {}, "">;
-type Li = ReturnType<typeof Li>;
-export default Li;

package/dist/Elements/Ol.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.List;
-	} = $props();
-
-	console.log({ token });
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.ol}
->
-	<ol class={streamdown.theme.ol.base}>
-		{@render children()}
-	</ol>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.List;
-};
-declare const Ol: import("svelte").Component<$$ComponentProps, {}, "">;
-type Ol = ReturnType<typeof Ol>;
-export default Ol;

package/dist/Elements/P.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Paragraph;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.p}
->
-	<p class={streamdown.theme.p.base}>
-		{@render children()}
-	</p>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Paragraph;
-};
-declare const P: import("svelte").Component<$$ComponentProps, {}, "">;
-type P = ReturnType<typeof P>;
-export default P;

package/dist/Elements/Strong.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: Tokens.Strong;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.strong}
->
-	<strong class={streamdown.theme.strong.base}>
-		{@render children()}
-	</strong>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: Tokens.Strong;
-};
-declare const Strong: import("svelte").Component<$$ComponentProps, {}, "">;
-type Strong = ReturnType<typeof Strong>;
-export default Strong;

package/dist/Elements/Sub.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: any;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.sub}
->
-	<sub class={streamdown.theme.sub.base}>
-		{@render children()}
-	</sub>
-</Slot>

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

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: any;
-};
-declare const Sub: import("svelte").Component<$$ComponentProps, {}, "">;
-type Sub = ReturnType<typeof Sub>;
-export default Sub;

package/dist/Elements/Sup.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import { clsx } from 'clsx';
-	import Slot from './Slot.svelte';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: any;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.sup}
->
-	<sup class={streamdown.theme.sup.base}>
-		{@render children()}
-	</sup>
-</Slot>

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

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: any;
-};
-declare const Sup: import("svelte").Component<$$ComponentProps, {}, "">;
-type Sup = ReturnType<typeof Sup>;
-export default Sup;

package/dist/Elements/Tbody.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children
-	}: {
-		children: Snippet;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children
-	}}
-	render={streamdown.snippets.tbody}
->
-	<tbody class={streamdown.theme.tbody.base}>
-		{@render children()}
-	</tbody>
-</Slot>

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

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-};
-declare const Tbody: import("svelte").Component<$$ComponentProps, {}, "">;
-type Tbody = ReturnType<typeof Tbody>;
-export default Tbody;

package/dist/Elements/Td.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { TableCell } from '../marked/index.js';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		token
-	}: {
-		children: Snippet;
-		token: TableCell;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.td}
->
-	<td class={streamdown.theme.td.base}>
-		{@render children?.()}
-	</td>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { TableCell } from '../marked/index.js';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    token: TableCell;
-};
-declare const Td: import("svelte").Component<$$ComponentProps, {}, "">;
-type Td = ReturnType<typeof Td>;
-export default Td;

package/dist/Elements/Th.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
-	import Slot from './Slot.svelte';
-	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
-
-	const streamdown = useStreamdown();
-
-	const {
-		children,
-		cell
-	}: {
-		children: Snippet;
-		cell: Tokens.TableCell;
-	} = $props();
-</script>
-
-<Slot
-	props={{
-		children,
-		cell
-	}}
-	render={streamdown.snippets.th}
->
-	<th class={streamdown.theme.th.base}>
-		{@render children()}
-	</th>
-</Slot>

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

@@ -1,9 +0,0 @@
-import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    cell: Tokens.TableCell;
-};
-declare const Th: import("svelte").Component<$$ComponentProps, {}, "">;
-type Th = ReturnType<typeof Th>;
-export default Th;