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 27ff56395d1af49968014407f77c31d1b96e6c3c..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() {
@@ -49,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);
@@ -94,15 +133,13 @@ class CodeEditor {
     languageInputChange(language) {
         this.updateEditorMode(language);
         const inputLang = language.toLowerCase();
-        let matched = false;
 
         for (const link of this.languageLinks) {
             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;
             }
         }
     }