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

lib/commands/definitions.ts

@@ -180,7 +180,7 @@ const project: Command = {
 
 const exitCmd: Command = {
     name: "exit",
-    desc: "Tries to close this tab. Mostly fails because of restrictions.",
+    desc: "Tries to close this tab.",
     execute: () => {
         if (typeof window !== undefined) {
             window.opener = null;
@@ -189,8 +189,8 @@ const exitCmd: Command = {
         }
         return [
             "If you can read this, closing the window did not work.",
-            "This is because of restriction in JavaScript.",
+            "This is most likely because of a restriction in JavaScript.",
-            "Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Window/close"
+            "#{Read more here|https://developer.mozilla.org/en-US/docs/Web/API/Window/close}."
         ]
     }
 }

styles/REPL/REPLHistory.module.css

@@ -12,4 +12,21 @@
     font-family: inherit;
     display: block;
     margin: 0;
+}
+
+.line a:link, .line a:visited, .line a:hover, .line a:active {
+    color: inherit;
+    text-decoration: underline;
+}
+
+.line a::after {
+    content: "⤤";
+    color: var(--repl-color);
+    font-size: 80%;
+    text-decoration: none;
+}
+
+.line .cmd {
+    cursor: pointer;
+    text-decoration: underline;
 }