Remove .editor class to force themes to style background via :host

The goal is to allow the editor’s styling to be overridden as follows:

atom-text-editor {
  background: black;
  color: white;
}

If we retain these classes, themes will continue to style the root
element of the editor and destroy the ability to style the editor in
this way. You would instead have to do the following:

atom-text-editor::shadow .editor {
  background: black;
  color: white;
}

This is way less intuitive and confusing for people.
This commit is contained in:
Nathan Sobo 2014-11-12 14:50:35 -07:00 committed by Ben Ogle
parent 08971562cd
commit ed6ca9cd06
3 changed files with 8 additions and 6 deletions

View File

@ -90,7 +90,10 @@ TextEditorComponent = React.createClass
style.height = scrollViewHeight if @autoHeight
className = 'editor-contents'
if useShadowDOM
className = 'editor-contents--private'
else
className = 'editor-contents'
className += ' is-focused' if focused
className += ' has-selection' if hasSelection

View File

@ -42,18 +42,17 @@ class TextEditorElement extends HTMLElement
@stylesElement.initialize()
@rootElement = document.createElement('div')
@rootElement.classList.add('shadow')
@rootElement.classList.add('editor--private')
@shadowRoot.appendChild(@stylesElement)
@shadowRoot.appendChild(@rootElement)
else
@useShadowDOM = false
@classList.add('editor', 'editor-colors')
@stylesElement = document.head.querySelector('atom-styles')
@rootElement = this
@rootElement.classList.add('editor', 'editor-colors')
createSpacePenShim: ->
TextEditorView ?= require './text-editor-view'
@__spacePenView = new TextEditorView(this)

View File

@ -2,12 +2,12 @@
@import "octicon-utf-codes";
@import "octicon-mixins";
.editor, .editor-contents {
.editor--private, .editor-contents--private {
height: 100%;
width: 100%;
}
.editor-contents {
.editor-contents--private {
width: 100%;
overflow: hidden;
cursor: text;