SONAR-11017 Add ToC component to markdowns

1 files changed, 46 insertions, 21 deletions

diff --git a/server/sonar-web/src/main/js/components/docs/DocLink.tsx b/server/sonar-web/src/main/js/components/docs/DocLink.tsx
index 33c6125f89e..5a0eb5de4b8 100644
--- a/server/sonar-web/src/main/js/components/docs/DocLink.tsx
+++ b/server/sonar-web/src/main/js/components/docs/DocLink.tsx
@@ -21,31 +21,56 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import DetachIcon from '../icons-components/DetachIcon';
 
+interface OwnProps {
+  customProps?: {
+    [k: string]: any;
+  };
+}
+
+type Props = OwnProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
 const SONARCLOUD_LINK = '/#sonarcloud#/';
 
-export default function DocLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
-  const { children, href, ...other } = props;
-  if (href && href.startsWith('/')) {
-    let url = `/documentation/${href.substr(1)}`;
-    if (href.startsWith(SONARCLOUD_LINK)) {
-      url = `/${href.substr(SONARCLOUD_LINK.length)}`;
+export default class DocLink extends React.PureComponent<Props> {
+  handleClickOnAnchor = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    const { customProps, href = '#' } = this.props;
+    if (customProps && customProps.onAnchorClick) {
+      customProps.onAnchorClick(href, event);
+    }
+  };
+
+  render() {
+    const { children, href, customProps, ...other } = this.props;
+    if (href && href.startsWith('#')) {
+      return (
+        <a href="#" onClick={this.handleClickOnAnchor}>
+          {children}
+        </a>
+      );
     }
+
+    if (href && href.startsWith('/')) {
+      let url = `/documentation/${href.substr(1)}`;
+      if (href.startsWith(SONARCLOUD_LINK)) {
+        url = `/${href.substr(SONARCLOUD_LINK.length)}`;
+      }
+      return (
+        <Link to={url} {...other}>
+          {children}
+        </Link>
+      );
+    }
+
     return (
-      <Link to={url} {...other}>
-        {children}
-      </Link>
+      <>
+        <a href={href} rel="noopener noreferrer" target="_blank" {...other}>
+          {children}
+        </a>
+        <DetachIcon
+          className="text-muted little-spacer-left little-spacer-right vertical-baseline"
+          size={12}
+        />
+      </>
     );
   }
-
-  return (
-    <>
-      <a href={href} rel="noopener noreferrer" target="_blank" {...other}>
-        {children}
-      </a>
-      <DetachIcon
-        className="text-muted little-spacer-left little-spacer-right vertical-baseline"
-        size={12}
-      />
-    </>
-  );
 }