### Hashtag Plugin

The Hashtag plugin highlights `#hashtag` text in content. Configure the viewer to make hashtags clickable links to a search page.

> **Note:** Hashtags are not stored as a content decoration. The plugin works by scanning text nodes with a regex at render time, so any text matching the hashtag pattern is automatically highlighted.

#### Editor

```tsx widget
import { pluginHashtag, RicosEditor } from '@wix/ricos';
import React from 'react';

export default () => {
  // @essential-start
  return <RicosEditor placeholder={'Add hashtag by typing # first'} plugins={[pluginHashtag()]} />;
  // @essential-end
};
```

##### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">HashtagPluginEditorConfig</span>

Configuration for the Hashtag editor plugin. Currently has no options — pass none.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> HashtagPluginEditorConfig</code>

<dl class="pl-4 border-l-2 border-slate-200">

</dl>

#### Viewer

```tsx widget
import '@wix/ricos/css/plugin-hashtag-viewer.global.css';
import '@wix/ricos/css/ricos-viewer.global.css';
import type { RichContent } from '@wix/ricos';
import { pluginHashtagViewer, RicosViewer } from '@wix/ricos';
import React from 'react';

export default () => {
  return (
    // @essential-start
    <RicosViewer
      content={content}
      plugins={[
        pluginHashtagViewer({
          onClick: () => {
            alert('This is example of optional Hashtag click handler');
          },
        }),
      ]}
    />
    // @essential-end
  );
};

const content = {
  nodes: [
    {
      type: 'PARAGRAPH',
      id: 'ao9ao137',
      nodes: [
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'Some simple #hashtag example',
          },
        },
      ],
    },
  ],
} as RichContent;
```

##### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">HashtagPluginViewerConfig</span>

Configuration for the Hashtag viewer plugin. Pass to `pluginHashtagViewer()`.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> HashtagPluginViewerConfig</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>createHref</strong><span class="text-slate-400">?</span>: (text: string) =&gt; string</code></dt>
<dd><p>Converts hashtag text to a URL. When provided, hashtags are rendered as anchor links. Receives the hashtag text without the `#` prefix.</p></dd>
<dt><code><strong>onClick</strong><span class="text-slate-400">?</span>: (event: React.MouseEvent&lt;HTMLElement&gt; | React.KeyboardEvent&lt;HTMLElement&gt;, text: string) =&gt; void</code></dt>
<dd><p>Callback fired when a user clicks (or presses Enter/Space on) a hashtag in the viewer. Receives the click event and the hashtag text.</p></dd>
</dl>
