| 1 |
import { external, Icon } from '@wordpress/icons'; |
| 2 |
|
| 3 |
const homeUrl = window.extSharedData?.homeUrl; |
| 4 |
|
| 5 |
const isExternalUrl = (url) => { |
| 6 |
try { |
| 7 |
const homeUrlObject = new URL(homeUrl); |
| 8 |
const urlObject = new URL(url); |
| 9 |
|
| 10 |
return homeUrlObject.hostname !== urlObject.hostname; |
| 11 |
} catch { |
| 12 |
return false; |
| 13 |
} |
| 14 |
}; |
| 15 |
|
| 16 |
export const customComponents = { |
| 17 |
a: ({ href, children }) => { |
| 18 |
const isExternal = isExternalUrl(href); |
| 19 |
|
| 20 |
return ( |
| 21 |
<a |
| 22 |
href={href} |
| 23 |
{...(isExternal && { |
| 24 |
target: '_blank', |
| 25 |
rel: 'noopener noreferrer', |
| 26 |
})} |
| 27 |
> |
| 28 |
{children} |
| 29 |
{isExternal && ( |
| 30 |
<Icon icon={external} size={18} className="ml-0.5 inline" /> |
| 31 |
)} |
| 32 |
</a> |
| 33 |
); |
| 34 |
}, |
| 35 |
}; |
| 36 |
|
