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

   1 import * as Dates from "../services/dates";
   2 import {onSelect} from "../services/dom";
   3 import {debounce} from "../services/util";
   4 import {Component} from "./component";
   5
   6 export class PageEditor extends Component {
   7     setup() {
   8         // Options
   9         this.draftsEnabled = this.$opts.draftsEnabled === 'true';
  10         this.editorType = this.$opts.editorType;
  11         this.pageId = Number(this.$opts.pageId);
  12         this.isNewDraft = this.$opts.pageNewDraft === 'true';
  13         this.hasDefaultTitle = this.$opts.hasDefaultTitle || false;
  14
  15         // Elements
  16         this.container = this.$el;
  17         this.titleElem = this.$refs.titleContainer.querySelector('input');
  18         this.saveDraftButton = this.$refs.saveDraft;
  19         this.discardDraftButton = this.$refs.discardDraft;
  20         this.discardDraftWrap = this.$refs.discardDraftWrap;
  21         this.draftDisplay = this.$refs.draftDisplay;
  22         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
  23         this.changelogInput = this.$refs.changelogInput;
  24         this.changelogDisplay = this.$refs.changelogDisplay;
  25         this.changeEditorButtons = this.$manyRefs.changeEditor || [];
  26         this.switchDialogContainer = this.$refs.switchDialog;
  27
  28         // Translations
  29         this.draftText = this.$opts.draftText;
  30         this.autosaveFailText = this.$opts.autosaveFailText;
  31         this.editingPageText = this.$opts.editingPageText;
  32         this.draftDiscardedText = this.$opts.draftDiscardedText;
  33         this.setChangelogText = this.$opts.setChangelogText;
  34
  35         // State data
  36         this.autoSave = {
  37             interval: null,
  38             frequency: 30000,
  39             last: 0,
  40             pendingChange: false,
  41         };
  42         this.shownWarningsCache = new Set();
  43
  44         if (this.pageId !== 0 && this.draftsEnabled) {
  45             window.setTimeout(() => {
  46                 this.startAutoSave();
  47             }, 1000);
  48         }
  49         this.draftDisplay.innerHTML = this.draftText;
  50
  51         this.setupListeners();
  52         this.setInitialFocus();
  53     }
  54
  55     setupListeners() {
  56         // Listen to save events from editor
  57         window.$events.listen('editor-save-draft', this.saveDraft.bind(this));
  58         window.$events.listen('editor-save-page', this.savePage.bind(this));
  59
  60         // Listen to content changes from the editor
  61         const onContentChange = () => this.autoSave.pendingChange = true;
  62         window.$events.listen('editor-html-change', onContentChange);
  63         window.$events.listen('editor-markdown-change', onContentChange);
  64
  65         // Listen to changes on the title input
  66         this.titleElem.addEventListener('input', onContentChange);
  67
  68         // Changelog controls
  69         const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
  70         this.changelogInput.addEventListener('input', updateChangelogDebounced);
  71
  72         // Draft Controls
  73         onSelect(this.saveDraftButton, this.saveDraft.bind(this));
  74         onSelect(this.discardDraftButton, this.discardDraft.bind(this));
  75
  76         // Change editor controls
  77         onSelect(this.changeEditorButtons, this.changeEditor.bind(this));
  78     }
  79
  80     setInitialFocus() {
  81         if (this.hasDefaultTitle) {
  82             return this.titleElem.select();
  83         }
  84
  85         window.setTimeout(() => {
  86             window.$events.emit('editor::focus', '');
  87         }, 500);
  88     }
  89
  90     startAutoSave() {
  91         this.autoSave.interval = window.setInterval(this.runAutoSave.bind(this), this.autoSave.frequency);
  92     }
  93
  94     runAutoSave() {
  95         // Stop if manually saved recently to prevent bombarding the server
  96         const savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency)/2);
  97         if (savedRecently || !this.autoSave.pendingChange) {
  98             return;
  99         }
 100
 101         this.saveDraft()
 102     }
 103
 104     savePage() {
 105         this.container.closest('form').submit();
 106     }
 107
 108     async saveDraft() {
 109         const data = {name: this.titleElem.value.trim()};
 110
 111         const editorContent = this.getEditorComponent().getContent();
 112         Object.assign(data, editorContent);
 113
 114         let didSave = false;
 115         try {
 116             const resp = await window.$http.put(`/ajax/page/${this.pageId}/save-draft`, data);
 117             if (!this.isNewDraft) {
 118                 this.toggleDiscardDraftVisibility(true);
 119             }
 120
 121             this.draftNotifyChange(`${resp.data.message} ${Dates.utcTimeStampToLocalTime(resp.data.timestamp)}`);
 122             this.autoSave.last = Date.now();
 123             if (resp.data.warning && !this.shownWarningsCache.has(resp.data.warning)) {
 124                 window.$events.emit('warning', resp.data.warning);
 125                 this.shownWarningsCache.add(resp.data.warning);
 126             }
 127
 128             didSave = true;
 129             this.autoSave.pendingChange = false;
 130         } catch (err) {
 131             // Save the editor content in LocalStorage as a last resort, just in case.
 132             try {
 133                 const saveKey = `draft-save-fail-${(new Date()).toISOString()}`;
 134                 window.localStorage.setItem(saveKey, JSON.stringify(data));
 135             } catch (err) {}
 136
 137             window.$events.emit('error', this.autosaveFailText);
 138         }
 139
 140         return didSave;
 141     }
 142
 143     draftNotifyChange(text) {
 144         this.draftDisplay.innerText = text;
 145         this.draftDisplayIcon.classList.add('visible');
 146         window.setTimeout(() => {
 147             this.draftDisplayIcon.classList.remove('visible');
 148         }, 2000);
 149     }
 150
 151     async discardDraft() {
 152         let response;
 153         try {
 154             response = await window.$http.get(`/ajax/page/${this.pageId}`);
 155         } catch (e) {
 156             return console.error(e);
 157         }
 158
 159         if (this.autoSave.interval) {
 160             window.clearInterval(this.autoSave.interval);
 161         }
 162
 163         this.draftDisplay.innerText = this.editingPageText;
 164         this.toggleDiscardDraftVisibility(false);
 165         window.$events.emit('editor::replace', {
 166             html: response.data.html,
 167             markdown: response.data.markdown,
 168         });
 169
 170         this.titleElem.value = response.data.name;
 171         window.setTimeout(() => {
 172             this.startAutoSave();
 173         }, 1000);
 174         window.$events.emit('success', this.draftDiscardedText);
 175
 176     }
 177
 178     updateChangelogDisplay() {
 179         let summary = this.changelogInput.value.trim();
 180         if (summary.length === 0) {
 181             summary = this.setChangelogText;
 182         } else if (summary.length > 16) {
 183             summary = summary.slice(0, 16) + '...';
 184         }
 185         this.changelogDisplay.innerText = summary;
 186     }
 187
 188     toggleDiscardDraftVisibility(show) {
 189         this.discardDraftWrap.classList.toggle('hidden', !show);
 190     }
 191
 192     async changeEditor(event) {
 193         event.preventDefault();
 194
 195         const link = event.target.closest('a').href;
 196         /** @var {ConfirmDialog} **/
 197         const dialog = window.$components.firstOnElement(this.switchDialogContainer, 'confirm-dialog');
 198         const [saved, confirmed] = await Promise.all([this.saveDraft(), dialog.show()]);
 199
 200         if (saved && confirmed) {
 201             window.location = link;
 202         }
 203     }
 204
 205     /**
 206      * @return MarkdownEditor|WysiwygEditor
 207      */
 208     getEditorComponent() {
 209         return window.$components.first('markdown-editor') || window.$components.first('wysiwyg-editor');
 210     }
 211
 212 }