add javascript to generate format copy buttons programatically

files/assets/js/formatting.js

@@ -0,0 +1,37 @@
+
+/* addFormattingCopyButtons(): creates a button in the first column of each row of a table
+	that copies the text in the second column of that row */
+function addFormattingCopyButtons() {
+	var allTablesGenerateCopyButtons = document.getElementsByClassName('generate-copy-buttons')
+
+	for (let table = 0; table < allTablesGenerateCopyButtons.length; table++) {
+
+		if(allTablesGenerateCopyButtons[table].tagName != 'TABLE') {
+			continue;
+		}
+
+		for (var i = 1, row; row = allTablesGenerateCopyButtons[table].rows[i]; i++) {
+
+			let textCopyButton = document.createElement("button");
+			textCopyButton.setAttribute("type", "button");
+			textCopyButton.className = "btn caction py-0 nobackground px-1 text-muted copy-link";
+
+			/* replace HTML newlines with text newlines */
+			var cleanedText = row.cells[1].cloneNode(true)
+			cleanedText.innerHTML = cleanedText.innerHTML.replace(/<br>/gi, "\n")
+			/* remove lots of extraneous tabs */
+			cleanedText = cleanedText.textContent.replace(/\t/g,'');
+			textCopyButton.setAttribute("data-clipboard-text", cleanedText);
+
+			copyIcon = document.createElement("i");
+			copyIcon.className = "fas fa-copy";
+
+			textCopyButton.insertAdjacentElement('afterbegin', copyIcon)
+			row.cells[0].appendChild(textCopyButton);
+		}
+	}
+
+
+}
+
+addFormattingCopyButtons();

files/templates/formatting.html

@@ -5,7 +5,7 @@
 
 <div class="ml-2">You can use Markdown formatting:</div>
 
-<div class="overflow-x-auto mt-3"><table class="table table-striped mb-5">
+<div class="overflow-x-auto mt-3"><table class="table table-striped mb-5 generate-copy-buttons">
 	<thead class="bg-primary text-white">
 		<tr>
 			<th>Name</th>
@@ -237,7 +237,7 @@ And we allow custom HTML in most places:
 
 <h4 class="mt-2">Allowed Tags</h4>
 
-<div class="overflow-x-auto"><table class="table table-striped mb-5">
+<div class="overflow-x-auto"><table class="table table-striped mb-5 generate-copy-buttons">
 	<thead class="bg-primary text-white">
 		<tr>
 			<th>Name</th>
@@ -626,4 +626,12 @@ line breaks
 	</tbody>
 </table></div>
 
+<div class="toast clipboard" id="toast-success" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
+        <div class="toast-body text-center">
+                <i class="fas fa-check-circle text-success mr-2"></i>Text copied to clipboard
+        </div>
+</div>
+
+<script defer src="{{'js/vendor/clipboard.js' | asset}}"></script>
+<script defer src="{{'js/formatting.js' | asset}}"></script>
 {% endblock %}