feat: integrate remark-ins for enhanced Markdown support across event components

Author: Aloento

src/Components/Event/EventCard.tsx

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from 'remark-gfm';
+import remarkIns from 'remark-ins';
 import { Dic } from "~/Helpers/Entities";
 import { Models } from "~/Services/Status.Models";
 import { Authorized } from "../Auth/With";
@@ -94,8 +95,8 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
           </label>
 
           {Event.Description &&
-            <div className="w-full break-all text-xl font-medium text-slate-700">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>{Event.Description}</ReactMarkdown>
+            <div className="prose prose-sm w-full text-pretty text-xl font-medium text-slate-700">
+              <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns]}>{Event.Description}</ReactMarkdown>
             </div>}
         </div>
       </div>

src/Components/Event/EventEditor.tsx

@@ -4,6 +4,7 @@ import dayjs from "dayjs";
 import ReactMarkdown from 'react-markdown';
 import MdEditor from 'react-markdown-editor-lite';
 import remarkGfm from 'remark-gfm';
+import remarkIns from 'remark-ins';
 import { Dic, MDDecsPlugins, MDUpdatePlugins } from "~/Helpers/Entities";
 import { Models } from "~/Services/Status.Models";
 import { EventStatus, EventType, GetStatusList, IsIncident, IsOpenStatus } from "./Enums";
@@ -122,7 +123,7 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           <label className="text-sm font-medium text-gray-700">Description</label>
           <MdEditor
             placeholder="Optional description for the event"
-            renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>}
+            renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns]}>{text}</ReactMarkdown>}
             value={State.description}
             onChange={({ text }) => Actions.setDescription(text)}
             plugins={MDDecsPlugins}
@@ -143,7 +144,7 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           <label className="text-sm font-medium text-gray-700">Update Message</label>
           <MdEditor
             placeholder="Message detailing the updates"
-            renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>}
+            renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns]}>{text}</ReactMarkdown>}
             value={State.update}
             onChange={({ text }) => Actions.setUpdate(text)}
             plugins={MDUpdatePlugins}

src/Components/Event/EventLog.tsx

@@ -3,6 +3,7 @@ import dayjs from "dayjs";
 import { chain } from "lodash";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from 'remark-gfm';
+import remarkIns from 'remark-ins';
 import { Dic } from "~/Helpers/Entities";
 import { Models } from "~/Services/Status.Models";
 
@@ -52,8 +53,8 @@ export function EventLog({ Event }: { Event: Models.IEvent }) {
                 </div>
               </td>
 
-              <td className="text-pretty break-all w-full">
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>{history.Message}</ReactMarkdown>
+              <td className="prose text-pretty w-full">
+                <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns]}>{history.Message}</ReactMarkdown>
               </td>
             </tr>
           ))}

src/Components/New/NewForm.tsx

@@ -4,6 +4,7 @@ import { orderBy } from "lodash";
 import ReactMarkdown from 'react-markdown';
 import MdEditor from 'react-markdown-editor-lite';
 import remarkGfm from 'remark-gfm';
+import remarkIns from 'remark-ins';
 import { Dic, MDDecsPlugins } from "~/Helpers/Entities";
 import { useStatus } from "~/Services/Status";
 import { EventType, IsIncident } from "../Event/Enums";
@@ -67,7 +68,7 @@ export function NewForm() {
         <label className="text-sm font-medium text-gray-700">Description</label>
         <MdEditor
           placeholder="If there is any known information, please write it down here."
-          renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>}
+          renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns]}>{text}</ReactMarkdown>}
           value={State.description}
           onChange={({ text }) => Actions.setDescription(text)}
           plugins={MDDecsPlugins}

src/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 :root {
   color-scheme: light !important;