CCM-10917 MarkdownContent component

Author: nicki-nhs

frontend/package.json

@@ -9,6 +9,7 @@
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^13.0.2",
+    "markdown-to-jsx": "^7.7.10",
     "next": "^15.2.3",
     "next-client-cookies": "^2.0.1",
     "nhs-notify-backend-client": "^0.0.1",

frontend/src/__tests__/components/molecules/MarkdownContent.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent';
+
+describe('MarkdownContent', () => {
+  it('renders nothing if segments is empty array', () => {
+    const { container } = render(<MarkdownContent segments={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders multiple segments in correct order', () => {
+    const segments = ['First paragraph', 'Second [link](https://example.com)'];
+
+    render(<MarkdownContent segments={segments} />);
+
+    expect(screen.getByText('First paragraph')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      'https://example.com'
+    );
+    expect(screen.getByRole('link')).toHaveTextContent('link');
+  });
+
+  it('adds correct attributes to links', () => {
+    const segments = ['Click [here](https://example.com)'];
+
+    render(<MarkdownContent segments={segments} />);
+
+    const link = screen.getByRole('link', { name: 'here' });
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders markdown paragraphs and links correctly (snapshot)', () => {
+    const segments = [
+      'This is a paragraph',
+      'Here is a [link](https://example.com)',
+    ];
+
+    const container = render(<MarkdownContent segments={segments} />);
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('escapes dangerous HTML, scripts, and iframes', () => {
+    const segments = [
+      '<script>alert("hacked!")</script>',
+      '<img src=x onerror=alert(1)>',
+      '<iframe src="https://malicious-site.com"></iframe>',
+    ];
+
+    const { container } = render(<MarkdownContent segments={segments} />);
+
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.querySelector('iframe')).toBeNull();
+  });
+});

frontend/src/__tests__/components/molecules/__snapshots__/MarkdownContent.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkdownContent renders markdown paragraphs and links correctly (snapshot) 1`] = `
+<DocumentFragment>
+  <p>
+    This is a paragraph
+  </p>
+  <p>
+    Here is a 
+    <a
+      href="https://example.com"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      link
+    </a>
+  </p>
+</DocumentFragment>
+`;

frontend/src/components/molecules/MarkdownContent/MarkdownContent.tsx

@@ -0,0 +1,48 @@
+// import ReactMarkdown from 'react-markdown';
+import Markdown from 'markdown-to-jsx';
+import React from 'react';
+
+type MarkdownContentProps = { segments: string[] };
+
+export function MarkdownContent({ segments }: MarkdownContentProps) {
+  return (
+    <>
+      {segments.map((content, index) => {
+        return (
+          // <ReactMarkdown
+          //   key={index}
+          //   children={content}
+          //   allowedElements={['a', 'p']}
+          //   components={{
+          //     a(props) {
+          //       const { node, ...rest } = props;
+          //       return (
+          //         <a {...rest} target='_blank' rel='noopener noreferrer' />
+          //       );
+          //     },
+          //   }}
+          // />
+          <Markdown
+            key={index}
+            options={{
+              forceBlock: true,
+              wrapper: React.Fragment,
+              disableParsingRawHTML: true,
+              overrides: {
+                a: {
+                  component: 'a',
+                  props: {
+                    rel: 'noopener noreferrer',
+                    target: '_blank',
+                  },
+                },
+              },
+            }}
+          >
+            {content}
+          </Markdown>
+        );
+      })}
+    </>
+  );
+}

frontend/src/components/molecules/TemplateSubmitted/TemplateSubmitted.tsx

@@ -3,8 +3,9 @@
 import Link from 'next/link';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import content from '@content/content';
-import { withEmbeddedLink } from '@utils/markdownit';
+// import { withEmbeddedLink } from '@utils/markdownit';
 import React from 'react';
+import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent';
 
 type TemplateSubmittedProps = { templateId: string; templateName: string };
 
@@ -61,16 +62,7 @@ export const TemplateSubmitted = ({
                 <h3 className='nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-3'>
                   {heading}
                 </h3>
-                {text.map((textContent, i) => {
-                  return (
-                    <p
-                      key={`do-next-${index}-${i}`}
-                      dangerouslySetInnerHTML={{
-                        __html: withEmbeddedLink(textContent),
-                      }}
-                    />
-                  );
-                })}
+                <MarkdownContent segments={text} />
               </React.Fragment>
             );
           })}

frontend/src/content/content.ts

@@ -686,6 +686,7 @@ const templateSubmitted = {
       ],
     },
   ],
+  // doNext: "### If you've sent messages using NHS Notify\n\n[Raise a request with the Service Desk (opens in a new tab)](https://nhsdigitallive.service-now.com/csm?id=sc_cat_item&sys_id=ce81c3ae1b1c5190892d4046b04bcb83) once you've submitted all your templates.\n\nIf you replaced a template by submitting a new one, tell us which template you want to use in your Service Desk request.",
   backLinkText: backToAllTemplates,
 };