Exclude unselectable text from being copied

docs/index.rst

@@ -372,6 +372,22 @@ In this case, all elements that match ``your.selector`` will have a copy button
 added to them.
 
 
+Exclude unselectable text from copied text
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+By default, ``sphinx-copybutton`` will exclude text that is not selectable by the user. Unselectable text is determined with the CSS style
+
+.. code-block:: css
+
+   user-select: none
+
+To change this behavior, use the following configuration in ``conf.py``:
+
+.. code-block:: python
+
+   copybutton_exclude_unselectable = False 
+
+
 Development
 ===========
 
@@ -441,7 +457,7 @@ Then run the docs build:
 
 .. code-block:: console
 
-   $ cd doc
+   $ cd docs
    $ make html
 
 .. toctree::

package.json

@@ -18,5 +18,8 @@
     "require": [
       "esm"
     ]
+  },
+  "dependencies": {
+    "ci": "^2.1.1"
   }
 }

sphinx_copybutton/__init__.py

@@ -50,6 +50,9 @@ def add_to_context(app, config):
             .replace("export function", "function")
         }
     )
+    config.html_context.update(
+        {"copybutton_exclude_unselectable": config.copybutton_exclude_unselectable}
+    )
 
 
 def setup(app):
@@ -68,6 +71,7 @@ def setup(app):
     app.add_config_value("copybutton_here_doc_delimiter", "", "html")
     app.add_config_value("copybutton_image_path", "copy-button.svg", "html")
     app.add_config_value("copybutton_selector", "div.highlight pre", "html")
+    app.add_config_value("copybutton_exclude_unselectable", True, "html")
 
     # Add configuration value to the template
     app.connect("config-inited", add_to_context)

sphinx_copybutton/_static/copybutton.js_t

@@ -118,7 +118,11 @@ const addCopyButtonToCodeCells = () => {
 
 var copyTargetText = (trigger) => {
   var target = document.querySelector(trigger.attributes['data-clipboard-target'].value);
-  return formatCopyText(target.innerText, {{ "{!r}".format(copybutton_prompt_text) }}, {{ copybutton_prompt_is_regexp | lower }}, {{ copybutton_only_copy_prompt_lines | lower }}, {{ copybutton_remove_prompts | lower }}, {{ copybutton_copy_empty_lines | lower }}, {{ "{!r}".format(copybutton_line_continuation_character) }}, {{ "{!r}".format(copybutton_here_doc_delimiter) }})
+  let text = (
+    {{ copybutton_exclude_unselectable | lower }} ?
+    filterUnselectableText( target ) : target.innerText
+  );
+  return formatCopyText(text, {{ "{!r}".format(copybutton_prompt_text) }}, {{ copybutton_prompt_is_regexp | lower }}, {{ copybutton_only_copy_prompt_lines | lower }}, {{ copybutton_remove_prompts | lower }}, {{ copybutton_copy_empty_lines | lower }}, {{ "{!r}".format(copybutton_line_continuation_character) }}, {{ "{!r}".format(copybutton_here_doc_delimiter) }})
 }
 
   // Initialize with a callback so we can modify the text before copy

sphinx_copybutton/_static/copybutton_funcs.js

@@ -2,10 +2,54 @@ function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
+function getUnselectable(target) {
+    let unselectable = [];
+
+    // get all unselectable elements of children
+    for (let child of target.children) {
+        unselectable = unselectable.concat(getUnselectable(child));
+    }
+
+    // add self to unselectable if needed
+    if (getComputedStyle(target)["userSelect"] === "none") {
+        unselectable.push( target);
+    }
+
+    return unselectable;
+}
+
+function getFilteredText(target, exclude) {
+    let text = '';
+    for (let child of target.childNodes) {
+        if (exclude.indexOf(child) > -1) {
+            // child should be filtered out
+            continue;
+        }
+
+        if (child.nodeType === Node.TEXT_NODE) {
+            // child is a text node, add its contents
+            text += child.textContent
+        }
+        else {
+            // recurse on non-text nodes
+            text += getFilteredText(child, exclude);
+        }
+    }
+
+    return text;
+}
+
+export function filterUnselectableText(target) {
+    // get unselectable elements
+    const unselectable = getUnselectable(target);
+
+    // get text from selectable elements
+    return getFilteredText(target, unselectable);
+}
+
 // Callback when a copy button is clicked. Will be passed the node that was clicked
 // should then grab the text and replace pieces of text that shouldn't be used in output
 export function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onlyCopyPromptLines = true, removePrompts = true, copyEmptyLines = true, lineContinuationChar = "", hereDocDelim = "") {
-
     var regexp;
     var match;