feat: add support for Markdown Front Matter parsing (#92)

Author: lumirlumir

package-lock.json

@@ -42,7 +42,7 @@
     "@eslint/css": "^0.2.0",
     "@eslint/js": "^9.9.0",
     "@eslint/json": "^0.4.1",
-    "@eslint/markdown": "^6.1.1",
+    "@eslint/markdown": "^6.4.0",
     "@lezer/highlight": "^1.2.1",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.1",

package.json

@@ -10,6 +10,7 @@ import { useExplorer } from "@/hooks/use-explorer";
 import {
 	jsonModes,
 	markdownModes,
+	markdownFrontmatters,
 	languages,
 	parsers,
 	sourceTypes,
@@ -24,6 +25,7 @@ import type {
 	JsonMode,
 	Language,
 	MarkdownMode,
+	MarkdownFrontmatter,
 	SourceType,
 	Version,
 } from "@/hooks/use-explorer";
@@ -50,19 +52,36 @@ const JSONPanel: React.FC = () => {
 const MarkdownPanel: React.FC = () => {
 	const explorer = useExplorer();
 	const { markdownOptions, setMarkdownOptions } = explorer;
-	const { markdownMode } = markdownOptions;
+	const { markdownMode, markdownFrontmatter } = markdownOptions;
 	return (
-		<LabeledSelect
-			id="markdownMode"
-			label="Mode"
-			value={markdownMode}
-			onValueChange={(value: string) => {
-				const markdownMode = value as MarkdownMode;
-				setMarkdownOptions({ ...markdownOptions, markdownMode });
-			}}
-			items={markdownModes}
-			placeholder="Mode"
-		/>
+		<>
+			<LabeledSelect
+				id="markdownMode"
+				label="Mode"
+				value={markdownMode}
+				onValueChange={(value: string) => {
+					const markdownMode = value as MarkdownMode;
+					setMarkdownOptions({ ...markdownOptions, markdownMode });
+				}}
+				items={markdownModes}
+				placeholder="Mode"
+			/>
+
+			<LabeledSelect
+				id="markdownFrontmatter"
+				label="Front Matter"
+				value={markdownFrontmatter}
+				onValueChange={(value: string) => {
+					const markdownFrontmatter = value as MarkdownFrontmatter;
+					setMarkdownOptions({
+						...markdownOptions,
+						markdownFrontmatter,
+					});
+				}}
+				items={markdownFrontmatters}
+				placeholder="Front Matter"
+			/>
+		</>
 	);
 };
 

src/components/options.tsx

@@ -43,22 +43,37 @@ export function useAST() {
 		case "json": {
 			const { jsonMode } = jsonOptions;
 			const language = json.languages[jsonMode];
-			astParseResult = language.parse({ body: code.json });
+			astParseResult = language.parse({
+				body: code.json,
+				path: "",
+				physicalPath: "",
+				bom: false,
+			});
 			break;
 		}
 
 		case "markdown": {
-			const { markdownMode } = markdownOptions;
+			const { markdownMode, markdownFrontmatter } = markdownOptions;
 			const language = markdown.languages[markdownMode];
-			astParseResult = language.parse({ body: code.markdown });
+			astParseResult = language.parse(
+				{ body: code.markdown, path: "", physicalPath: "", bom: false },
+				{
+					languageOptions: {
+						frontmatter:
+							markdownFrontmatter === "off"
+								? false
+								: markdownFrontmatter,
+					},
+				},
+			);
 			break;
 		}
 
 		case "css": {
 			const { cssMode, tolerant } = cssOptions;
 			const language = css.languages[cssMode];
 			astParseResult = language.parse(
-				{ body: code.css },
+				{ body: code.css, path: "", physicalPath: "", bom: false },
 				{ languageOptions: { tolerant } },
 			);
 			break;

src/hooks/use-ast.ts

@@ -20,6 +20,7 @@ export type Version = Exclude<Options["ecmaVersion"], undefined>;
 export type Language = "javascript" | "json" | "markdown" | "css";
 export type JsonMode = "json" | "jsonc" | "json5";
 export type MarkdownMode = "commonmark" | "gfm";
+export type MarkdownFrontmatter = "off" | "yaml" | "toml";
 export type CssMode = "css";
 
 export type Code = {
@@ -41,6 +42,7 @@ export type JsonOptions = {
 
 export type MarkdownOptions = {
 	markdownMode: MarkdownMode;
+	markdownFrontmatter: MarkdownFrontmatter;
 };
 
 export type CssOptions = {

src/hooks/use-explorer.ts

@@ -190,6 +190,21 @@ export const markdownModes = [
 	},
 ];
 
+export const markdownFrontmatters = [
+	{
+		value: "off",
+		label: "Off",
+	},
+	{
+		value: "yaml",
+		label: "YAML",
+	},
+	{
+		value: "toml",
+		label: "TOML",
+	},
+];
+
 export const cssModes = [
 	{
 		value: "css",
@@ -381,6 +396,7 @@ export const defaultJsonOptions: JsonOptions = {
 
 export const defaultMarkdownOptions: MarkdownOptions = {
 	markdownMode: "commonmark",
+	markdownFrontmatter: "off",
 };
 
 export const defaultCssOptions: CssOptions = {