NextLink.tsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import type { JSX } from 'react';
  2. import type { LinkProps } from 'next/link';
  3. import Link from 'next/link';
  4. import { pagePathUtils } from '@growi/core/dist/utils';
  5. import { useSiteUrl } from '~/stores-universal/context';
  6. import loggerFactory from '~/utils/logger';
  7. const logger = loggerFactory('growi:components:NextLink');
  8. const isAnchorLink = (href: string): boolean => {
  9. return href.toString().length > 0 && href[0] === '#';
  10. };
  11. const isExternalLink = (href: string, siteUrl: string | undefined): boolean => {
  12. try {
  13. const baseUrl = new URL(siteUrl ?? 'https://example.com');
  14. const hrefUrl = new URL(href, baseUrl);
  15. return baseUrl.host !== hrefUrl.host;
  16. } catch (err) {
  17. logger.debug(err);
  18. return false;
  19. }
  20. };
  21. const isCreatablePage = (href: string) => {
  22. try {
  23. const url = new URL(href, 'http://example.com');
  24. const pathName = url.pathname;
  25. return pagePathUtils.isCreatablePage(pathName);
  26. } catch (err) {
  27. logger.debug(err);
  28. return false;
  29. }
  30. };
  31. type Props = Omit<LinkProps, 'href'> & {
  32. children: React.ReactNode;
  33. id?: string;
  34. href?: string;
  35. className?: string;
  36. };
  37. export const NextLink = (props: Props): JSX.Element => {
  38. const { id, href, children, className, onClick, ...rest } = props;
  39. const { data: siteUrl } = useSiteUrl();
  40. if (href == null) {
  41. // biome-ignore lint/a11y/useValidAnchor: ignore
  42. return <a className={className}>{children}</a>;
  43. }
  44. // extract 'data-*' props
  45. const dataAttributes = Object.fromEntries(
  46. Object.entries(rest).filter(([key]) => key.startsWith('data-')),
  47. );
  48. if (isExternalLink(href, siteUrl)) {
  49. return (
  50. <a
  51. id={id}
  52. href={href}
  53. className={className}
  54. target="_blank"
  55. onClick={onClick}
  56. rel="noopener noreferrer"
  57. {...dataAttributes}
  58. >
  59. {children}&nbsp;
  60. <span className="growi-custom-icons">external_link</span>
  61. </a>
  62. );
  63. }
  64. // when href is an anchor link or not-creatable path
  65. if (isAnchorLink(href) || !isCreatablePage(href)) {
  66. return (
  67. <a
  68. id={id}
  69. href={href}
  70. className={className}
  71. onClick={onClick}
  72. {...dataAttributes}
  73. >
  74. {children}
  75. </a>
  76. );
  77. }
  78. return (
  79. <Link {...rest} href={href} prefetch={false} legacyBehavior>
  80. <a
  81. href={href}
  82. className={className}
  83. {...dataAttributes}
  84. onClick={onClick}
  85. >
  86. {children}
  87. </a>
  88. </Link>
  89. );
  90. };