codice - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

dist/index.d.ts

@@ -10,2 +10,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
     lineNumbers?: boolean;
+    lineNumbersWidth?: string;
+    padding?: string;
     onChange?: (code: string) => void;
@@ -19,3 +21,3 @@ } & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
-declare function Code({ children: code, title, controls, fontSize, highlightLines, preformatted, lineNumbers, asMarkup, ...props }: {
+declare function Code({ children: code, title, controls, fontSize, highlightLines, preformatted, lineNumbers, lineNumbersWidth, padding, asMarkup, extension, ...props }: {
     children: string;
@@ -29,5 +31,8 @@ /** Whether to use a preformatted block <pre><code> */
     lineNumbers?: boolean;
+    lineNumbersWidth?: string;
+    padding?: string;
     asMarkup?: boolean;
+    extension?: string;
 } & React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 
 export { Code, Editor };

dist/index.js

 import { jsxs, jsx } from 'react/jsx-runtime';
-import { f as fontSizeCss, S as Style, E as Editor$1 } from './editor-client-DIIQBH_6.js';
-export { C as Code } from './editor-client-DIIQBH_6.js';
+import { f as fontSizeCss, S as Style, E as Editor$1 } from './editor-client-DE3nx3oL.js';
+export { C as Code } from './editor-client-DE3nx3oL.js';
 import { useId } from 'react';
 
-const css = (id, { fontSize })=>{
+const css = (id, { fontSize, lineNumbersWidth = '2.5rem', padding = '1rem' })=>{
     const R = `[data-codice-editor="${id}"]`;
@@ -14,2 +14,4 @@ return `\
   --codice-font-size: ${fontSizeCss(fontSize)};
+  --codice-code-line-number-width: ${lineNumbersWidth};
+  --codice-code-padding: ${padding};
 
@@ -29,3 +31,3 @@ position: relative;
   scrollbar-width: none;
-  padding: 24px 16px;
+  padding: calc(var(--codice-code-padding) * 1.5) var(--codice-code-padding);
   line-height: 1.5;
@@ -41,2 +43,3 @@ font-size: var(--codice-font-size);
   width: 100%;
+  margin-left: calc(var(--codice-code-line-number-width) - 2.5rem); ${''}
 }
@@ -65,3 +68,3 @@ ${R} textarea::-webkit-scrollbar,
 ${R}[data-codice-line-numbers="true"] textarea {
-  padding-left: 55px;
+  padding-left: calc(var(--codice-code-line-number-width) + var(--codice-code-padding));
 }
@@ -73,3 +76,3 @@ `;
 function Editor(props) {
-    const { title, value, onChange, controls = true, lineNumbers = true, fontSize, ...restProps } = props;
+    const { title, value, onChange, controls = true, lineNumbers = true, lineNumbersWidth, padding, fontSize, ...restProps } = props;
     const editorProps = {
@@ -80,3 +83,5 @@ title,
         controls,
-        lineNumbers
+        lineNumbers,
+        lineNumbersWidth,
+        padding
     };
@@ -96,3 +101,5 @@ const id = useId().replace(':', '_').replace(/[0-9]/g, (match)=>String.fromCharCode(65 + Number(match)));
                 css: css(id, {
-                    fontSize
+                    fontSize,
+                    padding,
+                    lineNumbersWidth
                 })
@@ -99,0 +106,0 @@ }),

package.json

 {
   "name": "codice",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
@@ -18,2 +18,3 @@ "exports": "./dist/index.js",
     "bunchee": "^6.3.2",
+    "dom-to-image": "^2.6.0",
     "next": "15.1.6",
@@ -20,0 +21,0 @@ "react-dom": "^19.0.0",

README.md

@@ -36,2 +36,4 @@ # Codice
 - `lineNumbers` (optional): A boolean value indicating whether to display line numbers in the editor.
+- `lineNumbersWidth` (optional): A string representing the width of the line numbers column. The default value is `2.5rem`.
+- `padding` (optional): A string representing the padding of the code block. The default value is `1rem`.
 - `fontSize` (optional): A string representing the font size of the editor. The default value is `inherit`.
@@ -61,6 +63,8 @@
 - `controls` (optional): A boolean value indicating whether to display the controls for the code block.
-- `lineNumbers` (optional): A boolean value indicating whether to display line numbers in the code block.
 - `preformatted` (optional): A boolean value indicating whether the code should be displayed as preformatted text. If `true`, the code will be displayed in a `pre` and a `code` element. If `false`, the code will be displayed in a `div` element.
 - `asMarkup` (optional): A boolean value indicating whether the code should be displayed as markup. If `true`, the code will be displayed with HTML entities escaped. If `false`, the code will be displayed as plain text. default is `false`.
 - `fontSize` (optional): A string representing the font size of the editor. The default value is `inherit`.
+- `lineNumbers` (optional): A boolean value indicating whether to display line numbers in the code block.
+- `lineNumbersWidth` (optional): A string representing the width of the line numbers column. The default value is `2.5rem`.
+- `padding` (optional): A string representing the padding of the code block. The default value is `1rem`.
 - `children`: The code content to be displayed in the code block.
@@ -79,3 +83,2 @@
 
-
 For example, you can define the following CSS variables in your stylesheet to customize the appearance:
@@ -82,0 +85,0 @@ ```css

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20280

9.4%

Lines of code

460

5.26%

Number of lines in readme file

113

2.73%

Worsened metrics

Dev dependency count

7

16.67%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes