From 3d1f926a6821713598104aca6dbb28debca2a02f Mon Sep 17 00:00:00 2001
From: Simone <26844016+simonebortolin@users.noreply.github.com>
Date: Tue, 3 Jan 2023 23:44:26 +0100
Subject: [PATCH] Fixes various bugs with copy code button (#1096)
This PR fixes three bugs:
# first bug
When revising my last PR #1086 I realised a slight bug in the code-copy PR #945 , my change to the css ignored a case. This PR is a hotfix and
Before PR #945:
After PR #945:
Fix:
# second bug
> @simonebortolin @mattxwang I'm trying to write some regression tests for this feature.
>
> If I use GitHub's copy button to copy the following plain text, it preserves all the spaces:
>
> ```
> 1 leading space
> 2 leading spaces and 2 trailing spaces
> 3 internal spaces
> 4 trailing spaces
> ```
>
> Using the new copy button with the same text in this PR branch of JTD gives this:
>
> ```
> 1 leading space
> 2 leading spaces and 2 trailing spaces
> 3 internal spaces
> 4 trailing spaces
> ```
>
> It appears that the leading space from line 1 has been removed, and inserted on all the other lines. Moreover, the 4 trailing spaces have been removed.
>
> BTW, #924 didn't give a precise requirements spec, but mentioned the Microsoft docs UI; @mattxwang mentioned also the GitHub UI. It would be helpful to add a functional spec of what the JTD copy button is supposed to do, as a basis for regression tests.
>
> I'm not aiming at a rigorous test for the UI. Personally (using Safari at the default mag) I find the clipboard icon too small: it just looks like a box, and I can hardly see that there is a clip at the top. But I don't have a suggestion for a better icon.
# third bug
When I re-read the code after the second bug, I noticed a bug that it does not always select the text field to be copied correctly (in case there are also line numbers) is copied:
```
1
2
3
4
# Ruby code with syntax highlighting and fixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
```
instead of
```
# Ruby code with syntax highlighting and fixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
```
Co-authored-by: Matt Wang <matt@matthewwang.me>
---
_sass/code.scss | 20 ++++++++++----------
assets/js/just-the-docs.js | 2 +-
2 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/_sass/code.scss b/_sass/code.scss
index c12421b6..ee8a1f05 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -3,8 +3,8 @@
// {% raw %}
-// This instruction applies to all queues not within 'pre', avoiding 'code' generated by the highlight.
-:not(pre) {
+// This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
+:not(pre, figure) {
& > code {
padding: 0.2em 0.15em;
font-weight: 400;
@@ -52,13 +52,13 @@ a:visited code {
// ```[LANG]...```
// the code may appear with 3 different types:
-// container \ case: default case, code with line number, code with html rendering
-// top level: div.highlighter-rouge, div.listingblock > div.content, figure.highlight
-// second level: div.highlight, .table-wrapper, pre
-// third level: pre.highlight, td.code, absent
-// last level: code, pre, code (optionality)
-// highlighter level: span, span, span
-// the spacing are only in the second level for case 1, 3 and in the thirt level for case 2
+// container \ case: default case, code with line number, code with html rendering
+// top level: div.highlighter-rouge, figure.highlight, figure.highlight
+// second level: div.highlight, div.table-wrapper, pre.highlight
+// third level: pre.highlight, td.code, absent
+// last level: code, pre, code (optionality)
+// highlighter level: span, span, span
+// the spacing are only in the second level for case 1, 3 and in the third level for case 2
// select top level container
div.highlighter-rouge,
@@ -150,7 +150,7 @@ figure.highlight {
// setting the spacing and scrollbar on the thirt level for the second case
.highlight .table-wrapper {
- padding: 0;
+ padding: $sp-3 0;
margin: 0;
border: 0;
box-shadow: none;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 223f28b8..8aabf325 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -501,7 +501,7 @@ jtd.onReady(function(){
copyButton.addEventListener('click', function () {
if(timeout === null) {
- var code = codeBlock.querySelector('code').innerText.trim();
+ var code = codeBlock.querySelector('pre:not(.lineno)').innerText;
window.navigator.clipboard.writeText(code);
copyButton.innerHTML = svgCopied;
--
GitLab