fix

Author: jonathanarnault

packages/react-tei/src/SidePanel/unitex/UnitexAnnotation.spec.tsx

@@ -3,6 +3,8 @@ import { render } from "vitest-browser-react";
 import { I18nProvider } from "../../i18n/I18nProvider";
 import { UnitexAnnotation } from "./UnitexAnnotation";
 
+vi.mock("../../DocumentContextProvider");
+
 function TestWrapper({ children }: { children: React.ReactNode }) {
 	return <I18nProvider>{children}</I18nProvider>;
 }

packages/react-tei/src/SidePanel/unitex/UnitexAnnotation.tsx

@@ -1,7 +1,11 @@
+import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import ArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import Box from "@mui/material/Box";
 import Checkbox from "@mui/material/Checkbox";
 import Chip from "@mui/material/Chip";
 import { grey } from "@mui/material/colors";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import { useTranslation } from "react-i18next";
 import type { TermStatistic } from "../../unitex/parseUnitexEnrichment";
@@ -57,14 +61,22 @@ export function UnitexAnnotation({
 						slotProps={{
 							root: {
 								sx: {
-									backgroundColor: annotation.displayed ? color : grey[600],
-									color: "white",
+									backgroundColor: annotation.displayed ? color : grey[100],
+									color: "black",
 								},
 							},
 						}}
 					/>
 				</Tooltip>
 			</Box>
+			<Stack gap={0.5} direction="row">
+				<IconButton size="small" disabled={!annotation.displayed}>
+					<ArrowUpIcon />
+				</IconButton>
+				<IconButton size="small" disabled={!annotation.displayed}>
+					<ArrowDownIcon />
+				</IconButton>
+			</Stack>
 		</>
 	);
 }

packages/react-tei/src/SidePanel/unitex/UnitexAnnotationBlock.tsx

@@ -68,7 +68,7 @@ export function UnitexAnnotationBlock({ block }: UnitexAnnotationBlockProps) {
 				<Box
 					sx={{
 						display: "grid",
-						gridTemplateColumns: "max-content 1fr",
+						gridTemplateColumns: "max-content 1fr max-content",
 						gridTemplateRows: "auto",
 						columnGap: 0.5,
 						rowGap: 1,

packages/react-tei/src/navigation/DocumentNavigationContext.tsx

@@ -91,7 +91,7 @@ export function DocumentNavigationContextProvider({
 	const currentSelectorRef = useRef<CurrentSelectorRef | null>(null);
 
 	const navigateToTargetLoop = useCallback(
-		(wrapperElement: HTMLElement, querySelector: string) => {
+		(wrapperElement: HTMLElement, querySelector: string, direction = 1) => {
 			const targetElements =
 				wrapperElement.querySelectorAll<HTMLElement>(querySelector);
 
@@ -111,7 +111,8 @@ export function DocumentNavigationContextProvider({
 				};
 			} else {
 				currentSelectorRef.current.index =
-					(currentSelectorRef.current.index + 1) % targetElements.length;
+					(currentSelectorRef.current.index + direction) %
+					targetElements.length;
 			}
 
 			const index = currentSelectorRef.current.index;
@@ -133,15 +134,15 @@ export function DocumentNavigationContextProvider({
 	);
 
 	const navigateToBodyTargetSelector = useCallback(
-		(querySelector: string) => {
+		(querySelector: string, direction = 1) => {
 			const documentElement = documentRef.current;
 
 			if (!documentElement) {
 				console.error("Document element not found");
 				return;
 			}
 
-			navigateToTargetLoop(documentElement, querySelector);
+			navigateToTargetLoop(documentElement, querySelector, direction);
 		},
 		[documentRef, navigateToTargetLoop],
 	);

packages/react-tei/src/tags/Highlight.spec.tsx

@@ -11,12 +11,11 @@ function TestWrapper({ children }: { children: React.ReactNode }) {
 			jsonDocument={[]}
 			jsonUnitexEnrichment={{
 				persName: [
-					{ term: "Paris", displayed: true, frequency: 1 },
+					{ term: "Albert Einstein", displayed: true, frequency: 1 },
 					{ term: "Einstein", displayed: true, frequency: 2 },
 					{ term: "Nancy", displayed: true, frequency: 5 },
 				],
 				placeName: [
-					{ term: "Paris", displayed: true, frequency: 1 },
 					{
 						term: "London",
 						displayed: false,
@@ -92,4 +91,49 @@ describe("Highlight", () => {
 		await expect.element(element).toHaveAttribute("data-term", "nancy");
 		await expect.element(element).toHaveAttribute("data-group", "persName");
 	});
+
+	it("should support nested highlights", async () => {
+		const screen = await render(
+			<Highlight
+				data={{
+					tag: "highlight",
+					attributes: { groups: "persName", term: "albert-einstein" },
+					value: [
+						{
+							tag: "#text",
+							value: "Albert ",
+						},
+						{
+							tag: "highlight",
+							attributes: { groups: "persName", term: "einstein" },
+							value: "Einstein",
+						},
+					],
+				}}
+			/>,
+			{
+				wrapper: TestWrapper,
+			},
+		);
+
+		const outerElement = screen.getByRole("mark").filter({
+			hasText: "Albert Einstein",
+			exact: true,
+		});
+		await expect.element(outerElement).toBeInTheDocument();
+		await expect.element(outerElement).toHaveTextContent("Albert Einstein");
+		await expect
+			.element(outerElement)
+			.toHaveAttribute("data-term", "albert-einstein");
+		await expect
+			.element(outerElement)
+			.toHaveAttribute("data-group", "persName");
+
+		const innerElement = screen.getByText("Einstein", { exact: true });
+		await expect.element(innerElement).toBeInTheDocument();
+		await expect.element(innerElement).toHaveAttribute("data-term", "einstein");
+		await expect
+			.element(innerElement)
+			.toHaveAttribute("data-group", "persName");
+	});
 });

packages/react-tei/src/tags/Highlight.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 import { useDocumentContext } from "../DocumentContextProvider";
+import { kebabCasify } from "../helper/kebabCasify";
 import { chipColors } from "../SidePanel/unitex/unitexAnnotationBlocks";
 import type { ComponentProps } from "./type";
 import { Value } from "./Value";
@@ -10,17 +11,17 @@ export const Highlight = ({ data }: HighlightProps) => {
 	const { unitexEnrichment } = useDocumentContext();
 
 	const groups = useMemo(() => {
-		if (!attributes?.groups || !unitexEnrichment || typeof value !== "string") {
+		if (!attributes?.groups || !unitexEnrichment) {
 			return [];
 		}
 		return ([] as string[]).concat(attributes?.groups).filter((group) => {
 			const term = unitexEnrichment?.document?.[group]?.find(
-				(term) => term.term === value,
+				({ term }) => kebabCasify(term) === attributes?.term,
 			);
 
 			return term?.displayed ?? false;
 		});
-	}, [unitexEnrichment, attributes?.groups, value]);
+	}, [unitexEnrichment, attributes?.groups, attributes?.term]);
 
 	if (groups.length === 0) {
 		return <Value data={value} />;