Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 17:19:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
using backgrounds instead of underline
This commit is contained in:
Aiday Marlen Kyzy
2024-09-26 11:55:58 +02:00
committed by GitHub
parent 9a91d3382e
commit 31afbe3443
2 changed files with 28 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/editor/browser/controller/editContext/native/nativeEditContext.css
+10 -40
View File
@@ -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;
}
&.underline-thickness-thin {
text-decoration-thickness: 1px;
}
&.underline-thickness-thick {
text-decoration-thickness: 2px;
}
.monaco-editor .edit-context-composition-none {
background-color: transparent;
}
.monaco-editor .edit-context-composition-secondary {
background-color: var(--vscode-editor-selectionBackground);
}
.monaco-editor .edit-context-composition-primary {
background-color: var(--vscode-editor-selectionHighlightBackground);
}
src/vs/editor/browser/controller/editContext/native/nativeEditContext.ts
+18 -6
View File
@@ -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,
}
});
});