@fsegurai/codemirror-theme-basic-dark 6.2.0-beta.3 → 6.2.0-beta.5
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.
- package/dist/index.cjs +209 -40
- package/dist/index.d.cts +19 -8
- package/dist/index.d.ts +19 -8
- package/dist/index.js +176 -7
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -3,7 +3,107 @@
|
|
|
3
3
|
var view = require('@codemirror/view');
|
|
4
4
|
var language = require('@codemirror/language');
|
|
5
5
|
var highlight = require('@lezer/highlight');
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
// Helper module for styling options
|
|
8
|
+
const generalContent = {
|
|
9
|
+
fontSize: '14px',
|
|
10
|
+
fontFamily: 'JetBrains Mono, Consolas, monospace',
|
|
11
|
+
lineHeight: '1.6',
|
|
12
|
+
};
|
|
13
|
+
const generalCursor = {
|
|
14
|
+
borderLeftWidth: '2px',
|
|
15
|
+
};
|
|
16
|
+
const generalDiff = {
|
|
17
|
+
insertedTextDecoration: 'none',
|
|
18
|
+
deletedTextDecoration: 'line-through',
|
|
19
|
+
insertedLinePadding: '1px 3px',
|
|
20
|
+
borderRadious: '3px'};
|
|
21
|
+
const generalGutter = {
|
|
22
|
+
border: 'none',
|
|
23
|
+
paddingRight: '8px',
|
|
24
|
+
fontSize: '0.9em',
|
|
25
|
+
fontWeight: '500',
|
|
26
|
+
};
|
|
27
|
+
const generalPanel = {
|
|
28
|
+
border: 'none',
|
|
29
|
+
borderRadius: '4px',
|
|
30
|
+
padding: '2px 10px',
|
|
31
|
+
};
|
|
32
|
+
const generalLine = {
|
|
33
|
+
borderRadius: '2px',
|
|
34
|
+
};
|
|
35
|
+
const generalMatching = {
|
|
36
|
+
borderRadius: '2px',
|
|
37
|
+
};
|
|
38
|
+
const generalPlaceholder = {
|
|
39
|
+
borderRadius: '4px',
|
|
40
|
+
padding: '0 5px',
|
|
41
|
+
margin: '0 2px',
|
|
42
|
+
};
|
|
43
|
+
const generalScroller = {
|
|
44
|
+
width: '12px',
|
|
45
|
+
height: '12px',
|
|
46
|
+
borderRadius: '6px',
|
|
47
|
+
};
|
|
48
|
+
const generalSearchField = {
|
|
49
|
+
borderRadius: '4px',
|
|
50
|
+
padding: '2px 6px',
|
|
51
|
+
};
|
|
52
|
+
const generalTooltip = {
|
|
53
|
+
borderRadius: '4px',
|
|
54
|
+
borderRadiusSelected: '3px',
|
|
55
|
+
lineHeight: '1.3',
|
|
56
|
+
padding: '4px 8px',
|
|
57
|
+
paddingRight: '8px',
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Function to apply merge revert styles for a theme
|
|
61
|
+
* @param styles Styles for the merge revert buttons
|
|
62
|
+
* @param styles.backgroundColor Background color of the revert area
|
|
63
|
+
* @param styles.borderColor Border color of the revert area
|
|
64
|
+
* @param styles.buttonColor Color of the revert buttons
|
|
65
|
+
* @param styles.buttonHoverColor Hover color of the revert buttons
|
|
66
|
+
*/
|
|
67
|
+
function applyMergeRevertStyles(styles) {
|
|
68
|
+
// Create a stylesheet
|
|
69
|
+
const styleEl = document.createElement('style');
|
|
70
|
+
styleEl.id = 'cm-merge-revert-styles';
|
|
71
|
+
// Define CSS with the theme-specific values
|
|
72
|
+
styleEl.textContent = `
|
|
73
|
+
.cm-merge-revert {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: flex-start;
|
|
78
|
+
padding: 4px;
|
|
79
|
+
background-color: ${styles.backgroundColor};
|
|
80
|
+
border-left: 1px solid ${styles.borderColor};
|
|
81
|
+
border-right: 1px solid ${styles.borderColor};
|
|
82
|
+
width: 32px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.cm-merge-revert button {
|
|
86
|
+
width: 100%;
|
|
87
|
+
height: auto;
|
|
88
|
+
background-color: transparent;
|
|
89
|
+
border: none;
|
|
90
|
+
color: ${styles.buttonColor};
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
margin: 0 auto;
|
|
93
|
+
font-size: 20px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.cm-merge-revert button:hover {
|
|
97
|
+
background-color: ${styles.buttonHoverColor};
|
|
98
|
+
}
|
|
99
|
+
`;
|
|
100
|
+
// Remove any existing merge styles
|
|
101
|
+
const existingStyle = document.getElementById('cm-merge-revert-styles');
|
|
102
|
+
if (existingStyle)
|
|
103
|
+
existingStyle.remove();
|
|
104
|
+
// Add the new styles
|
|
105
|
+
document.head.appendChild(styleEl);
|
|
106
|
+
}
|
|
7
107
|
|
|
8
108
|
/**
|
|
9
109
|
* Enhanced Basic Dark theme color palette
|
|
@@ -32,8 +132,13 @@ invalid = '#e06c75', // Error highlighting (consistent red)
|
|
|
32
132
|
darkBackground = '#252529', // Panel background (slightly darker)
|
|
33
133
|
selectionBackground = '#3a5991aa', // Selection background (semi-transparent blue)
|
|
34
134
|
highlightBackground = '#3a3d4166', // Active line background (subtle blue-gray)
|
|
35
|
-
tooltipBackground = '#2a2c31', // Tooltip background (darker than editor)
|
|
36
|
-
cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E
|
|
135
|
+
tooltipBackground = '#2a2c31', // Tooltip background (darker than the editor)
|
|
136
|
+
cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E,
|
|
137
|
+
// Diff/merge specific colors
|
|
138
|
+
addedBackground = '#1e462c50', // Dark green with transparency for insertions
|
|
139
|
+
removedBackground = '#5c1e2340', // Dark red with transparency for deletions
|
|
140
|
+
addedText = '#73c991', // Green for added text
|
|
141
|
+
removedText = '#f07178'; // Red for removed text
|
|
37
142
|
/**
|
|
38
143
|
* Enhanced editor theme styles for Basic Dark
|
|
39
144
|
*/
|
|
@@ -42,17 +147,17 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
42
147
|
'&': {
|
|
43
148
|
color: base01,
|
|
44
149
|
backgroundColor: base00,
|
|
45
|
-
fontSize:
|
|
46
|
-
fontFamily:
|
|
150
|
+
fontSize: generalContent.fontSize,
|
|
151
|
+
fontFamily: generalContent.fontFamily,
|
|
47
152
|
},
|
|
48
153
|
// Content and cursor
|
|
49
154
|
'.cm-content': {
|
|
50
155
|
caretColor: cursor,
|
|
51
|
-
lineHeight:
|
|
156
|
+
lineHeight: generalContent.lineHeight,
|
|
52
157
|
},
|
|
53
158
|
'.cm-cursor, .cm-dropCursor': {
|
|
54
159
|
borderLeftColor: cursor,
|
|
55
|
-
borderLeftWidth:
|
|
160
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
56
161
|
},
|
|
57
162
|
'.cm-fat-cursor': {
|
|
58
163
|
backgroundColor: `${cursor}99`,
|
|
@@ -72,7 +177,7 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
72
177
|
backgroundColor: '#4a74c480',
|
|
73
178
|
outline: `1px solid ${base02}`,
|
|
74
179
|
color: base01,
|
|
75
|
-
borderRadius:
|
|
180
|
+
borderRadius: generalSearchField.borderRadius,
|
|
76
181
|
'& span': {
|
|
77
182
|
color: base01,
|
|
78
183
|
},
|
|
@@ -80,15 +185,15 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
80
185
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
81
186
|
backgroundColor: '#5c88da90',
|
|
82
187
|
color: base01,
|
|
83
|
-
padding:
|
|
188
|
+
padding: generalSearchField.padding,
|
|
84
189
|
'& span': {
|
|
85
190
|
color: base01,
|
|
86
191
|
},
|
|
87
192
|
},
|
|
88
193
|
'.cm-search.cm-panel.cm-textfield': {
|
|
89
194
|
color: base05,
|
|
90
|
-
borderRadius:
|
|
91
|
-
padding:
|
|
195
|
+
borderRadius: generalSearchField.borderRadius,
|
|
196
|
+
padding: generalSearchField.padding,
|
|
92
197
|
},
|
|
93
198
|
// Panels
|
|
94
199
|
'.cm-panels': {
|
|
@@ -105,9 +210,9 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
105
210
|
'.cm-panel button': {
|
|
106
211
|
backgroundColor: darkBackground,
|
|
107
212
|
color: base05,
|
|
108
|
-
border:
|
|
109
|
-
borderRadius:
|
|
110
|
-
padding:
|
|
213
|
+
border: generalPanel.border,
|
|
214
|
+
borderRadius: generalPanel.borderRadius,
|
|
215
|
+
padding: generalPanel.padding,
|
|
111
216
|
},
|
|
112
217
|
'.cm-panel button:hover': {
|
|
113
218
|
backgroundColor: '#35373d',
|
|
@@ -115,27 +220,27 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
115
220
|
// Line highlighting
|
|
116
221
|
'.cm-activeLine': {
|
|
117
222
|
backgroundColor: highlightBackground,
|
|
118
|
-
borderRadius:
|
|
223
|
+
borderRadius: generalLine.borderRadius,
|
|
119
224
|
zIndex: 1,
|
|
120
225
|
},
|
|
121
226
|
// Gutters
|
|
122
227
|
'.cm-gutters': {
|
|
123
228
|
backgroundColor: darkBackground,
|
|
124
229
|
color: base06,
|
|
125
|
-
border:
|
|
230
|
+
border: generalGutter.border,
|
|
126
231
|
borderRight: '1px solid #35383d',
|
|
127
|
-
paddingRight:
|
|
232
|
+
paddingRight: generalGutter.paddingRight,
|
|
128
233
|
},
|
|
129
234
|
'.cm-activeLineGutter': {
|
|
130
235
|
backgroundColor: highlightBackground,
|
|
131
236
|
color: base03,
|
|
132
|
-
fontWeight:
|
|
237
|
+
fontWeight: generalGutter.fontWeight,
|
|
133
238
|
},
|
|
134
239
|
'.cm-lineNumbers': {
|
|
135
|
-
fontSize:
|
|
240
|
+
fontSize: generalGutter.fontSize,
|
|
136
241
|
},
|
|
137
242
|
'.cm-foldGutter': {
|
|
138
|
-
fontSize:
|
|
243
|
+
fontSize: generalGutter.fontSize,
|
|
139
244
|
},
|
|
140
245
|
'.cm-foldGutter .cm-gutterElement': {
|
|
141
246
|
color: base06,
|
|
@@ -144,12 +249,51 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
144
249
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
145
250
|
color: base01,
|
|
146
251
|
},
|
|
252
|
+
// Diff/Merge View Styles
|
|
253
|
+
// Inserted/Added Content
|
|
254
|
+
'.cm-insertedLine': {
|
|
255
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
256
|
+
backgroundColor: addedBackground,
|
|
257
|
+
color: addedText,
|
|
258
|
+
padding: generalDiff.insertedLinePadding,
|
|
259
|
+
borderRadius: generalDiff.borderRadious,
|
|
260
|
+
},
|
|
261
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
262
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
263
|
+
backgroundColor: `${addedBackground} !important`,
|
|
264
|
+
color: addedText,
|
|
265
|
+
padding: generalDiff.insertedLinePadding,
|
|
266
|
+
borderRadius: generalDiff.borderRadious,
|
|
267
|
+
border: `1px solid ${addedText}40`,
|
|
268
|
+
},
|
|
269
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
270
|
+
background: 'transparent !important',
|
|
271
|
+
},
|
|
272
|
+
// Deleted/Removed Content
|
|
273
|
+
'.cm-deletedLine': {
|
|
274
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
275
|
+
backgroundColor: removedBackground,
|
|
276
|
+
color: removedText,
|
|
277
|
+
padding: generalDiff.insertedLinePadding,
|
|
278
|
+
borderRadius: generalDiff.borderRadious,
|
|
279
|
+
},
|
|
280
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
281
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
282
|
+
backgroundColor: `${removedBackground} !important`,
|
|
283
|
+
color: removedText,
|
|
284
|
+
padding: generalDiff.insertedLinePadding,
|
|
285
|
+
borderRadius: generalDiff.borderRadious,
|
|
286
|
+
border: `1px solid ${removedText}40`,
|
|
287
|
+
},
|
|
288
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
289
|
+
background: 'transparent !important',
|
|
290
|
+
},
|
|
147
291
|
// Tooltips and autocomplete
|
|
148
292
|
'.cm-tooltip': {
|
|
149
293
|
backgroundColor: tooltipBackground,
|
|
150
294
|
border: '1px solid #3a3a3a',
|
|
151
|
-
borderRadius:
|
|
152
|
-
padding:
|
|
295
|
+
borderRadius: generalTooltip.borderRadius,
|
|
296
|
+
padding: generalTooltip.padding,
|
|
153
297
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
154
298
|
},
|
|
155
299
|
'.cm-tooltip-autocomplete': {
|
|
@@ -158,17 +302,17 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
158
302
|
border: 'none',
|
|
159
303
|
},
|
|
160
304
|
'& > ul > li': {
|
|
161
|
-
padding:
|
|
162
|
-
lineHeight:
|
|
305
|
+
padding: generalTooltip.padding,
|
|
306
|
+
lineHeight: generalTooltip.lineHeight,
|
|
163
307
|
},
|
|
164
308
|
'& > ul > li[aria-selected]': {
|
|
165
309
|
backgroundColor: selectionBackground,
|
|
166
310
|
color: base01,
|
|
167
|
-
borderRadius:
|
|
311
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
168
312
|
},
|
|
169
313
|
'& > ul > li > span.cm-completionIcon': {
|
|
170
314
|
color: base06,
|
|
171
|
-
paddingRight:
|
|
315
|
+
paddingRight: generalTooltip.paddingRight,
|
|
172
316
|
},
|
|
173
317
|
'& > ul > li > span.cm-completionDetail': {
|
|
174
318
|
color: base06,
|
|
@@ -205,27 +349,27 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
205
349
|
'.cm-matchingBracket': {
|
|
206
350
|
backgroundColor: activeBracketBg,
|
|
207
351
|
outline: `1px solid ${activeBracketBorder}60`,
|
|
208
|
-
borderRadius:
|
|
352
|
+
borderRadius: generalMatching.borderRadius,
|
|
209
353
|
},
|
|
210
354
|
'.cm-nonmatchingBracket': {
|
|
211
355
|
backgroundColor: '#e06c7540',
|
|
212
356
|
outline: `1px solid ${invalid}`,
|
|
213
|
-
borderRadius:
|
|
357
|
+
borderRadius: generalMatching.borderRadius,
|
|
214
358
|
},
|
|
215
359
|
// Selection matches
|
|
216
360
|
'.cm-selectionMatch': {
|
|
217
361
|
backgroundColor: '#4a74c440',
|
|
218
362
|
outline: `1px solid ${base02}50`,
|
|
219
|
-
borderRadius:
|
|
363
|
+
borderRadius: generalMatching.borderRadius,
|
|
220
364
|
},
|
|
221
365
|
// Fold placeholder
|
|
222
366
|
'.cm-foldPlaceholder': {
|
|
223
367
|
backgroundColor: 'transparent',
|
|
224
368
|
color: base02,
|
|
225
369
|
border: `1px dotted ${base02}70`,
|
|
226
|
-
borderRadius:
|
|
227
|
-
padding:
|
|
228
|
-
margin:
|
|
370
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
371
|
+
padding: generalPlaceholder.padding,
|
|
372
|
+
margin: generalPlaceholder.margin,
|
|
229
373
|
},
|
|
230
374
|
// Focus outline
|
|
231
375
|
'&.cm-focused': {
|
|
@@ -234,15 +378,15 @@ const basicDarkTheme = view.EditorView.theme({
|
|
|
234
378
|
},
|
|
235
379
|
// Scrollbars
|
|
236
380
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
237
|
-
width:
|
|
238
|
-
height:
|
|
381
|
+
width: generalScroller.width,
|
|
382
|
+
height: generalScroller.height,
|
|
239
383
|
},
|
|
240
384
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
241
385
|
background: darkBackground,
|
|
242
386
|
},
|
|
243
387
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
244
388
|
backgroundColor: '#444448',
|
|
245
|
-
borderRadius:
|
|
389
|
+
borderRadius: generalScroller.borderRadius,
|
|
246
390
|
border: `3px solid ${darkBackground}`,
|
|
247
391
|
},
|
|
248
392
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -301,10 +445,21 @@ const basicDarkHighlightStyle = language.HighlightStyle.define([
|
|
|
301
445
|
{ tag: [highlight.tags.attributeName], color: base0D },
|
|
302
446
|
// Markdown and text formatting
|
|
303
447
|
{ tag: [highlight.tags.heading], fontWeight: 'bold', color: base0A },
|
|
304
|
-
{
|
|
448
|
+
{
|
|
449
|
+
tag: [highlight.tags.strong],
|
|
450
|
+
fontWeight: 'bold',
|
|
451
|
+
color: base09,
|
|
452
|
+
textShadow: `0 0 2px ${base07}`,
|
|
453
|
+
},
|
|
305
454
|
{ tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base0D },
|
|
306
455
|
// Links and URLs
|
|
307
|
-
{
|
|
456
|
+
{
|
|
457
|
+
tag: [highlight.tags.link],
|
|
458
|
+
color: base0F,
|
|
459
|
+
fontWeight: '500',
|
|
460
|
+
textDecoration: 'underline',
|
|
461
|
+
textUnderlinePosition: 'under',
|
|
462
|
+
},
|
|
308
463
|
{
|
|
309
464
|
tag: [highlight.tags.url],
|
|
310
465
|
color: base0B,
|
|
@@ -312,7 +467,12 @@ const basicDarkHighlightStyle = language.HighlightStyle.define([
|
|
|
312
467
|
textUnderlineOffset: '2px',
|
|
313
468
|
},
|
|
314
469
|
// Special states
|
|
315
|
-
{
|
|
470
|
+
{
|
|
471
|
+
tag: [highlight.tags.invalid],
|
|
472
|
+
color: base01,
|
|
473
|
+
textDecoration: 'underline wavy',
|
|
474
|
+
borderBottom: `1px wavy ${invalid}`,
|
|
475
|
+
},
|
|
316
476
|
{ tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
|
|
317
477
|
// Enhanced syntax highlighting
|
|
318
478
|
{ tag: highlight.tags.constant(highlight.tags.name), color: base09 },
|
|
@@ -331,7 +491,16 @@ const basicDark = [
|
|
|
331
491
|
basicDarkTheme,
|
|
332
492
|
language.syntaxHighlighting(basicDarkHighlightStyle),
|
|
333
493
|
];
|
|
494
|
+
/**
|
|
495
|
+
* Basic Dark merge revert styles configuration
|
|
496
|
+
*/
|
|
497
|
+
const basicDarkMergeStyles = {
|
|
498
|
+
backgroundColor: darkBackground,
|
|
499
|
+
borderColor: '#3a3a3a',
|
|
500
|
+
buttonColor: base05,
|
|
501
|
+
buttonHoverColor: '#35373d',
|
|
502
|
+
};
|
|
334
503
|
|
|
504
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
335
505
|
exports.basicDark = basicDark;
|
|
336
|
-
exports.
|
|
337
|
-
exports.basicDarkTheme = basicDarkTheme;
|
|
506
|
+
exports.basicDarkMergeStyles = basicDarkMergeStyles;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,17 +1,28 @@
|
|
|
1
1
|
import { Extension } from '@codemirror/state';
|
|
2
|
-
import { HighlightStyle } from '@codemirror/language';
|
|
3
2
|
|
|
3
|
+
interface IMergeRevertStyles {
|
|
4
|
+
backgroundColor: string;
|
|
5
|
+
borderColor: string;
|
|
6
|
+
buttonColor: string;
|
|
7
|
+
buttonHoverColor: string;
|
|
8
|
+
}
|
|
4
9
|
/**
|
|
5
|
-
*
|
|
10
|
+
* Function to apply merge revert styles for a theme
|
|
11
|
+
* @param styles Styles for the merge revert buttons
|
|
12
|
+
* @param styles.backgroundColor Background color of the revert area
|
|
13
|
+
* @param styles.borderColor Border color of the revert area
|
|
14
|
+
* @param styles.buttonColor Color of the revert buttons
|
|
15
|
+
* @param styles.buttonHoverColor Hover color of the revert buttons
|
|
6
16
|
*/
|
|
7
|
-
declare
|
|
8
|
-
|
|
9
|
-
* Enhanced syntax highlighting for Basic Dark theme
|
|
10
|
-
*/
|
|
11
|
-
declare const basicDarkHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Basic Dark theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const basicDark: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Basic Dark merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const basicDarkMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, basicDark, basicDarkMergeStyles };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,28 @@
|
|
|
1
1
|
import { Extension } from '@codemirror/state';
|
|
2
|
-
import { HighlightStyle } from '@codemirror/language';
|
|
3
2
|
|
|
3
|
+
interface IMergeRevertStyles {
|
|
4
|
+
backgroundColor: string;
|
|
5
|
+
borderColor: string;
|
|
6
|
+
buttonColor: string;
|
|
7
|
+
buttonHoverColor: string;
|
|
8
|
+
}
|
|
4
9
|
/**
|
|
5
|
-
*
|
|
10
|
+
* Function to apply merge revert styles for a theme
|
|
11
|
+
* @param styles Styles for the merge revert buttons
|
|
12
|
+
* @param styles.backgroundColor Background color of the revert area
|
|
13
|
+
* @param styles.borderColor Border color of the revert area
|
|
14
|
+
* @param styles.buttonColor Color of the revert buttons
|
|
15
|
+
* @param styles.buttonHoverColor Hover color of the revert buttons
|
|
6
16
|
*/
|
|
7
|
-
declare
|
|
8
|
-
|
|
9
|
-
* Enhanced syntax highlighting for Basic Dark theme
|
|
10
|
-
*/
|
|
11
|
-
declare const basicDarkHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Basic Dark theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const basicDark: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Basic Dark merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const basicDarkMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, basicDark, basicDarkMergeStyles };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,107 @@
|
|
|
1
1
|
import { EditorView } from '@codemirror/view';
|
|
2
2
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
|
3
3
|
import { tags } from '@lezer/highlight';
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
// Helper module for styling options
|
|
6
|
+
const generalContent = {
|
|
7
|
+
fontSize: '14px',
|
|
8
|
+
fontFamily: 'JetBrains Mono, Consolas, monospace',
|
|
9
|
+
lineHeight: '1.6',
|
|
10
|
+
};
|
|
11
|
+
const generalCursor = {
|
|
12
|
+
borderLeftWidth: '2px',
|
|
13
|
+
};
|
|
14
|
+
const generalDiff = {
|
|
15
|
+
insertedTextDecoration: 'none',
|
|
16
|
+
deletedTextDecoration: 'line-through',
|
|
17
|
+
insertedLinePadding: '1px 3px',
|
|
18
|
+
borderRadious: '3px'};
|
|
19
|
+
const generalGutter = {
|
|
20
|
+
border: 'none',
|
|
21
|
+
paddingRight: '8px',
|
|
22
|
+
fontSize: '0.9em',
|
|
23
|
+
fontWeight: '500',
|
|
24
|
+
};
|
|
25
|
+
const generalPanel = {
|
|
26
|
+
border: 'none',
|
|
27
|
+
borderRadius: '4px',
|
|
28
|
+
padding: '2px 10px',
|
|
29
|
+
};
|
|
30
|
+
const generalLine = {
|
|
31
|
+
borderRadius: '2px',
|
|
32
|
+
};
|
|
33
|
+
const generalMatching = {
|
|
34
|
+
borderRadius: '2px',
|
|
35
|
+
};
|
|
36
|
+
const generalPlaceholder = {
|
|
37
|
+
borderRadius: '4px',
|
|
38
|
+
padding: '0 5px',
|
|
39
|
+
margin: '0 2px',
|
|
40
|
+
};
|
|
41
|
+
const generalScroller = {
|
|
42
|
+
width: '12px',
|
|
43
|
+
height: '12px',
|
|
44
|
+
borderRadius: '6px',
|
|
45
|
+
};
|
|
46
|
+
const generalSearchField = {
|
|
47
|
+
borderRadius: '4px',
|
|
48
|
+
padding: '2px 6px',
|
|
49
|
+
};
|
|
50
|
+
const generalTooltip = {
|
|
51
|
+
borderRadius: '4px',
|
|
52
|
+
borderRadiusSelected: '3px',
|
|
53
|
+
lineHeight: '1.3',
|
|
54
|
+
padding: '4px 8px',
|
|
55
|
+
paddingRight: '8px',
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Function to apply merge revert styles for a theme
|
|
59
|
+
* @param styles Styles for the merge revert buttons
|
|
60
|
+
* @param styles.backgroundColor Background color of the revert area
|
|
61
|
+
* @param styles.borderColor Border color of the revert area
|
|
62
|
+
* @param styles.buttonColor Color of the revert buttons
|
|
63
|
+
* @param styles.buttonHoverColor Hover color of the revert buttons
|
|
64
|
+
*/
|
|
65
|
+
function applyMergeRevertStyles(styles) {
|
|
66
|
+
// Create a stylesheet
|
|
67
|
+
const styleEl = document.createElement('style');
|
|
68
|
+
styleEl.id = 'cm-merge-revert-styles';
|
|
69
|
+
// Define CSS with the theme-specific values
|
|
70
|
+
styleEl.textContent = `
|
|
71
|
+
.cm-merge-revert {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: flex-start;
|
|
76
|
+
padding: 4px;
|
|
77
|
+
background-color: ${styles.backgroundColor};
|
|
78
|
+
border-left: 1px solid ${styles.borderColor};
|
|
79
|
+
border-right: 1px solid ${styles.borderColor};
|
|
80
|
+
width: 32px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.cm-merge-revert button {
|
|
84
|
+
width: 100%;
|
|
85
|
+
height: auto;
|
|
86
|
+
background-color: transparent;
|
|
87
|
+
border: none;
|
|
88
|
+
color: ${styles.buttonColor};
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
margin: 0 auto;
|
|
91
|
+
font-size: 20px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.cm-merge-revert button:hover {
|
|
95
|
+
background-color: ${styles.buttonHoverColor};
|
|
96
|
+
}
|
|
97
|
+
`;
|
|
98
|
+
// Remove any existing merge styles
|
|
99
|
+
const existingStyle = document.getElementById('cm-merge-revert-styles');
|
|
100
|
+
if (existingStyle)
|
|
101
|
+
existingStyle.remove();
|
|
102
|
+
// Add the new styles
|
|
103
|
+
document.head.appendChild(styleEl);
|
|
104
|
+
}
|
|
5
105
|
|
|
6
106
|
/**
|
|
7
107
|
* Enhanced Basic Dark theme color palette
|
|
@@ -30,8 +130,13 @@ invalid = '#e06c75', // Error highlighting (consistent red)
|
|
|
30
130
|
darkBackground = '#252529', // Panel background (slightly darker)
|
|
31
131
|
selectionBackground = '#3a5991aa', // Selection background (semi-transparent blue)
|
|
32
132
|
highlightBackground = '#3a3d4166', // Active line background (subtle blue-gray)
|
|
33
|
-
tooltipBackground = '#2a2c31', // Tooltip background (darker than editor)
|
|
34
|
-
cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E
|
|
133
|
+
tooltipBackground = '#2a2c31', // Tooltip background (darker than the editor)
|
|
134
|
+
cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E,
|
|
135
|
+
// Diff/merge specific colors
|
|
136
|
+
addedBackground = '#1e462c50', // Dark green with transparency for insertions
|
|
137
|
+
removedBackground = '#5c1e2340', // Dark red with transparency for deletions
|
|
138
|
+
addedText = '#73c991', // Green for added text
|
|
139
|
+
removedText = '#f07178'; // Red for removed text
|
|
35
140
|
/**
|
|
36
141
|
* Enhanced editor theme styles for Basic Dark
|
|
37
142
|
*/
|
|
@@ -142,6 +247,45 @@ const basicDarkTheme = /*@__PURE__*/EditorView.theme({
|
|
|
142
247
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
143
248
|
color: base01,
|
|
144
249
|
},
|
|
250
|
+
// Diff/Merge View Styles
|
|
251
|
+
// Inserted/Added Content
|
|
252
|
+
'.cm-insertedLine': {
|
|
253
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
254
|
+
backgroundColor: addedBackground,
|
|
255
|
+
color: addedText,
|
|
256
|
+
padding: generalDiff.insertedLinePadding,
|
|
257
|
+
borderRadius: generalDiff.borderRadious,
|
|
258
|
+
},
|
|
259
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
260
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
261
|
+
backgroundColor: `${addedBackground} !important`,
|
|
262
|
+
color: addedText,
|
|
263
|
+
padding: generalDiff.insertedLinePadding,
|
|
264
|
+
borderRadius: generalDiff.borderRadious,
|
|
265
|
+
border: `1px solid ${addedText}40`,
|
|
266
|
+
},
|
|
267
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
268
|
+
background: 'transparent !important',
|
|
269
|
+
},
|
|
270
|
+
// Deleted/Removed Content
|
|
271
|
+
'.cm-deletedLine': {
|
|
272
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
273
|
+
backgroundColor: removedBackground,
|
|
274
|
+
color: removedText,
|
|
275
|
+
padding: generalDiff.insertedLinePadding,
|
|
276
|
+
borderRadius: generalDiff.borderRadious,
|
|
277
|
+
},
|
|
278
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
279
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
280
|
+
backgroundColor: `${removedBackground} !important`,
|
|
281
|
+
color: removedText,
|
|
282
|
+
padding: generalDiff.insertedLinePadding,
|
|
283
|
+
borderRadius: generalDiff.borderRadious,
|
|
284
|
+
border: `1px solid ${removedText}40`,
|
|
285
|
+
},
|
|
286
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
287
|
+
background: 'transparent !important',
|
|
288
|
+
},
|
|
145
289
|
// Tooltips and autocomplete
|
|
146
290
|
'.cm-tooltip': {
|
|
147
291
|
backgroundColor: tooltipBackground,
|
|
@@ -299,10 +443,21 @@ const basicDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
299
443
|
{ tag: [tags.attributeName], color: base0D },
|
|
300
444
|
// Markdown and text formatting
|
|
301
445
|
{ tag: [tags.heading], fontWeight: 'bold', color: base0A },
|
|
302
|
-
{
|
|
446
|
+
{
|
|
447
|
+
tag: [tags.strong],
|
|
448
|
+
fontWeight: 'bold',
|
|
449
|
+
color: base09,
|
|
450
|
+
textShadow: `0 0 2px ${base07}`,
|
|
451
|
+
},
|
|
303
452
|
{ tag: [tags.emphasis], fontStyle: 'italic', color: base0D },
|
|
304
453
|
// Links and URLs
|
|
305
|
-
{
|
|
454
|
+
{
|
|
455
|
+
tag: [tags.link],
|
|
456
|
+
color: base0F,
|
|
457
|
+
fontWeight: '500',
|
|
458
|
+
textDecoration: 'underline',
|
|
459
|
+
textUnderlinePosition: 'under',
|
|
460
|
+
},
|
|
306
461
|
{
|
|
307
462
|
tag: [tags.url],
|
|
308
463
|
color: base0B,
|
|
@@ -310,7 +465,12 @@ const basicDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
310
465
|
textUnderlineOffset: '2px',
|
|
311
466
|
},
|
|
312
467
|
// Special states
|
|
313
|
-
{
|
|
468
|
+
{
|
|
469
|
+
tag: [tags.invalid],
|
|
470
|
+
color: base01,
|
|
471
|
+
textDecoration: 'underline wavy',
|
|
472
|
+
borderBottom: `1px wavy ${invalid}`,
|
|
473
|
+
},
|
|
314
474
|
{ tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
|
|
315
475
|
// Enhanced syntax highlighting
|
|
316
476
|
{ tag: /*@__PURE__*/tags.constant(tags.name), color: base09 },
|
|
@@ -329,5 +489,14 @@ const basicDark = [
|
|
|
329
489
|
basicDarkTheme,
|
|
330
490
|
/*@__PURE__*/syntaxHighlighting(basicDarkHighlightStyle),
|
|
331
491
|
];
|
|
492
|
+
/**
|
|
493
|
+
* Basic Dark merge revert styles configuration
|
|
494
|
+
*/
|
|
495
|
+
const basicDarkMergeStyles = {
|
|
496
|
+
backgroundColor: darkBackground,
|
|
497
|
+
borderColor: '#3a3a3a',
|
|
498
|
+
buttonColor: base05,
|
|
499
|
+
buttonHoverColor: '#35373d',
|
|
500
|
+
};
|
|
332
501
|
|
|
333
|
-
export {
|
|
502
|
+
export { applyMergeRevertStyles, basicDark, basicDarkMergeStyles };
|
package/package.json
CHANGED