chore: add auto-link generation for stickies

This commit is contained in:
Chris Anderson 2025-07-10 14:29:05 -05:00
parent b962df98a7
commit 620f172126

View file

@ -7,6 +7,24 @@ interface StickyConfig {
text?: string
}

const TextAutoLink = ({ text }: { text: string }) => {
const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\\-]{1,61}[a-z0-9])?\.[^\\.|\s])+[a-z\\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\\/~#&=;%+?\-\\(\\)]*)/gi
return (
<>
{text.split(delimiter).map(word => {
const match = word.match(delimiter)
if (match) {
const url = match[0]
return (
<a key={url} target="_blank" href={url.startsWith('http') ? url : `https://${url}`} rel="noreferrer">{url}</a>
)
}
return word
})}
</>
)
}

export const stickyStep: JourneyStepType<StickyConfig> = {
name: 'sticky',
icon: <StickyStepIcon />,
@ -17,7 +35,7 @@ export const stickyStep: JourneyStepType<StickyConfig> = {
}) {
return (
<div style={{ maxWidth: 300 }}>
{value.text}
<TextAutoLink text={value.text ?? ''} />
</div>
)
},