Code highlighting in browser (codemirror)

Moderators: grovkillen, Stuntteam, TD-er

Message
Author
User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Code highlighting in browser (codemirror)

#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
codemirror.png (119.56 KiB) Viewed 2657 times

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

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

That's very interesting :o
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

#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)

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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 ;)

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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? :shock:

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
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

#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.

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

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

No harm done... i only replied to my own statement...that looks totally normal :D
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
Last edited by chromo23 on 02 Jun 2022, 11:28, edited 1 time in total.

TD-er
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

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

Pfiew!

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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 :D
Bildschirmfoto 2022-06-02 um 10.43.16.png
Bildschirmfoto 2022-06-02 um 10.43.16.png (157.11 KiB) Viewed 2549 times
Last edited by chromo23 on 02 Jun 2022, 10:44, edited 1 time in total.

TD-er
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

#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.

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

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

codemirror offers codefolding, autocompletion and hints ;)

TD-er
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

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

Ah great!

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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.. :D

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

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

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

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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++

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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
(649.09 KiB) Downloaded 21 times

TD-er
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

#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.

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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.... :evil:


User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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.39.15.png (49.11 KiB) Viewed 2230 times
Bildschirmfoto 2022-06-10 um 16.37.22.png
Bildschirmfoto 2022-06-10 um 16.37.22.png (115.01 KiB) Viewed 2230 times

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

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

You are getting somewhere, looking great 8-)
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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
Bildschirmfoto 2022-06-10 um 17.45.55.png (118.59 KiB) Viewed 2213 times

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

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

last but nor least... autocompletion
autocomp.gif
autocomp.gif (141.9 KiB) Viewed 2206 times
autocomp2.gif
autocomp2.gif (90.56 KiB) Viewed 2202 times
Last edited by chromo23 on 10 Jun 2022, 19:39, edited 1 time in total.

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

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

Yay :o
/Ton

TD-er
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

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

Wow!
That looks nice, this autocompletion.

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

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

@TD-er

This one is for you:
warning.gif
warning.gif (144.16 KiB) Viewed 2148 times

TD-er
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

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

Good one :)

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

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

That flashing red will be annoying very quickly :lol:
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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
long hint.png (69.8 KiB) Viewed 2116 times

sartam
Normal user
Posts: 40
Joined: 13 Mar 2022, 21:25

Re: Code highlighting in browser (codemirror)

#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?

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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
Normal user
Posts: 40
Joined: 13 Mar 2022, 21:25

Re: Code highlighting in browser (codemirror)

#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?

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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"

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

#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...
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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 :roll: any suggestions/preferences?

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

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

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

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

#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.
Last edited by Ath on 20 Jun 2022, 21:28, edited 1 time in total.
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

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

Hm, Windows user here (though that may be obvious :lol:), but the hinting is not working for me, both in Firefox or Chrome :? tried all kind of hotkey combinations of ctrl, alt, space, enter...
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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 :lol:), 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 :)

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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... :shock:
So if you can come up with another possibility fine, if not i will have to make a sacrifice :cry:

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

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

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

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

#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).
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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

User avatar
Ath
Normal user
Posts: 1809
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Code highlighting in browser (codemirror)

#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.
/Ton

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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
Core team member
Posts: 6349
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Code highlighting in browser (codemirror)

#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?

User avatar
chromo23
Normal user
Posts: 417
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Code highlighting in browser (codemirror)

#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...

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests