Adding custom elements between tab and TextEditor element


Hello everybody!

I have been some days searching and trying to achive to next behaviour (this is manipulated with inspector for illustrate the question):

I want add some metadata information at the top of the TextEditor when it is created and handle it (the top panel with text ‘Hello World’ and TextEditor) like an unique element or content of tab when it is moved to another place of the workspace.

I haven’t any idea how to achive it programatically without “hack” the DOM. I suspect that there is some way to handle the content of tab (mentioned metada and texteditor) like a unique element, but I don’t known how and I didn’t find any other package as example to start. The most similar example is adding panels to bottom, but I want to add this elements between tab and TextEditor.

I hope that this questions helps others and me.

Thank you very much


You’d have to hack the DOM. There’s no API function that opens up room for content between the tab row and a standard TextEditor.


I achived the behaviour registering an opener listener like this:

(this is an stupid example only for ilustrative propouses)

let greatings = document.createElement('h1');
greatings.innerHTML = 'Hello!';
greatings.getTitle = () => { return 'Tab Name' }

let text = atom.workspace.buildTextEditor();
let view = atom.views.getView(text);

atom.workspace.addOpener((uri) => {
      // Always open greatings tab, this is only an EXAMPLE.
      return greatings;

The problem, is that TextEditor isn’t bind with toolbar (cursor position, language type…) and the state of file. I think that the most sense is hack the normal behaviour of pane, but I found more interesting now “replicate” the native behaviour of new file in my package to take all control, but I can’t find in atom repository the file(s) where “new file creation” is. I want to provide the native behaviour with some “tweaks”.

Thank you very much,
I hope that this topic helps people :slight_smile: