diff --git a/.changeset/brown-wasps-refuse.md b/.changeset/brown-wasps-refuse.md new file mode 100644 index 00000000000..bcd9f1b7f0b --- /dev/null +++ b/.changeset/brown-wasps-refuse.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Fix renderer on Patterns pages to support code blocks without meta diff --git a/polaris.shopify.com/src/components/PatternPage/PatternPage.tsx b/polaris.shopify.com/src/components/PatternPage/PatternPage.tsx index 44dc433f8ec..4b6d0b86616 100644 --- a/polaris.shopify.com/src/components/PatternPage/PatternPage.tsx +++ b/polaris.shopify.com/src/components/PatternPage/PatternPage.tsx @@ -23,6 +23,7 @@ import {PatternVariantFontMatter, PatternFrontMatter} from '../../types'; import PageMeta from '../PageMeta'; import {Stack, Row} from '../Stack'; import {Box} from '../Box'; +import Code from '../Code'; import {Lede} from '../Lede'; import {Heading} from '../Heading'; import PatternsExample from '../PatternsExample'; @@ -60,10 +61,17 @@ function codeAsContext(): Plugin { meta: Record; }[] = []; visit(tree, 'code', (node, index, parent) => { - try { - codes.push({node, index: index!, parent, meta: JSON.parse(node.meta)}); - } catch (error) { - // Just ignore this block + if (node.meta) { + try { + codes.push({ + node, + index: index!, + parent, + meta: JSON.parse(node.meta), + }); + } catch (error) { + // Just ignore this block + } } }); @@ -263,7 +271,7 @@ const BaseMarkdown = ({ {alt ) : null, - code: function Code({ + code: function MdCode({ inline, // @ts-expect-error Unsure how to tell react-markdown this prop is // being injected by a plugin @@ -301,7 +309,9 @@ const BaseMarkdown = ({ ); } - return {(children?.[0] as string) ?? ''}; + return ( + + ); }, ...components, }}