Use ‘atom-text-editor’ custom tag name for TextEditorElement

docs/advanced/keymaps.md

@@ -6,25 +6,25 @@ Keymap files are encoded as JSON or CSON files containing nested hashes. They
 work much like stylesheets, but instead of applying style properties to elements
 matching the selector, they specify the meaning of keystrokes on elements
 matching the selector. Here is an example of some bindings that apply when
-keystrokes pass through elements with the class `.editor`:
+keystrokes pass through `atom-text-editor` elements:
 
 ```coffee
-'.editor':
+'atom-text-editor':
   'cmd-delete': 'editor:delete-to-beginning-of-line'
   'alt-backspace': 'editor:delete-to-beginning-of-word'
   'ctrl-A': 'editor:select-to-first-character-of-line'
   'ctrl-shift-e': 'editor:select-to-end-of-line'
   'cmd-left': 'editor:move-to-first-character-of-line'
 
-'.editor:not(.mini)'
+'atom-text-editor:not(.mini)'
   'cmd-alt-[': 'editor:fold-current-row'
   'cmd-alt-]': 'editor:unfold-current-row'
 ```
 
 Beneath the first selector are several bindings, mapping specific *keystroke
-patterns* to *commands*. When an element with the `.editor` class is focused and
+patterns* to *commands*. When an element with the `atom-text-editor` class is focused and
 `cmd-delete` is pressed, an custom DOM event called
-`editor:delete-to-beginning-of-line` is emitted on the `.editor` element.
+`editor:delete-to-beginning-of-line` is emitted on the `atom-text-editor` element.
 
 The second selector group also targets editors, but only if they don't have the
 `.mini` class. In this example, the commands for code folding don't really make
@@ -91,7 +91,7 @@ the current keystroke sequence and continue searching from its parent. If you
 want to remove a binding from a keymap you don't control, such as keymaps in
 Atom core or in packages, use the `unset!` directive.
 
-For example, the following code removes the keybinding for `a` in the Tree View, 
+For example, the following code removes the keybinding for `a` in the Tree View,
 which is normally used to trigger the `tree-view:add-file` command:
 
 ```coffee

docs/advanced/view-system.md

@@ -11,7 +11,7 @@ have methods that are view-specific. For example, you could call both general
 and view-specific on the global `atom.workspaceView` instance:
 
 ```coffeescript
-atom.workspaceView.find('.editor.active') # standard jQuery method
+atom.workspaceView.find('atom-text-editor.active') # standard jQuery method
 atom.workspaceView.getActiveEditor()      # view-specific method
 ```
 
@@ -20,7 +20,7 @@ If you retrieve a jQuery wrapper for an element associated with a view, use the
 
 ```coffeescript
 # this is a plain jQuery object; you can't call view-specific methods
-editorElement = atom.workspaceView.find('.editor.active')
+editorElement = atom.workspaceView.find('atom-text-editor.active')
 
 # get the view object by calling `.view()` to call view-specific methods
 editorView = editorElement.view()

docs/customizing-atom.md

@@ -60,10 +60,10 @@ with events in specific contexts. Here's a small example, excerpted from Atom's
 built-in keymaps:
 
 ```coffee
-'.editor':
+'atom-text-editor':
   'enter': 'editor:newline'
 
-'.mini.editor input':
+'atom-text-editor.mini input':
   'enter': 'core:confirm'
 ```
 
@@ -169,7 +169,7 @@ For example, to change the color of the cursor, you could add the following
 rule to your _~/.atom/styles.less_ file:
 
 ```less
-.editor.is-focused .cursor {
+atom-text-editor.is-focused .cursor {
   border-color: pink;
 }
 ```

docs/your-first-package.md

@@ -91,13 +91,13 @@ _keymaps/ascii-art.cson_ and add a key binding linking `ctrl-alt-a` to the
 you don't need it anymore. When finished, the file will look like this:
 
 ```coffeescript
-'.editor':
+'atom-text-editor':
   'cmd-alt-a': 'ascii-art:convert'
 ```
 
-Notice `.editor` on the first line. Just like CSS, keymap selectors *scope* key
+Notice `atom-text-editor` on the first line. Just like CSS, keymap selectors *scope* key
 bindings so they only apply to specific elements. In this case, our binding is
-only active for elements matching the `.editor` selector. If the Tree View has
+only active for elements matching the `atom-text-editor` selector. If the Tree View has
 focus, pressing `cmd-alt-a` won't trigger the `ascii-art:convert` command. But
 if the editor has focus, the `ascii-art:convert` method *will* be triggered.
 More information on key bindings can be found in the

dot-atom/keymap.cson

@@ -9,7 +9,7 @@
 #
 # Here's an example taken from Atom's built-in keymap:
 #
-# '.editor':
+# 'atom-text-editor':
 #   'enter': 'editor:newline'
 #
 # '.workspace':

dot-atom/styles.less

@@ -12,10 +12,10 @@
 
 }
 
-.editor {
+atom-text-editor {
 
 }
 
-.editor .cursor {
+atom-text-editor .cursor {
 
 }

keymaps/base.cson

@@ -1,11 +1,11 @@
-'.editor':
+'atom-text-editor':
   # Platform Bindings
   'home': 'editor:move-to-first-character-of-line'
   'end': 'editor:move-to-end-of-screen-line'
   'shift-home': 'editor:select-to-first-character-of-line'
   'shift-end': 'editor:select-to-end-of-line'
 
-'.editor:not(.mini)':
+'atom-text-editor:not(.mini)':
   # Atom Specific
   'ctrl-C': 'editor:copy-path'
 
@@ -18,7 +18,7 @@
 '.tool-panel.panel-left, .tool-panel.panel-right':
   'escape': 'tool-panel:unfocus'
 
-'.editor !important, .editor.mini !important':
+'atom-text-editor !important, atom-text-editor.mini !important':
   'escape': 'editor:consolidate-selections'
 
 # allow standard input fields to work correctly

keymaps/darwin.cson

@@ -100,7 +100,7 @@
   'cmd-8': 'pane:show-item-8'
   'cmd-9': 'pane:show-item-9'
 
-'.editor':
+'atom-text-editor':
   # Platform Bindings
   'alt-left': 'editor:move-to-beginning-of-word'
   'alt-right': 'editor:move-to-end-of-word'
@@ -134,7 +134,7 @@
   'cmd-l': 'editor:select-line'
   'ctrl-t': 'editor:transpose'
 
-'atom-workspace .editor:not(.mini)':
+'atom-workspace atom-text-editor:not(.mini)':
   # Atom specific
   'alt-cmd-z': 'editor:checkout-head-revision'
   'cmd-<': 'editor:scroll-to-cursor'

keymaps/emacs.cson

@@ -1,4 +1,4 @@
-'.editor':
+'atom-text-editor':
   'alt-f': 'editor:move-to-end-of-word'
   'alt-F': 'editor:select-to-end-of-word'
   'alt-b': 'editor:move-to-beginning-of-word'

keymaps/linux.cson

@@ -79,7 +79,7 @@
   'alt-8': 'pane:show-item-8'
   'alt-9': 'pane:show-item-9'
 
-'atom-workspace .editor':
+'atom-workspace atom-text-editor':
   # Platform Bindings
   'ctrl-left': 'editor:move-to-beginning-of-word'
   'ctrl-right': 'editor:move-to-end-of-word'
@@ -99,7 +99,7 @@
   'ctrl-k ctrl-l': 'editor:lower-case'
   'ctrl-l': 'editor:select-line'
 
-'atom-workspace .editor:not(.mini)':
+'atom-workspace atom-text-editor:not(.mini)':
   # Atom specific
   'alt-ctrl-z': 'editor:checkout-head-revision'
   'ctrl-<': 'editor:scroll-to-cursor'

keymaps/win32.cson

@@ -74,7 +74,7 @@
   'ctrl-k ctrl-left':  'window:focus-pane-on-left'
   'ctrl-k ctrl-right': 'window:focus-pane-on-right'
 
-'atom-workspace .editor':
+'atom-workspace atom-text-editor':
   # Platform Bindings
   'ctrl-left': 'editor:move-to-beginning-of-word'
   'ctrl-right': 'editor:move-to-end-of-word'
@@ -94,7 +94,7 @@
   'ctrl-k ctrl-l': 'editor:lower-case'
   'ctrl-l': 'editor:select-line'
 
-'atom-workspace .editor:not(.mini)':
+'atom-workspace atom-text-editor:not(.mini)':
   # Atom specific
   'alt-ctrl-z': 'editor:checkout-head-revision'
   'ctrl-<': 'editor:scroll-to-cursor'

spec/fixtures/packages/theme-with-incomplete-ui-variables/stylesheets/editor.less

@@ -1,6 +1,6 @@
 @import "ui-variables";
 
-.editor {
+atom-text-editor {
   padding-top: @component-padding;
   padding-right: @component-padding;
   padding-bottom: @component-padding;

spec/fixtures/packages/theme-with-index-css/index.css

@@ -1,3 +1,3 @@
-.editor {
+atom-text-editor {
   padding-top: 1234px;
 }

spec/fixtures/packages/theme-with-index-less/index.less

@@ -1,5 +1,5 @@
 @padding: 4321px;
 
-.editor {
+atom-text-editor {
   padding-top: @padding;
 }

spec/fixtures/packages/theme-with-package-file/stylesheets/first.css

@@ -1,4 +1,4 @@
-.editor {
+atom-text-editor {
   padding-top: 101px;
   padding-right: 101px;
   padding-bottom: 101px;

spec/fixtures/packages/theme-with-package-file/stylesheets/last.css

@@ -1,4 +1,4 @@
-.editor {
+atom-text-editor {
 /*  padding-top: 103px;
   padding-right: 103px;*/
   padding-bottom: 103px;

spec/fixtures/packages/theme-with-package-file/stylesheets/second.less

@@ -1,6 +1,6 @@
 @number: 102px;
 
-.editor {
+atom-text-editor {
 /*  padding-top: 102px;*/
   padding-right: @number;
   padding-bottom: @number;

spec/fixtures/packages/theme-with-ui-variables/stylesheets/editor.less

@@ -1,6 +1,6 @@
 @import "ui-variables";
 
-.editor {
+atom-text-editor {
   padding-top: @component-padding;
   padding-right: @component-padding;
   padding-bottom: @component-padding;

spec/fixtures/packages/theme-without-package-file/stylesheets/a.css

@@ -1,4 +1,4 @@
-.editor {
+atom-text-editor {
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;

spec/fixtures/packages/theme-without-package-file/stylesheets/b.css

@@ -1,4 +1,4 @@
-.editor {
+atom-text-editor {
   padding-right: 20px;
   padding-bottom: 20px;
 }

spec/fixtures/packages/theme-without-package-file/stylesheets/c.less

@@ -1,5 +1,5 @@
 @number: 30px;
 
-.editor {
+atom-text-editor {
   padding-bottom: @number;
 }

spec/fixtures/packages/theme-without-package-file/stylesheets/d.csv

@@ -1,4 +1,4 @@
-.editor {
+atom-text-editor {
   padding-top: 100px;
   padding-right: 100px;
   padding-bottom: 100px;

spec/package-manager-spec.coffee

@@ -138,7 +138,7 @@ describe "PackageManager", ->
               legacyCommandListener = jasmine.createSpy("legacyCommandListener")
               editorView.command 'activation-command', legacyCommandListener
               editorCommandListener = jasmine.createSpy("editorCommandListener")
-              atom.commands.add '.editor', 'activation-command', editorCommandListener
+              atom.commands.add 'atom-text-editor', 'activation-command', editorCommandListener
               editorView[0].dispatchEvent(new CustomEvent('activation-command', bubbles: true))
               expect(mainModule.activate.callCount).toBe 1
               expect(mainModule.legacyActivationCommandCallCount).toBe 1

spec/package-spec.coffee

@@ -38,51 +38,51 @@ describe "Package", ->
     theme = null
 
     beforeEach ->
-      $("#jasmine-content").append $("<div class='editor'></div>")
+      $("#jasmine-content").append $("<atom-text-editor></atom-text-editor>")
 
     afterEach ->
       theme.deactivate() if theme?
 
     describe "when the theme contains a single style file", ->
       it "loads and applies css", ->
-        expect($(".editor").css("padding-bottom")).not.toBe "1234px"
+        expect($("atom-text-editor").css("padding-bottom")).not.toBe "1234px"
         themePath = atom.project.resolve('packages/theme-with-index-css')
         theme = new ThemePackage(themePath)
         theme.activate()
-        expect($(".editor").css("padding-top")).toBe "1234px"
+        expect($("atom-text-editor").css("padding-top")).toBe "1234px"
 
       it "parses, loads and applies less", ->
-        expect($(".editor").css("padding-bottom")).not.toBe "1234px"
+        expect($("atom-text-editor").css("padding-bottom")).not.toBe "1234px"
         themePath = atom.project.resolve('packages/theme-with-index-less')
         theme = new ThemePackage(themePath)
         theme.activate()
-        expect($(".editor").css("padding-top")).toBe "4321px"
+        expect($("atom-text-editor").css("padding-top")).toBe "4321px"
 
     describe "when the theme contains a package.json file", ->
       it "loads and applies stylesheets from package.json in the correct order", ->
-        expect($(".editor").css("padding-top")).not.toBe("101px")
-        expect($(".editor").css("padding-right")).not.toBe("102px")
-        expect($(".editor").css("padding-bottom")).not.toBe("103px")
+        expect($("atom-text-editor").css("padding-top")).not.toBe("101px")
+        expect($("atom-text-editor").css("padding-right")).not.toBe("102px")
+        expect($("atom-text-editor").css("padding-bottom")).not.toBe("103px")
 
         themePath = atom.project.resolve('packages/theme-with-package-file')
         theme = new ThemePackage(themePath)
         theme.activate()
-        expect($(".editor").css("padding-top")).toBe("101px")
-        expect($(".editor").css("padding-right")).toBe("102px")
-        expect($(".editor").css("padding-bottom")).toBe("103px")
+        expect($("atom-text-editor").css("padding-top")).toBe("101px")
+        expect($("atom-text-editor").css("padding-right")).toBe("102px")
+        expect($("atom-text-editor").css("padding-bottom")).toBe("103px")
 
     describe "when the theme does not contain a package.json file and is a directory", ->
       it "loads all stylesheet files in the directory", ->
-        expect($(".editor").css("padding-top")).not.toBe "10px"
-        expect($(".editor").css("padding-right")).not.toBe "20px"
-        expect($(".editor").css("padding-bottom")).not.toBe "30px"
+        expect($("atom-text-editor").css("padding-top")).not.toBe "10px"
+        expect($("atom-text-editor").css("padding-right")).not.toBe "20px"
+        expect($("atom-text-editor").css("padding-bottom")).not.toBe "30px"
 
         themePath = atom.project.resolve('packages/theme-without-package-file')
         theme = new ThemePackage(themePath)
         theme.activate()
-        expect($(".editor").css("padding-top")).toBe "10px"
-        expect($(".editor").css("padding-right")).toBe "20px"
-        expect($(".editor").css("padding-bottom")).toBe "30px"
+        expect($("atom-text-editor").css("padding-top")).toBe "10px"
+        expect($("atom-text-editor").css("padding-right")).toBe "20px"
+        expect($("atom-text-editor").css("padding-bottom")).toBe "30px"
 
     describe "reloading a theme", ->
       beforeEach ->

spec/pane-view-spec.coffee

@@ -131,9 +131,9 @@ describe "PaneView", ->
     describe "when the destroyed item is a model", ->
       it "removes the associated view", ->
         paneModel.activateItem(editor1)
-        expect(pane.itemViews.find('.editor').length).toBe 1
+        expect(pane.itemViews.find('atom-text-editor').length).toBe 1
         pane.destroyItem(editor1)
-        expect(pane.itemViews.find('.editor').length).toBe 0
+        expect(pane.itemViews.find('atom-text-editor').length).toBe 0
 
   describe "when an item is moved within the same pane", ->
     it "emits a 'pane:item-moved' event with the item and the new index", ->

spec/text-editor-element-spec.coffee

@@ -10,12 +10,12 @@ describe "TextEditorElement", ->
 
   describe "instantiation", ->
     it "honors the mini attribute", ->
-      jasmineContent.innerHTML = "<div is='atom-text-editor' mini>"
+      jasmineContent.innerHTML = "<atom-text-editor mini>"
       element = jasmineContent.firstChild
       expect(element.getModel().isMini()).toBe true
 
     it "honors the placeholder-text attribute", ->
-      jasmineContent.innerHTML = "<div is='atom-text-editor' placeholder-text='testing'>"
+      jasmineContent.innerHTML = "<atom-text-editor placeholder-text='testing'>"
       element = jasmineContent.firstChild
       expect(element.getModel().getPlaceholderText()).toBe 'testing'
 

spec/theme-manager-spec.coffee

@@ -209,7 +209,7 @@ describe "ThemeManager", ->
   describe "base stylesheet loading", ->
     beforeEach ->
       atom.workspaceView = atom.workspace.getView(atom.workspace).__spacePenView
-      atom.workspaceView.append $$ -> @div class: 'editor'
+      atom.workspaceView.append $('<atom-text-editor>')
       atom.workspaceView.attachToDom()
 
       waitsForPromise ->
@@ -227,9 +227,9 @@ describe "ThemeManager", ->
         expect(atom.workspaceView.css("background-color")).toBe "rgb(0, 0, 255)"
 
         # from within the theme itself
-        expect($(".editor").css("padding-top")).toBe "150px"
-        expect($(".editor").css("padding-right")).toBe "150px"
-        expect($(".editor").css("padding-bottom")).toBe "150px"
+        expect($("atom-text-editor").css("padding-top")).toBe "150px"
+        expect($("atom-text-editor").css("padding-right")).toBe "150px"
+        expect($("atom-text-editor").css("padding-bottom")).toBe "150px"
 
     describe "when there is a theme with incomplete variables", ->
       it "loads the correct values from the fallback ui-variables", ->
@@ -244,7 +244,7 @@ describe "ThemeManager", ->
           expect(atom.workspaceView.css("background-color")).toBe "rgb(0, 0, 255)"
 
           # from within the theme itself
-          expect($(".editor").css("background-color")).toBe "rgb(0, 152, 255)"
+          expect($("atom-text-editor").css("background-color")).toBe "rgb(0, 152, 255)"
 
     describe "theme classes on the workspace", ->
       it 'adds theme-* classes to the workspace for each active theme', ->

spec/window-spec.coffee

@@ -114,7 +114,7 @@ describe "Window", ->
         buffer = atom.workspace.getActivePaneItem().buffer
         pane = atom.workspaceView.getActivePaneView()
         pane.splitRight(pane.copyActiveItem())
-        expect(atom.workspaceView.find('.editor').length).toBe 2
+        expect(atom.workspaceView.find('atom-text-editor').length).toBe 2
 
         atom.removeEditorWindow()
 

spec/workspace-view-spec.coffee

@@ -82,10 +82,10 @@ describe "WorkspaceView", ->
           simulateReload()
 
           expect(atom.workspaceView.getEditorViews().length).toBe 4
-          editorView1 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane .editor:eq(0)').view()
-          editorView3 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane .editor:eq(1)').view()
-          editorView2 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane .editor:eq(0)').view()
-          editorView4 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane .editor:eq(1)').view()
+          editorView1 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane atom-text-editor:eq(0)').view()
+          editorView3 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane atom-text-editor:eq(1)').view()
+          editorView2 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane atom-text-editor:eq(0)').view()
+          editorView4 = atom.workspaceView.panes.find('atom-pane-axis.horizontal > atom-pane-axis.vertical > atom-pane atom-text-editor:eq(1)').view()
 
           expect(editorView1.getEditor().getPath()).toBe atom.project.resolve('a')
           expect(editorView2.getEditor().getPath()).toBe atom.project.resolve('b')
@@ -248,8 +248,8 @@ describe "WorkspaceView", ->
 
     beforeEach ->
       atom.workspaceView.attachToDom()
-      editorNode = atom.workspaceView.find('.editor')[0]
-      editor = atom.workspaceView.find('.editor').view().getEditor()
+      editorNode = atom.workspaceView.find('atom-text-editor')[0]
+      editor = atom.workspaceView.find('atom-text-editor').view().getEditor()
 
     it "updates the font-size based on the 'editor.fontSize' config value", ->
       initialCharWidth = editor.getDefaultCharWidth()

src/command-registry.coffee

@@ -35,7 +35,7 @@ module.exports =
 # Here is a command that inserts the current date in an editor:
 #
 # ```coffee
-# atom.commands.add '.editor',
+# atom.commands.add 'atom-text-editor',
 #   'user:insert-date': (event) ->
 #     editor = $(this).view().getModel()
 #     # soon the above above line will be:

src/context-menu-manager.coffee

@@ -43,7 +43,7 @@ class ContextMenuManager
   # ```coffee
   # atom.contextMenu.add {
   #   'atom-workspace': [{label: 'Help', command: 'application:open-documentation'}]
-  #   '.editor':    [{
+  #   'atom-text-editor': [{
   #     label: 'History',
   #     submenu: [
   #       {label: 'Undo': command:'core:undo'}

src/menu-manager.coffee

@@ -63,7 +63,7 @@ class MenuManager
       # Selector isn't valid
       return false
 
-    # Simulate an .editor element attached to a atom-workspace element attached
+    # Simulate an atom-text-editor element attached to a atom-workspace element attached
     # to a body element that has the same classes as the current body element.
     unless @testEditor?
       testBody = document.createElement('body')

src/text-editor-element.coffee

@@ -99,7 +99,7 @@ stopCommandEventPropagation = (commandListeners) ->
         commandListener.call(this, event)
   newCommandListeners
 
-atom.commands.add '[is=atom-text-editor]', stopCommandEventPropagation(
+atom.commands.add 'atom-text-editor', stopCommandEventPropagation(
   'core:move-left': -> @getModel().moveLeft()
   'core:move-right': -> @getModel().moveRight()
   'core:select-left': -> @getModel().selectLeft()
@@ -149,7 +149,7 @@ atom.commands.add '[is=atom-text-editor]', stopCommandEventPropagation(
   'editor:lower-case': -> @getModel().lowerCase()
 )
 
-atom.commands.add '[is=atom-text-editor]:not(.mini)', stopCommandEventPropagation(
+atom.commands.add 'atom-text-editor:not(.mini)', stopCommandEventPropagation(
   'core:move-up': -> @getModel().moveUp()
   'core:move-down': -> @getModel().moveDown()
   'core:move-to-top': -> @getModel().moveToTop()
@@ -201,6 +201,4 @@ atom.commands.add '[is=atom-text-editor]:not(.mini)', stopCommandEventPropagatio
   'editor:scroll-to-cursor': -> @getModel().scrollToCursorPosition()
 )
 
-module.exports = TextEditorElement = document.registerElement 'atom-text-editor',
-  prototype: TextEditorElement.prototype
-  extends: 'div'
+module.exports = TextEditorElement = document.registerElement 'atom-text-editor', prototype: TextEditorElement.prototype

src/theme-manager.coffee

@@ -361,7 +361,7 @@ class ThemeManager
 
   updateGlobalEditorStyle: (property, value) ->
     unless styleNode = @stylesheetElementForId('global-editor-styles')
-      @applyStylesheet('global-editor-styles', '.editor {}')
+      @applyStylesheet('global-editor-styles', 'atom-text-editor {}')
       styleNode = @stylesheetElementForId('global-editor-styles')
 
     {sheet} = styleNode

src/workspace-view.coffee

@@ -234,7 +234,7 @@ class WorkspaceView extends View
   #
   # Returns an {Array} of {TextEditorView}s.
   getEditorViews: ->
-    for editorElement in @panes.element.querySelectorAll('atom-pane > .item-views > .editor')
+    for editorElement in @panes.element.querySelectorAll('atom-pane > .item-views > atom-text-editor')
       $(editorElement).view()
 
 

static/editor.less

@@ -2,7 +2,7 @@
 @import "octicon-utf-codes";
 @import "octicon-mixins";
 
-.editor.react {
+atom-text-editor.react {
   .editor-contents {
     width: 100%;
   }
@@ -85,7 +85,7 @@
   }
 }
 
-.editor.mini {
+atom-text-editor.mini {
   font-size: @input-font-size;
   line-height: @component-line-height;
   max-height: @component-line-height + 2; // +2 for borders
@@ -96,13 +96,13 @@
   }
 }
 
-.editor {
+atom-text-editor {
   z-index: 0;
   font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier;
   line-height: 1.3;
 }
 
-.editor, .editor-contents {
+atom-text-editor, .editor-contents {
   overflow: hidden;
   cursor: text;
   display: -webkit-flex;
@@ -110,11 +110,11 @@
   position: relative;
 }
 
-.editor .gutter .line-number.cursor-line {
+atom-text-editor .gutter .line-number.cursor-line {
   opacity: 1;
 }
 
-.editor .gutter {
+atom-text-editor .gutter {
   overflow: hidden;
   text-align: right;
   cursor: default;
@@ -122,20 +122,20 @@
   box-sizing: border-box;
 }
 
-.editor .gutter .line-number {
+atom-text-editor .gutter .line-number {
   padding-left: .5em;
   opacity: 0.6;
 }
 
-.editor .gutter .line-numbers {
+atom-text-editor .gutter .line-numbers {
   position: relative;
 }
 
-.editor .gutter .line-number.folded.cursor-line {
+atom-text-editor .gutter .line-number.folded.cursor-line {
   opacity: 1;
 }
 
-.editor .gutter .line-number .icon-right {
+atom-text-editor .gutter .line-number .icon-right {
   .octicon(chevron-down, 0.8em);
   display: inline-block;
   visibility: hidden;
@@ -144,7 +144,7 @@
   opacity: .6;
 }
 
-.editor .gutter:hover .line-number.foldable .icon-right {
+atom-text-editor .gutter:hover .line-number.foldable .icon-right {
   visibility: visible;
 
   &:before {
@@ -156,7 +156,7 @@
   }
 }
 
-.editor .gutter, .editor .gutter:hover {
+atom-text-editor .gutter, atom-text-editor .gutter:hover {
   .line-number.folded .icon-right {
     .octicon(chevron-right, 0.8em);
     visibility: visible;
@@ -169,40 +169,40 @@
   }
 }
 
-.editor .fold-marker {
+atom-text-editor .fold-marker {
   cursor: default;
 }
 
-.editor .fold-marker:after {
+atom-text-editor .fold-marker:after {
   .icon(0.8em, inline);
   content: @ellipsis;
   padding-left: 0.2em;
 }
 
-.editor .line.cursor-line .fold-marker:after {
+atom-text-editor .line.cursor-line .fold-marker:after {
   opacity: 1;
 }
 
-.editor.is-blurred .line.cursor-line {
+atom-text-editor.is-blurred .line.cursor-line {
   background: rgba(0, 0, 0, 0);
 }
 
-.editor .invisible-character {
+atom-text-editor .invisible-character {
   font-weight: normal !important;
   font-style: normal !important;
 }
 
-.editor .indent-guide {
+atom-text-editor .indent-guide {
   display: inline-block;
   box-shadow: inset 1px 0;
 }
 
-.editor .vertical-scrollbar,
-.editor .horizontal-scrollbar {
+atom-text-editor .vertical-scrollbar,
+atom-text-editor .horizontal-scrollbar {
   cursor: default;
 }
 
-.editor .vertical-scrollbar {
+atom-text-editor .vertical-scrollbar {
   position: absolute;
   top: 0;
   right: 0;
@@ -213,7 +213,7 @@
   z-index: 3;
 }
 
-.editor .scroll-view {
+atom-text-editor .scroll-view {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-flex: 1;
@@ -221,45 +221,45 @@
   position: relative;
 }
 
-.editor.soft-wrap .scroll-view {
+atom-text-editor.soft-wrap .scroll-view {
   overflow-x: hidden;
 }
 
-.editor .underlayer {
+atom-text-editor .underlayer {
   z-index: 0;
   position: absolute;
   min-height: 100%;
 }
 
-.editor .lines {
+atom-text-editor .lines {
   position: relative;
   z-index: 1;
 }
 
-.editor .overlayer {
+atom-text-editor .overlayer {
   z-index: 2;
   position: absolute;
 }
 
-.editor .line {
+atom-text-editor .line {
   white-space: pre;
 }
 
-.editor .line span {
+atom-text-editor .line span {
   vertical-align: top;
 }
 
-.editor .cursor {
+atom-text-editor .cursor {
   position: absolute;
   border-left: 1px solid;
 }
 
-.editor .cursor,
-.editor.is-focused .cursor.blink-off {
+atom-text-editor .cursor,
+atom-text-editor.is-focused .cursor.blink-off {
   visibility: hidden;
 }
 
-.editor.is-focused .cursor {
+atom-text-editor.is-focused .cursor {
   visibility: visible;
 }
 
@@ -267,7 +267,7 @@
   display: none;
 }
 
-.editor .hidden-input {
+atom-text-editor .hidden-input {
   padding: 0;
   border: 0;
   position: absolute;
@@ -278,19 +278,19 @@
   width: 1px;
 }
 
-.editor .highlight {
+atom-text-editor .highlight {
   background: none;
   padding: 0;
 }
 
-.editor .highlight .region,
-.editor .selection .region {
+atom-text-editor .highlight .region,
+atom-text-editor .selection .region {
   position: absolute;
   pointer-events: none;
   z-index: -1;
 }
 
-.editor.mini:not(.react) {
+atom-text-editor.mini:not(.react) {
   height: auto;
   line-height: 25px;
 

static/overlay.less

@@ -23,7 +23,7 @@
   }
 }
 
-.overlay .editor.mini {
+.overlay atom-text-editor.mini {
   margin-bottom: 10px;
 }
 

static/panes.less

@@ -38,7 +38,7 @@ atom-pane-container {
         background-color: @pane-item-background-color;
       }
 
-      > *, > .editor.react > * {
+      > *, > atom-text-editor.react > * {
         position: absolute;
         top: 0;
         right: 0;

static/syntax.less

@@ -1,6 +1,6 @@
 @import "syntax-variables";
 
-.editor {
+atom-text-editor {
   .lines {
     .markup {
       &.git-commit {
@@ -28,7 +28,7 @@
   to { background-color: null; }
 }
 
-.editor .flash.selection .region {
+atom-text-editor .flash.selection .region {
   -webkit-animation-name: flash;
   -webkit-animation-duration: .5s;
   -webkit-animation-iteration-count: 1;