Live editing broken in docs

[facelessuser]

As title mentions, none of the live examples allow editing.

[MysteryBlokHed]

Weird—for some reason I can edit them just fine in Firefox, but it doesn't work in Chrome

[MysteryBlokHed]

This is what the inspector looks like in Chrome:

And this is what it looks like in Firefox (ignore the data-dashlane-* properties):

There seems to be a <textarea> that's completely missing in Chrome, and Chrome has individual <span>s for every token. Not really sure what might be causing that.

[MysteryBlokHed]

After checking again, it looks like it actually seemingly randomly goes back and forth between working and not working after refreshes (on Firefox).

[facelessuser]

I don't know their document system well enough to debug. If it had been a clear issue originating from the color library, I would have spent more time looking at it. I saw some cross origin complaints and a shadow root complaint:

prism-live.js?load=javascript:1 Uncaught (in promise) TypeError: Failed to resolve module specifier './prism-live.mjs'. The base URL is about:blank because import() is called from a CORS-cross-origin script.
    at prism-live.js?load=javascript:1:1

Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')
    at handleNodesDeep (content.js:208:22)
    at handleDocument (content.js:164:25)
    at load (content.js:59:17)
    at content.js:200:55

[facelessuser]

The issue seems to be the CORS error. Running chrome as below fixed the issue.

open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

Safari did not seem to have an issue, and I was able to reproduce the intermittent issue with Firefox. I assume fixing the cores issue with Prism will likely get things working everywhere.

[LeaVerou]

I recently switched Prism Live to use ESM and I think that's what broke this. Should be an easy fix.

[facelessuser]

Ok, that explains it. I was trying to figure out what changed.

[LeaVerou]

Should be fixed now, sorry about that!

[facelessuser]

@LeaVerou It is working again! As a side note, I'm not sure if you are aware, but selections are invisible currently, it makes it difficult to select and copy specific things in examples. I assume it is a style regression, but I haven't looked into it too much yet.

[LeaVerou]

Oof, no, I was not aware, thanks. Will fix it today.

[svgeesus]

I am getting some odd results in live editing, too

[facelessuser]

FYI, the selection issue seems to be chrome only.

[facelessuser]

It is only mac as well...

[jgerigmeyer]

The live editor is still (again?) broken for me in Chrome:

Uncaught (in promise) TypeError: Failed to resolve module specifier './prism-live.mjs?load=javascript'. The base URL is about:blank because import() is called from a CORS-cross-origin script.
    at prism-live.js?load=javascript:16:28

[facelessuser]

Yes, I noticed this as well. Had not gotten around to commenting.

[LeaVerou]

Ugh, sorry about that. I’ll take a look. FWIW that should not hold up the release.