MGU-4 Proposals page - Add Markdown view

app/(routes)/create-proposal/page.tsx

@@ -2,7 +2,6 @@
 import styles from "./page.module.scss";
 import {CreateProposalContentStep, CreateProposalWalletStep} from "@components/create-proposal";
 import {CreateProposalProvider} from "@/app/providers/create-proposal.provider";
-import { Breadcrumbs } from "@/app/components/_shared/breadcrumbs/breadcrumbs.component";
 
 const Page = () => {
     return <main className="flex flex-col place-items-center">

app/(routes)/my-voting-power/page.tsx

@@ -19,7 +19,6 @@ import {
     differenceInMonths,
     differenceInCalendarWeeks, differenceInCalendarMonths,
 } from "date-fns";
-import { Breadcrumbs } from "@/app/components/_shared/breadcrumbs/breadcrumbs.component";
 
 const Page = () => {
 

app/(routes)/proposals/[id]/page.tsx

@@ -13,7 +13,7 @@ import classNames from "classnames";
 import {useState} from "react";
 import { CopyIcon } from "@/app/components/_icons/copy.icon";
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Breadcrumbs } from "@/app/components/_shared/breadcrumbs/breadcrumbs.component";
+import { MarkdownView } from "@/app/components/_shared/markdown-view/markdown-view.component";
 
 const validationSchema = object({
     votingPower: number().required().typeError('Invalid number').max(400)
@@ -83,7 +83,7 @@ const Page = () => {
         <div className="mt-8 flex flex-col md:flex-row md:justify-between place-items-start gap-x1 ">
             <div className={classNames(styles.details, "flex-1")}>
                 <h3>Details</h3>
-                <div dangerouslySetInnerHTML={{__html: proposal.description}}/>
+                <MarkdownView markdown={proposal.description} />
             </div>
             <div className={styles.proposal_addons}>
                 <div className={classNames(styles.mobile_controls)}>

app/components/_shared/markdown-editor/markdown-editor.component.tsx

@@ -1,42 +1,38 @@
-import '@mdxeditor/editor/style.css';
-import styles from './markdown-editor.module.scss';
+import { TabList } from "@components/_shared";
 import BaseComponentProps from "@interfaces/base-component-props.interface";
-import classNames from "classnames";
-import {TabList} from "@components/_shared";
-import {MutableRefObject, Suspense, useEffect, useRef, useState} from "react";
 import {
     BlockTypeSelect,
-    BoldItalicUnderlineToggles, codeBlockPlugin, codeMirrorPlugin,
+    BoldItalicUnderlineToggles,
     CodeToggle,
-    CreateLink, diffSourcePlugin, headingsPlugin, imagePlugin,
+    CreateLink,
     InsertCodeBlock,
     InsertImage,
-    InsertThematicBreak, linkDialogPlugin, linkPlugin,
+    InsertThematicBreak,
+    ListsToggle,
+    MDXEditor,
+    MDXEditorMethods,
+    UndoRedo,
+    codeBlockPlugin, codeMirrorPlugin,
+    diffSourcePlugin, headingsPlugin, imagePlugin,
+    linkDialogPlugin, linkPlugin,
     listsPlugin,
-    ListsToggle, markdownShortcutPlugin, MDXEditor,
-    MDXEditorMethods, quotePlugin, thematicBreakPlugin,
-    toolbarPlugin,
-    UndoRedo
+    markdownShortcutPlugin,
+    quotePlugin, thematicBreakPlugin,
+    toolbarPlugin
 } from "@mdxeditor/editor";
-import { remark } from 'remark';
-import html from 'remark-html';
+import '@mdxeditor/editor/style.css';
+import classNames from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { MarkdownView } from '../markdown-view/markdown-view.component';
+import styles from './markdown-editor.module.scss';
 interface MarkdownEditorProps extends BaseComponentProps {
     value: string;
     markdownChanged: (value: string) => void;
 }
 export const MarkdownEditor = ({className, style, value, markdownChanged }:MarkdownEditorProps) => {
-
     const [markdown, setMarkdown] = useState('');
-    const [markdownParsed, setMarkdownParsed] = useState(null as string | null);
-
     const editorRef = useRef<MDXEditorMethods>(null);
 
-    useEffect(() => {
-        remark().use(html).process(markdown).then((file) => {
-            setMarkdownParsed(file.toString());
-        });
-    }, [markdown]);
-
     useEffect(() => {
         setMarkdown(value);
     }, [value]);
@@ -50,43 +46,39 @@ export const MarkdownEditor = ({className, style, value, markdownChanged }:Markd
         <TabList tabs={['Write', 'Preview']} headerPlacement="left">
             <div>
                 <MDXEditor ref={editorRef}
-                           className={styles.editor}
-                           contentEditableClassName={classNames('prose', styles.editor__contentEditable)}
-                           markdown={markdown}
-                           onChange={updateValue}
-                           plugins={[
-                               toolbarPlugin({
-                                   toolbarContents: () => <>
-                                       <UndoRedo/>
-                                       <BlockTypeSelect/>
-                                       <BoldItalicUnderlineToggles/>
-                                       <CodeToggle/>
-                                       <CreateLink/>
-                                       <InsertCodeBlock/>
-                                       <InsertImage/>
-                                       <ListsToggle/>
-                                       <InsertThematicBreak/>
-                                   </>
-                               }),
-                               listsPlugin(),
-                               quotePlugin(),
-                               headingsPlugin(),
-                               linkPlugin(),
-                               linkDialogPlugin(),
-                               imagePlugin(),
-                               thematicBreakPlugin(),
-                               codeBlockPlugin({defaultCodeBlockLanguage: 'txt'}),
-                               codeMirrorPlugin({codeBlockLanguages: {js: 'JavaScript', css: 'CSS', txt: 'text', tsx: 'TypeScript'}}),
-                               diffSourcePlugin({viewMode: 'rich-text', diffMarkdown: 'boo'}),
-                               markdownShortcutPlugin()
-                           ]}
+                    className={styles.editor}
+                    contentEditableClassName={classNames('prose', styles.editor__contentEditable)}
+                    markdown={markdown}
+                    onChange={updateValue}
+                    plugins={[
+                        toolbarPlugin({
+                            toolbarContents: () => <>
+                                <UndoRedo/>
+                                <BlockTypeSelect/>
+                                <BoldItalicUnderlineToggles/>
+                                <CodeToggle/>
+                                <CreateLink/>
+                                <InsertCodeBlock/>
+                                <InsertImage/>
+                                <ListsToggle/>
+                                <InsertThematicBreak/>
+                            </>
+                        }),
+                        listsPlugin(),
+                        quotePlugin(),
+                        headingsPlugin(),
+                        linkPlugin(),
+                        linkDialogPlugin(),
+                        imagePlugin(),
+                        thematicBreakPlugin(),
+                        codeBlockPlugin({defaultCodeBlockLanguage: 'txt'}),
+                        codeMirrorPlugin({codeBlockLanguages: {js: 'JavaScript', css: 'CSS', txt: 'text', tsx: 'TypeScript'}}),
+                        diffSourcePlugin({viewMode: 'rich-text', diffMarkdown: 'boo'}),
+                        markdownShortcutPlugin()
+                    ]}
                 />
             </div>
-            <div className="prose prose-neutral dark:prose-invert">
-                {
-                    markdownParsed && <div dangerouslySetInnerHTML={{ __html: markdownParsed }} />
-                }
-            </div>
+            <MarkdownView markdown={markdown} />
         </TabList>
     </div>
 }

app/components/_shared/markdown-view/markdown-view.component.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { remark } from 'remark';
+import html from 'remark-html';
+import styles from './markdown-view.module.scss';
+import classNames from "classnames";
+
+type MarkdownViewProps = {
+    markdown: string;
+}
+
+export const MarkdownView = ({ markdown }: MarkdownViewProps) => {
+    const [markdownParsed, setMarkdownParsed] = useState('');
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const file = await remark().use(html).process(markdown);
+                setMarkdownParsed(file.toString());
+            } catch (err) {
+                console.log('Error while parsing markdown', err);
+            }
+        })();
+    }, [markdown]);
+
+    return <div className={classNames('prose', styles.container)} >
+        {
+            markdownParsed && <div dangerouslySetInnerHTML={{ __html: markdownParsed }} />
+        }
+    </div >
+}

app/components/_shared/markdown-view/markdown-view.module.scss

@@ -0,0 +1,15 @@
+@import "@/app/brand";
+
+.container {
+  color: var(--theme-foreground-color);
+  font-size: $theme-unit * 4;
+  line-height: $theme-unit * 4;
+
+  ul li::marker {
+    color: var(--theme-foreground-color);
+  }
+
+  li {
+    margin: unset;
+  }
+}