Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9e55489

Browse files
Merge pull request #13 from utkuakyuz/feature/style-refactors-with-new-props
Style refactors and Safari style support, introducing InlineDiffOptions as Parameter
2 parents a2489eb + 7a33b04 commit 9e55489

File tree

5 files changed

+66
-31
lines changed

5 files changed

+66
-31
lines changed

‎src/components/DiffViewer/Diff.stories.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ const meta: Meta<StoryProps> = {
4343
category: "Main Configuration",
4444
},
4545
},
46+
inlineDiffOptions: {
47+
description: "Options for inline diff highlighting",
48+
control: "text",
49+
table: {
50+
disable: true,
51+
category: "Main Configuration",
52+
},
53+
},
4654
className: {
4755
description: "CSS class name for the diff viewer container",
4856
control: "text",
@@ -58,6 +66,11 @@ const meta: Meta<StoryProps> = {
5866
control: "text",
5967
table: { category: "Main Configuration" },
6068
},
69+
miniMapWidth: {
70+
description: "Width of Minimap (default 20)",
71+
control: "number",
72+
table: { category: "Main Configuration" },
73+
},
6174
hideSearch: {
6275
description: "Whether to hide the search functionality",
6376
control: "boolean",
@@ -189,6 +202,7 @@ export const Primary: Story = {
189202
rightTitle: "Right Title",
190203
hideSearch: false,
191204
height: 500,
205+
miniMapWidth: 20,
192206
oldValue: json1,
193207
newValue: json2,
194208

‎src/components/DiffViewer/components/ViewerRow.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DiffResult } from "json-diff-kit";
1+
import type { DiffResult,InlineDiffOptions } from "json-diff-kit";
22
import type { ListChildComponentProps } from "react-window";
33

44
import { Viewer } from "json-diff-kit";
@@ -16,8 +16,9 @@ function ViewerRow({
1616
rightDiff: DiffRowOrCollapsed[];
1717
onExpand: (segmentIndex: number) => void;
1818
searchTerm?: string;
19+
inlineDiffOptions?: InlineDiffOptions;
1920
}>) {
20-
const { onExpand, searchTerm } = data;
21+
const { onExpand, searchTerm, inlineDiffOptions } = data;
2122
const originalLeftLine = data.leftDiff[index];
2223
const originalRightLine = data.rightDiff[index];
2324

@@ -37,12 +38,12 @@ function ViewerRow({
3738
return (
3839
<div style={style}>
3940
<Viewer
40-
indent={1}
41+
indent={4}
4142
className={`${DIFF_VIEWER_CLASS} ${searchTerm ? "has-search" : ""}`}
4243
lineNumbers
4344
diff={[[leftLine], [rightLine]]}
4445
highlightInlineDiff
45-
inlineDiffOptions={{ mode: "word" }}
46+
inlineDiffOptions={{ mode: "char", ...inlineDiffOptions }}
4647
syntaxHighlight={{ theme: "monokai" }}
4748
/>
4849
</div>

‎src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
2727
differOptions,
2828
className,
2929
miniMapWidth,
30+
inlineDiffOptions,
3031
}) => {
3132
const listRef = useRef<List>(null);
3233
const [scrollTop, setScrollTop] = useState(0);
@@ -149,8 +150,9 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
149150
rightDiff: rightView,
150151
onExpand: handleExpand,
151152
searchTerm: searchState.term,
153+
inlineDiffOptions,
152154
}),
153-
[leftView, rightView, handleExpand, searchState.term],
155+
[leftView, rightView, handleExpand, searchState.term,inlineDiffOptions],
154156
);
155157

156158
return (

‎src/components/DiffViewer/styles/JsonDiffCustomTheme.css

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,25 +35,25 @@
3535
}
3636
}
3737

38-
.diff-viewer-container {
39-
button {
40-
border-radius:4px;
41-
border:1px solid transparent;
42-
font-size:1em;
43-
font-weight:500;
44-
font-family: inherit;
45-
color: white;
46-
background-color:#1a1a1a;
47-
cursor: pointer;
48-
transition: border-color 0.25s;
49-
}
50-
button:hover {
51-
border-color: #649dffab;
52-
}
53-
button:focus,
54-
button:focus-visible {
55-
outline:4px auto -webkit-focus-ring-color;
56-
}
38+
.diff-viewer-container button{
39+
border-radius:4px;
40+
border:1px solid transparent;
41+
font-size:1em;
42+
font-weight:500;
43+
font-family: inherit;
44+
color: white;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
48+
}
49+
50+
.diff-viewer-container button:hover {
51+
border-color: #649dffab;
52+
}
53+
54+
.diff-viewer-containerbutton:focus,
55+
.diff-viewer-containerbutton:focus-visible {
56+
outline:4px auto -webkit-focus-ring-color;
5757
}
5858

5959
.json-diff-header {
@@ -145,14 +145,14 @@
145145
border-radius: 2px;
146146
}
147147

148-
.json-diff-viewer.json-diff-viewer-theme-custom .line-number {
149-
color: #999;
150-
}
151-
152148
.json-diff-viewer.json-diff-viewer-theme-custom tr td {
153-
max-width: 260px;
154-
width: 300px !important;
155149
vertical-align: unset;
150+
padding: 0;
151+
}
152+
153+
.json-diff-viewer.json-diff-viewer-theme-custom tr td.line-number {
154+
color: #999;
155+
padding: 2px;
156156
}
157157

158158
.json-diff-viewer.json-diff-viewer-theme-custom tr td pre {
@@ -162,11 +162,23 @@
162162
overflow: hidden;
163163
margin: 0;
164164
font-size: 12px;
165+
min-width: 300px;
165166
line-height: var(--diff-row-height);
166167
white-space: pre-wrap;
167168
word-break: break-all;
168169
}
169170

171+
.json-diff-viewer.json-diff-viewer-theme-custom tr td pre span.inline-diff-add {
172+
background: rgba(0, 0, 0, 0.08);
173+
text-decoration: underline;
174+
word-break: break-all;
175+
}
176+
.json-diff-viewer.json-diff-viewer-theme-custom tr td pre span.inline-diff-remove {
177+
background: rgba(0, 0, 0, 0.08);
178+
text-decoration: line-through;
179+
word-break: break-all;
180+
}
181+
170182
.json-diff-viewer.json-diff-viewer-theme-custom tr:hover {
171183
background: #53535f54;
172184
}
@@ -191,7 +203,12 @@
191203
padding: 0 4px;
192204
border-left: 0;
193205
border-bottom: none;
206+
}
207+
208+
.json-diff-viewer.json-diff-viewer-theme-custom tr td.line-number {
194209
max-width: 30px;
210+
min-width: 30px;
211+
width: 30px !important;
195212
}
196213

197214
.json-diff-viewer.json-diff-viewer-theme-custom tr.expand-line td {

‎src/components/DiffViewer/types/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DifferOptions, DiffResult } from "json-diff-kit";
1+
import type { DifferOptions, DiffResult,InlineDiffOptions } from "json-diff-kit";
22

33
export type DiffRow = {
44
originalIndex: number;
@@ -44,6 +44,7 @@ export type VirtualizedDiffViewerProps = {
4444
differOptions?: DifferOptions;
4545
className?: string;
4646
miniMapWidth?: number;
47+
inlineDiffOptions?: InlineDiffOptions;
4748
};
4849

4950
export type DiffMinimapProps = {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /