48 lines
1.0 KiB
JavaScript
48 lines
1.0 KiB
JavaScript
/*
|
|
* Copyright (c) 2020 The ZMK Contributors
|
|
*
|
|
* SPDX-License-Identifier: CC-BY-NC-SA-4.0
|
|
*/
|
|
|
|
import React from "react";
|
|
import { useAsync } from "react-async";
|
|
|
|
import { initParser, upgradeKeymap } from "@site/src/keymap-upgrade";
|
|
import CodeBlock from "@theme/CodeBlock";
|
|
|
|
import styles from "./styles.module.css";
|
|
|
|
export default function KeymapUpgrader() {
|
|
const { error, isPending } = useAsync(initParser);
|
|
|
|
if (isPending) {
|
|
return <p>Loading...</p>;
|
|
}
|
|
|
|
if (error) {
|
|
return <p className="error">Error: {error.message}</p>;
|
|
}
|
|
|
|
return <Editor />;
|
|
}
|
|
|
|
function Editor() {
|
|
const [keymap, setKeymap] = React.useState("");
|
|
const upgraded = upgradeKeymap(keymap);
|
|
|
|
return (
|
|
<div>
|
|
<textarea
|
|
className={styles.editor}
|
|
placeholder="Paste keymap here"
|
|
spellCheck={false}
|
|
value={keymap}
|
|
onChange={(e) => setKeymap(e.target.value)}
|
|
></textarea>
|
|
<div className={styles.result}>
|
|
<CodeBlock metastring={'title="Upgraded Keymap"'}>{upgraded}</CodeBlock>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|