Steps for me to reproduce the issues:
1: Highlight/selection issue
Load in Chrome
Remix from https://glitch.com/edit/#!/twitterbot-autorespond?path=README.md:1:100
Highlight text
(Expected: stays highlighted. Actual: Removes selection immediately)
This broke everything else that used highlighting too: copy/paste, ask for help, etc.
2: Mismatch between front-end and server
I loaded in Safari to see if it was the project or the browser
Everything was out of order. It was as if all my attempts to copy/paste or delete had succeeded on the backend but not the front end, resulting in a dozen or so blocks of code being out of order. Then I refreshed in Chrome and saw the same out of order view.
Editing only in Safari seems to have fixed this. I started over from scratch but man, what a bug.
More evidence for my āfront-end/back-end mistmatchā theory is that I was getting nonsensical errors in the logs in Chrome. (āparse error: Objects must consist of key:value pairs at line 13, column 2ā). There was no syntax error in Chrome (I put the entire object declaration through lint - not just that line - and I even tried rewriting from scratch). Everything passed. However when the mangled code loaded in Safari, it was obvious that there were many parse errors.
Browser extensions:
Per Anilās question on Twitter, I do have some chrome extensions that can modify the page (though Iāve never had issues like JS or HTML interference before). Namely: Ad Block Plus, Amazon Wish List, LastPass, Highly, Pocket, Pinterest, The Great Suspender, Video Speed Controller, and MetaMask. Safari only has LastPass installed.
Sorry you can ran into this. We havenāt seen this come up before, so weāre keen to understand the cause. Does this happen consistently in your Chrome with other projects too? If so, if you could try an incognito window which doesnāt have the plugins running, that would help us narrow down the cause.
It does happen consistently, in every project, and every file except README. Probably not a coincidence that READMEās donāt have the āask for helpā button. In the console, I get some warnings, but nothing obviously related.
It doesnāt happen in Incognito mode (which only has Adblock Plus). And good news: I was able to enable/disable extensions until I think I found the problem. It disappears when I disable Highly.
I think something about a conflict between your code and Highly is causing the highlighting and front-end sync issues. As luck would have it, I know those guys, so I could intro if thatās helpful.
@Gareth I chatted with the Highly devs and I think I may have actually been able to resolve this!
I think the upshot for you guys is: Is it possible that any extension that also tries to use text selection leads to breaking issues in Glitch? (eg the issue I had where the server stored different code than the UI showed). If you want to dig into this with Highly Iād be happy to intro you.
The fix, per Highly:
Theyāve gotten reports of this before
They added Glitch to a list of sites they pro-actively ignore
New Highly users get the new ignore list
Old Highly users should make sure they have the latest version (I did) and disable/re-enable the extension (which erases the cache & pulls the new list).
After re-enabling, I canāt repro the bugs anymore, so it seems to work!
Perfect, thanks for the assist @staringispolite Highly here, this is our quick fix, weāll see what we can do going forward to avoid having to block the domain entirely. But we play well with static text and not so much with input/editable content. Cheers!
Thanks for following up on this with them and for the quick fix @wuebben. This might explain why I was unable to reproduce trying this out with my own highly extension, as perhaps it had already been blocked!
with this file https://glitch.com/edit/#!/emoji-mascot-generator?path=server.js:87:6
Highly here, this is our quick fix, weāll see what we can do going forward to avoid having to block the domain entirely. But we play well with static text and not so much with input/editable content. Cheers!