fregante / GhostText

👻 Use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).
https://GhostText.fregante.com
MIT License
3.28k stars 117 forks source link

Not working with Visual Studio Team Services / Web Access #69

Closed RoryQ closed 7 years ago

RoryQ commented 8 years ago

GhostText for Chrome is unable to detect the content editable areas in Visual Studio Team Services / Web Access. You can get access to the pages if you have a msdn account at https://www.visualstudio.com/products/visual-studio-team-services-vs

After some debugging in the browser I've tracked the problem down, and it's due to the content editable areas being loaded in an iframe where the only body element is the content editable area.

<iframe frameborder="no" tabindex="0">
<html>
    <head>
        <link href="https://link.to/EmbeddedPage.css" type="text/css" rel="stylesheet">
        <link href="https://link.to/RichEditor.css" type="text/css" rel="stylesheet">
    </head>
    <body contenteditable="true"> Text area </body>
</html>
</iframe>

https://github.com/GhostText/GhostText/blob/master/chrome/scripts/input-area.js#L184 This line is looking for content editable areas under the body of the document, which doesn't exist so the solution that works for me would be to start the querySelectorAll() at the document rather than the document.body.

I noticed the Google content editable detector isn't searching from the body so maybe you had similar issues with detecting their editable areas?

fregante commented 7 years ago

To add support for input areas inside iframes, GT needs a big rewrite and currently ain't nobody got time for that, unfortunately.

Will be tracked in #75