talexander/organic_ast_explorer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix creation of shadow div.

Browse Source 
If two highlights started at the same index, it would sometimes not render both of them.
This commit is contained in:
Tom Alexander 2024-01-27 19:22:31 -05:00
parent 5feac8e4d7
commit 8627181480
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
1 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/shadow.tsx
View File

@ -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
) {
// Start a span
output.push(buffer);
buffer = chr;
state = ShadowState.Highlight;
} else {
// Add a character
buffer += chr;
}
} else if (state == ShadowState.Highlight) {
if (remaining_highlights.length > 0 && i == remaining_highlights[0].end) {
// End the 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;
}
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(
<span key={i} className="highlighted">
{buffer}
</span>,
);
buffer = chr;
state = ShadowState.Text;
}
++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 {