Text Component

Description

The AEM Text Component is used to render text content with support for both plain text and rich text (HTML) formats. The component automatically applies multiple transformations to ensure proper HTML structure, accessibility, and styling consistency.

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)”.	✅
textColor	TextColor	Foreground utility class applied to the container (for example fg-default, fg-muted, fg-error-*).	✅
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 textColor, 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 textColor, 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}
      textColor="fg-subtle"
      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