feat(markdown-support): added markdown support

packages/interface/src/features/applications/components/ApplicationForm.tsx

@@ -99,6 +99,8 @@ export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element
             <Textarea placeholder="Type project description" rows={4} />
           </FormControl>
 
+          <small className="-mt-4">*Markdown Supported</small>
+
           <div className="gap-4 md:flex">
             <FormControl required className="flex-1" label="Website" name="websiteUrl">
               <Input placeholder="https://" />
@@ -156,10 +158,14 @@ export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element
             <Textarea placeholder="What have your project contributed to?" rows={4} />
           </FormControl>
 
+          <small className="-mt-4">*Markdown Supported</small>
+
           <FormControl required label="Impact description" name="impactDescription">
             <Textarea placeholder="What impact has your project had?" rows={4} />
           </FormControl>
 
+          <small className="-mt-4">*Markdown Supported</small>
+
           <ImpactTags />
 
           <FieldArray

packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { useMemo, type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
+import Markdown from "react-markdown";
 
 import { Heading } from "~/components/ui/Heading";
 import { Tag } from "~/components/ui/Tag";
@@ -36,13 +37,33 @@ const ValueField = ({ title, body = undefined, required = false }: IValueFieldPr
   );
 };
 
+const MarkdownField = ({ title, body = undefined, required = false }: IValueFieldProps): JSX.Element => {
+  const emptyPlaceholder = "(empty)";
+
+  return (
+    <div className="flex flex-col gap-2 ">
+      <b className={clsx(required && "text-xs after:text-blue-400 after:content-['*'] sm:text-sm")}>{title}</b>
+
+      <div className="text-light flex flex-col flex-wrap gap-2 text-gray-400">
+        {body === undefined && emptyPlaceholder}
+
+        {Array.isArray(body) && body.length === 0 && emptyPlaceholder}
+
+        {typeof body === "string" && body.length === 0 && emptyPlaceholder}
+
+        {((typeof body === "string" && body.length > 0) || typeof body !== "string") && body}
+      </div>
+    </div>
+  );
+};
+
 export const ReviewApplicationDetails = (): JSX.Element => {
   const form = useFormContext<Application>();
 
   const application = useMemo(() => form.getValues(), [form]);
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="markdown-support flex flex-col gap-8">
       <div>
         <Heading className="mb-1 font-sans text-xl font-semibold">Review & Submit</Heading>
 
@@ -54,7 +75,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
 
         <ValueField required body={application.name} title="Project name" />
 
-        <ValueField required body={application.bio} title="Project description" />
+        <MarkdownField required body={<Markdown>{application.bio}</Markdown>} title="Project description" />
 
         <div className="grid grid-flow-row gap-4 sm:grid-cols-2">
           <ValueField required body={application.websiteUrl} title="Website" />
@@ -94,9 +115,17 @@ export const ReviewApplicationDetails = (): JSX.Element => {
       <div className="flex flex-col gap-6 dark:text-white">
         <b className="text-lg">Contribution & Impact</b>
 
-        <ValueField required body={application.contributionDescription} title="Contribution description" />
+        <MarkdownField
+          required
+          body={<Markdown>{application.contributionDescription}</Markdown>}
+          title="Contribution description"
+        />
 
-        <ValueField required body={application.impactDescription} title="Impact description" />
+        <MarkdownField
+          required
+          body={<Markdown>{application.impactDescription}</Markdown>}
+          title="Impact description"
+        />
 
         <ValueField
           required

packages/interface/src/features/projects/components/ProjectDescriptionSection.tsx

@@ -1,5 +1,6 @@
 import { FaGithub, FaEthereum } from "react-icons/fa";
 import { RiGlobalLine } from "react-icons/ri";
+import Markdown from "react-markdown";
 
 import { Link } from "~/components/ui/Link";
 
@@ -23,7 +24,7 @@ export const ProjectDescriptionSection = ({
   <div className="flex flex-col gap-6">
     <p className="text-lg uppercase">{title}</p>
 
-    {description.length > 0 && <p className="text-lg text-gray-400">{description}</p>}
+    {description.length > 0 && <Markdown className="text-gray-400">{description}</Markdown>}
 
     {contributions.length > 0 && (
       <div className="border-l border-gray-200 px-4">

packages/interface/src/features/projects/components/ProjectDetails.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import Markdown from "react-markdown";
 
 import { Heading } from "~/components/ui/Heading";
 import { Navigation } from "~/components/ui/Navigation";
@@ -30,7 +31,7 @@ const ProjectDetails = ({ pollId, project, action = undefined }: IProjectDetails
   const roundState = useRoundState({ pollId });
 
   return (
-    <div className="relative dark:text-white">
+    <div className="markdown-support relative dark:text-white">
       <div className="mb-7 px-2">
         <Navigation pollId={pollId} projectName={metadata.data?.name ?? "project name"} />
       </div>
@@ -55,7 +56,7 @@ const ProjectDetails = ({ pollId, project, action = undefined }: IProjectDetails
 
       <ProjectContacts author={payoutAddress} github={github} twitter={twitter} website={websiteUrl} />
 
-      <p className="px-2 text-gray-400">{bio}</p>
+      <Markdown className="px-2 text-gray-400">{bio}</Markdown>
 
       <div className="my-8 flex flex-col gap-8 px-2">
         <p className="text-xl uppercase">

packages/interface/src/features/projects/components/ProjectItem.tsx

@@ -5,6 +5,7 @@ import { Heading } from "~/components/ui/Heading";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { config } from "~/config";
 import { formatNumber } from "~/utils/formatNumber";
+import { removeMarkdown } from "~/utils/removeMarkdown";
 import { useRoundState } from "~/utils/state";
 import { ERoundState } from "~/utils/types";
 
@@ -53,7 +54,7 @@ export const ProjectItem = ({
 
         <div className="mb-2 line-clamp-2 h-10 text-sm text-gray-400">
           <Skeleton className="w-full" isLoading={isLoading}>
-            {metadata.data?.bio}
+            {removeMarkdown(metadata.data?.bio || "")}
           </Skeleton>
         </div>
 

packages/interface/src/styles/globals.css

@@ -54,4 +54,14 @@
     text-transform: uppercase;
     color: #888888;
   }
+
+  .markdown-support ul,
+  .markdown-support ol {
+    list-style: revert;
+    padding-left: 1.5rem;
+  }
+
+  .markdown-support p {
+    margin-top: 0.5rem;
+  }
 }

packages/interface/src/utils/removeMarkdown.ts

@@ -0,0 +1,15 @@
+export function removeMarkdown(text: string): string {
+  return text
+    .replace(/!\[.*?\]\(.*?\)/g, "") // Remove images
+    .replace(/\[.*?\]\(.*?\)/g, "") // Remove links
+    .replace(/`{1,2}[^`](.*?)`{1,2}/g, "$1") // Remove inline code
+    .replace(/```[\s\S]*?```/g, "") // Remove code blocks
+    .replace(/^[#]+ /gm, "") // Remove headers
+    .replace(/(\*\*|__)(.*?)\1/g, "$2") // Remove bold
+    .replace(/(\*|_)(.*?)\1/g, "$2") // Remove emphasis
+    .replace(/~~(.*?)~~/g, "$1") // Remove strikethrough
+    .replace(/> /gm, "") // Remove blockquotes
+    .replace(/^\s*\n/gm, "") // Remove empty lines
+    .replace(/^\s*-\s+/gm, "") // Remove list items
+    .replace(/^\s*\d+\.\s+/gm, ""); // Remove numbered list items
+}