c063 - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/components/CodeBlock.d.ts

@@ -14,4 +14,4 @@ import { CodeBlockProps } from "../types/index";
 export declare const CodeBlock: {
-    <T extends React.ElementType = "span">({ tokenLines, showLineNumbers, lineNumberStyle, theme, ...rest }: CodeBlockProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ tokenLines, showLineNumbers, lineNumberStyle, autoWrap, theme, ...rest }: CodeBlockProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

dist/components/CodeBlock.js

@@ -14,12 +14,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
-export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, theme, ...rest }) => {
-    return (_jsx("pre", { ...rest, children: tokenLines.map((line, index) => (
-        // eslint-disable-next-line react/react-in-jsx-scope
-        _jsxs("div", { style: {
-                display: "flex",
-                flexWrap: "nowrap",
-                width: "100%",
-                gap: "0.5rem",
-            }, children: [showLineNumbers && (_jsx("span", { style: { color: "#888", userSelect: "none", ...lineNumberStyle }, children: index + 1 })), _jsx(CodeLine, { theme: theme, tokens: line })] }, index))) }));
+export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, autoWrap, theme, ...rest }) => {
+    return (_jsx("pre", { ...rest, style: { margin: 0, padding: 0, overflowX: "auto" }, children: _jsx("table", { style: { borderCollapse: "collapse", width: "100%" }, children: _jsx("tbody", { children: tokenLines.map((line, index) => (_jsxs("tr", { children: [showLineNumbers && (_jsx("td", { style: {
+                                paddingInline: "0.5rem",
+                                textAlign: "right",
+                                whiteSpace: "pre",
+                                fontVariantNumeric: "tabular-nums",
+                                color: "#888",
+                                userSelect: "none",
+                                ...lineNumberStyle,
+                            }, children: index + 1 })), _jsx("td", { style: { width: "100%" }, children: _jsx(CodeLine, { theme: theme, tokens: line, autoWrap: autoWrap }) })] }, index))) }) }) }));
 };
 CodeBlock.displayName = "CodeBlock";

dist/components/CodeLine.d.ts

@@ -9,2 +9,3 @@ import { CodeLineProps } from "../types/index";
  * @param props.theme 主題
+ * @param prop.autoWrap 是否自動換行
  * @param rest 其他 HTMLAttributes
@@ -14,4 +15,4 @@ * @returns JSX 元素，呈現語法 token 的單行程式碼
 export declare const CodeLine: {
-    <T extends React.ElementType = "span">({ style, tokens, theme, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ style, tokens, theme, autoWrap, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

dist/components/CodeLine.js

@@ -10,8 +10,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param props.theme 主題
+ * @param prop.autoWrap 是否自動換行
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
-export const CodeLine = ({ style, tokens, theme, ...rest }) => {
+export const CodeLine = ({ style, tokens, theme, autoWrap = true, ...rest }) => {
     return (_jsx("code", { ...rest, style: {
-            whiteSpace: "pre-wrap",
+            whiteSpace: autoWrap ? "pre-wrap" : "nowrap",
             ...style,
@@ -18,0 +19,0 @@ }, children: tokens.map((token, index) => (_jsx(CodeToken, { theme: theme, ...token }, index))) }));

dist/types/index.d.ts

@@ -74,2 +74,7 @@ import { parsableLanguages, themes } from "../libs";
     theme?: CodeTheme;
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
 }>;
@@ -116,3 +121,8 @@ export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
     theme?: CodeTheme;
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
 }>;
 export type ParsableLanguage = (typeof parsableLanguages)[number];

package.json

 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A React component for displaying code snippets with syntax highlighting.",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

src/components/CodeBlock.tsx

 import { CodeBlockProps } from "../types/index";
 import { CodeLine } from "./CodeLine";
+
 /**
@@ -18,2 +19,3 @@ * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。
   lineNumberStyle,
+  autoWrap,
   theme,
@@ -23,24 +25,29 @@ ...rest
   return (
-    <pre {...rest}>
-      {tokenLines.map((line, index) => (
-        // eslint-disable-next-line react/react-in-jsx-scope
-        <div
-          key={index}
-          style={{
-            display: "flex",
-            flexWrap: "nowrap",
-            width: "100%",
-            gap: "0.5rem",
-          }}
-        >
-          {showLineNumbers && (
-            <span
-              style={{ color: "#888", userSelect: "none", ...lineNumberStyle }}
-            >
-              {index + 1}
-            </span>
-          )}
-          <CodeLine theme={theme} tokens={line} />
-        </div>
-      ))}
+    <pre {...rest} style={{ margin: 0, padding: 0, overflowX: "auto" }}>
+      <table style={{ borderCollapse: "collapse", width: "100%" }}>
+        <tbody>
+          {tokenLines.map((line, index) => (
+            <tr key={index}>
+              {showLineNumbers && (
+                <td
+                  style={{
+                    paddingInline: "0.5rem",
+                    textAlign: "right",
+                    whiteSpace: "pre",
+                    fontVariantNumeric: "tabular-nums",
+                    color: "#888",
+                    userSelect: "none",
+                    ...lineNumberStyle,
+                  }}
+                >
+                  {index + 1}
+                </td>
+              )}
+              <td style={{ width: "100%" }}>
+                <CodeLine theme={theme} tokens={line} autoWrap={autoWrap} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </pre>
@@ -47,0 +54,0 @@ );

src/components/CodeLine.tsx

@@ -9,3 +9,4 @@ import { CodeLineProps } from "../types/index";
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
- * @param props.theme 主題 
+ * @param props.theme 主題
+ * @param prop.autoWrap 是否自動換行
  * @param rest 其他 HTMLAttributes
@@ -18,2 +19,3 @@ * @returns JSX 元素，呈現語法 token 的單行程式碼
   theme,
+  autoWrap = true,
   ...rest
@@ -25,3 +27,3 @@ }: CodeLineProps<T>) => {
       style={{
-        whiteSpace: "pre-wrap",
+        whiteSpace: autoWrap ? "pre-wrap" : "nowrap",
         ...style,
@@ -28,0 +30,0 @@ }}

src/types/index.tsx

@@ -97,2 +97,8 @@ import { parsableLanguages, themes } from "../libs";
     theme?: CodeTheme;
+
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
   }
@@ -144,2 +150,8 @@ >;
     theme?: CodeTheme;
+
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
   }
@@ -146,0 +158,0 @@ >;

No alert changes

Improved metrics

Total package byte prevSize

716883

0.18%

Lines of code

1979

1.64%

No dependency changes