CodeMirror - Code Editor within your browser
Posted: Sat Nov 19, 2016 7:57 am
CodeMirror is a Javascript library used to create a code editor directly inside your browser. Now I don't suggest you to let your game admins edit directly your PHP files! That could be quite dangerous and let open the door of all sorts of hacks and nasty things, however the editor could be used for quite a few things and edit many of the programming languages without having to edit yourself the syntax files.
https://codemirror.net/
Inside my engine for example I use it to let the game owner edit the scripts which are nearly Javascript. Nearly because I wanted to keep a similar syntax, avoiding that people need to learn yet another language, easier to find info and help and also to re-use the existing syntax highlight. It is not the full Javascript and for sure I don't just "eval" the text the game owner writes. If you are interested how I made that language drop a line and I shall make a post about it too.
Anyhow to come back to code mirror, I integrated it inside my engine and you can check a demo here:
https://www.dotworldmaker.com/Home/code_editor.html
What I did is integrate a real-time syntax checker, and you can try it by writing garbage in the code and a yellow line on top should appear saying the error as well as highlight the line where the checker think the error is. Also if you move the cursor (either by clicking or with the arrow keys) over an API function a little window with a small help will appear. Finally the last piece was the code completion which works by checking what you have under the cursor and trying to suggest API functions. Try to write player. with the dot included and then you can scroll up / down with the arrow keys and select the function you want to add (by pressing return or tab).
How it works:
The syntax checker is nothing else than my parser run every time you change the code and the error output is then grabbed and it will highlight the line number which is wrong using CodeMirror api "editor.addLineClass".
The inline help works by hocking myself to the "cursorActivity" event of CodeMirror extracting the word at the cursor position and if the API call is found show a small DIV with the content of the help.
The code completion is actually part of the "cursorActivity" event and if the API call is not found, try to suggest something. However I had then to use the "extraKeys" options and define "Enter", "Tab", "Up", "Down" and "Esc" keys.
Conclusion:
CodeMirror is certainly a really useful lib, however I had more than some issues to find the right way to do what I wanted maybe due to the manual which is somewhat odd to read at first or maybe because I thought I could solve it differently. Anyhow after all that I do finally have the tool I wanted: a good code editor within my engine.
https://codemirror.net/
Inside my engine for example I use it to let the game owner edit the scripts which are nearly Javascript. Nearly because I wanted to keep a similar syntax, avoiding that people need to learn yet another language, easier to find info and help and also to re-use the existing syntax highlight. It is not the full Javascript and for sure I don't just "eval" the text the game owner writes. If you are interested how I made that language drop a line and I shall make a post about it too.
Anyhow to come back to code mirror, I integrated it inside my engine and you can check a demo here:
https://www.dotworldmaker.com/Home/code_editor.html
What I did is integrate a real-time syntax checker, and you can try it by writing garbage in the code and a yellow line on top should appear saying the error as well as highlight the line where the checker think the error is. Also if you move the cursor (either by clicking or with the arrow keys) over an API function a little window with a small help will appear. Finally the last piece was the code completion which works by checking what you have under the cursor and trying to suggest API functions. Try to write player. with the dot included and then you can scroll up / down with the arrow keys and select the function you want to add (by pressing return or tab).
How it works:
The syntax checker is nothing else than my parser run every time you change the code and the error output is then grabbed and it will highlight the line number which is wrong using CodeMirror api "editor.addLineClass".
The inline help works by hocking myself to the "cursorActivity" event of CodeMirror extracting the word at the cursor position and if the API call is found show a small DIV with the content of the help.
The code completion is actually part of the "cursorActivity" event and if the API call is not found, try to suggest something. However I had then to use the "extraKeys" options and define "Enter", "Tab", "Up", "Down" and "Esc" keys.
Conclusion:
CodeMirror is certainly a really useful lib, however I had more than some issues to find the right way to do what I wanted maybe due to the manual which is somewhat odd to read at first or maybe because I thought I could solve it differently. Anyhow after all that I do finally have the tool I wanted: a good code editor within my engine.