Added core code-lang-favourites JS, PHP & CSS logic

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

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 4ee3531c58a7da957079a7a9ffb6c46aaaaf9c4c..022deafef121665b9948f4944ff5f347a02db6f7 100644 (file)
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -15,12 +15,14 @@ class CodeEditor {
         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() {
@@ -33,10 +35,11 @@ class CodeEditor {
         onSelect(this.languageLinks, event => {
             const language = event.target.dataset.lang;
             this.languageInput.value = language;
-            this.updateEditorMode(language);
+            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());
 
         onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
@@ -48,6 +51,43 @@ class CodeEditor {
         });
     }
 
+    setupFavourites() {
+        for (const button of this.languageLinks) {
+            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('/settings/users/update-code-language-favourite', {
+                language: language,
+                active: isFavorite
+            });
+
+            this.sortLanguageList();
+            if (isFavorite) {
+                button.scrollIntoView({block: "center", behavior: "smooth"});
+            }
+        });
+    }
+
+    sortLanguageList() {
+        // TODO
+    }
+
     save() {
         if (this.callback) {
             this.callback(this.editor.getValue(), this.languageInput.value);
@@ -60,7 +100,7 @@ class CodeEditor {
         this.callback = callback;
 
         this.show()
-            .then(() => this.updateEditorMode(language))
+            .then(() => this.languageInputChange(language))
             .then(() => window.importVersioned('code'))
             .then(Code => Code.setContent(this.editor, code));
     }
@@ -90,6 +130,20 @@ class CodeEditor {
         Code.setMode(this.editor, language, this.editor.getValue());
     }
 
+    languageInputChange(language) {
+        this.updateEditorMode(language);
+        const inputLang = language.toLowerCase();
+
+        for (const link of this.languageLinks) {
+            const lang = link.dataset.lang.toLowerCase().trim();
+            const isMatch = inputLang === lang;
+            link.classList.toggle('active', isMatch);
+            if (isMatch) {
+                link.scrollIntoView({block: "center", behavior: "smooth"});
+            }
+        }
+    }
+
     loadHistory() {
         this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
         const historyKeys = Object.keys(this.history).reverse();