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         window.importVersioned('wysiwyg').then(wysiwyg => {
  14             const editorContent = this.input.value;
  15             this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent);
  16         });
  17
  18         let handlingFormSubmit = false;
  19         this.input.form.addEventListener('submit', event => {
  20             if (!this.editor) {
  21                 return;
  22             }
  23
  24             if (!handlingFormSubmit) {
  25                 event.preventDefault();
  26                 handlingFormSubmit = true;
  27                 this.editor.getContentAsHtml().then(html => {
  28                     this.input.value = html;
  29                     this.input.form.submit();
  30                 });
  31             } else {
  32                 handlingFormSubmit = false;
  33             }
  34         });
  35     }
  36
  37     getDrawIoUrl() {
  38         // TODO
  39         const drawioUrlElem = document.querySelector('[drawio-url]');
  40         if (drawioUrlElem) {
  41             return drawioUrlElem.getAttribute('drawio-url');
  42         }
  43         return '';
  44     }
  45
  46     /**
  47      * Get the content of this editor.
  48      * Used by the parent page editor component.
  49      * @return {Promise<{html: String}>}
  50      */
  51     async getContent() {
  52         return {
  53             html: await this.editor.getContentAsHtml(),
  54         };
  55     }
  56
  57 }