Page 1 of 2

Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 19:36
by chromo23
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 8363 times

Re: Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 19:43
by Ath
That's very interesting :o

Re: Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 19:45
by chromo23
i think so too :)

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

Re: Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 22:46
by TD-er
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)

Re: Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 22:52
by chromo23
[...]
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 ;)

Re: Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 23:35
by chromo23
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.... :)

Re: Code highlighting in browser (codemirror)

Posted: 01 Jun 2022, 23:59
by TD-er
Sjips... I guess instead of quote, I used edit...
Sorry about that, was in no way my intention.

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 00:08
by chromo23
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

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 00:25
by TD-er
Pfiew!

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 10:28
by chromo23
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 8255 times

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 10:32
by TD-er
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.

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 10:35
by chromo23
codemirror offers codefolding, autocompletion and hints ;)

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 10:37
by TD-er
Ah great!

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 10:41
by chromo23
But for now (and to keep it simple) it would be sufficient to just have a proper highlighting.. :D

Re: Code highlighting in browser (codemirror)

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

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 11:12
by chromo23
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++

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 11:57
by chromo23
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 115 times

Re: Code highlighting in browser (codemirror)

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

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 14:10
by chromo23
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:

Re: Code highlighting in browser (codemirror)

Posted: 02 Jun 2022, 14:11
by chromo23
You are right :oops:

Re: Code highlighting in browser (codemirror)

Posted: 10 Jun 2022, 16:42
by chromo23
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 7936 times
Bildschirmfoto 2022-06-10 um 16.37.22.png
Bildschirmfoto 2022-06-10 um 16.37.22.png (115.01 KiB) Viewed 7936 times

Re: Code highlighting in browser (codemirror)

Posted: 10 Jun 2022, 16:50
by Ath
You are getting somewhere, looking great 8-)

Re: Code highlighting in browser (codemirror)

Posted: 10 Jun 2022, 17:47
by chromo23
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 7919 times

Re: Code highlighting in browser (codemirror)

Posted: 10 Jun 2022, 19:10
by chromo23
last but nor least... autocompletion
autocomp.gif
autocomp.gif (141.9 KiB) Viewed 7912 times
autocomp2.gif
autocomp2.gif (90.56 KiB) Viewed 7908 times

Re: Code highlighting in browser (codemirror)

Posted: 10 Jun 2022, 19:25
by Ath
Yay :o

Re: Code highlighting in browser (codemirror)

Posted: 10 Jun 2022, 22:47
by TD-er
Wow!
That looks nice, this autocompletion.

Re: Code highlighting in browser (codemirror)

Posted: 11 Jun 2022, 13:22
by chromo23
@TD-er

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

Re: Code highlighting in browser (codemirror)

Posted: 11 Jun 2022, 15:59
by TD-er
Good one :)

Re: Code highlighting in browser (codemirror)

Posted: 11 Jun 2022, 17:05
by Ath
That flashing red will be annoying very quickly :lol:

Re: Code highlighting in browser (codemirror)

Posted: 11 Jun 2022, 20:11
by chromo23
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 7822 times

Re: Code highlighting in browser (codemirror)

Posted: 13 Jun 2022, 07:47
by sartam
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?

Re: Code highlighting in browser (codemirror)

Posted: 13 Jun 2022, 12:30
by chromo23
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...

Re: Code highlighting in browser (codemirror)

Posted: 13 Jun 2022, 14:33
by sartam
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?

Re: Code highlighting in browser (codemirror)

Posted: 13 Jun 2022, 15:33
by chromo23
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

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 18:42
by chromo23
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"

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 20:07
by Ath
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...

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 20:46
by chromo23
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?

Re: Code highlighting in browser (codemirror)

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

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 21:22
by Ath
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.

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 21:26
by chromo23
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

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 21:32
by Ath
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...

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 21:46
by chromo23
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 :)

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 21:49
by chromo23
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:

Re: Code highlighting in browser (codemirror)

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

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 22:02
by Ath
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).

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 22:06
by chromo23
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

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 22:08
by Ath
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.

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 22:13
by chromo23
@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....

Re: Code highlighting in browser (codemirror)

Posted: 20 Jun 2022, 23:14
by TD-er
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?

Re: Code highlighting in browser (codemirror)

Posted: 21 Jun 2022, 14:08
by chromo23
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...