Opensearch: Fixed XML declaration when php short tags enabled

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

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 2e3506ec7a428d7dc0c146e8ec1d4e446ce8979f..12937d47293b31effb7e2766d68af08598834899 100644 (file)
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -1,27 +1,41 @@
-import Code from "../services/code";
-import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
+import {onChildEvent, onEnterPress, onSelect} from '../services/dom.ts';
+import {Component} from './component';

 
 

-/**
- * Code Editor
- * @extends {Component}
- */
-class CodeEditor {
+export class CodeEditor extends Component {
+
+    /**
+     * @type {null|SimpleEditorInterface}
+     */
+    editor = null;
+
+    /**
+     * @type {?Function}
+     */
+    saveCallback = null;
+
+    /**
+     * @type {?Function}
+     */
+    cancelCallback = null;
+
+    history = {};
+
+    historyKey = 'code_history';

 
     setup() {
         this.container = this.$refs.container;
         this.popup = this.$el;
         this.editorInput = this.$refs.editor;
 
     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.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.setupListeners();

+        this.setupFavourites();

     }
 
     setupListeners() {
     }
 
     setupListeners() {


@@ -31,61 +45,155 @@ class CodeEditor {
             }
         });
 
             }
         });
 

-        onSelect(this.languageLinks, event => {
+        onSelect(this.languageButtons, event => {

             const language = event.target.dataset.lang;
             this.languageInput.value = language;
             const language = event.target.dataset.lang;
             this.languageInput.value = language;

-            this.updateEditorMode(language);
+            this.languageInputChange(language);

         });
 
         });
 

-        onEnterPress(this.languageInput, e => this.save());
-        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();
             const historyTime = elem.dataset.time;
             if (this.editor) {
 
         onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
             event.preventDefault();
             const historyTime = elem.dataset.time;
             if (this.editor) {

-                this.editor.setValue(this.history[historyTime]);
+                this.editor.setContent(this.history[historyTime]);
+            }
+        });
+    }
+
+    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;
+
+            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', {
+                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;
+            } 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() {
     save() {

-        if (this.callback) {
-            this.callback(this.editor.getValue(), this.languageInput.value);
+        if (this.saveCallback) {
+            this.saveCallback(this.editor.getContent(), this.languageInput.value);

         }
         this.hide();
     }
 
         }
         this.hide();
     }
 

-    open(code, language, callback) {
+    async open(code, language, direction, saveCallback, cancelCallback) {

         this.languageInput.value = language;
         this.languageInput.value = language;

-        this.callback = callback;
-
-        this.show();
-        this.updateEditorMode(language);
+        this.saveCallback = saveCallback;
+        this.cancelCallback = cancelCallback;

 
 

-        Code.setContent(this.editor, code);
+        await this.show();
+        this.languageInputChange(language);
+        this.editor.setContent(code);
+        this.setDirection(direction);

     }
 
     }
 

-    show() {
+    async show() {
+        const Code = await window.importVersioned('code');

         if (!this.editor) {
             this.editor = Code.popupEditor(this.editorInput, this.languageInput.value);
         }
         if (!this.editor) {
             this.editor = Code.popupEditor(this.editorInput, this.languageInput.value);
         }

+

         this.loadHistory();
         this.loadHistory();

-        this.popup.components.popup.show(() => {
-            Code.updateLayout(this.editor);
+        this.getPopup().show(() => {

             this.editor.focus();
         }, () => {
             this.editor.focus();
         }, () => {

-            this.addHistory()
+            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() {
     hide() {

-        this.popup.components.popup.hide();
+        this.getPopup().hide();

         this.addHistory();
     }
 
         this.addHistory();
     }
 

-    updateEditorMode(language) {
-        Code.setMode(this.editor, language, this.editor.getValue());
+    /**
+     * @returns {Popup}
+     */
+    getPopup() {
+        return window.$components.firstOnElement(this.popup, 'popup');
+    }
+
+    async updateEditorMode(language) {
+        this.editor.setMode(language, this.editor.getContent());
+    }
+
+    languageInputChange(language) {
+        this.updateEditorMode(language);
+        const inputLang = language.toLowerCase();
+
+        for (const link of this.languageButtons) {
+            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() {
     }
 
     loadHistory() {


@@ -93,14 +201,14 @@ class CodeEditor {
         const historyKeys = Object.keys(this.history).reverse();
         this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
         this.historyList.innerHTML = historyKeys.map(key => {
         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();
-             return `<li><button type="button" data-time="${key}">${localTime}</button></li>`;
+            const localTime = (new Date(parseInt(key, 10))).toLocaleTimeString();
+            return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;

         }).join('');
     }
 
     addHistory() {
         if (!this.editor) return;
         }).join('');
     }
 
     addHistory() {
         if (!this.editor) return;

-        const code = this.editor.getValue();
+        const code = this.editor.getContent();

         if (!code) return;
 
         // Stop if we'd be storing the same as the last item
         if (!code) return;
 
         // Stop if we'd be storing the same as the last item


@@ -113,5 +221,3 @@ class CodeEditor {
     }
 
 }
     }
 
 }

-
-export default CodeEditor;
\ No newline at end of file