Use the `atom-text-editor` tag instead of the `editor` class


#1

Deprecation Cop mentions on one of the themes to use the atom-text-editor tag instead of the editor class. The issue I have is, I change .editor to just atom-text-editor and the background color works fine, but all the text is white. I simply change the class back to its regular name and everything is back to normal.

I’m not sure how to go about fixing the text color issue for myself and submitting a pull request.


#2

Try this:

atom-text-editor::shadow <selector> {
  /* rules here */
}

where <selector> should be replaced by an actual selector.


#3

Is it for a UI or a Syntax theme? If it’s a UI theme, then it should work like @olmokramer mentioned above.

If it’s a Syntax theme, this should work:

atom-text-editor, /* 1 */
:host {
  color: @syntax-text-color;
  background-color: @syntax-background-color;
}
  1. atom-text-editor can be removed once Shadow DOM can’t be disabled in the settings, but currently still better to keep it.

The difference is because UI themes get loaded outside of the text editor and Syntax themes inside the text editor. So the context changes depending of the kind of theme.


#4

Thanks guys, that helps! It’s for the Cobalt Syntax theme. I had more time to look at the style sheet and I see why the text is showing all white. It looks like it’ll need more work to fix correctly.


#5

I’m running into an issue which I reported as an issue because I believe it’s a bug. When I change the selectors from .editor either .atom-text-editor or just atom-text-editor, I can no longer highlight the text when I click and drag. I created a testing theme through Atom and confirmed it wasn’t just the theme that I was using that was causing the issue.


#6

atom-text-editor is a tag, not a class … so .atom-text-editor definitely wouldn’t work as you expect.

Also, while yes, the direct translation of .editor is to atom-text-editor, that is almost never sufficient. And what else you put after the atom-text-editor selector is highly dependent on the situation. See this for details:

https://atom.io/docs/latest/upgrading/upgrading-your-ui-theme


#7

Hi Leedohm, I read the document, but I’m still confused. For example if I’m going to change a syntax theme from the following “old code”

.editor {
  background-color: @syntax-background-color;
  color: @syntax-text-color;
}

The new code would be?

atom-text-editor {
  background-color: @syntax-background-color;
  color: @syntax-text-color;
}

Correct me if I’m wrong.


#8

If you’re changing a syntax theme, then you should follow the advice in this document:

https://atom.io/docs/latest/upgrading/upgrading-your-syntax-theme


#9

Hi Leedohm,

Ok, that fixes the deprecated host selector error message and I can still highlight the text. But I’m still getting the “Use the atom-text-editor tag instead of the editor class.” for the theme.


#10

Can you be more specific? Is this a syntax theme or UI theme? Can you include a screenshot of the exact error message you’re getting?


#11

It’s a syntax theme. Here’s a screen shot of the error that shows up; I highlighted the error in green. Edit: I created a default theme in Atom using package generator.


#12

and here’s a screen shot of the code which shows the code change in the theme with just :host.


#13

Have you closed Atom and restarted it since you made the change? The Deprecation Cop view retains any deprecations that are raised until you click the Refresh button or restart Atom.

You also don’t need :host twice. .editor, :host is sufficient on both lines 3 and 8.


#14

Yeah I’ve restarted Atom by doing reload and also closing it out and opening it up again. Not sure why host ended up twice in those lines.


#15

Well, the deprecation message is probably because of the .editor portion of the lines. Leave it there for now until the Shadow DOM gets turned on permanently.


#16

Ok. Thanks for looking into it!


#17

Does it work if you replace (the green marked part)

.editor, :host, :host  {
  background-color: @syntax-background-color;
  color: @syntax-text-color;
}
.editor, :host, :host {
  background-color: @syntax-background-color;
  color: @syntax-text-color;

with this:

atom-text-editor, // <- remove when Shadow DOM can't be disabled
:host {
  background-color: @syntax-background-color;
  color: @syntax-text-color;

I remember seeing the same message and changing it like that seemed to satisfy the deprecation cop.


#18

Hi Simurai,

I did that before and it gets the deprecation off my case (pun intended), but for some reason, I can no longer click-n-drag to highlight text.

Edit: Also Leedohm told me not to do it like that because it’s incorrect syntax. I know that much too, but the Atom’s Cop complains about it if it has a period in front.


#19

Hmm… the “click-n-drag to highlight text” is probably the selection. I can’t remember the old selector, but I think it used to be just .selection. Now there is an extra element and the new selector is now .selection .region.

So if you find somewhere in your style sheet this:

.selection {
    background-color: @syntax-selection-color;
}

try to change it to this:

.selection .region {
    background-color: @syntax-selection-color;
}

#20

.selection .region is already there. I produced the theme through Atom’s theme creator which made a default theme.