docs: avoid copying >>> and ... from clipboard (#1375)

* modify mkdocs.yml

* added js file

* add source attribution

---------

Co-authored-by: FBruzzesi <[email protected]>

docs/javascripts/extra.js

@@ -0,0 +1,67 @@
+/**
+ * Copied from Ruff https://github.com/astral-sh/ruff/blob/924741cb11a68ed037899f9db1bea6969c48385e/docs/js/extra.js
+ *
+ * @author Astral Software Inc. <[email protected]>
+ * @license MIT
+ */
+
+
+function cleanupClipboardText(targetSelector) {
+    const targetElement = document.querySelector(targetSelector);
+
+    // exclude "Generic Prompt" and "Generic Output" spans from copy
+    const excludedClasses = ["gp", "go"];
+
+    const clipboardText = Array.from(targetElement.childNodes)
+      .filter(
+        (node) =>
+          !excludedClasses.some((className) =>
+            node?.classList?.contains(className),
+          ),
+      )
+      .map((node) => node.textContent)
+      .filter((s) => s !== "");
+    return clipboardText.join("").trim();
+  }
+
+  // Sets copy text to attributes lazily using an Intersection Observer.
+  function setCopyText() {
+    // The `data-clipboard-text` attribute allows for customized content in the copy
+    // See: https://www.npmjs.com/package/clipboard#copy-text-from-attribute
+    const attr = "clipboardText";
+    // all "copy" buttons whose target selector is a <code> element
+    const elements = document.querySelectorAll(
+      'button[data-clipboard-target$="code"]',
+    );
+
+    if (elements.length === 0) {
+      return;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        // target in the viewport that have not been patched
+        if (
+          entry.intersectionRatio > 0 &&
+          entry.target.dataset[attr] === undefined
+        ) {
+          entry.target.dataset[attr] = cleanupClipboardText(
+            entry.target.dataset.clipboardTarget,
+          );
+        }
+      });
+    });
+
+    elements.forEach((elt) => {
+      observer.observe(elt);
+    });
+  }
+
+  // Using the document$ observable is particularly important if you are using instant loading since
+  // it will not result in a page refresh in the browser
+  // See `How to integrate with third-party JavaScript libraries` guideline:
+  // https://squidfunk.github.io/mkdocs-material/customization/?h=javascript#additional-javascript
+  document$.subscribe(function () {
+    setCopyText();
+  });
+

mkdocs.yml

@@ -93,6 +93,8 @@ plugins:
           members_order: alphabetical
     enable_inventory: true
 
+extra_javascript:
+  - javascripts/extra.js
 
 hooks:
 - utils/generate_backend_completeness.py