Mini editor help needed


#1

I need an input text box. I quickly found out that a simple input element doesn’t work because of keys being overridden. I’m assuming I should be using a mini-editor.

Is the mini-editor documented? I’ve tried just making an instance and appending it to a div but I can’t get it positioned. It is using display:flex which is new to me.

I would look at find/replace but it is pretty complex for my pretty little brain.


Mini text editor help needed
Mini text editor help needed
#2

REST package has some examples. Might not be what you want of course.


#3

You may want to look at the styleguide (Styleguide: Show command) it contains some examples of layout classes you can use with mini editors.


#4

I don’t see anything in the styleguide about mini-editors or anything that can enter text. I’m looking at rest-client for now.


#5

They doesn’t instantiate a mini editor but there definitely is layout examples with mini-editor-like divs.


#6

What perfect timing. Apparently 123 broke styleguide …

styleguide/lib/space-pen-extensions.coffee:74

I tried upgrading it but it didn’t need an upgrade. The problem is there in safe mode also.

I’m on windows 8.0 and Atom 123


#7

#8

Re those mini editor examples you posted from the styleguide, like the one with “something you typed …”. Are they supposed to work as text input boxes? Clicking inside the area does nothing on the styleguide itself or in my code. It just acts like a div.

I’m on 0.122.0. I went back from 123 to get a styleguide to work. Styleguide 0.30.0 has 123 fixed but I am getting errors trying to upgrade to it.

Today is not my day. Nothing has worked.


#9

For anyone lurking about, the solution to getting all the keys to work in a normal html input text box is to add the class native-key-bindings. I still have no idea how to implement a mini editor but this works fine.


#10

Good to know! I haven’t had to do this yet!


#11

No these are just examples of using them in a layout (which one of your issues if I correctly understood your first post).

To instantiate a mini editor you can use a subview like in the SelectListView class:

https://github.com/atom/atom/blob/master/src%2Fselect-list-view.coffee#L37-L45

And then registers to the editor view events.


#12

Thanks. I assume using a real mini editor has advantages over a plain html input. Things like UI coloring/appearance? Any functional advantages?


#13

@mark_hahn I have been through this pain before. In almost all cases you want to be using the mini editor over a standard input with native-key-binding class. The reason is that with a standard input and native-key-bindings it breaks some standard key functionality like TAB. For example if you have 2 standard inputs on a form both with native-key-bindings you cannot tab between them :frowning:

Using @abe example above, the outlet name would be filterEditorView so you can get and set the content using filterEditorView.getText() and filterEditorView.setText( ... ).

Here is an example from a package I am working on:

View: https://github.com/haggy/Proton-IDE/blob/master/lib/interactive-query-view.coffee
Controller: https://github.com/haggy/Proton-IDE/blob/master/lib/sfdc_core/interactive-query-controller.coffee#L59


#14

I noticed that but in my particular usage that was actually an advantage. Thanks for the info.


#15

I’m now on a project where I have a mini-editor and some buttons so I want tabs to work. I copied this @content almost verbatim from find-and-replace and tabs don’t work. They do work in find-and-replace …

  @content: ->
    @div class:'vtlf-file-picker overlay from-top', \
         style: 'position:absolute; margin:0', tabindex:"-1", =>
           
      @div class: "file-path vtlf-container block", =>
        @div class: "editor-container", =>
          @subview "filePath", new EditorView
            tabindex:"1"
            mini: true
            placeholderText: "Absolute path to file."

        @div class: 'btn-group-vtlf btn-group', =>
          @button outlet: 'cancelButton', tabindex:"2", class: 'btn', 'Cancel'
          @button outlet: 'openButton',   tabindex:"3", class: 'btn', 'Open'

What is the secret sauce that makes tabs work?


#16

BTW, the symptom is that any tab leaves my overlay pop-up and acts on the workspace. The starting point is the mini editor since I can’t select anything else.

I guess I’ll have to study find-and-replace more since tabs work there. I stole everything from there but I must have missed something.


#17

FYI: I found how find-and-replace handled tabs and it works for me also. This will probably be obvious to the rest of you but it just defined a key binding for tab and caught it.

I was stuck on the idea that the tab key was special and was only a native key binding. But if you don’t put the class native-key-binding in your mini editor then a tab is the same as any other key. Here are the pieces of find-and-replace that handle tabs.

# in keymaps/.cson
'.find-and-replace, .project-find, .project-find .results-view':
  'tab': 'find-and-replace:focus-next'
   'shift-tab': 'find-and-replace:focus-previous'

# in view code
@on 'find-and-replace:focus-next', @toggleFocus

#18

I have just finished reading this discuss, but I can’t find the solution to this problem.

I’ve writed as below:
1, in the @content

@subview "filePath", new EditorView({mini: true, placeholderText:"test"})

2, or in the initialize function:

@append new TextEditorView({mini: true, placeholderText:"test"})

but it can’t work!


#19

Just now, I find some other packages that uses mini-editor, and they also have the same problem: just can input words, but you can’t see what you have inputted.


#20

Other folks aren’t having this issue, @comeontom. I can see what I type into mini editors just fine. Perhaps something is broken on your installation of Atom?