1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import React, { useCallback, useEffect, useState } from "react";
import type { AnalyzeRes } from "../logic/types";
import { ColoredText } from "../components/Sentence";
import Word from "../components/Word";
import { iso6393To1 } from "../logic/iso6393to1";
function segmentate(
text: string,
lang: string,
granularity: "sentence" | "word" | "grapheme",
) {
// TODO proper error handling here
console.log("segmenting", lang);
const la = iso6393To1[lang];
const lng = la || lang;
const segmenter = new Intl.Segmenter(lng, { granularity });
const segments = Array.from(segmenter.segment(text));
console.log("seg", segments[0]);
return segments.reduce((acc: string[], s) => {
const trimmed = s.segment.trim();
if (trimmed) return [...acc, trimmed];
else return acc;
}, []);
}
export default function LatinText({
text,
lang,
openWord,
}: {
text: string;
lang: string;
openWord?: (word: string) => void;
}) {
useEffect(() => {
const sentences = segmentate(text, lang, "sentence");
if (sentences) setSentences(sentences);
}, [text]);
const [sentences, setSentences] = useState<string[]>([]);
console.log({ sentences });
return (
<>
{sentences.map((s, i) => (
<Sentence key={s + i} text={s} lang={lang} openWord={openWord} />
))}
</>
);
}
function Sentence({
text,
lang,
openWord,
}: {
text: string;
lang: string;
openWord?: (word: string) => void;
}) {
useEffect(() => {
const w = segmentate(text, lang, "word");
if (w) setWords(w);
console.log({ words });
}, [text]);
const [words, setWords] = useState<string[]>([]);
console.log({ words });
// const [data, setData] = useState<Record<string, AnalyzeRes>>({});
const [word, setWord] = useState<AnalyzeRes>();
return (
<>
<ColoredText frags={words} fn={openWord} />;
{word && <Word data={word} lang={lang} />}
</>
);
}
|
