1 import {Component} from './component';
2 import {el} from "../wysiwyg/utils/dom";
3 import {SimpleWysiwygEditorInterface} from "../wysiwyg";
5 export class WysiwygInput extends Component {
6 private elem!: HTMLTextAreaElement;
7 private wysiwygEditor!: SimpleWysiwygEditorInterface;
8 private textDirection!: string;
11 this.elem = this.$el as HTMLTextAreaElement;
12 this.textDirection = this.$opts.textDirection;
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;
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,
26 this.wysiwygEditor.onChange(() => {
27 this.wysiwygEditor.getContentAsHtml().then(html => {
28 this.elem.value = html;