@haklex/rich-renderer-codeblock 0.0.20 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,330 +1 @@
1
- ._1pn9r4q0 {
2
- --rr-code-accent: #737373;
3
- --font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
4
- position: relative;
5
- margin: 1.5rem 0;
6
- border-radius: 0.5rem;
7
- overflow: hidden;
8
- font-size: 14px;
9
- }
10
- ._1pn9r4q1 {
11
- position: absolute;
12
- bottom: 0.75rem;
13
- right: 0.75rem;
14
- z-index: 2;
15
- display: flex;
16
- align-items: center;
17
- gap: 0.375rem;
18
- font-size: 0.875rem;
19
- opacity: 0.6;
20
- pointer-events: none;
21
- }
22
- ._1pn9r4q2 {
23
- display: inline-flex;
24
- flex-shrink: 0;
25
- }
26
- ._1pn9r4q2 svg {
27
- width: 100%;
28
- height: 100%;
29
- }
30
- ._1pn9r4q3 {
31
- appearance: none;
32
- position: absolute;
33
- right: 0.5rem;
34
- top: 0.5rem;
35
- z-index: 3;
36
- display: flex;
37
- align-items: center;
38
- justify-content: center;
39
- padding: 0.375rem;
40
- border-radius: 0.375rem;
41
- border: 1px solid color-mix(in srgb, var(--rr-code-accent) 5%, transparent);
42
- background: color-mix(in srgb, var(--rr-code-accent) 80%, transparent);
43
- color: white;
44
- cursor: pointer;
45
- opacity: 0;
46
- transition: opacity 0.2s ease;
47
- backdrop-filter: blur(8px);
48
- }
49
- ._1pn9r4q0:hover ._1pn9r4q3 {
50
- opacity: 1;
51
- }
52
- ._1pn9r4q4 {
53
- position: relative;
54
- background: color-mix(in srgb, var(--rr-code-accent) 5%, transparent);
55
- padding: 1rem 0;
56
- }
57
- ._1pn9r4q5 {
58
- position: relative;
59
- width: 100%;
60
- overflow: auto;
61
- }
62
- ._1pn9r4q6 {
63
- max-height: 50vh;
64
- overflow: hidden;
65
- }
66
- ._1pn9r4q7 {
67
- position: relative;
68
- overflow: auto;
69
- background-color: transparent !important;
70
- }
71
- ._1pn9r4q7 > .shikicode.output {
72
- position: static !important;
73
- inset: auto !important;
74
- }
75
- ._1pn9r4q8 > textarea.shikicode {
76
- display: none;
77
- }
78
- ._1pn9r4q9 {
79
- position: absolute;
80
- bottom: 0;
81
- left: 0;
82
- right: 0;
83
- display: flex;
84
- justify-content: center;
85
- padding: 0.5rem 0 0.75rem;
86
- background: linear-gradient(to bottom, transparent 0%, var(--bg, var(--rc-bg-secondary)) 80%);
87
- pointer-events: none;
88
- }
89
- ._1pn9r4qa {
90
- appearance: none;
91
- border: none;
92
- background: none;
93
- cursor: pointer;
94
- display: flex;
95
- align-items: center;
96
- gap: 0.5rem;
97
- font-size: 0.75rem;
98
- color: inherit;
99
- opacity: 0.7;
100
- pointer-events: auto;
101
- }
102
- ._1pn9r4qa:hover {
103
- opacity: 1;
104
- }
105
- ._1pn9r4q0 .shikicode.input, ._1pn9r4q0 .shikicode.output, ._1pn9r4q0 .shikicode.output code, ._1pn9r4q0 .shikicode.output .line, ._1pn9r4q0 .shikicode.output .line span {
106
- font-variant-ligatures: none;
107
- font-kerning: none;
108
- }
109
- ._1pn9r4q7 pre, ._1pn9r4q7 code, ._1pn9r4q7 .line, ._1pn9r4q7 .line span {
110
- font-family: inherit !important;
111
- }
112
- ._1pn9r4q0 pre {
113
- margin: 0 !important;
114
- padding: 0 !important;
115
- border-radius: 0;
116
- font-size: min(1em, 16px);
117
- }
118
- ._1pn9r4q0 pre code {
119
- display: flex;
120
- flex-direction: column;
121
- }
122
- ._1pn9r4q0 .shiki, ._1pn9r4q0 code, ._1pn9r4q0 pre {
123
- background: transparent !important;
124
- }
125
- ._1pn9r4q7:has(.shikicode.input.line-numbers) .shikicode.output .line::before {
126
- background-color: transparent !important;
127
- color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent) !important;
128
- width: 5em;
129
- padding-right: 2em;
130
- }
131
- ._1pn9r4q7:not(:has(.shikicode.input.line-numbers)) .shikicode.output .line::before {
132
- display: none;
133
- }
134
- ._1pn9r4q0 .line {
135
- display: block;
136
- padding: 0 1.25rem;
137
- }
138
- ._1pn9r4q0 .shikicode.input.line-numbers {
139
- padding-left: calc(5em + 1.25rem);
140
- }
141
- ._1pn9r4q0 .shikicode.input:not(.line-numbers) {
142
- padding-left: 1.25rem;
143
- }
144
- ._1pn9r4q0 .line > span:last-child {
145
- margin-right: 1.25rem;
146
- }
147
- ._1pn9r4q0 .line::after {
148
- content: ' ';
149
- }
150
- ._1pn9r4q0 .highlighted, ._1pn9r4q0 .diff {
151
- position: relative;
152
- overflow-wrap: break-word;
153
- }
154
- ._1pn9r4q0 .highlighted::before, ._1pn9r4q0 .diff::before {
155
- content: '';
156
- position: absolute;
157
- left: 0;
158
- top: 0;
159
- height: 100%;
160
- width: 2px;
161
- }
162
- ._1pn9r4q0 .highlighted {
163
- background: color-mix(in srgb, var(--rr-code-accent) 20%, transparent);
164
- }
165
- ._1pn9r4q0 .highlighted::before {
166
- background: var(--rr-code-accent);
167
- }
168
- ._1pn9r4q0 .diff.add {
169
- background: rgba(34, 197, 94, 0.15);
170
- }
171
- ._1pn9r4q0 .diff.add::before {
172
- background: #22c55e;
173
- }
174
- ._1pn9r4q0 .diff.add::after {
175
- content: ' +';
176
- position: absolute;
177
- left: 0;
178
- color: #22c55e;
179
- }
180
- ._1pn9r4q0 .diff.remove {
181
- background: rgba(239, 68, 68, 0.15);
182
- }
183
- ._1pn9r4q0 .diff.remove::before {
184
- background: #ef4444;
185
- }
186
- ._1pn9r4q0 .diff.remove::after {
187
- content: ' -';
188
- position: absolute;
189
- left: 0;
190
- color: #ef4444;
191
- }
192
- ._1pn9r4qb {
193
- counter-reset: shiki-line 0;
194
- }
195
- ._1pn9r4qb .line {
196
- counter-increment: shiki-line 1;
197
- }
198
- ._1pn9r4qb .line::before {
199
- content: counter(shiki-line);
200
- color: transparent;
201
- text-align: right;
202
- box-sizing: border-box;
203
- width: 2em;
204
- display: inline-block;
205
- position: sticky;
206
- left: 0;
207
- }
208
- ._1pn9r4qc .line::before {
209
- color: inherit;
210
- opacity: 0.4;
211
- width: 5em;
212
- padding-right: 2em;
213
- }
214
- ._1pn9r4q5 pre::-webkit-scrollbar-track {
215
- margin-left: 1rem;
216
- margin-right: var(--sr-margin, 0);
217
- }
218
- ._1pn9r4q5 pre::-webkit-scrollbar {
219
- background-color: transparent !important;
220
- }
221
- ._1pn9r4qd {
222
- font-family: var(--rc-font-mono);
223
- font-size: var(--rc-font-size-small);
224
- background-color: var(--rc-code-bg);
225
- border-radius: var(--rc-radius-md);
226
- overflow: hidden;
227
- margin: var(--rc-space-md) 0;
228
- border: 1px solid var(--rc-border);
229
- }
230
- ._1pn9r4qe {
231
- display: flex;
232
- align-items: center;
233
- justify-content: space-between;
234
- padding: var(--rc-space-sm) var(--rc-space-md);
235
- border-bottom: 1px solid var(--rc-border);
236
- font-size: var(--rc-font-size-small);
237
- color: var(--rc-text-secondary);
238
- user-select: none;
239
- }
240
- ._1pn9r4qf {
241
- font-family: var(--rc-font-mono);
242
- font-size: 0.85em;
243
- text-transform: uppercase;
244
- letter-spacing: 0.05em;
245
- }
246
- ._1pn9r4qg {
247
- appearance: none;
248
- border: none;
249
- background: none;
250
- color: var(--rc-text-secondary);
251
- cursor: pointer;
252
- padding: var(--rc-space-xs) var(--rc-space-sm);
253
- border-radius: var(--rc-radius-sm);
254
- font-family: var(--rc-font-family);
255
- font-size: var(--rc-font-size-small);
256
- line-height: 1;
257
- transition: color 0.15s ease, background-color 0.15s ease;
258
- }
259
- .rich-code-block {
260
- font-family: var(--rc-font-mono);
261
- font-size: var(--rc-font-size-small);
262
- background-color: var(--rc-code-bg);
263
- border-radius: var(--rc-radius-md);
264
- overflow: hidden;
265
- margin: var(--rc-space-md) 0;
266
- border: 1px solid var(--rc-border);
267
- }
268
- .rich-code-block pre {
269
- margin: 0;
270
- padding: var(--rc-space-md);
271
- overflow-x: auto;
272
- }
273
- .rich-code-block code {
274
- font-family: inherit;
275
- font-size: inherit;
276
- background: none;
277
- border: none;
278
- padding: 0;
279
- color: inherit;
280
- }
281
- .rich-code-block-header {
282
- display: flex;
283
- align-items: center;
284
- justify-content: space-between;
285
- padding: var(--rc-space-sm) var(--rc-space-md);
286
- border-bottom: 1px solid var(--rc-border);
287
- font-size: var(--rc-font-size-small);
288
- color: var(--rc-text-secondary);
289
- user-select: none;
290
- }
291
- .rich-code-block-lang {
292
- font-family: var(--rc-font-mono);
293
- font-size: 0.85em;
294
- text-transform: uppercase;
295
- letter-spacing: 0.05em;
296
- }
297
- .rich-code-block-copy {
298
- appearance: none;
299
- border: none;
300
- background: none;
301
- color: var(--rc-text-secondary);
302
- cursor: pointer;
303
- padding: var(--rc-space-xs) var(--rc-space-sm);
304
- border-radius: var(--rc-radius-sm);
305
- font-family: var(--rc-font-family);
306
- font-size: var(--rc-font-size-small);
307
- line-height: 1;
308
- transition: color 0.15s ease, background-color 0.15s ease;
309
- }
310
- .rich-code-block-copy:hover {
311
- color: var(--rc-text);
312
- background-color: var(--rc-bg-secondary);
313
- }
314
- .rich-code-block-numbered pre {
315
- counter-reset: line;
316
- }
317
- .rich-code-block-numbered .line {
318
- counter-increment: line;
319
- }
320
- .rich-code-block-numbered .line::before {
321
- content: counter(line);
322
- display: inline-block;
323
- width: 2.5em;
324
- margin-right: var(--rc-space-md);
325
- text-align: right;
326
- color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent) !important;
327
- opacity: 0.4;
328
- user-select: none;
329
- font-size: var(--rc-font-size-small);
330
- }
1
+ ._1pn9r4q0{--rr-code-accent: #737373;--font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;position:relative;margin:1.5rem 0;border-radius:.5rem;overflow:hidden;font-size:var(--rc-font-size-md)}._1pn9r4q1{position:absolute;bottom:.75rem;right:.75rem;z-index:2;display:flex;align-items:center;gap:.375rem;font-size:var(--rc-font-size-md);opacity:.6;pointer-events:none}._1pn9r4q2{display:inline-flex;flex-shrink:0}._1pn9r4q2 svg{width:100%;height:100%}._1pn9r4q3{appearance:none;position:absolute;right:.5rem;top:.5rem;z-index:3;display:flex;align-items:center;justify-content:center;padding:.375rem;border-radius:.375rem;border:1px solid color-mix(in srgb,var(--rr-code-accent) 5%,transparent);background:color-mix(in srgb,var(--rr-code-accent) 80%,transparent);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s ease;backdrop-filter:blur(8px)}._1pn9r4q0:hover ._1pn9r4q3{opacity:1}._1pn9r4q4{position:relative;background:color-mix(in srgb,var(--rr-code-accent) 5%,transparent);padding:1rem 0}._1pn9r4q5{position:relative;width:100%;overflow:auto}._1pn9r4q6{max-height:50vh;overflow:hidden}._1pn9r4q7{position:relative;overflow:auto;background-color:transparent!important}._1pn9r4q7>.shikicode.output{position:static!important;inset:auto!important}._1pn9r4q8>textarea.shikicode{display:none}._1pn9r4q9{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:.5rem 0 .75rem;background:linear-gradient(to bottom,transparent 0%,var(--bg, var(--rc-bg-secondary)) 80%);pointer-events:none}._1pn9r4qa{appearance:none;border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:var(--rc-font-size-xs);color:inherit;opacity:.7;pointer-events:auto}._1pn9r4qa:hover{opacity:1}._1pn9r4q0 .shikicode.input,._1pn9r4q0 .shikicode.output,._1pn9r4q0 .shikicode.output code,._1pn9r4q0 .shikicode.output .line,._1pn9r4q0 .shikicode.output .line span{font-variant-ligatures:none;font-kerning:none}._1pn9r4q7 pre,._1pn9r4q7 code,._1pn9r4q7 .line,._1pn9r4q7 .line span{font-family:inherit!important}._1pn9r4q0 pre{margin:0!important;padding:0!important;border-radius:0;font-size:1em}._1pn9r4q0 pre code{display:flex;flex-direction:column}._1pn9r4q0 .shiki,._1pn9r4q0 code,._1pn9r4q0 pre{background:transparent!important}._1pn9r4q7:has(.shikicode.input.line-numbers) .shikicode.output .line:before{background-color:transparent!important;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;width:5em;padding-right:2em}._1pn9r4q7:not(:has(.shikicode.input.line-numbers)) .shikicode.output .line:before{display:none}._1pn9r4q0 .line{display:block;padding:0 1.25rem}._1pn9r4q0 .shikicode.input.line-numbers{padding-left:calc(5em + 1.25rem)}._1pn9r4q0 .shikicode.input:not(.line-numbers){padding-left:1.25rem}._1pn9r4q0 .line>span:last-child{margin-right:1.25rem}._1pn9r4q0 .line:after{content:" "}._1pn9r4q0 .highlighted,._1pn9r4q0 .diff{position:relative;overflow-wrap:break-word}._1pn9r4q0 .highlighted:before,._1pn9r4q0 .diff:before{content:"";position:absolute;left:0;top:0;height:100%;width:2px}._1pn9r4q0 .highlighted{background:color-mix(in srgb,var(--rr-code-accent) 20%,transparent)}._1pn9r4q0 .highlighted:before{background:var(--rr-code-accent)}._1pn9r4q0 .diff.add{background:#22c55e26}._1pn9r4q0 .diff.add:before{background:#22c55e}._1pn9r4q0 .diff.add:after{content:" +";position:absolute;left:0;color:#22c55e}._1pn9r4q0 .diff.remove{background:#ef444426}._1pn9r4q0 .diff.remove:before{background:#ef4444}._1pn9r4q0 .diff.remove:after{content:" -";position:absolute;left:0;color:#ef4444}._1pn9r4qb{counter-reset:shiki-line 0}._1pn9r4qb .line{counter-increment:shiki-line 1}._1pn9r4qb .line:before{content:counter(shiki-line);color:transparent;text-align:right;box-sizing:border-box;width:2em;display:inline-block;position:sticky;left:0}._1pn9r4qc .line:before{color:inherit;opacity:.4;width:5em;padding-right:2em}._1pn9r4q5 pre::-webkit-scrollbar-track{margin-left:1rem;margin-right:var(--sr-margin, 0)}._1pn9r4q5 pre::-webkit-scrollbar{background-color:transparent!important}._1pn9r4qd{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);background-color:var(--rc-code-bg);border-radius:var(--rc-radius-md);overflow:hidden;margin:var(--rc-space-md) 0;border:1px solid var(--rc-border)}._1pn9r4qe{display:flex;align-items:center;justify-content:space-between;padding:var(--rc-space-sm) var(--rc-space-md);border-bottom:1px solid var(--rc-border);font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);user-select:none}._1pn9r4qf{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}._1pn9r4qg{appearance:none;border:none;background:none;color:var(--rc-text-secondary);cursor:pointer;padding:var(--rc-space-xs) var(--rc-space-sm);border-radius:var(--rc-radius-sm);font-family:var(--rc-font-family);font-size:var(--rc-font-size-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);background-color:var(--rc-code-bg);border-radius:var(--rc-radius-md);overflow:hidden;margin:var(--rc-space-md) 0;border:1px solid var(--rc-border)}.rich-code-block pre{margin:0;padding:var(--rc-space-md);overflow-x:auto}.rich-code-block code{font-family:inherit;font-size:inherit;background:none;border:none;padding:0;color:inherit}.rich-code-block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--rc-space-sm) var(--rc-space-md);border-bottom:1px solid var(--rc-border);font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);user-select:none}.rich-code-block-lang{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}.rich-code-block-copy{appearance:none;border:none;background:none;color:var(--rc-text-secondary);cursor:pointer;padding:var(--rc-space-xs) var(--rc-space-sm);border-radius:var(--rc-radius-sm);font-family:var(--rc-font-family);font-size:var(--rc-font-size-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block-copy:hover{color:var(--rc-text);background-color:var(--rc-bg-secondary)}.rich-code-block-numbered pre{counter-reset:line}.rich-code-block-numbered .line{counter-increment:line}.rich-code-block-numbered .line:before{content:counter(line);display:inline-block;width:2.5em;margin-right:var(--rc-space-md);text-align:right;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;opacity:.4;user-select:none;font-size:var(--rc-font-size-md)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderer-codeblock",
3
- "version": "0.0.20",
3
+ "version": "0.0.23",
4
4
  "description": "Code block renderer with Shiki syntax highlighting",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -33,8 +33,8 @@
33
33
  "lucide-react": "^0.574.0",
34
34
  "shiki": "^3.22.0",
35
35
  "shikicode": "^0.0.0",
36
- "@haklex/rich-editor": "0.0.20",
37
- "@haklex/rich-style-token": "0.0.20"
36
+ "@haklex/rich-editor": "0.0.23",
37
+ "@haklex/rich-style-token": "0.0.23"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/react": "^19.2.14",