X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/3ac34b584930aad5625d29ca6c2e59b85e9d2ef8..refs/pull/1109/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,