# Hashtag Decoration

## Example

```svelte
<script lang="ts">
	import { CoreRichTextEditor, HashtagDecoration, Box, type SvelteTiptap } from '@foxui/all';
	import type { Readable } from 'svelte/store';

	let editor = $state<Readable<SvelteTiptap.Editor>>();
</script>

<Box class="not-prose">
	<CoreRichTextEditor
		bind:editor
		extraExtensions={[HashtagDecoration]}
		placeholder="Try typing #hello or #svelte..."
		class="min-h-24"
		content={{
			type: 'doc',
			content: [
				{
					type: 'paragraph',
					content: [
						{
							type: 'text',
							text: 'Check out #svelte and #tiptap for building rich text editors!'
						}
					]
				}
			]
		}}
	/>
</Box>

<style>
	:global(.hashtag) {
		color: var(--color-accent-600);
		font-weight: 500;
	}
	:global(.dark .hashtag) {
		color: var(--color-accent-400);
	}
</style>
```

## Documentation

## Usage

`HashtagDecoration` highlights `#hashtags` in the editor with a CSS class. Add it via `extraExtensions` and style the `.hashtag` class.

```svelte
<script lang="ts">
	import { CoreRichTextEditor, HashtagDecoration } from '@foxui/text';
</script>

<CoreRichTextEditor
	extraExtensions={[HashtagDecoration]}
	placeholder="Try typing #hello..."
/>

<style>
	:global(.hashtag) {
		color: var(--color-accent-600);
		font-weight: 500;
	}
</style>
```

## How it works

`HashtagDecoration` is a tiptap Extension that creates ProseMirror decorations for hashtag patterns. It scans text nodes for `#word` patterns and applies `class="hashtag"` as an inline decoration.

The regex supports:
- Standard ASCII letters and digits: `#hello`, `#tag123`
- International characters: `#café`, `#über`, `#naïve`

Hashtags must start with a letter after the `#` — `#123` won't match.

## Styling

The extension only adds the `hashtag` CSS class — you control the visual style. Some examples:

```css
/* Accent color */
:global(.hashtag) {
	color: var(--color-accent-600);
}

/* Blue with background */
:global(.hashtag) {
	color: #2563eb;
	background: #2563eb15;
	border-radius: 4px;
	padding: 0 2px;
}
```

## API Reference

### HashtagDecoration
A tiptap Extension that decorates #hashtags with a CSS class. Add via extraExtensions and style the .hashtag class.

| Prop | Type | Default | Description |
|------|------|---------|-------------|