| 120 | } |
| 121 | |
| 122 | function SplitView({ changes }: { changes: Change[] }) { |
| 123 | let oldLine = 1; |
| 124 | let newLine = 1; |
| 125 | |
| 126 | type SplitRow = { |
| 127 | left: { num: number | null; text: string; type: "remove" | "context" | "empty" }; |
| 128 | right: { num: number | null; text: string; type: "add" | "context" | "empty" }; |
| 129 | }; |
| 130 | |
| 131 | const rows: SplitRow[] = []; |
| 132 | |
| 133 | for (const change of changes) { |
| 134 | const lines = change.value.replace(/\n$/, "").split("\n"); |
| 135 | if (change.removed) { |
| 136 | for (const line of lines) { |
| 137 | rows.push({ |
| 138 | left: { num: oldLine++, text: line, type: "remove" }, |
| 139 | right: { num: null, text: "", type: "empty" }, |
| 140 | }); |
| 141 | } |
| 142 | } else if (change.added) { |
| 143 | let filled = 0; |
| 144 | for (const line of lines) { |
| 145 | // Try to fill in empty right-side slots from preceding removes |
| 146 | const lastUnfilled = rows.length - lines.length + filled; |
| 147 | if ( |
| 148 | lastUnfilled >= 0 && |
| 149 | lastUnfilled < rows.length && |
| 150 | rows[lastUnfilled].right.type === "empty" && |
| 151 | rows[lastUnfilled].left.type === "remove" |
| 152 | ) { |
| 153 | rows[lastUnfilled].right = { num: newLine++, text: line, type: "add" }; |
| 154 | } else { |
| 155 | rows.push({ |
| 156 | left: { num: null, text: "", type: "empty" }, |
| 157 | right: { num: newLine++, text: line, type: "add" }, |
| 158 | }); |
| 159 | } |
| 160 | filled++; |
| 161 | } |
| 162 | } else { |
| 163 | for (const line of lines) { |
| 164 | rows.push({ |
| 165 | left: { num: oldLine++, text: line, type: "context" }, |
| 166 | right: { num: newLine++, text: line, type: "context" }, |
| 167 | }); |
| 168 | } |
| 169 | } |
| 170 | } |
| 171 | |
| 172 | const cellClass = (type: string) => |
| 173 | cn( |
| 174 | "whitespace-pre px-2", |
| 175 | type === "add" && "bg-green-50 text-green-800 dark:bg-green-950/30 dark:text-green-300", |
| 176 | type === "remove" && "bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-300", |
| 177 | type === "context" && "text-zinc-700 dark:text-zinc-300", |
| 178 | type === "empty" && "bg-zinc-50 dark:bg-zinc-900" |
| 179 | ); |