chore: markdown

package.json

@@ -46,6 +46,7 @@
     "react-resizable-panels": "^0.0.33",
     "react-router-dom": "^6.4.5",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

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>
   )
 }

src/main.scss

@@ -69,12 +69,11 @@ html, body {
   }
 }
 
-.chat-file-path,
-.chat-sync-path {
+.chat-file-path {
   font-size: 12px;
   font-weight: 500;
   color: #888;
-  margin-bottom: 5px;
+  margin-bottom: 3px;
   line-height: 16px;
 
   > div {

src/view/markdown/index.scss

@@ -0,0 +1,15 @@
+
+.md-task {
+  margin-bottom: 5px;
+
+  .ant-breadcrumb-link {
+    padding: 3px 5px;
+    transition: all 300ms ease;
+    border-radius: 4px;
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+      background-color: rgba(0, 0, 0, 0.06);
+      cursor: pointer;
+    }
+  }
+}

src/view/markdown/index.tsx

@@ -3,30 +3,41 @@ import { useLocation } from 'react-router-dom';
 import { Breadcrumb } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import MarkdownEditor from '@/components/Markdown/Editor';
+import { fs, shell } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
 import { getPath } from '@/view/notes/config';
+import './index.scss';
 
 export default function Markdown() {
   const [filePath, setFilePath] = useState('');
+  const [source, setSource] = useState('');
   const location = useLocation();
   const state = location?.state;
 
   useInit(async () => {
-    setFilePath(await getPath(state));
+    const file = await getPath(state);
+    setFilePath(file);
+    setSource(await fs.readTextFile(file))
   })
 
+  const handleChange = async (v: string) => {
+    await fs.writeTextFile(filePath, v);
+  };
+
   return (
     <>
-      <Breadcrumb separator=" ">
-        <Breadcrumb.Item href="">
-          <ArrowLeftOutlined />
-        </Breadcrumb.Item>
-        <Breadcrumb.Item href="">
-          {filePath}
-        </Breadcrumb.Item>
-      </Breadcrumb>
-      <MarkdownEditor />
+      <div className="md-task">
+        <Breadcrumb separator="">
+          <Breadcrumb.Item onClick={() => history.go(-1)}>
+            <ArrowLeftOutlined />
+          </Breadcrumb.Item>
+          <Breadcrumb.Item onClick={() => shell.open(filePath)}>
+            {filePath}
+          </Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+      <MarkdownEditor value={source} onChange={handleChange} />
     </>
   );
 }