🧙 🧰 Display errors inline

[Irev-Dev]

When a user's code has errors, we should have a way of showing them, maybe

• Toast message?
• A list of all errors that can can hyperlink to the line of code where the error occurred?
• A way of highlighting them inline

[Irev-Dev]

From a chat on Slack probably a error toast message when the error occurs, and then highlighting the range in the editor where the error occurred would be good (with bubble message)

For toast message Frank had previously added, has docs here https://react-hot-toast.com/ and an example of it's use in settings.tsx

For highlighting the line, we're using codemirror. One thing to note is that the library had a big re-write with version 6, so if you google for things, make sure you're not looking at version 5 or lower. The library has an extensions API to add functionality, we already have an example of this in highlightextension.ts, of which you can probably reuse some of it. The main thing our extension does is add a class characters in range, in this case bg-yellow-200 but in this case we probably want something like decoration-wavy underline decoration-red-500 (those are tailwind utility classes that should get us to something like), @franknoirot let us know if you have a colour preference.

[Irev-Dev]

I'm not sure if it makes sense to create a new extension or make that one more flexible. A new one might make sense just because the bubble functionality is definitely a departure.

This is where the app interacts with that extension in the app's state management https://github.com/KittyCAD/untitled-lang/blob/main/src/useStore.ts#L191

One other bit of context is we're using this react-ified version of code-mirror, it's a pretty light wrapper and doesn't impact how extensions are written anyway. https://github.com/uiwjs/react-codemirror

[adamchalmers]

I don't think toasts are a great UX for errors you code up. Seems like they offer a limited subset of what lints/squiggly lines offer within the actual CodeMirror editor itself.

Specifically:

• toasts can't show many errors, but an error list and in-code lint/error highlighting can.
• toasts disappear after a few seconds, but coder frequently need to read error messages for a long time
• toasts don't show where the error occurred

So, I suggest maybe we use the in-editor annotations (error/lint highlighting) and the error panel for coding errors (syntax/semantic errors). We can use toasts for other purposes though, e.g. "re-establishing connection to the engine" and "connection restored" messages?

[Irev-Dev]

So no toast at all, not even "there was an error, check the log"?

[adamchalmers]

I'm just thinking about how I code in an IDE -- I've never seen an IDE use toasts before. It seems kinda redundant if we're going to show an error in the text editor itself. Surely users will notice a big red line underneath their code, wouldn't showing a little toast as well just be redundant?

[adamchalmers]

Done in https://github.com/KittyCAD/modeling-app/pull/197