Any ideas how to insert buttons at start/end of mini editor?


For example I’m creating a search field using the mini editor so that I can syntax highlight some search syntax. I’d like to add a magnifying glass icon at the start of the field, and a “clear” icon at the end when there’s content to clear.

The standard find panel does something like this to add a “no results” label. But it uses absolute positioning to display that label and that has a few drawbacks, the most problematic being that if the text field is filled it overlaps with the underlying text.

Any ideas on how to solve this more elegantly?


Since they’re both icons, and you know the size of the icon, you could add padding to the editor on the right and left side and still position the icons absolutely:

atom-text-editor.your-editor {
  // assuming icons are 32px wide
  padding-left: 32px;
  padding-right: 32px;