Markdown Editor preview width only 50px (Angular Wrapper)

JensUweB commented 4 years ago

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 withpreviewStyle="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:

Install ng-tui-editor in an angular app of your choice

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";

Place <tui-editor></tui-editor> in any html template
Type in an example text in markdown mode
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();
    }
}

ghost commented 4 years ago

i use it via vue，the preview on the right is also only 50 pixels wide.

seonim-ryu commented 4 years ago

@JensUweB @SydnieBan I think it's because the CodeMirror's style file is not imported for some reason. Can you give information about the style files you imported?

JensUweB commented 4 years ago

@SydnieBan Thanks for your reply! @seonim-ryu I have the following imports inside my global styles.scss file:

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

ghost commented 4 years ago

@seonim-ryu I have the following imports inside my global styles.scss file:

and I found I npm run build and throw it to server，it's width is normal【I npm update before 】

import 'tui-editor/dist/tui-editor.css' // editor ui
import 'tui-editor/dist/tui-editor-contents.css' // editor content
import 'tui-color-picker/dist/tui-color-picker.css'
import 'codemirror/lib/codemirror.css' // codemirror
import 'tui-editor/dist/tui-editor-extColorSyntax'

shaci commented 4 years ago

i use it via vue，the preview on the right is also only 50 pixels wide.

I have the same problem. Do you know how to fix it?

shaci commented 4 years ago

@JensUweB You can see on your screenshot that html is broken https://ibb.co/jRg3qM2

I changed row 19616 in tui-editor-Editor.js from var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor" />', '<div class="te-md-splitter" />', '<div class="te-preview" />', '</div>', '<div class="te-ww-container">', '<div class="te-editor" />', '</div>', '</div>'].join(''); to var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor">','</div>', '<div class="te-md-splitter">','</div>', '<div class="te-preview">','</div>', '</div>', '<div class="te-ww-container">', '<div class="te-editor">','</div>', '</div>', '</div>'].join(''); and all works now

JensUweB commented 4 years ago

@shaci Can confirm! Bug solved! Thanks! :)

shaci commented 4 years ago

@shaci Can confirm! Bug solved! Thanks! :)

@JensUweB @seonim-ryu Is fix added to library? Or you just fixed it locally?

JensUweB commented 4 years ago

@shaci Can confirm! Bug solved! Thanks! :)

@JensUweB @seonim-ryu Is fix added to library? Or you just fixed it locally?

I tried his fix locally. Who is supposed to add this to the library? Someone from the Toast UI Team I thought?

seonim-ryu commented 4 years ago

@JensUweB Sorry.. I saw your comment now.

@seonim-ryu I have the following imports inside my global styles.scss file:
@import "~tui-editor/dist/tui-editor-contents.css";
@import "~tui-editor/dist/tui-editor.css";
@import "~codemirror/lib/codemirror.css";

I think the order of importing style files in the current situation is wrong. Below is an example of the 2 version and you need to import it in the following order.

https://github.com/nhn/tui.editor/tree/master/apps/editor#using-in-node-environment

You can do the same in 1 version. Change the order so that the CodeMirror's style is imported first before the Editor's style.

ghost commented 4 years ago

@seonim-ryu but i use npm install --save tui-editor
import Editor from 'tui-editor'; /* ES6 */ import 'tui-editor/dist/tui-editor.css'; // editor's ui import 'tui-editor/dist/tui-editor-contents.css'; // editor's content import 'codemirror/lib/codemirror.css'; // codemirror import 'highlight.js/styles/github.css'; // code block highlight and i found Getting Started is failure，how can i do to fix it? npm install --save @toast-ui/editor or npm install --save @toast-ui/vue-editor ?

shaci commented 4 years ago

@JensUweB Sorry.. I saw your comment now.
@seonim-ryu I have the following imports inside my global styles.scss file:
@import "~tui-editor/dist/tui-editor-contents.css";
@import "~tui-editor/dist/tui-editor.css";
@import "~codemirror/lib/codemirror.css";
I think the order of importing style files in the current situation is wrong. Below is an example of the 2 version and you need to import it in the following order.

https://github.com/nhn/tui.editor/tree/master/apps/editor#using-in-node-environment

You can do the same in 1 version. Change the order so that the CodeMirror's style is imported first before the Editor's style.

@seonim-ryu it seems my fix (https://github.com/nhn/tui.editor/issues/923#issuecomment-625904073) helped with described bug. But @JensUweB (and I) applied it locally (https://github.com/nhn/tui.editor/issues/923#issuecomment-626718294). Is it possible to add this fix to library?

seonim-ryu commented 4 years ago

@SydnieBan It was to change the order as below. The point of my answer was to import the CodeMirror's style first.

Before

import 'tui-editor/dist/tui-editor.css' // editor ui
import 'tui-editor/dist/tui-editor-contents.css' // editor content
import 'tui-color-picker/dist/tui-color-picker.css'
import 'codemirror/lib/codemirror.css' // codemirror
import 'tui-editor/dist/tui-editor-extColorSyntax'

After


import 'codemirror/lib/codemirror.css' // codemirror

import 'tui-editor/dist/tui-editor.css' // editor ui import 'tui-editor/dist/tui-editor-contents.css' // editor content

import 'tui-color-picker/dist/tui-color-picker.css' import 'tui-editor/dist/tui-editor-extColorSyntax'

seonim-ryu commented 4 years ago

@shaci Did you import CSS files in this order too?

https://github.com/nhn/tui.editor/issues/923#issuecomment-632022602

shaci commented 4 years ago

@seonim-ryu my code.

<script>
  // deps for editor
  import 'codemirror/lib/codemirror.css' // codemirror
  import 'tui-editor/dist/tui-editor.css' // editor ui
  import 'tui-editor/dist/tui-editor-contents.css' // editor content
  import Editor from 'tui-editor'
  import defaultOptions from './default-options'

  export default {
  name: 'MarddownEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: false,
      default() {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    options: {
      type: Object,
      default() {
        return defaultOptions
      }
    },
    mode: {
      type: String,
      default: 'wysiwyg'
    },
    height: {
      type: String,
      required: false,
      default: '300px'
    },
    language: {
      type: String,
      required: false,
      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
    },
    loading: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      editor: null
    }
  },
  computed: {
    editorOptions() {
      const options = Object.assign({}, defaultOptions, this.options)
      options.initialEditType = this.mode
      options.height = this.height
      options.language = this.language
      return options
    }
  },
  watch: {
    value(newValue, preValue) {
      if (newValue !== preValue && newValue !== this.editor.getValue()) {
        this.editor.setValue(newValue)
      }
    },
    language(val) {
      this.destroyEditor()
      this.initEditor()
    },
    height(newValue) {
      this.editor.height(newValue)
    },
    mode(newValue) {
      this.editor.changeMode(newValue)
    }
  },
  mounted() {
    this.initEditor()
  },
  destroyed() {
    this.destroyEditor()
  },
  methods: {
    initEditor() {
      this.editor = new Editor({
        el: document.getElementById(this.id),
        ...this.editorOptions
      })
      if (this.value) {
        this.editor.setValue(this.value)
      }
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getValue())
      })
    },
    destroyEditor() {
      if (!this.editor) return
      this.editor.off('change')
      this.editor.remove()
    },
    setValue(value) {
      this.editor.setValue(value)
    },
    getValue() {
      return this.editor.getValue()
    },
    setHtml(value) {
      this.editor.setHtml(value)
    },
    getHtml() {
      return this.editor.getHtml()
    }
  }
}
</script>

<style>
  .te-preview {
    background-color: white;
  }
  .markdown-wrapper {
    position: relative;
  }
  .markdown-loader {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: blue;
    opacity: 0.3; */
  }
</style>

default-options.js `

export default {
  minHeight: '200px',
  previewStyle: 'vertical',
  useCommandShortcut: true,
  useDefaultHTMLSanitizer: true,
  usageStatistics: false,
  hideModeSwitch: false,
  toolbarItems: [
    'heading',
    'bold',
    'italic',
    'strike',
    'divider',
    'hr',
    'quote',
    'divider',
    'ul',
    'ol',
    'task',
    'indent',
    'outdent',
    'divider',
    'table',
    'image',
    'link',
    'divider',
    'code',
    'codeblock'
  ]
}

`

lmxx1234567 commented 4 years ago

Is there any progress now? @shaci 's code show how the bug came out.

@JensUweB You can see on your screenshot that html is broken https://ibb.co/jRg3qM2

I changed row 19616 in tui-editor-Editor.js from var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor" />', '<div class="te-md-splitter" />', '<div class="te-preview" />', '</div>', '<div class="te-ww-container">', '<div class="te-editor" />', '</div>', '</div>'].join(''); to var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor">','</div>', '<div class="te-md-splitter">','</div>', '<div class="te-preview">','</div>', '</div>', '<div class="te-ww-container">', '<div class="te-editor">','</div>', '</div>', '</div>'].join(''); and all works now

JensUweB commented 4 years ago

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.

shaci commented 4 years ago

@seonim-ryu @JensUweB I've used npm install --save @toast-ui/vue-editor and all works fine. But i've got another error. It seems that I got that bug or similar https://github.com/nhn/tui.editor/issues/548 I see strange behaviour when i select text with terminate space, (but maybee i'm wrong and it is normal behaviour)

shaci commented 4 years ago

@seonim-ryu @JensUweB I've used npm install --save @toast-ui/vue-editor and all works fine. But i've got another error. It seems that I got that bug or similar #548 I see strange behaviour when i select text with terminate space, (but maybee i'm wrong and it is normal behaviour)

More precisely, in wysiwyg mode all is fine. But in markdown mode, i still get bug https://github.com/nhn/tui.editor/issues/548.

tadada commented 4 years ago

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; }

nhn / tui.editor