chore: markdown

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