sandrodachandClaude Opus 5.5
ca56220e68
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 2m46s
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
29 lines
858 B
TypeScript
29 lines
858 B
TypeScript
import React, { useMemo } from 'react';
|
|
|
|
// Safely render snippet containing <mark>...</mark> without dangerouslySetInnerHTML
|
|
export const SnippetRenderer: React.FC<{ snippet: string }> = ({ snippet }) => {
|
|
const parts = useMemo(() => {
|
|
if (!snippet) return [];
|
|
return snippet.split(/(<mark>[\s\S]*?<\/mark>)/g);
|
|
}, [snippet]);
|
|
|
|
return (
|
|
<span className="text-muted text-xs line-clamp-2 leading-relaxed">
|
|
{parts.map((part, i) => {
|
|
if (part.startsWith('<mark>') && part.endsWith('</mark>')) {
|
|
const text = part.slice(6, -7);
|
|
return (
|
|
<mark
|
|
key={i}
|
|
className="bg-accent-dim text-accent font-semibold px-0.5 rounded"
|
|
>
|
|
{text}
|
|
</mark>
|
|
);
|
|
}
|
|
return <span key={i}>{part}</span>;
|
|
})}
|
|
</span>
|
|
);
|
|
};
|