This commit is contained in:
Daniel Kluge 2021-12-14 23:45:00 +01:00
parent d6bd11f65e
commit 92e32e0674
5 changed files with 19 additions and 19 deletions

View File

@ -1,7 +1,7 @@
import type { NextPage } from "next";
import React from "react"
import { commandCompletion } from "../lib/commands"
import styles from "../styles/REPLInput.module.css"
import React from "react";
import { commandCompletion } from "../lib/commands";
import styles from "../styles/REPLInput.module.css";
const REPLInput: NextPage = () => {
const typed = React.createRef<HTMLSpanElement>();
@ -14,7 +14,7 @@ const REPLInput: NextPage = () => {
setCurrentCmd(suggest);
if (typed.current) typed.current.innerHTML = currentInput;
if (completion.current) completion.current.innerHTML = suggest.substring(currentInput.length);
}
};
const tabComplete = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Tab" && currentCmd !== "") {
@ -24,12 +24,12 @@ const REPLInput: NextPage = () => {
if(completion.current) completion.current.innerHTML = "";
}
return false;
}
};
return <div className={styles.wrapper}>
<input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} />
<span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
</div>
}
</div>;
};
export default REPLInput;

View File

@ -1,4 +1,4 @@
const commandList = ["about", "navigate", "external", "help", "ed", "nano"]
const commandList = ["about", "navigate", "external", "help", "ed", "nano"];
export function commandCompletion(input: string): string {
if (input === "") return "";

View File

@ -1,8 +1,8 @@
import type { AppProps } from 'next/app'
import "../styles/globals.css"
import type { AppProps } from "next/app";
import "../styles/globals.css";
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}
export default MyApp
export default MyApp;

View File

@ -1,5 +1,5 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
name: string
@ -9,5 +9,5 @@ export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
res.status(200).json({ name: "John Doe" });
}

View File

@ -1,10 +1,10 @@
import type { NextPage } from 'next'
import REPLInput from '../components/REPLInput'
import type { NextPage } from "next";
import REPLInput from "../components/REPLInput";
const Home: NextPage = () => {
return (
<REPLInput />
)
}
);
};
export default Home
export default Home;