From 0d56bf7df34197754ade0964b77e7c2de5cfa97d Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Sat, 3 Oct 2020 22:56:41 +0300
Subject: [PATCH] Use simple-code-editor

---
 package.json |  1 +
 src/App.tsx  | 15 ++++++++++++---
 yarn.lock    |  5 +++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 05c75a6..950de03 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",
+    "react-simple-code-editor": "^0.11.0",
     "styled-components": "^5.2.0",
     "typescript": "~3.7.2"
   },
diff --git a/src/App.tsx b/src/App.tsx
index b5822a2..4d7faec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import Editor from 'react-simple-code-editor';
 import { WorkoutPlot } from './components/WorkoutPlot';
 import { WorkoutStats } from './components/WorkoutStats';
 import { parse, chunkRangeIntervals, Duration } from 'make-workout';
@@ -24,6 +25,15 @@ const AppTitle = styled.h1`
   font-weight: normal;
 `;
 
+const CodeEditor = styled(Editor).attrs({ padding: 10 })`
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.3;
+  border: 1px inset #bbb;
+  border-radius: 3px;
+  background: #fff;
+`;
+
 // Split range-intervals into 1 minute chunks
 const chunkSize = new Duration(60);
 
@@ -32,8 +42,7 @@ export function App() {
   const [workout, setWorkout] = useState(parse(defaultWorkout));
   const [error, setError] = useState<string | undefined>(undefined);
 
-  const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = event.target.value;
+  const onChange = useCallback((value: string) => {
     setText(value);
     try {
       setWorkout(parse(value));
@@ -46,7 +55,7 @@ export function App() {
   return (
     <AppContainer>
       <AppTitle>Workout editor</AppTitle>
-      <textarea rows={10} cols={100} onChange={onChange} value={text} />
+      <CodeEditor onValueChange={onChange} value={text} highlight={code => code} />
       <WorkoutPlot intervals={chunkRangeIntervals(workout.intervals, chunkSize)} />
       {error && <ErrorMessage>{error}</ErrorMessage>}
       <WorkoutStats workout={workout} />
diff --git a/yarn.lock b/yarn.lock
index b729d89..9b9b88a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8782,6 +8782,11 @@ react-scripts@3.4.3:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-simple-code-editor@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c"
+  integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"