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)

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

yarn add @hublib-web/content-suggestions

Release this package

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

yarn workspace @hublib-web/content-suggestions build

Commit release files:

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

Create and push tag:

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

Detailed docs:

React usage

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

<ContentTextWithSuggestions text={text} />;

With app-specific mention business logic:

<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

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

const tokens = createAngularContentTokens(text);

Storybook (dev/design system)

Run from repository root:

yarn workspace @hublib-web/content-suggestions storybook

Build static Storybook:

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