docs: prevent redirects from live preview (#6858)

VibhorJaiswal · web-flow · commit dc802d93b104 · 2024-11-18T10:24:51.000-08:00
diff --git a/www/src/theme/Playground/Preview.tsx b/www/src/theme/Playground/Preview.tsx
@@ -4,6 +4,7 @@ import { LiveContext, LivePreview } from 'react-live';
 import qsa from 'dom-helpers/querySelectorAll';
 import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
 import useMutationObserver from '@restart/hooks/useMutationObserver';
+import useEventCallback from '@restart/hooks/useEventCallback';
 
 export interface PreviewProps {
   className?: string | undefined;
@@ -55,9 +56,15 @@ const Preview: React.FC<PreviewProps> = ({ className }) => {
     },
   );
 
+  const handleCustomRedirect = useEventCallback((e: React.MouseEvent<HTMLElement>) => {
+    if (e.target.tagName === 'A') {
+      e.preventDefault();
+    }
+  })
+
   return (
     <div ref={exampleRef}>
-      <LivePreview className={className} />
+      <LivePreview className={className} onClick={handleCustomRedirect}/>
     </div>
   );
 };
