Is there a way to initialize a text box with several rows?


#1

Hi,

I’m just getting started with Atom package development, and I’m trying to create a text box in my custom view (using the TextEditorView from atom-space-pen-views), but it’s only got a single row by default. How can I initialize it with several rows ?

Thanks !


#2

It depends on whether you’re using the TextEditor with the mini mode enabled or not (mini editors are the ones you can see in the find-and-replace panel for instance).

# Basic editor: 
new TextEditorView({})

# Mini editor: 
new TextEditorView({mini: true})

Mini editors aren’t intended to display many rows, basic editors does, so if you want the user to input multiline content you should not pass the mini option to the TextEditorView constructor.

OTOH, if you want to populate the editor with a content that already spans many rows, use the text option in the constructor options argument:

new TextEditor({text: 'Hello\nWorld\n\n\n'})

BTW, you can also write your code to use the new MV API in Atom, while TextEditorView is still available in atom-space-pen-views it just creates a TextEditor and a TextEditorElement under the hood.

For an example you can look at my - currently WIP - table-edit package, where I also use a TextEditor to edit cells:

https://github.com/abe33/atom-table-edit/blob/master/lib/table-element.coffee#L839-L842


#3

Thanks @abe for your answer. The TextEditor instance I’m talking about has the mini mode disabled. I’m currently adding the content on my view this way (it might be deprecated) :

I like the idea of populating the editor with a prexisting content spanning many rows (although the place-holder text wouldn’t display I guess ?), but I’m not using the TextEditor constructor anywhere for the moment.

Should I rewrite my code using the new MV API, or is there still a way to solve my problem without changing my code too much ?


#4

If you already use space-pen views it may be simpler to keep the code as is. If you just need the text editor to have a different height than its default one there’s many way to achieve that:

  1. Change the height of the element through CSS or the style attribute: The TextEditorComponent object polls the DOM and adapt to the editor size.
  2. Change the height of the element through the setHeight method on the TextEditor model that you’ll get with TextEditorView::getModel.

Anyway, text editors are made to adapt depending on the context, so just resize it the way you’re the most familiar with and you shouldn’t have much problem.


#5

I still can’t get it to work; I create my TextEditorView this way :

    @div class: 'block', =>
        @label 'Description:', class: 'text-highlight editor-description'
        @subview 'editorDescription', new TextEditorView(placeholderText: "Enter role description")

And in my initialize method, I set the height of the corresponding text editor :

    @editorDescription.getModel().setHeight(500)

But the text editor still has only one row.

I also tried changing the CSS :

    .editor-description{
        height: 70000
    }

But that didn’t yield any more results.

However, populating the editor with a content already spanning many rows worked :

    @miniEditorDescription.getModel().setText("\n\n\n\n")

But it’s not really ideal (for instance, there’s no placeholder text).

Is there something I’m missing ? As a side note, displaying the ‘height’ attribute of the text editor before I set it to 500 gives me a value of 0.


#6

CSS dimensions require a unit (px, %, etc.) and nowhere you define the class for the text editor.
Use that instead:

.block atom-text-editor{
        height: 700px;
}

#7

It works ! The text box now has a bigger default size :

The only problem left is that entering a text with a number of rows bigger than the preset size is displayed over the rest of the view (under the text box) :

Before our changes to the CSS, the text box pushed down appropriately the rest of the view as the text box grew bigger. I would like that behavior, or to set the text box size permanently and add a scroll bar on the side if there’s a need for it.

If you have any ideas about these issues, I’d love to hear about it. Thank you so much for your assistance so far, you’ve been very helpful !


#8

Just wanted to create a similar question; wanted to know how to set 5 rows of content without using setText() and losing placeholder-text. With help from above I’ve used this:

let lineHeight = null
show () {
  if (lineHeight === null) lineHeight = this.input.getHeight()
  this.textEditorElement.setHeight(lineHeight * 5)
}

Down-side is that it’s fixed to always 5 rows, it won’t grow anymore but use scrollbars instead.