add option for maxHeight

[SomnaW]

Version

npm "@toast-ui/editor": "^2.3.1"

Development Environment

Chrome, Windows 10.

Current Behavior

Current documented height related options allowed are height and minHeight. Leaving out all height options or using auto height results in auto height, but long text can cause the toolbar to be unavailable because it scrolls off the screen. The option maxHeight is currently ignored.

componentDidMount() {
        this.editorInst = new Editor({
            el: this.rootEl.current,
            initialValue: this.props.markdown || '',
            maxheight: '70vh',
            height: 'auto',
            minHeight: '5em',
        });
}

Expected Behavior

A maxHeight option should constrain the component to a maximum height. In the example above, this would result in the maximum possible to be 70% of the available view screen, which ensures the toolbar can be available for the bottom of the text no matter how long the text is.

I have attempted to make this change using css alone, but have not yet been able to find the right combination of max-height + flex box + other settings to keep the text from collapsing or overflowing the component.

[seonim-ryu]

@SomnaW I think this function can be handled by the user, but doesn't it work even if you apply a style to the wrapper element? There are currently no plans to support the option.

[SomnaW]

@SomnaW I think this function can be handled by the user, but doesn't it work even if you apply a style to the wrapper element? There are currently no plans to support the option.

That did not work for me. I thought for sure that was going to hide the toolbar and/or the footer buttons. All controls are visible, but the max height is not constrained. This means the toolbar and footer buttons can't be visible at all times if the text is very long. I still think that all the height settings should go in the same place, but this would be a reasonable workaround if it worked.

To be clear, here's what I did:

    constructor () {
        super();
        this.rootEl = createRef();
        this.editorInst = null;
    }

    componentDidMount() {
        this.editorInst = new Editor({
            el: this.rootEl.current,
            initialValue: this.props.markdown|| '',
            minHeight: '5ex',
            height: 'auto',
            ...this.props.toastProps
        });

        // unrelated code excluded
    }


render() {
        // unrelated code excluded
    return (
                <div
                    id = {this.props.id}
                    ref={this.rootEl}
                    style={{ maxHeight: '70vh' }}
                />
    );
}

[SomnaW]

Has anyone found a way to have a min and max height for the editor so the toolbar does not scroll out of view? Fixed height is currently my only work around, but this leaves a lot of unused space when I don't have a whole screen full of text.

[Abhishek332]

Has anyone found a way to have a min and max height for the editor so the toolbar does not scroll out of view? Fixed height is currently my only work around, but this leaves a lot of unused space when I don't have a whole screen full of text.

Only possible solution that I get is we need to give the min/max height to .toast-editor class by using CSS.