Code highlighting in browser (codemirror)

Message

chromo23 · #1 Post by **chromo23** » 01 Jun 2022, 19:36

I just made a test build to play around with codemirror (https://codemirror.net/)
Is this something we want?
It is easy to implement now i need to figure out how to implement custom highlighting for espeasy (right now it is just javascript)

codemirror.png

Ath · #2 Post by **Ath** » 01 Jun 2022, 19:43

That's very interesting

chromo23 · #3 Post by **chromo23** » 01 Jun 2022, 19:45

i think so too

save button & char counter do not work right now... therefore the function needs to be rewritten...
edit: works...

TD-er · #4 Post by **TD-er** » 01 Jun 2022, 22:46

Oooh that's nice!
How much space does it need to have this implemented?
I'm thinking about adding some p2p mirroring from other nodes.
So one node can advertise what "standard" files it has to offer, allowing other nodes to fetch it from them and serving it to the client (or let it link in the HTML to another node, but not sure about CORS when serving these static files)

chromo23 · #5 Post by **chromo23** » 01 Jun 2022, 22:52

[...]
edit: the p2p option would be nice too... (i am thinking of global or serverside settings from a device that has an other form of storage like sd. also serving a local css file would be great)

Not only the CSS, but think bigger

Let's see if you can think of it yourself before I have implemented it, so you have quite some time to figure it out

chromo23 · #6 Post by **chromo23** » 01 Jun 2022, 23:35

What happend to my post? There are parts missing and text was added
@TD-er did you hijacked my post?

edit:

Not only the CSS, but think bigger
Let's see if you can think of it yourself before I have implemented it, so you have quite some time to figure it out

I´ll try to think about it but for now i am like a zombie because i read to much text today and tomorrow we have visitors for one week...wich is actually good because then I have to do something other than sitting at the computer all the time....

TD-er · #7 Post by **TD-er** » 01 Jun 2022, 23:59

Sjips... I guess instead of quote, I used edit...
Sorry about that, was in no way my intention.

chromo23 · #8 Post by **chromo23** » 02 Jun 2022, 00:08

No harm done... i only replied to my own statement...that looks totally normal

Good, that the browser caches a lot of data...hitting the back button a few times and voila:

TD-er wrote: ↑01 Jun 2022, 22:46 How much space does it need to have this implemented?

these extra lines in webserver.cpp for the head:

Code: Select all

  
  "<link rel='stylesheet' href='codemirror.css'>"  // the css files could be combined into one
  "<link rel='stylesheet' href='material-darker.css'>"
  "<script src='codemirror.js'></script>"
  "<script src='javascript.js'></script>"  //this is the language for highlighting (just working on that but i am bad at js...or any other language)

the files must be stored externally (codemiror.js is about 400k)

and one extra line in rules.cpp after "addHtml(F("</textarea>"));":

Code: Select all

  addHtml(F("<script> var rEdit = CodeMirror.fromTextArea(document.getElementById('rules'), {theme: 'material-darker',lineNumbers: true}); rEdit.on('change', function(){rEdit.save()});</script>"));

thats it

TD-er · #9 Post by **TD-er** » 02 Jun 2022, 00:25

Pfiew!

chromo23 · #10 Post by **chromo23** » 02 Jun 2022, 10:28

I started with an crude highlighting test. this is definitely a big challenge for me.. so if anyone here speaks fluent js and wants to contribute to a very nice in-browser code highlighting you are very welcome to help writing the language add-on

Bildschirmfoto 2022-06-02 um 10.43.16.png

TD-er · #11 Post by **TD-er** » 02 Jun 2022, 10:32

Would be even better if you highlight "Event" and add a balloon to suggest to use "asyncevent"

Using the "delay" command should play some "oh-oh" sound.

But I guess that would be a bit too much for simple grammar parsing to color highlight.

chromo23 · #12 Post by **chromo23** » 02 Jun 2022, 10:35

codemirror offers codefolding, autocompletion and hints

TD-er · #13 Post by **TD-er** » 02 Jun 2022, 10:37

Ah great!

chromo23 · #14 Post by **chromo23** » 02 Jun 2022, 10:41

But for now (and to keep it simple) it would be sufficient to just have a proper highlighting..

Ath · #15 Post by **Ath** » 02 Jun 2022, 10:55

You might want to have a look at the Notepad++ highlighter for 'inspiration'

chromo23 · #16 Post by **chromo23** » 02 Jun 2022, 11:12

Ath wrote: ↑02 Jun 2022, 10:55 You might want to have a look at the Notepad++ highlighter for 'inspiration'

Thats where i copied all the keywords from

Edit: but implementing it into codemirror is not as easy as in notepad++

chromo23 · #17 Post by **chromo23** » 02 Jun 2022, 11:57

For testing i uploaded a zip file which contains a custom build for the esp8266 (building for the esp32 gave me an error but if wanted i can upload one later) based on the rather old 20211224 release. but for rules testing it will suffice.
The other files need to be copied to the esp via file upload.

The espeasy.js is the language file wich can be editied (right now this is a modified copy of the shell.js file).

A lot of infos are on the codemirror website and you can download demos and languagefiles here: https://codemirror.net/codemirror.zip

!!! only works with 4mb units because of codemirrors filesize

ruleshigh.zip

TD-er · #18 Post by **TD-er** » 02 Jun 2022, 13:07

So that alone would be a good idea to have the file served from some CDN or another node in your network.

chromo23 · #19 Post by **chromo23** » 02 Jun 2022, 14:10

TD-er wrote: ↑02 Jun 2022, 13:07 So that alone would be a good idea to have the file served from some CDN or another node in your network.

Absolutely

For this in particular since i really want to see it implemented, files could be where all the other static stuff is stored (if possible)
The good thing about implementing codemirror is, that it only overlays and hides the textinput... so if the files are not available anymore it falls back to the standard textinput. completly harmless.

Reminder to myself: Stop procrastinating!!!! You have to clean up the apartment before your visitors come....

chromo23 · #20 Post by **chromo23** » 02 Jun 2022, 14:11

You are right

chromo23 · #21 Post by **chromo23** » 10 Jun 2022, 16:42

Actually already usable

i still struggle a bit with "bracketsinbrackets" highlighting...

Bildschirmfoto 2022-06-10 um 16.39.15.png

Bildschirmfoto 2022-06-10 um 16.37.22.png

Ath · #22 Post by **Ath** » 10 Jun 2022, 16:50

You are getting somewhere, looking great

chromo23 · #23 Post by **chromo23** » 10 Jun 2022, 17:47

Of course, a dark mode should not be missing:

Bildschirmfoto 2022-06-10 um 17.45.55.png

chromo23 · #24 Post by **chromo23** » 10 Jun 2022, 19:10

last but nor least... autocompletion

autocomp.gif

autocomp2.gif

Ath · #25 Post by **Ath** » 10 Jun 2022, 19:25

TD-er · #26 Post by **TD-er** » 10 Jun 2022, 22:47

Wow!
That looks nice, this autocompletion.

chromo23 · #27 Post by **chromo23** » 11 Jun 2022, 13:22

@TD-er

This one is for you:

warning.gif

TD-er · #28 Post by **TD-er** » 11 Jun 2022, 15:59

Good one

Ath · #29 Post by **Ath** » 11 Jun 2022, 17:05

That flashing red will be annoying very quickly

chromo23 · #30 Post by **chromo23** » 11 Jun 2022, 20:11

BTW the hint system not only uses words from the wordlist. it also analyses the inputfield...

long hint.png

sartam · #31 Post by **sartam** » 13 Jun 2022, 07:47

chromo23 wrote: ↑11 Jun 2022, 20:11 BTW the hint system not only uses words from the wordlist. it also analyses the inputfield...

It's great! How to use it? What files need to be installed and where to make it work?

chromo23 · #32 Post by **chromo23** » 13 Jun 2022, 12:30

right now you could build your own firmware using this branch:
https://github.com/chromoxdor/ESPEasy/t ... codemirror
and copy the necessary files from /static (codemirror.min.js, codemirror.min.css, espeasy.min.js, anyword-hint.min.js ) to your esp (for now since the files need to be stored locally 4m units only)

otherwise you have to wait until @TD-er integrates this into the main repository and from there it would make it into a release eventually or before this into an action-build...

sartam · #33 Post by **sartam** » 13 Jun 2022, 14:33

chromo23 wrote: ↑13 Jun 2022, 12:30 right now you could build your own firmware using this branch:
https://github.com/chromoxdor/ESPEasy/t ... codemirror
and copy the necessary files from /static (codemirror.min.js, codemirror.min.css, espeasy.min.js, anyword-hint.min.js ) to your esp (for now since the files need to be stored locally 4m units only)

otherwise you have to wait until @TD-er integrates this into the main repository and from there it would make it into a release eventually or before this into an action-build...

That is, all the necessary files are stored locally, in the ESP?

chromo23 · #34 Post by **chromo23** » 13 Jun 2022, 15:33

The files can be found here:
https://github.com/chromoxdor/ESPEasy/t ... ror/static
For now the files need to be stored locally...but in the future they will come from an external source like a cdn.

If you dont want to build for yourself there is an freshly baked action-build:
https://github.com/letscontrolit/ESPEas ... 2487730400

chromo23 · #35 Post by **chromo23** » 20 Jun 2022, 18:42

for anyone who wants to test rules highlighting in browser, without building or copying something, can do this here:

https://raw.githack.com/chromoxdor/Easy ... rcode.html

hint: shortcut is currently "alt+space"

Ath · #36 Post by **Ath** » 20 Jun 2022, 20:07

chromo23 wrote: ↑20 Jun 2022, 18:42 hint: shortcut is currently "alt+space"

That won't work for Windows users, as alt-space will activate the current window menu...

chromo23 · #37 Post by **chromo23** » 20 Jun 2022, 20:46

Ath wrote: ↑20 Jun 2022, 20:07
chromo23 wrote: ↑20 Jun 2022, 18:42 hint: shortcut is currently "alt+space"
That won't work for Windows users, as alt-space will activate the current window menu...

S**t

any suggestions/preferences?

chromo23 · #38 Post by **chromo23** » 20 Jun 2022, 20:50

Whats with Ctrl+Enter or Alt+Enter?
Edit: Ctrl+Alt seems to work too

Ath · #39 Post by **Ath** » 20 Jun 2022, 21:22

The highlighting is working, but how to activate the auto-complete feature? Can't get that working yet.

chromo23 wrote: ↑20 Jun 2022, 20:50 Whats with Ctrl+Enter or Alt+Enter?
Edit: Ctrl+Alt seems to work too

Isn't the most common hotkey for code completion ctrl+space? That should work fine on all OSes.

chromo23 · #40 Post by **chromo23** » 20 Jun 2022, 21:26

Ath wrote: ↑20 Jun 2022, 21:22 The highlighting is working, but how to activate the auto-complete feature? Can't get that working yet.

hinting involves autocompletion.. therefore a shortcut is needed

Ath · #41 Post by **Ath** » 20 Jun 2022, 21:32

Hm, Windows user here (though that may be obvious

), but the hinting is not working for me, both in Firefox or Chrome

tried all kind of hotkey combinations of ctrl, alt, space, enter...

chromo23 · #42 Post by **chromo23** » 20 Jun 2022, 21:46

Ath wrote: ↑20 Jun 2022, 21:32 Hm, Windows user here (though that may be obvious ), but the hinting is not working for me, both in Firefox or Chrome tried all kind of hotkey combinations of ctrl, alt, space, enter...

Thats why i am asking.. the shortcut is still alt+shift (i havent used windows for quite a while so i was not aware that it is already in use)
i want to change that so we have to find a solution that makes both worlds happy

chromo23 · #43 Post by **chromo23** » 20 Jun 2022, 21:49

Ath wrote: ↑20 Jun 2022, 21:22 The highlighting is working, but how to activate the auto-complete feature? Can't get that working yet.

chromo23 wrote: ↑20 Jun 2022, 20:50 Whats with Ctrl+Enter or Alt+Enter?
Edit: Ctrl+Alt seems to work too
Isn't the most common hotkey for code completion ctrl+space? That should work fine on all OSes.

ohh i havent read that yet... you are right with ctrl+space but for me it is already in use for more than a decade..thats why i tried to circumvent this...

So if you can come up with another possibility fine, if not i will have to make a sacrifice

chromo23 · #44 Post by **chromo23** » 20 Jun 2022, 21:58

i changed it to ctrl+space for now....
happy testing

Ath · #45 Post by **Ath** » 20 Jun 2022, 22:02

Are you saying that alt+shift (without any other key) should trigger the hint feature? That is not working for me at all, and combined with space it still activates the current window menu, same as alt-space.
And alt-shift in windows also switches keyboard layouts (if you have multiple, like many users/developers in EU have for switching with/without dead keys for accented letters).

chromo23 · #46 Post by **chromo23** » 20 Jun 2022, 22:06

Ath wrote: ↑20 Jun 2022, 22:02 Are you saying that alt+shift (without any other key) should trigger the hint feature? That is not working for me at all, and combined with space it still activates the current window menu, same as alt-space.
And alt-shift in windows also switches keyboard layouts (if you have multiple, like many users/developers in EU have for switching with/without dead keys for accented letters).

i think our communication got a little mixed up...

i understand, that alt+shift is not working for you thats why i changed it to ctrl+shift for now....
edit: but give it some time or download the html file since github takes some time to refresh the raw content it seems

edit2: now it works with ctrl+shift

Ath · #47 Post by **Ath** » 20 Jun 2022, 22:08

chromo23 wrote: ↑20 Jun 2022, 21:58 i changed it to ctrl+space for now....
happy testing

That is now working both in Chrome and Firefox, thank you.

chromo23 · #48 Post by **chromo23** » 20 Jun 2022, 22:13

@ath
if you want to try the new display keywords since they are all more or less compound words first complete the display type and do the hint again to continue with "," for example....

TD-er · #49 Post by **TD-er** » 20 Jun 2022, 23:14

That's a long list of hints.
Can you make it slightly more context-aware?
For example, after an "if" you don't expect "do" or "on" for example.

Or does that make the code (a lot) bigger?

chromo23 · #50 Post by **chromo23** » 21 Jun 2022, 14:08

TD-er wrote: ↑20 Jun 2022, 23:14 That's a long list of hints.
Can you make it slightly more context-aware?
For example, after an "if" you don't expect "do" or "on" for example.

Or does that make the code (a lot) bigger?

That would be indeed a nice extra but nothing i am planning to implement since after one or maximum two characters the list gets significantly smaller...

Who is online