blog embeds

src/lib/components/rich-text-editor/RichTextEditor.svelte

···
 	import './code.css';
 	import { cn } from '@foxui/core';
 	import { ImageUploadNode } from './image-upload/ImageUploadNode';
+	import { EmbedNode } from './embed/EmbedNode';
 	import { Transaction } from '@tiptap/pm/state';
 
 	let {
···
 						!editor.view.state.selection.empty &&
 						!editor.isActive('codeBlock') &&
 						!editor.isActive('link') &&
-						!editor.isActive('imageUpload')
+						!editor.isActive('imageUpload') &&
+						!editor.isActive('embed')
 					);
 				},
 				pluginKey: 'bubble-menu-marks'
···
 			}),
 			Typography.configure(),
 			Markdown.configure(),
-			ImageUploadNode.configure({})
+			ImageUploadNode.configure({}),
+			EmbedNode.configure({})
 		];
 
 		editor = new Editor({
···
 		:global(div[data-type='image-upload']) {
 			&.ProseMirror-selectednode {
 				outline: 3px solid var(--color-accent-500);
+			}
+		}
+
+		:global(div[data-type='embed']) {
+			&.ProseMirror-selectednode {
+				outline: 3px solid var(--color-accent-500);
+				border-radius: 0.75rem;
 			}
 		}
 

src/lib/components/rich-text-editor/embed/EmbedNode.ts

···
+import { Node, mergeAttributes } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import { matchEmbed } from '$lib/embeds';
+import EmbedNodeComponent from './EmbedNodeComponent.svelte';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		embed: {
+			setEmbed: (options: { url: string }) => ReturnType;
+		};
+	}
+}
+
+export const EmbedNode = Node.create({
+	name: 'embed',
+	group: 'block',
+	atom: true,
+	draggable: true,
+	selectable: true,
+	inline: false,
+
+	addAttributes() {
+		return {
+			url: { default: null },
+			embedType: { default: null },
+			embedData: { default: null }
+		};
+	},
+
+	addCommands() {
+		return {
+			setEmbed:
+				({ url }) =>
+				({ commands }) => {
+					const match = matchEmbed(url);
+					if (!match) return false;
+					return commands.insertContent({
+						type: this.name,
+						attrs: {
+							url,
+							embedType: match.type,
+							embedData: JSON.stringify(match)
+						}
+					});
+				}
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: 'div[data-type="embed"]' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ['div', mergeAttributes({ 'data-type': 'embed' }, HTMLAttributes)];
+	},
+
+	addNodeView() {
+		return SvelteNodeViewRenderer(EmbedNodeComponent);
+	},
+
+	// Markdown integration for @tiptap/markdown
+	// These fields are read by the Markdown extension via getExtensionField()
+
+	markdownTokenName: 'embedUrl',
+
+	markdownTokenizer: {
+		name: 'embedUrl',
+		level: 'block' as const,
+		tokenize(src: string) {
+			const match = src.match(/^(https?:\/\/\S+)\s*(?:\n|$)/);
+			if (!match) return undefined;
+
+			const url = match[1];
+			const embedMatch = matchEmbed(url);
+			if (!embedMatch) return undefined;
+
+			return {
+				type: 'embedUrl',
+				raw: match[0],
+				url,
+				embedType: embedMatch.type,
+				embedData: embedMatch
+			};
+		}
+	},
+
+	parseMarkdown(
+		token: { url: string; embedType: string; embedData: Record<string, unknown> },
+		helpers: { createNode: (type: string, attrs: Record<string, unknown>) => unknown }
+	) {
+		return helpers.createNode('embed', {
+			url: token.url,
+			embedType: token.embedType,
+			embedData: JSON.stringify(token.embedData)
+		});
+	},
+
+	renderMarkdown(node: { attrs?: { url?: string } }) {
+		return (node.attrs?.url ?? '') + '\n';
+	},
+
+	addProseMirrorPlugins() {
+		const nodeType = this.type;
+
+		return [
+			new Plugin({
+				key: new PluginKey('embed-auto-detect'),
+				appendTransaction(transactions, _oldState, newState) {
+					const docChanged = transactions.some((tr) => tr.docChanged);
+					if (!docChanged) return null;
+
+					const tr = newState.tr;
+					let modified = false;
+
+					newState.doc.descendants((node, pos) => {
+						if (modified) return false;
+						if (node.type.name !== 'paragraph') return;
+						if (node.childCount !== 1) return;
+
+						const child = node.firstChild;
+						if (!child || !child.isText) return;
+
+						const text = child.text?.trim();
+						if (!text) return;
+
+						// Check if the text (possibly with a link mark) is a bare URL
+						const urlMatch = text.match(/^(https?:\/\/\S+)$/);
+						if (!urlMatch) return;
+
+						const url = urlMatch[1];
+						const embed = matchEmbed(url);
+						if (!embed) return;
+
+						// Only convert when cursor is NOT inside this paragraph
+						const sel = newState.selection;
+						const nodeEnd = pos + node.nodeSize;
+						if (sel.from >= pos && sel.from <= nodeEnd) return;
+
+						const embedNode = nodeType.create({
+							url,
+							embedType: embed.type,
+							embedData: JSON.stringify(embed)
+						});
+
+						tr.replaceWith(pos, nodeEnd, embedNode);
+						modified = true;
+					});
+
+					return modified ? tr : null;
+				}
+			})
+		];
+	}
+});

src/lib/components/rich-text-editor/embed/EmbedNodeComponent.svelte

···
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core';
+	import { NodeViewWrapper } from 'svelte-tiptap';
+	import { getEmbedDefinition } from '$lib/embeds';
+
+	let props: NodeViewProps = $props();
+
+	let url = $derived(props.node.attrs.url as string);
+	let embedType = $derived(props.node.attrs.embedType as string);
+	let embedData = $derived.by(() => {
+		try {
+			return JSON.parse(props.node.attrs.embedData || '{}');
+		} catch {
+			return {};
+		}
+	});
+
+	let definition = $derived(getEmbedDefinition(embedType));
+</script>
+
+<NodeViewWrapper data-type="embed" class="my-4">
+	{#if definition}
+		<div class="not-prose group relative">
+			<definition.component {url} data={embedData} />
+			{#if props.editor.isEditable}
+				<div class="absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100">
+					<button
+						onclick={() => props.deleteNode()}
+						class="rounded-lg bg-black/60 p-1.5 text-white transition-colors hover:bg-black/80"
+						title="Remove embed"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							class="size-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<div class="bg-base-100 dark:bg-base-800 text-base-500 rounded-xl p-4 text-sm">
+			Unsupported embed: <a href={url} target="_blank" rel="noopener noreferrer" class="underline"
+				>{url}</a
+			>
+		</div>
+	{/if}
+</NodeViewWrapper>

src/lib/embeds/BlogContent.svelte

···
+<script lang="ts">
+	import { marked, type Renderer } from 'marked';
+	import { sanitize } from '$lib/sanitize';
+	import { parseContentSegments, getEmbedDefinition } from '$lib/embeds';
+
+	let {
+		content,
+		renderer
+	}: {
+		content: string;
+		renderer: Renderer;
+	} = $props();
+
+	let segments = $derived(parseContentSegments(content));
+</script>
+
+{#each segments as segment, i (segment.kind === 'embed' ? `embed-${i}` : `md-${i}`)}
+	{#if segment.kind === 'markdown'}
+		{@html sanitize(marked.parse(segment.text, { renderer }) as string, {
+			ADD_ATTR: ['target']
+		})}
+	{:else if segment.kind === 'embed'}
+		{@const definition = getEmbedDefinition(segment.type)}
+		{#if definition}
+			<div class="not-prose my-6">
+				<definition.component url={segment.url} data={segment.data} />
+			</div>
+		{/if}
+	{/if}
+{/each}

src/lib/embeds/YouTubeEmbed.svelte

···
+<script lang="ts">
+	import type { EmbedComponentProps } from './types';
+
+	let { data }: EmbedComponentProps = $props();
+
+	let videoId = $derived(data.videoId as string);
+	let poster = $derived(data.poster as string);
+	let isPlaying = $state(false);
+</script>
+
+{#if isPlaying}
+	<div class="relative aspect-video w-full overflow-hidden rounded-xl">
+		<iframe
+			class="absolute inset-0 h-full w-full"
+			src="https://www.youtube.com/embed/{videoId}?autoplay=1"
+			title="YouTube video player"
+			frameborder="0"
+			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+			allowfullscreen
+		></iframe>
+	</div>
+{:else}
+	<button
+		onclick={() => (isPlaying = true)}
+		class="group relative aspect-video w-full cursor-pointer overflow-hidden rounded-xl"
+	>
+		<img
+			class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-102"
+			src={poster}
+			alt="YouTube video thumbnail"
+		/>
+		<div class="absolute inset-0 flex items-center justify-center">
+			<svg xmlns="http://www.w3.org/2000/svg" class="w-16 drop-shadow-lg" viewBox="0 0 256 180">
+				<path
+					fill="#f00"
+					d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
+				/>
+				<path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" />
+			</svg>
+		</div>
+	</button>
+{/if}

src/lib/embeds/index.ts

···
+import type { EmbedDefinition } from './types';
+import { youtubeEmbed } from './youtube';
+
+/**
+ * Registry of all embed definitions. To add a new embed type,
+ * import its definition and add it to this array.
+ */
+export const embedDefinitions: EmbedDefinition[] = [youtubeEmbed];
+
+/**
+ * Try to match a URL against all registered embed definitions.
+ * Returns the first match with { type, url, ...data }, or null.
+ */
+export function matchEmbed(
+	url: string
+): ({ type: string; url: string } & Record<string, unknown>) | null {
+	for (const def of embedDefinitions) {
+		const data = def.match(url);
+		if (data) {
+			return { type: def.type, url, ...data };
+		}
+	}
+	return null;
+}
+
+/**
+ * Get the embed definition for a given type string.
+ */
+export function getEmbedDefinition(type: string): EmbedDefinition | undefined {
+	return embedDefinitions.find((d) => d.type === type);
+}
+
+export type ContentSegment =
+	| { kind: 'markdown'; text: string }
+	| { kind: 'embed'; type: string; url: string; data: Record<string, unknown> };
+
+const BARE_URL_LINE = /^\s*(https?:\/\/\S+)\s*$/;
+
+/**
+ * Parse a markdown string into segments, splitting out embeddable URLs.
+ * Lines that are just a bare URL matching an embed definition become embed segments.
+ * Consecutive non-embed lines are grouped into markdown segments.
+ */
+export function parseContentSegments(markdown: string): ContentSegment[] {
+	const lines = markdown.split('\n');
+	const segments: ContentSegment[] = [];
+	let buffer: string[] = [];
+
+	function flush() {
+		if (buffer.length > 0) {
+			segments.push({ kind: 'markdown', text: buffer.join('\n') });
+			buffer = [];
+		}
+	}
+
+	for (const line of lines) {
+		const urlMatch = line.match(BARE_URL_LINE);
+		if (urlMatch) {
+			const url = urlMatch[1];
+			const embed = matchEmbed(url);
+			if (embed) {
+				flush();
+				segments.push({ kind: 'embed', type: embed.type, url: embed.url, data: embed });
+				continue;
+			}
+		}
+		buffer.push(line);
+	}
+
+	flush();
+	return segments;
+}
+
+export type { EmbedDefinition, EmbedComponentProps } from './types';

src/lib/embeds/types.ts

···
+import type { Component } from 'svelte';
+
+export type EmbedComponentProps = {
+	url: string;
+	data: Record<string, unknown>;
+};
+
+export type EmbedDefinition = {
+	/** Unique identifier, e.g. 'youtube', 'spotify' */
+	type: string;
+	/** Attempt to match a URL. Return provider-specific data on success, or null on failure. */
+	match: (url: string) => Record<string, unknown> | null;
+	/** Svelte component used to render the embed. Receives EmbedComponentProps. */
+	component: Component<EmbedComponentProps>;
+};

src/lib/embeds/youtube.ts

···
+import { matcher } from '$lib/cards/media/YoutubeVideoCard/index';
+import YouTubeEmbed from './YouTubeEmbed.svelte';
+import type { EmbedDefinition } from './types';
+
+export const youtubeEmbed: EmbedDefinition = {
+	type: 'youtube',
+	match: (url: string) => {
+		const id = matcher(url);
+		if (!id) return null;
+		return {
+			videoId: id,
+			poster: `https://i.ytimg.com/vi/${id}/hqdefault.jpg`
+		};
+	},
+	component: YouTubeEmbed
+};

src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte

···
 	import { getCDNImageBlobUrl } from '$lib/atproto';
 	import { Avatar as FoxAvatar } from '@foxui/core';
 	import { marked } from 'marked';
-	import { sanitize } from '$lib/sanitize';
 	import { all, createLowlight } from 'lowlight';
+	import BlogContent from '$lib/embeds/BlogContent.svelte';
 
 	const lowlight = createLowlight(all);
 
···
 			<article
 				class="prose dark:prose-invert prose-base prose-neutral prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-img:rounded-xl max-w-none"
 			>
-				{@html sanitize(marked.parse(content.value, { renderer }) as string, {
-					ADD_ATTR: ['target']
-				})}
+				<BlogContent content={content.value} {renderer} />
 			</article>
 		{:else}
 			<div class="py-4">