organic_ast_explorer/src/Editor.tsx

import React, { useState } from 'react';
import './Editor.css';
import {Highlight} from './highlight';

function Editor({
  defaultValue = "I have a text value."
}) {
  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
    console.log(event.target.value);
    setValue(event.target.value);
  }

  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([]);
  }

  function buildShadow() {
    // foo
  }

  if (highlights.length === 0) {
    addHighlight(1,5);
  }

  return (
    <div className="Editor">
      <div className="Editor-textwrapper">
        <textarea onChange={handleChange} className="Editor-textarea" value={value} />
        <div className="Editor-underlay">{value}</div>
      </div>
      <div className="Editor-ast"></div>
    </div>
  );
}

export default Editor;