First pass copy to clipboard

dactyl-config.yml

@@ -27,6 +27,7 @@ default_filters:
     - include_svg
     - css_tables
     - slug
+    - copy_code_to_clipboard
 
 callout_class: "devportal-callout"
 callout_types:

template/pagetype-doc.html.jinja

@@ -6,12 +6,22 @@
     <script src="assets/js/expandcode.js"></script>
     <!-- multi-code selection tabs -->
     <script src="assets/js/multicodetab.js"></script>
+    <!-- copy code button -->
+    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
     <script>
         $(document).ready(function() {
             $(".multicode").minitabs();
             make_code_expandable();
+            new ClipboardJS('.clipboard-btn');
         });
     </script>
+    {# temp styling for testing. Need to cleanup #}
+    <style>
+      .clipboard-btn {
+        position: absolute;
+        right: 50px;
+      }
+    </style>
 
 {% endblock %}
 

tool/filter_copy_code_to_clipboard.py

@@ -0,0 +1,40 @@
+################################################
+## Add copy to clipboard btton
+## Author: Jake Bonham
+## Copyright: Ripple Labs, 2021
+##
+## Finds codeblocks and adds copy to clipboard button 
+################################################
+
+
+# Issues/questions
+# Multistep tutoral. > Get started page. Has 5 blocks with 4 hidden? 
+# Position on multitabs 
+# Do we need on any "output" blocks? 
+
+
+def filter_soup(soup, **kwargs):
+    """
+    1. Finds all elements with class of "codehilite" 
+    2. Adds copy to clipboard button. 
+        Button looks like >
+        <button class="clipboard-btn" data-clipboard-target="#codeblock-0" id="codeblock-0button">Copy to clipboard</button>
+    3. Adds id to <code> element. 
+    """
+
+    code_blocks = soup.find_all(class_="codehilite")
+    index1 = 0
+    for code_block in code_blocks:
+        # add id to each child <code> 
+        codeBlock = code_block.find("code")
+        codeBlock_id = "codeblock-%d" % index1
+        codeBlock["id"] = codeBlock_id
+        # Add copy button
+        new_tag = soup.new_tag('button', id=codeBlock_id+'button')
+        new_tag.append("Copy to clipboard") #TODO: localize 
+        new_tag['class'] = "clipboard-btn"
+        new_tag['data-clipboard-target'] = "#"+codeBlock_id
+        code_block.insert(0, new_tag)
+        # 
+        index1 += 1
+