X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/df94b73e29b82a7bc443b8e4fcfa96eff461f666..refs/pull/4002/head:/resources/js/components/code-editor.js

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 27ff56395..205cbd8fd 100644
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -1,26 +1,27 @@
 import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
+import {Component} from "./component";
 
-/**
- * Code Editor
- * @extends {Component}
- */
-class CodeEditor {
+
+export class CodeEditor extends Component {
 
     setup() {
         this.container = this.$refs.container;
         this.popup = this.$el;
         this.editorInput = this.$refs.editor;
-        this.languageLinks = this.$manyRefs.languageLink;
+        this.languageButtons = this.$manyRefs.languageButton;
+        this.languageOptionsContainer = this.$refs.languageOptionsContainer;
         this.saveButton = this.$refs.saveButton;
         this.languageInput = this.$refs.languageInput;
         this.historyDropDown = this.$refs.historyDropDown;
         this.historyList = this.$refs.historyList;
+        this.favourites = new Set(this.$opts.favourites.split(','));
 
         this.callback = null;
         this.editor = null;
         this.history = {};
         this.historyKey = 'code_history';
         this.setupListeners();
+        this.setupFavourites();
     }
 
     setupListeners() {
@@ -30,7 +31,7 @@ class CodeEditor {
             }
         });
 
-        onSelect(this.languageLinks, event => {
+        onSelect(this.languageButtons, event => {
             const language = event.target.dataset.lang;
             this.languageInput.value = language;
             this.languageInputChange(language);
@@ -49,6 +50,58 @@ class CodeEditor {
         });
     }
 
+    setupFavourites() {
+        for (const button of this.languageButtons) {
+            this.setupFavouritesForButton(button);
+        }
+
+        this.sortLanguageList();
+    }
+
+    /**
+     * @param {HTMLButtonElement} button
+     */
+    setupFavouritesForButton(button) {
+        const language = button.dataset.lang;
+        let isFavorite = this.favourites.has(language);
+        button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
+
+        onChildEvent(button.parentElement, '.lang-option-favorite-toggle', 'click', () => {
+            isFavorite = !isFavorite;
+            isFavorite ? this.favourites.add(language) : this.favourites.delete(language);
+            button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
+
+            window.$http.patch('/preferences/update-code-language-favourite', {
+                language: language,
+                active: isFavorite
+            });
+
+            this.sortLanguageList();
+            if (isFavorite) {
+                button.scrollIntoView({block: "center", behavior: "smooth"});
+            }
+        });
+    }
+
+    sortLanguageList() {
+        const sortedParents = this.languageButtons.sort((a, b) => {
+            const aFav = a.dataset.favourite === 'true';
+            const bFav = b.dataset.favourite === 'true';
+
+            if (aFav && !bFav) {
+                return -1;
+            } else if (bFav && !aFav) {
+                return 1;
+            }
+
+            return a.dataset.lang > b.dataset.lang ? 1 : -1;
+        }).map(button => button.parentElement);
+
+        for (const parent of sortedParents) {
+            this.languageOptionsContainer.append(parent);
+        }
+    }
+
     save() {
         if (this.callback) {
             this.callback(this.editor.getValue(), this.languageInput.value);
@@ -73,7 +126,7 @@ class CodeEditor {
         }
 
         this.loadHistory();
-        this.popup.components.popup.show(() => {
+        this.getPopup().show(() => {
             Code.updateLayout(this.editor);
             this.editor.focus();
         }, () => {
@@ -82,10 +135,17 @@ class CodeEditor {
     }
 
     hide() {
-        this.popup.components.popup.hide();
+        this.getPopup().hide();
         this.addHistory();
     }
 
+    /**
+     * @returns {Popup}
+     */
+    getPopup() {
+        return window.$components.firstOnElement(this.popup, 'popup');
+    }
+
     async updateEditorMode(language) {
         const Code = await window.importVersioned('code');
         Code.setMode(this.editor, language, this.editor.getValue());
@@ -94,15 +154,13 @@ class CodeEditor {
     languageInputChange(language) {
         this.updateEditorMode(language);
         const inputLang = language.toLowerCase();
-        let matched = false;
 
-        for (const link of this.languageLinks) {
+        for (const link of this.languageButtons) {
             const lang = link.dataset.lang.toLowerCase().trim();
-            const isMatch = inputLang && lang.startsWith(inputLang);
+            const isMatch = inputLang === lang;
             link.classList.toggle('active', isMatch);
-            if (isMatch && !matched) {
+            if (isMatch) {
                 link.scrollIntoView({block: "center", behavior: "smooth"});
-                matched = true;
             }
         }
     }
@@ -131,6 +189,4 @@ class CodeEditor {
         window.sessionStorage.setItem(this.historyKey, historyString);
     }
 
-}
-
-export default CodeEditor;
\ No newline at end of file
+}
\ No newline at end of file