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 50a7f16

Browse files
feat: empty equal cell style refactor
1 parent 1057da6 commit 50a7f16

File tree

2 files changed

+36
-0
lines changed

2 files changed

+36
-0
lines changed

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
3030
miniMapWidth,
3131
inlineDiffOptions,
3232
}) => {
33+
const outerRef = useRef<Node>(null);
3334
const listRef = useRef<List>(null);
3435
const [scrollTop, setScrollTop] = useState(0);
3536

@@ -167,6 +168,33 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
167168
onScroll: (scrollTop: number) => listRef.current?.scrollTo(scrollTop),
168169
};
169170

171+
// Observe DOM changes in the diff viewer and update cells with the "empty-equal-cell" class
172+
// whenever new rows are rendered, ensuring virtualized/scroll-loaded cells are handled.
173+
useEffect(() => {
174+
const container = outerRef.current as HTMLElement | null;
175+
if (!container)
176+
return;
177+
178+
const observer = new MutationObserver(() => {
179+
const tds = container?.querySelectorAll<HTMLTableCellElement>(
180+
".json-diff-viewer td.line-equal",
181+
);
182+
183+
tds.forEach((td, index) => {
184+
td.classList.remove("empty-equal-cell");
185+
186+
const spans = td.querySelectorAll("pre > span");
187+
if (index % 2 === 1 && spans.length === 1 && spans[0].textContent?.trim() === "") {
188+
td.classList.add("empty-equal-cell");
189+
}
190+
});
191+
});
192+
193+
observer.observe(container!, { childList: true, subtree: true });
194+
195+
return () => observer.disconnect();
196+
}, []);
197+
170198
return (
171199
<div className={`diff-viewer-container${className ? ` ${className}` : ""}`}>
172200
{/* Header & Search */}
@@ -208,6 +236,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
208236
{/* List & Minimap */}
209237
<div style={{ display: "flex", gap: "8px", position: "relative" }}>
210238
<List
239+
outerRef={outerRef}
211240
ref={listRef}
212241
className="virtual-json-diff-list-container"
213242
height={height}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
background: #282a36;
2626
color: #f8f8f2;
2727
width: 100%;
28+
border-spacing: 0;
2829
font-family:
2930
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
3031
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -95,6 +96,12 @@
9596
background: rgba(182, 180, 67, 0.08);
9697
}
9798

99+
.json-diff-viewer.json-diff-viewer-theme-custom tr .empty-equal-cell {
100+
opacity: 0.4;
101+
background: repeating-linear-gradient(-53deg, rgb(69, 69, 70), rgb(69, 69, 70) 1.5px, #282a36 1.5px, #282a36 4px);
102+
background-attachment: fixed;
103+
}
104+
98105
.json-diff-viewer.json-diff-viewer-theme-custom tr .line-number {
99106
background: unset;
100107
padding: 0 4px;

0 commit comments

Comments
(0)

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