Allow markdown preview in code browser (#2417)

Author: Simek

components/Icons/index.tsx

@@ -1740,3 +1740,47 @@ export function FolderOpenIcon({ width = 24, height = 24, style }: IconProps) {
     </Svg>
   );
 }
+
+export function MarkdownPreviewIcon({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <path
+        d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="152 32 152 88 208 88"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <circle
+        cx="124"
+        cy="148"
+        r="28"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <line
+        x1="143.8"
+        y1="167.8"
+        x2="160"
+        y2="184"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+    </Svg>
+  );
+}

components/Package/CodeBrowser/CodeBrowserContent.tsx

@@ -4,8 +4,15 @@ import { type Theme } from 'react-shiki';
 import useSWR from 'swr';
 
 import { Label, P } from '~/common/styleguide';
-import { CodeIcon, ImageFileIcon, TempFileIcon } from '~/components/Icons';
+import {
+  CodeIcon,
+  FileIcon,
+  ImageFileIcon,
+  MarkdownPreviewIcon,
+  TempFileIcon,
+} from '~/components/Icons';
 import CopyButton from '~/components/Package/CopyButton';
+import MarkdownRenderer from '~/components/Package/MarkdownContentBox/MarkdownRenderer';
 import ThreeDotsLoader from '~/components/Package/ThreeDotsLoader';
 import Tooltip from '~/components/Tooltip';
 import rndDark from '~/styles/shiki/rnd-dark.json';
@@ -27,6 +34,7 @@ type Props = {
   packageName: string;
   isBrowserMaximized: boolean;
   toggleMaximized: () => void;
+  repoUrl: string;
   filePath: string;
   fileData?: UnpkgMeta['files'][number];
 };
@@ -35,22 +43,27 @@ export default function CodeBrowserContent({
   packageName,
   isBrowserMaximized,
   toggleMaximized,
+  repoUrl,
   filePath,
   fileData,
 }: Props) {
   const [rawPreview, setRawPreview] = useState(false);
+  const [markdownPreview, setMarkdownPreview] = useState(false);
   const [imageData, setImageData] = useState<
     SyntheticEvent<HTMLImageElement>['currentTarget'] | null
   >(null);
 
   useEffect(() => {
     setImageData(null);
+    setRawPreview(false);
+    setMarkdownPreview(false);
   }, [filePath]);
 
   const fileExtension = filePath.split('.').at(-1) ?? 'text';
   const isTooBig = Boolean(fileData?.size && fileData.size > 1024 * 1024 * 4);
   const isPreviewDisabled = PREVIEW_DISABLED_FILES.includes(fileExtension) || isTooBig;
   const isImageFile = IMAGE_FILES.includes(fileExtension);
+  const isMarkdownFile = ['md', 'mdx'].includes(fileExtension);
   const allowRawPreview = isImageFile && filePath.endsWith('.svg');
 
   const { data, isLoading } = useSWR<string>(
@@ -116,6 +129,20 @@ export default function CodeBrowserContent({
                 Show image preview
               </Tooltip>
             )}
+            {isMarkdownFile && (
+              <Tooltip
+                trigger={
+                  <Pressable onPress={() => setMarkdownPreview(previewMode => !previewMode)}>
+                    {markdownPreview ? (
+                      <FileIcon style={tw`size-5 text-palette-gray4 dark:text-pewter`} />
+                    ) : (
+                      <MarkdownPreviewIcon style={tw`size-5 text-palette-gray4 dark:text-pewter`} />
+                    )}
+                  </Pressable>
+                }>
+                {markdownPreview ? 'Markdown code' : 'Markdown preview'}
+              </Tooltip>
+            )}
             <DownloadFileButton filePath={filePath} packageName={packageName} />
             <CopyButton
               data={data}
@@ -129,26 +156,39 @@ export default function CodeBrowserContent({
             />
           </View>
         </CodeBrowserContentHeader>
-        <CodeBrowserContentHighlighter
-          code={data}
-          lang={filePath.split('.').at(-1) ?? 'text'}
-          theme={(tw.prefixMatch('dark') ? rndDark : rndLight) as Theme}
-        />
-        <CodeBrowserContentFooter
-          leftSlot={
-            <Label style={tw`font-light text-secondary`}>
-              <span style={tw`font-medium`}>{data.split('\n').length}</span>{' '}
-              {pluralize('line', data.split('\n').length)}
-            </Label>
-          }
-          rightSlot={
-            fileData && (
+        {markdownPreview ? (
+          <View
+            id="markdownContentWrapper"
+            style={[
+              tw`bg-default px-6 pb-6 pt-4`,
+              { overflowY: 'auto', maxHeight: 'calc(100% - 46px)' },
+            ]}>
+            <MarkdownRenderer data={data} repoUrl={repoUrl} linkableHeaders={false} />
+          </View>
+        ) : (
+          <CodeBrowserContentHighlighter
+            code={data}
+            lang={filePath.split('.').at(-1) ?? 'text'}
+            theme={(tw.prefixMatch('dark') ? rndDark : rndLight) as Theme}
+          />
+        )}
+        {!markdownPreview && (
+          <CodeBrowserContentFooter
+            leftSlot={
               <Label style={tw`font-light text-secondary`}>
-                <span style={tw`font-medium`}>{formatBytes(fileData.size)}</span>
+                <span style={tw`font-medium`}>{data.split('\n').length}</span>{' '}
+                {pluralize('line', data.split('\n').length)}
               </Label>
-            )
-          }
-        />
+            }
+            rightSlot={
+              fileData && (
+                <Label style={tw`font-light text-secondary`}>
+                  <span style={tw`font-medium`}>{formatBytes(fileData.size)}</span>
+                </Label>
+              )
+            }
+          />
+        )}
       </>
     );
   }

components/Package/CodeBrowser/index.tsx

@@ -247,6 +247,7 @@ export default function CodeBrowser({
             {activeFile && activeFileData ? (
               <CodeBrowserContent
                 packageName={library.npmPkg}
+                repoUrl={library.github.urls.repo}
                 filePath={activeFile}
                 fileData={activeFileData}
                 isBrowserMaximized={isBrowserMaximized}

components/Package/MarkdownContentBox/MarkdownHeading.tsx

@@ -7,13 +7,14 @@ import tw from '~/util/tailwind';
 
 type Props = PropsWithChildren<{
   tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  linkableHeaders?: boolean;
 }>;
 
-export default function MarkdownHeading({ children, tagName }: Props) {
+export default function MarkdownHeading({ children, tagName, linkableHeaders }: Props) {
   const Heading = tagName;
   const slug = typeof children === 'string' ? kebabCase(children) : undefined;
 
-  if (!slug) {
+  if (!slug || !linkableHeaders) {
     return <Heading>{children}</Heading>;
   }