chore: markdown

src/components/Markdown/Editor.tsx

@@ -1,21 +1,41 @@
+import { FC, useEffect, useState } from 'react';
 import Editor from "@monaco-editor/react";
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
+import Markdown from '@/components/Markdown';
 import './index.scss';
 
-const MarkdownEditor = () => {
+interface MarkdownEditorProps {
+  value?: string;
+  onChange?: (v: string) => void;
+}
+
+const MarkdownEditor: FC<MarkdownEditorProps> = ({ value = '', onChange }) => {
+  const [content, setContent] = useState(value);
+
+  useEffect(() => {
+    setContent(value);
+    onChange && onChange(value);
+  }, [value])
+
+  const handleEdit = (e: any) => {
+    setContent(e);
+    onChange && onChange(e);
+  }
+
   return (
-    <div>
+    <div className="md-main">
       <PanelGroup direction="horizontal">
         <Panel>
           <Editor
-            height="calc(100vh - 120px)"
             language="markdown"
+            value={content}
+            onChange={handleEdit}
           />
         </Panel>
         <PanelResizeHandle className="resize-handle" />
         <Panel collapsible={true}>
-          <div>1284</div>
+          <Markdown className="edit-preview">{content}</Markdown>
         </Panel>
         </PanelGroup>
     </div>

src/components/Markdown/index.scss

@@ -1,11 +1,24 @@
 .markdown-body {
+  height: 100%;
+  overflow: auto;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
 
+
+  &.edit-preview {
+    padding: 10px;
+    font-size: 14px;
+  }
+
   pre, code {
     font-family: monospace, monospace;
   }
 }
 
+.md-main {
+  height: calc(100vh - 130px);
+  overflow: hidden;
+}
+
 .resize-handle {
   width: 0.25rem;
   transition: 250ms linear background-color;

src/components/Markdown/index.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
+import clsx from 'clsx';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import agate from 'react-syntax-highlighter/dist/esm/styles/hljs/agate';
 
@@ -7,36 +9,40 @@ import './index.scss';
 
 interface MarkdownProps {
   children: string;
+  className?: string;
 }
 
-const Markdown: FC<MarkdownProps> = ({ children }) => {
+const Markdown: FC<MarkdownProps> = ({ children, className }) => {
 
   return (
-    <div className='markdown-body'>
-      <ReactMarkdown
-        children={children}
-        linkTarget="_blank"
-        components={{
-          code({node, inline, className, children, ...props}) {
-            const match = /language-(\w+)/.exec(className || '')
-            return !inline && match ? (
-              <SyntaxHighlighter
-                children={String(children).replace(/\n$/, '')}
-                style={agate as any}
-                language={match[1]}
-                showLineNumbers
-                lineNumberStyle={{ color: '#999' }}
-                PreTag="div"
-                {...props}
-              />
-            ) : (
-              <code className={className} {...props}>
-                {children}
-              </code>
-            )
-          }
-        }}
-      />
+    <div className={clsx(className, 'markdown-body')}>
+      <div>
+        <ReactMarkdown
+          children={children}
+          linkTarget="_blank"
+          remarkPlugins={[remarkGfm]}
+          components={{
+            code({node, inline, className, children, ...props}) {
+              const match = /language-(\w+)/.exec(className || '')
+              return !inline && match ? (
+                <SyntaxHighlighter
+                  children={String(children).replace(/\n$/, '')}
+                  style={agate as any}
+                  language={match[1]}
+                  showLineNumbers
+                  lineNumberStyle={{ color: '#999' }}
+                  PreTag="div"
+                  {...props}
+                />
+              ) : (
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              )
+            }
+          }}
+        />
+      </div>
     </div>
   )
 }