React: Add inline syntax errors to website editor

[gaearon]

@tsriram suggested a proof of concept in

I like that. I wonder if we can do it with the new editor.

[bvaughn]

We use the LiveEditor from FormidableLabs/react-live for the left hand side of the new editor, so we'd need to either re-implement this component ourselves (not ideal) or add this functionality upstream. Not sure if they'd be interested in the latter, given they already have a LiveError component.

cc @philpl for thoughts 😄

[kitten]

@bvaughn I’d be super up for it! 😲

The biggest conflict I see is with adding custom transpilers. The implementation of this feature might vary slightly depending on what transpiler is used unfortunately 🤐

Also the site is currently using a fully custom transpiler on top of Babel-standalone.

But once we reconcile these problems, I’m sure it’s not too hard to add

[bvaughn]

Maybe there's a custom format we could define that would enable the user to inject error messages with a row and (optional) column number that would be sufficiently compiler-agnostic?

type compilationErrors = Array<{
  message: string,
  rowNumber: number,
  columnNumber?: number
}>

[kitten]

@bvaughn that'd be great! Could just be added to the Editor without much effort.

Not sure how soon I'll have time for this. Do you mind copying this issue with the suggested API over into an issue on react-live please? :)

[bvaughn]

You got it! FormidableLabs/react-live/issues/41

[bvaughn]

Moved to reactjs/reactjs.org/issues/10