NES: Injected text fix using css (microsoft#239216)

fixes microsoft/vscode-copilot#12426

Author: benibenj

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineDiffView.ts

@@ -214,21 +214,30 @@ export class OriginalEditorInlineDiffView extends Disposable implements IInlineE
 					}
 					if (useInlineDiff) {
 						const insertedText = modified.getValueOfRange(i.modifiedRange);
-						originalDecorations.push({
-							range: Range.fromPositions(i.originalRange.getEndPosition()),
-							options: {
-								description: 'inserted-text',
-								before: {
-									content: insertedText,
-									inlineClassName: classNames(
-										'inlineCompletions-char-insert',
-										i.modifiedRange.isSingleLine() && diff.mode === 'insertionInline' && 'single-line-inline'
-									),
-								},
-								zIndex: 2,
-								showIfCollapsed: true,
-							}
-						});
+						// when the injected text becomes long, the editor will split it into multiple spans
+						// to be able to get the border around the start and end of the text, we need to split it into multiple segments
+						const textSegments = insertedText.length > 3 ?
+							[{ text: insertedText.slice(0, 1), extraClasses: ['start'] }, { text: insertedText.slice(1, -1), extraClasses: [] }, { text: insertedText.slice(-1), extraClasses: ['end'] }] :
+							[{ text: insertedText, extraClasses: ['start', 'end'] }];
+
+						for (const { text, extraClasses } of textSegments) {
+							originalDecorations.push({
+								range: Range.fromPositions(i.originalRange.getEndPosition()),
+								options: {
+									description: 'inserted-text',
+									before: {
+										content: text,
+										inlineClassName: classNames(
+											'inlineCompletions-char-insert',
+											i.modifiedRange.isSingleLine() && diff.mode === 'insertionInline' && 'single-line-inline',
+											...extraClasses // include extraClasses for additional styling if provided
+										),
+									},
+									zIndex: 2,
+									showIfCollapsed: true,
+								}
+							});
+						}
 					}
 				}
 			}

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css

@@ -173,23 +173,36 @@
 		border-left: solid var(--vscode-inlineEdit-modifiedChangedTextBackground) 3px;
 	}
 
-	.inlineCompletions-char-delete.single-line-inline,
-	.inlineCompletions-char-insert.single-line-inline {
+	.inlineCompletions-char-delete.single-line-inline { /* Editor Decoration */
 		border-radius: 4px;
 		border: 1px solid var(--vscode-editorHoverWidget-border);
+		margin: -2px 0 0 -2px;
 		padding: 2px;
 	}
 
+	.inlineCompletions-char-insert.single-line-inline { /* Inline Decoration */
+		padding: 2px 0;
+		border-top: 1px solid var(--vscode-editorHoverWidget-border);
+		border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
+	}
+	.inlineCompletions-char-insert.single-line-inline.start {
+		padding-left: 2px;
+		border-top-left-radius: 4px;
+		border-bottom-left-radius: 4px;
+		border-left: 1px solid var(--vscode-editorHoverWidget-border);
+	}
+	.inlineCompletions-char-insert.single-line-inline.end {
+		padding-right: 2px;
+		border-top-right-radius: 4px;
+		border-bottom-right-radius: 4px;
+		border-right: 1px solid var(--vscode-editorHoverWidget-border);
+	}
+
 	.inlineCompletions-char-delete.single-line-inline.empty,
 	.inlineCompletions-char-insert.single-line-inline.empty {
 		display: none;
 	}
 
-	/* Adjustments due to being a decoration */
-	.inlineCompletions-char-delete.single-line-inline {
-		margin: -2px 0 0 -2px;
-	}
-
 	.inlineCompletions.strike-through {
 		text-decoration-thickness: 1px;
 	}