Attachments: Hid edit/delete controls where lacking permission

[bookstack] / resources / js / components / code-editor.js

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 0d8450314cc3115605eec73804812e81b816efa9..12937d47293b31effb7e2766d68af08598834899 100644 (file)
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -1,4 +1,4 @@
-import {onChildEvent, onEnterPress, onSelect} from '../services/dom';
+import {onChildEvent, onEnterPress, onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 export class CodeEditor extends Component {
@@ -8,7 +8,15 @@ export class CodeEditor extends Component {
      */
     editor = null;
 
-    callback = null;
+    /**
+     * @type {?Function}
+     */
+    saveCallback = null;
+
+    /**
+     * @type {?Function}
+     */
+    cancelCallback = null;
 
     history = {};
 
@@ -43,9 +51,9 @@ export class CodeEditor extends Component {
             this.languageInputChange(language);
         });
 
-        onEnterPress(this.languageInput, e => this.save());
-        this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
-        onSelect(this.saveButton, e => this.save());
+        onEnterPress(this.languageInput, () => this.save());
+        this.languageInput.addEventListener('input', () => this.languageInputChange(this.languageInput.value));
+        onSelect(this.saveButton, () => this.save());
 
         onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
             event.preventDefault();
@@ -74,7 +82,13 @@ export class CodeEditor extends Component {
 
         onChildEvent(button.parentElement, '.lang-option-favorite-toggle', 'click', () => {
             isFavorite = !isFavorite;
-            isFavorite ? this.favourites.add(language) : this.favourites.delete(language);
+
+            if (isFavorite) {
+                this.favourites.add(language);
+            } else {
+                this.favourites.delete(language);
+            }
+
             button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
 
             window.$http.patch('/preferences/update-code-language-favourite', {
@@ -109,19 +123,21 @@ export class CodeEditor extends Component {
     }
 
     save() {
-        if (this.callback) {
-            this.callback(this.editor.getContent(), this.languageInput.value);
+        if (this.saveCallback) {
+            this.saveCallback(this.editor.getContent(), this.languageInput.value);
         }
         this.hide();
     }
 
-    async open(code, language, callback) {
+    async open(code, language, direction, saveCallback, cancelCallback) {
         this.languageInput.value = language;
-        this.callback = callback;
+        this.saveCallback = saveCallback;
+        this.cancelCallback = cancelCallback;
 
         await this.show();
         this.languageInputChange(language);
         this.editor.setContent(code);
+        this.setDirection(direction);
     }
 
     async show() {
@@ -135,9 +151,21 @@ export class CodeEditor extends Component {
             this.editor.focus();
         }, () => {
             this.addHistory();
+            if (this.cancelCallback) {
+                this.cancelCallback();
+            }
         });
     }
 
+    setDirection(direction) {
+        const target = this.editorInput.parentElement;
+        if (direction) {
+            target.setAttribute('dir', direction);
+        } else {
+            target.removeAttribute('dir');
+        }
+    }
+
     hide() {
         this.getPopup().hide();
         this.addHistory();
@@ -173,7 +201,7 @@ export class CodeEditor extends Component {
         const historyKeys = Object.keys(this.history).reverse();
         this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
         this.historyList.innerHTML = historyKeys.map(key => {
-            const localTime = (new Date(parseInt(key))).toLocaleTimeString();
+            const localTime = (new Date(parseInt(key, 10))).toLocaleTimeString();
             return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
         }).join('');
     }