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

   1 import {Component} from './component';
   2
   3 export class WysiwygEditor extends Component {
   4
   5     setup() {
   6         this.elem = this.$el;
   7         this.editContainer = this.$refs.editContainer;
   8         this.input = this.$refs.input;
   9
  10         /** @var {SimpleWysiwygEditorInterface|null} */
  11         this.editor = null;
  12
  13         const translations = {
  14             ...window.editor_translations,
  15             imageUploadErrorText: this.$opts.imageUploadErrorText,
  16             serverUploadLimitText: this.$opts.serverUploadLimitText,
  17         };
  18
  19         window.importVersioned('wysiwyg').then(wysiwyg => {
  20             const editorContent = this.input.value;
  21             this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent, {
  22                 drawioUrl: this.getDrawIoUrl(),
  23                 pageId: Number(this.$opts.pageId),
  24                 darkMode: document.documentElement.classList.contains('dark-mode'),
  25                 textDirection: this.$opts.textDirection,
  26                 translations,
  27             });
  28         });
  29
  30         let handlingFormSubmit = false;
  31         this.input.form.addEventListener('submit', event => {
  32             if (!this.editor) {
  33                 return;
  34             }
  35
  36             if (!handlingFormSubmit) {
  37                 event.preventDefault();
  38                 handlingFormSubmit = true;
  39                 this.editor.getContentAsHtml().then(html => {
  40                     this.input.value = html;
  41                     this.input.form.submit();
  42                 });
  43             } else {
  44                 handlingFormSubmit = false;
  45             }
  46         });
  47     }
  48
  49     getDrawIoUrl() {
  50         const drawioUrlElem = document.querySelector('[drawio-url]');
  51         if (drawioUrlElem) {
  52             return drawioUrlElem.getAttribute('drawio-url');
  53         }
  54         return '';
  55     }
  56
  57     /**
  58      * Get the content of this editor.
  59      * Used by the parent page editor component.
  60      * @return {Promise<{html: String}>}
  61      */
  62     async getContent() {
  63         return {
  64             html: await this.editor.getContentAsHtml(),
  65         };
  66     }
  67
  68 }