Update markdown impl to new react-markdown version

FACT-Finder · Jun 24, 2024 · b689cb7 · b689cb7
1 parent 711397e
commit b689cb7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/packages/ui/src/Note.tsx b/packages/ui/src/Note.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {ApiNote} from '../../shared/type';
-import {Markdown} from './Markdown';
+import {ReactMarkdown} from './ReactMarkdown';
 import Chip from '@mui/material/Chip';
 import {Link, Paper, Typography} from '@mui/material';
 import {NavigateNote} from './state';
@@ -29,7 +29,7 @@ export const FullNote: React.FC<{
 
     return (
         <>
-            <Markdown content={'# ' + summary} navigateNote={navigateNote} />
+            <ReactMarkdown content={'# ' + summary} navigateNote={navigateNote} />
             <div style={{marginBottom: 15}}>
                 <FieldChips
                     fieldOrder={fieldOrder}
@@ -44,7 +44,7 @@ export const FullNote: React.FC<{
                     NO CONTENT
                 </Typography>
             ) : (
-                <Markdown content={content} navigateNote={navigateNote} />
+                <ReactMarkdown content={content} navigateNote={navigateNote} />
             )}
         </>
     );
@@ -109,7 +109,7 @@ export const SummaryNote = React.memo(
                 style={{...style, cursor: 'pointer', padding: 10, paddingLeft: 20, margin: 5}}
                 onClick={() => selectNote(entry)}
             >
-                <Markdown content={'# ' + summary} navigateNote={navigateNote} />
+                <ReactMarkdown content={'# ' + summary} navigateNote={navigateNote} />
                 <FieldChips
                     fieldOrder={fieldOrder}
                     onChipClick={onChipClick}

diff --git a/packages/ui/src/Markdown.tsx → packages/ui/src/ReactMarkdown.tsx b/packages/ui/src/Markdown.tsx → packages/ui/src/ReactMarkdown.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 import makeStyles from '@mui/styles/makeStyles';
 import {Link, Theme} from '@mui/material';
 import LinkIcon from '@mui/icons-material/Link';
 import remarkGfm from 'remark-gfm';
 import {getStateFromURL, NavigateNote} from './state';
-import {CodeComponent} from 'react-markdown/lib/ast-to-react';
-import {ReactMarkdownOptions} from 'react-markdown/lib/react-markdown';
+import Markdown from "react-markdown";
 
 const useStyles = makeStyles(
     (theme: Theme) => ({
@@ -32,20 +30,20 @@ const useStyles = makeStyles(
     {name: 'Markdown'}
 );
 
-export const Markdown = React.memo(({content, navigateNote}: {content: string; navigateNote: NavigateNote}) => {
+export const ReactMarkdown = React.memo(({content, navigateNote}: {content: string; navigateNote: NavigateNote}) => {
     const classes = useStyles();
     return (
-        <ReactMarkdown
+        <Markdown
             components={renderers(navigateNote)}
             remarkPlugins={[remarkGfm]}
             className={classes.root + ' markdown-body'}
         >
             {content}
-        </ReactMarkdown>
+        </Markdown>
     );
 });
 
-const MarkdownCodeBlock: CodeComponent = ({node, inline, className, children, style: _ignored, ...props}) => {
+const MarkdownCodeBlock: React.FC<any> = ({ inline, className, children, ...props}) => {
     const classes = useStyles();
     const match = /language-(\w+)/.exec(className ?? '');
     return !inline && match ? (
@@ -111,7 +109,7 @@ const HeadingRenderer: React.FC<any> = ({level, children}) => {
     ]);
 };
 
-const renderers: (n: NavigateNote) => ReactMarkdownOptions['components'] = (navigateNote) => ({
+const renderers: (n: NavigateNote) => any = (navigateNote) => ({
     code: MarkdownCodeBlock,
     a: MarkdownLink(navigateNote),
     h1: HeadingRenderer,