diff --git a/src/components/MDCParserAndRenderer.vue b/src/components/MDCParserAndRenderer.vue index 24e5398d3d..f55d217140 100644 --- a/src/components/MDCParserAndRenderer.vue +++ b/src/components/MDCParserAndRenderer.vue @@ -6,6 +6,9 @@ :key="content" class="mdc-renderer" /> +
+ MDC parse error: {{ parseError }} +
@@ -18,13 +21,25 @@ }>() const docAst = ref() + const parseError = ref() async function parseContent() { - const parse = await getMDCParser() - if (!props.content) { - throw new Error("No content provided to MDCParserAndRenderer.vue") + try { + const parse = await getMDCParser() + if (!props.content) { + throw new Error("No content provided to MDCParserAndRenderer.vue") + } + const result = await parse(props.content) + if (!result?.body) { + parseError.value = `Parser returned empty body. AST keys: ${Object.keys(result ?? {}).join(", ")}` + console.error("[MDCParserAndRenderer] empty body:", result) + } else { + docAst.value = result + } + } catch (e: any) { + parseError.value = e?.message ?? String(e) + console.error("[MDCParserAndRenderer] parse failed:", e) } - docAst.value = await parse(props.content) } onMounted(async () => { @@ -79,6 +94,15 @@ } } + .parse-error { + background: #fee; + border: 1px solid #f88; + border-radius: 0.5rem; + padding: 1rem; + color: #c00; + font-size: 0.875rem; + } + .skeleton { display: inline-block; position: relative; diff --git a/src/components/stories/Card.vue b/src/components/stories/Card.vue index 3ab272d867..6f1c0bbf64 100644 --- a/src/components/stories/Card.vue +++ b/src/components/stories/Card.vue @@ -1,12 +1,15 @@