X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/3ac34b584930aad5625d29ca6c2e59b85e9d2ef8..refs/pull/1633/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..1e0e48289 100644
--- a/resources/assets/js/services/code.js
+++ b/resources/assets/js/services/code.js
@@ -1,22 +1,32 @@
-require('codemirror/mode/css/css');
-require('codemirror/mode/clike/clike');
-require('codemirror/mode/diff/diff');
-require('codemirror/mode/go/go');
-require('codemirror/mode/htmlmixed/htmlmixed');
-require('codemirror/mode/javascript/javascript');
-require('codemirror/mode/markdown/markdown');
-require('codemirror/mode/nginx/nginx');
-require('codemirror/mode/php/php');
-require('codemirror/mode/powershell/powershell');
-require('codemirror/mode/python/python');
-require('codemirror/mode/ruby/ruby');
-require('codemirror/mode/shell/shell');
-require('codemirror/mode/sql/sql');
-require('codemirror/mode/toml/toml');
-require('codemirror/mode/xml/xml');
-require('codemirror/mode/yaml/yaml');
-
-const CodeMirror = require('codemirror');
+import CodeMirror from "codemirror";
+import Clipboard from "clipboard/dist/clipboard.min";
+
+// Modes
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/diff/diff';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/julia/julia';
+import 'codemirror/mode/lua/lua';
+import 'codemirror/mode/haskell/haskell';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/mllike/mllike';
+import 'codemirror/mode/nginx/nginx';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/powershell/powershell';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/ruby/ruby';
+import 'codemirror/mode/rust/rust';
+import 'codemirror/mode/shell/shell';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/toml/toml';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/yaml/yaml';
+
+// Addons
+import 'codemirror/addon/scroll/scrollpastend';
 
 const modeMap = {
     css: 'css',
@@ -29,25 +39,34 @@ const modeMap = {
     csharp: 'text/x-csharp',
     diff: 'diff',
     go: 'go',
+    haskell: 'haskell',
+    hs: 'haskell',
     html: 'htmlmixed',
     javascript: 'javascript',
     json: {name: 'javascript', json: true},
     js: 'javascript',
-    php: 'php',
+    jl: 'julia',
+    julia: 'julia',
+    lua: 'lua',
     md: 'markdown',
     mdown: 'markdown',
     markdown: 'markdown',
+    ml: 'mllike',
     nginx: 'nginx',
     powershell: 'powershell',
+    ocaml: 'mllike',
+    php: 'php',
     py: 'python',
     python: 'python',
     ruby: 'ruby',
+    rust: 'rust',
     rb: 'ruby',
+    rs: 'rust',
     shell: 'shell',
     sh: 'shell',
     bash: 'shell',
     toml: 'toml',
-    sql: 'sql',
+    sql: 'text/x-sql',
     xml: 'xml',
     yaml: 'yaml',
     yml: 'yaml',
@@ -77,7 +96,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 +105,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');
+        }, 240);
+    });
 }
 
 /**
@@ -128,6 +174,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 +255,8 @@ function markdownEditor(elem) {
         mode: "markdown",
         lineNumbers: true,
         theme: getTheme(),
-        lineWrapping: true
+        lineWrapping: true,
+        scrollPastEnd: true,
     });
 }
 
@@ -221,13 +269,12 @@ function getMetaKey() {
     return mac ? "Cmd" : "Ctrl";
 }
 
-module.exports = {
+export default {
     highlight: highlight,
-    highlightElem: highlightElem,
     wysiwygView: wysiwygView,
     popupEditor: popupEditor,
     setMode: setMode,
     setContent: setContent,
     markdownEditor: markdownEditor,
     getMetaKey: getMetaKey,
-};
\ No newline at end of file
+};