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