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

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 022deafef..2d8031205 100644
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -10,7 +10,8 @@ class CodeEditor {
         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;
@@ -32,7 +33,7 @@ class CodeEditor {
             }
         });
 
-        onSelect(this.languageLinks, event => {
+        onSelect(this.languageButtons, event => {
             const language = event.target.dataset.lang;
             this.languageInput.value = language;
             this.languageInputChange(language);
@@ -52,7 +53,7 @@ class CodeEditor {
     }
 
     setupFavourites() {
-        for (const button of this.languageLinks) {
+        for (const button of this.languageButtons) {
             this.setupFavouritesForButton(button);
         }
 
@@ -85,7 +86,22 @@ class CodeEditor {
     }
 
     sortLanguageList() {
-        // TODO
+        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() {
@@ -134,7 +150,7 @@ class CodeEditor {
         this.updateEditorMode(language);
         const inputLang = language.toLowerCase();
 
-        for (const link of this.languageLinks) {
+        for (const link of this.languageButtons) {
             const lang = link.dataset.lang.toLowerCase().trim();
             const isMatch = inputLang === lang;
             link.classList.toggle('active', isMatch);