initial commit

src/components/EditorTextArea.js

@@ -0,0 +1,29 @@
+import ReactEditor from 'react-simple-code-editor';
+import { getHighlighter } from '../highlighting';
+
+import 'prismjs/themes/prism.css';
+
+export default function EditorTextArea({ code, setCode, language }) {
+  const highlight = getHighlighter(language);
+
+  function highlightWithLineNumbers(input, grammar) {
+    return highlight(input, grammar)
+      .split('\n')
+      .map((line, i) => `<span class='editorLineNumber'>${i + 1}</span>${line}`)
+      .join('\n');
+  }
+
+  return (
+    <main>
+      <ReactEditor
+        value={code}
+        onValueChange={setCode}
+        highlight={highlightWithLineNumbers}
+        placeholder={'Type some code...'}
+        padding={10}
+        textareaId='code-area'
+        className='editor'
+      />
+    </main>
+  )
+}