Microblogging Post Creator

Example

300

Usage

		<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:

		<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:

		<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.

Property Type Description

content $bindable

object

The post content with plain text and editor JSON. Default: —

placeholder

string

Placeholder text shown when the editor is empty. Default: "What's on your mind?"

maxLength

number

Maximum character count. A counter is displayed that changes color as the limit approaches. Default: 300

searchMentions

function

Async function to search for mentionable users. When provided, enables @mention support with a popup menu. Use `createBlueskyMentionSearch()` for Bluesky. Default: —

embed $bindable

unknown

The current embed data. Automatically populated with `{ type: "link", url, text }` when a link is added and no embed exists yet. Default: —

onlinkadded

function

Callback invoked when a link is added to the editor. Receives `{ href, text, editor }`. Default: —

embedPreview

snippet

Snippet to render the embed preview below the editor. Default: —

mentionItem

snippet

Custom snippet for rendering mention menu items. Falls back to a default with avatar and display name. Default: —

onupdate

function

Callback invoked whenever the post content changes. Default: —

editor $bindable

object

The underlying tiptap editor instance (svelte-tiptap store). Default: —

ref $bindable

HTMLDivElement

Reference to the container element. Default: —

class

string

Additional CSS classes for the container. Default: —

Property

content

placeholder

maxLength

searchMentions

embed

onlinkadded

embedPreview

mentionItem

onupdate

editor

ref

class