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

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