Trying to embed TextEditorView in a custom panel with problems


#1

I’m trying to embed Atom’s native TextEditor in my package like so

let editorView = new TextEditorView({mini: false, gutterVisible: true, placeholderText: this.props.content});
editorView.appendTo(argumentEditor);

But this is all that shows up in my Pane.

The gutter is invisible, the text is always the same as the background, and I can’t control the height except by creating newlines.

I’d really like to use the native Atom editor and not Ace or something else so my package can be themed.

Thanks


#2

Why aren’t you using Atom’s standard methods to open a new editor? If you look at the bug-report package that @mark_hahn and I worked on, it just opens an editor with a custom panel at the bottom. Would that work for what you have in mind?


#3

I have a pane that displays multiple instances of a JavaScript editor. Using Ace, it looks like this

I want a visible gutter, autocompletion, syntax highlighting, all in multiple instances of a code editor embedded deep within a pane.


#4

You might want to work with the Atom pane system (see the Panes section) like the welcome package at least to start with. This will save a lot of time and frustration getting things off the ground. This way you’ll get the visible gutter (unless the user has disabled it), autocompletion, and syntax highlighting for free.


#5

Check out markdown-preview. It actually puts an entire texteditor in each code section no matter how big or small.


#6

Got it. Didn’t realize Atom registered custom elements.

solution is

<atom-text-edit>var i = 0;</atom-text-edit>

Simple. Thanks


#7

That package unfortunately doesn’t work for me with Atom 0.211.0 on OSX Yosemite.


#8

I just tried my bug-report package on Atom v0.212.0-96a7222 on Mac OS X 10.10.3 and it worked fine. Please open an issue on https://github.com/lee-dohm/bug-report with as much information as you can include.


#9

@leedohm I’ve submitted https://github.com/lee-dohm/bug-report/issues/50