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

Code copy doesn't work when set highlight.noClasses = true #154

Closed
wizardbyron opened this issue Mar 18, 2022 · 8 comments
Closed

Code copy doesn't work when set highlight.noClasses = true #154

wizardbyron opened this issue Mar 18, 2022 · 8 comments
Labels
bug Something isn't working

Comments

@wizardbyron
Copy link
Contributor

What happened?

When I set enableCodeCopy = true, the copy button in the code blocks stuck and prompts the following in the browser console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'innerText')
at copyCodeToClipboard (main.bundle.min.998bd658c4cc3498df01180704ad0ea16bb3c0d6d118eb8ac6f557a59c86d1304d69e51ba7df5a9d203e2698d28571a422b4cf20f830810d571fee19fbcb55fc.js:11:695)
at HTMLButtonElement. (main.bundle.min.998bd658c4cc3498df01180704ad0ea16bb3c0d6d118eb8ac6f557a59c86d1304d69e51ba7df5a9d203e2698d28571a422b4cf20f830810d571fee19fbcb55fc.js:11:550)

Theme version

2.1.0

Hugo version

v0.94.2

What browsers are you seeing the problem on?

Chrome, Safari

Relevant Hugo log output

No response

@wizardbyron wizardbyron added the bug Something isn't working label Mar 18, 2022
wizardbyron added a commit to wizardbyron/congo that referenced this issue Mar 23, 2022
@jpanther
Copy link
Owner

jpanther commented Apr 3, 2022

I've been trying to replicate this issue without any success. I've tried both Safari and Firefox and the current selector seems to be working fine. Is this specific to a particular browser version or configuration?

The problem with your change is that it will break the functionality of the code copy when the line numbers are enabled on the code block. If you remove .chroma from the selector, it will copy the line numbers instead of the actual code. There's an example of this type of code block on the Markdown Sample page in the exampleSite if you want to test to see what I mean.

@wizardbyron
Copy link
Contributor Author

I closed the PR but the problem still problem still exists, the exampleStie has same issue. I'm trying to figure out the root cause.

@wizardbyron
Copy link
Contributor Author

Finally, I found this issue is caused by bothnoClasses = true in [highlight]and enableCodeCopy = true.

@wizardbyron wizardbyron reopened this Apr 7, 2022
@wizardbyron
Copy link
Contributor Author

Here are design options:

  1. Show error message when both highlight.noClasses = true and .Site.Params.enableCodeCopy = true.
  2. Enforce or overwrite highlight.noClasses = false when .Site.Params.enableCodeCopy = true.

@jpanther
Copy link
Owner

jpanther commented Apr 7, 2022

Well highlight.noClasses = false is considered a theme requirement so I'm not sure this is actually a big problem to solve. Perhaps I could show a build warning if any of the required params aren't set though.

@jpanther
Copy link
Owner

I've had a look into this and unfortunately Hugo doesn't allow themes to access the Markup config values and so I'm not able to add these warnings - see https://discourse.gohugo.io/t/how-do-i-get-the-noclasses-value/26395. I don't think there's much more I can add to this at this stage.

@wizardbyron wizardbyron changed the title Code copy doesn't work. Code copy doesn't work when set highlight.noClasses = false Apr 16, 2022
@wizardbyron wizardbyron changed the title Code copy doesn't work when set highlight.noClasses = false Code copy doesn't work when set highlight.noClasses = ture Apr 22, 2022
@wizardbyron wizardbyron changed the title Code copy doesn't work when set highlight.noClasses = ture Code copy doesn't work when set highlight.noClasses = true Apr 22, 2022
@wizardbyron
Copy link
Contributor Author

wizardbyron commented Apr 22, 2022

I've had a look into this and unfortunately Hugo doesn't allow themes to access the Markup config values and so I'm not able to add these warnings - see https://discourse.gohugo.io/t/how-do-i-get-the-noclasses-value/26395. I don't think there's much more I can add to this at this stage.

It looks the only thing we can do is to update configuration.md to highlight when enableCodeCopy = true that highlight.noClasses must be false.

@jpanther
Copy link
Owner

I have made some changes to better explain these required params. Hopefully this makes it a bit clearer and will help others avoid this situation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants