Mkdocs-material: Copy To Clipboard Adds Linebreak At End Of String In Firefox

[zekefarwell]

• [x] I've read the contribution guidelines and agree with them

__I've found a bug and checked that ...__

• [x] ... the problem doesn't occur with the default MkDocs template
• [x] ... the problem is not in any of my customizations (CSS, JS, template)
• [x] ... the documentation does not mention anything about my problem
• [x] ... there are no open or closed issues that are related to my problem

Description

In Firefox, the copy to clipboard button on code blocks adds a linebreak/return character at the end of the string causing terminal commands to immediately execute when pasted.

Expected behavior

Clicking the copy to clipboard button for a terminal command code block and then pasting that command into a terminal should not execute the command until the enter key is pressed. This expected behavior is what happens in Chrome, Safari, and Edge (Chromium).

Actual behavior

A command copied via the copy to clipboard button is immediately executed when pasted into a terminal because it has a trailing linebreak/return character at the end of the copied string.

Steps to reproduce the bug

1. Open Firefox
2. Navigate to https://squidfunk.github.io/mkdocs-material/getting-started/
3. Click the copy to clipboard button on the pip install mkdocs-material code block
4. Paste the command into a terminal
5. Command is immediately executed instead of waiting for the return key-press

Package versions & Project configuration

I've omitted these since the issue is reproducible on the MkDocs for Material
docs site: https://squidfunk.github.io/mkdocs-material
Happy to provide more information if needed.

I fully understand if this is a low priority issue due to it only happening in Firefox. I started trying to figure out why it's happening but I'm a bit stuck on figuring out how to get mkdocs to serve up the source maps for the js bundles and without that, I'm not making much headway looking through the minified js.

System information

• OS: Mac OS Catalina (10.15.7)
• Browser: Firefox 81

[squidfunk]

Thanks for reporting. Material for MkDocs uses Clipboard.js. It’s probably best to open an issue on their issue tracker, as it’s a cross browser issue and we can only try to monkey-patch.

Integration is done here:

https://github.com/squidfunk/mkdocs-material/blob/175498da779810933e68527ae801598cd2492292/src/assets/javascripts/integrations/clipboard/index.ts#L78

[zekefarwell]

Oh have you come across this before and verified that it's an issue with Clipboard.js? I thought it might be but I couldn't replicate the issue with the examples on https://clipboardjs.com/ so I figured it must be something in mkdocs-material. Maybe they are doing something weird to work around it on their site though.

[squidfunk]

We’re not doing anything fancy with Clipboard.js - just using the default integration 😊 I haven’t verified that it’s an issue with the library though. As you already noted it’s very low priority. If you’d like to go down that path, I can assist if necessary but I won’t have any bandwidth to investigate this myself right now.

[squidfunk]

Regarding serving up the theme - have you read the guide on customization, in particular theme development?

https://squidfunk.github.io/mkdocs-material/customization/#theme-development

[zekefarwell]

If you’d like to go down that path, I can assist if necessary but I won’t have any bandwidth to investigate this myself right now.

No worries. Thanks for the theme development link, I had not read that section yet and it looks like it explains things very well! Apologies for not finding that before opening this issue. I'll see if I can figure out what's going on and will update if I do.

[squidfunk]

I've investigated this problem and it appears to me that it's Firefox-specific:

If I select the whole line with the cursor, __no newline__ is added

If I select the whole line with the cursor __and move the cursor down by a little__, __a newline is added__

_If you look closely, the cursor is at the beginning of the next line, however, the command is not executed. This does not happen in Chrome._

If I press the copy-to-clipboard button, __a newline is added__ – same behavior

If we inspect the HTML of the code block, there's indeed a newline added to the end of it:

The exact same thing happens on the official MkDocs documentation – you can inspect the first code block under this section. If I remove the newline from the code block, it renders just as fine. For this reason, there are two possibilities to solve this:

1. Fix the Markdown Parser in Python Markdown to not emit trailing newlines.
2. Fix Clipboard.js to strip the newline in Firefox

None of that can be done as part of this project, which is why I'm closing this issue. I'm sorry we cannot do anything about it, but it only makes sense to solve this upstream.

[zekefarwell]

You're absolutely right about the python markdown parser emitting a trailing newline character. The dev tools inspector reformats html so that sort of thing isn't always obvious. Very clear when looking at the raw html source though. I'll open issues with python markdown and/or clipboard.js.