remove line background color when word highlights are shown

Author: remorses

packages/core/src/renderables/Diff.ts

@@ -283,11 +283,14 @@ export class DiffRenderable extends Renderable {
         }
       }
 
+      // If we have word highlights, don't show the full line background - only the word highlights
+      const hasWordHighlights = leftHighlights.length > 0 || rightHighlights.length > 0
+
       if (remove) {
         leftLines.push({
           content: remove.content,
           lineNum: remove.lineNum,
-          color: this._removedBg,
+          color: hasWordHighlights ? this._contextBg : this._removedBg,
           sign: {
             after: " -",
             afterColor: this._removedSignColor,
@@ -307,7 +310,7 @@ export class DiffRenderable extends Renderable {
         rightLines.push({
           content: add.content,
           lineNum: add.lineNum,
-          color: this._addedBg,
+          color: hasWordHighlights ? this._contextBg : this._addedBg,
           sign: {
             after: " +",
             afterColor: this._addedSignColor,
@@ -704,29 +707,37 @@ export class DiffRenderable extends Renderable {
           for (const line of processedBlock.leftLines) {
             if (line.type === "empty") continue
             contentLines.push(line.content)
+            // If we have word highlights, use context background instead of removed background
+            const hasWordHighlights = line.inlineHighlights && line.inlineHighlights.length > 0
             lineColors.set(lineIndex, {
               gutter: this._removedLineNumberBg,
-              content: this._removedContentBg ?? this._removedBg,
+              content: hasWordHighlights
+                ? (this._contextContentBg ?? this._contextBg)
+                : (this._removedContentBg ?? this._removedBg),
             })
             lineSigns.set(lineIndex, { after: " -", afterColor: this._removedSignColor })
             if (line.lineNum !== undefined) lineNumbers.set(lineIndex, line.lineNum)
-            if (line.inlineHighlights?.length) {
-              inlineHighlights.set(lineIndex, this.toLineHighlights(line.inlineHighlights, this._removedWordBg))
+            if (hasWordHighlights) {
+              inlineHighlights.set(lineIndex, this.toLineHighlights(line.inlineHighlights!, this._removedWordBg))
             }
             lineIndex++
           }
 
           for (const line of processedBlock.rightLines) {
             if (line.type === "empty") continue
             contentLines.push(line.content)
+            // If we have word highlights, use context background instead of added background
+            const hasWordHighlights = line.inlineHighlights && line.inlineHighlights.length > 0
             lineColors.set(lineIndex, {
               gutter: this._addedLineNumberBg,
-              content: this._addedContentBg ?? this._addedBg,
+              content: hasWordHighlights
+                ? (this._contextContentBg ?? this._contextBg)
+                : (this._addedContentBg ?? this._addedBg),
             })
             lineSigns.set(lineIndex, { after: " +", afterColor: this._addedSignColor })
             if (line.lineNum !== undefined) lineNumbers.set(lineIndex, line.lineNum)
-            if (line.inlineHighlights?.length) {
-              inlineHighlights.set(lineIndex, this.toLineHighlights(line.inlineHighlights, this._addedWordBg))
+            if (hasWordHighlights) {
+              inlineHighlights.set(lineIndex, this.toLineHighlights(line.inlineHighlights!, this._addedWordBg))
             }
             lineIndex++
           }
@@ -980,11 +991,15 @@ export class DiffRenderable extends Renderable {
       if (line.hideLineNumber) {
         leftHideLineNumbers.add(index)
       }
+      const hasWordHighlights = line.inlineHighlights && line.inlineHighlights.length > 0
       if (line.type === "remove") {
         const config: LineColorConfig = {
           gutter: this._removedLineNumberBg,
         }
-        if (this._removedContentBg) {
+        // If we have word highlights, use context background instead of removed background
+        if (hasWordHighlights) {
+          config.content = this._contextContentBg ?? this._contextBg
+        } else if (this._removedContentBg) {
           config.content = this._removedContentBg
         } else {
           config.content = this._removedBg
@@ -1004,8 +1019,8 @@ export class DiffRenderable extends Renderable {
       if (line.sign) {
         leftLineSigns.set(index, line.sign)
       }
-      if (line.inlineHighlights?.length) {
-        leftInlineHighlights.set(index, this.toLineHighlights(line.inlineHighlights, this._removedWordBg))
+      if (hasWordHighlights) {
+        leftInlineHighlights.set(index, this.toLineHighlights(line.inlineHighlights!, this._removedWordBg))
       }
     })
 
@@ -1016,11 +1031,15 @@ export class DiffRenderable extends Renderable {
       if (line.hideLineNumber) {
         rightHideLineNumbers.add(index)
       }
+      const hasWordHighlights = line.inlineHighlights && line.inlineHighlights.length > 0
       if (line.type === "add") {
         const config: LineColorConfig = {
           gutter: this._addedLineNumberBg,
         }
-        if (this._addedContentBg) {
+        // If we have word highlights, use context background instead of added background
+        if (hasWordHighlights) {
+          config.content = this._contextContentBg ?? this._contextBg
+        } else if (this._addedContentBg) {
           config.content = this._addedContentBg
         } else {
           config.content = this._addedBg
@@ -1040,8 +1059,8 @@ export class DiffRenderable extends Renderable {
       if (line.sign) {
         rightLineSigns.set(index, line.sign)
       }
-      if (line.inlineHighlights?.length) {
-        rightInlineHighlights.set(index, this.toLineHighlights(line.inlineHighlights, this._addedWordBg))
+      if (hasWordHighlights) {
+        rightInlineHighlights.set(index, this.toLineHighlights(line.inlineHighlights!, this._addedWordBg))
       }
     })