Refactor: Add parseBody helper and update vega-lite and mermaid plugins

Copilot · danmarshall · Copilot · commit f534f658a16f · 2025-12-09T02:34:11.000Z
Co-authored-by: danmarshall &lt;11507384+danmarshall@users.noreply.github.com&gt;
diff --git a/packages/markdown/src/plugins/config.ts b/packages/markdown/src/plugins/config.ts
@@ -79,6 +79,37 @@ export function parseFenceInfo(info: string): {
     return { format, pluginName, params, wasDefaultId };
 }
 
+/**
+ * Parse body content as JSON or YAML based on fence info.
+ * @param content The fence content
+ * @param info The fence info string (used to detect format)
+ * @returns Parsed object and format metadata
+ */
+export function parseBody<T>(content: string, info: string): {
+    spec: T | null;
+    format: 'json' | 'yaml';
+    error?: string;
+} {
+    const { format } = parseFenceInfo(info);
+    const formatName = format === 'yaml' ? 'YAML' : 'JSON';
+    
+    try {
+        let spec: T;
+        if (format === 'yaml') {
+            spec = yaml.load(content.trim()) as T;
+        } else {
+            spec = JSON.parse(content.trim());
+        }
+        return { spec, format };
+    } catch (e) {
+        return {
+            spec: null,
+            format,
+            error: `malformed ${formatName}: ${e instanceof Error ? e.message : String(e)}`
+        };
+    }
+}
+
 /*
 //Tests for parseFenceInfo
 const tests: [string, { format: 'json' | 'yaml'; pluginName: string; variableId: string | undefined; wasDefaultId: boolean }][] = [
@@ -135,45 +166,46 @@ tests.forEach(([input, expected], i) => {
 */
 
 /**
- * Creates a plugin that can parse both JSON and YAML formats
+ * Creates a plugin that can parse both JSON and YAML formats.
+ * This handles both "head" (fence info) and "body" (content) parsing.
  */
 export function flaggablePlugin<T>(pluginName: PluginNames, className: string, flagger?: (spec: T) => RawFlaggableSpec<T>, attrs?: object) {
     const plugin: Plugin<T> = {
         name: pluginName,
         fence: (token, index) => {
-            let content = token.content.trim();
-            let spec: T;
-            let flaggableSpec: RawFlaggableSpec<T>;
-            
-            // Determine format from token info
             const info = token.info.trim();
-            const isYaml = info.startsWith('yaml ');
-            const formatName = isYaml ? 'YAML' : 'JSON';
+            const content = token.content.trim();
             
-            try {
-                if (isYaml) {
-                    spec = yaml.load(content) as T;
-                } else {
-                    spec = JSON.parse(content);
-                }
-            } catch (e) {
+            // Parse body content using the helper function
+            const parseResult = parseBody<T>(content, info);
+            
+            let flaggableSpec: RawFlaggableSpec<T>;
+            if (parseResult.error) {
+                // Parsing failed
                 flaggableSpec = {
                     spec: null,
                     hasFlags: true,
-                    reasons: [`malformed ${formatName}`],
+                    reasons: [parseResult.error],
                 };
-            }
-            if (spec) {
+            } else if (parseResult.spec) {
+                // Parsing succeeded, apply flagger if provided
                 if (flagger) {
-                    flaggableSpec = flagger(spec);
+                    flaggableSpec = flagger(parseResult.spec);
                 } else {
-                    flaggableSpec = { spec };
+                    flaggableSpec = { spec: parseResult.spec };
                 }
+            } else {
+                // No spec (shouldn't happen, but handle it)
+                flaggableSpec = {
+                    spec: null,
+                    hasFlags: true,
+                    reasons: ['No spec provided'],
+                };
             }
-            if (flaggableSpec) {
-                content = JSON.stringify(flaggableSpec);
-            }
-            return sanitizedHTML('div', { class: className, id: `${pluginName}-${index}`, ...attrs }, content, true);
+            
+            // Store the flaggable spec as JSON in the div
+            const jsonContent = JSON.stringify(flaggableSpec);
+            return sanitizedHTML('div', { class: className, id: `${pluginName}-${index}`, ...attrs }, jsonContent, true);
         },
         hydrateSpecs: (renderer, errorHandler) => {
             const flagged: SpecReview<T>[] = [];
diff --git a/packages/markdown/src/plugins/mermaid.ts b/packages/markdown/src/plugins/mermaid.ts
@@ -48,14 +48,13 @@
 import { Plugin, RawFlaggableSpec, IInstance } from '../factory.js';
 import { ErrorHandler } from '../renderer.js';
 import { sanitizedHTML } from '../sanitize.js';
-import { flaggablePlugin } from './config.js';
+import { flaggablePlugin, parseBody } from './config.js';
 import { pluginClassName } from './util.js';
 import { PluginNames } from './interfaces.js';
 import { TemplateToken, tokenizeTemplate } from 'common';
 import { MermaidConfig } from 'mermaid';
 import type Mermaid from 'mermaid';
 import { MermaidElementProps, MermaidTemplate } from '@microsoft/chartifact-schema';
-import * as yaml from 'js-yaml';
 
 interface MermaidInstance {
     id: string;
@@ -170,35 +169,23 @@ function loadMermaidFromCDN(): Promise<void> {
 export const mermaidPlugin: Plugin<MermaidSpec> = {
     ...flaggablePlugin<MermaidSpec>(pluginName, className),
     fence: (token, index) => {
+        const info = token.info.trim();
         const content = token.content.trim();
+        
+        // Try to parse as JSON/YAML using the helper function
+        const parseResult = parseBody<MermaidSpec>(content, info);
+        
         let spec: MermaidSpec;
-        let flaggableSpec: RawFlaggableSpec<MermaidSpec>;
-
-        // Determine format from token info (like flaggablePlugin does)
-        const info = token.info.trim();
-        const isYaml = info.startsWith('yaml ');
-
-        // Try to parse as YAML or JSON based on format
-        try {
-            let parsed: any;
-            if (isYaml) {
-                parsed = yaml.load(content);
-            } else {
-                parsed = JSON.parse(content);
-            }
-
-            if (parsed && typeof parsed === 'object') {
-                spec = parsed as MermaidSpec;
-            } else {
-                // If it's valid YAML/JSON but not a proper MermaidSpec object, treat as raw text
-                spec = { diagramText: content };
-            }
-        } catch (e) {
-            // If YAML/JSON parsing fails, treat as raw text
+        
+        if (parseResult.spec && typeof parseResult.spec === 'object') {
+            // Parsing succeeded and it's an object - use it as MermaidSpec
+            spec = parseResult.spec;
+        } else {
+            // If parsing failed or result is not an object, treat as raw text
             spec = { diagramText: content };
         }
 
-        flaggableSpec = inspectMermaidSpec(spec);
+        const flaggableSpec = inspectMermaidSpec(spec);
         const json = JSON.stringify(flaggableSpec);
 
         return sanitizedHTML('div', { class: className, id: `${pluginName}-${index}` }, json, true);
diff --git a/packages/markdown/src/plugins/vega-lite.ts b/packages/markdown/src/plugins/vega-lite.ts
@@ -5,59 +5,57 @@
 
 import { Plugin, RawFlaggableSpec } from '../factory.js';
 import { sanitizedHTML } from '../sanitize.js';
-import { flaggablePlugin } from './config.js';
+import { flaggablePlugin, parseBody } from './config.js';
 import { pluginClassName } from './util.js';
 import { inspectVegaSpec, vegaPlugin } from './vega.js';
 import { compile, TopLevelSpec } from 'vega-lite';
 import { Spec } from 'vega';
 import { PluginNames } from './interfaces.js';
-import * as yaml from 'js-yaml';
 
 const pluginName: PluginNames = 'vega-lite';
 const className = pluginClassName(pluginName);
 
 export const vegaLitePlugin: Plugin<TopLevelSpec> = {
     ...flaggablePlugin<TopLevelSpec>(pluginName, className),
     fence: (token, index) => {
-        let content = token.content.trim();
-        let spec: TopLevelSpec;
-        let flaggableSpec: RawFlaggableSpec<Spec>;
-        
-        // Determine format from token info
         const info = token.info.trim();
-        const isYaml = info.startsWith('yaml ');
-        const formatName = isYaml ? 'YAML' : 'JSON';
+        const content = token.content.trim();
         
-        try {
-            if (isYaml) {
-                spec = yaml.load(content) as TopLevelSpec;
-            } else {
-                spec = JSON.parse(content);
-            }
-        } catch (e) {
+        // Parse body content using the helper function
+        const parseResult = parseBody<TopLevelSpec>(content, info);
+        
+        let flaggableSpec: RawFlaggableSpec<Spec>;
+        
+        if (parseResult.error) {
+            // Parsing failed
             flaggableSpec = {
                 spec: null,
                 hasFlags: true,
-                reasons: [`malformed ${formatName}`],
+                reasons: [parseResult.error],
             };
-        }
-        if (spec) {
+        } else if (parseResult.spec) {
+            // Parsing succeeded, try to compile to Vega
             try {
-                const vegaSpec = compile(spec);
+                const vegaSpec = compile(parseResult.spec);
                 flaggableSpec = inspectVegaSpec(vegaSpec.spec);
-            }
-            catch (e) {
+            } catch (e) {
                 flaggableSpec = {
                     spec: null,
                     hasFlags: true,
-                    reasons: [`failed to compile vega spec`],
+                    reasons: [`failed to compile vega spec: ${e instanceof Error ? e.message : String(e)}`],
                 };
             }
+        } else {
+            // No spec (shouldn't happen)
+            flaggableSpec = {
+                spec: null,
+                hasFlags: true,
+                reasons: ['No spec provided'],
+            };
         }
-        if (flaggableSpec) {
-            content = JSON.stringify(flaggableSpec);
-        }
-        return sanitizedHTML('div', { class: pluginClassName(vegaPlugin.name), id: `${pluginName}-${index}` }, content, true);
+        
+        const jsonContent = JSON.stringify(flaggableSpec);
+        return sanitizedHTML('div', { class: pluginClassName(vegaPlugin.name), id: `${pluginName}-${index}` }, jsonContent, true);
     },
     hydratesBefore: vegaPlugin.name,
 };
