Any examples/tips for adding mini editor to status bar?


#1

This is what I’m doing now :

filterElement = document.createElement 'atom-text-editor'
filterElement.setAttribute 'mini', true
filterElement.classList.add 'inline-block'
filterElement.classList.add 'birch-statusbar-filter'
filterStatusBarItem = statusBar.addLeftTile(item: filterElement, priority: 0)
atom-text-editor[mini].birch-statusbar-filter {
  vertical-align: middle;
  font-family: @font-family;
  font-size: 1.0rem;
}

But the result that I get (I’ve focused the editor to make it more visible) looks like this:

The problem seems related to applying the inline-block class/style to the mini editor. But it’s not a permanent problem, I can fix things if I add the following code to force a relayout later…

filterElement.style.display = 'block'
setTimeout (-> filterElement.style.display = null), 5000

Then I see the mini editor:

Any suggestions one what might be happening or how I can better position a mini editor in the status bar?