Fix creation of shadow div.

If two highlights started at the same index, it would sometimes not render both of them.

src/shadow.tsx

@@ -2,36 +2,32 @@ import React, { ReactNode, useState } from "react";
 import { Highlight } from "./highlight";
 
 function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
-  let remaining_highlights = highlights.slice();
   let output: ReactNode[] = [];
   let i = 0;
   let state = ShadowState.Text;
   let buffer = "";
   for (let chr of text) {
-    if (state == ShadowState.Text) {
-      if (
-        remaining_highlights.length > 0 &&
-        i == remaining_highlights[0].start
-      ) {
+    const thisCharHighlighted = isInHighlight(highlights, i);
+    if (state == ShadowState.Text && thisCharHighlighted) {
       // Start a span
       output.push(buffer);
       buffer = chr;
       state = ShadowState.Highlight;
-      } else {
+    } else if (state == ShadowState.Text && !thisCharHighlighted) {
       // Add a character
       buffer += chr;
-      }
-    } else if (state == ShadowState.Highlight) {
-      if (remaining_highlights.length > 0 && i == remaining_highlights[0].end) {
+    } else if (state == ShadowState.Highlight && thisCharHighlighted) {
+      // Add a character
+      buffer += chr;
+    } else if (state == ShadowState.Highlight && !thisCharHighlighted) {
       // End the span
-        output.push(<span key={i} className="highlighted">{buffer}</span>);
+      output.push(
+        <span key={i} className="highlighted">
+          {buffer}
+        </span>,
+      );
       buffer = chr;
       state = ShadowState.Text;
-        remaining_highlights = remaining_highlights.slice(1);
-      } else {
-        // Add a character
-        buffer += chr;
-      }
     }
     ++i;
   }
@@ -40,26 +36,23 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
     if (state == ShadowState.Text) {
       output.push(buffer);
     } else if (state == ShadowState.Highlight) {
-      output.push(<span className="highlighted">{buffer}</span>);
+      output.push(
+        <span key={i} className="highlighted">
+          {buffer}
+        </span>,
+      );
     }
   }
   return output;
 }
 
-function unicodeAwareSlice(text: string, start: number, end: number): string {
-  // Boooo javascript
-  let i = 0;
-  let output = "";
-  for (let chr of text) {
-    if (i >= end) {
-      break;
+function isInHighlight(highlights: Highlight[], offset: number): boolean {
+  for (const highlight of highlights) {
+    if (highlight.start <= offset && offset < highlight.end) {
+      return true;
     }
-    if (i >= start) {
-      output += chr;
   }
-    ++i;
-  }
-  return output;
+  return false;
 }
 
 const enum ShadowState {