69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { Text } from "@pikku/mantine/core"
|
|
import { asI18n } from "@pikku/react"
|
|
import React from "react"
|
|
|
|
interface EmphasizeProps {
|
|
text: string;
|
|
primary?: boolean
|
|
renderInlineStyles?: boolean
|
|
[key: string]: any
|
|
}
|
|
|
|
function stripInlineTags(text: string) {
|
|
return text
|
|
.replace(/<\/?(strong|i|em)>/g, '')
|
|
.replace(/<br\s*\/?>/g, '\n')
|
|
.replace(/<\/br>/g, '')
|
|
}
|
|
|
|
export function Emphasize({
|
|
text,
|
|
primary = true,
|
|
renderInlineStyles = true,
|
|
...textProps
|
|
}: EmphasizeProps) {
|
|
if (!renderInlineStyles) {
|
|
return <Text {...textProps}>{asI18n(stripInlineTags(text))}</Text>
|
|
}
|
|
|
|
// Split text by <strong> and <i> tags while preserving the tags
|
|
const parts = text.split(/(<strong>.*?<\/strong>|<i>.*?<\/i>|<em>.*?<\/em>|<br>.*?<\/br>)/g);
|
|
|
|
return (
|
|
<Text {...textProps}>
|
|
{parts.map((part, i) => {
|
|
if ((part.startsWith('<strong>') && part.endsWith('</strong>')) || (part.startsWith('<em>') && part.endsWith('</em>'))){
|
|
// Extract content between <strong> tags
|
|
const content = part.replace(/<\/?strong>/g, '').replace(/<\/?em>/g, '');
|
|
return (
|
|
<Text
|
|
key={i}
|
|
component="strong"
|
|
fw={700}
|
|
span
|
|
c={primary ? 'primary' : undefined}
|
|
>
|
|
{asI18n(content)}
|
|
</Text>
|
|
);
|
|
} else if (part.startsWith('<i>') && part.endsWith('</i>')) {
|
|
// Extract content between <i> tags
|
|
const content = part.replace(/<\/?i>/g, '');
|
|
return (
|
|
<Text key={i} fs="italic" span>
|
|
{asI18n(content)}
|
|
</Text>
|
|
);
|
|
} else if (part.startsWith('<br>') && part.endsWith('</br>')) {
|
|
return (
|
|
<br key={i}/>
|
|
);
|
|
} else {
|
|
// Regular text
|
|
return <React.Fragment key={i}>{asI18n(part)}</React.Fragment>;
|
|
}
|
|
})}
|
|
</Text>
|
|
);
|
|
}
|