]> BookStack Code Mirror - bookstack/blob - resources/js/components/wysiwyg-input.ts
Tests: Updated comment test to account for new editor usage
[bookstack] / resources / js / components / wysiwyg-input.ts
1 import {Component} from './component';
2 import {el} from "../wysiwyg/utils/dom";
3 import {SimpleWysiwygEditorInterface} from "../wysiwyg";
4
5 export class WysiwygInput extends Component {
6     private elem!: HTMLTextAreaElement;
7     private wysiwygEditor!: SimpleWysiwygEditorInterface;
8     private textDirection!: string;
9
10     async setup() {
11         this.elem = this.$el as HTMLTextAreaElement;
12         this.textDirection = this.$opts.textDirection;
13
14         type WysiwygModule = typeof import('../wysiwyg');
15         const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
16         const container = el('div', {class: 'basic-editor-container'});
17         this.elem.parentElement?.appendChild(container);
18         this.elem.hidden = true;
19
20         this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, this.elem.value, {
21             darkMode: document.documentElement.classList.contains('dark-mode'),
22             textDirection: this.textDirection,
23             translations: (window as unknown as Record<string, Object>).editor_translations,
24         });
25
26         this.wysiwygEditor.onChange(() => {
27             this.wysiwygEditor.getContentAsHtml().then(html => {
28                 this.elem.value = html;
29             });
30         });
31     }
32 }