feat(code-editor): lint and fold json

[anderssonjohan]

Adds linting and folding support for JSON! 🎉

(needs tooltip CSS from @Kiarokh or @LucyChyzhova !)

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-1818/

[dorisenthecat]

Since we have gotten questions from users that didn't know that double vs single quotes matters in json I tried this

This linter is technically correct and shows a parser error, for none developers it highlights the line before the error and says something incomprehensible? It took me several minutes just to understand --------------------^ wasn't a line break but an arrow 😄 But getting this in a screenshot from a user asking for help is much much better than screenshot of a wall of json.

Compared to vscode

[adrianschmidt]

Prettier is able to autofix single-quotes in json:

Link to Prettier playground for json

Is there a Prettier-plugin for the code editor? Or could auto-fix be enabled for the linter that's added here?

[anderssonjohan]

Prettier is able to autofix single-quotes in json:

Link to Prettier playground for json

Is there a Prettier-plugin for the code editor? Or could auto-fix be enabled for the linter that's added here?

There's a formatting addon to codemirror but I haven't yet found a codemirror + prettier example but it should be doable: https://discuss.codemirror.net/t/formatting-the-code/2442/5

The question is how much all this will add to the lime-elements dist size; Will it be ok or too much?

[dorisenthecat]

This so cool @anderssonjohan 🥳

[lime-ci]

🎉 This PR is included in version 36.0.0-next.19 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[anderssonjohan]

@adrianschmidt @dorisenthecat The error caught by JSON.parse is actually better than the one from json-lint :/
See the message below the code editor in this screenshot:

[adrianschmidt]

I don't want any error message, I want it to be fixed automatically 😄

But yeah, in lieu of that, use the one that gives better error messages, of course! 👍

[lime-ci]

🎉 This PR is included in version 36.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀