rehype-instui-markdown 0.0.6

package/README.md

@@ -0,0 +1,23 @@
+# vite-plus-starter
+
+A starter for creating a Vite Plus project.
+
+## Development
+
+- Install dependencies:
+
+```bash
+vp install
+```
+
+- Run the unit tests:
+
+```bash
+vp test
+```
+
+- Build the library:
+
+```bash
+vp pack
+```

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+//#region src/index.d.ts
+/**
+ * Base shape shared by all nodes handled by these transforms.
+ */
+interface HastBaseNode {
+  /** Unist node type. */
+  type?: string;
+  /** Optional HTML tag name. */
+  tagName?: string;
+  /** Optional text node value. */
+  value?: string;
+  /** Optional child nodes. */
+  children?: HastNode[];
+  /** Optional element properties. */
+  properties?: Record<string, unknown>;
+}
+/**
+ * Minimal text-node representation used by plugin transforms.
+ */
+interface HastTextNode extends HastBaseNode {
+  type: "text";
+  value: string;
+}
+/**
+ * Minimal element-node representation used by plugin transforms.
+ */
+interface HastElementNode extends HastBaseNode {
+  type: "element";
+  tagName: string;
+}
+/**
+ * Minimal root-node representation used by plugin transforms.
+ */
+interface HastRootNode extends HastBaseNode {
+  type: "root";
+}
+/**
+ * Generic fallback node shape.
+ */
+interface HastUnknownNode extends HastBaseNode {}
+/**
+ * Supported node variants handled by these plugins.
+ */
+type HastNode = HastTextNode | HastElementNode | HastRootNode | HastUnknownNode;
+/**
+ * Signature for the tree transformer returned by each plugin factory.
+ */
+type HastTransformer = (tree: HastNode) => void;
+/**
+ * Regex used to detect color tokens in markdown text nodes.
+ */
+declare const COLOR_TOKEN_REGEX: RegExp;
+/**
+ * Regex used to detect icon tokens in markdown text nodes.
+ */
+declare const ICON_TOKEN_REGEX: RegExp;
+/**
+ * Rehype plugin that unwraps bare paragraph nodes inside blockquotes.
+ *
+ * This avoids invalid nesting when markdown blockquote content later renders
+ * through components that expect inline children.
+ */
+declare function rehypeUnwrapBlockquoteParagraphs(): HastTransformer;
+/**
+ * Rehype plugin that wraps color tokens in a span with color metadata.
+ *
+ * It skips code and preformatted blocks to avoid mutating code examples.
+ */
+declare function rehypeColorCodes(): HastTransformer;
+/**
+ * Rehype plugin that wraps :icon: and :icon|color: tokens in span metadata.
+ *
+ * It skips code and preformatted blocks to avoid mutating code examples.
+ */
+declare function rehypeInstUIIconTokens(): HastTransformer;
+//#endregion
+export { COLOR_TOKEN_REGEX, HastElementNode, HastNode, HastRootNode, HastTextNode, HastTransformer, HastUnknownNode, ICON_TOKEN_REGEX, rehypeColorCodes, rehypeInstUIIconTokens, rehypeUnwrapBlockquoteParagraphs };

package/dist/index.mjs

@@ -0,0 +1,126 @@
+import { visit } from "unist-util-visit";
+//#region src/index.ts
+/**
+* Regex used to detect color tokens in markdown text nodes.
+*/
+const COLOR_TOKEN_REGEX = /#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b|rgba?\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)|hsla?\(\s*\d{1,3}(?:\.\d+)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(?:,\s*(?:0|1|0?\.\d+))?\s*\)/gi;
+/**
+* Regex used to detect icon tokens in markdown text nodes.
+*/
+const ICON_TOKEN_REGEX = /:([a-zA-Z][a-zA-Z0-9]*)(?:\|([^:]+))?:/g;
+function isElementNode(node, tagName) {
+	return node.type === "element" && (tagName ? node.tagName === tagName : true);
+}
+function shouldSkipInlineTokenTransform(parent) {
+	return isElementNode(parent, "pre") || isElementNode(parent, "code");
+}
+/**
+* Rehype plugin that unwraps bare paragraph nodes inside blockquotes.
+*
+* This avoids invalid nesting when markdown blockquote content later renders
+* through components that expect inline children.
+*/
+function rehypeUnwrapBlockquoteParagraphs() {
+	return (tree) => {
+		visit(tree, "element", (node) => {
+			if (!isElementNode(node, "blockquote")) return;
+			node.children = (node.children ?? []).flatMap((child) => {
+				if (isElementNode(child, "p")) return child.children ?? [];
+				return [child];
+			});
+		});
+	};
+}
+/**
+* Rehype plugin that wraps color tokens in a span with color metadata.
+*
+* It skips code and preformatted blocks to avoid mutating code examples.
+*/
+function rehypeColorCodes() {
+	return (tree) => {
+		visit(tree, "text", (node, index, parent) => {
+			if (node.type !== "text" || !parent || index === void 0 || shouldSkipInlineTokenTransform(parent)) return;
+			const value = node.value ?? "";
+			const matches = [...value.matchAll(COLOR_TOKEN_REGEX)];
+			if (matches.length === 0) return;
+			const nextChildren = [];
+			let lastIndex = 0;
+			for (const match of matches) {
+				const [matchText] = match;
+				const start = match.index ?? 0;
+				if (start > lastIndex) nextChildren.push({
+					type: "text",
+					value: value.slice(lastIndex, start)
+				});
+				nextChildren.push({
+					type: "element",
+					tagName: "span",
+					properties: {
+						className: ["color-code"],
+						"data-color": matchText
+					},
+					children: [{
+						type: "text",
+						value: matchText
+					}]
+				});
+				lastIndex = start + matchText.length;
+			}
+			if (lastIndex < value.length) nextChildren.push({
+				type: "text",
+				value: value.slice(lastIndex)
+			});
+			(parent.children ?? []).splice(index, 1, ...nextChildren);
+			return index + nextChildren.length;
+		});
+	};
+}
+/**
+* Rehype plugin that wraps :icon: and :icon|color: tokens in span metadata.
+*
+* It skips code and preformatted blocks to avoid mutating code examples.
+*/
+function rehypeInstUIIconTokens() {
+	return (tree) => {
+		visit(tree, "text", (node, index, parent) => {
+			if (node.type !== "text" || !parent || index === void 0 || shouldSkipInlineTokenTransform(parent)) return;
+			const value = node.value ?? "";
+			const matches = [...value.matchAll(ICON_TOKEN_REGEX)];
+			if (matches.length === 0) return;
+			const nextChildren = [];
+			let lastIndex = 0;
+			for (const match of matches) {
+				const [matchText, iconName, rawIconColor] = match;
+				const iconColor = rawIconColor?.trim();
+				const start = match.index ?? 0;
+				if (start > lastIndex) nextChildren.push({
+					type: "text",
+					value: value.slice(lastIndex, start)
+				});
+				const properties = {
+					className: ["icon-token"],
+					"data-icon": iconName
+				};
+				if (iconColor) properties["data-icon-color"] = iconColor;
+				nextChildren.push({
+					type: "element",
+					tagName: "span",
+					properties,
+					children: [{
+						type: "text",
+						value: matchText
+					}]
+				});
+				lastIndex = start + matchText.length;
+			}
+			if (lastIndex < value.length) nextChildren.push({
+				type: "text",
+				value: value.slice(lastIndex)
+			});
+			(parent.children ?? []).splice(index, 1, ...nextChildren);
+			return index + nextChildren.length;
+		});
+	};
+}
+//#endregion
+export { COLOR_TOKEN_REGEX, ICON_TOKEN_REGEX, rehypeColorCodes, rehypeInstUIIconTokens, rehypeUnwrapBlockquoteParagraphs };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "rehype-instui-markdown",
+  "version": "0.0.6",
+  "description": "Rehype plugins for InstUI markdown rendering",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "typescript": "catalog:",
+    "vite-plus": "catalog:"
+  }
+}