feat: Add self-links to headings in Markdown

ExpediaGroup · Jan 25, 2022 · aae199d · aae199d
1 parent 6a6b55b
commit aae199d
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -51,6 +51,7 @@
     "react-syntax-highlighter": "15.4.5",
     "react-vega": "7.4.4",
     "redux-persist": "6.0.0",
+    "rehype-autolink-headings": "6.1.1",
     "rehype-raw": "6.1.1",
     "rehype-slug": "5.0.1",
     "remark-directive": "2.0.1",

diff --git a/packages/frontend/src/components/markdown-container/chakra-ui-renderer.tsx b/packages/frontend/src/components/markdown-container/chakra-ui-renderer.tsx
@@ -21,6 +21,7 @@ import {
   Code,
   Divider,
   Heading,
+  Icon,
   Image,
   Input,
   Link as ChakraLink,
@@ -41,6 +42,7 @@ import Zoom from 'react-medium-image-zoom';
 import { Sort } from '../../models/generated/graphql';
 import { destringObject } from '../../shared/destring';
 import { hashCode } from '../../shared/hash';
+import { iconFactory } from '../../shared/icon-factory';
 import { getMimeForFileName } from '../../shared/mime-utils';
 import { isHashUrl, isRelativeUrl } from '../../shared/url-utils';
 import { BlockQuote } from '../blockquote/blockquote';
@@ -67,13 +69,16 @@ const heading = ({ node, level, children, ...props }) => {
 
   return (
     <Heading
+      className="heading"
       mb="0.5rem"
       mt={mt[level - 1]}
       as={`h${level}`}
       size={sizes[level - 1]}
       borderBottomWidth={level === 1 ? 1 : 0}
       borderBottomStyle="solid"
       borderBottomColor="snowstorm.100"
+      display="flex"
+      alignItems="center"
       {...node.properties}
     >
       {children}
@@ -124,6 +129,27 @@ export const ChakraUIRenderer = (
         </Text>
       );
     },
+    span: ({ node, children, ...props }) => {
+      // Rehype-autolink-headings
+      if (props.className === 'icon icon-link') {
+        return (
+          <Icon
+            className="heading-auto-link"
+            display="none"
+            as={iconFactory('link')}
+            fontSize="80%"
+            ml="0.5rem"
+            color="frost.400"
+          />
+        );
+      }
+
+      return (
+        <Text as="span" {...props}>
+          {children}
+        </Text>
+      );
+    },
     strong: ({ node, children, ...props }) => {
       return (
         <Text as="strong" {...props}>

diff --git a/packages/frontend/src/components/markdown-container/markdown-container.css b/packages/frontend/src/components/markdown-container/markdown-container.css
@@ -53,16 +53,23 @@
   padding: 1rem;
 }
 
-/* Place `[` and `]` around footnote calls. */
+/* Place `[` and `]` around footnote references */
 .iex-markdown-container .footnote-ref > sup::before {
   content: '[';
 }
 
 .iex-markdown-container .footnote-ref > sup::after {
   content: ']';
 }
+
+/* Style the footnote 'back' icon */
 .iex-markdown-container .footnote-back {
   margin-left: 0.5rem;
   font-family: monospace;
   font-size: 1rem;
 }
+
+/* Display heading self-link on hover */
+.iex-markdown-container .heading:hover .heading-auto-link {
+  display: block;
+}
diff --git a/packages/frontend/src/components/markdown-container/markdown-container.tsx b/packages/frontend/src/components/markdown-container/markdown-container.tsx
@@ -20,6 +20,7 @@ import { memo, ReactElement, useCallback, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import ReactMarkdown, { Components } from 'react-markdown';
 import { TransformLink } from 'react-markdown/lib/ast-to-react';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import remarkDirective from 'remark-directive';
@@ -111,7 +112,16 @@ export const MarkdownContainer = memo(
                 { baseUrl: baseAssetUrl, transformAssetUri: transformAssetUri ?? defaultTransformAssetUri }
               ]
             ]}
-            rehypePlugins={[rehypeRaw, rehypeSlug]}
+            rehypePlugins={[
+              rehypeRaw,
+              rehypeSlug,
+              [
+                rehypeAutolinkHeadings,
+                {
+                  behavior: 'append'
+                }
+              ]
+            ]}
             transformLinkUri={transformLinkUri ?? defaultTransformLinkUri}
             transformImageUri={transformAssetUri ?? defaultTransformAssetUri}
           />

diff --git a/packages/frontend/src/shared/icon-factory.tsx b/packages/frontend/src/shared/icon-factory.tsx
@@ -21,6 +21,7 @@ import {
   AiFillEdit,
   AiFillGift,
   AiOutlineFileAdd,
+  AiOutlineLink,
   AiOutlineLogin,
   AiOutlineMenu,
   AiOutlineProfile,
@@ -136,6 +137,7 @@ const icons = {
   insightMissing: GrDocumentMissing,
   integration: VscCircuitBoard,
   json: VscJson,
+  link: AiOutlineLink,
   linkExternal: GoLinkExternal,
   location: GoLocation,
   login: AiOutlineLogin,