未验证 提交 d49c5f3b 编写于 作者: A Alex Dima

Use mtkz for whitespace parts that define a width

上级 310c969f
......@@ -37,6 +37,10 @@
width: 100%;
}
.monaco-editor .mtkz {
display: inline-block;
}
/* TODO@tokenization bootstrap fix */
/*.monaco-editor .view-line > span > span {
float: none;
......
......@@ -88,5 +88,6 @@ registerThemingParticipant((theme, collector) => {
const invisibles = theme.getColor(editorWhitespaces);
if (invisibles) {
collector.addRule(`.monaco-editor .mtkw { color: ${invisibles} !important; }`);
collector.addRule(`.monaco-editor .mtkz { color: ${invisibles} !important; }`);
}
});
......@@ -764,10 +764,11 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render
const partEndIndex = part.endIndex;
const partType = part.type;
const partRendersWhitespace = (renderWhitespace !== RenderWhitespace.None && (partType.indexOf('mtkw') >= 0));
const partRendersWhitespaceWithWidth = partRendersWhitespace && !fontIsMonospace && (partType === 'mtkw'/*only whitespace*/ || !containsForeignElements);
charOffsetInPart = 0;
sb.appendASCIIString('<span class="');
sb.appendASCIIString(partType);
sb.appendASCIIString(partRendersWhitespaceWithWidth ? 'mtkz' : partType);
sb.appendASCII(CharCode.DoubleQuote);
if (partRendersWhitespace) {
......@@ -787,13 +788,10 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render
}
}
if (!fontIsMonospace) {
const partIsOnlyWhitespace = (partType === 'mtkw');
if (partIsOnlyWhitespace || !containsForeignElements) {
sb.appendASCIIString(' style="display:inline-block;width:');
sb.appendASCIIString(String(spaceWidth * partContentCnt));
sb.appendASCIIString('px"');
}
if (partRendersWhitespaceWithWidth) {
sb.appendASCIIString(' style="width:');
sb.appendASCIIString(String(spaceWidth * partContentCnt));
sb.appendASCIIString('px"');
}
sb.appendASCII(CharCode.GreaterThan);
......
......@@ -195,8 +195,8 @@ suite('viewLineRenderer.renderLine', () => {
createPart(48, 12),
]);
let expectedOutput = [
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtk2">export</span>',
'<span class="mtk3">\u00a0</span>',
'<span class="mtk4">class</span>',
......@@ -207,8 +207,8 @@ suite('viewLineRenderer.renderLine', () => {
'<span class="mtk9">\u00a0</span>',
'<span class="mtk10">//\u00a0</span>',
'<span class="mtk11">http://test.com</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
'<span class="mtkw" style="display:inline-block;width:30px">\u00b7\u00b7\u00b7</span>'
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
'<span class="mtkz" style="width:30px">\u00b7\u00b7\u00b7</span>'
].join('');
let expectedOffsetsArr = [
[0],
......@@ -897,10 +897,10 @@ suite('viewLineRenderer.renderLine 2', () => {
null,
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtk2">He</span>',
'<span class="mtk3">llo\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'</span>',
].join('')
);
......@@ -919,12 +919,12 @@ suite('viewLineRenderer.renderLine 2', () => {
null,
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtk2">He</span>',
'<span class="mtk3">llo\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'</span>',
].join('')
);
......@@ -943,11 +943,11 @@ suite('viewLineRenderer.renderLine 2', () => {
null,
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtk2">He</span>',
'<span class="mtk3">llo\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'</span>',
].join('')
);
......@@ -966,15 +966,15 @@ suite('viewLineRenderer.renderLine 2', () => {
null,
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u2192\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u2192\u00a0</span>',
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
'<span class="mtk2">He</span>',
'<span class="mtk3">llo\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\uffeb</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u2192\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:20px">\u00b7\uffeb</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u2192\u00a0</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'</span>',
].join('')
);
......@@ -995,13 +995,13 @@ suite('viewLineRenderer.renderLine 2', () => {
[
'<span>',
'<span class="">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
'<span class="mtk2">He</span>',
'<span class="mtk3">llo\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\uffeb</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u2192\u00a0</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'<span class="mtkz" style="width:20px">\u00b7\uffeb</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u2192\u00a0</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
'</span>',
].join('')
);
......@@ -1046,11 +1046,11 @@ suite('viewLineRenderer.renderLine 2', () => {
[
'<span>',
'<span class="mtk1">it</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
'<span class="mtk1">it</span>',
'<span class="mtk2">\u00a0</span>',
'<span class="mtk3">it</span>',
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
'<span class="mtk3">it</span>',
'</span>',
].join('')
......@@ -1071,12 +1071,12 @@ suite('viewLineRenderer.renderLine 2', () => {
null,
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">Hel</span>',
'<span class="mtk1">lo</span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk2">world!</span>',
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
'</span>',
].join('')
);
......@@ -1118,12 +1118,12 @@ suite('viewLineRenderer.renderLine 2', () => {
[new LineRange(0, 14)],
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">Hel</span>',
'<span class="mtk1">lo</span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk2">world!</span>',
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
'</span>',
].join('')
);
......@@ -1143,7 +1143,7 @@ suite('viewLineRenderer.renderLine 2', () => {
[new LineRange(0, 5)],
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">Hel</span>',
'<span class="mtk1">lo</span>',
'<span class="mtk2">\u00a0world!\u00a0\u00a0\u00a0</span>',
......@@ -1167,11 +1167,11 @@ suite('viewLineRenderer.renderLine 2', () => {
[new LineRange(0, 5), new LineRange(9, 14)],
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">Hel</span>',
'<span class="mtk1">lo</span>',
'<span class="mtk2">\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
'</span>',
].join('')
);
......@@ -1192,11 +1192,11 @@ suite('viewLineRenderer.renderLine 2', () => {
[new LineRange(9, 14), new LineRange(0, 5)],
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">Hel</span>',
'<span class="mtk1">lo</span>',
'<span class="mtk2">\u00a0world!</span>',
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
'</span>',
].join('')
);
......@@ -1214,9 +1214,9 @@ suite('viewLineRenderer.renderLine 2', () => {
[new LineRange(0, 1), new LineRange(1, 2), new LineRange(2, 3)],
[
'<span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">*</span>',
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
'<span class="mtkz" style="width:10px">\u00b7</span>',
'<span class="mtk0">S</span>',
'</span>',
].join('')
......@@ -1329,7 +1329,7 @@ suite('viewLineRenderer.renderLine 2', () => {
let expected = [
'<span>',
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
'<span class="mtk3 before">b</span>',
'<span class="mtk3">la</span>',
'</span>'
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册