Add Monaco editor

[vemonet]

Hi @pchampin , about #4 I tried running the Monaco editor using the ESM import, and it worked without any issue! (the problem I faced in my app was due to a HighlightJS import conflict). The API to manipulate the Monaco editor is quite straightforward, so I went ahead and updated the app:

• Use the Monaco editor for input and output, it works exactly like before, but now uses the Monaco editor instead of textarea
• Enabled automatic language change when the input/output format changes. It switches between xml, json, and sparql (works for every w3c syntax: nt, turtle, quads...)
• Used the solarized-dark theme from https://github.com/brijeshb42/monaco-themes/tree/master/themes
• Changed the layout to use flexbox, center items, and make it responsive: on medium and large screen the input and output editor will be displayed side by side, on small screen they will be displayed on top of each other
• Added the w3c RDF logo as SVG to use as favicon (feel free to change if you have a better idea in mind)

There is still the placeholder in the input editor to implement, I added a comment with a pointer on how to do it

Here is what it looks like with the solarized-dark theme:

And with the solarized-light theme:

Let me know which changes you would like to do next. I am thinking about this:

• increase the height of the editors depending on screen size
• reduce the size of the title to gain space for the rest, and make it more informative. Something like "SoWasm - RDF playground based on Sophia: validate, convert, canonicalize" on 1 line

[pchampin]

Thanks a lot for this.

I wish you had split the different changes (improve HTML+CSS, add Monaco editor) in separates PRs, but now that it is done, I will not ask you to redo the work.

I suggested a few changes, some of them pure linting, but one of them is actually a regressop,: the input editor was previously made readable once the URL had been loaded, and this is not the case anymore.

[vemonet]

Sorry, I thought separating it in different commits would be enough, and I needed to have the Monaco editors setup to properly do the work on the CSS display

I also removed some leftovers that were not used anymore

[vemonet]

Look good to me, just I am not sure I understand the situation with the input editor being set readonly when using a URL to load the RDF

When I check your original version after loading a URL the editor is still editable. Currently how we implemented in this new version the input editor is set to readonly if a URL is provided

[pchampin]

Look good to me, just I am not sure I understand the situation with the input editor being set readonly when using a URL to load the RDF

When I check your original version after loading a URL the editor is still editable. Currently how we implemented in this new version the input editor is set to readonly if a URL is provided

The editor is set to read-only only while the URL is loading. The goal was two-fold

• change the style of the textarea (ligher text) to make it clear that "(loading)" was a message rather than an input
  (but I guess that's moot, I don't think that Monaco changes its style when read-only)
• to prevent the user to type something that would be lost once the content is loaded

[vemonet]

Ok, I fixed it

[vemonet]

I also have the code ready to add inline error highlighting in the editor :) It works perfectly for syntax errors I tried in trig/turtle/nt/nq!

For JSON-LD we get only a position without line, I suspect this is a position after removing newlines and extra spaces, so this might need additional work to get it to work perfectly. That said the built-in JSON validation already helps to pick up all regular JSON errors

Not sure if I should wait for this PR to be merged to create a new one, or if I can directly push to this PR? It's only adding 1 function ~10 lines

[pchampin]

I also have the code ready to add inline error highlighting in the editor :) It works perfectly for syntax errors I tried in trig/turtle/nt/nq!

nice! :)

For JSON-LD we get only a position without line, I suspect this is a position after removing newlines and extra spaces, so this might need additional work to get it to work perfectly. That said the built-in JSON validation already helps to pick up all regular JSON errors

Not sure if I should wait for this PR to be merged to create a new one, or if I can directly push to this PR? It's only adding 1 function ~10 lines

I guess it is small enough to include, then

[pchampin]

I thought I had written this comment already, but I must have forgot to press 'Comment'???

There are currently two issues that are really bothering me:

• when pressing 'tab' in the Monaco editor, it... inserts a tab ;
  contrast with the textarea, where 'tab' allows to focus the next element of the page.
  This is important for accessibility.

• the Monaco editor does not emit the 'input' event in the following situations :

  • when you press delete or backspace,
  • when you cut or paste text.

  This breaks the good working of the 'automatic' mode.

As much as I appreciate and like the work you have been doing, those are really blocking issues for me at this point :-/

[vemonet]

You can still toggle between the default tab behavior and adding tabs by hitting Ctrl + m, we could add a small note to let people know. But I guess you would prefer to have the default behavior by default, so I added a fix to enable this (but we cannot use ctrl+m to go back to "adding tabs" behavior anymore)

I also updated the listener to use the builtin onInputChange event of the monaco editor, so it properly updates at every change now