Firefox Ace Editor | Error: Permission denied to access property "text"

coltoneakins commented 6 years ago

For textareas using Ace on Firefox, text is only sent one-way from the browser to the external text editor. Text sent in the reverse direction is not written to the Ace editor. The browser console lists the following error:

Error: Permission denied to access property "text"

which is listed for every text character the user had typed in the external text editor. In the following examples, the phrase 'test' was typed on the external text editor for a HasteBin textarea versus an Ace editor textarea.

HasteBin:

hatebinfirefoxghosttext

Ace:

acefirefoxghosttext

The issue exists in the Firefox release (not using the WE version), Firefox Developer Edition (using the WE version), and Firefox Nightly (using the WE version). Issue does not appear on Google Chrome. Issue was also tested using Atom and Emacs as the external text editor. The issue persists on Firefox regardless of the editor used in my tests.

Notice that the warning does not appear in the first example using the HasteBin textarea.

coltoneakins commented 6 years ago

The error corresponds to the <script> tags injected by the extension with id: #ghost-text-injected-script-ace_editor_demo and #ghost-text-injected-script-embedded_ace_code (two different, injected <script> tags). Specifically, it refers to line 17:

                ghostTextAceDiv.addEventListener("GhostTextServerInput", function (e) {
                    ghostTextAceEditorSession.setValue(e.detail.text);
                });

In the source, this corresponds to AceCodeEditor.ts.

coltoneakins commented 6 years ago

It seems that the detail property became inaccessible when it was dispatched in the input-area.js (where the CustomEvent was defined) to this injected JS code.

fregante commented 6 years ago

Thank you for your report! Could you look into fixing the issue?

coltoneakins commented 6 years ago

I changed the CustomEventInit dictionary--the 'detail'--(found here) from:

            this.currentText = text;
            var details = {detail: {text: this.currentText}};
            var gtServerInputEvent = <Event>StandardsCustomEvent.get('GhostTextServerInput', details);
this.jsCodeEditorDiv.dispatchEvent(gtServerInputEvent);

to:


            this.currentText = text;
            var details = {detail: this.currentText};
            var gtServerInputEvent = <Event>StandardsCustomEvent.get('GhostTextServerInput', details);
this.jsCodeEditorDiv.dispatchEvent(gtServerInputEvent);

And, I changed the listener in the injected script (found here) from:

                ghostTextAceDiv.addEventListener("GhostTextServerInput", function (e: any) {
                    ghostTextAceEditorSession.setValue(e.detail.text);
});

to:

                ghostTextAceDiv.addEventListener("GhostTextServerInput", function (e: any) {
                    ghostTextAceEditorSession.setValue(e.detail);
});

This fixed the issue. GhostText is now working for Ace textareas on Firefox. However, this isn't really the fix as I am not sure what would cause the permission to access text to be denied in the first place. A CustomEvent dispatched to the injected script with the CustomEventInit dictionary should be able to share its detail object. My guess is that it could be something related to the CSP for the page/extension. I am still investigating before I submit any sort of pull request.