feat: md editor, rm useDebounce

nanqic · Jan 9, 2024 · 339b22e · 339b22e
1 parent e42e1ec
commit 339b22e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 27 deletions.
diff --git a/src/components/TextEdit.jsx b/src/components/TextEdit.jsx
@@ -1,15 +1,27 @@
-import { useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { Link } from 'wouter';
-import { saveEdit, useDebounce } from '../utils'
+import { saveEdit } from '../utils'
 import { useNotification } from '../components/NotificationContext';
+import MDEditor from "@uiw/react-md-editor";
+import "@uiw/react-md-editor/markdown-editor.css";
 
 export default function TextEdit({ content, setContent, setEditing }) {
-    const textRef = useRef();
+    const [value, setValue] = useState(content || localStorage.getItem("raw-content"))
 
-    const handleChange = useDebounce(({ target: { value } }) => {
-        localStorage.setItem("raw-content", value);
-        setContent(value)
-    }, 700)
+    useEffect(() => {
+        // Use a separate useEffect to handle the debouncedValue change
+        const timer = setTimeout(() => {
+            if (value == '' || !value) {
+                localStorage.removeItem("raw-content")
+                setContent('value')
+            } else {
+                localStorage.setItem("raw-content", value)
+            }
+            setContent(value)
+        }, 700);
+
+        return () => clearTimeout(timer);
+    }, [value]);
 
     const showNotification = useNotification();
 
@@ -40,20 +52,24 @@ export default function TextEdit({ content, setContent, setEditing }) {
 
     return (
         <div className='w-2/3 text-sm hidden sm:block sm:visible'>
-            <textarea ref={textRef} className="h-3/4 w-full p-2 border bg-gray-100 text-gray-700 rounded"
-                onChange={handleChange}
+
+            <MDEditor
+                height={500}
+                className="h-3/4 w-full p-2 border bg-gray-100 text-gray-700 rounded"
+                preview="edit"
+                onChange={setValue}
                 onInput={() => setEditing(true)}
                 onBlur={() => setEditing(false)}
-                defaultValue={content || localStorage.getItem("raw-content")}
-            ></textarea>
+                value={value}
+            ></MDEditor>
 
             {localStorage.getItem("token") &&
                 <button className='float-end bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded' onClick={handleSave}>保存</button>
             }
             <Link href={`${import.meta.env.VITE_BASE_URL || '/'}`}
                 className={`float-end mr-4 mt-1.5 scale-150 ${location.pathname.endsWith('/repl') ? '' : 'hidden'}`}
             >🏠</Link>
-            <button className='float-end bg-red-500 mr-4 hover:bg-red-700 text-white font-bold py-1 px-2 rounded' onClick={() => textRef.current.value = ''}>清空</button>
+            <button className='float-end bg-red-500 mr-4 hover:bg-red-700 text-white font-bold py-1 px-2 rounded' onClick={() => setValue()}>清空</button>
             <button className={`float-end bg-amber-300 hover:bg-amber-600 mr-4 text-white font-bold py-1 px-2 rounded ${location.pathname.includes('/repl') ? 'hidden' : ''}`} onClick={boxEdit}>原编辑页</button>
         </div>
     )

diff --git a/src/pages/Repl.jsx b/src/pages/Repl.jsx
@@ -5,22 +5,23 @@ const MarkmapHooks = lazy(() => import("@/components/MarkmapHooks"))
 const WanrMsg = lazy(() => import("@/components/WanrMsg"))
 
 export default function Repl() {
+    let cachedContent = localStorage.getItem("raw-content");
+
     const [editing, setEditing] = useState(false);
     const [showEdit, setShowEdit] = useState(true);
-    const [content, setContent] = useState();
+    const [content, setContent] = useState(cachedContent);
     const [isVertical, setIsVertical] = useState(screen.orientation?.type.includes("portrait"))
 
     const handleOrientationChange = () => {
         setIsVertical(screen.orientation?.type.includes("portrait"))
     }
 
     useEffect(() => {
-        let cachedContent = localStorage.getItem("raw-content");
         if (!cachedContent) {
             cachedContent = `# 学习\n\n## 学习方法\n- 主动学习\n- 高效学习\n- 深度学习\n\n## 学习计划\n- 设定目标\n- 制定计划\n- 实施反馈\n\n## 学习态度\n- 主动积极\n- 持续专注\n- 坚持不懈\n`
             localStorage.setItem("raw-content", cachedContent);
+            setContent(cachedContent)
         }
-        setContent(cachedContent)
 
         // 添加事件监听器
         window.addEventListener('orientationchange', handleOrientationChange);
@@ -29,7 +30,7 @@ export default function Repl() {
         return () => {
             window.removeEventListener('orientationchange', handleOrientationChange);
         };
-    }, [isVertical]);
+    }, [isVertical,content]);
 
     return (
         <div className="flex flex-row h-screen p-2">

diff --git a/src/utils.js b/src/utils.js
@@ -172,16 +172,6 @@ export const sortByFirstNum = (a, b) => {
     return parseInt(a.split('-')[0]) - parseInt(b.split('-')[0])
 }
 
-export function useDebounce(fn, wait) {
-    let timer = null
-    return (...args) => {
-        if (timer) {
-            clearTimeout(timer)
-        }
-        timer = setTimeout(() => fn(...args), wait)
-    }
-}
-
 export const transformer = new Transformer();
 
 export function renderToolbar(mm, wrapper) {

diff --git a/vite.config.js b/vite.config.js
@@ -84,7 +84,8 @@ export default ({ mode }) => {
               'markmap-common',
               'markmap-toolbar',
               'markmap-lib',
-            ]
+            ],
+            mdEditor:['@uiw/react-md-editor']
           }
         }
       }