fix: Fix crash with CodeTabs markdoc component (#465)

pluralsh · Apr 24, 2023 · 6fb3c49 · 6fb3c49
1 parent e535483
commit 6fb3c49
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -369,7 +369,7 @@ function CodeRef(
   const parentFillLevel = useFillLevel()
   const tabStateRef = useRef()
   const [selectedTabKey, setSelectedTabKey] = useState<string>(
-    (tabs && tabs[0]?.key) || ''
+    tabs?.[0]?.key || ''
   )
   const theme = useTheme()
   const [tabInterface, setTabInterface] = useState<TabInterfaceT>()

diff --git a/src/markdoc/components/CodeTabs.tsx b/src/markdoc/components/CodeTabs.tsx
@@ -1,26 +1,30 @@
 import { useMemo } from 'react'
 import { type RenderableTreeNode } from '@markdoc/markdoc'
 
-import { isTag } from '../types'
-
 import { FenceInner, toCodeString } from './Fence'
 
+type CodeTabsTab = {
+  content: string
+  language?: string
+  process: boolean
+  showHeader?: boolean
+  title?: string
+  children?: RenderableTreeNode[] | RenderableTreeNode
+}
+
 function CodeTabs({
   tabs,
   ...props
 }: {
-  tabs: (RenderableTreeNode & {
-    content: string
-    language?: string
-    process: boolean
-    showHeader?: boolean
-    title?: string
-  })[]
+  tabs: (CodeTabsTab | null | undefined)[]
 }) {
   const codeTabs = useMemo(
     () =>
-      tabs.map((tab) => {
-        if (isTag(tab)) {
+      tabs
+        .filter(
+          (tab: CodeTabsTab | null | undefined): tab is CodeTabsTab => !!tab
+        )
+        .map((tab) => {
           const { content, children, process, ...props } = tab
 
           return {
@@ -29,10 +33,7 @@ function CodeTabs({
             label: props?.title || props?.language || '',
             content: toCodeString({ process, children, content }),
           }
-        }
-
-        return null
-      }),
+        }),
     [tabs]
   )