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.mjs

@@ -0,0 +1,753 @@
+import { MDXProvider } from "@mdx-js/react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+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 { Text } from "@instructure/ui-text/v11_7";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "@instructure/ui-link/v11_7";
+import * as InstUIIcons from "@instructure/ui-icons";
+import { ExternalLinkInstUIIcon, LinkInstUIIcon } from "@instructure/ui-icons";
+import { color2hex, colorToHex8, colorToRGB, isValid } from "@instructure/ui-color-utils";
+import { InlineSVG } from "@instructure/ui-svg-images";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useId, useRef, useState } from "react";
+import { Img } from "@instructure/ui-img";
+import { View } from "@instructure/ui-view";
+import { Heading } from "@instructure/ui-heading/v11_7";
+import { List } from "@instructure/ui-list/v11_7";
+import { Checkbox } from "@instructure/ui-checkbox/v11_7";
+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/components/text-components.tsx
+function createEmComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		fontStyle: "italic",
+		children
+	});
+}
+function createStrongComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		weight: "bold",
+		children
+	});
+}
+function createDelComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "del",
+		children
+	});
+}
+function createInsComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "ins",
+		children
+	});
+}
+function createSubComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "sub",
+		children
+	});
+}
+function createSupComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "sup",
+		children
+	});
+}
+function createPComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		children
+	});
+}
+//#endregion
+//#region src/helpers.tsx
+const EDITOR_LANGUAGES = new Set([
+	"json",
+	"yaml",
+	"markdown",
+	"css",
+	"html",
+	"javascript"
+]);
+/**
+* Mapping between admonition markers and InstUI alert variants.
+*/
+const ALERT_VARIANTS = {
+	NOTE: "info",
+	TIP: "success",
+	IMPORTANT: "warning",
+	WARNING: "warning",
+	CAUTION: "error"
+};
+const ALERT_PREFIX = /^\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/;
+createContext(null);
+/**
+* Maps markdown fenced-code language classes to editor language values.
+*/
+function mapCodeLanguage(className) {
+	const parsed = className?.match(/language-([\w-]+)/)?.[1]?.toLowerCase();
+	if (!parsed) return "markdown";
+	if (parsed === "js" || parsed === "jsx" || parsed === "ts" || parsed === "tsx") return "javascript";
+	if (parsed === "yml") return "yaml";
+	return EDITOR_LANGUAGES.has(parsed) ? parsed : "markdown";
+}
+/**
+* Converts markdown code node children to normalized source text.
+*/
+function normalizeCodeValue(content) {
+	if (typeof content === "string") return content.replace(/\n$/, "");
+	if (Array.isArray(content)) return content.join("").replace(/\n$/, "");
+	return "";
+}
+/**
+* Determines whether a code node should be treated as inline code.
+*/
+function isInlineCode(children, className) {
+	if (className?.includes("language-")) return false;
+	if (typeof children === "string") return !children.includes("\n");
+	if (Array.isArray(children)) return !children.some((child) => typeof child === "string" && child.includes("\n"));
+	return true;
+}
+/**
+* Removes markdown admonition prefix text from a node tree.
+*/
+function stripAlertPrefix(node) {
+	if (typeof node === "string") {
+		const match = node.match(ALERT_PREFIX);
+		if (!match) return {
+			found: false,
+			node
+		};
+		return {
+			found: true,
+			marker: match[1],
+			node: node.replace(ALERT_PREFIX, "")
+		};
+	}
+	if (Array.isArray(node)) {
+		const updatedChildren = [];
+		let marker;
+		let found = false;
+		for (const child of node) {
+			if (found) {
+				updatedChildren.push(child);
+				continue;
+			}
+			const result = stripAlertPrefix(child);
+			updatedChildren.push(result.node);
+			if (result.found) {
+				marker = result.marker;
+				found = true;
+			}
+		}
+		return found ? {
+			found: true,
+			marker,
+			node: /* @__PURE__ */ jsx(Fragment, { children: updatedChildren })
+		} : {
+			found: false,
+			node
+		};
+	}
+	if (!isValidElement(node)) return {
+		found: false,
+		node
+	};
+	const originalChildren = Children.toArray(node.props.children);
+	const updatedChildren = [];
+	let marker;
+	let found = false;
+	for (const child of originalChildren) {
+		if (found) {
+			updatedChildren.push(child);
+			continue;
+		}
+		const result = stripAlertPrefix(child);
+		updatedChildren.push(result.node);
+		if (result.found) {
+			marker = result.marker;
+			found = true;
+		}
+	}
+	if (!found) return {
+		found: false,
+		node
+	};
+	return {
+		found: true,
+		marker,
+		node: cloneElement(node, void 0, updatedChildren)
+	};
+}
+/**
+* Filters markdown children so only React element nodes remain.
+*/
+function onlyElementChildren(children) {
+	return Children.toArray(children).filter((child) => isValidElement(child));
+}
+/**
+* Returns true when an href points to an external destination.
+*/
+function isExternalHref(href) {
+	if (!href) return false;
+	return /^(https?:)?\/\//i.test(href) || /^(mailto|tel):/i.test(href);
+}
+/**
+* Converts a valid CSS color value into normalized hex output for swatches.
+*/
+function normalizeColorForSwatch(colorValue) {
+	if (!isValid(colorValue)) return;
+	return colorToRGB(colorValue).a < 1 ? colorToHex8(colorValue) : color2hex(colorValue);
+}
+/**
+* Returns true when a color value is a literal color token form.
+*/
+function isLiteralColorValue(colorValue) {
+	return /^(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgba?\([^)]*\)|hsla?\([^)]*\))$/i.test(colorValue.trim());
+}
+/**
+* Recursively normalizes raw SVG nodes into InstUI InlineSVG wrappers.
+*/
+function normalizeSvgElements(node) {
+	if (!isValidElement(node)) return node;
+	const childProps = node.props;
+	const normalizedChildren = Children.map(childProps.children, (child) => normalizeSvgElements(child));
+	if (node.type === "svg") return /* @__PURE__ */ jsx(InlineSVG, {
+		inline: false,
+		className: typeof childProps.className === "string" ? childProps.className : void 0,
+		viewBox: typeof childProps.viewBox === "string" ? childProps.viewBox : void 0,
+		width: typeof childProps.width === "string" || typeof childProps.width === "number" ? childProps.width : void 0,
+		height: typeof childProps.height === "string" || typeof childProps.height === "number" ? childProps.height : void 0,
+		role: typeof childProps.role === "string" ? childProps.role : void 0,
+		children: normalizedChildren
+	});
+	return cloneElement(node, void 0, normalizedChildren);
+}
+/**
+* Extracts plain text from arbitrary React node content.
+*/
+function textFromNode(node) {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map((child) => textFromNode(child)).join("");
+	if (isValidElement(node)) return textFromNode(node.props.children);
+	return "";
+}
+/**
+* Compares table cell text with numeric-aware fallback string sorting.
+*/
+function compareTableCellValues(a, b) {
+	const trimmedA = a.trim();
+	const trimmedB = b.trim();
+	const numA = Number(trimmedA);
+	const numB = Number(trimmedB);
+	if (Number.isFinite(numA) && Number.isFinite(numB)) return numA - numB;
+	return trimmedA.localeCompare(trimmedB, void 0, {
+		numeric: true,
+		sensitivity: "base"
+	});
+}
+//#endregion
+//#region src/components/link-component.tsx
+function createLinkComponent(options) {
+	return ({ children, href, title, className, ...props }) => {
+		const ariaLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : void 0;
+		if (className?.includes("mdx-heading-anchor") || ariaLabel === "Permalink") {
+			if (!options.showPermalinks) return null;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Link, {
+				href,
+				title,
+				"aria-label": ariaLabel ?? title ?? "Permalink",
+				className: options.permalinkClassName,
+				children: /* @__PURE__ */ jsx(LinkInstUIIcon, { size: "x-small" })
+			})] });
+		}
+		if (isExternalHref(href)) return /* @__PURE__ */ jsxs(Link, {
+			href,
+			title,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: [
+				children,
+				" ",
+				options.showExternalIcon && /* @__PURE__ */ jsx(ExternalLinkInstUIIcon, {
+					size: "x-small",
+					"aria-hidden": "true"
+				})
+			]
+		});
+		return /* @__PURE__ */ jsx(Link, {
+			href,
+			title,
+			children
+		});
+	};
+}
+//#endregion
+//#region src/components/img-component.tsx
+function createImgComponent() {
+	return ({ src, alt, title }) => {
+		if (!src) return null;
+		return /* @__PURE__ */ jsx(View, {
+			as: "span",
+			margin: "small 0",
+			display: "block",
+			children: /* @__PURE__ */ jsx(Img, {
+				src,
+				alt: alt ?? "",
+				title,
+				display: "block",
+				constrain: "cover"
+			})
+		});
+	};
+}
+//#endregion
+//#region src/components/heading-component.tsx
+function createHeadingComponent(level) {
+	if (level === "h6") return ({ children, id }) => /* @__PURE__ */ jsx(Heading, {
+		as: "h6",
+		level: "h5",
+		margin: "small 0",
+		id,
+		children
+	});
+	return ({ children, id }) => /* @__PURE__ */ jsx(Heading, {
+		level,
+		margin: "small 0",
+		id,
+		children
+	});
+}
+//#endregion
+//#region src/components/list-components.tsx
+function createUlComponent() {
+	return ({ children, className }) => {
+		const isUnstyled = className?.includes("contains-task-list");
+		return /* @__PURE__ */ jsx(List, {
+			as: "ul",
+			isUnstyled,
+			margin: isUnstyled ? "small none small small" : "small 0",
+			children: onlyElementChildren(children)
+		});
+	};
+}
+function createOlComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(List, {
+		as: "ol",
+		margin: "small 0",
+		children: onlyElementChildren(children)
+	});
+}
+function createLiComponent() {
+	return ({ children }) => {
+		const isTaskItem = Children.toArray(children).some((child) => isValidElement(child) && child.props.type === "checkbox");
+		return /* @__PURE__ */ jsx(List.Item, {
+			padding: isTaskItem ? "none none x-small" : void 0,
+			spacing: isTaskItem ? "none" : void 0,
+			children
+		});
+	};
+}
+function createInputComponent() {
+	return ({ type, checked }) => {
+		if (type === "checkbox") return /* @__PURE__ */ jsx(Checkbox, {
+			size: "small",
+			label: "",
+			checked: Boolean(checked),
+			disabled: true,
+			inline: true
+		});
+		return null;
+	};
+}
+//#endregion
+//#region src/components/code-components.tsx
+function createCodeComponent(options) {
+	return ({ children, className }) => {
+		if (isInlineCode(children, className)) {
+			const inlineCodeValue = normalizeCodeValue(children).trim();
+			const normalizedInlineColor = options.showColorCodes ? normalizeColorForSwatch(inlineCodeValue) : void 0;
+			if (normalizedInlineColor) return /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "code",
+					children
+				}),
+				" ",
+				/* @__PURE__ */ jsx(Badge, {
+					standalone: true,
+					type: "notification",
+					variant: "primary",
+					pulse: false,
+					themeOverride: { colorPrimary: normalizedInlineColor }
+				})
+			] });
+			return /* @__PURE__ */ jsx(Text, {
+				as: "code",
+				children
+			});
+		}
+		return /* @__PURE__ */ jsx(SourceCodeEditor, {
+			label: "Code",
+			language: mapCodeLanguage(className),
+			value: normalizeCodeValue(children),
+			readOnly: options.codeReadOnly,
+			editable: options.codeEditable,
+			lineNumbers: options.codeLineNumbers,
+			lineWrapping: options.codeLineWrapping,
+			spellCheck: options.codeSpellCheck,
+			highlightActiveLine: options.codeHighlightActiveLine,
+			direction: options.codeDirection
+		});
+	};
+}
+function createPreComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(View, {
+		as: "div",
+		margin: "small 0",
+		children
+	});
+}
+//#endregion
+//#region src/components/blockquote-component.tsx
+function createBlockquoteComponent(options) {
+	return ({ children }) => {
+		const result = stripAlertPrefix(children);
+		if (result.found && result.marker) return /* @__PURE__ */ jsx(Alert, {
+			variant: ALERT_VARIANTS[result.marker],
+			margin: "small small medium",
+			renderCloseButtonLabel: options.showAlertCloseButton ? "Close" : void 0,
+			onDismiss: options.showAlertCloseButton ? () => void 0 : void 0,
+			children: result.node
+		});
+		return /* @__PURE__ */ jsx(View, {
+			as: "div",
+			borderWidth: "0 0 0 large",
+			borderColor: "info",
+			padding: "xxx-small none xxx-small small",
+			margin: "small 0 medium small",
+			children: /* @__PURE__ */ jsx(Text, {
+				fontStyle: "italic",
+				children
+			})
+		});
+	};
+}
+//#endregion
+//#region src/components/span-component.tsx
+function createSpanComponent(options) {
+	return ({ children, className, ...props }) => {
+		if (className?.includes("icon-token") && options.showIcons) {
+			const iconName = props["data-icon"];
+			const inlineIconColor = props["data-icon-color"];
+			if (iconName) {
+				const withoutPrefix = iconName.startsWith("Icon") ? iconName.slice(4) : iconName;
+				const isSolid = withoutPrefix.endsWith("Solid");
+				const isInstUI = withoutPrefix.endsWith("InstUIIcon");
+				let root = withoutPrefix;
+				if (isSolid) root = withoutPrefix.slice(0, -5);
+				else if (isInstUI) root = withoutPrefix.slice(0, -10);
+				else if (withoutPrefix.endsWith("Line")) root = withoutPrefix.slice(0, -4);
+				const IconComponent = (isSolid ? [`Icon${root}Solid`] : isInstUI ? [`${root}InstUIIcon`] : [
+					`${root}InstUIIcon`,
+					`Icon${root}Line`,
+					`Icon${root}`
+				]).map((name) => InstUIIcons[name]).find(Boolean);
+				if (IconComponent) {
+					const resolvedColor = inlineIconColor ?? options.iconColor;
+					const normalizedIconColor = resolvedColor && isLiteralColorValue(resolvedColor) ? normalizeColorForSwatch(resolvedColor) : void 0;
+					if (normalizedIconColor) return /* @__PURE__ */ jsx("span", {
+						style: { color: normalizedIconColor },
+						children: /* @__PURE__ */ jsx(IconComponent, {
+							title: iconName,
+							color: "inherit"
+						})
+					});
+					return /* @__PURE__ */ jsx(IconComponent, {
+						title: iconName,
+						color: (resolvedColor === "currentColor" ? "inherit" : resolvedColor) ?? "inherit"
+					});
+				}
+			}
+		}
+		if (className?.includes("color-code") && options.showColorCodes) {
+			const colorValue = props["data-color"];
+			if (colorValue) {
+				const normalizedColor = normalizeColorForSwatch(colorValue);
+				if (normalizedColor) return /* @__PURE__ */ jsxs(Fragment, { children: [
+					children,
+					" ",
+					/* @__PURE__ */ jsx(Badge, {
+						type: "notification",
+						variant: "primary",
+						placement: "start",
+						pulse: false,
+						themeOverride: { colorPrimary: normalizedColor },
+						standalone: true,
+						margin: "none none xxx-small"
+					})
+				] });
+			}
+		}
+		return /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			children
+		});
+	};
+}
+//#endregion
+//#region src/components/table-components.tsx
+const TableSortContext = createContext(null);
+function createTableComponent(options) {
+	return ({ children }) => {
+		const [sortBy, setSortBy] = useState(options.tableSortable ? 0 : null);
+		const [sortDirection, setSortDirection] = useState("ascending");
+		const headerIndexByIdRef = useRef(/* @__PURE__ */ new Map());
+		const nextHeaderIndexRef = useRef(0);
+		const registerHeader = useCallback((headerId) => {
+			const existing = headerIndexByIdRef.current.get(headerId);
+			if (existing !== void 0) return existing;
+			const index = nextHeaderIndexRef.current;
+			nextHeaderIndexRef.current += 1;
+			headerIndexByIdRef.current.set(headerId, index);
+			return index;
+		}, []);
+		const requestSort = useCallback((index) => {
+			if (sortBy === index) {
+				setSortDirection(sortDirection === "ascending" ? "descending" : "ascending");
+				return;
+			}
+			setSortBy(index);
+			setSortDirection("ascending");
+		}, [sortBy, sortDirection]);
+		return /* @__PURE__ */ jsx(TableSortContext.Provider, {
+			value: {
+				registerHeader,
+				sortBy,
+				sortDirection,
+				requestSort
+			},
+			children: /* @__PURE__ */ jsx(View, {
+				as: "div",
+				overflowX: "auto",
+				children: /* @__PURE__ */ jsx(Table, {
+					caption: "",
+					margin: "small 0",
+					layout: options.tableLayout === "stacked" ? "auto" : options.tableLayout,
+					hover: options.tableHover,
+					children
+				})
+			})
+		});
+	};
+}
+function createTheadComponent() {
+	return ({ children }) => {
+		const rows = Children.toArray(children).filter((child) => isValidElement(child));
+		return /* @__PURE__ */ jsx(Table.Head, { children: rows });
+	};
+}
+function createTbodyComponent(options) {
+	return ({ children }) => {
+		const tableSort = useContext(TableSortContext);
+		const rows = Children.toArray(children).filter((child) => isValidElement(child));
+		if (!options.tableSortable || !tableSort || tableSort.sortBy === null) return /* @__PURE__ */ jsx(Table.Body, { children: rows });
+		const sortIndex = tableSort.sortBy;
+		const sortedRows = [...rows].toSorted((leftRow, rightRow) => {
+			const leftCells = Children.toArray(leftRow.props.children);
+			const rightCells = Children.toArray(rightRow.props.children);
+			const result = compareTableCellValues(textFromNode(leftCells[sortIndex] ?? ""), textFromNode(rightCells[sortIndex] ?? ""));
+			return tableSort.sortDirection === "ascending" ? result : -result;
+		});
+		return /* @__PURE__ */ jsx(Table.Body, { children: sortedRows });
+	};
+}
+function createTrComponent() {
+	return ({ children }) => {
+		const cells = Children.toArray(children).filter((child) => isValidElement(child));
+		return /* @__PURE__ */ jsx(Table.Row, { children: cells });
+	};
+}
+function createThComponent(options) {
+	return ({ children }) => {
+		const tableSort = useContext(TableSortContext);
+		const headerId = useId();
+		const sortIndex = tableSort?.registerHeader(headerId) ?? -1;
+		const sortDirection = tableSort?.sortBy === sortIndex ? tableSort.sortDirection : "none";
+		return /* @__PURE__ */ jsx(Table.ColHeader, {
+			id: headerId,
+			sortDirection: options.tableSortable ? sortDirection : void 0,
+			onRequestSort: options.tableSortable && tableSort ? () => {
+				tableSort.requestSort(sortIndex);
+			} : void 0,
+			children
+		});
+	};
+}
+function createTdComponent() {
+	return ({ children }) => /* @__PURE__ */ jsx(Table.Cell, { children });
+}
+//#endregion
+//#region src/components/other-components.tsx
+function createHrComponent() {
+	return () => /* @__PURE__ */ jsx(View, {
+		as: "hr",
+		margin: "1rem 0",
+		borderWidth: "small 0 0",
+		borderColor: "primary"
+	});
+}
+function createSectionComponent() {
+	return ({ children, className }) => /* @__PURE__ */ jsx(View, {
+		as: "section",
+		margin: className?.includes("footnotes") ? "medium 0 0" : "0",
+		borderWidth: className?.includes("footnotes") ? "small 0 0" : "none",
+		borderColor: "primary",
+		padding: className?.includes("footnotes") ? "small 0 0" : "0",
+		children
+	});
+}
+function createSvgComponent() {
+	return ({ children, className, viewBox, width, height, role, ..._props } = {}) => /* @__PURE__ */ jsx(View, {
+		as: "figure",
+		children: /* @__PURE__ */ jsx(InlineSVG, {
+			inline: false,
+			className,
+			viewBox,
+			width,
+			height,
+			role,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/create-components.tsx
+/**
+* Creates a React Markdown component map backed by InstUI components.
+*/
+function createInstuiMarkdownComponents(renderOptions = {}) {
+	const showAlertCloseButton = Boolean(renderOptions.alert?.closeButton);
+	const tableLayout = renderOptions.table?.display ?? "auto";
+	const tableHover = Boolean(renderOptions.table?.hover);
+	const tableSortable = Boolean(renderOptions.table?.sortable);
+	const showExternalIcon = Boolean(renderOptions.link?.externalIcon);
+	const showPermalinks = Boolean(renderOptions.link?.permalinks);
+	const permalinkClassName = renderOptions.link?.permalinkClassName ?? "mdx-heading-anchor";
+	const codeEditable = renderOptions.code?.editable ?? false;
+	const codeReadOnly = renderOptions.code?.readOnly ?? true;
+	const codeLineNumbers = renderOptions.code?.lineNumbers;
+	const codeLineWrapping = renderOptions.code?.lineWrapping;
+	const codeSpellCheck = renderOptions.code?.spellCheck;
+	const codeHighlightActiveLine = renderOptions.code?.highlightActiveLine;
+	const codeDirection = renderOptions.code?.direction;
+	const showColorCodes = Boolean(renderOptions.color?.enabled);
+	const showIcons = Boolean(renderOptions.icons?.enabled);
+	const iconColor = renderOptions.icons?.color;
+	return {
+		span: createSpanComponent({
+			showColorCodes,
+			showIcons,
+			iconColor
+		}),
+		a: createLinkComponent({
+			showExternalIcon,
+			showPermalinks,
+			permalinkClassName
+		}),
+		img: createImgComponent(),
+		p: createPComponent(),
+		em: createEmComponent(),
+		strong: createStrongComponent(),
+		del: createDelComponent(),
+		code: createCodeComponent({
+			showColorCodes,
+			codeEditable,
+			codeReadOnly,
+			codeLineNumbers,
+			codeLineWrapping,
+			codeSpellCheck,
+			codeHighlightActiveLine,
+			codeDirection
+		}),
+		pre: createPreComponent(),
+		blockquote: createBlockquoteComponent({ showAlertCloseButton }),
+		hr: createHrComponent(),
+		h1: createHeadingComponent("h1"),
+		h2: createHeadingComponent("h2"),
+		h3: createHeadingComponent("h3"),
+		h4: createHeadingComponent("h4"),
+		h5: createHeadingComponent("h5"),
+		h6: createHeadingComponent("h6"),
+		ins: createInsComponent(),
+		ul: createUlComponent(),
+		ol: createOlComponent(),
+		li: createLiComponent(),
+		input: createInputComponent(),
+		section: createSectionComponent(),
+		svg: createSvgComponent(),
+		sub: createSubComponent(),
+		sup: createSupComponent(),
+		table: createTableComponent({
+			tableLayout,
+			tableHover,
+			tableSortable
+		}),
+		thead: createTheadComponent(),
+		tbody: createTbodyComponent({ tableSortable }),
+		tr: createTrComponent(),
+		th: createThComponent({ tableSortable }),
+		td: createTdComponent()
+	};
+}
+/**
+* Default markdown component map using package defaults.
+*/
+const instuiMarkdownComponents = createInstuiMarkdownComponents();
+//#endregion
+//#region src/index.tsx
+/**
+* Renders a markdown string with InstUI-backed element mappings.
+*/
+function InstuiMarkdown({ children, renderOptions }) {
+	const components = createInstuiMarkdownComponents(renderOptions);
+	const showPermalinks = Boolean(renderOptions?.link?.permalinks);
+	const permalinkClassName = renderOptions?.link?.permalinkClassName ?? "mdx-heading-anchor";
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		remarkPlugins: [remarkGfm],
+		rehypePlugins: [
+			rehypeRaw,
+			rehypeSlug,
+			...showPermalinks ? [[rehypeAutolinkHeadings, {
+				behavior: "append",
+				properties: {
+					className: [permalinkClassName],
+					"aria-label": "Permalink"
+				}
+			}]] : [],
+			rehypeUnwrapBlockquoteParagraphs,
+			rehypeInstUIIconTokens,
+			rehypeColorCodes
+		],
+		components,
+		children
+	});
+}
+/**
+* Provides InstUI markdown components to MDX content.
+*/
+function InstuiMdxProvider({ children, renderOptions }) {
+	return /* @__PURE__ */ jsx(MDXProvider, {
+		components: createInstuiMarkdownComponents(renderOptions),
+		children: normalizeSvgElements(children)
+	});
+}
+//#endregion
+export { InstuiMarkdown, InstuiMdxProvider, createInstuiMarkdownComponents, instuiMarkdownComponents };

package/index.d.mts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import type { Components } from "react-markdown";
+
+export interface InstuiMarkdownRenderOptions {
+  alert?: {
+    closeButton?: boolean;
+  };
+  table?: {
+    display?: "auto" | "stacked" | "fixed";
+    hover?: boolean;
+    sortable?: boolean;
+  };
+  link?: {
+    externalIcon?: boolean;
+    permalinks?: boolean;
+    permalinkClassName?: string;
+  };
+  code?: {
+    editable?: boolean;
+    readOnly?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    spellCheck?: boolean;
+    highlightActiveLine?: boolean;
+    direction?: "ltr" | "rtl";
+  };
+  color?: {
+    enabled?: boolean;
+  };
+  icons?: {
+    enabled?: boolean;
+    color?: string;
+  };
+}
+
+export interface InstuiMarkdownProps {
+  children: string;
+  renderOptions?: InstuiMarkdownRenderOptions;
+}
+
+export interface InstuiMdxProviderProps {
+  children: ReactNode;
+  renderOptions?: InstuiMarkdownRenderOptions;
+}
+
+export declare const instuiMarkdownComponents: Components;
+
+export declare function createInstuiMarkdownComponents(
+  renderOptions?: InstuiMarkdownRenderOptions,
+): Components;
+
+export declare function InstuiMarkdown(props: InstuiMarkdownProps): ReactNode;
+
+export declare function InstuiMdxProvider(props: InstuiMdxProviderProps): ReactNode;

package/index.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import type { Components } from "react-markdown";
+
+export interface InstuiMarkdownRenderOptions {
+  alert?: {
+    closeButton?: boolean;
+  };
+  table?: {
+    display?: "auto" | "stacked" | "fixed";
+    hover?: boolean;
+    sortable?: boolean;
+  };
+  link?: {
+    externalIcon?: boolean;
+    permalinks?: boolean;
+    permalinkClassName?: string;
+  };
+  code?: {
+    editable?: boolean;
+    readOnly?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    spellCheck?: boolean;
+    highlightActiveLine?: boolean;
+    direction?: "ltr" | "rtl";
+  };
+  color?: {
+    enabled?: boolean;
+  };
+  icons?: {
+    enabled?: boolean;
+    color?: string;
+  };
+}
+
+export interface InstuiMarkdownProps {
+  children: string;
+  renderOptions?: InstuiMarkdownRenderOptions;
+}
+
+export interface InstuiMdxProviderProps {
+  children: ReactNode;
+  renderOptions?: InstuiMarkdownRenderOptions;
+}
+
+export declare const instuiMarkdownComponents: Components;
+
+export declare function createInstuiMarkdownComponents(
+  renderOptions?: InstuiMarkdownRenderOptions,
+): Components;
+
+export declare function InstuiMarkdown(props: InstuiMarkdownProps): ReactNode;
+
+export declare function InstuiMdxProvider(props: InstuiMdxProviderProps): ReactNode;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "instui-markdown",
+  "version": "0.0.6",
+  "description": "InstUI markdown renderer components",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "index.d.mts",
+    "index.d.ts"
+  ],
+  "type": "module",
+  "types": "./index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./index.d.mts",
+      "default": "./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": {
+    "rehype-instui-markdown": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "typescript": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@instructure/ui-alerts": "*",
+    "@instructure/ui-badge": "*",
+    "@instructure/ui-checkbox": "*",
+    "@instructure/ui-color-utils": "*",
+    "@instructure/ui-heading": "*",
+    "@instructure/ui-icons": "*",
+    "@instructure/ui-img": "*",
+    "@instructure/ui-link": "*",
+    "@instructure/ui-list": "*",
+    "@instructure/ui-source-code-editor": "*",
+    "@instructure/ui-svg-images": "*",
+    "@instructure/ui-table": "*",
+    "@instructure/ui-text": "*",
+    "@instructure/ui-view": "*",
+    "@mdx-js/react": "*",
+    "react": "*",
+    "react-markdown": "*",
+    "rehype-autolink-headings": "*",
+    "rehype-raw": "*",
+    "rehype-slug": "*",
+    "remark-gfm": "*"
+  }
+}