Revert and improve change on code block regarding scrolling (#1204)

cderv · web-flow · commit 0de8f113fd1f · 2021-07-13T16:41:11.000+02:00
* Icon will stay on the top right on the block when scrolling
* Icon button is lighter by default, and darker on hover
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,7 +1,7 @@
 Package: bookdown
 Type: Package
 Title: Authoring Books and Technical Documents with R Markdown
-Version: 0.22.11
+Version: 0.22.12
 Authors@R: c(
     person("Yihui", "Xie", role = c("aut", "cre"), email = "xie@yihui.name", comment = c(ORCID = "0000-0003-0645-5666")),
     person("JJ", "Allaire", role = "ctb"),
diff --git a/NEWS.md b/NEWS.md
@@ -3,8 +3,7 @@
 - In `bs4_book()`, improvement regarding copy button:
   * It has now a light icon instead of a text with white background (#1192). 
   * It will no more show on output block code when knitr's option is `collapse = FALSE` (#1197).
-  * For code block with very long line, it will now wrap in the code block with no more x-scroll bar, and it will wraps around the copy button icon so that text is not hidden (#1187). 
-  If you want to customize part of the UI to change this default behavior, you can do it using a custom css with `bs4_book()`.
+  * It will now be placed correctly on the right side of the code block, with a light color which gets darker on hover so that it is less obtrusive when ovelapping text in block with long lines  (#1204). If you want to customize part of the UI to change this default behavior, you can do it using a custom css with `bs4_book()`.
 
 - Fix an issue with `bs4_book()` where text written using [Line Block](https://bookdown.org/yihui/rmarkdown-cookbook/indent-text.html) was not found in search (thanks, @dmklotz, #1141).
 
diff --git a/inst/resources/bs4_book/bs4_book.css b/inst/resources/bs4_book/bs4_book.css
@@ -378,9 +378,8 @@ code {
 
 pre code {
   background-color: transparent;
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow-wrap: break-word;
+  word-break: normal; /* force wide blocks to scroll, not wrap */
+  word-wrap: normal;
 }
 
 pre, code {
@@ -395,16 +394,25 @@ code a:any-link {
 
 /* copy button */
 
-pre .copy {
-  float: right;
+div.sourceCode {
+  position: relative;
+}
+
+.btn-copy {
+  position: absolute;
+  top: 0rem;
+  right: -0.5rem; /* coherent with pre margin rule */
+}
+
+div.sourceCode > button {
+  filter: opacity(50%);
 }
 
-pre .copy button {
-  font-size: 80%;
-  padding: 4px 6px;
+div.sourceCode > button:hover {
+  filter: opacity(100%);
 }
 
-pre .copy > button > i.bi::before {
+div.sourceCode > button > i.bi::before {
   display: inline-block;
   height: 1rem;
   width: 1rem;
@@ -415,7 +423,7 @@ pre .copy > button > i.bi::before {
   background-size: 1rem 1rem;
 }
 
-pre .copy > button.btn-copy-checked > .bi::before {
+div.sourceCode > button.btn-copy-checked > .bi::before {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
 }
 
@@ -512,6 +520,11 @@ body {
   padding: 1rem;
 }
 
+.rmdcaution .btn-copy, .rmdimportant .btn-copy, .rmdnote .btn-copy, .rmdtip .btn-copy, .rmdwarning .btn-copy {
+  /* Needs to be set according to margin in callout pre block */
+  right: -1rem;
+}
+
 main ul {
  list-style-type: square;
 }
diff --git a/inst/resources/bs4_book/bs4_book.js b/inst/resources/bs4_book/bs4_book.js
@@ -107,15 +107,15 @@ function changeTooltipMessage(element, msg) {
 $(document).ready(function() {
   if(ClipboardJS.isSupported()) {
     // Insert copy buttons
-    var copyButton = "<div class='copy'><button type='button' class='btn btn-copy' title='Copy to clipboard' aria-label='Copy to clipboard' data-toggle='popover' data-placement='top' data-trigger='hover'><i class='bi'></i></button></div>";
-    $(copyButton).prependTo("pre.sourceCode");
+    var copyButton = "<button type='button' class='btn btn-copy' title='Copy to clipboard' aria-label='Copy to clipboard' data-toggle='popover' data-placement='top' data-trigger='hover'><i class='bi'></i></button>";
+    $(copyButton).appendTo("div.sourceCode");
     // Initialize tooltips:
     $('.btn-copy').tooltip({container: 'body', boundary: 'window'});
 
     // Initialize clipboard:
     var clipboard = new ClipboardJS('.btn-copy', {
       text: function(trigger) {
-        return trigger.parentNode.nextSibling.textContent;
+        return trigger.parentNode.textContent;
       }
     });
 
