Trying to embed TextEditorView in a custom panel with problems


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});

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.



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?


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.


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.


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


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

solution is

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

Simple. Thanks


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


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 with as much information as you can include.


@leedohm I’ve submitted