Skip to content

Commit 8803899

Browse files
VasylMarchukVasylMarchuk
committed
Don't render empty elements in collapseUnchangedGutter 
1 parent 8bd99a4 commit 8803899

2 files changed

Lines changed: 49 additions & 57 deletions

File tree

‎app/utils/code-mirror-collapse-unchanged-gutter.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function toDOM(_view: EditorView): Node {
1212
const editor = el.closest('.cm-editor');
1313
const gutter = el.closest('.cm-gutter');
1414
const gutterElement = el.closest('.cm-gutterElement');
15-
const gutterElementSiblings = gutter?.querySelectorAll('.cm-collapseUnchangedBarSibling');
15+
const gutterElementSiblings = gutter?.querySelectorAll('.cm-gutterElement');
1616

1717
if (!editor || !gutter || !gutterElement || !gutterElementSiblings) {
1818
return;
@@ -31,27 +31,23 @@ function toDOM(_view: EditorView): Node {
3131
}
3232

3333
export class CollapseUnchangedGutterMarker extends GutterMarker {
34-
elementClass = 'cm-collapseUnchangedBarSibling';
3534
toDOM = toDOM;
3635
}
3736

3837
export class CollapseUnchangedGutterMarkerRS extends GutterMarkerRS {
39-
elementClass = 'cm-collapseUnchangedBarSibling';
4038
toDOM = toDOM;
4139
}
4240

4341
export function collapseUnchangedGutter() {
4442
return [
4543
gutter({
4644
class: 'cm-collapseUnchangedGutter',
47-
renderEmptyElements: true,
4845
widgetMarker(_view, widget, _block) {
4946
return isCollapseUnchangedWidget(widget) ? new CollapseUnchangedGutterMarker() : null;
5047
},
5148
}),
5249
gutterRS({
5350
class: 'cm-collapseUnchangedGutter',
54-
renderEmptyElements: true,
5551
widgetMarker(_view, widget, _block) {
5652
return isCollapseUnchangedWidget(widget) ? new CollapseUnchangedGutterMarkerRS() : null;
5753
},

‎app/utils/code-mirror-themes.ts‎

Lines changed: 48 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -69,42 +69,40 @@ const BASE_STYLE = {
6969
// Collapse unchanged lines gutter
7070
'.cm-collapseUnchangedGutter': {
7171
'& .cm-gutterElement': {
72-
'&.cm-collapseUnchangedBarSibling': {
72+
'& .cm-collapseUnchangedGutterElement': {
73+
content: '""',
74+
position: 'absolute',
75+
left: 0,
76+
right: 0,
77+
height: '1.75rem',
78+
borderTopWidth: '1px',
79+
borderBottomWidth: '1px',
80+
borderColor: tailwindColors.sky['100'],
81+
backgroundColor: tailwindColors.sky['50'],
82+
backgroundImage: 'url("/assets/images/codemirror/expand-diff-middle.svg")',
83+
backgroundRepeat: 'no-repeat',
84+
backgroundPosition: 'center',
85+
backgroundSize: '12px 12px',
86+
cursor: 'pointer',
87+
},
88+
'&:hover': {
7389
'& .cm-collapseUnchangedGutterElement': {
74-
content: '""',
75-
position: 'absolute',
76-
left: 0,
77-
right: 0,
78-
height: '1.75rem',
79-
borderTopWidth: '1px',
80-
borderBottomWidth: '1px',
81-
borderColor: tailwindColors.sky['100'],
82-
backgroundColor: tailwindColors.sky['50'],
83-
backgroundImage: 'url("/assets/images/codemirror/expand-diff-middle.svg")',
84-
backgroundRepeat: 'no-repeat',
85-
backgroundPosition: 'center',
86-
backgroundSize: '12px 12px',
87-
cursor: 'pointer',
88-
},
89-
'&:hover': {
90-
'& .cm-collapseUnchangedGutterElement': {
91-
backgroundColor: tailwindColors.sky['100'],
92-
color: tailwindColors.sky['800'],
93-
},
90+
backgroundColor: tailwindColors.sky['100'],
91+
color: tailwindColors.sky['800'],
9492
},
95-
'&:first-child': {
96-
'& .cm-collapseUnchangedGutterElement': {
97-
borderTop: 'none',
98-
marginTop: '-0.5rem',
99-
backgroundImage: 'url("/assets/images/codemirror/expand-diff-top.svg")',
100-
},
93+
},
94+
'&:first-child': {
95+
'& .cm-collapseUnchangedGutterElement': {
96+
borderTop: 'none',
97+
marginTop: '-0.5rem',
98+
backgroundImage: 'url("/assets/images/codemirror/expand-diff-top.svg")',
10199
},
102-
'&:last-child': {
103-
'& .cm-collapseUnchangedGutterElement': {
104-
borderBottom: 'none',
105-
marginTop: '0.5rem',
106-
backgroundImage: 'url("/assets/images/codemirror/expand-diff-bottom.svg")',
107-
},
100+
},
101+
'&:last-child': {
102+
'& .cm-collapseUnchangedGutterElement': {
103+
borderBottom: 'none',
104+
marginTop: '0.5rem',
105+
backgroundImage: 'url("/assets/images/codemirror/expand-diff-bottom.svg")',
108106
},
109107
},
110108
},
@@ -200,30 +198,28 @@ export const codeCraftersDark = [
200198
// Collapse unchanged lines gutter
201199
'.cm-collapseUnchangedGutter': {
202200
'& .cm-gutterElement': {
203-
'&.cm-collapseUnchangedBarSibling': {
204-
'& .cm-collapseUnchangedGutterElement': {
205-
borderColor: blendColors(tailwindColors.white, 0.075, blendColors(tailwindColors.sky['900'], 0.4, tailwindColors.slate['800'])),
206-
backgroundColor: blendColors(tailwindColors.sky['900'], 0.4, tailwindColors.slate['800']),
207-
backgroundImage: 'url("/assets/images/codemirror/expand-diff-middle-dark.svg")',
208-
},
201+
'& .cm-collapseUnchangedGutterElement': {
202+
borderColor: blendColors(tailwindColors.white, 0.075, blendColors(tailwindColors.sky['900'], 0.4, tailwindColors.slate['800'])),
203+
backgroundColor: blendColors(tailwindColors.sky['900'], 0.4, tailwindColors.slate['800']),
204+
backgroundImage: 'url("/assets/images/codemirror/expand-diff-middle-dark.svg")',
205+
},
209206

210-
'&:hover': {
211-
'& .cm-collapseUnchangedGutterElement': {
212-
backgroundColor: blendColors(tailwindColors.sky['800'], 0.4, tailwindColors.slate['800']),
213-
color: tailwindColors.sky['300'],
214-
},
207+
'&:hover': {
208+
'& .cm-collapseUnchangedGutterElement': {
209+
backgroundColor: blendColors(tailwindColors.sky['800'], 0.4, tailwindColors.slate['800']),
210+
color: tailwindColors.sky['300'],
215211
},
212+
},
216213

217-
'&:first-child': {
218-
'& .cm-collapseUnchangedGutterElement': {
219-
backgroundImage: 'url("/assets/images/codemirror/expand-diff-top-dark.svg")',
220-
},
214+
'&:first-child': {
215+
'& .cm-collapseUnchangedGutterElement': {
216+
backgroundImage: 'url("/assets/images/codemirror/expand-diff-top-dark.svg")',
221217
},
218+
},
222219

223-
'&:last-child': {
224-
'& .cm-collapseUnchangedGutterElement': {
225-
backgroundImage: 'url("/assets/images/codemirror/expand-diff-bottom-dark.svg")',
226-
},
220+
'&:last-child': {
221+
'& .cm-collapseUnchangedGutterElement': {
222+
backgroundImage: 'url("/assets/images/codemirror/expand-diff-bottom-dark.svg")',
227223
},
228224
},
229225
},

0 commit comments

Comments
 (0)