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.languageLinks = this.$manyRefs.languageLink;
  14         this.saveButton = this.$refs.saveButton;
  15         this.languageInput = this.$refs.languageInput;
  16         this.historyDropDown = this.$refs.historyDropDown;
  17         this.historyList = this.$refs.historyList;
  18
  19         this.callback = null;
  20         this.editor = null;
  21         this.history = {};
  22         this.historyKey = 'code_history';
  23         this.setupListeners();
  24     }
  25
  26     setupListeners() {
  27         this.container.addEventListener('keydown', event => {
  28             if (event.ctrlKey && event.key === 'Enter') {
  29                 this.save();
  30             }
  31         });
  32
  33         onSelect(this.languageLinks, event => {
  34             const language = event.target.dataset.lang;
  35             this.languageInput.value = language;
  36             this.updateEditorMode(language);
  37         });
  38
  39         onEnterPress(this.languageInput, e => this.save());
  40         onSelect(this.saveButton, e => this.save());
  41
  42         onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
  43             event.preventDefault();
  44             const historyTime = elem.dataset.time;
  45             if (this.editor) {
  46                 this.editor.setValue(this.history[historyTime]);
  47             }
  48         });
  49     }
  50
  51     save() {
  52         if (this.callback) {
  53             this.callback(this.editor.getValue(), this.languageInput.value);
  54         }
  55         this.hide();
  56     }
  57
  58     open(code, language, callback) {
  59         this.languageInput.value = language;
  60         this.callback = callback;
  61
  62         this.show()
  63             .then(() => this.updateEditorMode(language))
  64             .then(() => window.importVersioned('code'))
  65             .then(Code => Code.setContent(this.editor, code));
  66     }
  67
  68     async show() {
  69         const Code = await window.importVersioned('code');
  70         if (!this.editor) {
  71             this.editor = Code.popupEditor(this.editorInput, this.languageInput.value);
  72         }
  73
  74         this.loadHistory();
  75         this.popup.components.popup.show(() => {
  76             Code.updateLayout(this.editor);
  77             this.editor.focus();
  78         }, () => {
  79             this.addHistory()
  80         });
  81     }
  82
  83     hide() {
  84         this.popup.components.popup.hide();
  85         this.addHistory();
  86     }
  87
  88     async updateEditorMode(language) {
  89         const Code = await window.importVersioned('code');
  90         Code.setMode(this.editor, language, this.editor.getValue());
  91     }
  92
  93     loadHistory() {
  94         this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
  95         const historyKeys = Object.keys(this.history).reverse();
  96         this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
  97         this.historyList.innerHTML = historyKeys.map(key => {
  98              const localTime = (new Date(parseInt(key))).toLocaleTimeString();
  99              return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
 100         }).join('');
 101     }
 102
 103     addHistory() {
 104         if (!this.editor) return;
 105         const code = this.editor.getValue();
 106         if (!code) return;
 107
 108         // Stop if we'd be storing the same as the last item
 109         const lastHistoryKey = Object.keys(this.history).pop();
 110         if (this.history[lastHistoryKey] === code) return;
 111
 112         this.history[String(Date.now())] = code;
 113         const historyString = JSON.stringify(this.history);
 114         window.sessionStorage.setItem(this.historyKey, historyString);
 115     }
 116
 117 }
 118
 119 export default CodeEditor;