+import PropTypes from 'prop-types';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const RawHTML = ({ html }) => {
+ const navigate = useNavigate();
+
+ const onClick = e => {
+ if (e.defaultPrevented) return;
+ if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+ if (e.button !== 0) return;
+
+ let el = e.target;
+ while (el && el.nodeName !== 'A') {
+ el = el.parentNode;
+ }
+ if (!el) return;
+
+ if (el.target && el.target !== '_self') return;
+ if (el.attributes.download) return;
+ if (el.rel && /(?:^|\s+)external(?:\s+|$)/.test(el.rel)) return;
+
+ const href = el.getAttribute('href');
+
+ if (href.startsWith('#')) return;
+ if (href.startsWith('http')) return;
+ if (href.startsWith('mailto')) return;
+ if (href.startsWith('tel')) return;
+
+ el.blur();
+ e.preventDefault();
+
+ setTimeout(() => {
+ // scroll to top on location change
+ scrollTo({ top: 0, behavior: 'smooth' });
+ }, 50);
+
+ navigate(href);
+ };
+
+ return <div onClick={onClick} dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+RawHTML.propTypes = {
+ html: PropTypes.string,
+};
+
+export default RawHTML;