steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-22 02:52:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixes various bugs with copy code button (#1096)

Browse Source 
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:
![image](https://user-images.githubusercontent.com/26844016/209864912-2fe8e5a9-f21e-40c7-aa0d-65050196f4ee.png)

![image](https://user-images.githubusercontent.com/26844016/209864950-c315cef1-36ee-4356-91b2-db159cf3806f.png)

After PR #945:
![image](https://user-images.githubusercontent.com/26844016/209864524-70a8b095-056a-464b-9ff7-fd31397492ba.png)

![image](https://user-images.githubusercontent.com/26844016/209864558-9fd7a5d3-a965-4aa4-af62-a56846e331b3.png)

Fix:
![image](https://user-images.githubusercontent.com/26844016/209865514-a9921096-b852-4402-8272-b76908851ad6.png)

![image](https://user-images.githubusercontent.com/26844016/209865550-d7842507-74fc-4f21-b407-9b8917df1fd8.png)

# 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>
This commit is contained in:
Simone 2023-01-03 23:44:26 +01:00 committed by GitHub
parent 3ba32c5cba
commit 3d1f926a68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_sass/code.scss
View File

@ -3,8 +3,8 @@
// {% raw %} // {% raw %}
// This instruction applies to all queues not within 'pre', avoiding 'code' generated by the highlight. // This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
:not(pre) { :not(pre, figure) {
& > code { & > code {
padding: 0.2em 0.15em; padding: 0.2em 0.15em;
font-weight: 400; font-weight: 400;
@ -53,12 +53,12 @@ a:visited code {
// the code may appear with 3 different types: // the code may appear with 3 different types:
// container \ case: default case, code with line number, code with html rendering // container \ case: default case, code with line number, code with html rendering
// top level: div.highlighter-rouge, div.listingblock > div.content, figure.highlight // top level: div.highlighter-rouge, figure.highlight, figure.highlight
// second level: div.highlight, .table-wrapper, pre // second level: div.highlight, div.table-wrapper, pre.highlight
// third level: pre.highlight, td.code, absent // third level: pre.highlight, td.code, absent
// last level: code, pre, code (optionality) // last level: code, pre, code (optionality)
// highlighter level: span, span, span // 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 // the spacing are only in the second level for case 1, 3 and in the third level for case 2
// select top level container // select top level container
div.highlighter-rouge, div.highlighter-rouge,
@ -150,7 +150,7 @@ figure.highlight {
// setting the spacing and scrollbar on the thirt level for the second case // setting the spacing and scrollbar on the thirt level for the second case
.highlight .table-wrapper { .highlight .table-wrapper {
padding: 0; padding: $sp-3 0;
margin: 0; margin: 0;
border: 0; border: 0;
box-shadow: none; box-shadow: none;

2
assets/js/just-the-docs.js
View File

@ -501,7 +501,7 @@ jtd.onReady(function(){
copyButton.addEventListener('click', function () { copyButton.addEventListener('click', function () {
if(timeout === null) { if(timeout === null) {
var code = codeBlock.querySelector('code').innerText.trim(); var code = codeBlock.querySelector('pre:not(.lineno)').innerText;
window.navigator.clipboard.writeText(code); window.navigator.clipboard.writeText(code);
copyButton.innerHTML = svgCopied; copyButton.innerHTML = svgCopied;