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

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