From bc334bd41fe276eb386753d931a7e284fc44567c Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Mon, 22 Jul 2024 16:25:14 -0600
Subject: [PATCH] updated button format and javascript

---
 src/registrar/assets/js/copy-summary.js       | 51 ++++++++++++-------
 .../admin/change_form_object_tools.html       | 19 +++----
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/registrar/assets/js/copy-summary.js b/src/registrar/assets/js/copy-summary.js
index 9edad3f6b..b268956a5 100644
--- a/src/registrar/assets/js/copy-summary.js
+++ b/src/registrar/assets/js/copy-summary.js
@@ -8,25 +8,42 @@ document.addEventListener('DOMContentLoaded', function() {
         const alternativeDomains = Array.from(document.querySelectorAll('#id_alternative_domains')).map(el => el.text).join(', ');
         const submitter = document.getElementById('id_submitter').value;
         const seniorOfficial = document.getElementById('id_senior_official').value;
-        const otherContacts = Array.from(document.querySelectorAll('#id_other_contacts option:checked')).map(el => el.text).join('\n* ');
+        const otherContacts = Array.from(document.querySelectorAll('#id_other_contacts option:checked')).map(el => el.text).join('\n ');
 
-        const summary = `*Recommendation:*\n\n` +
-                        `*Organization Type:* ${organizationType}\n\n` +
-                        `*Requested Domain:* ${requestedDomain}\n\n` +
-                        `*Existing website(s):*\n${existingWebsites}\n\n` +
-                        `*Rationale:*\n\n` +
-                        `*Alternate Domain(s):*\n* ${alternativeDomains.split(', ').join('\n* ')}\n\n` +
-                        `*Submitter:*\n\n* ${submitter}\n\n` +
-                        `*Senior Official:*\n\n* ${seniorOfficial}\n\n` +
-                        `*Additional Contact(s):*\n\n* ${otherContacts}\n\n`;
+        const summary = `<strong>Recommendation:</strong></br>` +
+                        `<strong>Organization Type:</strong> ${organizationType}</br>` +
+                        `<strong>Requested Domain:</strong> ${requestedDomain}</br>` +
+                        `<strong>Existing website(s):</strong> ${existingWebsites}</br>` +
+                        `<strong>Rationale:</strong>` +
+                        `<strong>Alternate Domain(s):</strong> ${alternativeDomains.split(', ').join('\n ')}</br>` +
+                        `<strong>Submitter:</strong> ${submitter}</br>` +
+                        `<strong>Senior Official:</strong> ${seniorOfficial}</br>` +
+                        `<strong>Additional Contact(s):</strong> ${otherContacts}</br>`;
 
-        // Create a temporary textarea element to hold the summary
-        const textArea = document.createElement('textarea');
-        textArea.value = summary;
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textArea);
+        // Create a temporary element
+        let tempElement = document.createElement('div');
+        tempElement.innerHTML = summary;
+        // Append the element to the body
+        document.body.appendChild(tempElement);
+
+        // Use the Selection and Range APIs to select the element's content
+        let range = document.createRange();
+        range.selectNodeContents(tempElement);
+        let selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        // Use the Clipboard API to write the selected HTML content to the clipboard
+        navigator.clipboard.write([
+            new ClipboardItem({
+                'text/html': new Blob([tempElement.innerHTML], { type: 'text/html' })
+            })
+        ]).then(() => {
+            console.log('Bold text copied to clipboard successfully!');
+        }).catch(err => {
+            console.error('Failed to copy text: ', err);
+        });
+        document.body.removeChild(tempElement); 
 
         alert('Summary copied to clipboard!');
     });
diff --git a/src/registrar/templates/admin/change_form_object_tools.html b/src/registrar/templates/admin/change_form_object_tools.html
index 48a6b101d..c2d22e9e2 100644
--- a/src/registrar/templates/admin/change_form_object_tools.html
+++ b/src/registrar/templates/admin/change_form_object_tools.html
@@ -13,15 +13,16 @@
             </li>
         </ul>
     {% else %}
-        <p class="margin-0 padding-0">
-            <a href="{% add_preserved_filters history_url %}" class="historylink">{% translate "History" %}</a>
-        </p>
-        {% if opts.model_name == 'domainrequest' %}
-        <p class="margin-0 padding-0">
-            <button id="copy-summary-btn" class="button">{% translate "Copy request summary" %}</button>
-            <!-- <a href="{% add_preserved_filters history_url %}" class="historylink">{% translate "Copy request summary" %}</a> -->
-        </p>
-        {% endif %}
+        <ul>
+            <li>
+                <a href="{% add_preserved_filters history_url %}" class="historylink">{% translate "History" %}</a>
+            </li>
+            {% if opts.model_name == 'domainrequest' %}
+            <li>
+                <a id="copy-summary-btn" class="historylink" href="#">{% translate "Copy request summary" %}</a>
+            </li>
+            {% endif %}
+        </ul>
     {% endif %}
 {% endblock %}