Replace react-markdown with react-remark (#3093)

ui/v2.5/package.json

@@ -52,18 +52,18 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-intl": "^6.2.8",
-    "react-markdown": "^8.0.5",
+    "react-remark": "^2.1.0",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.3.4",
     "react-router-hash-link": "^2.4.3",
     "react-select": "^5.7.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^1.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "slick-carousel": "^1.8.1",
     "string.prototype.replaceall": "^1.0.7",
     "thehandy": "^1.0.3",
     "universal-cookie": "^4.0.4",
-    "video.js": "^7.21.1",
+    "video.js": "^7.21.2",
     "videojs-mobile-ui": "^0.8.0",
     "videojs-seek-buttons": "^3.0.1",
     "videojs-vtt.js": "^0.15.4",

ui/v2.5/src/components/Help/Manual.tsx

@@ -157,14 +157,10 @@ export const Manual: React.FC<IManualProps> = ({
     },
   ];
 
-  const [activeTab, setActiveTab] = useState(
-    defaultActiveTab ?? content[0].key
-  );
+  const [activeTab, setActiveTab] = useState<string>();
 
   useEffect(() => {
-    if (defaultActiveTab) {
-      setActiveTab(defaultActiveTab);
-    }
+    setActiveTab(defaultActiveTab);
   }, [defaultActiveTab]);
 
   // links to other manual pages are specified as "/help/page.md"
@@ -195,7 +191,7 @@ export const Manual: React.FC<IManualProps> = ({
       <Modal.Body>
         <Container className="manual-container">
           <Tab.Container
-            activeKey={activeTab}
+            activeKey={activeTab ?? content[0].key}
             onSelect={(k) => k && setActiveTab(k)}
             id="manual-tabs"
           >

ui/v2.5/src/components/Help/context.tsx

@@ -1,10 +1,4 @@
-import React, {
-  lazy,
-  PropsWithChildren,
-  Suspense,
-  useEffect,
-  useState,
-} from "react";
+import React, { lazy, Suspense, useState } from "react";
 
 const Manual = lazy(() => import("./Manual"));
 
@@ -25,10 +19,6 @@ export const ManualProvider: React.FC = ({ children }) => {
     setShowManual(true);
   }
 
-  useEffect(() => {
-    if (manualLink) setManualLink(undefined);
-  }, [manualLink]);
-
   return (
     <ManualStateContext.Provider
       value={{
@@ -53,10 +43,7 @@ interface IManualLink {
   tab: string;
 }
 
-export const ManualLink: React.FC<PropsWithChildren<IManualLink>> = ({
-  tab,
-  children,
-}) => {
+export const ManualLink: React.FC<IManualLink> = ({ tab, children }) => {
   const { openManual } = React.useContext(ManualStateContext);
 
   return (

ui/v2.5/src/components/Shared/MarkdownPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ReactMarkdown from "react-markdown";
+import { Remark } from "react-remark";
 import remarkGfm from "remark-gfm";
 
 interface IPageProps {
@@ -19,8 +19,8 @@ export const MarkdownPage: React.FC<IPageProps> = ({ page }) => {
   }, [page, markdown]);
 
   return (
-    <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
-      {markdown}
-    </ReactMarkdown>
+    <div className="markdown">
+      <Remark remarkPlugins={[remarkGfm]}>{markdown}</Remark>
+    </div>
   );
 };