@haklex/rich-renderer-codeblock 0.0.82 → 0.0.83

package/dist/CodeBlockRenderer-DSXP75Xm.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Check, Copy, ChevronDown } from "lucide-react";
+import { normalizeLanguage, getLanguageDisplayName, languageToColorMap } from "./constants.mjs";
+import "@iconify/utils";
+import "@iconify-json/material-icon-theme";
+import { i as card, s as semanticClassNames, l as lang, h as hasLanguageIcon, a as LanguageIcon, j as copyButton, k as bodyBackground, m as expandWrap, n as expandButton, o as scroll, p as scrollCollapsed, c as lined, d as linedWithNumbers } from "./language-UrxzhGSS.js";
+import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "./shiki.mjs";
+const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
+const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
+const 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 && scrollCollapsed,
+    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: `${lang} ${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: `${expandWrap} ${semanticClassNames.expandWrap}`, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `${expandButton} ${semanticClassNames.expandButton}`,
+          type: "button",
+          onClick: () => setIsCollapsed(false),
+          children: [
+            ExpandIcon,
+            /* @__PURE__ */ jsx("span", { children: "展开" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+const 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 loaded = highlighter.getLoadedLanguages();
+      const lang2 = loaded.includes(normalizedLanguage) ? normalizedLanguage : "text";
+      const result = highlighter.codeToHtml(code, {
+        lang: lang2,
+        themes: SHIKI_DUAL_THEMES
+      });
+      if (!cancelled) setHtml(result);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, normalizedLanguage]);
+  const fallbackLines = useMemo(() => code.split("\n"), [code]);
+  const linedClassName = [
+    showLineNumbers && lined,
+    showLineNumbers && semanticClassNames.lined,
+    showLineNumbers && linedWithNumbers,
+    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)) }) }) });
+};
+export {
+  CodeBlockRenderer as C,
+  CodeBlockCard as a
+};

package/dist/constants.mjs

@@ -1,73 +1,76 @@
-//#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 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"
 };
-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"
+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"
 };
 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();
 }
-//#endregion
-export { getLanguageDisplayName, languageToColorMap, languageToIconMap, normalizeLanguage };
+export {
+  getLanguageDisplayName,
+  languageToColorMap,
+  languageToIconMap,
+  normalizeLanguage
+};

package/dist/icons.mjs

@@ -1,2 +1,91 @@
-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 };
+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
+};