From bd43ddbcf62667eb1b531132cc5ef9f7b1f9a13f Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Sat, 25 Jan 2025 21:19:09 +0100 Subject: [PATCH] enhance: shortern names --- README.md | 38 ++++++----- site/app/styles.css | 25 +++---- src/code/code.test.tsx | 45 ++++++------- src/code/code.tsx | 17 ++--- src/code/css.ts | 16 ++--- src/editor/css.ts | 16 +++-- src/editor/editor.test.tsx | 129 ++++++++++++++++++++----------------- src/editor/editor.tsx | 2 +- src/editor/index.tsx | 10 +-- 9 files changed, 160 insertions(+), 138 deletions(-) diff --git a/README.md b/README.md index 34e1df0..f7f8a0c 100644 --- 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' - + {'
Hello World
'} ``` @@ -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() { background-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 index eba53a4..0b78eea 100644 --- 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 index 2b8891c..d411665 100644 --- 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(test)).toMatchInlineSnapshot(` - "
test
" + 
test
" `) }) it('with title', () => { expect(renderToString(test)).toMatchInlineSnapshot(` - "
file.js
test
" +
file.js
test
" `) }) it('with controls', () => { expect(renderToString(test)).toMatchInlineSnapshot(` - "
test
" + 
test
" `) }) }) \ No newline at end of file diff --git a/src/code/code.tsx b/src/code/code.tsx index a272216..e8ccf65 100644 --- a/src/code/code.tsx +++ b/src/code/code.tsx @@ -66,18 +66,18 @@ export function CodeHeader({ title, controls = false }: { title?: string; contro return (
{controls ? ( -
- - - +
+ + +
) : null} - {title ?
{title}
: null} + {title ?
{title}
: null}
) } @@ -106,7 +106,8 @@ export function Code({ ) return ( -
+ // Add both attribute because it's both root component and child component (of editor) +
diff --git a/src/code/css.ts b/src/code/css.ts index 5c5f80a..3ff28df 100644 --- 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); } ` diff --git a/src/editor/css.ts b/src/editor/css.ts index 42502c3..bd0132b 100644 --- a/src/editor/css.ts +++ b/src/editor/css.ts @@ -1,4 +1,4 @@ -const R = '[data-codice-editor]' +const R = '[data-codice="editor"]' export const css = `\ ${R} { position: relative; @@ -7,6 +7,10 @@ ${R} { flex-direction: column; justify-content: stretch; scrollbar-width: none; + + --codice-text-color: transparent; + --codice-background-color: transparent; + --codice-caret-color: inherit; } ${R} code, ${R} textarea { @@ -17,7 +21,7 @@ ${R} textarea { padding: 24px 16px; font-size: 16px; line-height: 20px; - caret-color: var(--codice-editor-caret-color); + caret-color: var(--codice-caret-color); border: none; outline: none; width: 100%; @@ -31,14 +35,14 @@ ${R} textarea:focus::-webkit-scrollbar, ${R} textarea:hover::-webkit-scrollbar { width: 0; } -${R} [data-codice-editor-content] { +${R} [data-codice-content] { position: relative; } ${R} textarea { resize: none; 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; top: 0; bottom: 0; @@ -47,7 +51,7 @@ ${R} textarea { height: 100%; overflow: hidden; } -${R}[data-codice-editor-line-numbers="true"] textarea { +${R}[data-codice-line-numbers="true"] textarea { padding-left: 55px; } ` diff --git a/src/editor/editor.test.tsx b/src/editor/editor.test.tsx index 8ae99d8..4e4f212 100644 --- a/src/editor/editor.test.tsx +++ b/src/editor/editor.test.tsx @@ -9,16 +9,20 @@ describe('Code', () => { test ) ).toMatchInlineSnapshot(` - "
file.js
file.js