@haklex/rich-renderer-codeblock 0.0.64 → 0.0.66

package/README.md

@@ -1,48 +1,65 @@
 # @haklex/rich-renderer-codeblock
 
-基于 Shiki 的代码块渲染器。
+Code block renderer with Shiki syntax highlighting for static display and CodeMirror for interactive editing.
 
-## 安装
+## Installation
 
 ```bash
-pnpm add @haklex/rich-renderer-codeblock @haklex/rich-editor shiki
+pnpm add @haklex/rich-renderer-codeblock
 ```
 
-## 导出
+## Peer Dependencies
 
-```ts
-export { CodeBlockRenderer } from './CodeBlockRenderer'
-export { CodeBlockEditRenderer } from './CodeBlockEditRenderer'
-```
-
-## 功能
-
-- Shiki 语法高亮
-- 自动检测语言
-- 行号显示
-- 复制按钮
-- 自动适配深浅主题
+| Package | Version |
+| --- | --- |
+| `react` | `>=19` |
+| `react-dom` | `>=19` |
 
-## 使用
+## Usage
 
 ```tsx
-import { CodeBlockRenderer } from '@haklex/rich-renderer-codeblock'
-import type { RendererConfig } from '@haklex/rich-editor'
+import { CodeBlockRenderer } from '@haklex/rich-renderer-codeblock/static'
 
-const config: RendererConfig = {
+// Register in a static RendererConfig
+const rendererConfig = {
+  // ...other renderers
   CodeBlock: CodeBlockRenderer,
 }
 ```
 
-## 依赖
+For edit mode:
 
-```json
-{
-  "@haklex/rich-editor": "workspace:*",
-  "shiki": "^3.0.0"
+```tsx
+import { CodeBlockEditRenderer } from '@haklex/rich-renderer-codeblock'
+
+const editRendererConfig = {
+  // ...other renderers
+  CodeBlock: CodeBlockEditRenderer,
 }
 ```
 
+## Exports
+
+### Components
+
+- `CodeBlockRenderer` — Static (read-only) renderer with Shiki syntax highlighting
+- `CodeBlockEditRenderer` — Edit (interactive) renderer with CodeMirror editor
+
+### Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-renderer-codeblock` | Full exports (edit + static) |
+| `@haklex/rich-renderer-codeblock/static` | Static-only renderer |
+| `@haklex/rich-renderer-codeblock/shiki` | Shiki highlighting utilities |
+| `@haklex/rich-renderer-codeblock/constants` | Language and theme constants |
+| `@haklex/rich-renderer-codeblock/icons` | Language icons |
+| `@haklex/rich-renderer-codeblock/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
 ## License
 
 MIT

package/dist/CodeBlockCard.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 interface CodeBlockCardProps {
+    children: ReactNode;
     code: string;
-    language: string;
     collapsible?: boolean;
     langSlot?: ReactNode;
-    children: ReactNode;
+    language: string;
 }
 export declare function CodeBlockCard({ code, language, collapsible, langSlot, children, }: CodeBlockCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

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,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"}
+{"version":3,"file":"CodeBlockCard.d.ts","sourceRoot":"","sources":["../src/CodeBlockCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAWtD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,WAAkB,EAClB,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,2CAgGpB"}

package/dist/CodeBlockEditRenderer.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlockRendererProps } from '@haklex/rich-editor';
+import { CodeBlockRendererProps } from '@haklex/rich-editor/renderers';
 import { ComponentType } from 'react';
 export declare const CodeBlockEditRenderer: ComponentType<CodeBlockRendererProps>;
 //# sourceMappingURL=CodeBlockEditRenderer.d.ts.map

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;AAc1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CAiRvE,CAAA"}
+{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAc3C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CA+PvE,CAAC"}

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

@@ -4,7 +4,7 @@ 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-CWZoNKWO.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-UrxzhGSS.js";
 import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "./shiki.mjs";
 const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
 const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
@@ -49,70 +49,41 @@ function CodeBlockCard({
   }, [code]);
   const languageLabel = getLanguageDisplayName(normalizedLanguage);
   const accent = languageToColorMap[normalizedLanguage] || "#737373";
-  const cardStyle = useMemo(
-    () => ({ "--rr-code-accent": accent }),
-    [accent]
-  );
+  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",
-          {
-            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",
-          {
-            type: "button",
-            className: `${copyButton} ${semanticClassNames.copyButton}`,
-            onClick: handleCopy,
-            "aria-label": copied ? "Copied" : "Copy code",
-            children: copied ? CheckIcon : CopyIcon
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${bodyBackground} ${semanticClassNames.bodyBackground}`,
-            children: [
-              /* @__PURE__ */ jsx("div", { ref: scrollRef, className: scrollClassName, children }),
-              collapsible && isOverflow && isCollapsed && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `${expandWrap} ${semanticClassNames.expandWrap}`,
-                  children: /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      className: `${expandButton} ${semanticClassNames.expandButton}`,
-                      onClick: () => setIsCollapsed(false),
-                      children: [
-                        ExpandIcon,
-                        /* @__PURE__ */ jsx("span", { children: "展开" })
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+  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,
@@ -146,13 +117,7 @@ const CodeBlockRenderer = ({
     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)) }) }) });
+  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,

package/dist/CodeBlockRenderer.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlockRendererProps } from '@haklex/rich-editor';
+import { CodeBlockRendererProps } from '@haklex/rich-editor/renderers';
 import { ComponentType } from 'react';
 export declare const CodeBlockRenderer: ComponentType<CodeBlockRendererProps>;
 export default CodeBlockRenderer;

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;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAgEnE,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,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQ3C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CA2DnE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/LanguageCombobox.d.ts

@@ -2,6 +2,6 @@ interface LanguageComboboxProps {
     language: string;
     onLanguageChange?: (language: string) => void;
 }
-export declare function LanguageCombobox({ language, onLanguageChange, }: LanguageComboboxProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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"}
+{"version":3,"file":"LanguageCombobox.d.ts","sourceRoot":"","sources":["../src/LanguageCombobox.tsx"],"names":[],"mappings":"AAoBA,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,qBAAqB,2CAkDrF"}

package/dist/icons/file.d.ts

@@ -2,12 +2,12 @@ import { FC, ReactNode } from 'react';
 /** Maps file extension to material-icon-theme icon name. */
 export declare const EXT_TO_ICON: Record<string, string>;
 export interface FileIconProps {
-    filename: string;
-    size?: number;
     /** Optional class for the wrapper (e.g. consumer styles). */
     className?: string;
     /** Fallback when no icon is found. Default "F". */
     fallback?: ReactNode;
+    filename: string;
+    size?: number;
 }
 export declare const FileIcon: FC<FileIconProps>;
 //# sourceMappingURL=file.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/icons/file.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAK1C,4DAA4D;AAC5D,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkD9C,CAAA;AAQD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiCtC,CAAA"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/icons/file.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3C,4DAA4D;AAC5D,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkD9C,CAAC;AAQF,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA4BtC,CAAC"}

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,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"}
+{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../src/icons/language.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoE/C,CAAC;AAOF,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAiCA,CAAC"}

package/dist/icons.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { g as getMaterialIconSvg } from "./language-CWZoNKWO.js";
-import { L, a, h } from "./language-CWZoNKWO.js";
+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",
@@ -59,12 +59,7 @@ function getFileIconSvg(filename) {
   const iconName = EXT_TO_ICON[ext] ?? "file";
   return getMaterialIconSvg(iconName);
 }
-const FileIcon = ({
-  filename,
-  size = 16,
-  className,
-  fallback = "F"
-}) => {
+const FileIcon = ({ filename, size = 16, className, fallback = "F" }) => {
   const html = useMemo(() => getFileIconSvg(filename), [filename]);
   const wrapperStyle = {
     width: size,
@@ -82,8 +77,8 @@ const FileIcon = ({
     "span",
     {
       className,
-      style: { width: size, height: size },
-      dangerouslySetInnerHTML: { __html: html }
+      dangerouslySetInnerHTML: { __html: html },
+      style: { width: size, height: size }
     }
   );
 };

package/dist/index.mjs

@@ -5,22 +5,19 @@ import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import { isOnFirstLine, isOnLastLine, getThemeExtensions, loadLanguageExtension } from "@haklex/cm-editor";
 import { useVariant, useColorScheme } from "@haklex/rich-editor";
 import { useCallback, useMemo, useState, useRef, useEffect } from "react";
-import { a as CodeBlockCard } from "./CodeBlockRenderer-DoVYgPoV.js";
-import { C } from "./CodeBlockRenderer-DoVYgPoV.js";
+import { a as CodeBlockCard } from "./CodeBlockRenderer-DSXP75Xm.js";
+import { C } from "./CodeBlockRenderer-DSXP75Xm.js";
 import { normalizeLanguage } from "./constants.mjs";
 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";
+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-UrxzhGSS.js";
 const languageItems = bundledLanguagesInfo.map((info) => ({
   id: info.id,
   name: info.name
 }));
-function LanguageCombobox({
-  language,
-  onLanguageChange
-}) {
+function LanguageCombobox({ language, onLanguageChange }) {
   const normalizedLanguage = normalizeLanguage(language);
   const handleValueChange = useCallback(
     (value) => {
@@ -39,11 +36,11 @@ function LanguageCombobox({
     /* @__PURE__ */ jsxs(
       Combobox,
       {
-        value: selectedValue,
-        onValueChange: handleValueChange,
-        itemToStringValue: (item) => item.id,
         itemToStringLabel: (item) => item.id,
+        itemToStringValue: (item) => item.id,
         items: languageItems,
+        value: selectedValue,
+        onValueChange: handleValueChange,
         children: [
           /* @__PURE__ */ jsx(
             ComboboxInput,
@@ -55,7 +52,7 @@ function LanguageCombobox({
               }
             }
           ),
-          /* @__PURE__ */ jsxs(ComboboxContent, { side: "top", sideOffset: 8, align: "end", children: [
+          /* @__PURE__ */ jsxs(ComboboxContent, { align: "end", side: "top", sideOffset: 8, 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 }),
@@ -104,14 +101,10 @@ const CodeBlockEditRenderer = ({
   const editableCompartmentRef = useRef(null);
   const lineNumbersCompartmentRef = useRef(null);
   const themeCompartmentRef = useRef(null);
-  if (!languageCompartmentRef.current)
-    languageCompartmentRef.current = new Compartment();
-  if (!editableCompartmentRef.current)
-    editableCompartmentRef.current = new Compartment();
-  if (!lineNumbersCompartmentRef.current)
-    lineNumbersCompartmentRef.current = new Compartment();
-  if (!themeCompartmentRef.current)
-    themeCompartmentRef.current = new Compartment();
+  if (!languageCompartmentRef.current) languageCompartmentRef.current = new Compartment();
+  if (!editableCompartmentRef.current) editableCompartmentRef.current = new Compartment();
+  if (!lineNumbersCompartmentRef.current) lineNumbersCompartmentRef.current = new Compartment();
+  if (!themeCompartmentRef.current) themeCompartmentRef.current = new Compartment();
   const keyboardBoundaryHandler = useMemo(
     () => Prec.high(
       EditorView.domEventHandlers({
@@ -163,9 +156,7 @@ const CodeBlockEditRenderer = ({
             EditorView.editable.of(editable),
             EditorState.readOnly.of(!editable)
           ]),
-          lineNumbersCompartmentRef.current.of(
-            showLineNumbers ? lineNumbers() : []
-          ),
+          lineNumbersCompartmentRef.current.of(showLineNumbers ? lineNumbers() : []),
           themeCompartmentRef.current.of(getThemeExtensions(colorScheme)),
           languageCompartmentRef.current.of([])
         ]
@@ -193,18 +184,14 @@ const CodeBlockEditRenderer = ({
     const editor = editorRef.current;
     if (!editor) return;
     editor.dispatch({
-      effects: lineNumbersCompartmentRef.current.reconfigure(
-        showLineNumbers ? lineNumbers() : []
-      )
+      effects: lineNumbersCompartmentRef.current.reconfigure(showLineNumbers ? lineNumbers() : [])
     });
   }, [showLineNumbers]);
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.dispatch({
-      effects: themeCompartmentRef.current.reconfigure(
-        getThemeExtensions(colorScheme)
-      )
+      effects: themeCompartmentRef.current.reconfigure(getThemeExtensions(colorScheme))
     });
   }, [colorScheme]);
   useEffect(() => {
@@ -268,22 +255,16 @@ const CodeBlockEditRenderer = ({
     CodeBlockCard,
     {
       code,
-      language,
       collapsible: !editable,
-      langSlot: editable ? /* @__PURE__ */ jsx(
-        LanguageCombobox,
-        {
-          language,
-          onLanguageChange
-        }
-      ) : void 0,
+      language,
+      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(
           "div",
           {
-            ref: containerRef,
             className: bodyClassName,
+            ref: containerRef,
             style: !mounted ? { height: 0, overflow: "hidden", visibility: "hidden" } : void 0
           }
         )

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

@@ -24,73 +24,73 @@ var expandButton = "_1pn9r4qb";
 var lined = "_1pn9r4qc";
 var linedWithNumbers = "_1pn9r4qd";
 const LANG_TO_ICON = {
-  javascript: "javascript",
-  js: "javascript",
-  typescript: "typescript",
-  ts: "typescript",
+  "javascript": "javascript",
+  "js": "javascript",
+  "typescript": "typescript",
+  "ts": "typescript",
   "angular-ts": "angular",
   "angular-html": "angular",
-  jsx: "react",
-  tsx: "react",
-  html: "html",
+  "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",
+  "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",
+  "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"
+  "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(lang2) {
   const iconName = LANG_TO_ICON[lang2] ?? "code";
@@ -127,8 +127,8 @@ const LanguageIcon = ({
     "span",
     {
       className,
-      style: { width: size, height: size },
-      dangerouslySetInnerHTML: { __html: html }
+      dangerouslySetInnerHTML: { __html: html },
+      style: { width: size, height: size }
     }
   );
 };

package/dist/static.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-renderer-codeblock",
   "type": "module",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "description": "Code block renderer with Shiki syntax highlighting",
   "license": "MIT",
   "exports": {
@@ -43,10 +43,10 @@
     "@iconify/utils": "^3.1.0",
     "lucide-react": "^0.577.0",
     "shiki": "^4.0.1",
-    "@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"
+    "@haklex/cm-editor": "0.0.66",
+    "@haklex/rich-editor-ui": "0.0.66",
+    "@haklex/rich-editor": "0.0.66",
+    "@haklex/rich-style-token": "0.0.66"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
@@ -62,6 +62,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-renderer-codeblock"
+  },
   "scripts": {
     "build": "vite build",
     "dev:build": "vite build --watch"

package/LICENSE

@@ -1,28 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Innei
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
-Additional Terms and Conditions
-
-----------------
-
-Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.