html formatting obscures hierarchy in some cases

Prettier 1.15.2 Playground link

Input:

<h3 class="timeline-title">
  <gg-inline-editable-text
    [value]="file.filename"
    (updateValue)="saveFilename($event)"
    [hasEditAccess]="hasEditAccess">
    <gg-downloadable-file [file]="file"></gg-downloadable-file>
  </gg-inline-editable-text><span *ngIf="file.filepageid !== filepage.filepageid">Moved to: 
    <gg-item-link [apiId]="{type: 'filepages', id: file.filepageid.toString()}"></gg-item-link></span>
</h3>

Output:

<h3 class="timeline-title">
  <gg-inline-editable-text
    [value]="file.filename"
    (updateValue)="saveFilename($event)"
    [hasEditAccess]="hasEditAccess"
  >
    <gg-downloadable-file
      [file]="file"
    ></gg-downloadable-file> </gg-inline-editable-text
  ><span *ngIf="file.filepageid !== filepage.filepageid"
    >Moved to:
    <gg-item-link
      [apiId]="{ type: 'filepages', id: file.filepageid.toString() }"
    ></gg-item-link
  ></span>
</h3>

Expected behavior:

<h3 class="timeline-title">
  <gg-inline-editable-text
    [value]="file.filename"
    (updateValue)="saveFilename($event)"
    [hasEditAccess]="hasEditAccess"
  >
    <gg-downloadable-file
      [file]="file"
    ></gg-downloadable-file>
  </gg-inline-editable-text><span 
      *ngIf="file.filepageid !== filepage.filepageid"
    >Moved to:
    <gg-item-link
      [apiId]="{ type: 'filepages', id: file.filepageid.toString() }"
    ></gg-item-link
  ></span>
</h3>

This is an example from our code. I’ve included a much larger example in the prettier playground link. There are a few things here that members of our team find ugly, but the biggest issue is the indenting of the closing tag of the </gg-inline-editable-text> element. Including it inline after the </gg-downloadable-file> tag makes it hard to see the hierarchy of the file. Inlining elements when everything fits on one line seems sensible, but otherwise, when working with html, being able to see the hierarchy is important.

(Separately, and if there is interest in this, I could open another issue, one team member (the boss) has said he hates the dangling closing > that are alone on a line, and would prefer to see them on the previous line. in his words, “I’ve never seen it done like that in 20+ years.” The dangling >'s don’t bother me, although they aren’t exactly pretty; it would make it hard to see when the tag ends and other content begins if the the > were simply moved to the previous line. But this is in part because there is a single indent width for both the contents of a tag additional content after a closing tag. Perhaps if wrapped attributes were indented to double the standard indentation, those closing >'s could hug the previous line?)

[karptonite]

@pmattke I think that is because your version would add meaningful whitespace before and after the ng-content tag.

[paulheising]

Also occured to me:

Input:

<markdown [class.big-initial]="showBigInitial"><ng-content></ng-content></markdown>

Actual Output:

<markdown [class.big-initial]="showBigInitial"
  ><ng-content></ng-content
></markdown>

Why does it put the closing > of the markdown and the ng-content tag in the next line?

Expected Output would be:

<markdown [class.big-initial]="showBigInitial">
  <ng-content></ng-content>
</markdown>