update react-markdown

package.json

@@ -78,9 +78,11 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-jsonschema-form": "1.8.1",
-    "react-markdown": "^5.0.3",
+    "react-markdown": "^6.0.0",
     "react-mde": "^11.1.0",
     "react-toastify": "^7.0.3",
+    "rehype-raw": "^5.1.0",
+    "rehype-sanitize": "^4.0.0",
     "shortid": "2.2.16",
     "styled-components": "5.2.3",
     "swr": "0.4.2"

src/components/Widgets/MarkdownEditorWidget.tsx

@@ -32,7 +32,9 @@ const MarkdownEditorWidget: React.FC<MarkdownEditorWidgetProps> = ({ value, onCh
         onChange={onChange}
         selectedTab={selectedTab}
         onTabChange={setSelectedTab}
-        generateMarkdownPreview={(markdown) => Promise.resolve(<MarkdownStyles source={markdown} />)}
+        generateMarkdownPreview={(markdown) => Promise.resolve(
+          <MarkdownStyles>{markdown}</MarkdownStyles>,
+        )}
       />
     </Container>
   );

src/views/CorporatePage/JobAdList.tsx

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import JobAd from "@models/JobAd";
 import { Accordion } from "@components/index";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 
 interface JobAdListProps {
   jobAds: JobAd[];
@@ -25,7 +27,9 @@ const JobAdList: React.FC<JobAdListProps> = ({ jobAds }) => (
             <p>
               {ad.description_fi}
             </p>
-            <ReactMarkdown source={ad.content_fi} escapeHtml={false} />
+            <ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
+              {ad.content_fi}
+            </ReactMarkdown>
           </div>
         </Accordion>
       </li>

src/views/EventPage/EventPageView.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import colors from "@theme/colors";
 import Event from "@models/Event";
 import {
@@ -85,7 +87,7 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
           />
         </h1>
         <div>
-          <Content source={content} escapeHtml={false} />
+          <Content rehypePlugins={[rehypeRaw, rehypeSanitize]}>{content}</Content>
           <p>
             {`${t("Paikka")}: ${location}`}
           </p>

src/views/FeedPage/FeedPageView.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import colors from "@theme/colors";
 import Post from "@models/Feed";
 import { TextSection, ChangeLanguageButton } from "@components/index";
@@ -70,7 +72,7 @@ const FeedPageView: React.FC<FeedPageViewProps> = ({ post }) => {
           )}
         </h1>
         <div>
-          <Content source={content} escapeHtml={false} />
+          <Content rehypePlugins={[rehypeRaw, rehypeSanitize]}>{content}</Content>
         </div>
       </StyledTextSection>
     </>