codice - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0-beta.0

dist/index.d.ts

@@ -10,3 +10,2 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
     onChange?: (code: string) => void;
-    highlight?: (code: string) => string;
 } & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
@@ -17,3 +16,3 @@
 
-declare function Code({ children: code, title, controls, preformatted, lineNumbers, ...props }: {
+declare function Code({ children: code, title, controls, preformatted, lineNumbers, highlightLines, ...props }: {
     children: string;
@@ -25,4 +24,5 @@ /** Whether to use a preformatted block <pre><code> */
     lineNumbers?: boolean;
+    highlightLines?: ([number, number] | number)[];
 } & React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 
 export { Code, Editor };

dist/index.js

 import { jsxs, jsx } from 'react/jsx-runtime';
-import { E as Editor$1 } from './editor-client-CkXUIfOF.js';
-export { C as Code } from './editor-client-CkXUIfOF.js';
+import { E as Editor$1 } from './editor-client-zXIq67GO.js';
+export { C as Code } from './editor-client-zXIq67GO.js';
 
-const R = '[data-codice-editor]';
+const R = '[data-codice="editor"]';
 const css = `\
@@ -14,2 +14,6 @@ ${R} {
   scrollbar-width: none;
+
+  --codice-text-color: transparent;
+  --codice-background-color: transparent;
+  --codice-caret-color: inherit;
 }
@@ -22,6 +26,6 @@ ${R} code,
   scrollbar-width: none;
-  padding: 24px 36px;
+  padding: 24px 16px;
   font-size: 16px;
   line-height: 20px;
-  caret-color: var(--codice-editor-caret-color);
+  caret-color: var(--codice-caret-color);
   border: none;
@@ -40,3 +44,3 @@ outline: none;
 }
-${R} [data-codice-editor-content] {
+${R} [data-codice-content] {
   position: relative;
@@ -47,4 +51,4 @@ }
   display: block;
-  color: var(--codice-editor-text-color);
-  background-color: var(--codice-editor-background-color);
+  color: var(--codice-text-color);
+  background-color: var(--codice-background-color);
   position: absolute;
@@ -58,9 +62,10 @@ top: 0;
 }
-${R}[data-codice-editor-line-numbers="true"] textarea {
-  padding-left: 51px;
+${R}[data-codice-line-numbers="true"] textarea {
+  padding-left: 55px;
 }
-`;
+` // line number padding-left is [[width 24px] margin-right 16px] + 15px
+;
 
 function Editor(props) {
-    const { title, value, onChange, highlight, controls, lineNumbers, ...restProps } = props;
+    const { title, value, onChange, controls, lineNumbers, ...restProps } = props;
     const editorProps = {
@@ -70,3 +75,2 @@ title,
         onChange,
-        highlight,
         controls,
@@ -77,8 +81,8 @@ lineNumbers
         ...restProps,
-        "data-codice-editor": true,
+        "data-codice": "editor",
         // DOM attributes for selecting the stateful editor easily.
-        // e.g. [data-codice-editor-line-numbers="true"]
-        "data-codice-editor-title": title || '',
-        "data-codice-editor-controls": !!controls,
-        "data-codice-editor-line-numbers": !!lineNumbers,
+        // e.g. [data-codice-line-numbers="true"]
+        "data-codice-title": title || '',
+        "data-codice-controls": !!controls,
+        "data-codice-line-numbers": !!lineNumbers,
         children: [
@@ -85,0 +89,0 @@ /*#__PURE__*/ jsx("style", {

package.json

 {
   "name": "codice",
-  "version": "0.5.1",
+  "version": "1.0.0-beta.0",
   "type": "module",
@@ -11,10 +11,2 @@ "exports": "./dist/index.js",
   ],
-  "scripts": {
-    "prepare": "bunchee",
-    "build": "bunchee",
-    "test": "vitest",
-    "dev": "bunchee --watch",
-    "site": "next dev site",
-    "prepublishOnly": "rm -rf dist && pnpm run build"
-  },
   "peerDependencies": {
@@ -27,3 +19,3 @@ "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
     "bunchee": "^6.3.2",
-    "next": "15.1.5",
+    "next": "15.1.6",
     "react-dom": "^19.0.0",
@@ -33,3 +25,11 @@ "typescript": "^5.7.3",
   },
-  "packageManager": "pnpm@9.15.4"
-}
+  "dependencies": {
+    "sugar-high": "^0.8.3"
+  },
+  "scripts": {
+    "build": "bunchee",
+    "test": "vitest",
+    "dev": "bunchee --watch",
+    "site": "next dev site"
+  }
+}

README.md

 # Codice
 
-Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting.
+Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting. Styling customization is enabled through CSS variables and HTML attributes.
 
+
 ## Installation
@@ -22,3 +23,2 @@
   onChange={(code) => console.log(code)}
-  highlight={(code) => code}
 />
@@ -37,3 +37,2 @@ ```
 - `lineNumbers` (optional): A boolean value indicating whether to display line numbers in the editor.
-- `highlight` (optional): A function used to provide syntax highlighting for the code. It should accept the code as an argument and return the highlighted code as an HTML string. You can use any syntax highlighting library (e.g., [Prism](https://prismjs.com/)) to implement this functionality.
 
@@ -48,3 +47,8 @@ Additionally, you can pass any other props to the `Editor` component, which will be applied to the root `div` element.
 
-<Code controls title="app/index.js">
+<Code 
+  title="app/index.js"
+  controls 
+  lineNumbers
+  preformatted
+>
   {'<div>Hello World</div>'}
@@ -65,27 +69,29 @@ </Code>
 
-To customize the appearance of the editor, you can modify the CSS variables used in the `styles` object in the provided code:
+Usually you don't need to style the editor, it comes with a default theme. However, you can customize the appearance of the editor by overriding the CSS variables used in the provided code.
 
-- `--codice-editor-text-color`: The color of the editor text.
-- `--codice-editor-background-color`: The background color of the editor.
-- `--codice-editor-caret-color`: The color of the caret in the editor.
-- `--codice-editor-control-color`: The color of the control items in the editor.
+- `--codice-text-color`: The color of the editor text. (default: `transparent`)
+- `--codice-background-color`: The background color of the editor. (default: `transparent`)
+- `--codice-caret-color`: The color of the caret in the editor. (default: `inherit`)
+- `--codice-control-color`: The color of the control items in the code frame and editor. (default: `#8d8989`)
 
-For example, you can set the following CSS in your application:
 
+For example, you can define the following CSS variables in your stylesheet to customize the appearance:
 ```css
 :root {
-  --codice-editor-text-color: #333;
-  --codice-editor-background-color: #f5f5f5;
-  --codice-editor-caret-color: #d5efea;
+  --codice-text-color: transparent;
+  --codice-background-color: transparent;
+  --codice-caret-color: #d5efea;
+  --codice-control-color: #8d8989;
 }
 ```
 
-This will style the editor with a light gray background, darker gray text, and even lighter gray controls.
+This will style the code frame with a light gray background, darker gray text, and even lighter gray controls.
 
 #### CSS Attributes
 
-You can also customize the appearance of the editor by overriding the CSS attributes of the code block:
+You can also customize the appearance of the code frame by overriding the CSS attributes of the code block:
 
-- `[data-codice-editor-controls]`: The class name for the controls in the editor.
-- `[data-codice-editor-control]`: The class name of control items, there're 3 of them.
+- `[data-codice-controls]`: The class name for the controls wrapper in the code frame.
+- `[data-codice-control]`: The class name of control items, there're 3 of them.
+  - `[data-codice-control]:nth-child(<number>) { background-color: <color> }` can be used to style each control item.
 
@@ -92,0 +98,0 @@ ### **Projects Powered by Codice**

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

Fixed 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

17835

increased by31.13%

Lines of code

470

increased by62.07%

Number of lines in readme file

106

increased by6%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedsugar-high@^0.8.3

• + Addedsugar-high@0.8.4(transitive)