diff --git a/resources/assets/js/services/code.js b/resources/assets/js/services/code.js
index 6c04e9872..ae63a8ce8 100644
--- a/resources/assets/js/services/code.js
+++ b/resources/assets/js/services/code.js
@@ -16,6 +16,8 @@ require('codemirror/mode/toml/toml');
require('codemirror/mode/xml/xml');
require('codemirror/mode/yaml/yaml');
+const Clipboard = require("clipboard");
+
const CodeMirror = require('codemirror');
const modeMap = {
@@ -77,7 +79,7 @@ function highlightElem(elem) {
elem.innerHTML = elem.innerHTML.replace(/
/gi ,'\n');
let content = elem.textContent.trim();
- CodeMirror(function(elt) {
+ let cm = CodeMirror(function(elt) {
elem.parentNode.replaceChild(elt, elem);
}, {
value: content,
@@ -86,6 +88,33 @@ function highlightElem(elem) {
theme: getTheme(),
readOnly: true
});
+
+ addCopyIcon(cm);
+}
+
+/**
+ * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
+ * @param cmInstance
+ */
+function addCopyIcon(cmInstance) {
+ const copyIcon = ``;
+ const copyButton = document.createElement('div');
+ copyButton.classList.add('CodeMirror-copy');
+ copyButton.innerHTML = copyIcon;
+ cmInstance.display.wrapper.appendChild(copyButton);
+
+ const clipboard = new Clipboard(copyButton, {
+ text: function(trigger) {
+ return cmInstance.getValue()
+ }
+ });
+
+ clipboard.on('success', event => {
+ copyButton.classList.add('success');
+ setTimeout(() => {
+ copyButton.classList.remove('success');
+ }, 360);
+ });
}
/**
diff --git a/resources/assets/sass/_codemirror.scss b/resources/assets/sass/_codemirror.scss
index 2366bf18c..8fe4058cb 100644
--- a/resources/assets/sass/_codemirror.scss
+++ b/resources/assets/sass/_codemirror.scss
@@ -403,4 +403,38 @@ span.CodeMirror-selectedtext { background: none; }
left: 0;
width: 100%;
height: 100%;
+}
+
+/**
+ * Custom Copy Button
+ */
+.CodeMirror-copy {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ background-color: #EEE;
+ padding: $-xs;
+ line-height: 0;
+ border: 1px solid #DDD;
+ cursor: pointer;
+ fill: #444;
+ z-index: 5;
+ transition: all ease-in 180ms;
+ user-select: none;
+ opacity: 0.7;
+ svg {
+ transition: transform ease-in 180ms;
+ transform: translateY(0);
+ }
+ &.success {
+ background-color: lighten($positive, 10%);
+ fill: #FFF;
+ svg {
+ transform: translateY(-3px);
+ }
+ }
+}
+.CodeMirror:hover .CodeMirror-copy {
+ user-select: all;
+ opacity: 1;
}
\ No newline at end of file