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

Prop	Type	Description	Optional
text	string	The text content to be rendered. Can be plain text or HTML markup.	❌
richText	boolean	Determines if the text should be rendered as HTML (true) or plain text (false).	❌
opensInNewWindowLabel	string	Custom label for links that open in new windows. Defaults to ” (Opens in new window)”.	✅

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)

• Wrapping Standalone Links:

  • Wraps standalone <a> tags in <p> elements when they’re not inside block-level elements
  • Example: <a href="...">Link</a> → <p><a href="...">Link</a></p>

• CSS Class Addition:

  • <a> → <a class="tng-link is-neutral">
  • <h1-h6> → <h1-h6 class="tng-text-title">
  • <table> → <table class="tng-table">
  • <ul> → <ul class="tng-plain-list">
  • <ol> → <ol class="tng-plain-list">
  • <p> → <p class="tng-text-body">

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 class
  • Uses dangerouslySetInnerHTML to inject the transformed HTML

• Plain Text Mode (richText: false):

  • Renders content in a <div> with tng-content class
  • 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}
      opensInNewWindowLabel=" (Opens in new window)"
    />
  );
};

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

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):

<strong>Bold text</strong> with <em>italic</em> and
<a class="tng-link 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>

Additional Resources

• Storybook Demo: TBD