0

So I'm trying to embed ACE in a Windows 8 JavaScript app that I'm working on and I've run into a bunch of troubles. Here is my code used to turn my <pre id="ace-editor"> element into an Ace editor.

WinJS.Utilities.ready(function ()
{
    var editor = ace.edit('ace-editor');

    editor.setTheme('ace/theme/monokai');

    editor.getSession().setMode('ace/mode/javascript');
    editor.getSession().setTabSize(4);
    editor.getSession().setUseSoftTabs(false);
    editor.setShowPrintMargin(false);

});

Firstly, there's a duplicate cursor appearing, with a bit of position and blinking time offset. Please have a look at the image below.

Secondly, once I've created the editor, I have to call every method twice so I can change an attribute on my editor object. E.g., look at the snippet below:

editor.setTheme('ace/theme/clouds');
editor.setTheme('ace/theme/clouds');

That is what I need to do to change the theme. Calling the setTheme() method once won't do it.

Now, I'm new to Windows Store development but after a bit of messing around, I can get the cursor to go away if I remove the core UI stylesheet added by default. Same goes for the core JS files. If I remove those, the double firing problem goes away. Has anyone here got a solution or a clue as to why this is happening? I am using the nonconflict version of Ace, but I've tried the other one, too. And I suppose this sounds more of a WinJS problem than Ace, but if anyone here can help me, that'd be great.

Thanks!

Update:

For the duplicate cursor, it seems that ACE doesn't properly detect the Windows Store app environment because it doesn't use the string "Microsoft Internet Explorer" in its user agent. Instead, it's "MSAppHost/1.0" or something. So I've changed my ace.js and now I detect for both. Here's the updated code:

(navigator.appName=="Microsoft Internet Explorer"||navigator.appName.indexOf("MSAppHost")>=0)

Thanks, user1743328!

alizahid
  • 959
  • 6
  • 17
  • 1
    You need to provide enough of the code with the context in which it's been used, preferably skeletal enough to reproduce the problems. I would guess on the cursor issue you need to look at that UI stylesheet and find where the cursor style definitions are and figure out how to override them. The issue with calling methods twice, what does mean? You *literally* have to call them twice (one after the other), or you call them, and then later or somewhere else they're also called? If you remove the first, does the second work? Is it being called on a certain event? Details, details. – Jared Farrish Dec 30 '12 at 06:43
  • There. I've added some more details. As for the core JS and CSS assets, I can't change those because they're linked from the Windows libraries. – alizahid Dec 30 '12 at 07:05
  • 1
    Alright, I've been looking at the way that ACE handles the cursor and that's by essentially intercepting all mouse and key presses within the editor and manipulating the content in layers beneath a small, "cursor-width" `textarea` that gets shuttled around the page, but never accepts any characters that have been typed into it. Hmm. So what you're describing sounds like that `textarea` isn't displaying correctly, maybe due to the way the ACE files are loading or some other conflict. Do you have a [JS debugger](http://msdn.microsoft.com/en-us/library/windows/apps/hh441474.aspx) setup? – Jared Farrish Dec 30 '12 at 07:35
  • Yes, that'e exactly what Ace does. I used the DOM Explorer (part of Visual Studio debugging tools) to see a small ` – alizahid Dec 30 '12 at 07:40
  • Are there any JS errors when you run it? ACE uses [`pointer-events`](https://developer.mozilla.org/en-US/docs/CSS/pointer-events), which [this answer](http://stackoverflow.com/a/5855294/451969) says is not supported by IE. From what I understand, Metro apps are a flavor of web browser (more or less), so I wonder if the manner that ACE handles this is problematic in Metro? Does ACE say explicitly it does work in ACE? Or do you know of any other projects that use it already that have source code you can access? I don't have a development environment for Win8 setup, unfortunately. – Jared Farrish Dec 30 '12 at 08:09
  • Ace works perfectly fine in IE 10, even the Metro version of IE 10. So it cannot be pointer-events. And yes, Windows Store JavaScript apps are essentially web apps that run in a "browser." I've tried searching a lot, but nothing came up on their forums. And their documentation is pretty dull. Sadly, I don't have access to anyone else's source code. But I know one app that uses Ace like I'm trying to and it works fine for them. It's baffling! – alizahid Dec 30 '12 at 08:37
  • Is it possible in that view to bring up webpages? For instance, navigate to the [ACE editor kitchen sink demo](http://ace.ajax.org/build/kitchen-sink.html)? Alternatively, although I figure you're not interested in other editors, can you get any other editors to work like [CKEditor with CodeMirror Plugin](https://github.com/w8tcha/CKEditor-CodeMirror-Plugin)? – Jared Farrish Dec 30 '12 at 10:03
  • After I posted this question, I moved to CodeMirror. It works just fine. Although I don't quite like it. It seems rather incomplete. Lots of interesting features are missing, which is why I went for ACE in the first place. – alizahid Dec 30 '12 at 11:35
  • Don't give up yet... Somebody's got to figure it out, right? `;)` Anyhow, there's also [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/), which has been around forever. I'm not sure if you're looking for highlighter options or code editor *with* highlighter options, though, and SyntaxHighlighter is the former until it's incorporated into a code editor. I mean, [ASP.NET uses it](http://forums.asp.net/t/1439187.aspx). `:P` Good luck, whatever you do. – Jared Farrish Dec 30 '12 at 11:58
  • Thanks. And I'm gonna look at it soon. But I need an editor with syntax highlighting and I'm using ACE on other projects and it's amazing. Just gotta figure out how to kill the clash between ACE and WinJS. – alizahid Dec 31 '12 at 07:24

1 Answers1

3

for the second cursor see https://github.com/ajaxorg/ace/blob/master/lib/ace/virtual_renderer.js#L79 probably it just doesn't recognize win8 useragent as IE

a user
  • 23,300
  • 6
  • 58
  • 90
  • 1
    you are a life saver, man! Now, the JS problem and I am all set! – alizahid Jan 01 '13 at 05:27
  • 1
    does js problem happen only for setTheme/Mode? If yes it might be some problem with require or script load event see https://github.com/ajaxorg/ace/blob/master/lib/ace/lib/net.js#L56 – a user Jan 01 '13 at 13:12
  • 1
    If I examine the DOM structure after the first call, it would seem that the script is being added to the `` but that's all it does. For a theme, it also needs to add a ` – alizahid Jan 02 '13 at 07:20
  • 1
    @alizahid Hey I was working on it, and you simply drag and paste ALL damn themes and scripts into default.html to generate proper references. It works now :D Oh...and you don't need to set the theme twice anymore :D –  Jan 13 '13 at 04:28
  • 1
    @RobertGawdzik Then it probably has to do with how WinJS loads the stuff. Thanks for the discovery! – alizahid Jan 15 '13 at 22:04
  • this must be fixed by https://github.com/ajaxorg/ace/commit/d783a77bc9107d05133d589b560d5da747577c44 – a user Feb 28 '13 at 14:16