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 c7def0f

Browse files
fix: review notes applied
1 parent 9d45816 commit c7def0f

File tree

10 files changed

+75
-49
lines changed

10 files changed

+75
-49
lines changed

‎demo/src/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export default function App() {
3636
ignoreCaseForKey: false,
3737
recursiveEqual: false,
3838
preserveKeyOrder: undefined as DifferOptions["preserveKeyOrder"],
39+
inlineDiffMode: "word",
3940
});
4041

4142
const updateConfig = (key: keyof Config, value: (Config)[keyof Config]) => {
@@ -218,6 +219,7 @@ export default function App() {
218219
height={config.height}
219220
miniMapWidth={config.miniMapWidth}
220221
hideSearch={config.hideSearch}
222+
inlineDiffOptions={{ mode: config.inlineDiffMode }}
221223
oldValue={parsedOldValue}
222224
newValue={parsedNewValue}
223225
differOptions={differOptions}

‎demo/src/components/Sidebar.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,20 @@ function Sidebar(props: Props) {
152152
</label>
153153
</div>
154154

155+
<div className="form-group">
156+
<label className="form-label">
157+
Inline Diff Method
158+
<select
159+
className="form-select"
160+
value={config.inlineDiffMode}
161+
onChange={e => updateConfig("inlineDiffMode", e.target.value)}
162+
>
163+
<option value="char">Character</option>
164+
<option value="word">Word</option>
165+
</select>
166+
</label>
167+
</div>
168+
155169
<div className="form-group">
156170
<label className="form-label">
157171
Array Diff Method

‎demo/src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@ export type Config = {
1919
ignoreCaseForKey: boolean;
2020
recursiveEqual: boolean;
2121
preserveKeyOrder: DifferOptions["preserveKeyOrder"];
22+
inlineDiffMode: "word" | "char";
2223
};

‎src/components/DiffViewer/components/DiffMinimap.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { DiffMinimapProps } from "../types";
44

55
import { useDragScroll } from "../hooks/useDragScroll";
66
import { useMinimapDraw } from "../hooks/useMinimapDraw";
7-
import { getRowHeightFromCSS } from "../utils/constants";
7+
import { DEFAULT_HEIGHT,DEFAULT_MINIMAP_WIDTH,getRowHeightFromCSS } from "../utils/constants";
88

99
const MINIMAP_HOVER_SCROLL_COLOR = "#7B7B7Bcc";
1010

@@ -37,7 +37,7 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
3737
}, [height, leftDiff.length, rightDiff.length]);
3838

3939
const { handleMouseDown, isDragging } = useDragScroll({
40-
height: height || 380,
40+
height: height || DEFAULT_HEIGHT,
4141
totalLines,
4242
viewportHeight,
4343
ROW_HEIGHT,
@@ -48,8 +48,8 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
4848
const { drawMinimap, drawScrollBox } = useMinimapDraw({
4949
canvasRef,
5050
containerRef,
51-
height: height || 380,
52-
miniMapWidth: miniMapWidth || 20,
51+
height: height || DEFAULT_HEIGHT,
52+
miniMapWidth: miniMapWidth || DEFAULT_MINIMAP_WIDTH,
5353
leftDiff,
5454
rightDiff,
5555
currentScrollTop,

‎src/components/DiffViewer/components/SearchboxHolder.tsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,31 @@ function SearchboxHolder({ searchState, handleSearch, navigateMatch, hideSearch
1414
return null;
1515

1616
return (
17-
<div>
18-
<div className="search-container">
19-
<div className="search-input-container">
20-
<span role="img" aria-label="search"><SearchIcon /></span>
21-
<input
22-
type="text"
23-
placeholder="Search in JSON..."
24-
value={searchState.term}
25-
onChange={e => handleSearch(e.target.value)}
26-
/>
27-
</div>
28-
{searchState.results.length > 0 && (
29-
<div className="search-results">
30-
<span>
31-
{searchState.currentIndex + 1}
32-
{" "}
33-
of
34-
{" "}
35-
{searchState.results.length}
36-
{" "}
37-
matches
38-
</span>
39-
<button onClick={() => navigateMatch("prev")}>Previous</button>
40-
<button onClick={() => navigateMatch("next")}>Next</button>
41-
</div>
42-
)}
17+
<div className="search-container">
18+
<div className="search-input-container">
19+
<span role="img" aria-label="search"><SearchIcon /></span>
20+
<input
21+
type="text"
22+
placeholder="Search in JSON..."
23+
value={searchState.term}
24+
onChange={e => handleSearch(e.target.value)}
25+
/>
4326
</div>
27+
{searchState.results.length > 0 && (
28+
<div className="search-results">
29+
<span>
30+
{searchState.currentIndex + 1}
31+
{" "}
32+
of
33+
{" "}
34+
{searchState.results.length}
35+
{" "}
36+
matches
37+
</span>
38+
<button onClick={() => navigateMatch("prev")}>Previous</button>
39+
<button onClick={() => navigateMatch("next")}>Next</button>
40+
</div>
41+
)}
4442
</div>
4543
);
4644
}

‎src/components/DiffViewer/components/VirtualDiffGrid.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,24 @@ import { useRowHeights } from "../hooks/useRowHeights";
1212
import { COLLAPSED_ROW_HEIGHT, getRowHeightFromCSS, isCollapsed } from "../utils/constants";
1313
import RowRendererGrid from "../utils/json-diff/row-renderer-grid";
1414

15+
type ListDataType = {
16+
leftDiff: DiffRowOrCollapsed[];
17+
rightDiff: DiffRowOrCollapsed[];
18+
onExpand: (segmentIndex: number) => void;
19+
inlineDiffOptions?: InlineDiffOptions;
20+
};
21+
1522
type VirtualDiffGridProps = {
1623
leftDiff: DiffRowOrCollapsed[];
1724
rightDiff: DiffRowOrCollapsed[];
1825
outerRef: React.RefObject<Node | null>;
19-
listRef: React.RefObject<List<any>>;
26+
listRef: React.RefObject<List<ListDataType>>;
2027
height: number;
2128
inlineDiffOptions?: InlineDiffOptions;
2229
className?: string;
2330
setScrollTop: Dispatch<React.SetStateAction<number>>;
2431
onExpand: (segmentIndex: number) => void;
32+
overScanCount?: number;
2533
};
2634

2735
const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
@@ -34,6 +42,7 @@ const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
3442
className,
3543
setScrollTop,
3644
onExpand,
45+
overScanCount = 10,
3746
}) => {
3847
// Virtual List Data
3948
const listData = useMemo(
@@ -82,7 +91,7 @@ const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
8291
className="virtual-json-diff-list-container"
8392
itemCount={Math.max(leftDiff.length, rightDiff.length)}
8493
itemSize={dynamicRowHeights}
85-
overscanCount={28}
94+
overscanCount={overScanCount}
8695
itemData={listData}
8796
onScroll={({ scrollOffset }: ListOnScrollProps) => setScrollTop(scrollOffset)}
8897
>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
2727
className,
2828
miniMapWidth,
2929
inlineDiffOptions,
30+
overScanCount,
3031
}) => {
3132
const outerRef = useRef<Node>(null);
3233
const listRef = useRef<List>(null);
@@ -121,6 +122,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
121122
leftDiff={leftView}
122123
rightDiff={rightView}
123124
height={height}
125+
overScanCount={overScanCount}
124126
setScrollTop={setScrollTop}
125127
onExpand={handleExpand}
126128
className="virtual-json-diff-list-container"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export type VirtualizedDiffViewerProps = {
4646
className?: string;
4747
miniMapWidth?: number;
4848
inlineDiffOptions?: InlineDiffOptions;
49+
overScanCount?: number;
4950
};
5051

5152
export type DiffMinimapProps = {

‎src/components/DiffViewer/utils/constants.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ export const DIFF_VIEWER_CLASS = "json-diff-viewer-theme-custom";
44

55
export const DEFAULT_ROW_HEIGHT = 20; // safe fallback
66

7+
export const DEFAULT_HEIGHT = 380;
8+
9+
export const DEFAULT_MINIMAP_WIDTH = 20;
10+
711
export function getRowHeightFromCSS(): number {
812
if (typeof document === "undefined") {
913
return DEFAULT_ROW_HEIGHT;
@@ -31,10 +35,5 @@ export function isCollapsed(line: any): line is { type: "collapsed"; segmentInde
3135
// Observe DOM changes in the diff viewer and update cells with the "empty-equal-cell" class
3236
// whenever new rows are rendered, ensuring virtualized/scroll-loaded cells are handled.
3337
export function equalEmptyLine(cell: DiffRow) {
34-
if (cell.type === "equal" && cell.text.trim() === "") {
35-
return "empty-equal-cell";
36-
}
37-
else {
38-
return "";
39-
}
38+
return (cell.type === "equal" && cell.text.trim() === "") ? "empty-equal-cell" : "";
4039
}

‎src/components/DiffViewer/utils/json-diff/row-renderer-grid.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ ListChildComponentProps<{
2323
const { onExpand, inlineDiffOptions, leftDiff, rightDiff } = data;
2424

2525
const leftPart = leftDiff[index];
26-
const RightPart = rightDiff[index];
26+
const rightPart = rightDiff[index];
2727

2828
// Collapsed special row -> we will render as a grid-row with two expand cells
29-
if (isCollapsed(leftPart) || isCollapsed(RightPart)) {
29+
if (isCollapsed(leftPart) || isCollapsed(rightPart)) {
3030
const originalLeftLine = leftDiff[index];
3131

3232
const handleExpand = useCallback((originalLeftLine: CollapsedLine) => {
3333
if (isCollapsed(originalLeftLine)) {
3434
onExpand(originalLeftLine.segmentIndex);
3535
}
36-
}, [onExpand,originalLeftLine]);
36+
}, [onExpand]);
3737

3838
return (
3939
<div
@@ -67,12 +67,12 @@ ListChildComponentProps<{
6767
}
6868

6969
const [lDiff, rDiff]
70-
= leftPart.type === "modify" && RightPart.type === "modify"
71-
? getInlineDiff(leftPart.text, RightPart.text, inlineDiffOptions ?? { mode: "char" })
70+
= leftPart.type === "modify" && rightPart.type === "modify"
71+
? getInlineDiff(leftPart.text, rightPart.text, inlineDiffOptions ?? { mode: "char" })
7272
: [[], []];
7373

7474
const lTokens = syntaxHighlightLine(true, leftPart.text, 0);
75-
const rTokens = syntaxHighlightLine(true, RightPart.text, 0);
75+
const rTokens = syntaxHighlightLine(true, rightPart.text, 0);
7676

7777
const lResult = mergeSegments(lTokens, lDiff);
7878
const rResult = mergeSegments(rTokens, rDiff);
@@ -119,14 +119,14 @@ ListChildComponentProps<{
119119
</pre>
120120
</div>
121121

122-
<div className={`cell line-${RightPart.type} line-number`} role="cell">
123-
{RightPart.lineNumber}
122+
<div className={`cell line-${rightPart.type} line-number`} role="cell">
123+
{rightPart.lineNumber}
124124
</div>
125125

126-
<div className={`cell line-${RightPart.type} ${equalEmptyLine(RightPart)}`} role="cell">
126+
<div className={`cell line-${rightPart.type} ${equalEmptyLine(rightPart)}`} role="cell">
127127
<pre>
128-
{RightPart.text && indentChar.repeat(RightPart.level * indentSize)}
129-
{renderInlineResult(RightPart.text, rResult, RightPart.comma)}
128+
{rightPart.text && indentChar.repeat(rightPart.level * indentSize)}
129+
{renderInlineResult(rightPart.text, rResult, rightPart.comma)}
130130
</pre>
131131
</div>
132132
</div>

0 commit comments

Comments
(0)

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