Make links always to open in new window

Author: mmoila

client/src/components/MarkdownViewer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeExternalLinks from 'rehype-external-links';
+import remarkBreaks from 'remark-breaks';
+
+interface Props {
+  children: string;
+}
+
+export default function MarkdownViewer({ children }: Props) {
+  return (
+    <ReactMarkdown
+      rehypePlugins={[
+        () =>
+          rehypeExternalLinks({
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          }),
+      ]}
+      remarkPlugins={[remarkBreaks]}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+}

client/src/components/RichTextEditor.tsx

@@ -96,7 +96,17 @@ interface Props {
  * @returns Draft.js editor state
  */
 function markdownToEditorState(markdown: string) {
-  const rawData = markdownToDraft(markdown);
+  const rawData = markdownToDraft(markdown, {
+    remarkableOptions: { html: true },
+  });
+  // Set target="_blank" for all link entities
+  if (rawData.entityMap) {
+    Object.values(rawData.entityMap).forEach((entity: any) => {
+      if (entity.type === 'LINK') {
+        entity.data.targetOption = '_blank';
+      }
+    });
+  }
   const contentState = convertFromRaw(rawData);
   return EditorState.createWithContent(contentState);
 }

client/src/components/SectionInfo.tsx

@@ -12,8 +12,7 @@ import {
 } from '@mui/material';
 import { useTranslations } from '@src/stores/TranslationContext';
 import React, { forwardRef, useId, useImperativeHandle, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeExternalLinks from 'rehype-external-links';
+import MarkdownViewer from './MarkdownViewer';
 
 interface Props {
   subject: string;
@@ -56,9 +55,7 @@ export default forwardRef(function SectionInfo(
         open={infoDialogOpen}
       >
         <DialogContent id={`${dialogId}-dialog-content`}>
-          <ReactMarkdown rehypePlugins={[rehypeExternalLinks]}>
-            {infoText}
-          </ReactMarkdown>
+          <MarkdownViewer>{infoText}</MarkdownViewer>
         </DialogContent>
         <DialogActions>
           <Button

client/src/components/SurveyThanksPage.tsx

@@ -1,18 +1,17 @@
 import { Survey } from '@interfaces/survey';
 import {
+  Box,
   Link,
-  Typography,
+  Stack,
   Theme,
-  Box,
+  Typography,
   useMediaQuery,
-  Stack,
 } from '@mui/material';
 import { useTranslations } from '@src/stores/TranslationContext';
+import { useImageHeaderQuery } from '@src/utils/useImageHeaderQuery';
 import React, { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeExternalLinks from 'rehype-external-links';
 import Footer from './Footer';
-import { useImageHeaderQuery } from '@src/utils/useImageHeaderQuery';
+import MarkdownViewer from './MarkdownViewer';
 
 const styles = (theme: Theme) => ({
   testSurveyHeader: {
@@ -128,9 +127,9 @@ export default function SurveyThanksPage({ survey, isTestSurvey }: Props) {
           <Typography variant="h5" component="h1">
             {survey.thanksPage.title?.[surveyLanguage]}
           </Typography>
-          <ReactMarkdown rehypePlugins={[rehypeExternalLinks]}>
+          <MarkdownViewer>
             {survey.thanksPage.text?.[surveyLanguage]}
-          </ReactMarkdown>
+          </MarkdownViewer>
         </div>
         {survey.thanksPage.imageName && (
           <Box

client/src/components/TextSection.tsx

@@ -1,12 +1,10 @@
 import { SurveyTextSection } from '@interfaces/survey';
+import { Typography } from '@mui/material';
 import { useSurveyAnswers } from '@src/stores/SurveyAnswerContext';
 import { useTranslations } from '@src/stores/TranslationContext';
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeExternalLinks from 'rehype-external-links';
-import remarkBreaks from 'remark-breaks';
+import MarkdownViewer from './MarkdownViewer';
 import SectionInfo from './SectionInfo';
-import { Typography } from '@mui/material';
 
 interface Props {
   section: SurveyTextSection;
@@ -42,12 +40,7 @@ export default function TextSection({ section, isFollowUp = false }: Props) {
         )}
       </div>
       <div style={{ color: section.bodyColor ?? '#000000' }}>
-        <ReactMarkdown
-          rehypePlugins={[rehypeExternalLinks]}
-          remarkPlugins={[remarkBreaks]}
-        >
-          {section.body?.[surveyLanguage]}
-        </ReactMarkdown>
+        <MarkdownViewer>{section.body?.[surveyLanguage]}</MarkdownViewer>
       </div>
     </>
   );