[blog] Fix handling of markdown links (#35628)

mui · Dec 30, 2022 · d6a6c96 · d6a6c96
1 parent dd2848e
commit d6a6c96
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 20 deletions.
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
@@ -8,6 +8,8 @@ import {
 import CssBaseline from '@mui/material/CssBaseline';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import SkipLink from 'docs/src/modules/components/SkipLink';
+import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 
 declare module '@mui/material/styles' {
   interface PaletteOptions {
@@ -54,6 +56,8 @@ export default function BrandingCssVarsProvider({ children }: { children: React.
     <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange>
       <NextNProgressBar />
       <CssBaseline />
+      <SkipLink />
+      <MarkdownLinks />
       {children}
     </CssVarsProvider>
   );

diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
@@ -4,6 +4,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import SkipLink from 'docs/src/modules/components/SkipLink';
+import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 
 interface BrandingProviderProps {
   children: React.ReactNode;
@@ -23,6 +24,7 @@ export default function BrandingProvider(props: BrandingProviderProps) {
       {modeProp ? null : <NextNProgressBar />}
       {modeProp ? null : <CssBaseline />}
       {modeProp ? null : <SkipLink />}
+      {modeProp ? null : <MarkdownLinks />}
       {children}
     </ThemeProvider>
   );

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -199,7 +199,7 @@ export default function AppFrame(props) {
             </Box>
           </NextLink>
           <GrowingDiv />
-          <Stack direction="row" spacing={1.3}>
+          <Stack direction="row" spacing="10px">
             <AppFrameBanner />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -5,7 +5,7 @@ import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRigh
 import { alpha, styled } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import Chip from '@mui/material/Chip';
-import { openLinkInNewTab } from 'docs/src/modules/components/MarkdownLinks';
+import { shoudHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
 import Link from 'docs/src/modules/components/Link';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
 import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded';
@@ -217,7 +217,7 @@ export default function AppNavDrawerItem(props) {
   const [open, setOpen] = React.useState(openImmediately);
   const handleClick = (event) => {
     // Ignore the action if opening the link in a new tab
-    if (openLinkInNewTab(event)) {
+    if (shoudHandleLinkClick(event)) {
       return;
     }
 

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import NoSsr from '@mui/material/NoSsr';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
-import { openLinkInNewTab } from 'docs/src/modules/components/MarkdownLinks';
+import { shoudHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
 import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBanner';
 
 const Nav = styled('nav')(({ theme }) => ({
@@ -177,7 +177,7 @@ export default function AppTableOfContents(props) {
 
   const handleClick = (hash) => (event) => {
     // Ignore click for new tab/new window behavior
-    if (openLinkInNewTab(event)) {
+    if (shoudHandleLinkClick(event)) {
       return;
     }
 

diff --git a/docs/src/modules/components/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Router from 'next/router';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 
-export function openLinkInNewTab(event) {
+export function shoudHandleLinkClick(event) {
   if (
     event.defaultPrevented ||
     event.button !== 0 || // ignore everything but left-click
@@ -16,18 +16,6 @@ export function openLinkInNewTab(event) {
   return false;
 }
 
-export function handleEvent(event, as) {
-  // Ignore click for new tab/new window behavior
-  if (openLinkInNewTab(event)) {
-    return;
-  }
-
-  event.preventDefault();
-
-  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
-  Router.push(canonicalPathname, as);
-}
-
 /**
  * @param {MouseEvent} event
  */
@@ -37,7 +25,7 @@ function handleClick(event) {
     activeElement = activeElement.parentElement;
   }
 
-  // Ignore non link clicks
+  // Ignore non internal link clicks
   if (
     activeElement === null ||
     activeElement.nodeName !== 'A' ||
@@ -48,7 +36,15 @@ function handleClick(event) {
     return;
   }
 
-  handleEvent(event, activeElement.getAttribute('href'));
+  // Ignore click meant for native link handling, e.g. open in new tab
+  if (shoudHandleLinkClick(event)) {
+    return;
+  }
+
+  event.preventDefault();
+  const as = activeElement.getAttribute('href');
+  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+  Router.push(canonicalPathname, as);
 }
 
 export default function MarkdownLinks() {