React

Properties

Text component extends HTMLAttributes<HTMLDivElement> and adds component-specific props for content rendering and typography styling.

Prop	Type	Description	Optional
text	string	The text content to be rendered. Can be plain text or HTML markup.	❌
richText	boolean	Renders text as transformed HTML when true, or as plain text when false. Default: false.	✅
opensInNewWindowLabel	string	Accessible label appended to links that open in a new tab/window. Default: “ (Opens in new window)“.	✅
fontSize	FontSize	Typography size class applied to the container (is-1 … is-8). Default: is-6.	✅
classNameContainer	ClassValue	Additional class names merged onto the root .tng-content container.	✅

Text Transformations

The component applies a series of transformations to the text content:

1. HTML Tag Replacement

Converts and normalizes HTML tags to ensure semantic correctness and consistent styling:

• Tag Conversions:

  • <i> → <em> (italic to emphasis)
  • <b> → <strong> (bold to strong)

• CSS Class Addition:

  • <a> → <a class="is-neutral">

2. Link Modifications

Enhances links with accessibility features and visual indicators:

File Download Detection

• Detects links pointing to DAM assets (/content/dam)
• Extracts file extension from the href
• Adds screenreader-only text with download information
• Example: For a PDF link, adds: <span class="sr-only">download (pdf)</span>

External Link Indicators

• Detects links with target="_blank" attribute
• Adds visual icon for external links: <i class="tng-icon icon-external-link" aria-hidden="true"></i>
• Adds screenreader-only text: <span class="sr-only">(Opens in new window)</span>
• The label is customizable via the opensInNewWindowLabel prop

Rendering Behavior

• Rich Text Mode (richText: true):

  • Renders content in a <div> with tng-content plus optional fontSize, and classNameContainer classes
  • Uses dangerouslySetInnerHTML to inject the transformed HTML

• Plain Text Mode (richText: false):

  • Renders content in a <div> with tng-content plus optional fontSize, and classNameContainer classes
  • Wraps text in a <p> element with tng-text-body class

Examples

import { TextComponent } from '@tmedxp/aem-react-components';

const RichTextExample = () => {
  return (
    <TextComponent
      text="<p>Visit our <a href='https://example.com' target='_blank'>website</a> or <a href='/content/dam/document.pdf'>download the PDF</a>.</p>"
      richText={true}
      fontSize="is-8"
      classNameContainer="gap-xl"
      opensInNewWindowLabel=" (Opens in new window)"
    />
  );
};

const PlainTextExample = () => {
  return (
    <TextComponent
      text="This is a simple text content."
      richText={false}
      fontSize="is-7"
    />
  );
};

export { PlainTextExample, RichTextExample };

Output Examples

Input:

<b>Bold text</b> with <i>italic</i> and
<a href="https://example.com" target="_blank">external link</a>

Output (after transformations):

<div class="tng-content fg-default is-8 gap-xl">
  <strong>Bold text</strong> with <em>italic</em> and
  <a class="is-neutral" href="https://example.com" target="_blank"
    >external link<span class="sr-only"> (Opens in new window)</span
    ><i class="tng-icon icon-external-link" aria-hidden="true"></i
  ></a>
</div>

Additional Resources

• Storybook Demo: TBD