@haklex/rich-renderer-codeblock 0.0.13 → 0.0.15

package/dist/CodeBlockEditRenderer.d.ts.map

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

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,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,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAkEnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useColorScheme } from "@haklex/rich-editor";
+import { useVariant, useColorScheme } 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";
@@ -112,10 +112,12 @@ function CodeBlockCard({
 const CodeBlockEditRenderer = ({
   code,
   language,
-  showLineNumbers = true,
+  showLineNumbers: showLineNumbersProp,
   editable = false,
   onCodeChange
 }) => {
+  const variant = useVariant();
+  const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
   const colorScheme = useColorScheme();
   const normalizedLanguage = normalizeLanguage(language);
   const [loaded, setLoaded] = useState(false);
@@ -210,8 +212,8 @@ const CodeBlockEditRenderer = ({
   }, [code, normalizedLanguage, colorScheme, showLineNumbers, editable]);
   const fallbackLines = useMemo(() => code.split("\n"), [code]);
   const fallbackClassName = [
-    lined,
-    semanticClassNames.lined,
+    showLineNumbers && lined,
+    showLineNumbers && semanticClassNames.lined,
     showLineNumbers && linedWithNumbers,
     showLineNumbers && semanticClassNames.linedWithNumbers
   ].filter(Boolean).join(" ");
@@ -236,8 +238,10 @@ const CodeBlockEditRenderer = ({
 const CodeBlockRenderer = ({
   code,
   language,
-  showLineNumbers = true
+  showLineNumbers: showLineNumbersProp
 }) => {
+  const variant = useVariant();
+  const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
   const colorScheme = useColorScheme();
   const normalizedLanguage = normalizeLanguage(language);
   const [html, setHtml] = useState(null);
@@ -260,8 +264,8 @@ const CodeBlockRenderer = ({
   }, [code, normalizedLanguage, colorScheme]);
   const fallbackLines = useMemo(() => code.split("\n"), [code]);
   const linedClassName = [
-    lined,
-    semanticClassNames.lined,
+    showLineNumbers && lined,
+    showLineNumbers && semanticClassNames.lined,
     showLineNumbers && linedWithNumbers,
     showLineNumbers && semanticClassNames.linedWithNumbers
   ].filter(Boolean).join(" ");

package/dist/rich-renderer-codeblock.css

@@ -1,5 +1,6 @@
 ._1pn9r4q0 {
   --rr-code-accent: #737373;
+  --font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   position: relative;
   margin: 1.5rem 0;
   border-radius: 0.5rem;
@@ -101,6 +102,13 @@
 ._1pn9r4qa:hover {
   opacity: 1;
 }
+._1pn9r4q0 .shikicode.input, ._1pn9r4q0 .shikicode.output, ._1pn9r4q0 .shikicode.output code, ._1pn9r4q0 .shikicode.output .line, ._1pn9r4q0 .shikicode.output .line span {
+  font-variant-ligatures: none;
+  font-kerning: none;
+}
+._1pn9r4q7 pre, ._1pn9r4q7 code, ._1pn9r4q7 .line, ._1pn9r4q7 .line span {
+  font-family: inherit !important;
+}
 ._1pn9r4q0 pre {
   margin: 0 !important;
   padding: 0 !important;
@@ -114,9 +122,14 @@
 ._1pn9r4q0 .shiki, ._1pn9r4q0 code, ._1pn9r4q0 pre {
   background: transparent !important;
 }
-._1pn9r4q0 .shikicode.output .line::before {
+._1pn9r4q7:has(.shikicode.input.line-numbers) .shikicode.output .line::before {
   background-color: transparent !important;
   color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent) !important;
+  width: 5em;
+  padding-right: 2em;
+}
+._1pn9r4q7:not(:has(.shikicode.input.line-numbers)) .shikicode.output .line::before {
+  display: none;
 }
 ._1pn9r4q0 .line {
   display: block;

package/dist/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAA;AAGV,eAAO,MAAM,IAAI,QAOf,CAAA;AAGF,eAAO,MAAM,IAAI,QAWf,CAAA;AAEF,eAAO,MAAM,QAAQ,QAGnB,CAAA;AAQF,eAAO,MAAM,UAAU,QAuBrB,CAAA;AAGF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAGF,eAAO,MAAM,MAAM,QAIjB,CAAA;AAEF,eAAO,MAAM,eAAe,QAG1B,CAAA;AAGF,eAAO,MAAM,IAAI,QAIf,CAAA;AAEF,eAAO,MAAM,YAAY,QAAY,CAAA;AAYrC,eAAO,MAAM,UAAU,QAUrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAiBvB,CAAA;AA8FF,eAAO,MAAM,KAAK,QAEhB,CAAA;AAiBF,eAAO,MAAM,gBAAgB,QAAY,CAAA;AAmBzC,eAAO,MAAM,yBAAyB;;;;;;CAM5B,CAAA;AAiFV,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,aAAa,QAA6B,CAAA;AACvD,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,iBAAiB,QAAiC,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAA;AAGV,eAAO,MAAM,IAAI,QAWf,CAAA;AAGF,eAAO,MAAM,IAAI,QAWf,CAAA;AAEF,eAAO,MAAM,QAAQ,QAGnB,CAAA;AAQF,eAAO,MAAM,UAAU,QAuBrB,CAAA;AAGF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAGF,eAAO,MAAM,MAAM,QAIjB,CAAA;AAEF,eAAO,MAAM,eAAe,QAG1B,CAAA;AAGF,eAAO,MAAM,IAAI,QAIf,CAAA;AAEF,eAAO,MAAM,YAAY,QAAY,CAAA;AAYrC,eAAO,MAAM,UAAU,QAUrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAiBvB,CAAA;AA2HF,eAAO,MAAM,KAAK,QAEhB,CAAA;AAiBF,eAAO,MAAM,gBAAgB,QAAY,CAAA;AAmBzC,eAAO,MAAM,yBAAyB;;;;;;CAM5B,CAAA;AAiFV,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,aAAa,QAA6B,CAAA;AACvD,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,iBAAiB,QAAiC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-codeblock",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Code block renderer with Shiki syntax highlighting",
   "license": "MIT",
   "type": "module",
@@ -33,8 +33,8 @@
     "lucide-react": "^0.574.0",
     "shiki": "^3.21.0",
     "shikicode": "*",
-    "@haklex/rich-editor": "0.0.13",
-    "@haklex/rich-style-token": "0.0.13"
+    "@haklex/rich-editor": "0.0.15",
+    "@haklex/rich-style-token": "0.0.15"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",