Template Code Editor reformatting tabs to 2 spaces - how do I stop this?
I'm wondering if there is a way to change the settings on the editor that is used for the Templates under Setting within Umbraco.
I use the tab space to clearly show indentation in Visual Studio but everytime I open a template within Umbraco's Template Editor it changes all of the tab spaces to 2 spaces.
(I'm using Firefox, so not entirely sure if this maybe related to the browser only)
Two questions really:
Can I stop the Umbraco Template Editor to use the format that already exists rather than adjusting all tabs to 2 spaces when it displays the code?
Can I set up the Umbraco Template Editor to use the tab space rather than inserting 2 spaces when using the tab key?
I would also like to know if there's a way to stop this madness. I have nothing against people that like to have their tabs replaced by spaces, but I personally prefer to keep tabs because it makes my life simpler.
If the code editor does not have a config option that allows you to choose either way, any clues which javascript I should edit?
Well, by chance I stumbled upon this again and got a step further. The editor used by Umbraco is called CodeMirror, a vibrant little project. It turns out that newer versions of it have the option to tip the SPACES vs TABS war the way you want it! The trouble is that Umbraco uses an old (Feb 2011) version of the editor, 0.94. The new preferrence is only available since v2.0, which was a complete rewrite and released at the end of March 2011.
From the first few glances it seems that replacing the old with the new is not as trivial as it sounds, the new one being a complete rewrite. Umbraco seems to add some custom plugins to the editor too. However, we're hoping to at least put up a fight and try transplanting - will keep you posted if we get anywhere near a working solution.
We did find in the umbraco_client/CodeMirror/js/codemirror.js an option called indentUnit which is set to 2 by default. At first this seemed promising, to be able to change to 4 which at the very least more closely matches our long-standing convention of a 4-space tab. However, it doesn't seem to have done what I would have expected, and am still getting the two-space indent. We also found a similar indentUnit of 2 in highlight.js and changed this too without any success.
If it's not possible right now to have tabs instead of spaces for indentation, we'd be happy at least to get 4 spaces instead of two. I'm still looking for any other obvious, quick way to make such a change and will reply back here if I find out how. Anyone else look into this any further?
Funka!, we did :-) Sorry, I forgot to update the thread, but we went ahead and ended up replacing Codemirror 0.94 with the latest build at the time (2.16), which does have the preferrence to keep tabs rather than insert spaces. It did involve some internal Umbraco changes, but these were constrained to the bits that render the code editor. The swap does not involve too much manual work - if you're interested, we're be more than happy to share the patch and detailed instructions "what goes where". Applying it should not take you more than 15mins, and should work fine - we've been using it in production for a month or so w/o any problems.
Hello! This is good to hear, thank you for your reply!
I actually have been playing with CodeMirror and delving into its internals tonight for the last few hours, thinking I might want to use it on another project of mine. Now that I think I have a good sense of how it works and have even managed to extend it a little bit, I think I might be up for the challenge if you wouldn't mind pointing me in a good direction where to start? The current is now 2.18 but changes from 2.16 don't seem like they will be a problem.
After that you need to replace the contents of umbraco_client/CodeMirror: remove every bit of the old editor, copy over the folders "lib", "mode" and "theme" from CodeMirror 2.x. (At this point we also tweaked codemirror.css to increase line-height to 1.2em, made code much more legible!)
As for Razor mode for CodeMirror, we got it somewhere off the web, possibly from the Orchard project. Cannot find and credit the source right now, but packaged them up and shared on speedyshare. If you manage to get hold of a better version, please do share!
Seems that's it, if you encounter any problems don't hesitate to share - hope that together we can weed out any outstanding issues.
Ps: Not sure why enumerations don't display properly, when editing the post it seems to be fine.
Template Code Editor reformatting tabs to 2 spaces - how do I stop this?
I'm wondering if there is a way to change the settings on the editor that is used for the Templates under Setting within Umbraco.
I use the tab space to clearly show indentation in Visual Studio but everytime I open a template within Umbraco's Template Editor it changes all of the tab spaces to 2 spaces.
(I'm using Firefox, so not entirely sure if this maybe related to the browser only)
Two questions really:
I would also like to know if there's a way to stop this madness. I have nothing against people that like to have their tabs replaced by spaces, but I personally prefer to keep tabs because it makes my life simpler.
If the code editor does not have a config option that allows you to choose either way, any clues which javascript I should edit?
Well, by chance I stumbled upon this again and got a step further. The editor used by Umbraco is called CodeMirror, a vibrant little project. It turns out that newer versions of it have the option to tip the SPACES vs TABS war the way you want it! The trouble is that Umbraco uses an old (Feb 2011) version of the editor, 0.94. The new preferrence is only available since v2.0, which was a complete rewrite and released at the end of March 2011.
From the first few glances it seems that replacing the old with the new is not as trivial as it sounds, the new one being a complete rewrite. Umbraco seems to add some custom plugins to the editor too. However, we're hoping to at least put up a fight and try transplanting - will keep you posted if we get anywhere near a working solution.
I was wondering this, too.
We did find in the umbraco_client/CodeMirror/js/codemirror.js an option called indentUnit which is set to 2 by default. At first this seemed promising, to be able to change to 4 which at the very least more closely matches our long-standing convention of a 4-space tab. However, it doesn't seem to have done what I would have expected, and am still getting the two-space indent. We also found a similar indentUnit of 2 in highlight.js and changed this too without any success.
If it's not possible right now to have tabs instead of spaces for indentation, we'd be happy at least to get 4 spaces instead of two. I'm still looking for any other obvious, quick way to make such a change and will reply back here if I find out how. Anyone else look into this any further?
Funka!, we did :-) Sorry, I forgot to update the thread, but we went ahead and ended up replacing Codemirror 0.94 with the latest build at the time (2.16), which does have the preferrence to keep tabs rather than insert spaces. It did involve some internal Umbraco changes, but these were constrained to the bits that render the code editor. The swap does not involve too much manual work - if you're interested, we're be more than happy to share the patch and detailed instructions "what goes where". Applying it should not take you more than 15mins, and should work fine - we've been using it in production for a month or so w/o any problems.
Hello! This is good to hear, thank you for your reply!
I actually have been playing with CodeMirror and delving into its internals tonight for the last few hours, thinking I might want to use it on another project of mine. Now that I think I have a good sense of how it works and have even managed to extend it a little bit, I think I might be up for the challenge if you wouldn't mind pointing me in a good direction where to start? The current is now 2.18 but changes from 2.16 don't seem like they will be a problem.
Thank you!
I've shared the patch on Gist. It does a few things:
After that you need to replace the contents of umbraco_client/CodeMirror: remove every bit of the old editor, copy over the folders "lib", "mode" and "theme" from CodeMirror 2.x. (At this point we also tweaked codemirror.css to increase line-height to 1.2em, made code much more legible!)
As for Razor mode for CodeMirror, we got it somewhere off the web, possibly from the Orchard project. Cannot find and credit the source right now, but packaged them up and shared on speedyshare. If you manage to get hold of a better version, please do share!
Seems that's it, if you encounter any problems don't hesitate to share - hope that together we can weed out any outstanding issues.
Ps: Not sure why enumerations don't display properly, when editing the post it seems to be fine.
is working on a reply...