Merge pull request #10449 from notbakaneko/feature/chat-message-avoid…

…-nested-links

Fix nested links rendering in chat messages

resources/js/beatmap-discussions/discussion-message.tsx

@@ -1,13 +1,13 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import { createRenderer, linkRenderer, transformLinkUri } from 'markdown/renderers';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import autolink from 'remark-plugins/autolink';
 import disableConstructs, { DisabledType } from 'remark-plugins/disable-constructs';
 import ImageLink from './image-link';
-import { createRenderer, linkRenderer, transformLinkUri } from './renderers';
 
 const components = Object.freeze({
   a: linkRenderer,

resources/js/beatmap-discussions/image-link.tsx

@@ -3,11 +3,11 @@
 
 import { Spinner } from 'components/spinner';
 import { route } from 'laroute';
+import { LinkContext } from 'markdown/renderers';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
-import { LinkContext } from './renderers';
 
 type Props = ReactMarkdownProps & JSX.IntrinsicElements['img'];
 

resources/js/beatmap-discussions/plain-text-preview.tsx

@@ -1,14 +1,14 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import { timestampDecorator, transformLinkUri } from 'markdown/renderers';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeTruncate from 'rehype-truncate';
 import autolink from 'remark-plugins/autolink';
 import disableConstructs, { DisabledType } from 'remark-plugins/disable-constructs';
 import { maxMessagePreviewLength, propsFromHref } from 'utils/beatmapset-discussion-helper';
 import { presence } from 'utils/string';
-import { timestampDecorator, transformLinkUri } from './renderers';
 
 const components = Object.freeze({
   a: linkRenderer,

resources/js/chat/message-item.tsx

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import { Spinner } from 'components/spinner';
+import { linkRenderer } from 'markdown/renderers';
 import { observer } from 'mobx-react';
 import Message from 'models/chat/message';
 import * as React from 'react';
@@ -12,20 +13,12 @@ import legacyLink from 'remark-plugins/legacy-link';
 import oldLink from 'remark-plugins/old-link';
 import wikiLink, { RemarkWikiLinkPlugin } from 'remark-wiki-link';
 import { classWithModifiers } from 'utils/css';
-import { safeReactMarkdownUrl, wikiUrl } from 'utils/url';
+import { wikiUrl } from 'utils/url';
 
 interface Props {
   message: Message;
 }
 
-function linkRenderer(astProps: JSX.IntrinsicElements['a']) {
-  return (
-    <a href={safeReactMarkdownUrl(astProps.href)} rel='nofollow noreferrer' target='_blank'>
-      {astProps.children}
-    </a>
-  );
-}
-
 const components = Object.freeze({
   a: linkRenderer,
 });

resources/js/beatmap-discussions/renderers.tsx → resources/js/markdown/renderers.tsx

@@ -18,12 +18,23 @@ export function linkRenderer(astProps: JSX.IntrinsicElements['a']) {
   const props = propsFromHref(astProps.href);
   const href = safeReactMarkdownUrl(props.href);
 
+  const useLinkText = props.children == null
+    || astProps.children instanceof Array
+      && astProps.children.length > 0
+      && astProps.children[0] !== astProps.href;
+
+  const content = useLinkText
+    ? astProps.children
+    : props.children;
+
   return (
-    <>
-      <LinkContext.Provider value={{ inLink: true }}>
-        <a {...props} href={href}>{props.children ?? astProps.children}</a>
-      </LinkContext.Provider>
-    </>
+    <LinkContext.Consumer>
+      {({ inLink }) => (
+        <LinkContext.Provider value={{ inLink: true }}>
+          {inLink ? content : <a {...props} href={href}>{content}</a>}
+        </LinkContext.Provider>
+      )}
+    </LinkContext.Consumer>
   );
 }