Added (Ctrl+s) draft force save

[bookstack] / resources / assets / js / directives.js

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 62557f9767c984ec3a5647d259f459629ed21635..d41fdd83bce030e162862bcb3164886c56e2763d 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -185,6 +185,10 @@ module.exports = function (ngApp, events) {
                         scope.mceChange(content);
                     });
 
+                    editor.on('keydown', (event) => {
+                        scope.$emit('editor-keydown', event);
+                    });
+
                     editor.on('init', (e) => {
                         scope.mceModel = editor.getContent();
                     });
@@ -265,17 +269,49 @@ module.exports = function (ngApp, events) {
             link: function (scope, element, attrs) {
 
                 // Elements
-                var input = element.find('textarea[markdown-input]');
-                var insertImage = element.find('button[data-action="insertImage"]');
+                const input = element.find('textarea[markdown-input]');
+                const display = element.find('.markdown-display').first();
+                const insertImage = element.find('button[data-action="insertImage"]');
 
-                var currentCaretPos = 0;
+                let currentCaretPos = 0;
 
-                input.blur((event) => {
+                input.blur(event => {
                     currentCaretPos = input[0].selectionStart;
                 });
 
-                // Insert image shortcut
-                input.keydown((event) => {
+                // Scroll sync
+                let inputScrollHeight,
+                    inputHeight,
+                    displayScrollHeight,
+                    displayHeight;
+
+                function setScrollHeights() {
+                    inputScrollHeight = input[0].scrollHeight;
+                    inputHeight = input.height();
+                    displayScrollHeight = display[0].scrollHeight;
+                    displayHeight = display.height();
+                }
+
+                setTimeout(() => {
+                    setScrollHeights();
+                }, 200);
+                window.addEventListener('resize', setScrollHeights);
+                let scrollDebounceTime = 800;
+                let lastScroll = 0;
+                input.on('scroll', event => {
+                    let now = Date.now();
+                    if (now - lastScroll > scrollDebounceTime) {
+                        setScrollHeights()
+                    }
+                    let scrollPercent = (input.scrollTop() / (inputScrollHeight-inputHeight));
+                    let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
+                    display.scrollTop(displayScrollY);
+                    lastScroll = now;
+                });
+
+                // Editor key-presses
+                input.keydown(event => {
+                    // Insert image shortcut
                     if (event.which === 73 && event.ctrlKey && event.shiftKey) {
                         event.preventDefault();
                         var caretPos = input[0].selectionStart;
@@ -285,12 +321,15 @@ module.exports = function (ngApp, events) {
                         input.focus();
                         input[0].selectionStart = caretPos + ("![](".length);
                         input[0].selectionEnd = caretPos + ('![](http://'.length);
+                        return;
                     }
+                    // Pass key presses to controller via event
+                    scope.$emit('editor-keydown', event);
                 });
 
                 // Insert image from image manager
-                insertImage.click((event) => {
-                    window.ImageManager.showExternal((image) => {
+                insertImage.click(event => {
+                    window.ImageManager.showExternal(image => {
                         var caretPos = currentCaretPos;
                         var currentContent = input.val();
                         var mdImageText = "![" + image.name + "](" + image.url + ")";