Skip to content

Commit 20d8ed4

Browse files
huozhihuozhi
authored
fix: controls prop causing text mismatching (#9)
1 parent 884ad44 commit 20d8ed4

File tree

9 files changed

+106
-30
lines changed

9 files changed

+106
-30
lines changed

‎.github/workflows/ci.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ jobs:
1414
timeout-minutes: 5
1515
strategy:
1616
matrix:
17-
node-version: [22]
17+
node-version: [20]
1818

1919
name: Node ${{ matrix.node-version }}
2020
steps:

‎site/app/editor-example.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function Page() {
2424
}
2525
`
2626

27-
export function EditorExample({ searchParams }) {
27+
export function EditorExample({ searchParams } : { searchParams: { c?: string } }) {
2828
return (
2929
<div>
3030
<LiveEditor searchParams={searchParams} defaultCode={defaultCode} />

‎site/app/live-editor.tsx

+39-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,22 @@ import { highlight } from 'sugar-high'
66

77
const CODE_QUERY_KEY = 'c'
88

9+
function ControlButton({ id, checked, onChange, name }) {
10+
return (
11+
<span className='control-button'>
12+
<input
13+
id={id}
14+
type="checkbox"
15+
checked={checked}
16+
onChange={(event) => onChange(event.target.checked)}
17+
/>
18+
<label data-checked={checked} htmlFor={id}>
19+
{`${name}={`}<span>{checked ? '●' : '○'}</span>{`}`}
20+
</label>
21+
</span>
22+
)
23+
}
24+
925
export function LiveEditor({
1026
searchParams,
1127
defaultCode,
@@ -16,17 +32,36 @@ export function LiveEditor({
1632
const codeQuery = searchParams[CODE_QUERY_KEY]
1733
const initialCode = codeQuery ? atob(codeQuery) : defaultCode
1834
const [code, setCode] = useState(initialCode)
35+
const [title, setTitle] = useState<'index.js' | ''>('index.js')
36+
const [controls, setControls] = useState(true)
1937

2038
return (
2139
<div>
40+
{/* Controls to for displaying the `title` and `controls` */}
41+
<div className="controls-manager">
42+
<ControlButton
43+
id="title-control"
44+
checked={!!title}
45+
onChange={(checked) => setTitle(checked ? 'index.js' : '')}
46+
name="title"
47+
/>
48+
49+
<ControlButton
50+
id="controls-control"
51+
checked={controls}
52+
onChange={setControls}
53+
name="controls"
54+
/>
55+
</div>
56+
2257
<Editor
2358
value={code}
24-
className='editor'
25-
title='index.js'
26-
highlight={text => highlight(text)}
59+
className="editor"
60+
title={title}
61+
controls={controls}
62+
highlight={(text) => highlight(text)}
2763
onChange={(text) => setCode(text)}
2864
/>
2965
</div>
3066
)
3167
}
32-

‎site/app/page.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { EditorExample } from './editor-example'
22
import { CodeExamples } from './code-example'
33
import { Code } from 'codice'
44

5-
export default async function Page(props) {
5+
type SearchParams = {
6+
c?: string // default code
7+
}
8+
9+
export default async function Page(props: { searchParams: Promise<SearchParams> }) {
610
const searchParams = await props.searchParams
711

812
return (
@@ -28,7 +32,7 @@ export default async function Page(props) {
2832
</div>
2933

3034
<div className='section'>
31-
<h2>Editor Examples</h2>
35+
<h2>Editor Example</h2>
3236
<EditorExample searchParams={searchParams} />
3337
</div>
3438

‎site/app/styles.css

+30-1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,36 @@ input[type=radio] {
108108
.code-example__item__title {
109109
margin: 0 0 2rem;
110110
}
111+
.controls-manager {
112+
margin: 2rem 0;
113+
}
114+
.controls-manager label {
115+
display: inline-block;
116+
padding: 2px 4px;
117+
color: #fff;
118+
border-radius: 0.5rem;
119+
cursor: pointer;
120+
border: 1px solid #fdb9b5;
121+
transition: all 0.2s ease-in-out;
122+
}
123+
.controls-manager label[data-checked="true"] {
124+
background-color: #fdb9b5;
125+
color: #343434;
126+
}
127+
.controls-manager label span {
128+
font-size: 12px;
129+
}
130+
.controls-manager label:hover {
131+
border: 1px solid #f47067;
132+
}
133+
.controls-manager .control-button {
134+
margin: 4px;
135+
}
136+
137+
.controls-manager input[type="checkbox"] {
138+
/* make it looks fancy */
139+
display: none;
140+
}
111141

112142
/* Codice Styling */
113143
[data-codice-editor] {
@@ -119,7 +149,6 @@ input[type=radio] {
119149
border-radius: 8px;
120150
border: 1px solid rgba(163, 169, 165, 0.2);
121151
transition: border 0.2s ease-in-out;
122-
padding-top: 64px; /* TODO: dynamic padding-top with controls */
123152
}
124153
[data-codice-editor-title] {
125154
color: hsla(0, 0%, 87%, 0.34);

‎src/code/code.test.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ describe('Code', () => {
2424
display: inline-block;
2525
flex: 1 0;
2626
text-align: center;
27+
line-height: 1;
2728
}
2829
[data-codice-editor-controls] {
2930
display: inline-flex;
@@ -38,8 +39,8 @@ describe('Code', () => {
3839
}
3940
[data-codice-editor-control] {
4041
display: flex;
41-
width: 11px;
42-
height: 11px;
42+
width: 10px;
43+
height: 10px;
4344
margin: 3px;
4445
border-radius: 50%;
4546
background-color: var(--codice-editor-control-color);
@@ -69,6 +70,7 @@ describe('Code', () => {
6970
display: inline-block;
7071
flex: 1 0;
7172
text-align: center;
73+
line-height: 1;
7274
}
7375
[data-codice-editor-controls] {
7476
display: inline-flex;
@@ -83,8 +85,8 @@ describe('Code', () => {
8385
}
8486
[data-codice-editor-control] {
8587
display: flex;
86-
width: 11px;
87-
height: 11px;
88+
width: 10px;
89+
height: 10px;
8890
margin: 3px;
8991
border-radius: 50%;
9092
background-color: var(--codice-editor-control-color);
@@ -114,6 +116,7 @@ describe('Code', () => {
114116
display: inline-block;
115117
flex: 1 0;
116118
text-align: center;
119+
line-height: 1;
117120
}
118121
[data-codice-editor-controls] {
119122
display: inline-flex;
@@ -128,8 +131,8 @@ describe('Code', () => {
128131
}
129132
[data-codice-editor-control] {
130133
display: flex;
131-
width: 11px;
132-
height: 11px;
134+
width: 10px;
135+
height: 10px;
133136
margin: 3px;
134137
border-radius: 50%;
135138
background-color: var(--codice-editor-control-color);

‎src/code/css.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const css = `
1717
display: inline-block;
1818
flex: 1 0;
1919
text-align: center;
20+
line-height: 1;
2021
}
2122
[data-codice-editor-controls] {
2223
display: inline-flex;
@@ -31,8 +32,8 @@ export const css = `
3132
}
3233
[data-codice-editor-control] {
3334
display: flex;
34-
width: 11px;
35-
height: 11px;
35+
width: 10px;
36+
height: 10px;
3637
margin: 3px;
3738
border-radius: 50%;
3839
background-color: var(--codice-editor-control-color);

‎src/editor/editor.test.tsx

+13-10
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe('Code', () => {
6060
height: 100%;
6161
overflow: hidden;
6262
}
63-
</style><div data-codice-editor-content="true"><div data-codice-code="true"><style>
63+
</style><div data-codice-editor-header="true"><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><span data-codice-editor-controls-placeholder="true"></span></div><div data-codice-editor-content="true"><div data-codice-code="true"><style>
6464
[data-codice-code] pre {
6565
white-space: pre-wrap;
6666
margin: 0;
@@ -79,6 +79,7 @@ describe('Code', () => {
7979
display: inline-block;
8080
flex: 1 0;
8181
text-align: center;
82+
line-height: 1;
8283
}
8384
[data-codice-editor-controls] {
8485
display: inline-flex;
@@ -93,13 +94,13 @@ describe('Code', () => {
9394
}
9495
[data-codice-editor-control] {
9596
display: flex;
96-
width: 11px;
97-
height: 11px;
97+
width: 10px;
98+
height: 10px;
9899
margin: 3px;
99100
border-radius: 50%;
100101
background-color: var(--codice-editor-control-color);
101102
}
102-
</style><div data-codice-editor-header="true"><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><span data-codice-editor-controls-placeholder="true"></span></div><pre data-codice-code-content="true"><code></code></pre></div><textarea></textarea></div></div>"
103+
</style><pre data-codice-code-content="true"><code></code></pre></div><textarea></textarea></div></div>"
103104
`)
104105
})
105106

@@ -160,7 +161,7 @@ describe('Code', () => {
160161
height: 100%;
161162
overflow: hidden;
162163
}
163-
</style><div data-codice-editor-header="true"><div data-codice-editor-title="true">file.js</div></div><div data-codice-editor-content="true"><div data-codice-code="true"><style>
164+
</style><div data-codice-editor-header="true"><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 data-codice-editor-title="true">file.js</div><span data-codice-editor-controls-placeholder="true"></span></div><div data-codice-editor-content="true"><div data-codice-code="true"><style>
164165
[data-codice-code] pre {
165166
white-space: pre-wrap;
166167
margin: 0;
@@ -179,6 +180,7 @@ describe('Code', () => {
179180
display: inline-block;
180181
flex: 1 0;
181182
text-align: center;
183+
line-height: 1;
182184
}
183185
[data-codice-editor-controls] {
184186
display: inline-flex;
@@ -193,13 +195,13 @@ describe('Code', () => {
193195
}
194196
[data-codice-editor-control] {
195197
display: flex;
196-
width: 11px;
197-
height: 11px;
198+
width: 10px;
199+
height: 10px;
198200
margin: 3px;
199201
border-radius: 50%;
200202
background-color: var(--codice-editor-control-color);
201203
}
202-
</style><div data-codice-editor-header="true"><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><span data-codice-editor-controls-placeholder="true"></span></div><pre data-codice-code-content="true"><code></code></pre></div><textarea></textarea></div></div>"
204+
</style><pre data-codice-code-content="true"><code></code></pre></div><textarea></textarea></div></div>"
203205
`)
204206
))
205207

@@ -279,6 +281,7 @@ describe('Code', () => {
279281
display: inline-block;
280282
flex: 1 0;
281283
text-align: center;
284+
line-height: 1;
282285
}
283286
[data-codice-editor-controls] {
284287
display: inline-flex;
@@ -293,8 +296,8 @@ describe('Code', () => {
293296
}
294297
[data-codice-editor-control] {
295298
display: flex;
296-
width: 11px;
297-
height: 11px;
299+
width: 10px;
300+
height: 10px;
298301
margin: 3px;
299302
border-radius: 50%;
300303
background-color: var(--codice-editor-control-color);

‎src/editor/editor.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,11 @@ const Editor = forwardRef(function EditorComponent(
5454

5555
return (
5656
<>
57-
{/* Display the header outside of the matched textarea and code */}
58-
<CodeHeader title={title} controls={controls} />
57+
{/* Display the header outside of the matched textarea and code, by default display controls */}
58+
<CodeHeader title={title} controls={controls ?? true} />
5959
<div data-codice-editor-content>
60-
<Code title={null} controls={controls ?? true}>
60+
{/* hide controls component inside Code to keep content matched with textarea */}
61+
<Code title={null} controls={false}>
6162
{output}
6263
</Code>
6364
<textarea ref={composeRefs(ref, textareaRef)} value={text} onChange={onInput} />

0 commit comments

Comments
 (0)