instui-markdown 0.0.9 → 0.1.0

package/dist/index.mjs

@@ -5,6 +5,7 @@ import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import { rehypeColorCodes, rehypeInstUIIconTokens, rehypeUnwrapBlockquoteParagraphs } from "rehype-instui-markdown";
+import * as SimpleIcons from "simple-icons";
 import { Text } from "@instructure/ui-text/v11_7";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "@instructure/ui-link/v11_7";
@@ -22,6 +23,50 @@ import { Badge } from "@instructure/ui-badge/v11_7";
 import { SourceCodeEditor } from "@instructure/ui-source-code-editor/v11_7";
 import { Alert } from "@instructure/ui-alerts/v11_7";
 import { Table } from "@instructure/ui-table/v11_7";
+//#region src/simple-icons-resolver.ts
+function isSimpleIconLike(value) {
+	return typeof value === "object" && value !== null && "path" in value && "title" in value && typeof value.path === "string";
+}
+function normalizeSimpleIconCode(code) {
+	return code.toLowerCase().replace(/[^a-z0-9]+/g, "");
+}
+function toSimpleIconExportName(code) {
+	return `si${code.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^a-zA-Z0-9]+/).filter(Boolean).map((word) => word.toLowerCase()).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("")}`;
+}
+function buildSimpleIconLookup(iconsRegistry) {
+	const lookup = /* @__PURE__ */ new Map();
+	for (const [exportName, iconCandidate] of Object.entries(iconsRegistry)) {
+		if (!exportName.startsWith("si") || !isSimpleIconLike(iconCandidate)) continue;
+		const slug = iconCandidate.slug ?? exportName.slice(2);
+		lookup.set(normalizeSimpleIconCode(slug), {
+			title: iconCandidate.title,
+			path: iconCandidate.path,
+			viewBox: iconCandidate.viewBox ?? "0 0 24 24"
+		});
+	}
+	return lookup;
+}
+function createSimpleIconsResolver(iconsRegistry) {
+	const lookup = buildSimpleIconLookup(iconsRegistry);
+	return (code) => {
+		const normalizedCode = normalizeSimpleIconCode(code);
+		const normalizedWithoutPrefix = normalizedCode.startsWith("si") ? normalizedCode.slice(2) : normalizedCode;
+		const bySlug = lookup.get(normalizedCode) ?? (normalizedCode.startsWith("si") ? lookup.get(normalizedWithoutPrefix) : void 0);
+		if (bySlug) return bySlug;
+		const exportNameCandidates = [toSimpleIconExportName(code)];
+		if (normalizedCode.startsWith("si")) exportNameCandidates.push(toSimpleIconExportName(normalizedWithoutPrefix));
+		for (const exportName of exportNameCandidates) {
+			const iconCandidate = iconsRegistry[exportName];
+			if (isSimpleIconLike(iconCandidate)) return {
+				title: iconCandidate.title,
+				path: iconCandidate.path,
+				viewBox: iconCandidate.viewBox ?? "0 0 24 24"
+			};
+		}
+	};
+}
+const resolveSimpleIconToken = createSimpleIconsResolver(SimpleIcons);
+//#endregion
 //#region src/components/text-components.tsx
 function createEmComponent() {
 	return ({ children }) => /* @__PURE__ */ jsx(Text, {
@@ -442,8 +487,12 @@ function createBlockquoteComponent(options) {
 }
 //#endregion
 //#region src/components/span-component.tsx
-function toPascalCase(str) {
-	return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+const INSTUI_ICON_LOOKUP = new Map(Object.entries(InstUIIcons).map(([name, value]) => [name.toLowerCase(), value]));
+function findInstUIIcon(candidates) {
+	for (const candidate of candidates) {
+		const IconComponent = INSTUI_ICON_LOOKUP.get(candidate.toLowerCase());
+		if (IconComponent) return IconComponent;
+	}
 }
 function parseIconTokenName(iconName) {
 	const withoutPrefix = iconName.startsWith("Icon") ? iconName.slice(4) : iconName;
@@ -461,6 +510,9 @@ function parseIconTokenName(iconName) {
 	};
 }
 function getSimpleIconCodes(iconName, root, withoutPrefix) {
+	const lowerWords = root.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^a-zA-Z0-9]+/).filter(Boolean).map((word) => word.toLowerCase());
+	const compact = lowerWords.join("");
+	const kebab = lowerWords.join("-");
 	const camel = root.charAt(0).toLowerCase() + root.slice(1);
 	const lower = root.toLowerCase();
 	return Array.from(new Set([
@@ -468,7 +520,9 @@ function getSimpleIconCodes(iconName, root, withoutPrefix) {
 		withoutPrefix,
 		root,
 		camel,
-		lower
+		lower,
+		compact,
+		kebab
 	]));
 }
 function createSpanComponent(options) {
@@ -479,12 +533,11 @@ function createSpanComponent(options) {
 			if (iconName) {
 				const { withoutPrefix, isSolid, isInstUI, root } = parseIconTokenName(iconName);
 				if (options.enableInstuiIcons) {
-					const normalizedRoot = toPascalCase(root);
-					const IconComponent = (isSolid ? [`Icon${normalizedRoot}Solid`] : isInstUI ? [`${normalizedRoot}InstUIIcon`] : [
-						`${normalizedRoot}InstUIIcon`,
-						`Icon${normalizedRoot}Line`,
-						`Icon${normalizedRoot}`
-					]).map((name) => InstUIIcons[name]).find(Boolean);
+					const IconComponent = findInstUIIcon(isSolid ? [`Icon${root}Solid`] : isInstUI ? [`${root}InstUIIcon`] : [
+						`${root}InstUIIcon`,
+						`Icon${root}Line`,
+						`Icon${root}`
+					]);
 					if (IconComponent) {
 						const resolvedColor = inlineIconColor ?? options.iconColor;
 						const normalizedIconColor = resolvedColor && isLiteralColorValue(resolvedColor) ? normalizeColorForSwatch(resolvedColor) : void 0;
@@ -511,12 +564,18 @@ function createSpanComponent(options) {
 						const normalizedIconColor = resolvedColor && isLiteralColorValue(resolvedColor) ? normalizeColorForSwatch(resolvedColor) : void 0;
 						const label = simpleIcon.title ?? root;
 						return /* @__PURE__ */ jsx("span", {
-							style: normalizedIconColor ? { color: normalizedIconColor } : void 0,
+							style: {
+								display: "inline-flex",
+								alignItems: "center",
+								verticalAlign: "middle",
+								lineHeight: 1,
+								...normalizedIconColor ? { color: normalizedIconColor } : {}
+							},
 							children: /* @__PURE__ */ jsxs(InlineSVG, {
-								inline: false,
+								inline: true,
 								viewBox: simpleIcon.viewBox ?? "0 0 24 24",
-								width: simpleIcon.width ?? "1em",
-								height: simpleIcon.height ?? "1em",
+								width: simpleIcon.width ?? "1.125em",
+								height: simpleIcon.height ?? "1.125em",
 								role: "img",
 								"aria-label": label,
 								children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("path", {
@@ -706,7 +765,6 @@ function createInstuiMarkdownComponents(renderOptions = {}) {
 	const enableInstuiIcons = renderOptions.icons?.providers?.instui ?? true;
 	const enableSimpleIcons = renderOptions.icons?.providers?.simpleIcons ?? true;
 	const simpleIconColor = renderOptions.icons?.simpleIcons?.color;
-	const resolveSimpleIcon = renderOptions.icons?.simpleIcons?.resolve;
 	return {
 		span: createSpanComponent({
 			showColorCodes,
@@ -715,7 +773,7 @@ function createInstuiMarkdownComponents(renderOptions = {}) {
 			enableInstuiIcons,
 			enableSimpleIcons,
 			simpleIconColor,
-			resolveSimpleIcon
+			resolveSimpleIcon: renderOptions.icons?.simpleIcons?.resolve ?? resolveSimpleIconToken
 		}),
 		a: createLinkComponent({
 			showExternalIcon,
@@ -810,4 +868,4 @@ function InstuiMdxProvider({ children, renderOptions }) {
 	});
 }
 //#endregion
-export { InstuiMarkdown, InstuiMdxProvider, createInstuiMarkdownComponents, instuiMarkdownComponents };
+export { InstuiMarkdown, InstuiMdxProvider, createInstuiMarkdownComponents, createSimpleIconsResolver, instuiMarkdownComponents, resolveSimpleIconToken };

package/index.d.mts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 import type { Components } from "react-markdown";
 
+export type SimpleIconResolver = (code: string) => SimpleIconTokenData | undefined;
+export type SimpleIconsRegistry = Record<string, unknown>;
+
 export interface InstuiMarkdownRenderOptions {
   alert?: {
     closeButton?: boolean;
@@ -30,9 +33,25 @@ export interface InstuiMarkdownRenderOptions {
   icons?: {
     enabled?: boolean;
     color?: string;
+    providers?: {
+      instui?: boolean;
+      simpleIcons?: boolean;
+    };
+    simpleIcons?: {
+      color?: string;
+      resolve?: (code: string) => SimpleIconTokenData | undefined;
+    };
   };
 }
 
+export interface SimpleIconTokenData {
+  path: string;
+  title?: string;
+  viewBox?: string;
+  width?: string | number;
+  height?: string | number;
+}
+
 export interface InstuiMarkdownProps {
   children: string;
   renderOptions?: InstuiMarkdownRenderOptions;
@@ -52,3 +71,9 @@ export declare function createInstuiMarkdownComponents(
 export declare function InstuiMarkdown(props: InstuiMarkdownProps): ReactNode;
 
 export declare function InstuiMdxProvider(props: InstuiMdxProviderProps): ReactNode;
+
+export declare function createSimpleIconsResolver(
+  iconsRegistry: SimpleIconsRegistry,
+): SimpleIconResolver;
+
+export declare const resolveSimpleIconToken: SimpleIconResolver;

package/index.d.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 import type { Components } from "react-markdown";
 
+export type SimpleIconResolver = (code: string) => SimpleIconTokenData | undefined;
+export type SimpleIconsRegistry = Record<string, unknown>;
+
 export interface InstuiMarkdownRenderOptions {
   alert?: {
     closeButton?: boolean;
@@ -30,9 +33,25 @@ export interface InstuiMarkdownRenderOptions {
   icons?: {
     enabled?: boolean;
     color?: string;
+    providers?: {
+      instui?: boolean;
+      simpleIcons?: boolean;
+    };
+    simpleIcons?: {
+      color?: string;
+      resolve?: (code: string) => SimpleIconTokenData | undefined;
+    };
   };
 }
 
+export interface SimpleIconTokenData {
+  path: string;
+  title?: string;
+  viewBox?: string;
+  width?: string | number;
+  height?: string | number;
+}
+
 export interface InstuiMarkdownProps {
   children: string;
   renderOptions?: InstuiMarkdownRenderOptions;
@@ -52,3 +71,9 @@ export declare function createInstuiMarkdownComponents(
 export declare function InstuiMarkdown(props: InstuiMarkdownProps): ReactNode;
 
 export declare function InstuiMdxProvider(props: InstuiMdxProviderProps): ReactNode;
+
+export declare function createSimpleIconsResolver(
+  iconsRegistry: SimpleIconsRegistry,
+): SimpleIconResolver;
+
+export declare const resolveSimpleIconToken: SimpleIconResolver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instui-markdown",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "InstUI markdown renderer components",
   "license": "MIT",
   "files": [
@@ -21,7 +21,7 @@
     "access": "public"
   },
   "dependencies": {
-    "rehype-instui-markdown": "0.0.9"
+    "rehype-instui-markdown": "0.1.0"
   },
   "devDependencies": {
     "@types/node": "^24",
@@ -51,7 +51,8 @@
     "rehype-autolink-headings": "*",
     "rehype-raw": "*",
     "rehype-slug": "*",
-    "remark-gfm": "*"
+    "remark-gfm": "*",
+    "simple-icons": "*"
   },
   "scripts": {
     "build": "vp pack",