@haklex/rich-renderer-codeblock 0.0.62 → 0.0.64

package/dist/CodeBlockCard.d.ts

@@ -3,10 +3,9 @@ interface CodeBlockCardProps {
     code: string;
     language: string;
     collapsible?: boolean;
-    editable?: boolean;
-    onLanguageChange?: (language: string) => void;
+    langSlot?: ReactNode;
     children: ReactNode;
 }
-export declare function CodeBlockCard({ code, language, collapsible, editable, onLanguageChange, children, }: CodeBlockCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockCard({ code, language, collapsible, langSlot, children, }: CodeBlockCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CodeBlockCard.d.ts.map

package/dist/CodeBlockCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockCard.d.ts","sourceRoot":"","sources":["../src/CodeBlockCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAerD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,WAAkB,EAClB,QAAgB,EAChB,gBAAgB,EAChB,QAAQ,GACT,EAAE,kBAAkB,2CAmIpB"}
+{"version":3,"file":"CodeBlockCard.d.ts","sourceRoot":"","sources":["../src/CodeBlockCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAerD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,WAAkB,EAClB,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,2CAgHpB"}

package/dist/CodeBlockEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CA2QvE,CAAA"}
+{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAc1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CAiRvE,CAAA"}

package/dist/{CodeBlockRenderer-BAfW72ee.js → CodeBlockRenderer-DoVYgPoV.js}

@@ -1,11 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useVariant } from "@haklex/rich-editor";
 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 { e as card, s as semanticClassNames, f as lang, h as hasLanguageIcon, d as LanguageIcon, i as langInput, j as copyButton, k as bodyBackground, m as expandWrap, n as expandButton, o as scroll, p as scrollCollapsed, l as lined, a as linedWithNumbers } from "./language-DlgJtK5A.js";
+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-CWZoNKWO.js";
 import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "./shiki.mjs";
 const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
 const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
@@ -14,8 +13,7 @@ function CodeBlockCard({
   code,
   language,
   collapsible = true,
-  editable = false,
-  onLanguageChange,
+  langSlot,
   children
 }) {
   const normalizedLanguage = normalizeLanguage(language);
@@ -67,31 +65,14 @@ function CodeBlockCard({
       className: `${card} ${semanticClassNames.card}`,
       style: cardStyle,
       children: [
-        editable ? /* @__PURE__ */ jsxs("div", { className: `${lang} ${semanticClassNames.lang}`, children: [
-          hasLanguageIcon(normalizedLanguage) && /* @__PURE__ */ jsx(LanguageIcon, { language: normalizedLanguage, size: 14 }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: langInput,
-              value: language,
-              placeholder: "language",
-              onChange: (e) => onLanguageChange?.(e.target.value),
-              onKeyDown: (e) => {
-                e.stopPropagation();
-                if (e.key === "Escape" || e.key === "Enter") {
-                  e.currentTarget.blur();
-                }
-              }
-            }
-          )
-        ] }) : normalizedLanguage !== "text" && /* @__PURE__ */ jsx(
+        langSlot ?? (normalizedLanguage !== "text" && /* @__PURE__ */ jsx(
           "div",
           {
             className: `${lang} ${semanticClassNames.lang}`,
             "aria-hidden": true,
             children: hasLanguageIcon(normalizedLanguage) ? /* @__PURE__ */ jsx(LanguageIcon, { language: normalizedLanguage, size: 14 }) : /* @__PURE__ */ jsx("span", { children: languageLabel })
           }
-        ),
+        )),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -138,8 +119,7 @@ const CodeBlockRenderer = ({
   language,
   showLineNumbers: showLineNumbersProp
 }) => {
-  const variant = useVariant();
-  const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
+  const showLineNumbers = showLineNumbersProp ?? false;
   const normalizedLanguage = normalizeLanguage(language);
   const [html, setHtml] = useState(null);
   useEffect(() => {

package/dist/CodeBlockRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAiEnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAgEnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/LanguageCombobox.d.ts

@@ -0,0 +1,7 @@
+interface LanguageComboboxProps {
+    language: string;
+    onLanguageChange?: (language: string) => void;
+}
+export declare function LanguageCombobox({ language, onLanguageChange, }: LanguageComboboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LanguageCombobox.d.ts.map

package/dist/LanguageCombobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageCombobox.d.ts","sourceRoot":"","sources":["../src/LanguageCombobox.tsx"],"names":[],"mappings":"AAoBA,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,gBAAgB,GACjB,EAAE,qBAAqB,2CAkDvB"}

package/dist/icons/language.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../src/icons/language.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAM/B,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA8C/C,CAAA;AAOD,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAiCA,CAAA"}
+{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../src/icons/language.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAM/B,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoE/C,CAAA;AAOD,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAiCA,CAAA"}

package/dist/icons.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { g as getMaterialIconSvg } from "./language-DlgJtK5A.js";
-import { L, d, h } from "./language-DlgJtK5A.js";
+import { g as getMaterialIconSvg } from "./language-CWZoNKWO.js";
+import { L, a, h } from "./language-CWZoNKWO.js";
 const EXT_TO_ICON = {
   ts: "typescript",
   tsx: "react-ts",
@@ -90,7 +90,7 @@ const FileIcon = ({
 export {
   FileIcon,
   L as LANG_TO_ICON,
-  d as LanguageIcon,
+  a as LanguageIcon,
   getMaterialIconSvg,
   h as hasLanguageIcon
 };

package/dist/index.mjs

@@ -4,11 +4,69 @@ import { Compartment, Prec, EditorState, EditorSelection } from "@codemirror/sta
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import { isOnFirstLine, isOnLastLine, getThemeExtensions, loadLanguageExtension } from "@haklex/cm-editor";
 import { useVariant, useColorScheme } from "@haklex/rich-editor";
-import { useState, useRef, useMemo, useEffect } from "react";
-import { a as CodeBlockCard } from "./CodeBlockRenderer-BAfW72ee.js";
-import { C } from "./CodeBlockRenderer-BAfW72ee.js";
+import { useCallback, useMemo, useState, useRef, useEffect } from "react";
+import { a as CodeBlockCard } from "./CodeBlockRenderer-DoVYgPoV.js";
+import { C } from "./CodeBlockRenderer-DoVYgPoV.js";
 import { normalizeLanguage } from "./constants.mjs";
-import { l as lined, s as semanticClassNames, a as linedWithNumbers, b as body, c as bodyReadonly } from "./language-DlgJtK5A.js";
+import { Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from "@haklex/rich-editor-ui";
+import { bundledLanguagesInfo } from "shiki/bundle/web";
+import "@iconify/utils";
+import "@iconify-json/material-icon-theme";
+import { l as lang, s as semanticClassNames, h as hasLanguageIcon, a as LanguageIcon, b as langInput, c as lined, d as linedWithNumbers, e as body, f as bodyReadonly } from "./language-CWZoNKWO.js";
+const languageItems = bundledLanguagesInfo.map((info) => ({
+  id: info.id,
+  name: info.name
+}));
+function LanguageCombobox({
+  language,
+  onLanguageChange
+}) {
+  const normalizedLanguage = normalizeLanguage(language);
+  const handleValueChange = useCallback(
+    (value) => {
+      if (value) {
+        onLanguageChange?.(value.id);
+      }
+    },
+    [onLanguageChange]
+  );
+  const selectedValue = useMemo(
+    () => languageItems.find((item) => item.id === normalizedLanguage) ?? null,
+    [normalizedLanguage]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `${lang} ${semanticClassNames.lang}`, children: [
+    hasLanguageIcon(normalizedLanguage) && /* @__PURE__ */ jsx(LanguageIcon, { language: normalizedLanguage, size: 14 }),
+    /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        value: selectedValue,
+        onValueChange: handleValueChange,
+        itemToStringValue: (item) => item.id,
+        itemToStringLabel: (item) => item.id,
+        items: languageItems,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxInput,
+            {
+              className: langInput,
+              placeholder: "language",
+              onKeyDown: (e) => {
+                e.stopPropagation();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(ComboboxContent, { side: "top", sideOffset: 8, align: "end", children: [
+            /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No languages found." }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
+              /* @__PURE__ */ jsx(LanguageIcon, { language: item.id, size: 16 }),
+              item.name
+            ] }, item.id) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 function stopHandledEvent(event) {
   event.preventDefault();
   event.stopPropagation();
@@ -212,8 +270,13 @@ const CodeBlockEditRenderer = ({
       code,
       language,
       collapsible: !editable,
-      editable,
-      onLanguageChange,
+      langSlot: editable ? /* @__PURE__ */ jsx(
+        LanguageCombobox,
+        {
+          language,
+          onLanguageChange
+        }
+      ) : void 0,
       children: [
         !mounted && /* @__PURE__ */ jsx("pre", { className: fallbackClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, `${line}-${i}`)) }) }),
         /* @__PURE__ */ jsx(

package/dist/{language-DlgJtK5A.js → language-CWZoNKWO.js}

@@ -28,22 +28,30 @@ const LANG_TO_ICON = {
   js: "javascript",
   typescript: "typescript",
   ts: "typescript",
+  "angular-ts": "angular",
+  "angular-html": "angular",
   jsx: "react",
   tsx: "react",
-  // TSX → React icon (same as JSX)
   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",
@@ -61,15 +69,28 @@ const LANG_TO_ICON = {
   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"
+  dockerfile: "docker",
+  coffee: "coffee",
+  pug: "pug",
+  haml: "haml",
+  handlebars: "handlebars",
+  marko: "markojs",
+  imba: "imba",
+  hurl: "hurl",
+  http: "http"
 };
 function getLanguageIconSvg(lang2) {
   const iconName = LANG_TO_ICON[lang2] ?? "code";
@@ -113,18 +134,18 @@ const LanguageIcon = ({
 };
 export {
   LANG_TO_ICON as L,
-  linedWithNumbers as a,
-  body as b,
-  bodyReadonly as c,
-  LanguageIcon as d,
-  card as e,
-  lang as f,
+  LanguageIcon as a,
+  langInput as b,
+  lined as c,
+  linedWithNumbers as d,
+  body as e,
+  bodyReadonly as f,
   getMaterialIconSvg as g,
   hasLanguageIcon as h,
-  langInput as i,
+  card as i,
   copyButton as j,
   bodyBackground as k,
-  lined as l,
+  lang as l,
   expandWrap as m,
   expandButton as n,
   scroll as o,

package/dist/static.mjs

@@ -1,4 +1,4 @@
-import { C } from "./CodeBlockRenderer-BAfW72ee.js";
+import { C } from "./CodeBlockRenderer-DoVYgPoV.js";
 export {
   C as CodeBlockRenderer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-renderer-codeblock",
   "type": "module",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "description": "Code block renderer with Shiki syntax highlighting",
   "license": "MIT",
   "exports": {
@@ -43,9 +43,10 @@
     "@iconify/utils": "^3.1.0",
     "lucide-react": "^0.577.0",
     "shiki": "^4.0.1",
-    "@haklex/cm-editor": "0.0.62",
-    "@haklex/rich-editor": "0.0.62",
-    "@haklex/rich-style-token": "0.0.62"
+    "@haklex/cm-editor": "0.0.64",
+    "@haklex/rich-editor": "0.0.64",
+    "@haklex/rich-editor-ui": "0.0.64",
+    "@haklex/rich-style-token": "0.0.64"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",