add: auto link feature

src/components/Markdowns/MarkdownEditor.js

@@ -13,23 +13,23 @@ const MarkdownEditor = () => {
     const { id } = useParams();
     const [title, setTitle] = useState("");
     const [content, setContent] = useState("");
+    const [shortcut, setShortcut] = useState("");
     const [pathId, setPathId] = useState(1);
     const {data: markdown, isLoading, error} = useMarkdown(id);
     const saveMarkdown = useSaveMarkdown();
 
-
-
     useEffect(() => {
         if(markdown){
             setTitle(markdown.title);
             setContent(markdown.content);
+            setShortcut(markdown.shortcut);
             setPathId(markdown.path_id);
         }
     }, [markdown]);
 
     const handleSave = () => {
         saveMarkdown.mutate(
-            {id, data: {title, content, path_id: pathId}},
+            {id, data: {title, content, path_id: pathId, shortcut}},
             {
                 onSuccess: () => {
                     navigate("/");
@@ -56,10 +56,8 @@ const MarkdownEditor = () => {
         <div className="container mt-5 markdown-editor-container">
             <h2 className="title is-4">{id ? "Edit Markdown" : "Create Markdown"}</h2>
             <div className="columns">
-                {/* Editor Column */}
                 <div className="column is-half">
                     <form>
-                        {/* Title Field */}
                         <div className="field">
                             <label className="label">Title</label>
                             <div className="control">
@@ -73,7 +71,18 @@ const MarkdownEditor = () => {
                             </div>
                         </div>
 
-                        {/* PathManager Field */}
+                        <div className="field">
+                            <label className="label">Shortcut</label>
+                            <div className="control">
+                                <input
+                                    className="input"
+                                    type="text"
+                                    placeholder="Enter shortcut"
+                                    value={shortcut}
+                                    onChange={(e) => setShortcut(e.target.value)}
+                                />
+                            </div>
+                        </div>
                         <div className="field">
                             <label className="label">Path</label>
                             <PathManager
@@ -82,7 +91,6 @@ const MarkdownEditor = () => {
                             />
                         </div>
 
-                        {/* Content Field */}
                         <div className="field">
                             <label className="label">Content</label>
                             <div className="control">
@@ -96,7 +104,6 @@ const MarkdownEditor = () => {
                             </div>
                         </div>
 
-                        {/* Save Button */}
                         <div className="field">
                             <div className="control">
                                 <button
@@ -112,7 +119,6 @@ const MarkdownEditor = () => {
                     </form>
                 </div>
 
-                {/* Preview Column */}
                 <div className="column is-half">
                     <h3 className="subtitle is-5">Preview</h3>
                     <MarkdownView content={content} height='70vh'/>

src/components/Markdowns/MarkdownView.js

@@ -8,12 +8,18 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
 import "katex/dist/katex.min.css";
 import "./MarkdownView.css";
+import {useLinks} from "../../utils/markdown-queries";
 
 const MarkdownView = ({ content, height="auto" }) => {
+    const {data: links, isLoading} = useLinks();
+
+    if (isLoading)
+        return <p>Loading...</p>
+    const definitions = "\n<!-- Definitions -->\n" + links.join("\n");
     return (
         <div className="markdown-preview" style={{height}}>
             <ReactMarkdown
-                children={content}
+                children={content + "\n" + definitions}
                 remarkPlugins={[remarkMath, remarkGfm]}
                 rehypePlugins={[rehypeKatex, rehypeRaw]}
                 components={{

src/utils/markdown-queries.js

@@ -103,4 +103,10 @@ export const useSearchMarkdown = (keyword) => {
             enabled: !!keyword,
         }
     );
-};
+};
+
+
+export const useLinks = () => {
+    const config = useConfig();
+    return useQuery(["links"], () => fetch_(`${config.BACKEND_HOST}/api/markdown/links`));
+}