Fix showErrors() method of CodeEditor component

[nhogle]

• This was causing WebMaker to throw the following error whenever the showErrors() method was called, preventing the desired behavior of showing the errors in the CodeMirror gutter:

  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'instance')

Note: The only relevant changes are lines 190, 191. The remaining changes were automatically performed by the git pre-commit hook.

[chinchang]

Thanks for the fix here @nhogle 🙇 And great catch! I am curious how did you come to know this thing was not working?

[nhogle]

@chinchang : Great, thanks again! I use WebMaker a lot, but I was noticing that sometimes, my sketches wouldn't auto-update when I was editing the Coffeescript. I realized that this was due to syntax errors in the code, but there was no visual cue to show that this was the case. I would have to copy/paste my code into another editor to reveal the syntax error.

Out of curiosity, I opened DevTools to see if I could find my syntax errors in the dev console or something. Then I noticed that the showErrors() method was actually throwing this error:

TypeError: Cannot read properties of undefined (reading 'instance')

I figured out a way to fix this issue on the live site by putting a breakpoint inside showErrors(), and pasting the below snippet into the console, basically monkey-patching the existing showErrors() method. It was difficult, because I was working with the minified code on the live site, and object types names were obfuscated, but I cross-referenced the code with GitHub.

// In bundle.295b2.js:formatted, this is at line 33221.
// Put a breakpoint there and then execute the code snippet below vvvv
// Execute this codesnippet inside of showErrors:
this.showErrors = (e) => {
    const editor = this.instance;
    "codemirror" === this.props.type && e.forEach((function(e) {
        editor.operation((function() {
            var t = document.createElement("div");
            t.setAttribute("data-title", e.message),
            t.classList.add("gutter-error-marker"),
            editor.setGutterMarker(e.lineNumber, "error-gutter", t)
        }
        ))
    }
    ))
};

I was doing a similar thing with the Tab key issue. Of course this would only last as long as I kept the tab open, and it was getting annoying to keep monkey patching every time I wanted to use WebMaker. So! I figured I'd fork it, build it, and submit some PRs! Don't you just love open source? ;)

[chinchang]

Truly mind-blowing, of course. Thanks for all your work here! 🙇 Your fixes are marked in the hall of fame of Web Maker, forever! :)