Using different backgrounds on composition instead of underline (microsoft#229806)

using backgrounds instead of underline

Author: aiday-mar

src/vs/editor/browser/controller/editContext/native/nativeEditContext.css

@@ -13,44 +13,14 @@
 	text-wrap: nowrap;
 }
 
-.monaco-editor .edit-context-format-decoration {
-	text-decoration-line: underline;
-	/* TODO @aiday chose a theme color */
-	text-decoration-color: blue;
-	color: var(--vscode-editor-foreground, inherit);
-	opacity: 0.8;
-
-	&.underline-style-none {
-		text-decoration-line: none;
-		text-decoration-style: none;
-	}
-
-	&.underline-style-solid {
-		text-decoration-style: solid;
-	}
-
-	&.underline-style-dotted {
-		text-decoration-style: dotted;
-	}
-
-	&.underline-style-dashed {
-		text-decoration-style: dashed;
-	}
-
-	&.underline-style-wavy {
-		text-decoration-style: wavy;
-	}
-
-	&.underline-thickness-none {
-		text-decoration-line: none;
-		text-decoration-thickness: none;
-	}
+.monaco-editor .edit-context-composition-none {
+	background-color: transparent;
+}
 
-	&.underline-thickness-thin {
-		text-decoration-thickness: 1px;
-	}
+.monaco-editor .edit-context-composition-secondary {
+	background-color: var(--vscode-editor-selectionBackground);
+}
 
-	&.underline-thickness-thick {
-		text-decoration-thickness: 2px;
-	}
+.monaco-editor .edit-context-composition-primary {
+	background-color: var(--vscode-editor-selectionHighlightBackground);
 }

src/vs/editor/browser/controller/editContext/native/nativeEditContext.ts

@@ -27,6 +27,13 @@ import { Position } from '../../../../common/core/position.js';
 import { IVisibleRangeProvider } from '../textArea/textAreaEditContext.js';
 import { PositionOffsetTransformer } from '../../../../common/core/positionToOffset.js';
 
+// Corresponds to classes in nativeEditContext.css
+enum CompositionClassName {
+	NONE = 'edit-context-composition-none',
+	SECONDARY = 'edit-context-composition-secondary',
+	PRIMARY = 'edit-context-composition-primary',
+}
+
 export class NativeEditContext extends AbstractEditContext {
 
 	public readonly domNode: FastDomNode<HTMLDivElement>;
@@ -257,16 +264,21 @@ export class NativeEditContext extends AbstractEditContext {
 			const startPositionOfDecoration = textModel.getPositionAt(offsetOfEditContextText + f.rangeStart);
 			const endPositionOfDecoration = textModel.getPositionAt(offsetOfEditContextText + f.rangeEnd);
 			const decorationRange = Range.fromPositions(startPositionOfDecoration, endPositionOfDecoration);
-			const classNames = [
-				'edit-context-format-decoration',
-				`underline-style-${f.underlineStyle.toLowerCase()}`,
-				`underline-thickness-${f.underlineThickness.toLowerCase()}`,
-			];
+			const thickness = f.underlineThickness.toLowerCase();
+			let decorationClassName: string = CompositionClassName.NONE;
+			switch (thickness) {
+				case 'thin':
+					decorationClassName = CompositionClassName.SECONDARY;
+					break;
+				case 'thick':
+					decorationClassName = CompositionClassName.PRIMARY;
+					break;
+			}
 			decorations.push({
 				range: decorationRange,
 				options: {
 					description: 'textFormatDecoration',
-					inlineClassName: classNames.join(' '),
+					inlineClassName: decorationClassName,
 				}
 			});
 		});