Format HTML like Prettier

Thank you so much for this plugin. I've been looking for the like of it for a while now!

I noticed the plugin doesn't format HTML like how Prettier's own HTML formatter normally does. For example, given this snippet:

<h1>{{ hello | world }}</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Click me!</button>

Prettier changes it into the following: (playground)

<h1>{{ hello | world }}</h1>
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
>
  Click me!
</button>

But this plugin (v0.4.6) changes it to:

<h1>
  {{ hello | world }}
</h1>
<button type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal">
  Click me!
</button>

My Observations

Here you're breaking every non-inline element (like the h1) so that the tags stay on separate lines from the children, even when they would all fit in one line: https://github.com/trivago/prettier-plugin-twig-melody/blob/3d999951a21ef85846397cd0062aa6d4261911c2/src/print/Element.js#L51-L68 Prettier only appears to break when they wouldn't fit in one line.
When an element with many (or long) attributes is broken into multiple lines, Prettier tries to put every attribute indented on its own line. It also puts the opening "<" and the element name together on a separate line and the closing ">" on its own line. It looks like here's where this feature could be implemented: https://github.com/trivago/prettier-plugin-twig-melody/blob/3d999951a21ef85846397cd0062aa6d4261911c2/src/print/Element.js#L22

It would be nice to have this plugin imitate Prettier's formatting. If you're cool with this proposal (and I hope you are 😃) I could create a pull request to try to resolve this.

Thank you.

trivago / prettier-plugin-twig-melody

Format HTML like Prettier #68