@haklex/rich-renderer-codeblock 0.0.80 → 0.0.82

package/dist/CodeBlockRenderer-ECu_hR7l.js

@@ -0,0 +1,134 @@
+import { getLanguageDisplayName, languageToColorMap, normalizeLanguage } from "./constants.mjs";
+import { _ as semanticClassNames, a as bodyBackground, c as copyButton, h as scroll, n as LanguageIcon, r as hasLanguageIcon, s as card } from "./icons-CnFW5y6g.js";
+import { SHIKI_DUAL_THEMES, getHighlighterWithLang } from "./shiki.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronDown, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/CodeBlockCard.tsx
+var CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
+var CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
+var ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
+function CodeBlockCard({ code, language, collapsible = true, langSlot, children }) {
+	const normalizedLanguage = normalizeLanguage(language);
+	const [copied, setCopied] = useState(false);
+	const copyTimerRef = useRef(void 0);
+	const [isCollapsed, setIsCollapsed] = useState(true);
+	const [isOverflow, setIsOverflow] = useState(false);
+	const scrollRef = useRef(null);
+	useEffect(() => {
+		if (!collapsible) {
+			setIsOverflow(false);
+			return;
+		}
+		const el = scrollRef.current;
+		if (!el) return;
+		const check = () => {
+			const halfVh = window.innerHeight / 2;
+			setIsOverflow(el.scrollHeight >= halfVh);
+		};
+		const raf = requestAnimationFrame(check);
+		return () => cancelAnimationFrame(raf);
+	}, [code, collapsible]);
+	useEffect(() => {
+		return () => clearTimeout(copyTimerRef.current);
+	}, []);
+	const handleCopy = useCallback(() => {
+		navigator.clipboard.writeText(code).then(() => {
+			setCopied(true);
+			clearTimeout(copyTimerRef.current);
+			copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+		}).catch(() => {});
+	}, [code]);
+	const languageLabel = getLanguageDisplayName(normalizedLanguage);
+	const accent = languageToColorMap[normalizedLanguage] || "#737373";
+	const cardStyle = useMemo(() => ({ "--rr-code-accent": accent }), [accent]);
+	const scrollClassName = [
+		scroll,
+		semanticClassNames.scroll,
+		collapsible && isCollapsed && isOverflow && "_1pn9r4q7",
+		collapsible && isCollapsed && isOverflow && semanticClassNames.scrollCollapsed
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${card} ${semanticClassNames.card}`,
+		style: cardStyle,
+		children: [
+			langSlot ?? (normalizedLanguage !== "text" && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: `_1pn9r4q2 ${semanticClassNames.lang}`,
+				children: hasLanguageIcon(normalizedLanguage) ? /* @__PURE__ */ jsx(LanguageIcon, {
+					language: normalizedLanguage,
+					size: 14
+				}) : /* @__PURE__ */ jsx("span", { children: languageLabel })
+			})),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": copied ? "Copied" : "Copy code",
+				className: `${copyButton} ${semanticClassNames.copyButton}`,
+				type: "button",
+				onClick: handleCopy,
+				children: copied ? CheckIcon : CopyIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `${bodyBackground} ${semanticClassNames.bodyBackground}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: scrollClassName,
+					ref: scrollRef,
+					children
+				}), collapsible && isOverflow && isCollapsed && /* @__PURE__ */ jsx("div", {
+					className: `_1pn9r4qa ${semanticClassNames.expandWrap}`,
+					children: /* @__PURE__ */ jsxs("button", {
+						className: `_1pn9r4qb ${semanticClassNames.expandButton}`,
+						type: "button",
+						onClick: () => setIsCollapsed(false),
+						children: [ExpandIcon, /* @__PURE__ */ jsx("span", { children: "展开" })]
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/CodeBlockRenderer.tsx
+var CodeBlockRenderer = ({ code, language, showLineNumbers: showLineNumbersProp }) => {
+	const showLineNumbers = showLineNumbersProp ?? false;
+	const normalizedLanguage = normalizeLanguage(language);
+	const [html, setHtml] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		(async () => {
+			const highlighter = await getHighlighterWithLang(normalizedLanguage);
+			if (cancelled) return;
+			const lang = highlighter.getLoadedLanguages().includes(normalizedLanguage) ? normalizedLanguage : "text";
+			const result = highlighter.codeToHtml(code, {
+				lang,
+				themes: SHIKI_DUAL_THEMES
+			});
+			if (!cancelled) setHtml(result);
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [code, normalizedLanguage]);
+	const fallbackLines = useMemo(() => code.split("\n"), [code]);
+	const linedClassName = [
+		showLineNumbers && "_1pn9r4qc",
+		showLineNumbers && semanticClassNames.lined,
+		showLineNumbers && "_1pn9r4qd",
+		showLineNumbers && semanticClassNames.linedWithNumbers
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(CodeBlockCard, {
+		code,
+		language,
+		children: html ? /* @__PURE__ */ jsx("div", {
+			className: linedClassName,
+			dangerouslySetInnerHTML: { __html: html }
+		}) : /* @__PURE__ */ jsx("pre", {
+			className: linedClassName,
+			children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", {
+				className: "line",
+				children: line
+			}, i)) })
+		})
+	});
+};
+//#endregion
+export { CodeBlockCard as n, CodeBlockRenderer as t };

package/dist/constants.mjs

@@ -1,76 +1,73 @@
-const languageToIconMap = {
-  javascript: "JS",
-  js: "JS",
-  typescript: "TS",
-  ts: "TS",
-  jsx: "JSX",
-  tsx: "TSX",
-  html: "HTML",
-  css: "CSS",
-  scss: "SCSS",
-  json: "JSON",
-  markdown: "MD",
-  md: "MD",
-  bash: "SH",
-  sh: "SH",
-  shell: "SH",
-  zsh: "SH",
-  python: "PY",
-  py: "PY",
-  rust: "RS",
-  go: "GO",
-  java: "JAVA",
-  c: "C",
-  cpp: "C++",
-  "c++": "C++",
-  swift: "SW",
-  kotlin: "KT",
-  yaml: "YAML",
-  yml: "YAML",
-  sql: "SQL"
+//#region src/constants.ts
+var languageToIconMap = {
+	javascript: "JS",
+	js: "JS",
+	typescript: "TS",
+	ts: "TS",
+	jsx: "JSX",
+	tsx: "TSX",
+	html: "HTML",
+	css: "CSS",
+	scss: "SCSS",
+	json: "JSON",
+	markdown: "MD",
+	md: "MD",
+	bash: "SH",
+	sh: "SH",
+	shell: "SH",
+	zsh: "SH",
+	python: "PY",
+	py: "PY",
+	rust: "RS",
+	go: "GO",
+	java: "JAVA",
+	c: "C",
+	cpp: "C++",
+	"c++": "C++",
+	swift: "SW",
+	kotlin: "KT",
+	yaml: "YAML",
+	yml: "YAML",
+	sql: "SQL"
 };
-const languageToColorMap = {
-  javascript: "#f7df1e",
-  js: "#f7df1e",
-  typescript: "#3178c6",
-  ts: "#3178c6",
-  jsx: "#61dafb",
-  tsx: "#61dafb",
-  html: "#e34f26",
-  css: "#1572b6",
-  scss: "#cc6699",
-  json: "#f59e0b",
-  markdown: "#737373",
-  md: "#737373",
-  bash: "#4eaa25",
-  sh: "#4eaa25",
-  shell: "#4eaa25",
-  zsh: "#4eaa25",
-  python: "#3776ab",
-  py: "#3776ab",
-  rust: "#dea584",
-  go: "#00add8",
-  java: "#b07219",
-  c: "#a8b9cc",
-  cpp: "#00599c",
-  "c++": "#00599c",
-  swift: "#fa7343",
-  kotlin: "#7f52ff",
-  yaml: "#cb171e",
-  yml: "#cb171e",
-  sql: "#e38c00"
+var languageToColorMap = {
+	javascript: "#f7df1e",
+	js: "#f7df1e",
+	typescript: "#3178c6",
+	ts: "#3178c6",
+	jsx: "#61dafb",
+	tsx: "#61dafb",
+	html: "#e34f26",
+	css: "#1572b6",
+	scss: "#cc6699",
+	json: "#f59e0b",
+	markdown: "#737373",
+	md: "#737373",
+	bash: "#4eaa25",
+	sh: "#4eaa25",
+	shell: "#4eaa25",
+	zsh: "#4eaa25",
+	python: "#3776ab",
+	py: "#3776ab",
+	rust: "#dea584",
+	go: "#00add8",
+	java: "#b07219",
+	c: "#a8b9cc",
+	cpp: "#00599c",
+	"c++": "#00599c",
+	swift: "#fa7343",
+	kotlin: "#7f52ff",
+	yaml: "#cb171e",
+	yml: "#cb171e",
+	sql: "#e38c00"
 };
 function normalizeLanguage(lang) {
-  if (!lang) return "text";
-  return lang.trim().toLowerCase() || "text";
+	if (!lang) return "text";
+	return lang.trim().toLowerCase() || "text";
 }
 function getLanguageDisplayName(lang) {
-  if (lang === "text") return "TEXT";
-  return lang.toUpperCase();
+	if (lang === "text") return "TEXT";
+	return lang.toUpperCase();
 }
-export {
-  getLanguageDisplayName,
-  languageToColorMap,
-  languageToIconMap,
-  normalizeLanguage
-};
+//#endregion
+export { getLanguageDisplayName, languageToColorMap, languageToIconMap, normalizeLanguage };

package/dist/icons-CnFW5y6g.js

@@ -0,0 +1,230 @@
+import { useMemo } from "react";
+import { getIconData, iconToHTML, iconToSVG } from "@iconify/utils";
+import { icons } from "@iconify-json/material-icon-theme";
+import { jsx } from "react/jsx-runtime";
+//#region src/icons/material-icon.ts
+/** Get SVG markup for a material-icon-theme icon by name. Returns null if not found. */
+function getMaterialIconSvg(iconName) {
+	const data = getIconData(icons, iconName);
+	if (!data) return null;
+	const svg = iconToSVG(data);
+	return iconToHTML(svg.body, svg.attributes);
+}
+//#endregion
+//#region src/icons/file.tsx
+/** Maps file extension to material-icon-theme icon name. */
+var EXT_TO_ICON = {
+	ts: "typescript",
+	tsx: "react-ts",
+	mts: "typescript",
+	cts: "typescript",
+	js: "javascript",
+	jsx: "react",
+	mjs: "javascript",
+	cjs: "javascript",
+	py: "python",
+	rs: "rust",
+	go: "go",
+	java: "java",
+	html: "html",
+	htm: "html",
+	css: "css",
+	scss: "sass",
+	sass: "sass",
+	less: "sass",
+	json: "json",
+	jsonc: "json",
+	json5: "json",
+	md: "markdown",
+	mdx: "markdown",
+	sh: "console",
+	bash: "console",
+	zsh: "console",
+	yml: "yaml",
+	yaml: "yaml",
+	sql: "database",
+	c: "c",
+	h: "c",
+	cpp: "cpp",
+	cc: "cpp",
+	cxx: "cpp",
+	hpp: "cpp",
+	swift: "swift",
+	kt: "kotlin",
+	kts: "kotlin",
+	rb: "ruby",
+	php: "php",
+	vue: "vue",
+	svelte: "svelte",
+	toml: "toml",
+	xml: "xml",
+	graphql: "graphql",
+	gql: "graphql",
+	dockerfile: "docker",
+	lua: "lua",
+	zig: "zig"
+};
+function getFileIconSvg(filename) {
+	return getMaterialIconSvg(EXT_TO_ICON[filename.split(".").pop()?.toLowerCase() ?? ""] ?? "file");
+}
+var FileIcon = ({ filename, size = 16, className, fallback = "F" }) => {
+	const html = useMemo(() => getFileIconSvg(filename), [filename]);
+	const wrapperStyle = {
+		width: size,
+		height: size,
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		opacity: html ? 1 : .5,
+		fontSize: size * .6
+	};
+	if (!html) return /* @__PURE__ */ jsx("span", {
+		className,
+		style: wrapperStyle,
+		children: fallback
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		dangerouslySetInnerHTML: { __html: html },
+		style: {
+			width: size,
+			height: size
+		}
+	});
+};
+//#endregion
+//#region src/styles.css.ts
+var semanticClassNames = {
+	card: "rr-code-card",
+	lang: "rr-code-lang",
+	langIcon: "rr-code-lang-icon",
+	copyButton: "rr-code-copy",
+	bodyBackground: "rr-code-bg",
+	scroll: "rr-code-scroll",
+	scrollCollapsed: "rr-code-scroll-collapsed",
+	body: "rr-code-body",
+	bodyReadonly: "rr-code-readonly",
+	expandWrap: "rr-code-expand-wrap",
+	expandButton: "rr-code-expand",
+	lined: "rr-code-lined",
+	linedWithNumbers: "rr-code-lined-ln"
+};
+var card = "_1pn9r4q0";
+var langInput = "_1pn9r4q1";
+var lang = "_1pn9r4q2";
+var langIcon = "_1pn9r4q3";
+var copyButton = "_1pn9r4q4";
+var bodyBackground = "_1pn9r4q5";
+var scroll = "_1pn9r4q6";
+var scrollCollapsed = "_1pn9r4q7";
+var body = "_1pn9r4q8";
+var bodyReadonly = "_1pn9r4q9";
+var expandWrap = "_1pn9r4qa";
+var expandButton = "_1pn9r4qb";
+var lined = "_1pn9r4qc";
+var linedWithNumbers = "_1pn9r4qd";
+//#endregion
+//#region src/icons/language.tsx
+/** Maps normalized language to material-icon-theme icon name. */
+var LANG_TO_ICON = {
+	"javascript": "javascript",
+	"js": "javascript",
+	"typescript": "typescript",
+	"ts": "typescript",
+	"angular-ts": "angular",
+	"angular-html": "angular",
+	"jsx": "react",
+	"tsx": "react",
+	"html": "html",
+	"html-derivative": "html",
+	"css": "css",
+	"scss": "sass",
+	"sass": "sass",
+	"less": "sass",
+	"postcss": "postcss",
+	"stylus": "stylus",
+	"json": "json",
+	"json5": "json",
+	"jsonc": "json",
+	"jsonl": "json",
+	"markdown": "markdown",
+	"md": "markdown",
+	"mdx": "markdown",
+	"mdc": "markdown",
+	"bash": "console",
+	"sh": "console",
+	"shell": "console",
+	"shellscript": "console",
+	"zsh": "console",
+	"python": "python",
+	"py": "python",
+	"rust": "rust",
+	"go": "go",
+	"java": "java",
+	"c": "c",
+	"cpp": "cpp",
+	"c++": "cpp",
+	"swift": "swift",
+	"kotlin": "kotlin",
+	"kt": "kotlin",
+	"yaml": "yaml",
+	"yml": "yaml",
+	"sql": "database",
+	"xml": "xml",
+	"vue": "vue",
+	"vue-html": "vue",
+	"vue-vine": "vue",
+	"svelte": "svelte",
+	"astro": "astro",
+	"php": "php",
+	"rb": "ruby",
+	"r": "r",
+	"julia": "julia",
+	"lua": "lua",
+	"zig": "zig",
+	"toml": "toml",
+	"graphql": "graphql",
+	"gql": "graphql",
+	"dockerfile": "docker",
+	"coffee": "coffee",
+	"pug": "pug",
+	"haml": "haml",
+	"handlebars": "handlebars",
+	"marko": "markojs",
+	"imba": "imba",
+	"hurl": "hurl",
+	"http": "http"
+};
+function getLanguageIconSvg(lang) {
+	return getMaterialIconSvg(LANG_TO_ICON[lang] ?? "code");
+}
+/** Returns whether a Material icon is available for the given language. */
+function hasLanguageIcon(lang) {
+	return getLanguageIconSvg(lang) !== null;
+}
+var LanguageIcon = ({ language, size = 14, className = `${langIcon} ${semanticClassNames.langIcon}` }) => {
+	const html = useMemo(() => getLanguageIconSvg(language), [language]);
+	if (!html) return /* @__PURE__ */ jsx("span", {
+		className,
+		style: {
+			width: size,
+			height: size,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			opacity: .6,
+			fontSize: size * .6
+		},
+		children: "•"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		dangerouslySetInnerHTML: { __html: html },
+		style: {
+			width: size,
+			height: size
+		}
+	});
+};
+//#endregion
+export { semanticClassNames as _, bodyBackground as a, copyButton as c, lang as d, langInput as f, scrollCollapsed as g, scroll as h, body as i, expandButton as l, linedWithNumbers as m, LanguageIcon as n, bodyReadonly as o, lined as p, hasLanguageIcon as r, card as s, LANG_TO_ICON as t, expandWrap as u, FileIcon as v, getMaterialIconSvg as y };

package/dist/icons.mjs

@@ -1,91 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { g as getMaterialIconSvg } from "./language-UrxzhGSS.js";
-import { L, a, h } from "./language-UrxzhGSS.js";
-const EXT_TO_ICON = {
-  ts: "typescript",
-  tsx: "react-ts",
-  // TSX → React icon (same as JSX)
-  mts: "typescript",
-  cts: "typescript",
-  js: "javascript",
-  jsx: "react",
-  mjs: "javascript",
-  cjs: "javascript",
-  py: "python",
-  rs: "rust",
-  go: "go",
-  java: "java",
-  html: "html",
-  htm: "html",
-  css: "css",
-  scss: "sass",
-  sass: "sass",
-  less: "sass",
-  json: "json",
-  jsonc: "json",
-  json5: "json",
-  md: "markdown",
-  mdx: "markdown",
-  sh: "console",
-  bash: "console",
-  zsh: "console",
-  yml: "yaml",
-  yaml: "yaml",
-  sql: "database",
-  c: "c",
-  h: "c",
-  cpp: "cpp",
-  cc: "cpp",
-  cxx: "cpp",
-  hpp: "cpp",
-  swift: "swift",
-  kt: "kotlin",
-  kts: "kotlin",
-  rb: "ruby",
-  php: "php",
-  vue: "vue",
-  svelte: "svelte",
-  toml: "toml",
-  xml: "xml",
-  graphql: "graphql",
-  gql: "graphql",
-  dockerfile: "docker",
-  lua: "lua",
-  zig: "zig"
-};
-function getFileIconSvg(filename) {
-  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
-  const iconName = EXT_TO_ICON[ext] ?? "file";
-  return getMaterialIconSvg(iconName);
-}
-const FileIcon = ({ filename, size = 16, className, fallback = "F" }) => {
-  const html = useMemo(() => getFileIconSvg(filename), [filename]);
-  const wrapperStyle = {
-    width: size,
-    height: size,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    opacity: html ? 1 : 0.5,
-    fontSize: size * 0.6
-  };
-  if (!html) {
-    return /* @__PURE__ */ jsx("span", { className, style: wrapperStyle, children: fallback });
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className,
-      dangerouslySetInnerHTML: { __html: html },
-      style: { width: size, height: size }
-    }
-  );
-};
-export {
-  FileIcon,
-  L as LANG_TO_ICON,
-  a as LanguageIcon,
-  getMaterialIconSvg,
-  h as hasLanguageIcon
-};
+import { n as LanguageIcon, r as hasLanguageIcon, t as LANG_TO_ICON, v as FileIcon, y as getMaterialIconSvg } from "./icons-CnFW5y6g.js";
+export { FileIcon, LANG_TO_ICON, LanguageIcon, getMaterialIconSvg, hasLanguageIcon };