Merge pull request #8992 from quarto-dev/html/clipboard-in-modal

Author: cderv

news/changelog-1.5.md

@@ -6,6 +6,7 @@ All changes included in 1.5:
 - ([#8118](https://github.com/quarto-dev/quarto-cli/issues/8118)): Add support for `body-classes` to add classes to the document body.
 - ([#8311](https://github.com/quarto-dev/quarto-cli/issues/8311)): Correct z-order for margins with no contents
 - ([#8862](https://github.com/quarto-dev/quarto-cli/issues/8862)): Properly deal with an `aside` within a definition list.
+- ([#8990](https://github.com/quarto-dev/quarto-cli/issues/8990)): Copy button now works for embedded code source in modal window when optin-in `code-tools` feature.
 
 ## PDF Format
 

src/command/render/codetools.ts

@@ -1,9 +1,8 @@
 /*
-* codetools.ts
-*
-* Copyright (C) 2020-2022 Posit Software, PBC
-*
-*/
+ * codetools.ts
+ *
+ * Copyright (C) 2020-2022 Posit Software, PBC
+ */
 
 import { Document, Element } from "../../core/deno-dom.ts";
 import {
@@ -32,7 +31,7 @@ const kHideAllCodeLinkId = "quarto-hide-all-code";
 const kShowAllCodeLinkId = "quarto-show-all-code";
 const kViewSourceLinkId = "quarto-view-source";
 const kEmbeddedSourceClass = "quarto-embedded-source-code";
-const kEmbeddedSourceModalId = kEmbeddedSourceClass + "-modal";
+export const kEmbeddedSourceModalId = kEmbeddedSourceClass + "-modal";
 const kEmbeddedSourceModalLabelId = kEmbeddedSourceClass + "-modal-label";
 const kKeepSourceSentinel = "quarto-executable-code-5450563D";
 
@@ -56,7 +55,7 @@ export function resolveKeepSource(
   const codeTools = format.render?.[kCodeTools];
   if (
     codeTools === true ||
-    (typeof (codeTools) === "object" &&
+    (typeof codeTools === "object" &&
       (codeTools?.source === undefined || codeTools?.source === true))
   ) {
     format.render[kKeepSource] = true;
@@ -328,17 +327,17 @@ function resolveCodeTools(format: Format, doc: Document): CodeTools {
   const kCodeCaption = format.language[kCodeToolsMenuCaption]!;
   const codeTools = format?.render[kCodeTools];
   const codeToolsResolved = {
-    source: typeof (codeTools) === "boolean"
+    source: typeof codeTools === "boolean"
       ? codeTools
       : codeTools?.source !== undefined
       ? codeTools?.source
       : true,
-    toggle: typeof (codeTools) === "boolean"
+    toggle: typeof codeTools === "boolean"
       ? codeTools
       : codeTools?.toggle !== undefined
       ? !!codeTools?.toggle
       : true,
-    caption: typeof (codeTools) === "boolean"
+    caption: typeof codeTools === "boolean"
       ? kCodeCaption
       : codeTools?.caption || kCodeCaption,
   };

src/format/html/format-html.ts

@@ -47,7 +47,10 @@ import {
   SassBundle,
 } from "../../config/types.ts";
 
-import { formatHasCodeTools } from "../../command/render/codetools.ts";
+import {
+  formatHasCodeTools,
+  kEmbeddedSourceModalId,
+} from "../../command/render/codetools.ts";
 
 import { createHtmlFormat } from "./../formats-shared.ts";
 
@@ -651,6 +654,9 @@ function htmlFormatPostprocessor(
 
     // process all of the code blocks
     const codeBlocks = doc.querySelectorAll("pre.sourceCode");
+    const EmbedSourceModal = doc.querySelector(
+      `#${kEmbeddedSourceModalId}`,
+    );
     for (let i = 0; i < codeBlocks.length; i++) {
       const code = codeBlocks[i] as Element;
 
@@ -670,10 +676,13 @@ function htmlFormatPostprocessor(
         code.parentElement?.classList.add("hidden");
       }
 
-      // insert code copy button
+      // insert code copy button (with specfic attribute when inside a modal)
       if (codeCopy) {
         code.classList.add("code-with-copy");
         const copyButton = createCodeCopyButton(doc, format);
+        if (EmbedSourceModal && EmbedSourceModal.contains(code)) {
+          copyButton.setAttribute("data-in-quarto-modal", "");
+        }
         code.appendChild(copyButton);
       }
 

src/resources/formats/html/templates/quarto-html.ejs

@@ -228,20 +228,7 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
     return false;
   }
 
-  const clipboard = new window.ClipboardJS('.code-copy-button', {
-    text: function(trigger) {
-      const codeEl = trigger.previousElementSibling.cloneNode(true);
-      for (const childEl of codeEl.children) {
-        if (isCodeAnnotation(childEl)) {
-          childEl.remove();
-        }
-      }
-      return codeEl.innerText;
-    }
-  });
-
-
-  clipboard.on('success', function(e) {
+  const onCopySuccess = function(e) {
     // button target
     const button = e.trigger;
     // don't keep focus
@@ -277,7 +264,33 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
     }, 1000);
     // clear code selection
     e.clearSelection();
+  }
+
+  const getTextToCopy = function(trigger) {
+      const codeEl = trigger.previousElementSibling.cloneNode(true);
+      for (const childEl of codeEl.children) {
+        if (isCodeAnnotation(childEl)) {
+          childEl.remove();
+        }
+      }
+      return codeEl.innerText;
+  }
+
+  const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
+    text: getTextToCopy
   });
+  clipboard.on('success', onCopySuccess);
+
+  
+  if (window.document.getElementById('quarto-embedded-source-code-modal')) {
+    // For code content inside modals, clipBoardJS needs to be initialized with a container option
+    // TODO: Check when it could be a function (https://github.com/zenorocha/clipboard.js/issues/860)
+    const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
+      text: getTextToCopy,
+      container: window.document.getElementById('quarto-embedded-source-code-modal')
+    });
+    clipboardModal.on('success', onCopySuccess);
+  }
 
   <% } %>