Merge pull request #3009 from OpenNeuroOrg/react-markdown

fix(app): Update to React 18 and replace jsx-to-markdown with react-markdown
OpenNeuroOrg · Mar 4, 2024 · 7c4907a · 7c4907a
2 parents 1f3ba55 + ec88a23
commit 7c4907a
Show file tree

Hide file tree

Showing 13 changed files with 2,928 additions and 472 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/package.json b/package.json
@@ -25,7 +25,6 @@
     "@vitest/coverage-v8": "^0.34.4",
     "@yarnpkg/pnpify": "^3.1.1-rc.8",
     "codecov": "3.8.3",
-    "core-js": "^3.3.2",
     "eslint": "7.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
@@ -43,7 +42,7 @@
     "mongoose": "6.11.3",
     "pinst": "^2.1.6",
     "prettier": "^2.2.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "sass": "^1.56.1",
     "tsc-watch": "6.0.4",
     "typescript": "5.1.6",

diff --git a/packages/openneuro-app/package.json b/packages/openneuro-app/package.json
@@ -32,29 +32,31 @@
     "email-validator": "^2.0.4",
     "graphql": "16.8.1",
     "jwt-decode": "^2.2.0",
-    "markdown-to-jsx": "^7.4.0",
     "pluralize": "8.0.0",
     "prop-types": "^15.6.0",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "react-cookie": "4.0.3",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-helmet": "6.1.0",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "6.3.0",
     "react-toastify": "6.0.9",
     "react-usestateref": "^1.0.8",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "semver": "^5.5.0",
     "subscriptions-transport-ws": "0.11.0",
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.1.3",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/dompurify": "^3",
     "@types/jsdom": "^16",
     "@types/node": "18.11.9",
     "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "5.3.3",
     "@types/testing-library__jest-dom": "5.14.5",
     "core-js": "3.25.1",

diff --git a/packages/openneuro-app/src/client.jsx b/packages/openneuro-app/src/client.jsx
@@ -6,7 +6,7 @@ import "./scripts/apm.js"
 import { ApolloProvider, InMemoryCache } from "@apollo/client"
 import { createClient } from "@openneuro/client"
 import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { BrowserRouter, Route, Routes } from "react-router-dom"
 import App from "./scripts/app"
 import Index from "./scripts/index"
@@ -18,7 +18,9 @@ import "@openneuro/components/page/page.scss"
 
 gtag.initialize(config.analytics.trackingIds)
 
-ReactDOM.render(
+const mainElement = document.getElementById("main")
+const container = createRoot(mainElement)
+container.render(
   <App>
     <ApolloProvider
       client={createClient(`${config.url}/crn/graphql`, {
@@ -41,5 +43,4 @@ ReactDOM.render(
       </BrowserRouter>
     </ApolloProvider>
   </App>,
-  document.getElementById("main"),
 )
diff --git a/...penneuro-app/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap b/...penneuro-app/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap
@@ -498,46 +498,48 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
               <div>
                 <article>
                   <section>
-                    <div>
-                      <p>
-                        This dataset was obtained from the OpenfMRI project (
-                        <a
-                          href="http://www.openfmri.org"
-                        >
-                          http://www.openfmri.org
-                        </a>
-                        ).
+                    <p>
+                      This dataset was obtained from the OpenfMRI project (
+                      <a
+                        href="http://www.openfmri.org"
+                      >
+                        http://www.openfmri.org
+                      </a>
+                      ).
 Accession #: ds003
 Description: Rhyme judgment
-                      </p>
-                      <p>
-                        Release history:
+                    </p>
+                    
+
+                    <p>
+                      Release history:
 10/06/2011: initial release
 3/21/2013: Updated release with QA information
-                      </p>
-                      <p>
-                        This dataset is made available under the Public Domain Dedication and License 
-v1.0, whose full text can be found at 
+                    </p>
+                    
 
-                        <a
-                          href="http://www.opendatacommons.org/licenses/pddl/1.0/"
-                        >
-                          http://www.opendatacommons.org/licenses/pddl/1.0/
-                        </a>
-                        . 
-We hope that all users will follow the ODC Attribution/Share-Alike 
+                    <p>
+                      This dataset is made available under the Public Domain Dedication and License
+v1.0, whose full text can be found at
+
+                      <a
+                        href="http://www.opendatacommons.org/licenses/pddl/1.0/"
+                      >
+                        http://www.opendatacommons.org/licenses/pddl/1.0/
+                      </a>
+                      .
+We hope that all users will follow the ODC Attribution/Share-Alike
 Community Norms (
-                        <a
-                          href="http://www.opendatacommons.org/norms/odc-by-sa/"
-                        >
-                          http://www.opendatacommons.org/norms/odc-by-sa/
-                        </a>
-                        ); 
-in particular, while not legally required, we hope that all users 
-of the data will acknowledge the OpenfMRI project and NSF Grant 
+                      <a
+                        href="http://www.opendatacommons.org/norms/odc-by-sa/"
+                      >
+                        http://www.opendatacommons.org/norms/odc-by-sa/
+                      </a>
+                      );
+in particular, while not legally required, we hope that all users
+of the data will acknowledge the OpenfMRI project and NSF Grant
 OCI-1131441 (R. Poldrack, PI) in any publications.
-                      </p>
-                    </div>
+                    </p>
                   </section>
                 </article>
               </div>

diff --git a/packages/openneuro-app/src/scripts/scss/dataset/dataset-page.scss b/packages/openneuro-app/src/scripts/scss/dataset/dataset-page.scss
@@ -272,6 +272,9 @@
             content: '';
           }
         }
+        p {
+          display: inline-block;
+        }
       }
     }
   }

diff --git a/packages/openneuro-app/src/scripts/utils/__tests__/__snapshots__/markdown.spec.tsx.snap b/packages/openneuro-app/src/scripts/utils/__tests__/__snapshots__/markdown.spec.tsx.snap
@@ -2,56 +2,68 @@
 
 exports[`Test <Markdown> component > allows a href with certain protocols 1`] = `
 <DocumentFragment>
-  <a
-    href="https://example.com"
-  >
-    Example link that should work.
-  </a>
+  <p>
+    <a
+      href="https://example.com"
+    >
+      Example link that should work.
+    </a>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > does not allow href with unknown protocols 1`] = `
 <DocumentFragment>
-  <a>
-    Example link that should not work.
-  </a>
+  <p>
+    <a>
+      Example link that should not work.
+    </a>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > filters close-break tags 1`] = `
 <DocumentFragment>
-  <span>
+  <p>
     <br />
     sample text
     <br />
-  </span>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > filters out disallowed tags 1`] = `
 <DocumentFragment>
   <ul>
+    
+
     <li>
       Markdown document
     </li>
+    
+
   </ul>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > safely handles broken HTML tags 1`] = `
 <DocumentFragment>
   <ul>
+    
+
     <li>
       Markdown document
 
       <br />
       <br />
-      <ul>
-        <li>
-          test content
-        </li>
-      </ul>
     </li>
+    
+
+    <li>
+      test content
+    </li>
+    
+
   </ul>
 </DocumentFragment>
 `;
diff --git a/packages/openneuro-app/src/scripts/utils/markdown.tsx b/packages/openneuro-app/src/scripts/utils/markdown.tsx
@@ -1,6 +1,8 @@
 import React from "react"
-import MarkdownToJsx from "markdown-to-jsx"
+import ReactMarkdown from "react-markdown"
 import DOMPurify from "dompurify"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
 
 interface MarkdownProps {
   children: string
@@ -161,7 +163,9 @@ export function Markdown({ children }: MarkdownProps) {
   })
   return (
     <>
-      <MarkdownToJsx>{sanitizedMarkdown}</MarkdownToJsx>
+      <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]}>
+        {sanitizedMarkdown}
+      </ReactMarkdown>
     </>
   )
 }
diff --git a/packages/openneuro-cli/package.json b/packages/openneuro-cli/package.json
@@ -28,7 +28,7 @@
     "jwt-decode": "^3.1.2",
     "mkdirp": "1.0.4",
     "node-fetch": "2.6.9",
-    "react": "^17.0.1"
+    "react": "^18.2.0"
   },
   "scripts": {
     "build": "tsc -b",

diff --git a/packages/openneuro-client/package.json b/packages/openneuro-client/package.json
@@ -21,7 +21,7 @@
     "@graphql-tools/mock": "^9.0.0",
     "crypto-hash": "^1.3.0",
     "graphql": "16.8.1",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "semver": "^5.5.0",
     "subscriptions-transport-ws": "^0.11.0"
   },

diff --git a/packages/openneuro-components/package.json b/packages/openneuro-components/package.json
@@ -20,22 +20,21 @@
     "@wojtekmaj/react-daterange-picker": "^3.2.0",
     "bytes": "^3.1.0",
     "date-fns": "^2.21.1",
-    "markdown-to-jsx": "^7.1.3",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-multi-carousel": "^2.8.4",
     "react-router-dom": "6.3.0",
     "react-usestateref": "^1.0.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.1.3",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/bytes": "^3",
     "@types/mdx-js__react": "^1",
     "@types/prop-types": "^15",
-    "@types/react-dom": "^17",
+    "@types/react-dom": "^18",
     "@types/react-router-dom": "5.3.3",
     "@types/react-slick": "^0",
     "@types/slick-carousel": "^1",

diff --git a/packages/openneuro-server/package.json b/packages/openneuro-server/package.json
@@ -52,8 +52,8 @@
     "passport-jwt": "^4.0.0",
     "passport-oauth2-refresh": "^2.0.0",
     "passport-orcid": "^0.0.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redlock": "^4.0.0",
     "request": "^2.83.0",
     "semver": "^5.5.0",