{
- if (rawContent) {
- const markup = marked.use(
- { gfm: true },
- gfmHeadingId(),
- markedAlert()
- )(rawContent) as string
+ const { setHeadings } = useMarkdownHeadings()
- return parse(markup, options)
+ const rendered = React.useMemo(() => {
+ if (rawContent) {
+ return renderMarkdown(rawContent)
}
if (htmlMarkup) {
- return parse(htmlMarkup, options)
+ return { markup: htmlMarkup, headings: [] }
}
- return null
+ return { markup: '', headings: [] }
}, [rawContent, htmlMarkup])
+
+ React.useEffect(() => {
+ setHeadings(rendered.headings)
+ }, [rendered.headings, setHeadings])
+
+ return React.useMemo(() => {
+ if (!rendered.markup) {
+ return null
+ }
+
+ return parse(rendered.markup, options)
+ }, [rendered.markup])
}
diff --git a/src/components/MarkdownHeadingContext.tsx b/src/components/MarkdownHeadingContext.tsx
new file mode 100644
index 00000000..de4a2b6a
--- /dev/null
+++ b/src/components/MarkdownHeadingContext.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { MarkdownHeading } from '~/utils/markdown/processor'
+
+const MarkdownHeadingContext = React.createContext<{
+ headings: MarkdownHeading[]
+ setHeadings(headings: MarkdownHeading[]): void
+}>({
+ headings: [],
+ setHeadings: () => undefined,
+})
+
+export function MarkdownHeadingProvider({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const [headings, setHeadings] = React.useState
([])
+
+ const value = React.useMemo(() => ({ headings, setHeadings }), [headings])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useMarkdownHeadings() {
+ return React.useContext(MarkdownHeadingContext)
+}
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
new file mode 100644
index 00000000..e6e0cc82
--- /dev/null
+++ b/src/components/Tabs.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { getFrameworkOptions } from '~/libraries'
+
+export type TabDefinition = {
+ slug: string
+ name: string
+ headers?: Array
+}
+
+export type TabsProps = {
+ tabs: Array
+ children: Array
+}
+
+export function Tabs({ tabs, children }: TabsProps) {
+ const [activeSlug, setActiveSlug] = React.useState(
+ () => tabs[0]?.slug ?? 'tab'
+ )
+
+ return (
+
+
+ {tabs.map((tab) => {
+ const options = React.useMemo(
+ () => getFrameworkOptions(tab.slug),
+ [tab.slug]
+ )
+ return (
+
+ )
+ })}
+
+
+ {children.map((child, index) => {
+ const tab = tabs[index]
+ if (!tab) return null
+ return (
+
+ {child}
+
+ )
+ })}
+
+