chore(site): anchor jump don't work (ant-design#45243)

* chore: fix typo error * chore: fix anchor jump failure * Revert "chore: fix anchor jump failure" This reverts commit 9a11273. * chore: fix * Revert "chore: fix" This reverts commit 9dc69f1. * Revert "site: remove legacy code for hash jump (ant-design#44836)" This reverts commit 72da267. * chore: remove * Update .dumi/theme/layouts/DocLayout/index.tsx Co-authored-by: afc163 <[email protected]> Signed-off-by: 红 <[email protected]> * chore: update --------- Signed-off-by: 红 <[email protected]> Co-authored-by: afc163 <[email protected]>
SongYeongEng · Oct 10, 2023 · 72fc3b6 · 72fc3b6
1 parent d66737f
commit 72fc3b6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
-import type { AntdPreviewerProps } from '.';
+import type { AntdPreviewerProps } from './Previewer';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
@@ -171,7 +171,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   });
 
   const localizedTitle = title;
-  const introChildren = <div dangerouslySetInnerHTML={{ __html: description }} />;
   const highlightClass = classNames('highlight-wrapper', {
     'highlight-wrapper-expand': codeExpand,
   });
@@ -205,7 +204,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
 
   const suffix = codeType === 'tsx' ? 'tsx' : 'js';
 
-  const dependencies: Record<PropertyKey, string> = jsx.split('\n').reduce(
+  const dependencies = (jsx as string).split('\n').reduce<Record<PropertyKey, string>>(
     (acc, line) => {
       const matches = line.match(/import .+? from '(.+)';$/);
       if (matches?.[1]) {
@@ -377,7 +376,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
           </Tooltip>
           <EditButton title={<FormattedMessage id="app.content.edit-demo" />} filename={filename} />
         </div>
-        <div className="code-box-description">{introChildren}</div>
+        {description && (
+          <div className="code-box-description" dangerouslySetInnerHTML={{ __html: description }} />
+        )}
         <Space wrap size="middle" className="code-box-actions">
           {showOnlineUrl && (
             <Tooltip title={<FormattedMessage id="app.demo.online" />}>

diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { Helmet, useOutlet } from 'dumi';
+import { Helmet, useOutlet, useSiteData } from 'dumi';
 import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import zhCN from 'antd/es/locale/zh_CN';
 import ConfigProvider from 'antd/es/config-provider';
@@ -30,10 +30,11 @@ const locales = {
 const DocLayout: React.FC = () => {
   const outlet = useOutlet();
   const location = useLocation();
-  const { pathname, search } = location;
+  const { pathname, search, hash } = location;
   const [locale, lang] = useLocale(locales);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const { direction } = useContext(SiteContext);
+  const { loading } = useSiteData();
 
   useLayoutEffect(() => {
     if (lang === 'cn') {
@@ -52,6 +53,13 @@ const DocLayout: React.FC = () => {
     }
   }, []);
 
+  // handle hash change or visit page hash from Link component, and jump after async chunk loaded
+  useEffect(() => {
+    const id = hash.replace('#', '');
+
+    if (id) document.getElementById(decodeURIComponent(id))?.scrollIntoView();
+  }, [loading, hash]);
+
   useEffect(() => {
     if (typeof (window as any).ga !== 'undefined') {
       (window as any).ga('send', 'pageview', pathname + search);