@reslide-dev/mdx 0.0.1 → 0.2.0

package/dist/index.mjs

@@ -1,7 +1,12 @@
-import remarkFrontmatter from "remark-frontmatter";
 import { visit } from "unist-util-visit";
 import { compile } from "@mdx-js/mdx";
+import rehypeShiki from "@shikijs/rehype";
+import { transformerNotationHighlight } from "@shikijs/transformers";
+import rehypeKatex from "rehype-katex";
 import remarkDirective from "remark-directive";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 //#region src/remark-slides.ts
 function parseYamlString(value) {
 	const options = {};
@@ -40,11 +45,10 @@ function tryExtractOptionsFromNodes(nodes) {
 * Remark plugin that splits MDX content at `---` (thematic breaks)
 * into `<Slide>` components wrapped in a `<Deck>`.
 *
-* Internally enables remark-frontmatter for the first YAML block.
+* Requires remark-frontmatter to be added before this plugin in the pipeline.
 * Subsequent slide frontmatters are detected via setext heading pattern.
 */
 function remarkSlides() {
-	this.use(remarkFrontmatter, ["yaml"]);
 	return (tree) => {
 		const slides = [];
 		let current = [];
@@ -62,7 +66,6 @@ function remarkSlides() {
 			const content = slideContent.slice(contentStart);
 			if (content.length === 0 && Object.keys(options).length === 0) continue;
 			const clickCount = countClickDirectives(content);
-			const slideIndex = slideElements.length;
 			const attrs = [];
 			if (options.layout) attrs.push({
 				type: "mdxJsxAttribute",
@@ -79,14 +82,6 @@ function remarkSlides() {
 				type: "mdxJsxFlowElement",
 				name: "ClickSteps",
 				attributes: [{
-					type: "mdxJsxAttribute",
-					name: "slideIndex",
-					value: {
-						type: "mdxJsxAttributeValueExpression",
-						value: String(slideIndex),
-						data: { estree: createNumericExpression(slideIndex) }
-					}
-				}, {
 					type: "mdxJsxAttribute",
 					name: "count",
 					value: {
@@ -142,94 +137,127 @@ function createNumericExpression(value) {
 * Remark plugin that converts `::click` directives (from remark-directive)
 * into `<Click>` MDX JSX components.
 *
-* Supports both leaf (`::click`) and container (`::: click ... :::`) forms.
+* For leaf directives (`::click`), all subsequent sibling nodes until the
+* next `::click` or `---` are gathered as children of the `<Click>`.
+*
+* For container directives (`::: click ... :::`), children are wrapped directly.
+*
 * Auto-increments the `at` attribute for sequential click steps.
 */
 function remarkClick() {
 	return (tree) => {
-		let stepCounter = 0;
-		visit(tree, (node, index, parent) => {
-			if (node.type !== "leafDirective" && node.type !== "containerDirective") return;
-			if (node.name !== "click") return;
-			if (index == null || !parent) return;
-			stepCounter++;
-			const attrs = [{
-				type: "mdxJsxAttribute",
-				name: "at",
-				value: {
-					type: "mdxJsxAttributeValueExpression",
-					value: String(stepCounter),
-					data: { estree: {
-						type: "Program",
-						sourceType: "module",
-						body: [{
-							type: "ExpressionStatement",
-							expression: {
-								type: "Literal",
-								value: stepCounter,
-								raw: String(stepCounter)
-							}
-						}]
-					} }
-				}
-			}];
-			if (node.type === "leafDirective") {
-				const siblings = parent.children;
-				const gathered = [];
-				let i = index + 1;
-				while (i < siblings.length) {
-					const sibling = siblings[i];
-					if ((sibling.type === "leafDirective" || sibling.type === "containerDirective") && sibling.name === "click") break;
-					if (sibling.type === "thematicBreak") break;
-					gathered.push(siblings[i]);
-					i++;
-				}
-				if (gathered.length > 0) siblings.splice(index + 1, gathered.length);
-				parent.children[index] = {
-					type: "mdxJsxFlowElement",
-					name: "Click",
-					attributes: attrs,
-					children: gathered
-				};
-				return;
-			}
-			parent.children[index] = {
+		processNode(tree);
+	};
+}
+function isClickDirective(node) {
+	return (node.type === "leafDirective" || node.type === "containerDirective") && "name" in node && node.name === "click";
+}
+function processNode(node) {
+	for (const child of node.children) if ("children" in child && Array.isArray(child.children)) processNode(child);
+	const newChildren = [];
+	let stepCounter = 0;
+	let i = 0;
+	while (i < node.children.length) {
+		const child = node.children[i];
+		if (!isClickDirective(child)) {
+			newChildren.push(child);
+			i++;
+			continue;
+		}
+		stepCounter++;
+		if (child.type === "containerDirective") {
+			newChildren.push({
 				type: "mdxJsxFlowElement",
 				name: "Click",
-				attributes: attrs,
-				children: node.children
-			};
+				attributes: [createAtAttribute(stepCounter)],
+				children: "children" in child ? child.children : []
+			});
+			i++;
+			continue;
+		}
+		const gathered = [];
+		i++;
+		while (i < node.children.length) {
+			const sibling = node.children[i];
+			if (isClickDirective(sibling)) break;
+			if (sibling.type === "thematicBreak") break;
+			gathered.push(sibling);
+			i++;
+		}
+		newChildren.push({
+			type: "mdxJsxFlowElement",
+			name: "Click",
+			attributes: [createAtAttribute(stepCounter)],
+			children: gathered
 		});
+	}
+	node.children = newChildren;
+}
+function createAtAttribute(step) {
+	return {
+		type: "mdxJsxAttribute",
+		name: "at",
+		value: {
+			type: "mdxJsxAttributeValueExpression",
+			value: String(step),
+			data: { estree: {
+				type: "Program",
+				sourceType: "module",
+				body: [{
+					type: "ExpressionStatement",
+					expression: {
+						type: "Literal",
+						value: step,
+						raw: String(step)
+					}
+				}]
+			} }
+		}
 	};
 }
 //#endregion
 //#region src/remark-mark.ts
+const MARK_TYPES = [
+	"highlight",
+	"underline",
+	"circle"
+];
 /**
-* Remark plugin that converts `:mark[text]{.style}` directives
-* into `<Mark>` MDX JSX components.
+* Remark plugin that converts mark directives into `<Mark>` MDX JSX components.
 *
-* Supports styles: highlight, underline, circle
-* Supports color via additional class: .orange, .red, .blue, etc.
+* Supports two syntax forms (both avoid `{}` for MDX compatibility):
 *
-* Example: `:mark[important text]{.highlight.orange}`
-* Produces: `<Mark type="highlight" color="orange">important text</Mark>`
+* 1. Type-based directives — the directive name IS the mark type:
+*    `:highlight[text]`  → `<Mark type="highlight">text</Mark>`
+*    `:underline[text]`  → `<Mark type="underline">text</Mark>`
+*    `:circle[text]`     → `<Mark type="circle">text</Mark>`
+*
+* 2. Type + color via hyphen:
+*    `:highlight-yellow[text]` → `<Mark type="highlight" color="yellow">`
+*    `:underline-blue[text]`   → `<Mark type="underline" color="blue">`
+*    `:circle-red[text]`       → `<Mark type="circle" color="red">`
+*
+* 3. Legacy `:mark[text]{.type.color}` syntax (works in non-MDX contexts):
+*    `:mark[important]{.highlight.orange}` → `<Mark type="highlight" color="orange">`
 */
 function remarkMark() {
 	return (tree) => {
 		visit(tree, (node, index, parent) => {
 			if (node.type !== "textDirective") return;
-			if (node.name !== "mark") return;
 			if (index == null || !parent) return;
-			const classes = (node.attributes?.class ?? "").split(/\s+/).filter(Boolean);
-			const markTypes = [
-				"highlight",
-				"underline",
-				"circle"
-			];
-			let type = "highlight";
+			let type;
 			let color;
-			for (const cls of classes) if (markTypes.includes(cls)) type = cls;
-			else if (cls) color = cls;
+			if (node.name === "mark") {
+				const classes = (node.attributes?.class ?? "").split(/\s+/).filter(Boolean);
+				for (const cls of classes) if (MARK_TYPES.includes(cls)) type = cls;
+				else if (cls) color = cls;
+				type ??= "highlight";
+			} else {
+				const parsed = parseDirectiveName(node.name);
+				if (!parsed) return;
+				type = parsed.type;
+				color = parsed.color;
+			}
 			const attrs = [{
 				type: "mdxJsxAttribute",
 				name: "type",
@@ -249,6 +277,57 @@ function remarkMark() {
 		});
 	};
 }
+function parseDirectiveName(name) {
+	if (MARK_TYPES.includes(name)) return { type: name };
+	for (const markType of MARK_TYPES) if (name.startsWith(markType + "-")) {
+		const color = name.slice(markType.length + 1);
+		if (color) return {
+			type: markType,
+			color
+		};
+	}
+	return null;
+}
+//#endregion
+//#region src/remark-directive-fallback.ts
+function isDirectiveNode(node) {
+	if (typeof node !== "object" || node === null) return false;
+	const n = node;
+	return n.type === "textDirective" || n.type === "leafDirective";
+}
+function directiveToText(node) {
+	let text = `${node.type === "leafDirective" ? "::" : ":"}${node.name}`;
+	if (node.children.length > 0) {
+		const content = node.children.map((c) => c.value ?? "").join("");
+		if (content) text += `[${content}]`;
+	}
+	if (node.attributes && Object.keys(node.attributes).length > 0) {
+		const attrs = Object.entries(node.attributes).map(([k, v]) => v ? `${k}="${v}"` : k).join(" ");
+		text += `{${attrs}}`;
+	}
+	return text;
+}
+/**
+* Remark plugin that converts remaining (unprocessed) directive nodes
+* back to plain text. This prevents `remark-directive` from eating
+* colon-prefixed patterns like time notations (13:00), port numbers
+* (localhost:3000), or unknown directives.
+*
+* Should be placed **after** `remarkClick` and `remarkMark` in the
+* plugin pipeline so that it only touches leftovers.
+*/
+function remarkDirectiveFallback() {
+	return (tree) => {
+		visit(tree, (node, index, parent) => {
+			if (!isDirectiveNode(node)) return;
+			if (!parent || typeof index !== "number") return;
+			parent.children[index] = {
+				type: "text",
+				value: directiveToText(node)
+			};
+		});
+	};
+}
 //#endregion
 //#region src/compile.ts
 /**
@@ -279,12 +358,23 @@ async function compileMdxSlides(source, options) {
 		outputFormat: "function-body",
 		remarkPlugins: [
 			remarkDirective,
+			remarkGfm,
+			[remarkFrontmatter, ["yaml"]],
+			remarkMath,
 			remarkSlides,
 			remarkClick,
 			remarkMark,
+			remarkDirectiveFallback,
 			...options?.remarkPlugins ?? []
 		],
-		rehypePlugins: options?.rehypePlugins ?? [],
+		rehypePlugins: [
+			rehypeKatex,
+			[rehypeShiki, {
+				theme: "github-dark",
+				transformers: [transformerNotationHighlight()]
+			}],
+			...options?.rehypePlugins ?? []
+		],
 		providerImportSource: void 0
 	});
 	return {
@@ -307,4 +397,4 @@ function countSlides(source) {
 	return Math.max(1, parts.filter((p) => p.trim().length > 0).length);
 }
 //#endregion
-export { compileMdxSlides, parseSlideMetadata, remarkClick, remarkMark, remarkSlides };
+export { compileMdxSlides, parseSlideMetadata, remarkClick, remarkDirectiveFallback, remarkMark, remarkSlides };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reslide-dev/mdx",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "Remark/rehype plugins for reslide MDX preprocessing",
   "license": "MIT",
   "files": [
@@ -11,39 +11,40 @@
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch",
-    "test": "vp test"
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^3.1.1",
-    "remark-frontmatter": "^5.0.0",
-    "unist-util-visit": "^5.0.0"
+    "@mdx-js/mdx": "3.1.1",
+    "@shikijs/rehype": "4.0.2",
+    "@shikijs/transformers": "4.0.2",
+    "rehype-katex": "7.0.1",
+    "remark-frontmatter": "5.0.0",
+    "remark-gfm": "4.0.1",
+    "remark-math": "6.0.0",
+    "unist-util-visit": "5.1.0"
   },
   "devDependencies": {
-    "@types/mdast": "catalog:",
-    "@types/unist": "catalog:",
-    "remark": "^15.0.0",
-    "remark-directive": "^3.0.0",
-    "remark-frontmatter": "catalog:",
-    "remark-mdx": "^3.1.0",
-    "unified": "catalog:",
-    "vite-plus": "catalog:",
-    "vitest": "catalog:"
+    "@types/mdast": "4.0.4",
+    "@types/unist": "3.0.3",
+    "remark": "15.0.1",
+    "remark-directive": "4.0.0",
+    "remark-frontmatter": "5.0.0",
+    "remark-mdx": "3.1.1",
+    "unified": "11.0.5",
+    "vite-plus": "latest",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
   },
   "peerDependencies": {
-    "remark-directive": "^3.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
+    "remark-directive": "4.0.0"
   },
   "inlinedDependencies": {
     "@types/mdast": "4.0.4",
-    "@types/unist": "3.0.3",
-    "trough": "2.2.0",
-    "unified": "11.0.5",
-    "vfile": "6.0.3",
-    "vfile-message": "4.0.3"
+    "@types/unist": "3.0.3"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test"
   }
-}
+}