X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/9f4c64a676578ca18378445eac1aea23235f9da1..refs/pull/1063/head:/resources/assets/js/services/code.js
diff --git a/resources/assets/js/services/code.js b/resources/assets/js/services/code.js
index 6c04e9872..e1b94e8d2 100644
--- a/resources/assets/js/services/code.js
+++ b/resources/assets/js/services/code.js
@@ -1,3 +1,7 @@
+const CodeMirror = require('codemirror');
+const Clipboard = require("clipboard");
+
+// Modes
require('codemirror/mode/css/css');
require('codemirror/mode/clike/clike');
require('codemirror/mode/diff/diff');
@@ -16,7 +20,8 @@ require('codemirror/mode/toml/toml');
require('codemirror/mode/xml/xml');
require('codemirror/mode/yaml/yaml');
-const CodeMirror = require('codemirror');
+// Addons
+require('codemirror/addon/scroll/scrollpastend');
const modeMap = {
css: 'css',
@@ -77,7 +82,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 +91,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');
+ }, 240);
+ });
}
/**
@@ -128,6 +160,7 @@ function wysiwygView(elem) {
newWrap.className = 'CodeMirrorContainer';
newWrap.setAttribute('data-lang', lang);
+ newWrap.setAttribute('dir', 'ltr');
newTextArea.style.display = 'none';
elem.parentNode.replaceChild(newWrap, elem);
@@ -208,7 +241,8 @@ function markdownEditor(elem) {
mode: "markdown",
lineNumbers: true,
theme: getTheme(),
- lineWrapping: true
+ lineWrapping: true,
+ scrollPastEnd: true,
});
}
@@ -223,7 +257,6 @@ function getMetaKey() {
module.exports = {
highlight: highlight,
- highlightElem: highlightElem,
wysiwygView: wysiwygView,
popupEditor: popupEditor,
setMode: setMode,