Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: 1.59.0 OS Version: Debian 10 Monaco Version: 0.27.0 Steps to Reproduce VS Code: Wrapping Indent to Indent and Wrapping Strategy to Simple (default). a line with wider/narrower characters, note it doesn't wrap at the right-border (after/before, respectively) but does indent. Wrapping Strategy to Advanced. line now wraps at the right-border, but no longer indents. : The line wraps at the right-border and indents one tab after doing so Monaco Playground script: Separately, the indent and the wrapping work. Together, they fail. Given that both halves of this (indent, wrap-breakpoint) work when the other is disabled, it looks like a bug to me.
<strikeDoes help you?</strikeIgnore that - I see you are already experimenting with it.
/assign
is currently not compatible with . The reason is the following: means that we delegate the wrap points computations to the browser. This works by us creating a dom node for each line of the editor, setting the contents of each dom node to the text on each line, and then setting a specific width. We then proceed to use browser APIs to detect the wrapping points. This is super slow (causes a forced browser layout). To add support for , we would need to do the above twice: the first time with the dom nodes set to the width of the editor, then detect the wrapping points of each first line, and then repeat this process again with all the dangling lines, but this time with a dom node width smaller than the editor width (i.e. editor width - indent width). This would be double super slow (it would cause a forced browser layout again). We have therefore opted to not support with .
Wouldn't doing something like on the DOM node allow it to be done in one pass?
Yes, indeed, that seems to do the trick! (I tried at ). Would you be interested in contributing this as a PR. The relevant building is and that method could get passed in the , and depending on that use your technique.
Well, that was a trivial fix. Only change from my suggestion is to use the size of spaces instead of ch.

Discussion:
} const overallWidth = Math.round(firstLineBreakColumn * fontInfo.typicalHalfwidthCharacterWidth); <del> // Cannot respect WrappingIndent.Indent and WrappingIndent.DeepIndent because that would require // two dom layouts, in order to first set the width of the first line, and then set the width of the wrapped lines if (wrappingIndent === WrappingIndent.Indent || wrappingIndent === WrappingIndent.DeepIndent) { wrappingIndent = WrappingIndent.Same; } </del> <ins> const additionalIndent = (wrappingIndent === WrappingIndent.DeepIndent ? 2 : wrappingIndent === WrappingIndent.Indent ? 1 : 0); const additionalIndentSize = Math.round(tabSize * additionalIndent); const additionalIndentLength = Math.ceil(fontInfo.spaceWidth * additionalIndentSize); </ins> const containerDomNode = document.createElement('div'); Configuration.applyFontInfoSlow(containerDomNode, fontInfo);

} const renderLineContent = lineContent.substr(firstNonWhitespaceIndex); <del> const tmp = renderLine(renderLineContent, wrappedTextIndentLength, tabSize, width, sb); </del> <ins> const tmp = renderLine(renderLineContent, wrappedTextIndentLength, tabSize, width, sb, additionalIndentLength); </ins> firstNonWhitespaceIndices[i] = firstNonWhitespaceIndex; wrappedTextIndentLengths[i] = wrappedTextIndentLength; renderLineContents[i] = renderLineContent;

} const firstNonWhitespaceIndex = firstNonWhitespaceIndices[i]; <del> const wrappedTextIndentLength = wrappedTextIndentLengths[i]; </del> <ins> const wrappedTextIndentLength = wrappedTextIndentLengths[i] + additionalIndentSize; </ins> const visibleColumns = allVisibleColumns[i]; const breakOffsetsVisibleColumn: number[] = [];

SPAN_MODULO_LIMIT = 16384 } <del> function renderLine(lineContent: string, initialVisibleColumn: number, tabSize: number, width: number, sb: IStringBuilder): [number[], number[]] { sb.appendASCIIString('<div style="width:'); </del> <ins> function renderLine(lineContent: string, initialVisibleColumn: number, tabSize: number, width: number, sb: IStringBuilder, wrappingIndentLength: number): [number[], number[]] { if (wrappingIndentLength !== 0) { let hangingOffset = String(wrappingIndentLength); sb.appendASCIIString('<div style="text-indent: -'); sb.appendASCIIString(hangingOffset); sb.appendASCIIString('px; padding-left: '); sb.appendASCIIString(hangingOffset); sb.appendASCIIString('px; box-sizing: border-box; width:'); } else { sb.appendASCIIString('<div style="width:'); } </ins> sb.appendASCIIString(String(width)); sb.appendASCIIString('px;">'); // if (containsRTL) {