Links in commands

components/REPL/REPLHistory.tsx

@@ -1,4 +1,5 @@
 import { NextPage } from "next";
+import Link from "next/link";
 import { MutableRefObject } from "react";
 import styles from "../../styles/REPL/REPLHistory.module.css";
 
@@ -10,8 +11,39 @@ interface REPLHistoryParams {
 const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
     const focusInput = () => {if (inputRef.current) inputRef.current.focus();};
 
+    const parseLine = (line: string) => {
+        if (line === "") return "\u00A0";
+        
+        let idxStart = line.indexOf("#{");
+        let idxSep = line.indexOf("|", idxStart);
+        let idxEnd = line.indexOf("}", idxSep);
+        if (idxStart === -1 || idxSep === -1 || idxEnd === -1) return line;
+
+        const result = []
+
+        while (idxStart !== -1 && idxSep !== -1 && idxEnd !== -1) {
+            const linkText = line.substring(idxStart+2, idxSep);
+            const linkHref = line.substring(idxSep+1, idxEnd);
+
+            result.push(line.substring(0, idxStart));
+            result.push(<Link href={linkHref}><a className={styles.link}>{linkText}</a></Link>);
+            
+
+            line = line.substring(idxEnd+1)
+            idxStart = line.indexOf("#{");
+            idxSep = line.indexOf("|", idxStart);
+            idxEnd = line.indexOf("}", idxSep);
+        }
+        result.push(line.substring(idxEnd+1))
+        return result
+    }
+
     return <div className={styles.container} onClick={focusInput}>
-        { history.map((value, idx) => <pre className={styles.line} key={idx}>{value === "" ? "\u00A0" : value}</pre>) }
+        { history.map((value, idx) => {
+            return <div className={styles.line} key={idx}>
+                {parseLine(value)}
+            </div>}
+        )}
     </div>;
 };