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.languageInputChange(language);
  37         });
  38
  39         onEnterPress(this.languageInput, e => this.save());
  40         this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
  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             .then(() => this.languageInputChange(language))
  65             .then(() => window.importVersioned('code'))
  66             .then(Code => Code.setContent(this.editor, code));
  67     }
  68
  69     async show() {
  70         const Code = await window.importVersioned('code');
  71         if (!this.editor) {
  72             this.editor = Code.popupEditor(this.editorInput, this.languageInput.value);
  73         }
  74
  75         this.loadHistory();
  76         this.popup.components.popup.show(() => {
  77             Code.updateLayout(this.editor);
  78             this.editor.focus();
  79         }, () => {
  80             this.addHistory()
  81         });
  82     }
  83
  84     hide() {
  85         this.popup.components.popup.hide();
  86         this.addHistory();
  87     }
  88
  89     async updateEditorMode(language) {
  90         const Code = await window.importVersioned('code');
  91         Code.setMode(this.editor, language, this.editor.getValue());
  92     }
  93
  94     languageInputChange(language) {
  95         this.updateEditorMode(language);
  96         const inputLang = language.toLowerCase();
  97         let matched = false;
  98
  99         for (const link of this.languageLinks) {
 100             const lang = link.dataset.lang.toLowerCase().trim();
 101             const isMatch = inputLang && lang.startsWith(inputLang);
 102             link.classList.toggle('active', isMatch);
 103             if (isMatch && !matched) {
 104                 link.scrollIntoView({block: "center", behavior: "smooth"});
 105                 matched = true;
 106             }
 107         }
 108     }
 109
 110     loadHistory() {
 111         this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
 112         const historyKeys = Object.keys(this.history).reverse();
 113         this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
 114         this.historyList.innerHTML = historyKeys.map(key => {
 115              const localTime = (new Date(parseInt(key))).toLocaleTimeString();
 116              return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
 117         }).join('');
 118     }
 119
 120     addHistory() {
 121         if (!this.editor) return;
 122         const code = this.editor.getValue();
 123         if (!code) return;
 124
 125         // Stop if we'd be storing the same as the last item
 126         const lastHistoryKey = Object.keys(this.history).pop();
 127         if (this.history[lastHistoryKey] === code) return;
 128
 129         this.history[String(Date.now())] = code;
 130         const historyString = JSON.stringify(this.history);
 131         window.sessionStorage.setItem(this.historyKey, historyString);
 132     }
 133
 134 }
 135
 136 export default CodeEditor;