2024-01-22 02:11:38 +00:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import "./Editor.css";
|
|
|
|
import { Highlight } from "./highlight";
|
2024-01-13 03:07:59 +00:00
|
|
|
|
2024-01-22 02:11:38 +00:00
|
|
|
function Editor({ defaultValue = "I have a text value." }) {
|
2024-01-13 02:42:12 +00:00
|
|
|
function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
|
|
|
|
console.log(event.target.value);
|
2024-01-13 04:15:06 +00:00
|
|
|
setValue(event.target.value);
|
2024-01-13 02:42:12 +00:00
|
|
|
}
|
|
|
|
|
2024-01-13 04:15:06 +00:00
|
|
|
const [value, setValue] = useState(defaultValue);
|
|
|
|
|
2024-01-21 20:51:40 +00:00
|
|
|
const [highlights, setHighlights] = useState<Array<Highlight>>([]);
|
|
|
|
|
|
|
|
function addHighlight(start: number, end: number) {
|
|
|
|
setHighlights([...highlights, new Highlight(start, end)]);
|
|
|
|
}
|
|
|
|
|
|
|
|
function clearHighlights() {
|
|
|
|
setHighlights([]);
|
|
|
|
}
|
|
|
|
|
2024-01-21 23:52:40 +00:00
|
|
|
function buildShadow() {
|
|
|
|
// foo
|
|
|
|
}
|
|
|
|
|
|
|
|
if (highlights.length === 0) {
|
2024-01-22 02:11:38 +00:00
|
|
|
addHighlight(1, 5);
|
2024-01-21 23:52:40 +00:00
|
|
|
}
|
|
|
|
|
2024-01-13 02:42:12 +00:00
|
|
|
return (
|
2024-01-13 03:07:59 +00:00
|
|
|
<div className="Editor">
|
2024-01-13 03:16:31 +00:00
|
|
|
<div className="Editor-textwrapper">
|
2024-01-22 02:11:38 +00:00
|
|
|
<textarea
|
|
|
|
onChange={handleChange}
|
|
|
|
className="Editor-textarea"
|
|
|
|
value={value}
|
|
|
|
/>
|
2024-01-13 04:15:06 +00:00
|
|
|
<div className="Editor-underlay">{value}</div>
|
2024-01-13 03:16:31 +00:00
|
|
|
</div>
|
2024-01-13 03:07:59 +00:00
|
|
|
<div className="Editor-ast"></div>
|
|
|
|
</div>
|
2024-01-13 02:42:12 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Editor;
|