webapp/bookstack
webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-22 16:23:06 +03:00
Code

Added copy button to codemirror-rendered code blocks

Browse Source 
Closes #858
This commit is contained in:
Dan Brown 2018-06-09 10:41:01 +01:00
parent 86f43c8a65
commit b3cc3130f0
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/assets/js/services/code.js
View File

@ -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(/<br\s*[\/]?>/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 = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
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);
});
}
/**

34
resources/assets/sass/_codemirror.scss
View File

@ -404,3 +404,37 @@ span.CodeMirror-selectedtext { background: none; }
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;
}