Cannot edit Ace in a taskpane of an add-in in Excel for Windows

[SoftTimur]

I just realised that we cannot modify well texts of Ace in a taskpane of an add-in in Excel for Windows. Although Office may not be a supported platform of Ace, this problem seems to apply to other source editors like CodeMirror as well. I would like to know if you have a solution or workaround, because one important of mine is disabled by this.

Here is the details.

Thank you in advance

[nightwing]

I have not heard about excel addins running webviews before.
Does it run in some version of ie or edge?

Does it work if you click add textarea to the page, and click on it before clicking on the ace?

[SoftTimur]

Yes, JavaScript API for Office is available to build Office add-ins with web languages, the add-ins are just like web pages...

Ace and CodeMirror of the web page of my testing add-in work fine in Chrome, IE, Safari, Excel Online (in Chrome, IE and Safari), and Excel for Mac. They just don't work in Excel for Windows.

"Does it work if you click add textarea to the page, and click on it before clicking on the ace?" ==> I don't know what you mean by "click add textarea to the page". But I just realised that, if we click on Excel, then click on a useless area (somewhere without element) in the taskpane before clicking in the Ace textarea, we could then edit its content. Is this information useful for you? Can we make some workaround?

[nightwing]

try adding

window.addEventListener("mousedown", function(e) {
    if (!document.hasFocus()) e.stopPropagation()
}, true)

browsers sometimes do not focus the window, when mousedown even is cancelled. Normally ace does https://github.com/ajaxorg/ace/blob/v1.2.8/lib/ace/mouse/mouse_handler.js#L55, but maybe it doesn't work on the browser that excel uses

[SoftTimur]

With the mousedown listener, It is better than before:

1. if we click on Excel, then click back to Ace textarea, we still cannot edit the content
2. if we click on Excel, then click back to Ace textarea, then click again, we can now edit the content

So do you have a solution? I think we are in the right direction...

Thank you

[nightwing]

try adding editor.focus() call after stopPropagation()

[SoftTimur]

I have done

window.addEventListener("mousedown", function(e) {
  if (!document.hasFocus()) {
    e.stopPropagation();
    editor.focus()
  }
}, true)

Now, each time I click back to anything in the taskpane, the focus is systematically set to the Ace textarea, I think we need to bind mousedown event only to the Ace textarea, right?

Actually, I will finally use ui-ace, because I am using AngularJS 1.X. How can we add the mousedown listener properly here?

Thank you very much

[nightwing]

add

document.querySelector(".editor").addEventListener("mousedown", function(e) {
  if (!document.hasFocus()) {
    e.stopPropagation();
    e.currentTarget.env.editor.focus()
  }
}, true)

[nightwing]

@SoftTimur Did the above solve your issue?

[SoftTimur]

Yes, your last solution (see full code) did work in Excel for Windows. However, as I mentioned before, I need to use this in Angular 1.X framework. So I tried to make a directive like here, unfortunately it did not work in Excel for Windows.