replacing the JUCE code editor with react?

[rorywalsh]

Hi @nick-thompson. Great framework, thanks for sharing. I was able to get the demo built in no time 👍

So I'm a long suffering user of the juce::CodeEditorComponent. I find myself constantly hacking it just to provide functionality that comes out of the box with other editors. There are now a growing list list of excellent JS editor components. I'm wondering if it would be possible to use one of these, say ACE editor, within your framework, all neatly tied back to a JUCE::FileBasedDocument? I've a feeling you might say yes, in which case can you provide me with some direction, I really don't know React at all 😬 But I'd be willing to put in some work if it meant I could give my users access to a good text editor ;)

[nick-thompson]

Hey @rorywalsh that's a great question, with an answer that you might find unfortunate :). It would likely be extremely hard to get one of the existing js editors (like ACE) working against React-JUCE. Those editors are just built against a different DOM that has a proper CSS parsing engine. For react-juce to reach that level of compatibility with existing js frameworks would require that react-juce basically become a browser, which we don't want to do.

If you really want to pull something like ACE into your project, I'd recommend using a WebView (i.e. juce::WebBrowserComponent) and using a proper web frontend which can support js code editors like that out of the box

[rorywalsh]

Thanks for the reply Nick. It's a pity this isn't possible. I thought I was after cracking it! I'm still interested in learning more about your framework though. I've lots of react tutorials lined up.

I went down the road of the WebBrowserComponent before, but I had issues setting up communication between the editor and the main app. The issue I had was I had no idea how to do it 😆 I guess it should be possible to set up some kind of hooks between the webview and the main app, but I've no idea how.

[nick-thompson]

Right, it's not trivial and currently requires a juce fork I believe. Depending on what you're going for here, my other project, Elementary (https://www.elementary.audio/) might be up your alley. It takes care of the "web frontend" for you and lets you write UI + DSP right there in javascript

[rorywalsh]

Nice project. I'll check it out. I guess in the meantime I'm stuck with the JUCE CodeEditorComponent! To be fair, it has served me well for over a decade. I think it's a case of familiarity breeding contempt! Thanks again for you time. Cheers.

[rorywalsh]

Yeah, the issue was the editor hosted in the WebView was eating all keystrokes. So where Ctrl+S should have triggered a save in the JUCE app, it was just consumed by the WebView. I think it's a common issue.

[nick-thompson]

Ah yea, but I think in that case you can catch Ctrl+S inside the webview and send relevant communication to your plugin backend, no?

[rorywalsh]

I would imagine so, but I've no idea how this could be best achieved. Can this be done without embedding a JS engine? Sorry, I realise this is going off-topic, but if you had any references to other projects that do this, or something similar, I would be most appreciative. I guess I can start by trying to work out how you connect React to JUCE.

[nick-thompson]

The webview is a JS engine ;) in the javascript that runs in your webview I think you would essentially write:

document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.keyCode === whateverTheKeyCodeIsForS()) {
    myCommunicationChannelToJuce.postMessage("save");
  }
});

Pseudo-code here, of course, but that's how I would attempt it!

[rorywalsh]

Thanks Nick. Is it just me or is the hierarchy of posts in Github discussions a little out of sync? 😆

This pseudo code looks interesting, but how is the JUCE app supposed to pick up that post message? That's where the main confusion lies for me.

[nick-thompson]

Heh, it is.

Right, yea, that's the piece where you'd need to fork juce and implement the message channel yourself. I believe the juce team is considering adding this feature upstream, but it's not there yet