99 lines
2.4 KiB
Markdown
99 lines
2.4 KiB
Markdown
|
# @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
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { createAngularContentTokens } from "@hublib-web/content-suggestions/angular";
|
||
|
|
|
||
|
|
const tokens = createAngularContentTokens(text);
|
||
|
|
```
|
||
|
|
|
||
|
|
## 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
|
||
|
|
```
|