BookStack Code Mirror - bookstack/blob - resources/js/components/code-editor.js

   1 import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
   2
   3 /**
   4  * Code Editor
   5  * @extends {Component}
   6  */
   7 class CodeEditor {
   8
   9     setup() {
  10         this.container = this.$refs.container;
  11         this.popup = this.$el;
  12         this.editorInput = this.$refs.editor;
  13         this.languageButtons = this.$manyRefs.languageButton;
  14         this.languageOptionsContainer = this.$refs.languageOptionsContainer;
  15         this.saveButton = this.$refs.saveButton;
  16         this.languageInput = this.$refs.languageInput;
  17         this.historyDropDown = this.$refs.historyDropDown;
  18         this.historyList = this.$refs.historyList;
  19         this.favourites = new Set(this.$opts.favourites.split(','));
  20
  21         this.callback = null;
  22         this.editor = null;
  23         this.history = {};
  24         this.historyKey = 'code_history';
  25         this.setupListeners();
  26         this.setupFavourites();
  27     }
  28
  29     setupListeners() {
  30         this.container.addEventListener('keydown', event => {
  31             if (event.ctrlKey && event.key === 'Enter') {
  32                 this.save();
  33             }
  34         });
  35
  36         onSelect(this.languageButtons, event => {
  37             const language = event.target.dataset.lang;
  38             this.languageInput.value = language;
  39             this.languageInputChange(language);
  40         });
  41
  42         onEnterPress(this.languageInput, e => this.save());
  43         this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
  44         onSelect(this.saveButton, e => this.save());
  45
  46         onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
  47             event.preventDefault();
  48             const historyTime = elem.dataset.time;
  49             if (this.editor) {
  50                 this.editor.setValue(this.history[historyTime]);
  51             }
  52         });
  53     }
  54
  55     setupFavourites() {
  56         for (const button of this.languageButtons) {
  57             this.setupFavouritesForButton(button);
  58         }
  59
  60         this.sortLanguageList();
  61     }
  62
  63     /**
  64      * @param {HTMLButtonElement} button
  65      */
  66     setupFavouritesForButton(button) {
  67         const language = button.dataset.lang;
  68         let isFavorite = this.favourites.has(language);
  69         button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
  70
  71         onChildEvent(button.parentElement, '.lang-option-favorite-toggle', 'click', () => {
  72             isFavorite = !isFavorite;
  73             isFavorite ? this.favourites.add(language) : this.favourites.delete(language);
  74             button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
  75
  76             window.$http.patch('/settings/users/update-code-language-favourite', {
  77                 language: language,
  78                 active: isFavorite
  79             });
  80
  81             this.sortLanguageList();
  82             if (isFavorite) {
  83                 button.scrollIntoView({block: "center", behavior: "smooth"});
  84             }
  85         });
  86     }
  87
  88     sortLanguageList() {
  89         const sortedParents = this.languageButtons.sort((a, b) => {
  90             const aFav = a.dataset.favourite === 'true';
  91             const bFav = b.dataset.favourite === 'true';
  92
  93             if (aFav && !bFav) {
  94                 return -1;
  95             } else if (bFav && !aFav) {
  96                 return 1;
  97             }
  98
  99             return a.dataset.lang > b.dataset.lang ? 1 : -1;
 100         }).map(button => button.parentElement);
 101
 102         for (const parent of sortedParents) {
 103             this.languageOptionsContainer.append(parent);
 104         }
 105     }
 106
 107     save() {
 108         if (this.callback) {
 109             this.callback(this.editor.getValue(), this.languageInput.value);
 110         }
 111         this.hide();
 112     }
 113
 114     open(code, language, callback) {
 115         this.languageInput.value = language;
 116         this.callback = callback;
 117
 118         this.show()
 119             .then(() => this.languageInputChange(language))
 120             .then(() => window.importVersioned('code'))
 121             .then(Code => Code.setContent(this.editor, code));
 122     }
 123
 124     async show() {
 125         const Code = await window.importVersioned('code');
 126         if (!this.editor) {
 127             this.editor = Code.popupEditor(this.editorInput, this.languageInput.value);
 128         }
 129
 130         this.loadHistory();
 131         this.popup.components.popup.show(() => {
 132             Code.updateLayout(this.editor);
 133             this.editor.focus();
 134         }, () => {
 135             this.addHistory()
 136         });
 137     }
 138
 139     hide() {
 140         this.popup.components.popup.hide();
 141         this.addHistory();
 142     }
 143
 144     async updateEditorMode(language) {
 145         const Code = await window.importVersioned('code');
 146         Code.setMode(this.editor, language, this.editor.getValue());
 147     }
 148
 149     languageInputChange(language) {
 150         this.updateEditorMode(language);
 151         const inputLang = language.toLowerCase();
 152
 153         for (const link of this.languageButtons) {
 154             const lang = link.dataset.lang.toLowerCase().trim();
 155             const isMatch = inputLang === lang;
 156             link.classList.toggle('active', isMatch);
 157             if (isMatch) {
 158                 link.scrollIntoView({block: "center", behavior: "smooth"});
 159             }
 160         }
 161     }
 162
 163     loadHistory() {
 164         this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
 165         const historyKeys = Object.keys(this.history).reverse();
 166         this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
 167         this.historyList.innerHTML = historyKeys.map(key => {
 168              const localTime = (new Date(parseInt(key))).toLocaleTimeString();
 169              return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
 170         }).join('');
 171     }
 172
 173     addHistory() {
 174         if (!this.editor) return;
 175         const code = this.editor.getValue();
 176         if (!code) return;
 177
 178         // Stop if we'd be storing the same as the last item
 179         const lastHistoryKey = Object.keys(this.history).pop();
 180         if (this.history[lastHistoryKey] === code) return;
 181
 182         this.history[String(Date.now())] = code;
 183         const historyString = JSON.stringify(this.history);
 184         window.sessionStorage.setItem(this.historyKey, historyString);
 185     }
 186
 187 }
 188
 189 export default CodeEditor;