How to disable indentation of subsequent lines in Ace Editor when line wrapping is enabled

Question

I have the following code:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/dreamweaver");
editor.setShowPrintMargin(false);
var session = editor.getSession();
session.setMode("ace/mode/html");
session.setUseWrapMode(true);

.ace_editor {
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<script src="https://cdn.jsdelivr.net/g/[email protected](min/ace.js+min/mode-html.js+min/theme-dreamweaver.js)" type="text/javascript"></script>
<textarea id="editor">&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;p>Pellentesque sed enim vel turpis euismod tristique nec vitae odio. Fusce eu nisi vel ligula vehicula ornare.&lt;/p>
&lt;p>Phasellus ornare purus et ultrices dapibus. Donec ullamcorper dapibus quam non imperdiet.&lt;/p></textarea>

As you can see, the lines that are too long are correctly wrapped to the next line, but for some reason there's some strange indentation in front of the part of the line that wraps. How can I get rid of it?

Answer 1

You need to set the option indentedSoftWrap to false on your session before calling setUseWrapMode. See a working example below:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/dreamweaver");
editor.setShowPrintMargin(false);
var session = editor.getSession();
session.setMode("ace/mode/html");

// Setting the option
session.setOption('indentedSoftWrap', false);

session.setUseWrapMode(true);

.ace_editor {
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<script src="https://cdn.jsdelivr.net/g/[email protected](min/ace.js+min/mode-html.js+min/theme-dreamweaver.js)" type="text/javascript"></script>
<textarea id="editor">&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;p>Pellentesque sed enim vel turpis euismod tristique nec vitae odio. Fusce eu nisi vel ligula vehicula ornare.&lt;/p>
&lt;p>Phasellus ornare purus et ultrices dapibus. Donec ullamcorper dapibus quam non imperdiet.&lt;/p></textarea>

It was initially called indentSubsequentLines^[1] (which - in my opinion - would make more sense), but it was changed^[2] before landing in the codebase of the plugin.