@transferwise/components 46.155.1 → 46.156.0

package/src/Markup/Markup.test.tsx

@@ -0,0 +1,502 @@
+import React from 'react';
+
+import { render, screen, userEvent } from '../test-utils';
+
+import { Markup } from './Markup';
+
+describe('Markup', () => {
+  it('renders plain text', () => {
+    render(<Markup>hello world</Markup>);
+    expect(screen.getByText('hello world')).toBeInTheDocument();
+  });
+
+  it('returns null for empty children', () => {
+    const { container } = render(<Markup />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  describe('wrapper element', () => {
+    it('renders in a span wrapper for inline content', () => {
+      render(<Markup>content</Markup>);
+      const element = screen.getByText('content');
+      expect(element.tagName).toBe('SPAN');
+    });
+
+    it('renders in a div wrapper when paragraph nodes are present', () => {
+      const { container } = render(<Markup>{'<p>block content</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('DIV');
+    });
+
+    it('renders in a div wrapper when nested paragraph nodes are present', () => {
+      const { container } = render(
+        <Markup>{'<important><p>nested paragraph</p></important>'}</Markup>,
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('DIV');
+    });
+
+    it('uses span when as="span" even with paragraphs', () => {
+      const { container } = render(<Markup as="span">{'<p>forced span</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('SPAN');
+    });
+
+    it('uses div when as="div" even without paragraphs', () => {
+      const { container } = render(<Markup as="div">inline but div</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('DIV');
+    });
+
+    it('accepts any HTML element via as prop', () => {
+      const { container } = render(<Markup as="section">{'<p>in a section</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('SECTION');
+    });
+
+    it('accepts a React component via as prop', () => {
+      const Card = ({
+        className,
+        children,
+      }: {
+        className?: string;
+        children?: React.ReactNode;
+      }) => (
+        <article data-testid="card" className={className}>
+          {children}
+        </article>
+      );
+      const { container } = render(
+        <Markup as={Card} className="custom">
+          {'<important>inside component</important>'}
+        </Markup>,
+      );
+      expect(screen.getByTestId('card')).toHaveClass('custom');
+      expect(container.querySelector('em')).toHaveTextContent('inside component');
+    });
+
+    it('passes data-testid to the wrapper element', () => {
+      render(<Markup data-testid="markup-wrapper">content</Markup>);
+      expect(screen.getByTestId('markup-wrapper')).toBeInTheDocument();
+    });
+
+    it('applies className to wrapper regardless of element type', () => {
+      render(<Markup className="custom">content</Markup>);
+      expect(screen.getByText('content')).toHaveClass('custom');
+    });
+
+    it('applies className to div wrapper with paragraphs', () => {
+      const { container } = render(<Markup className="block-wrapper">{'<p>paragraph</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('block-wrapper');
+      expect(wrapper.tagName).toBe('DIV');
+    });
+  });
+
+  describe('emphasis', () => {
+    it('renders <important> with correct class', () => {
+      render(<Markup>{'<important>critical</important>'}</Markup>);
+      const element = screen.getByText('critical');
+      expect(element.tagName).toBe('EM');
+      expect(element).toHaveClass('wds-markup-emphasis', 'wds-markup-emphasis--important');
+    });
+
+    it('renders <positive> with correct class', () => {
+      render(<Markup>{'<positive>good</positive>'}</Markup>);
+      expect(screen.getByText('good')).toHaveClass('wds-markup-emphasis--positive');
+    });
+
+    it('renders <negative> with correct class', () => {
+      render(<Markup>{'<negative>bad</negative>'}</Markup>);
+      expect(screen.getByText('bad')).toHaveClass('wds-markup-emphasis--negative');
+    });
+
+    it('treats <warning> as plain text (unsupported tag)', () => {
+      render(<Markup>{'<warning>careful</warning>'}</Markup>);
+      expect(screen.getByText(/<warning>/)).toBeInTheDocument();
+    });
+  });
+
+  describe('links', () => {
+    it('renders a link with href', () => {
+      render(<Markup>{'<link href="/settings">settings</link>'}</Markup>);
+      const link = screen.getByRole('link', { name: 'settings' });
+      expect(link).toHaveAttribute('href', '/settings');
+    });
+
+    it('renders a link with target', () => {
+      render(<Markup>{'<link href="https://wise.com/help" target="_blank">visit</link>'}</Markup>);
+      const link = screen.getByRole('link', { name: /visit/ });
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+
+    it('renders a button-mode link with action', async () => {
+      const handleSave = jest.fn();
+      render(<Markup actions={{ save: handleSave }}>{'<link action="save">Save</link>'}</Markup>);
+      const button = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(button);
+      expect(handleSave).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders as plain text when action handler is missing', () => {
+      render(<Markup>{'<link action="missing">text</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.getByText('text')).toBeInTheDocument();
+    });
+
+    it('renders as plain text when href is unsafe', () => {
+      render(<Markup>{'<link href="javascript:alert(1)">evil</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('evil')).toBeInTheDocument();
+    });
+  });
+
+  describe('nesting', () => {
+    it('renders emphasis inside link', () => {
+      render(<Markup>{'<link href="/x"><important>bold link</important></link>'}</Markup>);
+      const link = screen.getByRole('link');
+      const emphasis = link.querySelector('em');
+      expect(emphasis).toHaveClass('wds-markup-emphasis--important');
+      expect(emphasis).toHaveTextContent('bold link');
+    });
+
+    it('renders link inside emphasis', () => {
+      render(<Markup>{'<important>Read the <link href="/terms">terms</link></important>'}</Markup>);
+      const emphasis = screen.getByText(/Read the/);
+      expect(emphasis.tagName).toBe('EM');
+      const link = screen.getByRole('link', { name: 'terms' });
+      expect(emphasis).toContainElement(link);
+    });
+  });
+
+  describe('strong', () => {
+    it('renders <strong> as a strong element', () => {
+      render(<Markup>{'<strong>bold</strong>'}</Markup>);
+      const element = screen.getByText('bold');
+      expect(element.tagName).toBe('STRONG');
+    });
+  });
+
+  describe('strikethrough', () => {
+    it('renders <strikethrough> as a del element', () => {
+      render(<Markup>{'<strikethrough>removed</strikethrough>'}</Markup>);
+      const element = screen.getByText('removed');
+      expect(element.tagName).toBe('DEL');
+    });
+  });
+
+  describe('paragraph', () => {
+    it('renders <paragraph> as a p element', () => {
+      render(<Markup>{'<paragraph>A paragraph.</paragraph>'}</Markup>);
+      const element = screen.getByText('A paragraph.');
+      expect(element.tagName).toBe('P');
+    });
+
+    it('renders <p> as a p element', () => {
+      render(<Markup>{'<p>Short form.</p>'}</Markup>);
+      const element = screen.getByText('Short form.');
+      expect(element.tagName).toBe('P');
+    });
+  });
+
+  describe('newlines', () => {
+    it('renders newlines as br elements', () => {
+      const { container } = render(<Markup>{'line one\nline two'}</Markup>);
+      expect(container.querySelector('br')).toBeInTheDocument();
+    });
+  });
+
+  describe('non-string children (pass-through)', () => {
+    it('passes through JSX elements unchanged', () => {
+      render(
+        <Markup>
+          <button type="button">Click me</button>
+        </Markup>,
+      );
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('passes through a React component', () => {
+      const Custom = () => <span data-testid="custom">custom component</span>;
+      render(
+        <Markup>
+          <Custom />
+        </Markup>,
+      );
+      expect(screen.getByTestId('custom')).toBeInTheDocument();
+    });
+
+    it('applies className when passing through JSX', () => {
+      const { container } = render(
+        <Markup className="wrapper">
+          <em>styled</em>
+        </Markup>,
+      );
+      expect(container.firstChild).toHaveClass('wrapper');
+    });
+
+    it('returns null for undefined children', () => {
+      const { container } = render(<Markup>{undefined}</Markup>);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('returns null for null children', () => {
+      const { container } = render(<Markup>{null}</Markup>);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('passes through numbers as-is', () => {
+      render(<Markup>{42}</Markup>);
+      expect(screen.getByText('42')).toBeInTheDocument();
+    });
+
+    it('passes through fragment with mixed content', () => {
+      render(
+        <Markup>
+          <>
+            <strong>bold</strong> and text
+          </>
+        </Markup>,
+      );
+      expect(screen.getByText('bold')).toBeInTheDocument();
+      expect(screen.getByText(/and text/)).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibilityLabel', () => {
+    it('applies aria-label to emphasis tags', () => {
+      render(
+        <Markup>{'<important accessibilityLabel="Important notice">critical</important>'}</Markup>,
+      );
+      const element = screen.getByText('critical');
+      expect(element).toHaveAttribute('aria-label', 'Important notice');
+    });
+
+    it('applies aria-label to strong tags', () => {
+      render(<Markup>{'<strong accessibilityLabel="Highlighted">bold</strong>'}</Markup>);
+      expect(screen.getByText('bold')).toHaveAttribute('aria-label', 'Highlighted');
+    });
+
+    it('applies aria-label to strikethrough tags', () => {
+      render(
+        <Markup>
+          {'<strikethrough accessibilityLabel="No longer valid">old price</strikethrough>'}
+        </Markup>,
+      );
+      expect(screen.getByText('old price')).toHaveAttribute('aria-label', 'No longer valid');
+    });
+
+    it('applies aria-label to link tags with href', () => {
+      render(
+        <Markup>
+          {'<link href="/settings" accessibilityLabel="Go to account settings">settings</link>'}
+        </Markup>,
+      );
+      const link = screen.getByRole('link', { name: 'Go to account settings' });
+      expect(link).toBeInTheDocument();
+    });
+
+    it('applies aria-label to button-mode link tags', () => {
+      const handler = jest.fn();
+      render(
+        <Markup actions={{ save: handler }}>
+          {'<link action="save" accessibilityLabel="Save your changes">Save</link>'}
+        </Markup>,
+      );
+      expect(screen.getByRole('button', { name: 'Save your changes' })).toBeInTheDocument();
+    });
+
+    it('does not apply aria-label to paragraph tags', () => {
+      render(<Markup>{'<paragraph accessibilityLabel="ignored">content</paragraph>'}</Markup>);
+      const element = screen.getByText('content');
+      expect(element.tagName).toBe('P');
+      expect(element).not.toHaveAttribute('aria-label');
+    });
+
+    it('does not render aria-label attribute when not provided', () => {
+      render(<Markup>{'<strong>plain bold</strong>'}</Markup>);
+      expect(screen.getByText('plain bold')).not.toHaveAttribute('aria-label');
+    });
+  });
+
+  describe('security', () => {
+    it('does not render script tags', () => {
+      const { container } = render(<Markup>{'<script>alert("xss")</script>'}</Markup>);
+      expect(container.querySelector('script')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent('<script>alert("xss")</script>');
+    });
+  });
+
+  describe('data prop (placeholder substitution)', () => {
+    it('substitutes a single placeholder', () => {
+      render(<Markup data={{ name: 'John' }}>{'Hello, {{name}}!'}</Markup>);
+      expect(screen.getByText('Hello, John!')).toBeInTheDocument();
+    });
+
+    it('substitutes multiple placeholders', () => {
+      render(
+        <Markup data={{ amount: '£35.00', recipient: 'Alice' }}>
+          {'You sent {{amount}} to {{recipient}}'}
+        </Markup>,
+      );
+      expect(screen.getByText('You sent £35.00 to Alice')).toBeInTheDocument();
+    });
+
+    it('leaves unmatched placeholders as literal text', () => {
+      render(<Markup data={{ name: 'John' }}>{'Hello, {{name}}! Your code is {{code}}'}</Markup>);
+      expect(screen.getByText('Hello, John! Your code is {{code}}')).toBeInTheDocument();
+    });
+
+    it('converts numeric values to strings', () => {
+      render(<Markup data={{ count: 42 }}>{'You have {{count}} items'}</Markup>);
+      expect(screen.getByText('You have 42 items')).toBeInTheDocument();
+    });
+
+    it('substitutes placeholders inside nested markup', () => {
+      render(<Markup data={{ price: '£35.00' }}>{'Total: <strong>{{price}}</strong>'}</Markup>);
+      const strong = screen.getByText('£35.00');
+      expect(strong.tagName).toBe('STRONG');
+    });
+
+    it('renders without data prop (placeholders remain literal)', () => {
+      render(<Markup>{'Hello, {{name}}!'}</Markup>);
+      expect(screen.getByText('Hello, {{name}}!')).toBeInTheDocument();
+    });
+
+    it('does not parse markup tags inside data values', () => {
+      const { container } = render(
+        <Markup data={{ name: '<link href="https://evil.com">click</link>' }}>
+          {'Hello, {{name}}!'}
+        </Markup>,
+      );
+      expect(container.querySelector('a')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent('Hello, <link href="https://evil.com">click</link>!');
+    });
+
+    it('does not parse emphasis tags inside data values', () => {
+      const { container } = render(
+        <Markup data={{ value: '<strong>injected</strong>' }}>{'Result: {{value}}'}</Markup>,
+      );
+      expect(container.querySelector('strong')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent('Result: <strong>injected</strong>');
+    });
+
+    it('does not allow data values to break out of parent tags', () => {
+      const { container } = render(
+        <Markup data={{ price: '</strong><link href="https://evil.com">phish</link><strong>' }}>
+          {'Price: <strong>{{price}}</strong>'}
+        </Markup>,
+      );
+      expect(container.querySelector('a')).not.toBeInTheDocument();
+      const strong = container.querySelector('strong');
+      expect(strong).toHaveTextContent(
+        '</strong><link href="https://evil.com">phish</link><strong>',
+      );
+    });
+
+    it('substitutes the same placeholder used multiple times', () => {
+      render(
+        <Markup data={{ item: 'widget' }}>{'Buy a {{item}}! Everyone loves a {{item}}.'}</Markup>,
+      );
+      expect(screen.getByText('Buy a widget! Everyone loves a widget.')).toBeInTheDocument();
+    });
+  });
+
+  describe('allowLinks', () => {
+    it('renders root-relative links by default (internal mode)', () => {
+      render(<Markup>{'<link href="/settings">settings</link>'}</Markup>);
+      expect(screen.getByRole('link', { name: /settings/ })).toHaveAttribute('href', '/settings');
+    });
+
+    it('renders wise.com links by default (internal mode)', () => {
+      render(<Markup>{'<link href="https://wise.com/help">help</link>'}</Markup>);
+      expect(screen.getByRole('link', { name: /help/ })).toHaveAttribute(
+        'href',
+        'https://wise.com/help',
+      );
+    });
+
+    it('blocks external domains by default (internal mode)', () => {
+      render(<Markup>{'<link href="https://example.com">external</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('external')).toBeInTheDocument();
+    });
+
+    it('allows external domains when set to "all"', () => {
+      render(
+        <Markup allowLinks="all">{'<link href="https://example.com">external</link>'}</Markup>,
+      );
+      expect(screen.getByRole('link', { name: /external/ })).toHaveAttribute(
+        'href',
+        'https://example.com',
+      );
+    });
+
+    it('blocks all links when set to "none"', () => {
+      render(<Markup allowLinks="none">{'<link href="/settings">settings</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('settings')).toBeInTheDocument();
+    });
+
+    it('does not bypass base sanitisation even in "all" mode', () => {
+      render(<Markup allowLinks="all">{'<link href="javascript:alert(1)">xss</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('does not affect action-based links in "none" mode', () => {
+      const handleClick = jest.fn();
+      render(
+        <Markup allowLinks="none" actions={{ save: handleClick }}>
+          {'<link action="save">save</link>'}
+        </Markup>,
+      );
+      expect(screen.getByRole('button', { name: /save/ })).toBeInTheDocument();
+    });
+
+    it('blocks root-relative paths that resolve to a different origin via URL parser', () => {
+      render(<Markup>{'<link href="/\\evil.com">sneaky</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('sneaky')).toBeInTheDocument();
+    });
+
+    describe('HTML metacharacters in href are inert in React rendering context', () => {
+      it('renders href containing angle brackets without DOM injection', () => {
+        render(
+          <Markup allowLinks="all">
+            {'<link href="https://example.com/path?a=1&b=<script>alert(1)</script>">link</link>'}
+          </Markup>,
+        );
+        const link = screen.getByRole('link', { name: 'link' });
+        expect(link).toHaveAttribute(
+          'href',
+          'https://example.com/path?a=1&b=<script>alert(1)</script>',
+        );
+        // React escapes these in the DOM — no actual script element is injected
+        expect(link.closest('span')!.querySelector('script')).not.toBeInTheDocument();
+      });
+
+      it('renders href containing quotes without breaking the attribute', () => {
+        render(
+          <Markup allowLinks="all">
+            {'<link href="https://example.com/path?q=he said \'hello\'">link</link>'}
+          </Markup>,
+        );
+        const link = screen.getByRole('link', { name: 'link' });
+        // React safely renders the href via DOM property assignment, not innerHTML
+        expect(link).toHaveAttribute('href', "https://example.com/path?q=he said 'hello'");
+      });
+
+      it('renders href containing double quotes without attribute breakout', () => {
+        // The ATTR_REGEX uses single quotes here so the double quote is part of the value
+        render(
+          <Markup allowLinks="all">
+            {'<link href=\'https://example.com/path?q="injected"\'>link</link>'}
+          </Markup>,
+        );
+        const link = screen.getByRole('link', { name: 'link' });
+        expect(link).toHaveAttribute('href', 'https://example.com/path?q="injected"');
+      });
+    });
+  });
+});

package/src/Markup/Markup.tsx

@@ -0,0 +1,175 @@
+import React, { Fragment, useMemo } from 'react';
+
+import Link from '../Link';
+
+import { parseMarkup } from './utils/parseMarkup';
+import { type AllowLinksMode, isHrefAllowedByMode, sanitiseHref } from './utils/sanitise';
+import type { MarkupActions, MarkupNode, MarkupProps } from './Markup.types';
+
+const PLACEHOLDER_REGEX = /\{\{(\w+)\}\}/g;
+
+type MarkupData = Record<string, string | number>;
+
+function substituteData(text: string, data: MarkupData): string {
+  return text.replace(PLACEHOLDER_REGEX, (match, key: string) =>
+    Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match,
+  );
+}
+
+function renderNodes(
+  nodes: MarkupNode[],
+  actions: MarkupActions | undefined,
+  data: MarkupData | undefined,
+  allowLinks: AllowLinksMode,
+): React.ReactNode[] {
+  return nodes.map((node, index) => renderNode(node, actions, data, allowLinks, index));
+}
+
+function renderLinkNode(
+  node: Extract<MarkupNode, { type: 'link' }>,
+  actions: MarkupActions | undefined,
+  data: MarkupData | undefined,
+  allowLinks: AllowLinksMode,
+  key: number,
+): React.ReactNode {
+  const children = renderNodes(node.children, actions, data, allowLinks);
+
+  if (node.action && actions?.[node.action]) {
+    return (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      <Link key={key} aria-label={node.accessibilityLabel} onClick={actions[node.action]}>
+        {children}
+      </Link>
+    );
+  }
+
+  const sanitisedHref = node.href ? sanitiseHref(node.href) : undefined;
+  if (sanitisedHref && isHrefAllowedByMode(sanitisedHref, allowLinks)) {
+    return (
+      <Link
+        key={key}
+        href={sanitisedHref}
+        target={node.target}
+        aria-label={node.accessibilityLabel}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  return <Fragment key={key}>{children}</Fragment>;
+}
+
+function renderNode(
+  node: MarkupNode,
+  actions: MarkupActions | undefined,
+  data: MarkupData | undefined,
+  allowLinks: AllowLinksMode,
+  key: number,
+): React.ReactNode {
+  switch (node.type) {
+    case 'text':
+      return (
+        <Fragment key={key}>{data ? substituteData(node.content, data) : node.content}</Fragment>
+      );
+    case 'newline':
+      return <br key={key} />;
+    case 'important':
+    case 'positive':
+    case 'negative':
+      return (
+        <em
+          key={key}
+          className={`wds-markup-emphasis wds-markup-emphasis--${node.type}`}
+          aria-label={node.accessibilityLabel}
+        >
+          {renderNodes(node.children, actions, data, allowLinks)}
+        </em>
+      );
+    case 'strong':
+      return (
+        <strong key={key} className="wds-markup-strong" aria-label={node.accessibilityLabel}>
+          {renderNodes(node.children, actions, data, allowLinks)}
+        </strong>
+      );
+    case 'strikethrough':
+      return (
+        <del key={key} className="wds-markup-strikethrough" aria-label={node.accessibilityLabel}>
+          {renderNodes(node.children, actions, data, allowLinks)}
+        </del>
+      );
+    case 'paragraph':
+      return (
+        <p key={key} className="wds-markup-paragraph">
+          {renderNodes(node.children, actions, data, allowLinks)}
+        </p>
+      );
+    case 'link':
+      return renderLinkNode(node, actions, data, allowLinks, key);
+  }
+}
+
+function hasParagraph(nodes: MarkupNode[]): boolean {
+  for (const node of nodes) {
+    if (node.type === 'paragraph') {
+      return true;
+    }
+    if ('children' in node && hasParagraph(node.children)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Parses a markup string and renders it as React elements. Supports `<important>`,
+ * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),
+ * and `<link>` (alias `<a>`) with secure href validation.
+ *
+ * It only processes `string` input, while `ReactNode` is passed-through without processing.
+ *
+ * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be
+ * eventually deprecated.
+ *
+ * @see http://storybook.wise.design/?path=/docs/typography-markup--docs
+ * @link ../emphasis/Emphasis | Emphasis
+ */
+export const Markup: React.FC<MarkupProps> = ({
+  children,
+  data,
+  allowLinks = 'internal',
+  actions,
+  as,
+  className,
+  'data-testid': testId,
+}) => {
+  const tree = useMemo(
+    () => (typeof children === 'string' ? parseMarkup(children) : []),
+    [children],
+  );
+
+  if (typeof children !== 'string') {
+    if (children == null) {
+      return null;
+    }
+    return (
+      <span className={className} data-testid={testId}>
+        {children}
+      </span>
+    );
+  }
+
+  if (tree.length === 0) {
+    return null;
+  }
+
+  const Element = as ?? (hasParagraph(tree) ? 'div' : 'span');
+
+  return (
+    <Element className={className} data-testid={testId}>
+      {renderNodes(tree, actions, data, allowLinks)}
+    </Element>
+  );
+};
+
+export default Markup;