Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live editing broken in docs #429

Open
facelessuser opened this issue Feb 13, 2024 · 16 comments
Open

Live editing broken in docs #429

facelessuser opened this issue Feb 13, 2024 · 16 comments

Comments

@facelessuser
Copy link
Collaborator

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

@MysteryBlokHed
Copy link
Member

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

@MysteryBlokHed
Copy link
Member

MysteryBlokHed commented Feb 13, 2024

This is what the inspector looks like in Chrome:

Screenshot of a color.js documentation page in Chrome

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

Screenshot of the same documentation page in Firefox

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
Copy link
Member

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

@facelessuser
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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
Copy link
Member

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

@facelessuser
Copy link
Collaborator Author

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

@LeaVerou
Copy link
Member

Should be fixed now, sorry about that!

@facelessuser
Copy link
Collaborator Author

@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
Copy link
Member

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

@svgeesus
Copy link
Member

I am getting some odd results in live editing, too

image

@facelessuser
Copy link
Collaborator Author

FYI, the selection issue seems to be chrome only.

@facelessuser
Copy link
Collaborator Author

It is only mac as well...

@jgerigmeyer
Copy link
Member

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
Copy link
Collaborator Author

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

@LeaVerou
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants