Live editing broken in docs

Question

Live editing broken in docs

Opened this issue 7 months ago · 16 comments

facelessuser commented 7 months ago

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

Answer 1 · 2024-02-13T02:18:31.000Z

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

Answer 2 · 2024-02-13T02:22:12.000Z

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.

Answer 3 · 2024-02-13T03:44:05.000Z

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

Answer 4 · 2024-02-13T03:50:05.000Z

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

Answer 5 · 2024-02-13T04:35:42.000Z

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.

Answer 6 · 2024-02-13T17:29:40.000Z

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

Answer 7 · 2024-02-13T17:38:36.000Z

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

Answer 8 · 2024-02-13T19:32:22.000Z

Should be fixed now, sorry about that!

Answer 9 · 2024-02-13T19:34:54.000Z

@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.

Answer 10 · 2024-02-13T19:39:43.000Z

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

Answer 11 · 2024-02-13T21:54:14.000Z

I am getting some odd results in live editing, too

Answer 12 · 2024-02-13T22:05:16.000Z

FYI, the selection issue seems to be chrome only.

Answer 13 · 2024-02-13T22:09:58.000Z

It is only mac as well...

Answer 14 · 2024-02-26T20:31:30.000Z

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

Answer 15 · 2024-02-26T21:09:25.000Z

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

Answer 16 · 2024-02-28T00:19:16.000Z

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