feat: update Markdown components (#1578)

package.json

@@ -46,8 +46,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@sentry/react": "^7.43.0",
     "@sentry/tracing": "^7.43.0",
-    "@uiw/react-markdown-preview": "^4.1.15",
-    "@uiw/react-md-editor": "^3.14.3",
     "@wagmi/core": "^1.3.9",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
@@ -67,6 +65,7 @@
     "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
+    "react-markdown": "^9.0.0",
     "react-query": "^3.39.3",
     "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0",

src/components/Form/FormikMarkdownEditor.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import React from 'react';
 
-import { MarkdownEditor, MarkdownEditorProps } from '../Markdown';
+import { MarkdownEditor, MarkdownEditorProps } from '../MarkdownEditor';
 
 export interface FormikMarkdownEditorProps
   extends Omit<MarkdownEditorProps, 'name' | 'onChange' | 'value' | 'onBlur'> {

src/components/Markdown/Editor/index.stories.tsx → src/components/MarkdownEditor/index.stories.tsx

@@ -1,10 +1,9 @@
 import { Meta } from '@storybook/react';
-import React from 'react';
 import { State } from 'react-powerplug';
 
 import { withCenterStory } from 'stories/decorators';
 
-import MarkdownEditor from '.';
+import { MarkdownEditor } from '.';
 
 export default {
   title: 'Components/Markdown/Editor',

src/components/MarkdownEditor/index.tsx

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'translation';
+import { cn } from 'utilities';
+
+import { MarkdownViewer } from '../MarkdownViewer';
+import { Tabs } from '../Tabs';
+
+export interface MarkdownEditorProps {
+  value: string;
+  onChange: (text: string | undefined) => void;
+  name: string;
+  placeholder: string;
+  hasError?: boolean;
+  className?: string;
+  label?: string;
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement, Element>) => void;
+}
+
+export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  value,
+  onChange,
+  name,
+  placeholder,
+  hasError,
+  className,
+  label,
+  onBlur,
+}) => {
+  const { t } = useTranslation();
+
+  const tabsContent = useMemo(
+    () => [
+      {
+        title: t('markdownEditor.markdownTabLabel'),
+        content: (
+          <textarea
+            name={name}
+            placeholder={placeholder}
+            onChange={e => onChange(e.currentTarget.value)}
+            onBlur={onBlur}
+            value={value}
+            data-hasError={hasError}
+            className={cn(
+              'hover -mt-6 min-h-[12rem] w-full rounded-xl border border-lightGrey bg-background p-4 font-semibold outline-none transition-colors hover:border-grey focus:border-blue',
+              hasError && 'border-red hover:border-red focus:border-red',
+            )}
+          />
+        ),
+      },
+      {
+        title: t('markdownEditor.previewTabLabel'),
+        content: (
+          <div className="-mt-6 w-full">
+            {value ? (
+              <MarkdownViewer className="break-words" content={value} />
+            ) : (
+              <p className="text-grey">{t('markdownEditor.placeholder')}</p>
+            )}
+          </div>
+        ),
+      },
+    ],
+    [value],
+  );
+
+  return (
+    <div className={cn(className)}>
+      {!!label && (
+        <p className={cn('mb-1 text-sm font-semibold', hasError && 'text-red')}>{label}</p>
+      )}
+
+      <Tabs tabsContent={tabsContent} />
+    </div>
+  );
+};

src/components/Markdown/Viewer/index.stories.tsx → src/components/MarkdownViewer/index.stories.tsx

@@ -1,9 +1,8 @@
 import { Meta } from '@storybook/react';
-import React from 'react';
 
 import { withCenterStory } from 'stories/decorators';
 
-import MarkdownViewer from '.';
+import { MarkdownViewer } from '.';
 
 export default {
   title: 'Components/Markdown/Viewer',