@fsegurai/codemirror-theme-forest 6.2.0-beta.4 → 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 +188 -35
- package/dist/index.d.cts +19 -8
- package/dist/index.d.ts +19 -8
- package/dist/index.js +155 -2
- package/package.json +2 -3
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 Forest theme color palette
|
|
@@ -39,6 +139,11 @@ const selectionMatch = '#5d482faa'; // Selection match - amber forest light
|
|
|
39
139
|
const lineNumbers = '#607d8b90'; // Line numbers - faded tree bark
|
|
40
140
|
const activeBracketBg = '#2c5a3a80'; // Active bracket - forest green
|
|
41
141
|
const activeBracketBorder = base0A; // Active bracket border - golden sunlight
|
|
142
|
+
// Diff/merge specific colors
|
|
143
|
+
const addedBackground = '#28513a80', // Forest green with transparency for insertions
|
|
144
|
+
removedBackground = '#763c3c70', // Deep red with transparency for deletions
|
|
145
|
+
addedText = '#9ccc65', // Moss green for added text
|
|
146
|
+
removedText = '#ef5350'; // Berry red for removed text
|
|
42
147
|
/**
|
|
43
148
|
* Enhanced editor theme styles for Forest
|
|
44
149
|
*/
|
|
@@ -47,17 +152,17 @@ const forestTheme = view.EditorView.theme({
|
|
|
47
152
|
'&': {
|
|
48
153
|
color: base01,
|
|
49
154
|
backgroundColor: base00,
|
|
50
|
-
fontSize:
|
|
51
|
-
fontFamily:
|
|
155
|
+
fontSize: generalContent.fontSize,
|
|
156
|
+
fontFamily: generalContent.fontFamily,
|
|
52
157
|
},
|
|
53
158
|
// Content and cursor
|
|
54
159
|
'.cm-content': {
|
|
55
160
|
caretColor: cursor,
|
|
56
|
-
lineHeight:
|
|
161
|
+
lineHeight: generalContent.lineHeight,
|
|
57
162
|
},
|
|
58
163
|
'.cm-cursor, .cm-dropCursor': {
|
|
59
164
|
borderLeftColor: cursor,
|
|
60
|
-
borderLeftWidth:
|
|
165
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
61
166
|
},
|
|
62
167
|
'.cm-fat-cursor': {
|
|
63
168
|
backgroundColor: `${cursor}99`,
|
|
@@ -77,7 +182,7 @@ const forestTheme = view.EditorView.theme({
|
|
|
77
182
|
backgroundColor: '#4d653b80',
|
|
78
183
|
outline: `1px solid ${base0A}90`,
|
|
79
184
|
color: base01,
|
|
80
|
-
borderRadius:
|
|
185
|
+
borderRadius: generalSearchField.borderRadius,
|
|
81
186
|
'& span': {
|
|
82
187
|
color: base01,
|
|
83
188
|
},
|
|
@@ -85,15 +190,15 @@ const forestTheme = view.EditorView.theme({
|
|
|
85
190
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
86
191
|
backgroundColor: '#42855c',
|
|
87
192
|
color: base01,
|
|
88
|
-
padding:
|
|
193
|
+
padding: generalSearchField.padding,
|
|
89
194
|
'& span': {
|
|
90
195
|
color: base01,
|
|
91
196
|
},
|
|
92
197
|
},
|
|
93
198
|
'.cm-search.cm-panel.cm-textfield': {
|
|
94
199
|
color: base01,
|
|
95
|
-
borderRadius:
|
|
96
|
-
padding:
|
|
200
|
+
borderRadius: generalSearchField.borderRadius,
|
|
201
|
+
padding: generalSearchField.padding,
|
|
97
202
|
},
|
|
98
203
|
// Panels
|
|
99
204
|
'.cm-panels': {
|
|
@@ -110,9 +215,9 @@ const forestTheme = view.EditorView.theme({
|
|
|
110
215
|
'.cm-panel button': {
|
|
111
216
|
backgroundColor: darkBackground,
|
|
112
217
|
color: base01,
|
|
113
|
-
border:
|
|
114
|
-
borderRadius:
|
|
115
|
-
padding:
|
|
218
|
+
border: generalPanel.border,
|
|
219
|
+
borderRadius: generalPanel.borderRadius,
|
|
220
|
+
padding: generalPanel.padding,
|
|
116
221
|
},
|
|
117
222
|
'.cm-panel button:hover': {
|
|
118
223
|
backgroundColor: '#2d3d47',
|
|
@@ -120,27 +225,27 @@ const forestTheme = view.EditorView.theme({
|
|
|
120
225
|
// Line highlighting
|
|
121
226
|
'.cm-activeLine': {
|
|
122
227
|
backgroundColor: highlightBackground,
|
|
123
|
-
borderRadius:
|
|
228
|
+
borderRadius: generalLine.borderRadius,
|
|
124
229
|
zIndex: 1,
|
|
125
230
|
},
|
|
126
231
|
// Gutters
|
|
127
232
|
'.cm-gutters': {
|
|
128
233
|
backgroundColor: darkBackground,
|
|
129
234
|
color: lineNumbers,
|
|
130
|
-
border:
|
|
235
|
+
border: generalGutter.border,
|
|
131
236
|
borderRight: '1px solid #3e505980',
|
|
132
|
-
paddingRight:
|
|
237
|
+
paddingRight: generalGutter.paddingRight,
|
|
133
238
|
},
|
|
134
239
|
'.cm-activeLineGutter': {
|
|
135
240
|
backgroundColor: highlightBackground,
|
|
136
241
|
color: base01,
|
|
137
|
-
fontWeight:
|
|
242
|
+
fontWeight: generalGutter.fontWeight,
|
|
138
243
|
},
|
|
139
244
|
'.cm-lineNumbers': {
|
|
140
|
-
fontSize:
|
|
245
|
+
fontSize: generalGutter.fontSize,
|
|
141
246
|
},
|
|
142
247
|
'.cm-foldGutter': {
|
|
143
|
-
fontSize:
|
|
248
|
+
fontSize: generalGutter.fontSize,
|
|
144
249
|
},
|
|
145
250
|
'.cm-foldGutter .cm-gutterElement': {
|
|
146
251
|
color: lineNumbers,
|
|
@@ -149,12 +254,51 @@ const forestTheme = view.EditorView.theme({
|
|
|
149
254
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
150
255
|
color: base01,
|
|
151
256
|
},
|
|
257
|
+
// Diff/Merge View Styles
|
|
258
|
+
// Inserted/Added Content
|
|
259
|
+
'.cm-insertedLine': {
|
|
260
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
261
|
+
backgroundColor: addedBackground,
|
|
262
|
+
color: addedText,
|
|
263
|
+
padding: generalDiff.insertedLinePadding,
|
|
264
|
+
borderRadius: generalDiff.borderRadious,
|
|
265
|
+
},
|
|
266
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
267
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
268
|
+
backgroundColor: `${addedBackground} !important`,
|
|
269
|
+
color: addedText,
|
|
270
|
+
padding: generalDiff.insertedLinePadding,
|
|
271
|
+
borderRadius: generalDiff.borderRadious,
|
|
272
|
+
border: `1px solid ${addedText}40`,
|
|
273
|
+
},
|
|
274
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
275
|
+
background: 'transparent !important',
|
|
276
|
+
},
|
|
277
|
+
// Deleted/Removed Content
|
|
278
|
+
'.cm-deletedLine': {
|
|
279
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
280
|
+
backgroundColor: removedBackground,
|
|
281
|
+
color: removedText,
|
|
282
|
+
padding: generalDiff.insertedLinePadding,
|
|
283
|
+
borderRadius: generalDiff.borderRadious,
|
|
284
|
+
},
|
|
285
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
286
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
287
|
+
backgroundColor: `${removedBackground} !important`,
|
|
288
|
+
color: removedText,
|
|
289
|
+
padding: generalDiff.insertedLinePadding,
|
|
290
|
+
borderRadius: generalDiff.borderRadious,
|
|
291
|
+
border: `1px solid ${removedText}40`,
|
|
292
|
+
},
|
|
293
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
294
|
+
background: 'transparent !important',
|
|
295
|
+
},
|
|
152
296
|
// Tooltips and autocomplete
|
|
153
297
|
'.cm-tooltip': {
|
|
154
298
|
backgroundColor: tooltipBackground,
|
|
155
299
|
border: '1px solid #3e5059',
|
|
156
|
-
borderRadius:
|
|
157
|
-
padding:
|
|
300
|
+
borderRadius: generalTooltip.borderRadius,
|
|
301
|
+
padding: generalTooltip.padding,
|
|
158
302
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
159
303
|
},
|
|
160
304
|
'.cm-tooltip-autocomplete': {
|
|
@@ -163,17 +307,17 @@ const forestTheme = view.EditorView.theme({
|
|
|
163
307
|
border: 'none',
|
|
164
308
|
},
|
|
165
309
|
'& > ul > li': {
|
|
166
|
-
padding:
|
|
167
|
-
lineHeight:
|
|
310
|
+
padding: generalTooltip.padding,
|
|
311
|
+
lineHeight: generalTooltip.lineHeight,
|
|
168
312
|
},
|
|
169
313
|
'& > ul > li[aria-selected]': {
|
|
170
314
|
backgroundColor: selection,
|
|
171
315
|
color: base01,
|
|
172
|
-
borderRadius:
|
|
316
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
173
317
|
},
|
|
174
318
|
'& > ul > li > span.cm-completionIcon': {
|
|
175
319
|
color: base03,
|
|
176
|
-
paddingRight:
|
|
320
|
+
paddingRight: generalTooltip.paddingRight,
|
|
177
321
|
},
|
|
178
322
|
'& > ul > li > span.cm-completionDetail': {
|
|
179
323
|
color: base03,
|
|
@@ -210,27 +354,27 @@ const forestTheme = view.EditorView.theme({
|
|
|
210
354
|
'.cm-matchingBracket': {
|
|
211
355
|
backgroundColor: activeBracketBg,
|
|
212
356
|
outline: `1px solid ${activeBracketBorder}80`,
|
|
213
|
-
borderRadius:
|
|
357
|
+
borderRadius: generalMatching.borderRadius,
|
|
214
358
|
},
|
|
215
359
|
'.cm-nonmatchingBracket': {
|
|
216
360
|
backgroundColor: '#5d482f80',
|
|
217
361
|
outline: `1px solid ${invalid}80`,
|
|
218
|
-
borderRadius:
|
|
362
|
+
borderRadius: generalMatching.borderRadius,
|
|
219
363
|
},
|
|
220
364
|
// Selection matches
|
|
221
365
|
'.cm-selectionMatch': {
|
|
222
366
|
backgroundColor: selectionMatch,
|
|
223
367
|
outline: `1px solid ${base0A}40`,
|
|
224
|
-
borderRadius:
|
|
368
|
+
borderRadius: generalMatching.borderRadius,
|
|
225
369
|
},
|
|
226
370
|
// Fold placeholder
|
|
227
371
|
'.cm-foldPlaceholder': {
|
|
228
372
|
backgroundColor: 'transparent',
|
|
229
373
|
color: base03,
|
|
230
374
|
border: `1px dotted ${base0A}70`,
|
|
231
|
-
borderRadius:
|
|
232
|
-
padding:
|
|
233
|
-
margin:
|
|
375
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
376
|
+
padding: generalPlaceholder.padding,
|
|
377
|
+
margin: generalPlaceholder.margin,
|
|
234
378
|
},
|
|
235
379
|
// Focus outline
|
|
236
380
|
'&.cm-focused': {
|
|
@@ -239,15 +383,15 @@ const forestTheme = view.EditorView.theme({
|
|
|
239
383
|
},
|
|
240
384
|
// Scrollbars
|
|
241
385
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
242
|
-
width:
|
|
243
|
-
height:
|
|
386
|
+
width: generalScroller.width,
|
|
387
|
+
height: generalScroller.height,
|
|
244
388
|
},
|
|
245
389
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
246
390
|
background: darkBackground,
|
|
247
391
|
},
|
|
248
392
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
249
393
|
backgroundColor: '#3e5059',
|
|
250
|
-
borderRadius:
|
|
394
|
+
borderRadius: generalScroller.borderRadius,
|
|
251
395
|
border: `3px solid ${darkBackground}`,
|
|
252
396
|
},
|
|
253
397
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -340,7 +484,16 @@ const forest = [
|
|
|
340
484
|
forestTheme,
|
|
341
485
|
language.syntaxHighlighting(forestHighlightStyle),
|
|
342
486
|
];
|
|
487
|
+
/**
|
|
488
|
+
* Forest merge revert styles configuration
|
|
489
|
+
*/
|
|
490
|
+
const forestMergeStyles = {
|
|
491
|
+
backgroundColor: darkBackground,
|
|
492
|
+
borderColor: '#3e5059',
|
|
493
|
+
buttonColor: base01,
|
|
494
|
+
buttonHoverColor: '#2d3d47',
|
|
495
|
+
};
|
|
343
496
|
|
|
497
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
344
498
|
exports.forest = forest;
|
|
345
|
-
exports.
|
|
346
|
-
exports.forestTheme = forestTheme;
|
|
499
|
+
exports.forestMergeStyles = forestMergeStyles;
|
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 Forest theme
|
|
10
|
-
*/
|
|
11
|
-
declare const forestHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Forest theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const forest: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Forest merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const forestMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, forest, forestMergeStyles };
|
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 Forest theme
|
|
10
|
-
*/
|
|
11
|
-
declare const forestHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Forest theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const forest: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Forest merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const forestMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, forest, forestMergeStyles };
|
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 Forest theme color palette
|
|
@@ -37,6 +137,11 @@ const selectionMatch = '#5d482faa'; // Selection match - amber forest light
|
|
|
37
137
|
const lineNumbers = '#607d8b90'; // Line numbers - faded tree bark
|
|
38
138
|
const activeBracketBg = '#2c5a3a80'; // Active bracket - forest green
|
|
39
139
|
const activeBracketBorder = base0A; // Active bracket border - golden sunlight
|
|
140
|
+
// Diff/merge specific colors
|
|
141
|
+
const addedBackground = '#28513a80', // Forest green with transparency for insertions
|
|
142
|
+
removedBackground = '#763c3c70', // Deep red with transparency for deletions
|
|
143
|
+
addedText = '#9ccc65', // Moss green for added text
|
|
144
|
+
removedText = '#ef5350'; // Berry red for removed text
|
|
40
145
|
/**
|
|
41
146
|
* Enhanced editor theme styles for Forest
|
|
42
147
|
*/
|
|
@@ -147,6 +252,45 @@ const forestTheme = /*@__PURE__*/EditorView.theme({
|
|
|
147
252
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
148
253
|
color: base01,
|
|
149
254
|
},
|
|
255
|
+
// Diff/Merge View Styles
|
|
256
|
+
// Inserted/Added Content
|
|
257
|
+
'.cm-insertedLine': {
|
|
258
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
259
|
+
backgroundColor: addedBackground,
|
|
260
|
+
color: addedText,
|
|
261
|
+
padding: generalDiff.insertedLinePadding,
|
|
262
|
+
borderRadius: generalDiff.borderRadious,
|
|
263
|
+
},
|
|
264
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
265
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
266
|
+
backgroundColor: `${addedBackground} !important`,
|
|
267
|
+
color: addedText,
|
|
268
|
+
padding: generalDiff.insertedLinePadding,
|
|
269
|
+
borderRadius: generalDiff.borderRadious,
|
|
270
|
+
border: `1px solid ${addedText}40`,
|
|
271
|
+
},
|
|
272
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
273
|
+
background: 'transparent !important',
|
|
274
|
+
},
|
|
275
|
+
// Deleted/Removed Content
|
|
276
|
+
'.cm-deletedLine': {
|
|
277
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
278
|
+
backgroundColor: removedBackground,
|
|
279
|
+
color: removedText,
|
|
280
|
+
padding: generalDiff.insertedLinePadding,
|
|
281
|
+
borderRadius: generalDiff.borderRadious,
|
|
282
|
+
},
|
|
283
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
284
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
285
|
+
backgroundColor: `${removedBackground} !important`,
|
|
286
|
+
color: removedText,
|
|
287
|
+
padding: generalDiff.insertedLinePadding,
|
|
288
|
+
borderRadius: generalDiff.borderRadious,
|
|
289
|
+
border: `1px solid ${removedText}40`,
|
|
290
|
+
},
|
|
291
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
292
|
+
background: 'transparent !important',
|
|
293
|
+
},
|
|
150
294
|
// Tooltips and autocomplete
|
|
151
295
|
'.cm-tooltip': {
|
|
152
296
|
backgroundColor: tooltipBackground,
|
|
@@ -338,5 +482,14 @@ const forest = [
|
|
|
338
482
|
forestTheme,
|
|
339
483
|
/*@__PURE__*/syntaxHighlighting(forestHighlightStyle),
|
|
340
484
|
];
|
|
485
|
+
/**
|
|
486
|
+
* Forest merge revert styles configuration
|
|
487
|
+
*/
|
|
488
|
+
const forestMergeStyles = {
|
|
489
|
+
backgroundColor: darkBackground,
|
|
490
|
+
borderColor: '#3e5059',
|
|
491
|
+
buttonColor: base01,
|
|
492
|
+
buttonHoverColor: '#2d3d47',
|
|
493
|
+
};
|
|
341
494
|
|
|
342
|
-
export {
|
|
495
|
+
export { applyMergeRevertStyles, forest, forestMergeStyles };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-forest",
|
|
3
3
|
"description": "Forest theme for the CodeMirror code editor",
|
|
4
|
-
"version": "6.2.0-beta.
|
|
4
|
+
"version": "6.2.0-beta.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
7
|
"exports": {
|
|
@@ -34,8 +34,7 @@
|
|
|
34
34
|
"@lezer/highlight": "^1.0.0",
|
|
35
35
|
"@codemirror/language": "^6.0.0",
|
|
36
36
|
"@codemirror/state": "^6.0.0",
|
|
37
|
-
"@codemirror/view": "^6.0.0"
|
|
38
|
-
"@fsegurai/codemirror-theme-utils": "6.2.0-beta.3"
|
|
37
|
+
"@codemirror/view": "^6.0.0"
|
|
39
38
|
},
|
|
40
39
|
"devDependencies": {
|
|
41
40
|
"@codemirror/buildhelper": "^1.0.2"
|