resources/js/components/common/RawHTML.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { useNavigate } from 'react-router-dom';
   4
   5 const RawHTML = ({ html }) => {
   6         const navigate = useNavigate();
   7
   8         const onClick = e => {
   9                 if (e.defaultPrevented) return;
  10                 if (e.metaKey || e.ctrlKey || e.shiftKey) return;
  11                 if (e.button !== 0) return;
  12
  13                 let el = e.target;
  14                 while (el && el.nodeName !== 'A') {
  15                         el = el.parentNode;
  16                 }
  17                 if (!el) return;
  18
  19                 if (el.target && el.target !== '_self') return;
  20                 if (el.attributes.download) return;
  21                 if (el.rel && /(?:^|\s+)external(?:\s+|$)/.test(el.rel)) return;
  22
  23                 const href = el.getAttribute('href');
  24
  25                 if (href.startsWith('#')) return;
  26                 if (href.startsWith('http')) return;
  27                 if (href.startsWith('mailto')) return;
  28                 if (href.startsWith('tel')) return;
  29
  30                 el.blur();
  31                 e.preventDefault();
  32
  33                 setTimeout(() => {
  34                         // scroll to top on location change
  35                         scrollTo({ top: 0, behavior: 'smooth' });
  36                 }, 50);
  37
  38                 navigate(href);
  39         };
  40
  41         return <div onClick={onClick} dangerouslySetInnerHTML={{ __html: html }} />;
  42 };
  43
  44 RawHTML.propTypes = {
  45         html: PropTypes.string,
  46 };
  47
  48 export default RawHTML;