add link

src/client/js/components/Page/RevisionRenderer.jsx

@@ -51,6 +51,8 @@ class RevisionRenderer extends React.PureComponent {
     const HeaderLinkArray = Array.from(HeaderLink);
     HeaderLinkArray.forEach(link => link.addEventListener('click', (e) => {
       e.preventDefault();
+
+      window.location.hash = link.getAttribute('href');
       this.props.navigationContainer.smoothScrollIntoView(link, WIKI_HEADER_LINK);
     }));
 

src/client/js/components/TableOfContents.jsx

@@ -1,14 +1,17 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
 import { withTranslation } from 'react-i18next';
 
 import PageContainer from '../services/PageContainer';
+import NavigationContainer from '../services/NavigationContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
 import StickyStretchableScroller from './StickyStretchableScroller';
 
+const WIKI_HEADER_LINK = 120;
+
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
 
@@ -31,6 +34,18 @@ const TableOfContents = (props) => {
 
   const { tocHtml } = pageContainer.state;
 
+  useEffect(() => {
+    const tocDom = document.getElementById('revision-toc-content');
+    const anchorsInToc = Array.from(tocDom.getElementsByTagName('a'));
+    anchorsInToc.forEach(link => link.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      window.location.hash = link.getAttribute('href').replace('#', '');
+      const huga = document.getElementById(link.getAttribute('href').replace('#', ''));
+      props.navigationContainer.smoothScrollIntoView(huga, WIKI_HEADER_LINK);
+    }));
+  }, [tocHtml]);
+
   return (
     <>
       {/* TODO GW-3253 add four contents */}
@@ -56,10 +71,11 @@ const TableOfContents = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const TableOfContentsWrapper = withUnstatedContainers(TableOfContents, [PageContainer]);
+const TableOfContentsWrapper = withUnstatedContainers(TableOfContents, [PageContainer, NavigationContainer]);
 
 TableOfContents.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
 export default withTranslation()(TableOfContentsWrapper);