Overview - Formatter improvements

[eliot-akira]

From: https://github.com/TangibleInc/template-system/issues/67#issuecomment-1917753023

• [x] #72
• [x] #73
• [x] #74

[eliot-akira]

@BenTangible

These formatting issues have been solved by forking and customizing the HTML formatter in Prettier, which is the industry standard and being used for other languages (CSS/SCSS/JS) in the code editor - as well as in our bundler, Tangible Roller.

It was a huge effort, but much better than the previous attempt which would have involved long-term bike-shedding of details. Prettier is popular because it has good defaults, and we can let it handle all the formatting decisions.

---

For the keyboard shortcuts:

• Ctrl + Enter and ⌘ + Enter (macOS) - Beautify entire document

• Ctrl + Alt + f and ⌘ + Alt + f (macOS)

  For backward compatibility, it formats the current line or selected lines. However, Prettier (and formatters in general) do not work well with document fragments, because it doesn't have the necessary context, for example, the indent level of the previous line. In CodeMirror v5, I think this worked differently by reindenting (not formatting) based on editor internals which had that context.

---

We can create new issues for refining the details.