# @hublib-web/content-suggestions

Cross-framework content text/title renderer with support for mentions, tags and links.

## Features

- Shared parser in `core` (`findAllEntities`, `findMentions`, `findTags`, `findLinks`).
- React UI components in `react`:
  - `ContentText`
  - `ContentTextWithSuggestions`
  - `ContentTitleWithSuggestions`
- Angular adapter in `angular` for rendering/tokenization integration.
- Depends on `@hublib-web/tach-typography` for visual consistency.
- Business logic (API requests for mentions/tags) stays in consumer application.

## Install from Git (SSH tag)

```bash
yarn add "@hublib-web/content-suggestions@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/content-suggestions&tag=content-suggestions-v0.1.0"
```

`@hublib-web/tach-typography` is a peer dependency, so install a compatible tag for it as well.

## Install inside this monorepo

```bash
yarn add @hublib-web/content-suggestions
```

## Release this package

1. Bump `version` in `packages/content-suggestions/package.json`.
2. Build package artifacts:

```bash
yarn workspace @hublib-web/content-suggestions build
```

3. Commit release files:

```bash
git add packages/content-suggestions/package.json packages/content-suggestions/dist
git commit -m "release(content-suggestions): v0.1.0"
```

4. Create and push tag:

```bash
git tag -a content-suggestions-v0.1.0 -m "@hublib-web/content-suggestions v0.1.0"
git push origin main --follow-tags
```

Detailed docs:

- [Release policy](../../docs/release-policy.md)
- [Git installation](../../docs/git-installation.md)

## React usage

```tsx
import { ContentTextWithSuggestions } from "@hublib-web/content-suggestions/react";

<ContentTextWithSuggestions text={text} />;
```

With app-specific mention business logic:

```tsx
<ContentTextWithSuggestions
  text={text}
  renderMention={(entity) => <MyMention entity={entity} />}
  renderTag={(entity) => <MyTagLink entity={entity} />}
/>;
```

By default, tags are rendered as plain styled text (not links).

## Angular usage

Tokenization helper:

```ts
import { createAngularContentTokens } from "@hublib-web/content-suggestions/angular";

const tokens = createAngularContentTokens(text);
```

Ready-to-use UI renderer (React-like props API):

```ts
import { AngularContentTextWithSuggestionsRenderer } from "@hublib-web/content-suggestions/angular";

const renderer = new AngularContentTextWithSuggestionsRenderer();
renderer.attach(containerElement, {
  text,
  weight: "normal",
  ellipsis: { count: 180, expandable: true },
  blur: false,
  onView: () => {
    // analytics
  },
});
```

Title variant with defaults (`weight: "bold"`, `ellipsis: { rows: 2 }`):

```ts
import { AngularContentTitleWithSuggestionsRenderer } from "@hublib-web/content-suggestions/angular";

const titleRenderer = new AngularContentTitleWithSuggestionsRenderer();
titleRenderer.attach(titleContainer, { text: title });
```

## Storybook (dev/design system)

Run from repository root:

```bash
yarn workspace @hublib-web/content-suggestions storybook
```

Build static Storybook:

```bash
yarn workspace @hublib-web/content-suggestions storybook:build
```