Wrap long paragraphs

[tao-cumplido]

🚀 Feature Proposal

Text nodes seem to be ignored currently, which results in badly formatted paragraphs to stay that way. It would be nice if long paragraphs would break lines according to the print width setting.

Motivation

Currently the following input

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

results in this output

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

which is even worse, because the closing tag is lost at the end of the line.

Since line breaks followed by arbitrary whitespace results simply in a space in rendered HTML, the same example could be formatted much more readable:

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
  clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
  amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
  diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
  sit amet.
</p>

Example

Please provide an example for how this feature would be used.

Vote

If you agree with my proposal vote with a 👍

[StarpTech]

Hi @tao-cumplido thank you for the proposal. I agree this can be improved. Would you like to send a PR?

[StarpTech]

I think it's not worth to handle these case but please give it a try. Please be aware of such cases. This would require that we can work with template expressions. I provide a package https://github.com/Prettyhtml/prettyhtml/blob/master/packages/expression-parser for that.

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr {{ ' dede' }} hello</p>

should not break in this way because it would manipulate the data

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr {{ ' 
  dede' }} hello
</p>

[StarpTech]

The indentation rule based primary on node-level + tag length (incl attributes), not content. You can still format your text manually and it will be preserved.

[y912765390]

Hello, I don't know why this library is introduced into the Vue project. With this API, the project will not run. They say we can't find the third party.