TemplateString transform ruins indentation of multi-line strings

[nene]

When a string concatenation is used to split string to multiple lines for better readability like so:

var msgBox = $(
     "  <div class='" + cssClass + "'> " +
     "    <a class='icon-close popup-close-button' title='Close'></a> " +
     "    <div class='alertContent'> " +
     "      <h1 class='title'>&nbsp;</h1> " +
     "      <div class='message'>&nbsp;</div> " +
     "    </div> " +
     "  </div> "
);

then Lebab replaces it with an ugly template string:

var msgBox = $(
    `  <div class='${cssClass}'>     <a class='icon-close popup-close-button' title='Close'></a>     <div class='alertContent'>       <h1 class='title'>&nbsp;</h1>       <div class='message'>&nbsp;</div>     </div>   </div> `
);

...completely ruining the nice original indentation.

What should happen instead?

In theory it would be nice to replace this with something like:

var msgBox = $(`
   <div class='${cssClass}'>
     <a class='icon-close popup-close-button' title='Close'></a>
     <div class='alertContent'>
       <h1 class='title'>&nbsp;</h1>
       <div class='message'>&nbsp;</div>
     </div>
   </div>
`);

but we can't risk adding newlines to string, as that might change the meaning of the code. Even when the original string did contain newlines at the end of each line, we'll risk ruining the indentation, as we also can't just add arbitrary spaces to the string. A result could look quite ugly:

    function foo() {
        if (true) {
            var msgBox = $(
`   <div class='${cssClass}'>
     <a class='icon-close popup-close-button' title='Close'></a>
     <div class='alertContent'>
       <h1 class='title'>&nbsp;</h1>
       <div class='message'>&nbsp;</div>
     </div>
   </div>`);
            someFn();
        }
    }

I guess the only really safe way is to avoid the conversion of such multi-line concatenation altogether.

[grumd]

not a bad solution would be to replace this

var msgBox = $(
     "  <div class='" + cssClass + "'> " +
     "    <a class='icon-close popup-close-button' title='Close'></a> " +
     "    <div class='alertContent'> " +
     "      <h1 class='title'>&nbsp;</h1> " +
     "      <div class='message'>&nbsp;</div> " +
     "    </div> " +
     "  </div> "
);

with this

var msgBox = $(
     `  <div class='${cssClass}'> ` +
     `    <a class='icon-close popup-close-button' title='Close'></a> ` +
     `    <div class='alertContent'> ` +
     `      <h1 class='title'>&nbsp;</h1> ` +
     `      <div class='message'>&nbsp;</div> ` +
     `    </div> ` +
     `  </div> `
);