react-diff-viewer-continued 4.0.3 → 4.0.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/.github/workflows/release.yml +7 -7
- package/CHANGELOG.md +16 -0
- package/biome.json +14 -0
- package/lib/cjs/src/compute-hidden-blocks.d.ts +1 -1
- package/lib/cjs/src/compute-hidden-blocks.js +9 -9
- package/lib/cjs/src/compute-lines.d.ts +2 -2
- package/lib/cjs/src/compute-lines.js +26 -14
- package/lib/cjs/src/expand.js +2 -3
- package/lib/cjs/src/fold.js +2 -3
- package/lib/cjs/src/index.d.ts +8 -8
- package/lib/cjs/src/index.js +83 -64
- package/lib/cjs/src/styles.d.ts +29 -25
- package/lib/cjs/src/styles.js +162 -135
- package/lib/esm/src/compute-hidden-blocks.js +8 -7
- package/lib/esm/src/compute-lines.js +10 -8
- package/lib/esm/src/expand.js +2 -2
- package/lib/esm/src/fold.js +2 -2
- package/lib/esm/src/index.js +52 -43
- package/lib/esm/src/styles.js +163 -136
- package/package.json +32 -24
- package/release.config.js +13 -13
- package/.travis.yml +0 -13
package/lib/cjs/src/styles.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { Interpolation } from "@emotion/react";
|
|
2
2
|
export interface ReactDiffViewerStyles {
|
|
3
3
|
diffContainer?: string;
|
|
4
4
|
diffRemoved?: string;
|
|
@@ -16,6 +16,7 @@ export interface ReactDiffViewerStyles {
|
|
|
16
16
|
wordAdded?: string;
|
|
17
17
|
wordRemoved?: string;
|
|
18
18
|
codeFoldGutter?: string;
|
|
19
|
+
codeFoldExpandButton?: string;
|
|
19
20
|
summary?: string;
|
|
20
21
|
codeFoldContentContainer?: string;
|
|
21
22
|
emptyGutter?: string;
|
|
@@ -26,6 +27,7 @@ export interface ReactDiffViewerStyles {
|
|
|
26
27
|
column?: string;
|
|
27
28
|
noSelect?: string;
|
|
28
29
|
splitView?: string;
|
|
30
|
+
allExpandButton?: string;
|
|
29
31
|
[key: string]: string | undefined;
|
|
30
32
|
}
|
|
31
33
|
export interface ReactDiffViewerStylesVariables {
|
|
@@ -60,30 +62,32 @@ export interface ReactDiffViewerStylesOverride {
|
|
|
60
62
|
dark?: ReactDiffViewerStylesVariables;
|
|
61
63
|
light?: ReactDiffViewerStylesVariables;
|
|
62
64
|
};
|
|
63
|
-
diffContainer?:
|
|
64
|
-
diffRemoved?:
|
|
65
|
-
diffAdded?:
|
|
66
|
-
diffChanged?:
|
|
67
|
-
marker?:
|
|
68
|
-
emptyGutter?:
|
|
69
|
-
highlightedLine?:
|
|
70
|
-
lineNumber?:
|
|
71
|
-
highlightedGutter?:
|
|
72
|
-
contentText?:
|
|
73
|
-
gutter?:
|
|
74
|
-
line?:
|
|
75
|
-
wordDiff?:
|
|
76
|
-
wordAdded?:
|
|
77
|
-
wordRemoved?:
|
|
78
|
-
codeFoldGutter?:
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
65
|
+
diffContainer?: Interpolation;
|
|
66
|
+
diffRemoved?: Interpolation;
|
|
67
|
+
diffAdded?: Interpolation;
|
|
68
|
+
diffChanged?: Interpolation;
|
|
69
|
+
marker?: Interpolation;
|
|
70
|
+
emptyGutter?: Interpolation;
|
|
71
|
+
highlightedLine?: Interpolation;
|
|
72
|
+
lineNumber?: Interpolation;
|
|
73
|
+
highlightedGutter?: Interpolation;
|
|
74
|
+
contentText?: Interpolation;
|
|
75
|
+
gutter?: Interpolation;
|
|
76
|
+
line?: Interpolation;
|
|
77
|
+
wordDiff?: Interpolation;
|
|
78
|
+
wordAdded?: Interpolation;
|
|
79
|
+
wordRemoved?: Interpolation;
|
|
80
|
+
codeFoldGutter?: Interpolation;
|
|
81
|
+
codeFoldExpandButton?: Interpolation;
|
|
82
|
+
codeFoldContentContainer?: Interpolation;
|
|
83
|
+
codeFold?: Interpolation;
|
|
84
|
+
emptyLine?: Interpolation;
|
|
85
|
+
content?: Interpolation;
|
|
86
|
+
noSelect?: Interpolation;
|
|
87
|
+
column?: Interpolation;
|
|
88
|
+
titleBlock?: Interpolation;
|
|
89
|
+
splitView?: Interpolation;
|
|
90
|
+
allExpandButton?: Interpolation;
|
|
87
91
|
}
|
|
88
92
|
declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
|
|
89
93
|
export default _default;
|
package/lib/cjs/src/styles.js
CHANGED
|
@@ -15,124 +15,140 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
const create_instance_1 = __importDefault(require("@emotion/css/create-instance"));
|
|
18
|
-
|
|
19
|
-
exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
18
|
+
exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
|
|
20
19
|
const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
|
|
21
20
|
const themeVariables = {
|
|
22
21
|
light: Object.assign({
|
|
23
|
-
diffViewerBackground:
|
|
24
|
-
diffViewerColor:
|
|
25
|
-
addedBackground:
|
|
26
|
-
addedColor:
|
|
27
|
-
removedBackground:
|
|
28
|
-
removedColor:
|
|
29
|
-
changedBackground:
|
|
30
|
-
wordAddedBackground:
|
|
31
|
-
wordRemovedBackground:
|
|
32
|
-
addedGutterBackground:
|
|
33
|
-
removedGutterBackground:
|
|
34
|
-
gutterBackground:
|
|
35
|
-
gutterBackgroundDark:
|
|
36
|
-
highlightBackground:
|
|
37
|
-
highlightGutterBackground:
|
|
38
|
-
codeFoldGutterBackground:
|
|
39
|
-
codeFoldBackground:
|
|
40
|
-
emptyLineBackground:
|
|
41
|
-
gutterColor:
|
|
42
|
-
addedGutterColor:
|
|
43
|
-
removedGutterColor:
|
|
44
|
-
codeFoldContentColor:
|
|
45
|
-
diffViewerTitleBackground:
|
|
46
|
-
diffViewerTitleColor:
|
|
47
|
-
diffViewerTitleBorderColor:
|
|
22
|
+
diffViewerBackground: "#fff",
|
|
23
|
+
diffViewerColor: "#212529",
|
|
24
|
+
addedBackground: "#e6ffed",
|
|
25
|
+
addedColor: "#24292e",
|
|
26
|
+
removedBackground: "#ffeef0",
|
|
27
|
+
removedColor: "#24292e",
|
|
28
|
+
changedBackground: "#fffbdd",
|
|
29
|
+
wordAddedBackground: "#acf2bd",
|
|
30
|
+
wordRemovedBackground: "#fdb8c0",
|
|
31
|
+
addedGutterBackground: "#cdffd8",
|
|
32
|
+
removedGutterBackground: "#ffdce0",
|
|
33
|
+
gutterBackground: "#f7f7f7",
|
|
34
|
+
gutterBackgroundDark: "#f3f1f1",
|
|
35
|
+
highlightBackground: "#fffbdd",
|
|
36
|
+
highlightGutterBackground: "#fff5b1",
|
|
37
|
+
codeFoldGutterBackground: "#dbedff",
|
|
38
|
+
codeFoldBackground: "#f1f8ff",
|
|
39
|
+
emptyLineBackground: "#fafbfc",
|
|
40
|
+
gutterColor: "#212529",
|
|
41
|
+
addedGutterColor: "#212529",
|
|
42
|
+
removedGutterColor: "#212529",
|
|
43
|
+
codeFoldContentColor: "#212529",
|
|
44
|
+
diffViewerTitleBackground: "#fafbfc",
|
|
45
|
+
diffViewerTitleColor: "#212529",
|
|
46
|
+
diffViewerTitleBorderColor: "#eee",
|
|
48
47
|
}, (overrideVariables.light || {})),
|
|
49
48
|
dark: Object.assign({
|
|
50
|
-
diffViewerBackground:
|
|
51
|
-
diffViewerColor:
|
|
52
|
-
addedBackground:
|
|
53
|
-
addedColor:
|
|
54
|
-
removedBackground:
|
|
55
|
-
removedColor:
|
|
56
|
-
changedBackground:
|
|
57
|
-
wordAddedBackground:
|
|
58
|
-
wordRemovedBackground:
|
|
59
|
-
addedGutterBackground:
|
|
60
|
-
removedGutterBackground:
|
|
61
|
-
gutterBackground:
|
|
62
|
-
gutterBackgroundDark:
|
|
63
|
-
highlightBackground:
|
|
64
|
-
highlightGutterBackground:
|
|
65
|
-
codeFoldGutterBackground:
|
|
66
|
-
codeFoldBackground:
|
|
67
|
-
emptyLineBackground:
|
|
68
|
-
gutterColor:
|
|
69
|
-
addedGutterColor:
|
|
70
|
-
removedGutterColor:
|
|
71
|
-
codeFoldContentColor:
|
|
72
|
-
diffViewerTitleBackground:
|
|
73
|
-
diffViewerTitleColor:
|
|
74
|
-
diffViewerTitleBorderColor:
|
|
49
|
+
diffViewerBackground: "#2e303c",
|
|
50
|
+
diffViewerColor: "#FFF",
|
|
51
|
+
addedBackground: "#044B53",
|
|
52
|
+
addedColor: "white",
|
|
53
|
+
removedBackground: "#632F34",
|
|
54
|
+
removedColor: "white",
|
|
55
|
+
changedBackground: "#3e302c",
|
|
56
|
+
wordAddedBackground: "#055d67",
|
|
57
|
+
wordRemovedBackground: "#7d383f",
|
|
58
|
+
addedGutterBackground: "#034148",
|
|
59
|
+
removedGutterBackground: "#632b30",
|
|
60
|
+
gutterBackground: "#2c2f3a",
|
|
61
|
+
gutterBackgroundDark: "#262933",
|
|
62
|
+
highlightBackground: "#2a3967",
|
|
63
|
+
highlightGutterBackground: "#2d4077",
|
|
64
|
+
codeFoldGutterBackground: "#262831",
|
|
65
|
+
codeFoldBackground: "#262831",
|
|
66
|
+
emptyLineBackground: "#363946",
|
|
67
|
+
gutterColor: "#666c87",
|
|
68
|
+
addedGutterColor: "#8c8c8c",
|
|
69
|
+
removedGutterColor: "#8c8c8c",
|
|
70
|
+
codeFoldContentColor: "#656a8b",
|
|
71
|
+
diffViewerTitleBackground: "#2f323e",
|
|
72
|
+
diffViewerTitleColor: "#757a9b",
|
|
73
|
+
diffViewerTitleBorderColor: "#353846",
|
|
75
74
|
}, (overrideVariables.dark || {})),
|
|
76
75
|
};
|
|
77
76
|
const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
|
|
78
|
-
const { css, cx } = (0, create_instance_1.default)({ key:
|
|
77
|
+
const { css, cx } = (0, create_instance_1.default)({ key: "react-diff", nonce });
|
|
79
78
|
const content = css({
|
|
80
|
-
width:
|
|
81
|
-
label:
|
|
79
|
+
width: "auto",
|
|
80
|
+
label: "content",
|
|
82
81
|
});
|
|
83
82
|
const splitView = css({
|
|
84
|
-
label:
|
|
83
|
+
label: "split-view",
|
|
85
84
|
});
|
|
86
85
|
const summary = css({
|
|
87
86
|
background: variables.diffViewerTitleBackground,
|
|
88
87
|
color: variables.diffViewerTitleColor,
|
|
89
|
-
padding:
|
|
90
|
-
display:
|
|
91
|
-
alignItems:
|
|
92
|
-
gap:
|
|
88
|
+
padding: "0.5em 1em",
|
|
89
|
+
display: "flex",
|
|
90
|
+
alignItems: "center",
|
|
91
|
+
gap: "0.5em",
|
|
93
92
|
fontFamily: "monospace",
|
|
94
93
|
fill: variables.diffViewerTitleColor,
|
|
95
94
|
});
|
|
96
95
|
const diffContainer = css({
|
|
97
|
-
width:
|
|
98
|
-
minWidth:
|
|
99
|
-
overflowX:
|
|
100
|
-
tableLayout:
|
|
96
|
+
width: "100%",
|
|
97
|
+
minWidth: "1000px",
|
|
98
|
+
overflowX: "auto",
|
|
99
|
+
tableLayout: "fixed",
|
|
101
100
|
background: variables.diffViewerBackground,
|
|
102
101
|
pre: {
|
|
103
102
|
margin: 0,
|
|
104
|
-
whiteSpace:
|
|
105
|
-
lineHeight:
|
|
106
|
-
width:
|
|
103
|
+
whiteSpace: "pre-wrap",
|
|
104
|
+
lineHeight: "1.6em",
|
|
105
|
+
width: "fit-content",
|
|
107
106
|
},
|
|
108
|
-
label:
|
|
109
|
-
borderCollapse:
|
|
107
|
+
label: "diff-container",
|
|
108
|
+
borderCollapse: "collapse",
|
|
110
109
|
});
|
|
111
110
|
const lineContent = css({
|
|
112
|
-
overflow:
|
|
113
|
-
width:
|
|
111
|
+
overflow: "hidden",
|
|
112
|
+
width: "100%",
|
|
114
113
|
});
|
|
115
114
|
const contentText = css({
|
|
116
115
|
color: variables.diffViewerColor,
|
|
117
|
-
whiteSpace:
|
|
118
|
-
fontFamily:
|
|
119
|
-
|
|
120
|
-
|
|
116
|
+
whiteSpace: "pre-wrap",
|
|
117
|
+
fontFamily: "monospace",
|
|
118
|
+
lineBreak: "anywhere",
|
|
119
|
+
textDecoration: "none",
|
|
120
|
+
label: "content-text",
|
|
121
121
|
});
|
|
122
122
|
const unselectable = css({
|
|
123
|
-
userSelect:
|
|
124
|
-
label:
|
|
123
|
+
userSelect: "none",
|
|
124
|
+
label: "unselectable",
|
|
125
|
+
});
|
|
126
|
+
const allExpandButton = css({
|
|
127
|
+
background: "transparent",
|
|
128
|
+
border: "none",
|
|
129
|
+
cursor: "pointer",
|
|
130
|
+
display: "flex",
|
|
131
|
+
alignItems: "center",
|
|
132
|
+
justifyContent: "center",
|
|
133
|
+
margin: 0,
|
|
134
|
+
label: "all-expand-button",
|
|
135
|
+
":hover": {
|
|
136
|
+
fill: variables.addedGutterColor,
|
|
137
|
+
},
|
|
138
|
+
":focus": {
|
|
139
|
+
outline: `1px ${variables.addedGutterColor} solid`,
|
|
140
|
+
},
|
|
125
141
|
});
|
|
126
142
|
const titleBlock = css({
|
|
127
143
|
background: variables.diffViewerTitleBackground,
|
|
128
|
-
padding:
|
|
129
|
-
lineHeight:
|
|
144
|
+
padding: "0.5em",
|
|
145
|
+
lineHeight: "1.4em",
|
|
130
146
|
height: "2.4em",
|
|
131
|
-
overflow:
|
|
132
|
-
width:
|
|
147
|
+
overflow: "hidden",
|
|
148
|
+
width: "50%",
|
|
133
149
|
borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
|
|
134
|
-
label:
|
|
135
|
-
|
|
150
|
+
label: "title-block",
|
|
151
|
+
":last-child": {
|
|
136
152
|
borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
|
|
137
153
|
},
|
|
138
154
|
[`.${contentText}`]: {
|
|
@@ -141,7 +157,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
141
157
|
});
|
|
142
158
|
const lineNumber = css({
|
|
143
159
|
color: variables.gutterColor,
|
|
144
|
-
label:
|
|
160
|
+
label: "line-number",
|
|
145
161
|
});
|
|
146
162
|
const diffRemoved = css({
|
|
147
163
|
background: variables.removedBackground,
|
|
@@ -152,7 +168,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
152
168
|
[`.${lineNumber}`]: {
|
|
153
169
|
color: variables.removedGutterColor,
|
|
154
170
|
},
|
|
155
|
-
label:
|
|
171
|
+
label: "diff-removed",
|
|
156
172
|
});
|
|
157
173
|
const diffAdded = css({
|
|
158
174
|
background: variables.addedBackground,
|
|
@@ -163,86 +179,95 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
163
179
|
[`.${lineNumber}`]: {
|
|
164
180
|
color: variables.addedGutterColor,
|
|
165
181
|
},
|
|
166
|
-
label:
|
|
182
|
+
label: "diff-added",
|
|
167
183
|
});
|
|
168
184
|
const diffChanged = css({
|
|
169
185
|
background: variables.changedBackground,
|
|
170
186
|
[`.${lineNumber}`]: {
|
|
171
187
|
color: variables.gutterColor,
|
|
172
188
|
},
|
|
173
|
-
label:
|
|
189
|
+
label: "diff-changed",
|
|
174
190
|
});
|
|
175
191
|
const wordDiff = css({
|
|
176
192
|
padding: 2,
|
|
177
|
-
display:
|
|
193
|
+
display: "inline-flex",
|
|
178
194
|
borderRadius: 4,
|
|
179
|
-
wordBreak:
|
|
180
|
-
label:
|
|
195
|
+
wordBreak: "break-all",
|
|
196
|
+
label: "word-diff",
|
|
181
197
|
});
|
|
182
198
|
const wordAdded = css({
|
|
183
199
|
background: variables.wordAddedBackground,
|
|
184
|
-
textDecoration:
|
|
185
|
-
label:
|
|
200
|
+
textDecoration: "none",
|
|
201
|
+
label: "word-added",
|
|
186
202
|
});
|
|
187
203
|
const wordRemoved = css({
|
|
188
204
|
background: variables.wordRemovedBackground,
|
|
189
|
-
textDecoration:
|
|
190
|
-
label:
|
|
205
|
+
textDecoration: "none",
|
|
206
|
+
label: "word-removed",
|
|
191
207
|
});
|
|
192
208
|
const codeFoldGutter = css({
|
|
193
209
|
backgroundColor: variables.codeFoldGutterBackground,
|
|
194
|
-
label:
|
|
195
|
-
minWidth:
|
|
196
|
-
width:
|
|
210
|
+
label: "code-fold-gutter",
|
|
211
|
+
minWidth: "50px",
|
|
212
|
+
width: "50px",
|
|
197
213
|
});
|
|
198
214
|
const codeFoldContentContainer = css({
|
|
199
|
-
padding:
|
|
215
|
+
padding: "",
|
|
216
|
+
});
|
|
217
|
+
const codeFoldExpandButton = css({
|
|
218
|
+
background: variables.codeFoldBackground,
|
|
219
|
+
cursor: "pointer",
|
|
220
|
+
display: "inline",
|
|
221
|
+
margin: 0,
|
|
222
|
+
border: "none",
|
|
223
|
+
label: "code-fold-expand-button",
|
|
200
224
|
});
|
|
201
225
|
const codeFoldContent = css({
|
|
202
226
|
color: variables.codeFoldContentColor,
|
|
203
|
-
|
|
227
|
+
fontFamily: "monospace",
|
|
228
|
+
label: "code-fold-content",
|
|
204
229
|
});
|
|
205
230
|
const block = css({
|
|
206
|
-
display:
|
|
207
|
-
width:
|
|
208
|
-
height:
|
|
209
|
-
backgroundColor:
|
|
210
|
-
borderWidth:
|
|
211
|
-
borderStyle:
|
|
212
|
-
borderColor: variables.diffViewerTitleBorderColor
|
|
231
|
+
display: "block",
|
|
232
|
+
width: "10px",
|
|
233
|
+
height: "10px",
|
|
234
|
+
backgroundColor: "#ddd",
|
|
235
|
+
borderWidth: "1px",
|
|
236
|
+
borderStyle: "solid",
|
|
237
|
+
borderColor: variables.diffViewerTitleBorderColor,
|
|
213
238
|
});
|
|
214
239
|
const blockAddition = css({
|
|
215
|
-
backgroundColor: variables.wordAddedBackground
|
|
240
|
+
backgroundColor: variables.wordAddedBackground,
|
|
216
241
|
});
|
|
217
242
|
const blockDeletion = css({
|
|
218
|
-
backgroundColor: variables.wordRemovedBackground
|
|
243
|
+
backgroundColor: variables.wordRemovedBackground,
|
|
219
244
|
});
|
|
220
245
|
const codeFold = css({
|
|
221
246
|
backgroundColor: variables.codeFoldBackground,
|
|
222
247
|
height: 40,
|
|
223
248
|
fontSize: 14,
|
|
224
|
-
alignItems:
|
|
225
|
-
userSelect:
|
|
249
|
+
alignItems: "center",
|
|
250
|
+
userSelect: "none",
|
|
226
251
|
fontWeight: 700,
|
|
227
|
-
label:
|
|
252
|
+
label: "code-fold",
|
|
228
253
|
a: {
|
|
229
|
-
textDecoration:
|
|
230
|
-
cursor:
|
|
254
|
+
textDecoration: "underline !important",
|
|
255
|
+
cursor: "pointer",
|
|
231
256
|
pre: {
|
|
232
|
-
display:
|
|
257
|
+
display: "inline",
|
|
233
258
|
},
|
|
234
259
|
},
|
|
235
260
|
});
|
|
236
261
|
const emptyLine = css({
|
|
237
262
|
backgroundColor: variables.emptyLineBackground,
|
|
238
|
-
label:
|
|
263
|
+
label: "empty-line",
|
|
239
264
|
});
|
|
240
265
|
const marker = css({
|
|
241
266
|
width: 28,
|
|
242
267
|
paddingLeft: 10,
|
|
243
268
|
paddingRight: 10,
|
|
244
|
-
userSelect:
|
|
245
|
-
label:
|
|
269
|
+
userSelect: "none",
|
|
270
|
+
label: "marker",
|
|
246
271
|
[`&.${diffAdded}`]: {
|
|
247
272
|
pre: {
|
|
248
273
|
color: variables.addedColor,
|
|
@@ -256,25 +281,25 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
256
281
|
});
|
|
257
282
|
const highlightedLine = css({
|
|
258
283
|
background: variables.highlightBackground,
|
|
259
|
-
label:
|
|
284
|
+
label: "highlighted-line",
|
|
260
285
|
[`.${wordAdded}, .${wordRemoved}`]: {
|
|
261
|
-
backgroundColor:
|
|
286
|
+
backgroundColor: "initial",
|
|
262
287
|
},
|
|
263
288
|
});
|
|
264
289
|
const highlightedGutter = css({
|
|
265
|
-
label:
|
|
290
|
+
label: "highlighted-gutter",
|
|
266
291
|
});
|
|
267
292
|
const gutter = css({
|
|
268
|
-
userSelect:
|
|
293
|
+
userSelect: "none",
|
|
269
294
|
minWidth: 50,
|
|
270
|
-
width:
|
|
271
|
-
padding:
|
|
272
|
-
whiteSpace:
|
|
273
|
-
label:
|
|
274
|
-
textAlign:
|
|
295
|
+
width: "50px",
|
|
296
|
+
padding: "0 10px",
|
|
297
|
+
whiteSpace: "nowrap",
|
|
298
|
+
label: "gutter",
|
|
299
|
+
textAlign: "right",
|
|
275
300
|
background: variables.gutterBackground,
|
|
276
|
-
|
|
277
|
-
cursor:
|
|
301
|
+
"&:hover": {
|
|
302
|
+
cursor: "pointer",
|
|
278
303
|
background: variables.gutterBackgroundDark,
|
|
279
304
|
pre: {
|
|
280
305
|
opacity: 1,
|
|
@@ -291,22 +316,22 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
291
316
|
},
|
|
292
317
|
[`&.${highlightedGutter}`]: {
|
|
293
318
|
background: variables.highlightGutterBackground,
|
|
294
|
-
|
|
319
|
+
"&:hover": {
|
|
295
320
|
background: variables.highlightGutterBackground,
|
|
296
321
|
},
|
|
297
322
|
},
|
|
298
323
|
});
|
|
299
324
|
const emptyGutter = css({
|
|
300
|
-
|
|
325
|
+
"&:hover": {
|
|
301
326
|
background: variables.gutterBackground,
|
|
302
|
-
cursor:
|
|
327
|
+
cursor: "initial",
|
|
303
328
|
},
|
|
304
|
-
label:
|
|
329
|
+
label: "empty-gutter",
|
|
305
330
|
});
|
|
306
331
|
const line = css({
|
|
307
|
-
verticalAlign:
|
|
308
|
-
label:
|
|
309
|
-
textDecoration:
|
|
332
|
+
verticalAlign: "baseline",
|
|
333
|
+
label: "line",
|
|
334
|
+
textDecoration: "none",
|
|
310
335
|
});
|
|
311
336
|
const column = css({});
|
|
312
337
|
const defaultStyles = {
|
|
@@ -330,6 +355,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
330
355
|
wordRemoved,
|
|
331
356
|
noSelect: unselectable,
|
|
332
357
|
codeFoldGutter,
|
|
358
|
+
codeFoldExpandButton,
|
|
333
359
|
codeFoldContentContainer,
|
|
334
360
|
codeFold,
|
|
335
361
|
emptyGutter,
|
|
@@ -340,6 +366,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
|
|
|
340
366
|
column,
|
|
341
367
|
codeFoldContent,
|
|
342
368
|
titleBlock,
|
|
369
|
+
allExpandButton,
|
|
343
370
|
};
|
|
344
371
|
const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
|
|
345
372
|
[key]: css(styles[key]),
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
export function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
|
|
2
2
|
let newBlockIndex = 0;
|
|
3
3
|
let currentBlock;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const lineBlocks = {};
|
|
5
|
+
const blocks = [];
|
|
6
6
|
lineInformation.forEach((line, lineIndex) => {
|
|
7
|
-
const isDiffLine = diffLines.some(diffLine => diffLine >= lineIndex - extraLines &&
|
|
8
|
-
|
|
7
|
+
const isDiffLine = diffLines.some((diffLine) => diffLine >= lineIndex - extraLines &&
|
|
8
|
+
diffLine <= lineIndex + extraLines);
|
|
9
|
+
if (!isDiffLine && currentBlock === undefined) {
|
|
9
10
|
// block begins
|
|
10
11
|
currentBlock = {
|
|
11
12
|
index: newBlockIndex,
|
|
12
13
|
startLine: lineIndex,
|
|
13
14
|
endLine: lineIndex,
|
|
14
|
-
lines: 1
|
|
15
|
+
lines: 1,
|
|
15
16
|
};
|
|
16
17
|
blocks.push(currentBlock);
|
|
17
18
|
lineBlocks[lineIndex] = currentBlock.index;
|
|
18
19
|
newBlockIndex++;
|
|
19
20
|
}
|
|
20
|
-
else if (!isDiffLine) {
|
|
21
|
+
else if (!isDiffLine && currentBlock) {
|
|
21
22
|
// block continues
|
|
22
23
|
currentBlock.endLine = lineIndex;
|
|
23
24
|
currentBlock.lines++;
|
|
@@ -30,6 +31,6 @@ export function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
|
|
|
30
31
|
});
|
|
31
32
|
return {
|
|
32
33
|
lineBlocks,
|
|
33
|
-
blocks: blocks
|
|
34
|
+
blocks: blocks,
|
|
34
35
|
};
|
|
35
36
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as diff from
|
|
1
|
+
import * as diff from "diff";
|
|
2
2
|
const jsDiff = diff;
|
|
3
3
|
export var DiffType;
|
|
4
4
|
(function (DiffType) {
|
|
@@ -26,9 +26,9 @@ export var DiffMethod;
|
|
|
26
26
|
* @param value Diff text from the js diff module.
|
|
27
27
|
*/
|
|
28
28
|
const constructLines = (value) => {
|
|
29
|
-
if (value ===
|
|
29
|
+
if (value === "")
|
|
30
30
|
return [];
|
|
31
|
-
const lines = value.replace(/\n$/,
|
|
31
|
+
const lines = value.replace(/\n$/, "").split("\n");
|
|
32
32
|
return lines;
|
|
33
33
|
};
|
|
34
34
|
/**
|
|
@@ -40,7 +40,7 @@ const constructLines = (value) => {
|
|
|
40
40
|
* @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
|
|
41
41
|
*/
|
|
42
42
|
const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
|
|
43
|
-
const compareFunc =
|
|
43
|
+
const compareFunc = typeof compareMethod === "string" ? jsDiff[compareMethod] : compareMethod;
|
|
44
44
|
const diffArray = compareFunc(oldValue, newValue);
|
|
45
45
|
const computedDiff = {
|
|
46
46
|
left: [],
|
|
@@ -86,7 +86,7 @@ const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
|
|
|
86
86
|
const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = []) => {
|
|
87
87
|
let diffArray = [];
|
|
88
88
|
// Use diffLines for strings, and diffJson for objects...
|
|
89
|
-
if (typeof oldString ===
|
|
89
|
+
if (typeof oldString === "string" && typeof newString === "string") {
|
|
90
90
|
diffArray = diff.diffLines(oldString, newString, {
|
|
91
91
|
newlineIsToken: false,
|
|
92
92
|
ignoreWhitespace: false,
|
|
@@ -118,13 +118,13 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
|
|
|
118
118
|
leftLineNumber += 1;
|
|
119
119
|
left.lineNumber = leftLineNumber;
|
|
120
120
|
left.type = DiffType.REMOVED;
|
|
121
|
-
left.value = line ||
|
|
121
|
+
left.value = line || " ";
|
|
122
122
|
// When the current line is of type REMOVED, check the next item in
|
|
123
123
|
// the diff array whether it is of type ADDED. If true, the current
|
|
124
124
|
// diff will be marked as both REMOVED and ADDED. Meaning, the
|
|
125
125
|
// current line is a modification.
|
|
126
126
|
const nextDiff = diffArray[diffIndex + 1];
|
|
127
|
-
if (nextDiff
|
|
127
|
+
if (nextDiff?.added) {
|
|
128
128
|
const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
|
|
129
129
|
if (nextDiffLines) {
|
|
130
130
|
const nextDiffLineInfo = getLineInformation(nextDiffLines, diffIndex, true, false, true);
|
|
@@ -179,7 +179,9 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
|
|
|
179
179
|
right.type = DiffType.DEFAULT;
|
|
180
180
|
right.value = line;
|
|
181
181
|
}
|
|
182
|
-
if (showLines?.includes(`L-${left.lineNumber}`) ||
|
|
182
|
+
if (showLines?.includes(`L-${left.lineNumber}`) ||
|
|
183
|
+
(showLines?.includes(`R-${right.lineNumber}`) &&
|
|
184
|
+
!diffLines.includes(counter))) {
|
|
183
185
|
diffLines.push(counter);
|
|
184
186
|
}
|
|
185
187
|
if (!evaluateOnlyFirstLine) {
|
package/lib/esm/src/expand.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function Expand() {
|
|
3
|
-
return
|
|
3
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [_jsx("title", { children: "expand" }), _jsx("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })] }));
|
|
4
4
|
}
|
package/lib/esm/src/fold.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function Fold() {
|
|
3
|
-
return
|
|
3
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [_jsx("title", { children: "fold" }), _jsx("path", { d: "M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })] }));
|
|
4
4
|
}
|