add remarkGfm plugin for tables

Unipisa · Nov 7, 2024 · 7544f3b · 7544f3b
1 parent c88ccb1
commit 7544f3b
Show file tree

Hide file tree

Showing 11 changed files with 501 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,6 +80,7 @@
     "react-router-dom": "^6.3.0",
     "react-to-print": "^2.14.7",
     "rehype-katex": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",

diff --git a/src/processes/Conference.js b/src/processes/Conference.js
@@ -6,6 +6,7 @@ import { useQuery, useQueryClient } from 'react-query'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 import 'katex/dist/katex.min.css'
 
 import { ConferenceRoomInput, GrantInput, InputRow, DateInput, MultipleSelectInput, InstitutionInput, BooleanInput, StringInput, TextInput } from '../components/Input'
@@ -243,7 +244,7 @@ export function ConferenceDetailsBlock({ onCompleted, data, setData, change, act
                 <Card className="shadow" style={{maxWidth:"60em"}}>
                     <Card.Header>Anteprima descrizione</Card.Header>
                     <Card.Body>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{data.description}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{data.description}</Markdown>
                     </Card.Body>
                 </Card>
             }

diff --git a/src/processes/Seminar.js b/src/processes/Seminar.js
@@ -9,6 +9,7 @@ import { useQuery, useQueryClient } from 'react-query'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 import 'katex/dist/katex.min.css'
 
 import {SelectPeopleBlock} from './SelectPeopleBlock'
@@ -246,7 +247,7 @@ export function SeminarDetailsBlock({ onCompleted, data, setData, change, active
                 <Card className="shadow" style={{maxWidth:"60em"}}>
                     <Card.Header>Anteprima abstract</Card.Header>
                     <Card.Body>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{data.abstract}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{data.abstract}</Markdown>
                     </Card.Body>
                 </Card>
             }

diff --git a/widgets/src/components/Conference.js b/widgets/src/components/Conference.js
@@ -6,6 +6,7 @@ import { Loading } from './Loading'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 
 import { formatDateInterval } from '../utils'
 import { useQuery } from 'react-query'
@@ -38,7 +39,7 @@ export function Conference({ id }) {
 
     return <div>
         <ConferenceTitle conference={data}></ConferenceTitle>
-        <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
+        <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>
             {data.description}
         </Markdown>
     </div>

diff --git a/widgets/src/components/ConferenceList.js b/widgets/src/components/ConferenceList.js
@@ -7,6 +7,7 @@ import { Loading } from './Loading'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 import { useQuery } from 'react-query'
 
 export function ConferenceList({ from, to, grants, ssd, is_outreach, _sort, _limit }) {
@@ -31,7 +32,7 @@ export function ConferenceList({ from, to, grants, ssd, is_outreach, _sort, _lim
             events_block.push(
                 <div key={e._id}>
                     <ConferenceTitle conference={e} href={link}></ConferenceTitle>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.description, 200)}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{truncateText(e.description, 200)}</Markdown>
                     <hr className="my-4"></hr>
                 </div>
             );

diff --git a/widgets/src/components/CourseList.js b/widgets/src/components/CourseList.js
@@ -3,6 +3,7 @@ import { useQuery } from 'react-query'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 import axios from 'axios'
 import Accordion from './Accordion';
 import { Loading } from './Loading'
@@ -102,7 +103,7 @@ export function CourseList({ from, to }) {
                     <p>From {formatDate(course.startDate, 'en-US')} to {formatDate(course.endDate, 'en-US')}</p>
                     {lessons}
                     <h5 className="wp-block-heading"><strong>Description:</strong></h5>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{course.description}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{course.description}</Markdown>
                 </Accordion>
             );
         });

diff --git a/widgets/src/components/EventList.js b/widgets/src/components/EventList.js
@@ -8,6 +8,7 @@ import { Loading } from './Loading'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 import { useQuery } from 'react-query'
 
 export function EventList({ from, to, grants, _limit }) {
@@ -58,7 +59,7 @@ export function EventList({ from, to, grants, _limit }) {
             events_block.push(
                 <div key={e._id}>
                     <SeminarTitle seminar={e} href={link}></SeminarTitle>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.abstract, 200)}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{truncateText(e.abstract, 200)}</Markdown>
                     <hr className="my-4"></hr>
                 </div>
             )
@@ -68,7 +69,7 @@ export function EventList({ from, to, grants, _limit }) {
             events_block.push(
                 <div key={e._id}>
                     <ConferenceTitle conference={e} href={link}></ConferenceTitle>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.notes, 200)}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{truncateText(e.notes, 200)}</Markdown>
                     <hr className="my-4"></hr>
                 </div>
             )

diff --git a/widgets/src/components/HomeEventList.js b/widgets/src/components/HomeEventList.js
@@ -5,6 +5,7 @@ import axios from 'axios';
 import Markdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import remarkMath from 'remark-math';
+import remarkGfm from 'remark-gfm';
 import { Loading } from './Loading';
 import {
   formatDateInterval,
@@ -192,7 +193,7 @@ function EventBox({ event }) {
         <div className="subtitle_style fas fa-map-marker-alt"> {event.conferenceRoom?.name || event.institution?.name}</div>
         <div className={`subtitle_style ${event.type === 'seminar' ? 'fa fa-tags' : event.type === 'conference' ? 'fa fa-link' : ''}`}> {tags}</div>
         <div className="excerpt_style">
-            <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
+            <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>
                 {truncateTextByWords(event.abstract ? event.abstract : event.description, 30)}
             </Markdown>
         </div>

diff --git a/widgets/src/components/Seminar.js b/widgets/src/components/Seminar.js
@@ -5,6 +5,7 @@ import { Loading } from './Loading'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 
 import { formatDate, formatTime, formatPersonName, getDMURL, getManageURL } from '../utils'
 import { useQuery } from 'react-query'
@@ -30,7 +31,7 @@ export function Seminar({ id }) {
 
     return <div>
             <SeminarTitle seminar={data}></SeminarTitle>
-            <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{data.abstract}</Markdown>
+            <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{data.abstract}</Markdown>
         </div>
 }
 

diff --git a/widgets/src/components/SeminarList.js b/widgets/src/components/SeminarList.js
@@ -7,6 +7,7 @@ import { Loading } from './Loading'
 import Markdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
 import { useQuery } from 'react-query'
 
 export function SeminarList({ from, to, category, grant, _sort, _limit }) {
@@ -29,7 +30,7 @@ export function SeminarList({ from, to, category, grant, _sort, _limit }) {
             events_block.push(
                 <div key={e._id}>
                     <SeminarTitle seminar={e} href={link}></SeminarTitle>
-                    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.abstract, 200)}</Markdown>
+                    <Markdown remarkPlugins={[remarkMath, remarkGfm]} rehypePlugins={[rehypeKatex]}>{truncateText(e.abstract, 200)}</Markdown>
                     <hr className="my-4"></hr>
                 </div>
             );