Skip to content

Commit 817833c

Browse files
icecrasher321icecrasher321
committed
replace react markdown with streamdown
1 parent f2fcfe7 commit 817833c

File tree

11 files changed

+465
-559
lines changed

11 files changed

+465
-559
lines changed

‎apps/sim/app/(landing)/components/features/components/features-preview.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import { type SVGProps, useEffect, useRef, useState } from 'react'
44
import { AnimatePresence, motion, useInView } from 'framer-motion'
5-
import ReactMarkdown, { type Components } from 'react-markdown'
6-
import remarkGfm from 'remark-gfm'
5+
import { Streamdown } from 'streamdown'
6+
import 'streamdown/styles.css'
77
import { ChevronDown } from '@/components/emcn'
88
import { Database, File, Library, Table } from '@/components/emcn/icons'
99
import {
@@ -557,26 +557,32 @@ The team agreed to prioritize the new onboarding flow. Key decisions:
557557
558558
Follow up with engineering on the timeline for the API v2 migration. Draft the proposal for the board meeting next week.`
559559

560-
const MD_COMPONENTS: Components = {
561-
h1: ({ children }) => (
560+
const MD_COMPONENTS = {
561+
h1: ({ children }: { children?: React.ReactNode }) => (
562562
<p
563563
role='presentation'
564564
className='mb-4 border-[#E5E5E5] border-b pb-2 font-semibold text-[#1C1C1C] text-[20px]'
565565
>
566566
{children}
567567
</p>
568568
),
569-
h2: ({ children }) => (
569+
h2: ({ children }: { children?: React.ReactNode }) => (
570570
<h2 className='mt-5 mb-3 border-[#E5E5E5] border-b pb-1.5 font-semibold text-[#1C1C1C] text-[16px]'>
571571
{children}
572572
</h2>
573573
),
574-
ul: ({ children }) => <ul className='mb-3 list-disc pl-6'>{children}</ul>,
575-
ol: ({ children }) => <ol className='mb-3 list-decimal pl-6'>{children}</ol>,
576-
li: ({ children }) => (
574+
ul: ({ children }: { children?: React.ReactNode }) => (
575+
<ul className='mb-3 list-disc pl-6'>{children}</ul>
576+
),
577+
ol: ({ children }: { children?: React.ReactNode }) => (
578+
<ol className='mb-3 list-decimal pl-6'>{children}</ol>
579+
),
580+
li: ({ children }: { children?: React.ReactNode }) => (
577581
<li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>{children}</li>
578582
),
579-
p: ({ children }) => <p className='mb-3 text-[#1C1C1C] text-[14px] leading-[1.6]'>{children}</p>,
583+
p: ({ children }: { children?: React.ReactNode }) => (
584+
<p className='mb-3 text-[#1C1C1C] text-[14px] leading-[1.6]'>{children}</p>
585+
),
580586
}
581587

582588
function MockFullFiles() {
@@ -618,9 +624,9 @@ function MockFullFiles() {
618624
transition={{ duration: 0.4, delay: 0.5 }}
619625
>
620626
<div className='h-full overflow-auto p-6'>
621-
<ReactMarkdown remarkPlugins={[remarkGfm]} components={MD_COMPONENTS}>
627+
<Streamdown mode='static' components={MD_COMPONENTS}>
622628
{source}
623-
</ReactMarkdown>
629+
</Streamdown>
624630
</div>
625631
</motion.div>
626632
</div>

‎apps/sim/app/changelog/components/timeline-list.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client'
22

33
import React from 'react'
4-
import ReactMarkdown from 'react-markdown'
4+
import { Streamdown } from 'streamdown'
5+
import 'streamdown/styles.css'
56
import { Avatar, AvatarFallback, AvatarImage } from '@/components/emcn'
67
import type { ChangelogEntry } from '@/app/changelog/components/changelog-content'
78

@@ -141,7 +142,8 @@ export default function ChangelogList({ initialEntries }: Props) {
141142
</div>
142143

143144
<div className='max-w-none'>
144-
<ReactMarkdown
145+
<Streamdown
146+
mode='static'
145147
components={{
146148
h2: ({ children, ...props }) =>
147149
isContributorsLabel(children) ? null : (
@@ -192,11 +194,8 @@ export default function ChangelogList({ initialEntries }: Props) {
192194
{children}
193195
</strong>
194196
),
195-
code: ({ children, ...props }) => (
196-
<code
197-
className='rounded bg-[var(--landing-bg-elevated)] px-1 py-0.5 font-mono text-[var(--landing-text)] text-xs'
198-
{...props}
199-
>
197+
inlineCode: ({ children }) => (
198+
<code className='rounded bg-[var(--landing-bg-elevated)] px-1 py-0.5 font-mono text-[var(--landing-text)] text-xs'>
200199
{children}
201200
</code>
202201
),
@@ -212,7 +211,7 @@ export default function ChangelogList({ initialEntries }: Props) {
212211
}}
213212
>
214213
{cleanMarkdown(entry.content)}
215-
</ReactMarkdown>
214+
</Streamdown>
216215
</div>
217216
</div>
218217
))}

‎apps/sim/app/chat/components/message/components/markdown-renderer.tsx‎

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { type HTMLAttributes, memo, type ReactNode, useMemo } from 'react'
2-
import ReactMarkdown from 'react-markdown'
3-
import remarkGfm from 'remark-gfm'
2+
import { code } from '@streamdown/code'
3+
import { Streamdown } from 'streamdown'
4+
import 'streamdown/styles.css'
45
import { Tooltip } from '@/components/emcn'
56
import { CopyCodeButton } from '@/components/ui/copy-code-button'
67
import { extractTextContent } from '@/lib/core/utils/react-node-text'
@@ -25,7 +26,7 @@ export function LinkWithPreview({ href, children }: { href: string; children: Re
2526
)
2627
}
2728

28-
const REMARK_PLUGINS = [remarkGfm]
29+
const STREAMDOWN_PLUGINS = { code }
2930

3031
function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
3132
return {
@@ -72,11 +73,7 @@ function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
7273
{children}
7374
</ol>
7475
),
75-
li: ({
76-
children,
77-
ordered,
78-
...props
79-
}: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
76+
li: ({ children }: React.LiHTMLAttributes<HTMLLIElement>) => (
8077
<li className='font-sans text-gray-800 dark:text-gray-200' style={{ display: 'list-item' }}>
8178
{children}
8279
</li>
@@ -116,28 +113,11 @@ function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
116113
)
117114
},
118115

119-
code: ({
120-
inline,
121-
className,
122-
children,
123-
...props
124-
}: React.HTMLAttributes<HTMLElement> & { className?: string; inline?: boolean }) => {
125-
if (inline) {
126-
return (
127-
<code
128-
className='rounded bg-gray-200 px-1 py-0.5 font-mono text-[0.9em] text-gray-800 dark:bg-gray-700 dark:text-gray-200'
129-
{...props}
130-
>
131-
{children}
132-
</code>
133-
)
134-
}
135-
return (
136-
<code className={className} {...props}>
137-
{children}
138-
</code>
139-
)
140-
},
116+
inlineCode: ({ children }: { children?: React.ReactNode }) => (
117+
<code className='rounded bg-gray-200 px-1 py-0.5 font-mono text-[0.9em] text-gray-800 dark:bg-gray-700 dark:text-gray-200'>
118+
{children}
119+
</code>
120+
),
141121

142122
blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
143123
<blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-sans text-gray-700 italic dark:border-gray-600 dark:text-gray-300'>
@@ -215,9 +195,9 @@ const MarkdownRenderer = memo(function MarkdownRenderer({
215195

216196
return (
217197
<div className='space-y-4 break-words font-sans text-[var(--landing-text)] text-base leading-relaxed'>
218-
<ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={components}>
198+
<Streamdown mode='static' plugins={STREAMDOWN_PLUGINS} components={components}>
219199
{processedContent}
220-
</ReactMarkdown>
200+
</Streamdown>
221201
</div>
222202
)
223203
})

‎apps/sim/app/templates/[id]/template.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import {
1414
User,
1515
} from 'lucide-react'
1616
import { useParams, useRouter, useSearchParams } from 'next/navigation'
17-
import ReactMarkdown from 'react-markdown'
17+
import { Streamdown } from 'streamdown'
18+
import 'streamdown/styles.css'
1819
import {
1920
Breadcrumb,
2021
Button,
@@ -875,7 +876,8 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
875876
About this Workflow
876877
</h3>
877878
<div className='max-w-none space-y-2'>
878-
<ReactMarkdown
879+
<Streamdown
880+
mode='static'
879881
components={{
880882
p: ({ children }) => (
881883
<p className='mb-2 font-sans text-muted-foreground text-sm leading-[1.4rem] last:mb-0'>
@@ -913,16 +915,16 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
913915
</ol>
914916
),
915917
li: ({ children }) => <li className='leading-[1.4rem]'>{children}</li>,
916-
code: ({ inline, children }: any) =>
917-
inline ? (
918-
<code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[var(--caution)] text-xs'>
919-
{children}
920-
</code>
921-
) : (
922-
<code className='my-2 block overflow-x-auto rounded-md bg-muted p-3 font-mono text-foreground text-xs'>
923-
{children}
924-
</code>
925-
),
918+
inlineCode: ({ children }) => (
919+
<code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[var(--caution)] text-xs'>
920+
{children}
921+
</code>
922+
),
923+
code: ({ children }) => (
924+
<code className='my-2 block overflow-x-auto rounded-md bg-muted p-3 font-mono text-foreground text-xs'>
925+
{children}
926+
</code>
927+
),
926928
a: ({ href, children }) => (
927929
<a
928930
href={href}
@@ -942,7 +944,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
942944
}}
943945
>
944946
{template.details.about}
945-
</ReactMarkdown>
947+
</Streamdown>
946948
</div>
947949
</div>
948950
)}
@@ -1056,7 +1058,8 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
10561058
{/* Creator bio */}
10571059
{template.creator.details?.about && (
10581060
<div className='max-w-none'>
1059-
<ReactMarkdown
1061+
<Streamdown
1062+
mode='static'
10601063
components={{
10611064
p: ({ children }) => (
10621065
<p className='mb-2 font-sans text-muted-foreground text-sm leading-[1.4rem] last:mb-0'>
@@ -1081,7 +1084,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
10811084
}}
10821085
>
10831086
{template.creator.details.about}
1084-
</ReactMarkdown>
1087+
</Streamdown>
10851088
</div>
10861089
)}
10871090
</div>

0 commit comments

Comments
 (0)