Clickeable command

components/REPL/REPLHistory.tsx

@@ -1,6 +1,6 @@
 import { NextPage } from "next";
 import Link from "next/link";
-import { MutableRefObject } from "react";
+import { BaseSyntheticEvent, MutableRefObject } from "react";
 import styles from "../../styles/REPL/REPLHistory.module.css";
 
 interface REPLHistoryParams {
@@ -11,13 +11,25 @@ interface REPLHistoryParams {
 const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
     const focusInput = () => {if (inputRef.current) inputRef.current.focus();};
 
-    const parseLine = (line: string) => {
+    const forceInput = (e: BaseSyntheticEvent) => {
-        if (line === "") return "\u00A0";
+        const command = (e.target as HTMLSpanElement).innerHTML;
+        if (inputRef.current) {
+            inputRef.current.value = command;
+            // TODO
+            // Fix this as this currently doesn't work
+            inputRef.current.dispatchEvent(new KeyboardEvent("keydown", {
+                key: "Enter",
+                keyCode: 13,
+            }));
+        }
+        return true;
+    }
 
+    const makeLinks = (line: string) => {
         let idxStart = line.indexOf("#{");
         let idxSep = line.indexOf("|", idxStart);
         let idxEnd = line.indexOf("}", idxSep);
-        if (idxStart === -1 || idxSep === -1 || idxEnd === -1) return line;
+        if (idxStart === -1 || idxSep === -1 || idxEnd === -1) return [line];
 
         const result = []
 
@@ -28,14 +40,45 @@ const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
             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 result;
+    }
+
+    const makeCommands = (line: string|JSX.Element, indexKey: number) => {
+        if (typeof line !== "string") return line;
+
+        let idxStart = line.indexOf("%{");
+        let idxEnd = line.indexOf("}", idxStart);
+        if (idxStart === -1 || idxEnd === -1) return line;
+
+        const result = []
+
+        while (idxStart !== -1 && idxEnd !== -1) {
+            const cmdText = line.substring(idxStart+2, idxEnd);
+
+            result.push(line.substring(0, idxStart));
+            result.push(<span className={styles.cmd} onClick={forceInput} key={`${indexKey}${line.length}${cmdText}`}>{cmdText}</span>);
+            
+            
+            line = line.substring(idxEnd+1)
+            idxStart = line.indexOf("%{");
+            idxEnd = line.indexOf("}", idxStart);
+        }
+        result.push(line.substring(idxEnd+1))
+        return result;
+    }
+
+    const parseLine = (line: string) => {
+        if (line === "") return "\u00A0";
+        
+        const resultLinks = makeLinks(line);
+        const resultAll = resultLinks.map(makeCommands)
+        return resultAll.flat()
     }
 
     return <div className={styles.container} onClick={focusInput}>

lib/commands/definitions.ts

@@ -88,7 +88,7 @@ const about: Command = {
             "Even when you open a project page you don't need your mouse - just press Esc to close it.",
             "",
             "I hope you enjoy your stay here!",
-            "If you wanted more information about the page itself, type 'project this' or 'help -t'."
+            "If you wanted more information about the page itself, type %{project this} or %{help -t}."
         ];
     }
 };

styles/REPL/REPLHistory.module.css

@@ -28,5 +28,8 @@
 
 .line .cmd {
     cursor: pointer;
-    text-decoration: underline;
+    text-decoration: underline dotted;
 }
+
+.line .cmd::before {content: "'"}
+.line .cmd::after {content: "'"}