enhance: shortern names

huozhi · Jan 25, 2025 · bd43ddb · bd43ddb
1 parent 8058c22
commit bd43ddb
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 138 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # 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
 
@@ -41,7 +42,12 @@ Additionally, you can pass any other props to the `Editor` component, which will
 ```tsx
 import { Code } from 'codice'
 
-<Code controls title="app/index.js">
+<Code 
+  title="app/index.js"
+  controls 
+  lineNumbers
+  preformatted
+>
   {'<div>Hello World</div>'}
 </Code>
 ```
@@ -57,31 +63,33 @@ import { Code } from 'codice'
 
 #### CSS Variables
 
-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.
 
 ### **Projects Powered by Codice**
 

diff --git a/site/app/styles.css b/site/app/styles.css
@@ -8,10 +8,8 @@
   --sh-jsxliterals: #989bed;
   --sh-entity: #e9edc5;
   --sh-property: #7be5f2;
-  --codice-editor-text-color: transparent;
-  --codice-editor-background-color: transparent;
-  --codice-editor-caret-color: #d5efea;
-  --codice-editor-control-color: #8d8989;
+  --codice-control-color: #8d8989;
+  --codice-caret-color: #d5efea;
 }
 
 * {
@@ -127,9 +125,6 @@ input[type=radio] {
 .controls-manager label span {
   font-size: 12px;
 }
-.controls-manager label:hover {
-  border: 1px solid #f47067;
-}
 .controls-manager .control-button {
   margin: 4px;
 }
@@ -140,33 +135,33 @@ input[type=radio] {
 }
 
 /* Codice Styling */
-[data-codice-editor] {
+[data-codice="editor"] {
   max-width: 100%;
   max-width: 640px;
   border: 1px transparent solid;
 }
-.editor[data-codice-editor] textarea {
+.editor[data-codice="editor"] textarea {
   border-radius: 8px;
   border: 1px solid rgba(163, 169, 165, 0.2);
   transition: border 0.2s ease-in-out;
 }
-.editor[data-codice-editor] textarea:focus {
+.editor[data-codice="editor"] textarea:focus {
   border: 1px solid hsla(137, 100.00%, 94.30%, 0.30);
 }
-[data-codice-editor-title] {
+[data-codice-title] {
   color: hsla(0, 0%, 87%, 0.34);
 }
 
-[data-codice-editor-control] {
+[data-codice-control] {
   transition: background-color 0.2s ease-in-out;
 }
-[data-codice-editor-control]:nth-child(1):hover {
+[data-codice-control]:nth-child(1):hover {
   background-color: #f47067;
 }
-[data-codice-editor-control]:nth-child(2):hover {
+[data-codice-control]:nth-child(2):hover {
   background-color: #fdbc40;
 }
-[data-codice-editor-control]:nth-child(3):hover {
+[data-codice-control]:nth-child(3):hover {
   background-color: #34d399;
 }
 .code [data-codice-code-content] {

diff --git a/src/code/code.test.tsx b/src/code/code.test.tsx
@@ -5,9 +5,10 @@ import { renderToString } from 'react-dom/server'
 describe('Code', () => {
   it('default props', () => {
     expect(renderToString(<Code>test</Code>)).toMatchInlineSnapshot(`
-      "<div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+      "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
         --codice-code-line-number-color: #a4a4a4;
         --codice-code-highlight-color: #555555;
+        --codice-control-color: #8d8989;
       }
       [data-codice-code] pre {
         white-space: pre-wrap;
@@ -23,15 +24,16 @@ describe('Code', () => {
       [data-codice-code] .sh__line[data-highlight] {
         background-color: var(--codice-code-highlight-color);
       }
-      </style><pre data-codice-code-content="true"><code><span class="sh__line"><span class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
+      </style><pre data-codice-code-content="true"><code><span class="sh__line"><span data-sh-token-type="element" class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
     `)
   })
 
   it('with title', () => {
     expect(renderToString(<Code title="file.js">test</Code>)).toMatchInlineSnapshot(`
-      "<div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+      "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
         --codice-code-line-number-color: #a4a4a4;
         --codice-code-highlight-color: #555555;
+        --codice-control-color: #8d8989;
       }
       [data-codice-code] pre {
         white-space: pre-wrap;
@@ -47,49 +49,49 @@ describe('Code', () => {
       [data-codice-code] .sh__line[data-highlight] {
         background-color: var(--codice-code-highlight-color);
       }
-      </style><div data-codice-editor-header="true" data-codice-editor-header-controls="false"><style data-codice-style="true">[data-codice-editor-header] {
+      </style><div data-codice-header="true" data-codice-header-controls="false"><style data-codice-style="true">[data-codice-header] {
         position: relative;
         display: flex;
         padding: 16px 22px 8px;
         align-items: center;
       }
-      [data-codice-editor-header] [data-codice-editor-title] {
+      [data-codice-header] [data-codice-title] {
         display: inline-block;
         flex: 1 0;
         text-align: center;
         line-height: 1;
       }
-      [data-codice-editor-header] [data-codice-editor-controls] {
+      [data-codice-header] [data-codice-controls] {
         display: inline-flex;
         align-self: center;
         justify-self: start;
         align-items: center;
         justify-content: center;
       }
-      [data-codice-editor-header] [data-codice-editor-controls],
-      [data-codice-editor-header] [data-codice-editor-controls-placeholder] {
+      [data-codice-header] [data-codice-controls] {
         width: 52px;
       }
-      [data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+      [data-codice-header-controls="true"] [data-codice-title] {
         padding-right: 52px;
       }
-      [data-codice-editor-header] [data-codice-editor-control] {
+      [data-codice-header] [data-codice-control] {
         display: flex;
         width: 10px;
         height: 10px;
         margin: 3px;
         border-radius: 50%;
-        background-color: var(--codice-editor-control-color);
+        background-color: var(--codice-control-color);
       }
-      </style><div data-codice-editor-title="true">file.js</div></div><pre data-codice-code-content="true"><code><span class="sh__line"><span class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
+      </style><div data-codice-title="true">file.js</div></div><pre data-codice-code-content="true"><code><span class="sh__line"><span data-sh-token-type="element" class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
     `)
   })
 
   it('with controls', () => {
     expect(renderToString(<Code controls>test</Code>)).toMatchInlineSnapshot(`
-      "<div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+      "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
         --codice-code-line-number-color: #a4a4a4;
         --codice-code-highlight-color: #555555;
+        --codice-control-color: #8d8989;
       }
       [data-codice-code] pre {
         white-space: pre-wrap;
@@ -105,41 +107,40 @@ describe('Code', () => {
       [data-codice-code] .sh__line[data-highlight] {
         background-color: var(--codice-code-highlight-color);
       }
-      </style><div data-codice-editor-header="true" data-codice-editor-header-controls="true"><style data-codice-style="true">[data-codice-editor-header] {
+      </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">[data-codice-header] {
         position: relative;
         display: flex;
         padding: 16px 22px 8px;
         align-items: center;
       }
-      [data-codice-editor-header] [data-codice-editor-title] {
+      [data-codice-header] [data-codice-title] {
         display: inline-block;
         flex: 1 0;
         text-align: center;
         line-height: 1;
       }
-      [data-codice-editor-header] [data-codice-editor-controls] {
+      [data-codice-header] [data-codice-controls] {
         display: inline-flex;
         align-self: center;
         justify-self: start;
         align-items: center;
         justify-content: center;
       }
-      [data-codice-editor-header] [data-codice-editor-controls],
-      [data-codice-editor-header] [data-codice-editor-controls-placeholder] {
+      [data-codice-header] [data-codice-controls] {
         width: 52px;
       }
-      [data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+      [data-codice-header-controls="true"] [data-codice-title] {
         padding-right: 52px;
       }
-      [data-codice-editor-header] [data-codice-editor-control] {
+      [data-codice-header] [data-codice-control] {
         display: flex;
         width: 10px;
         height: 10px;
         margin: 3px;
         border-radius: 50%;
-        background-color: var(--codice-editor-control-color);
+        background-color: var(--codice-control-color);
       }
-      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div></div><pre data-codice-code-content="true"><code><span class="sh__line"><span class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
+      </style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div></div><pre data-codice-code-content="true"><code><span class="sh__line"><span data-sh-token-type="element" class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
     `)
   })
 })
diff --git a/src/code/code.tsx b/src/code/code.tsx
@@ -66,18 +66,18 @@ export function CodeHeader({ title, controls = false }: { title?: string; contro
 
   return (
     <div 
-      data-codice-editor-header
-      data-codice-editor-header-controls={controls}
+      data-codice-header
+      data-codice-header-controls={controls}
     >
       <style data-codice-style>{headerCss}</style>
       {controls ? (
-        <div data-codice-editor-controls>
-          <span data-codice-editor-control />
-          <span data-codice-editor-control />
-          <span data-codice-editor-control />
+        <div data-codice-controls>
+          <span data-codice-control />
+          <span data-codice-control />
+          <span data-codice-control />
         </div>
       ) : null}
-      {title ? <div data-codice-editor-title>{title}</div> : null}
+      {title ? <div data-codice-title>{title}</div> : null}
     </div>
   )
 }
@@ -106,7 +106,8 @@ export function Code({
   ) 
 
   return (
-    <div {...props} data-codice-code>
+    // Add both attribute because it's both root component and child component (of editor)
+    <div {...props} data-codice="code" data-codice-code>
       <style data-codice-style>
         {css}
       </style>

diff --git a/src/code/css.ts b/src/code/css.ts
@@ -1,10 +1,11 @@
 const C = `[data-codice-code]`
-const H = `[data-codice-editor-header]`
+const H = `[data-codice-header]`
 
 export const baseCss = `\
 ${C} {
   --codice-code-line-number-color: #a4a4a4;
   --codice-code-highlight-color: #555555;
+  --codice-control-color: #8d8989;
 }
 ${C} pre {
   white-space: pre-wrap;
@@ -29,33 +30,32 @@ ${H} {
   padding: 16px 22px 8px;
   align-items: center;
 }
-${H} [data-codice-editor-title] {
+${H} [data-codice-title] {
   display: inline-block;
   flex: 1 0;
   text-align: center;
   line-height: 1;
 }
-${H} [data-codice-editor-controls] {
+${H} [data-codice-controls] {
   display: inline-flex;
   align-self: center;
   justify-self: start;
   align-items: center;
   justify-content: center;
 }
-${H} [data-codice-editor-controls],
-${H} [data-codice-editor-controls-placeholder] {
+${H} [data-codice-controls] {
   width: 52px;
 }
-[data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+[data-codice-header-controls="true"] [data-codice-title] {
   padding-right: 52px;
 }
-${H} [data-codice-editor-control] {
+${H} [data-codice-control] {
   display: flex;
   width: 10px;
   height: 10px;
   margin: 3px;
   border-radius: 50%;
-  background-color: var(--codice-editor-control-color);
+  background-color: var(--codice-control-color);
 }
 `