Add functions to add and clear highlights.

package.json

@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "prettier": {
+    "tabWidth": 2
   }
 }

src/Editor.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './Editor.css';
+import {Highlight} from './highlight';
 
 function Editor({
   defaultValue = "I have a text value."
@@ -11,6 +12,16 @@ function Editor({
 
   const [value, setValue] = useState(defaultValue);
 
+  const [highlights, setHighlights] = useState<Array<Highlight>>([]);
+
+  function addHighlight(start: number, end: number) {
+    setHighlights([...highlights, new Highlight(start, end)]);
+  }
+
+  function clearHighlights() {
+    setHighlights([]);
+  }
+
   return (
     <div className="Editor">
       <div className="Editor-textwrapper">

src/highlight.ts

@@ -0,0 +1,11 @@
+class Highlight {
+        start: number;
+        end: number;
+
+        constructor(start: number, end: number) {
+                this.start = start;
+                this.end = end;
+        }
+}
+
+export { Highlight };