Merge pull request #127 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/HighlightedText.tsx

@@ -7,13 +7,15 @@ export function HighlightedText({
 	highlightClassName,
 	style,
 	containerElement,
+	caseSensitive,
 }: {
 	text: string
 	highlightedText: string[] | string
 	highlightClassName?: string
 	className?: string
 	style?: React.CSSProperties
 	containerElement?: React.ElementType
+	caseSensitive?: boolean
 }) {
 	const parts = useMemo(() => {
 		const highlights = Array.isArray(highlightedText)
@@ -22,10 +24,11 @@ export function HighlightedText({
 		if (!highlights.length) return text
 		const delimiterRegex = new RegExp(
 			`(${highlights.map((it) => it.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
-			"g",
+			caseSensitive ? "g" : "gi",
 		)
+		console.log("Case sensitive:", delimiterRegex, highlightedText)
 		return text.split(delimiterRegex).reduce((acc, it, i) => {
-			if (highlights.includes(it)) {
+			if (delimiterRegex.test(it)) {
 				acc.push(
 					<span
 						key={i}
@@ -42,7 +45,7 @@ export function HighlightedText({
 			acc.push(it)
 			return acc
 		}, [] as React.ReactNode[])
-	}, [text, highlightClassName, highlightedText])
+	}, [text, highlightClassName, highlightedText, caseSensitive])
 
 	const ContainerElement = containerElement || "p"
 

library/src/layouting/AppLayout.tsx

@@ -313,7 +313,7 @@ function Content({
 	return (
 		<section
 			className={twMerge(
-				"relative grid h-full min-h-0 w-full",
+				"relative grid size-full min-h-0 overflow-hidden",
 				className,
 			)}
 			data-layout-content="true"
@@ -343,7 +343,7 @@ function Main({
 	return (
 		<main
 			className={twMerge(
-				"relative m-0 box-border min-h-0 w-full",
+				"relative m-0 box-border min-h-0 size-full overflow-hidden",
 				className,
 			)}
 			data-layout-main="true"