Markdown Editor preview width only 50px (Angular Wrapper)

I know that Angular is officialy not supported, but I don’t think that this is an angular specific problem.

Describe the bug

I’am loading the tui editor with an angular wrapper with previewStyle="vertical". It is basically working, but the preview on the right has only a width of 50 pixel.

To Reproduce

Steps to reproduce the behavior:

1. Install ng-tui-editor in an angular app of your choice
2. Import the needed styles in your global styles file:

      @import "~tui-editor/dist/tui-editor-contents.css";
      @import "~tui-editor/dist/tui-editor.css";
      @import "~codemirror/lib/codemirror.css";

1. Place <tui-editor></tui-editor> in any html template
2. Type in an example text in markdown mode
3. See error

Expected behavior

I expect that the preview has a with of 50%.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser: Firefox & Chrome
• Versions: latest versions

Additional context

Maybe something is just missing in the wrapper? Some missing styles maybe? If you want to have a quick look into the wrapper component, here you go. Not much code:

import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter, forwardRef, AfterViewInit } from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

import tuiEditor from 'tui-editor';

@Component({
	selector: 'tui-editor',
	template: `<div #tuiEditor></div>`,
	providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => NgTuiEditorComponent),
        multi: true
    }]
})
export class NgTuiEditorComponent implements ControlValueAccessor, OnInit {

    onChange: (_: any) => void = (_: any) => {};
	onTouched: () => void = () => {};
	
	private editor!: tuiEditor;
	private EditorElement: ElementRef<HTMLDivElement>;
	@ViewChild('tuiEditor', { static: true }) set EditorElementSetter(el: ElementRef) {
		this.EditorElement = el;
	}
	@Input('initialEditType') private initialEditType: 'markdown' | 'wysiwyg';
	@Input('ngModel') value: string;
	@Input('previewStyle') private previewStyle: 'vertical' | 'tab';
	@Input('height') private height: string;
	@Input('dir') private dir: 'ltr' | 'rtl' = 'ltr';
	@Output('change') private change: EventEmitter<NgTuiEditorComponent> = new EventEmitter();

	constructor() {}

	ngOnInit(): void {
		this.editor = new tuiEditor({
			el: this.EditorElement.nativeElement,
			initialValue: this.value,
			initialEditType: this.initialEditType || 'wysiwyg',
			previewStyle: this.previewStyle || 'vertical',
			height: this.height || '300px',
			events: ({
				change: ($event) => {
					let value = this.getValue();
					this.writeValue(value);
					this.change.emit(this);
				}
			} as any)
		});
		this.EditorElement.nativeElement.querySelector('.tui-editor-contents').setAttribute('dir', this.dir);
	}

    updateChanges(): void {
		this.onChange(this.value);
    }
    writeValue(value: string): void {
		if (value != this.editor.getValue()) {
			this.editor.setValue(value);
		}
        this.value = value;
        this.updateChanges();
    }
    registerOnChange(fn: any): void {
        this.onChange = fn;
    }
    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }

	public getHTML(): string {
		return this.editor.getHtml();
	}
	public getValue(): string {
		return this.editor.getMarkdown();
	}
}

[tadada]

A easy way to fix. rewrite css, with: 100%. .tui-editor .te-md-splitter { display: none; position: absolute; left: 50%; top: 0; height: 100%; width: 100% !important; border-left: 1px solid #e5e5e5; }

[JensUweB]

Is it possible that npm i tui-editor is deprecated and everyone should just use npm i @toast-ui/editor? tui-editor runs on version 1.4.10, but latest version is 2.1.2

@seonim-ryu Maybe you either mark the tui-editor package as deprecated or publish the latest version there too. It seems that this bug got solved in @toast-ui/editor package some time ago.