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