fix(md-render): fix markdown rendering in file viewer

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -1,6 +1,17 @@
 'use client'
 
-import { createContext, memo, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import matter from 'gray-matter'
 import { useRouter } from 'next/navigation'
 import rehypeSlug from 'rehype-slug'
@@ -10,7 +21,7 @@ import { Streamdown } from 'streamdown'
 import 'streamdown/styles.css'
 import { toError } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
-import { Checkbox, CopyCodeButton, highlight, languages, Skeleton } from '@/components/emcn'
+import { Checkbox, highlight, languages, Skeleton } from '@/components/emcn'
 import '@/components/emcn/components/code/code.css'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-css'
@@ -473,7 +484,9 @@ function resolveSimFileUrl(src: string | undefined): string | undefined {
 }
 
 const STATIC_MARKDOWN_COMPONENTS = {
-  pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  pre: ({ children }: { children?: React.ReactNode }) => (
+    <>{isValidElement(children) ? cloneElement(children, { 'data-block': 'true' }) : children}</>
+  ),
   'mermaid-diagram': ({ definition }: { definition?: string }) => {
     const isStreaming = useContext(MermaidStreamingCtx)
     return <MermaidDiagram definition={definition ?? ''} isStreaming={isStreaming} />
@@ -531,20 +544,11 @@ const STATIC_MARKDOWN_COMPONENTS = {
       {children}
     </h6>
   ),
-  inlineCode: ({ children }: { children?: React.ReactNode }) => {
-    if (typeof children === 'string' && children.includes('\n')) {
-      return (
-        <code className='my-4 block overflow-x-auto whitespace-pre-wrap break-words rounded-lg bg-[var(--surface-5)] p-4 font-mono text-[var(--text-primary)] leading-[1.6]'>
-          {children}
-        </code>
-      )
-    }
-    return (
-      <code className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[var(--caution)]'>
-        {children}
-      </code>
-    )
-  },
+  inlineCode: ({ children }: { children?: React.ReactNode }) => (
+    <code className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[var(--caution)] not-italic'>
+      {children}
+    </code>
+  ),
   code: ({ children, className }: { children?: React.ReactNode; className?: string }) => {
     const langMatch = className?.match(/language-(\w+)/)
     const langRaw = langMatch?.[1] ?? ''
@@ -564,21 +568,17 @@ const STATIC_MARKDOWN_COMPONENTS = {
 
     return (
       <div className='my-4 overflow-hidden rounded-lg border border-[var(--border)]'>
-        <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
+        <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
           <span className='text-[11px] text-[var(--text-tertiary)]'>{langRaw || 'code'}</span>
-          <CopyCodeButton
-            code={codeString}
-            className='-mr-1 text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'
-          />
         </div>
         <div className='code-editor-theme bg-[var(--surface-5)]'>
           {html ? (
             <pre
-              className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] leading-[1.6]'
+              className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] not-italic leading-[1.6]'
               dangerouslySetInnerHTML={{ __html: html }}
             />
           ) : (
-            <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] text-[var(--text-primary)] leading-[1.6]'>
+            <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] text-[var(--text-primary)] not-italic leading-[1.6]'>
               <code>{codeString.trimEnd()}</code>
             </pre>
           )}
@@ -634,7 +634,7 @@ const STATIC_MARKDOWN_COMPONENTS = {
     <tr className='border-[var(--border)] border-b last:border-b-0'>{children}</tr>
   ),
   th: ({ children }: { children?: React.ReactNode }) => (
-    <th className='px-3 py-2 text-left font-semibold text-[12px] text-[var(--text-primary)]'>
+    <th className='px-3 py-2 text-left font-semibold text-[13px] text-[var(--text-primary)]'>
       {children}
     </th>
   ),
@@ -684,20 +684,36 @@ function LiRenderer({
   const isTaskItem = typeof className === 'string' && className.includes('task-list-item')
 
   if (isTaskItem) {
+    const [checkboxChild, ...contentChildren] = Children.toArray(children)
+    const content = <span className='min-w-0 flex-1'>{contentChildren}</span>
+
     if (ctx) {
       const offset = node?.position?.start?.offset
       if (offset === undefined) {
-        return <li className='flex items-start gap-2 break-words leading-[1.6]'>{children}</li>
+        return (
+          <li className='flex items-start gap-2 break-words leading-[1.6]'>
+            {checkboxChild}
+            {content}
+          </li>
+        )
       }
       const before = ctx.contentRef.current.slice(0, offset)
       const prior = before.match(/^(\s*(?:[-*+]|\d+[.)]) +)\[([ xX])\]/gm)
       return (
         <CheckboxIndexCtx.Provider value={prior ? prior.length : 0}>
-          <li className='flex items-start gap-2 break-words leading-[1.6]'>{children}</li>
+          <li className='flex items-start gap-2 break-words leading-[1.6]'>
+            {checkboxChild}
+            {content}
+          </li>
         </CheckboxIndexCtx.Provider>
       )
     }
-    return <li className='flex items-start gap-2 break-words leading-[1.6]'>{children}</li>
+    return (
+      <li className='flex items-start gap-2 break-words leading-[1.6]'>
+        {checkboxChild}
+        {content}
+      </li>
+    )
   }
 
   return <li className='break-words leading-[1.6]'>{children}</li>

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -622,7 +622,7 @@ export function Files() {
       const mimeType = getMimeTypeFromExtension('md')
       const blob = new Blob([''], { type: mimeType })
       const file = new File([blob], name, { type: mimeType })
-      const result = await uploadFile.mutateAsync({ workspaceId, file })
+      const result = await uploadFile.mutateAsync({ workspaceId, file, skipToast: true })
       const fileId = result.file?.id
       if (fileId) {
         justCreatedFileIdRef.current = fileId

apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx

@@ -345,7 +345,7 @@ export function ImportCsvDialog({
         <ModalBody>
           {!parsed ? (
             <div className='flex flex-col gap-2'>
-              <Label>Upload CSV</Label>
+              <Label>Import CSV</Label>
               <Button
                 type='button'
                 variant='default'

apps/sim/app/workspace/[workspaceId]/tables/components/tables-list-context-menu/tables-list-context-menu.tsx

@@ -59,7 +59,7 @@ export function TablesListContextMenu({
         {onUploadCsv && (
           <DropdownMenuItem disabled={disableUpload} onSelect={onUploadCsv}>
             <Upload />
-            Upload CSV
+            Import CSV
           </DropdownMenuItem>
         )}
       </DropdownMenuContent>

apps/sim/app/workspace/[workspaceId]/tables/tables.tsx

@@ -450,7 +450,7 @@ export function Tables() {
       ? `${uploadProgress.completed}/${uploadProgress.total}`
       : uploading
         ? 'Uploading...'
-        : 'Upload CSV'
+        : 'Import CSV'
 
   const handleCreateTable = useCallback(async () => {
     const existingNames = tables.map((t) => t.name)

apps/sim/hooks/queries/workspace-files.ts

@@ -205,6 +205,7 @@ interface UploadFileParams {
   file: File
   onProgress?: (event: UploadProgressEvent) => void
   signal?: AbortSignal
+  skipToast?: boolean
 }
 
 interface UploadFileResponse {
@@ -324,7 +325,9 @@ export function useUploadWorkspaceFile() {
       queryClient.invalidateQueries({ queryKey: workspaceFilesKeys.storageInfo() })
     },
     onSuccess: (_data, variables) => {
-      toast.success(`Uploaded "${variables.file.name}"`)
+      if (!variables.skipToast) {
+        toast.success(`Uploaded "${variables.file.name}"`)
+      }
     },
     onError: (error, variables) => {
       logger.error('Failed to upload file:', error)