mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
parent
86f43c8a65
commit
b3cc3130f0
@ -16,6 +16,8 @@ require('codemirror/mode/toml/toml');
|
|||||||
require('codemirror/mode/xml/xml');
|
require('codemirror/mode/xml/xml');
|
||||||
require('codemirror/mode/yaml/yaml');
|
require('codemirror/mode/yaml/yaml');
|
||||||
|
|
||||||
|
const Clipboard = require("clipboard");
|
||||||
|
|
||||||
const CodeMirror = require('codemirror');
|
const CodeMirror = require('codemirror');
|
||||||
|
|
||||||
const modeMap = {
|
const modeMap = {
|
||||||
@ -77,7 +79,7 @@ function highlightElem(elem) {
|
|||||||
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||||
let content = elem.textContent.trim();
|
let content = elem.textContent.trim();
|
||||||
|
|
||||||
CodeMirror(function(elt) {
|
let cm = CodeMirror(function(elt) {
|
||||||
elem.parentNode.replaceChild(elt, elem);
|
elem.parentNode.replaceChild(elt, elem);
|
||||||
}, {
|
}, {
|
||||||
value: content,
|
value: content,
|
||||||
@ -86,6 +88,33 @@ function highlightElem(elem) {
|
|||||||
theme: getTheme(),
|
theme: getTheme(),
|
||||||
readOnly: true
|
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;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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