WebIDE suggestion: horizontal scroll bar in code editor

I have checked the settings and have not found an option to enable a horizontal scroll bar.

Long lines of code wrap to the next line which doesn't help with readability. Could we have a scroll bar at the bottom of the code editor (as the output dialog has)?

-1 (unless it's optional)

I don't have a problem with this being an optional setting!

On big screens it's often no issue probably, but I use a MacBook pro and the IDE makes a mess of my code with the line wraps...

@tve: Do you want to elaborate why you don't want (need?) such a setting?

-1 too

Would you care to elaborate @Frida?

+1 (optional seems a good way)

I'm afraid this isn't that high priority for me - however it's probably pretty easy to add if you wanted to.

The source is at https://github.com/espruino/EspruinoWebI­DE and it's all HTML/JavaScript/CSS - it's probably some kind of issue around here

Option to turn off line wrap and get horizontal scrollbar would be a nice-to-have (though as @tve said, it must be optional - IME, about 60~80% of the time, you want the automatic wrap) - but I think it's a pretty low priority.

Personally, I don't much like the right side of the WebIDE in general, so I'm not sure how much my perspective should even be trusted - I use sublime text for anything not trivial because it reminds me how I spelled things as I start to type them, and I find the text more readable, and it's very good about not losing data if closed uncleanly (an issue since upgrading from win10). I normally copy+paste from sublime into the right side to send. I'd love to make a plugin for Sublime that would do "send to Espruino", and I guess we have the command line tools to enable that now - but I don't have the time, nor do I know python anymore.

Ahh right - sorry, the right hand side. So it's not the bit of CSS I linked to then. Still, it's just CodeMirror so it's even easier to fix

The only tricky bit I see is making it take effect without a restart.

I'd love to make a plugin for Sublime

There must be a way of saying 'run this executable with these arguments'? Pretty much every text editor has that - then you just point it at the Espruino CLI with the filename as an argument.

Without using the setting @Gordon referred to I have been able to get it working to my liking, including making it an option in General Settings. Not sure about the quality of my code, so I will not submit my changes. However, most likely tomorrow I will make a version available from my own site so someone can have a look at it.

Any objections?

Great! Not at all - if you make the changes to a fork of EspruinoWebIDE on your GitHub account then it'll be easy to see what changed and keep track of the differences?

...switchable 'wrap/nowrap' would be another option ontop of at what position in line to wrap.

Some smart(er) editors do wrapping with context sensitive indenting of the 2nd to last line of the wrapped line.

Too long lines is anyway a bad thing for quickly reading and grasping... that's the reason news papers have decent narrow columns to create the least tiring experience. Code though is not linear like a novel, therefore some editors have collapse options for code blocks in order to give a better overview on available (vertical) screen space.

My changes are here: https://github.com/jdschuitemaker/Esprui­noWebIDE

Thanks - looks good! Differences here

Is there any way to remove the editor-specific stuff from js/core/code.js and js/core/editorBlockly.js? It seems like you should be able to do everything from js/core/editorJavaScript.js - which actually handles the JavaScript editor itself.

@Gordon I moved my changes from editorBlockly.js and code.js to editorJavascript.js. Seem to work...

Anyone wants to try?

Has anyone tested my changes? @Gordon?

Is there a chance that my changes make it to the version in the Chrome store? If so, would I need to initiate that? How?

Thanks!

I haven't had time to try them I'm afraid. If you issued a pull request for your changes I could pull them in and out them in the latest version - but please could you:

• change the formatting so you use the same 2 spaces for indents (and not tabs) - it looks completely different here
  
• remove the console.dir calls
  
• Move the duplicate code for $('head').append('<style id="codemirrorLineWrapping">.CodeMirror-­wrap pre { word-wrap: break-word;white-space: pre-wrap;word-break: normal; }</style>'); into a function or something - having 2 copies of it is just asking for bugs later on if someone tweaks it :)
  
  

thanks!