Feature request: option to re-indent code

[foucist]

Would be nice to re-indent the whole page of code when things end up off from bad pastes and such.

[panoply]

It would be easy to integrate this feature with Sparser and PrettyDiff or better yet Unibeautify which supports 37 languages and can digest JS Beautify, ES Lint, Prettier rulesets enabling users the ability to use their preferred tool.

[porsager]

Yeah, I've been hesitant adding it because I don't want to increase bundle size too much, but I'm thinking it could be nice if it's loaded async once the feature is used, so I'm game 😊 PR welcome 😉

[panoply]

I've been going over the Flems codebase (it's beautiful btw) but where best to apply formatting to the string content? Applying within the actions.js file would be how I'd initially tackle this, thoughts?

Edit:

Additionally, providing the option to auto-format would require some form of diffing, so on second thought, it's probably best creating a separate function, as it would be helpful for users to be able to toggle formatting and apply on an action basis (eg: not formatting on each change).

[fuzetsu]

Slightly unrelated, but I made this userscript a while back: https://github.com/fuzetsu/userscripts/blob/master/prettier-anything/prettier-anything.user.js

When you highlight some code and press Alt+Shift+I it loads prettier, formats the code and replaces the selection. If you also hold Ctrl it will instead copy the formatted code to your clipboard. Works well on flems (and most other websites).

Adding something like this to flems would probably work well enough.

[panoply]

Very nice @fuzetsu – Will have a look (P.S, recently used mergerino on a project, very cool) – Currently I'm applying formatting using Sparser + PrettyDiff mostly because it's language aware and rather efficient. Prettier can be restrictive.

[fuzetsu]

Thanks @panoply! and fair enough, prettier is opinionated for sure. Not for everyone.

[panoply]

Few hours later....

A multitude of formatters could be supported here, including Prettier. Formatting using a key-binding (hotkey), upon paste or manually invoked in the editor using a button (this would require UI changes) would be my suggestions. Formatting upon type (keystroke) is where things get a little more difficult, it's possible but you'd be continuously passing editor contents to a formatter parser, so maybe formatting in intervals could be a better solution to auto format.

could be nice if it's loaded async once the feature is used

Much like the compilers are applied, the formatters could be loaded in the same way, upon demand and asynchronously. If in the future flems was to support additional languages/variations like HTML (Pug) or Markdown (.md) providing support wouldn't be difficult.

What about defining rules?

Defining formatting rules could look something like below (just an example, hasn't been thought through) but here the iframe preview is replaced with a JSON code editor, where rulessets are applied based on the formatter, of course it be a lot more simple than this, I just like the aesthetic.

Moving forward, I'll take a stab at this over the next couple of weeks.