diff --git a/src/components/Code.tsx b/src/components/Code.tsx index cb5e9d27..77bdf563 100644 --- 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( - (tabs && tabs[0]?.key) || '' + tabs?.[0]?.key || '' ) const theme = useTheme() const [tabInterface, setTabInterface] = useState() diff --git a/src/markdoc/components/CodeTabs.tsx b/src/markdoc/components/CodeTabs.tsx index dd9f0c2d..24b09eb1 100644 --- 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] )