Copy button CSS breaking change

Created on 22 October 2024, 2 months ago

Problem/Motivation

The copy button upstream source changed on Oct 16, 2024 (new version is 1.0.6).

This module uses a generic dist CDN URL for the copy button CSS which redirects to a URL that is specific to the latest version.

However, the JS that adds the button element to the page is bundled with this module and pinned to an older version.

This causes the copy button HTML to be out-of-sync with the CSS. With the new CSS, the button is in the wrong place.

Here's a screenshot of the result with the new copy button CSS, from a fresh install on simplytest.me. The button is on the bottom-left, outside the code box. It should be in the top-right corner of the code box.

Here's the official copy button demo page.

I think the commit that caused this is problem c2c8f82, which adds a container div around the button.

In the new CSS, the container has position: absolute and the button has position: relative. In the old CSS, the button had position: absolute.

Steps to reproduce

Add a valid code snippet to a page, with this module's Enable copy button option enabled.

Proposed resolution

My suggestion is to bundle both the CSS and JS with this module and update the JS to the new version.

Alternatively: Pin the CSS URL to a version that's compatible with the JS in this module instead of using a URL that redirects to the latest version. This would also eliminate the unnecessary HTTP request from the redirect.

Rationale

Drupal.org recommends against using CDNs .

While the third-party libraries page discourages hosting 3rd-party libraries on drupal.org, that page also says that it's acceptable under certain circumstances (I'm interpreting this as "if any of these is true"):

However, hosting the library in your Git repo on Drupal.org is acceptable if the 3rd party library:

1. had to be modified to work with Drupal, and the modifications were not accepted by the original author;
2. is generally difficult to find, or the specific version needed is hard to find;
3. is no longer maintained by the original author;
4. has its provenance, original license and source documented in a file included in the project;
5. is licensed under GPLv2+, or has a “GPLv2-compatible” license that allows us to distribute it under GPLv2+.

The copy button code is currently licensed with the Unlicense, which is GPLv2-compatible.

📌 Task
Status

Active

Version

1.1

Component

Code

Created by

🇺🇸United States kentr

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024