# Microblogging Post Creator

## Example

```svelte
<script lang="ts">
	import {
		MicrobloggingPostCreator,
		createBlueskyMentionSearch,
		type MicrobloggingPostContent,
		type Embed,
		type ImageData,
		EmbedRouter,
		EmbedImage,
		Box
	} from '@foxui/all';
	import Avatar from '../../../../../../../packages/core/src/lib/components/avatar/Avatar.svelte';

	let content: MicrobloggingPostContent = $state({ text: '', json: { type: 'doc' } });
	type EmbedItem =
		| { type: 'image'; image: ImageData }
		| { type: 'video'; embed: Embed }
		| { type: 'link'; embed: Embed };

	let embeds: EmbedItem[] = $state([]);

	const searchMentions = createBlueskyMentionSearch();

	function removeEmbed(index: number) {
		embeds = embeds.filter((_, i) => i !== index);
	}
</script>

<Box class="not-prose gap-4">
	<div class="flex w-full gap-4">
		<Avatar src="https://github.com/flo-bit.png" />
		<MicrobloggingPostCreator
			bind:content
			{searchMentions}
			textEditorClass="max-h-48 overflow-y-scroll min-h-24"
			class="grow"
			onlinkadded={(e) => {
				if (!embeds.some((em) => em.type === 'link' && em.embed.type === 'external' && em.embed.external.href === e.href)) {
					embeds = [
						...embeds,
						{
							type: 'link',
							embed: {
								type: 'external',
								external: { href: e.href, thumb: '', title: e.text, description: '' }
							}
						}
					];
				}
			}}
			onimageadded={(files) => {
				const newEmbeds: EmbedItem[] = files.map((f) => {
					const url = URL.createObjectURL(f);
					return { type: 'image', image: { alt: f.name, thumb: url, fullsize: url } };
				});
				embeds = [...embeds, ...newEmbeds];
			}}
			onvideoadded={(files) => {
				for (const f of files) {
					const url = URL.createObjectURL(f);
					embeds = [
						...embeds,
						{
							type: 'video',
							embed: { type: 'video', video: { playlist: url, thumb: '', alt: f.name } }
						}
					];
				}
			}}
		>
			{#if embeds.length > 0}
				<div class="mt-2 flex flex-col gap-2">
					{#each embeds as item, i}
						<div class="relative">
							{#if item.type === 'image'}
								<EmbedImage image={item.image} />
							{:else}
								<EmbedRouter embed={item.embed} />
							{/if}
							<button
								type="button"
								class="bg-base-900/60 hover:bg-base-900/80 absolute top-2 right-2 z-10 cursor-pointer rounded-full p-1 text-white"
								onclick={() => removeEmbed(i)}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
									stroke-width="2"
									stroke="currentColor"
									class="size-4"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										d="M6 18 18 6M6 6l12 12"
									/>
								</svg>
							</button>
						</div>
					{/each}
				</div>
			{/if}
		</MicrobloggingPostCreator>
	</div>
</Box>
```

## Documentation

## Usage

```svelte
<script lang="ts">
	import {
		MicrobloggingPostCreator,
		createBlueskyMentionSearch,
		type MicrobloggingPostContent
	} from '@foxui/social';

	let content: MicrobloggingPostContent = $state({ text: '', json: { type: 'doc' } });
</script>

<MicrobloggingPostCreator
	bind:content
	searchMentions={createBlueskyMentionSearch()}
	maxLength={300}
/>
```

## Features

- **@mentions** - Provide a `searchMentions` function to enable mention support. Type `@` followed by at least 2 characters to trigger the search popup.
- **Links** - URLs are automatically detected and linked.
- **#hashtags** - Hashtags are visually highlighted in the editor.
- **Embeds** - When a link is added and no embed exists, the `embed` prop is automatically set to `{ type: 'link', url, text }`. Provide an `embedPreview` snippet to render it.
- **Character count** - Shows remaining characters with color indicators (amber < 20, red when over limit).

## Bluesky Integration

Use the provided helpers for Bluesky:

```svelte
<script lang="ts">
	import {
		MicrobloggingPostCreator,
		createBlueskyMentionSearch,
		editorJsonToBlueskyPost,
		type MicrobloggingPostContent
	} from '@foxui/social';

	let content: MicrobloggingPostContent = $state({ text: '', json: { type: 'doc' } });

	// Convert to Bluesky format when posting
	function post() {
		const blueskyContent = editorJsonToBlueskyPost(content.json);
		// blueskyContent.text + blueskyContent.facets
	}
</script>

<MicrobloggingPostCreator
	bind:content
	searchMentions={createBlueskyMentionSearch()}
/>
```

## Embeds

Bind the `embed` prop and provide an `embedPreview` snippet to show embed previews:

```svelte
<script lang="ts">
	import { MicrobloggingPostCreator } from '@foxui/social';

	let embed = $state();
</script>

<MicrobloggingPostCreator bind:embed>
	{#snippet embedPreview({ embed, removeEmbed })}
		<div class="flex items-center gap-2 rounded-xl border p-3">
			<span class="flex-1 truncate text-sm">{embed.url}</span>
			<button onclick={removeEmbed}>Remove</button>
		</div>
	{/snippet}
</MicrobloggingPostCreator>
```

## API Reference

### MicrobloggingPostCreator
A platform-agnostic microblogging post editor with support for @mentions, auto-linked URLs, #hashtags, and embeds. Includes Bluesky helpers for easy integration.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| content | `{ text: string; json: JSONContent }` | `-` | The post content with plain text and editor JSON. (bindable) |
| placeholder | `string` | `"What's on your mind?"` | Placeholder text shown when the editor is empty. |
| maxLength | `number` | `300` | Maximum character count. A counter is displayed that changes color as the limit approaches. |
| searchMentions | `(query: string) => Promise<MentionItem[]>` | `-` | Async function to search for mentionable users. When provided, enables @mention support with a popup menu. Use `createBlueskyMentionSearch()` for Bluesky. |
| embed | `unknown` | `-` | The current embed data. Automatically populated with `{ type: "link", url, text }` when a link is added and no embed exists yet. (bindable) |
| onlinkadded | `(event: LinkAddedEvent) => void` | `-` | Callback invoked when a link is added to the editor. Receives `{ href, text, editor }`. |
| embedPreview | `Snippet<[{ embed: unknown; removeEmbed: () => void }]>` | `-` | Snippet to render the embed preview below the editor. |
| mentionItem | `Snippet<[{ item: MentionItem; isActive: boolean; select: () => void }]>` | `-` | Custom snippet for rendering mention menu items. Falls back to a default with avatar and display name. |
| onupdate | `(content: MicrobloggingPostContent) => void` | `-` | Callback invoked whenever the post content changes. |
| editor | `Readable<Editor>` | `-` | The underlying tiptap editor instance (svelte-tiptap store). (bindable) |
| ref | `HTMLDivElement` | `-` | Reference to the container element. (bindable) |
| class | `string` | `-` | Additional CSS classes for the container. |