2024-01-28 22:34:38 +00:00
|
|
|
import React, { ReactNode } from "react";
|
2024-01-23 02:59:59 +00:00
|
|
|
import { Highlight } from "./highlight";
|
2024-01-28 22:34:38 +00:00
|
|
|
import styles from "./Editor.module.css";
|
2024-01-23 02:59:59 +00:00
|
|
|
|
|
|
|
function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
|
|
|
|
let output: ReactNode[] = [];
|
|
|
|
let i = 0;
|
|
|
|
let state = ShadowState.Text;
|
|
|
|
let buffer = "";
|
|
|
|
for (let chr of text) {
|
2024-01-28 00:22:31 +00:00
|
|
|
const thisCharHighlighted = isInHighlight(highlights, i);
|
|
|
|
if (state == ShadowState.Text && thisCharHighlighted) {
|
|
|
|
// Start a span
|
|
|
|
output.push(buffer);
|
|
|
|
buffer = chr;
|
|
|
|
state = ShadowState.Highlight;
|
|
|
|
} else if (state == ShadowState.Text && !thisCharHighlighted) {
|
|
|
|
// Add a character
|
|
|
|
buffer += chr;
|
|
|
|
} else if (state == ShadowState.Highlight && thisCharHighlighted) {
|
|
|
|
// Add a character
|
|
|
|
buffer += chr;
|
|
|
|
} else if (state == ShadowState.Highlight && !thisCharHighlighted) {
|
|
|
|
// End the span
|
|
|
|
output.push(
|
2024-01-28 22:34:38 +00:00
|
|
|
<span key={i} className={styles.EditorHighlighted}>
|
2024-01-28 00:22:31 +00:00
|
|
|
{buffer}
|
|
|
|
</span>,
|
|
|
|
);
|
|
|
|
buffer = chr;
|
|
|
|
state = ShadowState.Text;
|
2024-01-23 02:59:59 +00:00
|
|
|
}
|
|
|
|
++i;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (buffer.length > 0) {
|
|
|
|
if (state == ShadowState.Text) {
|
2024-01-24 03:06:47 +00:00
|
|
|
output.push(buffer);
|
2024-01-23 02:59:59 +00:00
|
|
|
} else if (state == ShadowState.Highlight) {
|
2024-01-28 00:22:31 +00:00
|
|
|
output.push(
|
2024-01-28 22:34:38 +00:00
|
|
|
<span key={i} className={styles.EditorHighlighted}>
|
2024-01-28 00:22:31 +00:00
|
|
|
{buffer}
|
|
|
|
</span>,
|
|
|
|
);
|
2024-01-23 02:59:59 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
return output;
|
|
|
|
}
|
|
|
|
|
2024-01-28 00:22:31 +00:00
|
|
|
function isInHighlight(highlights: Highlight[], offset: number): boolean {
|
|
|
|
for (const highlight of highlights) {
|
|
|
|
if (highlight.start <= offset && offset < highlight.end) {
|
|
|
|
return true;
|
2024-01-23 02:59:59 +00:00
|
|
|
}
|
|
|
|
}
|
2024-01-28 00:22:31 +00:00
|
|
|
return false;
|
2024-01-23 02:59:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const enum ShadowState {
|
|
|
|
Text,
|
|
|
|
Highlight,
|
|
|
|
}
|
|
|
|
|
2024-01-24 03:06:47 +00:00
|
|
|
export { buildShadow };
|