Invalid Config File Error Block for React

No. The text is local state in the page, and Apply rewrites that text only. The Copy button is real and writes whatever the field holds. To wire it for real, feed the field your file's contents, run your own validator in place of problemsOf, and write the fixed text back yourself.

A small JSON parser in the file reads the text and keeps the line and column of every key and value. If the text is not valid JSON, it reports the first syntax problem, such as a comma before a closing brace, and nothing else. If it is valid, three rules run on it: the server port must be a whole number from 1 to 65535, the deploy section needs a region, and its size is at most 1000 MB, plus a name and the two sections being present. Change the rules in the file to match your schema.

Only what it can change safely: it puts the sample port 8080 or the sample size 512 over a bad value, and adds a region line to the deploy section. A problem with no automatic fix, such as a missing section or a syntax error, stays in the list, and the button says there are no fixes to apply. Undo puts back the text from before the last Apply. When no problem is left, the headline and its sentence say the config is valid, in the same space, so nothing moves.

Its line is shaded in the window, which scrolls to bring it into view, and the status line says where it is and what is wrong. The radios are a normal group, so the arrow keys move between problems. The list shows the first three and the heading counts the rest.

The window stays left to right, as code should, and its gutter and the field scroll together inside one region. The problems list, the headline and the buttons follow the page direction, and each sentence is isolated so its punctuation stays put.

The headline, the button and the problems come first, then the window, which is a little shorter and scrolls inside itself. Nothing makes the page scroll sideways down to 320 px.