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