Possibility of vertically growing editor

[pellmann]

What I would like to achieve is that the editor is started with a line size of e.g. 6. But if the user then enters more text, the editor should grow vertically up to a maximum number of lines. Ace basically supports this with the options minLines and maxLines. (it the same function the editor has on the landing page of https://ace.c9.io/)

It would be nice to be able to use these Ace functions directly. I think additionally the editor div would have to change from position:absolute to position:static for this case?

[F0rce]

Hei @pellmann

I converted the issue to an discussion because I think this is not an issue neither an feature request and I have to explain a bit.
I will create a seperate discussion for your question asked on the Vaadin Directory (just give me some time please).

First of all I want to say sorry for replying so late. Was pretty busy with other projects.

But lets get back to topic...

In the earlier / first version of the Ace Editor https://github.com/sergio70/aceeditorv14 (which I actively maintained), the frontend webcomponent framework, which was used, is called Polymer 3. Polymer 3 and Ace itself came with a lot of bugs. For example the scrollbar was flickering in a super wierd way which I was not able to stop and some properties did not fire the updated event. With Polymer 3 going end of life and Lit (the newer Framework) being added to Vaadin, I decided to rewrite the whole component (better said all of my Add-ons) to use Lit with its Lifecycle and so on. Because of the new possibilitys Lit gave me, I decided to remove the min and max lines options completely. The Editor is so responsive that it can completely calculate lines by the height. Even when you change it in runtime, everything works now as expected. Many issues that the old version had, completely disappeared, when I switched to Lit without having to have change the rewritten code.

Lastly I don't think that the position could be changed from absolute to static, because of the statusbar which is located in the bottom right corner.

I would kindly ask you, to try to play around with the setHeight/setWidth/setMinHeight/setMinWidth Method Ace provides itself (on Java Side). Maybe it will fit your needs.

As always I would be happy to assist you, If help needed / wanted.

Have a great week,
David

[pellmann]

Hi David,

From the requirement side, it is that I have a table with multiple values in AceEditors. These values are typically rather small - but can also go over many lines.

I.e. in some form the editor should be able to grow with the content. An option that would also be okay would be to size it with the mouse, as is possible with an HTML text area.

I have implemented the two functions in a derivative of the AceEditor and for me it works that way - but it may be that some of the editor functions are not compatible - e.g. I don't use the status bar there.

public void setMaxLines(Integer maxlines) {
    // in default, the editor div has the 'absolute' style, which does not work for expansion with lines
    executeAfterInit("this.editorDiv.style.position = 'static'; this.editor.setOption('maxLines', " + maxlines + ");");
}

public void setMinLines(Integer minlines) {
    // in default, the editor div has the 'absolute' style, which does not work for expansion with lines
    // if no value (value='') is set, the normal min lines does not work - so we need to also set a min height in px
    executeAfterInit("this.editorDiv.style.position = 'static'; this.editorDiv.style.minHeight = '"
            + (minlines * getFontSize()) + "px'; this.editor.setOption('minLines', " + minlines + ");");
}

private void executeAfterInit(String js) {
    getElement().executeJs("this.addEventListener(\n" +
            "        \"editorInitialized\",\n" +
            "        (e) => { " + js + " },\n" +
            "        { once: true }\n" +
            "      );");
}

[F0rce]

Hi @pellmann,

wanted to update you on your problem/request. As I was working on a new Major release ace/2.0.0 for the last few weeks, I was thinking/testing on bringing the minLines / maxLines back.

I have to say, that it breaks some logic of the editor, for example the statusBar and some minor things. When released (could take some more days) your logic has to be changed a bit:

public void setMaxLines(Integer maxlines) {
    // in default, the editor div has the 'absolute' style, which does not work for expansion with lines
    executeAfterInit("this.editorDiv.style.position = 'static'; this.editor.setOption('maxLines', " + maxlines + ");");
}

public void setMinLines(Integer minlines) {
    // in default, the editor div has the 'absolute' style, which does not work for expansion with lines
    // if no value (value='') is set, the normal min lines does not work - so we need to also set a min height in px
    executeAfterInit("this.editorDiv.style.position = 'static'; this.editorDiv.style.minHeight = '"
            + (minlines * getFontSize()) + "px'; this.editor.setOption('minLines', " + minlines + ");");
}

private void executeAfterInit(String js) {
    getElement().executeJs("this.addEventListener(\n" +
            "        \"editor-ready\",\n" +
            "        (e) => { " + js + " },\n" +
            "        { once: true }\n" +
            "      );");
}

I hope it is ok for you, that you need to implement the changes in your own implementation as I am not able to push it to upstream.

As usual, when you need more information / help I am obviously willing to help / assist you.
I would thank you, if you would mark this as answered (if this is the case).

Sorry for the late reply again.

Have a great week,
David