Improve import/export dialog, add copy export button

index.html

@@ -84,7 +84,7 @@
 	</div>
 
 	<div id="importExportModal" class="modal fade" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
+		<div class="modal-dialog modal-lg" role="document">
 			<div class="modal-content">
 				<div class="modal-header">
 					<h5 class="modal-title">Import/Export</h5>
@@ -95,11 +95,12 @@
 				<div class="modal-body">
 					<div class="form-group">
 						<label for="exportText">Export</label>
-						<textarea id="exportText" class="form-control" rows="4"></textarea>
+						<a id="copyExport" href="#" class="text-muted float-right"><small id="copyExportTxt">Copy</small></a>
+						<textarea id="exportText" class="form-control" rows="8" readonly="readonly"></textarea>
 					</div>
 					<div class="form-group">
 						<label for="importText">Import</label>
-						<textarea id="importText" class="form-control" rows="4"></textarea>
+						<textarea id="importText" class="form-control" rows="8" placeholder="Paste here"></textarea>
 					</div>
 				</div>
 				<div class="modal-footer">

js/importExport.js

@@ -1,13 +1,14 @@
 $(document).ready(function () {
 	$("#importExportModal").on("shown.bs.modal", showBookmarkData);
-
+	$("#importExportModal").on("show.bs.modal", showImportModal);
 	$("#btnImportDialog").click(importBookmarks);
-
+	$("#copyExport").click(copyExport);
-	$("#exportText").click(function () {
-		$("#exportText").select();
-	});
 });
 
+function showImportModal(e) {
+	$("#copyExportTxt").removeClass("text-success text-danger").addClass("text-muted").text("Copy");
+}
+
 function showBookmarkData() {
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
@@ -116,3 +117,22 @@ function arrayContains(array, searchFor) {
 
 	return false;
 }
+
+function copyExport(e) {
+	e.preventDefault();
+
+	var exportBox = $("#exportText");
+	var copyLink = $("#copyExportTxt");
+	exportBox.select();
+
+	try {
+		var successful = document.execCommand("copy");
+		if (successful) {
+			copyLink.removeClass("text-muted").addClass("text-success").text("Copied successfully!");
+		} else {
+			copyLink.removeClass("text-muted").addClass("text-danger").text("Copy failed");
+		}
+	} catch (err) {
+		copyLink.removeClass("text-muted").addClass("text-danger").text("Copy failed");
+	}
+}

main.css

@@ -72,10 +72,18 @@ pre {
 	background: rgba(255, 255, 255, 0.24);
 }
 
+#exportText, #importText {
+	font-family: monospace;
+}
+
 .clickable {
 	cursor: pointer;
 }
 
+textarea {
+	white-space: pre;
+}
+
 /* set the width of the main container based on element width */
 @media (max-width: 34em) {
 	#wrapper {