mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 03:35:35 +00:00
parent
86f43c8a65
commit
b3cc3130f0
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user