Markdown changes (#1188)

[closes](RaspberryPiFoundation/digital-editor-issues#412)

Author: jamiebenstead

CHANGELOG.md

@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Add remove instructions button modal (#1176)
 - Dark mode colours (#1182)
 - Dark mode for instuctions code block (#1187)
+- Change markdown links to open in new tab (#1188)
 
 ### Changed
 

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -1,9 +1,10 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+// This is disabled because the empty anchor tag is used for translation and will have content when rendered.
 import React, { useEffect, useRef, useMemo, useState } from "react";
 import SidebarPanel from "../SidebarPanel";
 import { Trans, useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
-import { Link } from "react-router-dom";
 
 import ProgressBar from "./ProgressBar/ProgressBar";
 import "../../../../assets/stylesheets/Instructions.scss";
@@ -198,8 +199,8 @@ const InstructionsPanel = () => {
                 <Trans
                   i18nKey="instructionsPanel.emptyState.markdown"
                   components={[
-                    <Link
-                      href="https://commonmark.org/help/"
+                    <a
+                      href="https://www.markdownguide.org/cheat-sheet/"
                       target="_blank"
                       rel="noreferrer"
                     />,

src/components/WebComponentProject/WebComponentProject.jsx

@@ -60,6 +60,7 @@ const WebComponentProject = ({
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const [codeHasRun, setCodeHasRun] = useState(codeHasBeenRun);
   const dispatch = useDispatch();
+  const renderer = new marked.Renderer();
 
   useEffect(() => {
     dispatch(setIsSplitView(outputSplitView));
@@ -82,6 +83,15 @@ const WebComponentProject = ({
     }
   }, [projectIdentifier]);
 
+  renderer.link = function (data) {
+    return `<a href="${data.href}" target="_blank" rel="noreferrer"
+    }">${data.text}</a>`;
+  };
+
+  marked.setOptions({
+    renderer: renderer,
+  });
+
   useEffect(() => {
     if (!permitInstructionsOverride) return;
 

src/components/WebComponentProject/WebComponentProject.test.js

@@ -114,6 +114,27 @@ describe("When state set", () => {
   });
 });
 
+describe("When there are instructions", () => {
+  beforeEach(() => {
+    renderWebComponentProject({
+      instructions: "[Link](https://example.com)",
+      codeRunTriggered: true,
+    });
+  });
+
+  test("Renders a tag with target _blank", () => {
+    const instructions = store
+      .getActions()
+      .find((e) => e.type === "instructions/setInstructions");
+
+    const content = instructions.payload.project.steps[0].content;
+
+    expect(content).toEqual(
+      '<p><a href="https://example.com" target="_blank" rel="noreferrer"\n    }">Link</a></p>\n',
+    );
+  });
+});
+
 describe("When there are no instructions", () => {
   beforeEach(() => {
     renderWebComponentProject({});