From 5cc243ec11c921f47626dfb65f0c84cbf1863965 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Mon, 20 Oct 2014 11:49:23 -0600
Subject: [PATCH] Inject both underlayer and overlayer via shadow DOM insertion
 points

---
 src/highlights-component.coffee | 5 +++++
 src/lines-component.coffee      | 5 +++--
 src/text-editor-view.coffee     | 6 +++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/highlights-component.coffee b/src/highlights-component.coffee
index dd0749ffd..cfd42d01e 100644
--- a/src/highlights-component.coffee
+++ b/src/highlights-component.coffee
@@ -21,5 +21,10 @@ HighlightsComponent = React.createClass
 
     highlightComponents
 
+  componentDidMount: ->
+    insertionPoint = document.createElement('content')
+    insertionPoint.setAttribute('select', '.underlayer')
+    @getDOMNode().appendChild(insertionPoint)
+
   shouldComponentUpdate: (newProps) ->
     not isEqualForProperties(newProps, @props, 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth', 'scopedCharacterWidthsChangeCount')
diff --git a/src/lines-component.coffee b/src/lines-component.coffee
index f75df5bc8..a217263e3 100644
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -58,8 +58,9 @@ LinesComponent = React.createClass
     @renderedDecorationsByLineId = {}
 
   componentDidMount: ->
-    node = @getDOMNode()
-    node.appendChild(document.createElement('content'))
+    insertionPoint = document.createElement('content')
+    insertionPoint.setAttribute('select', '.overlayer')
+    @getDOMNode().appendChild(insertionPoint)
 
   shouldComponentUpdate: (newProps) ->
     return true unless isEqualForProperties(newProps, @props,
diff --git a/src/text-editor-view.coffee b/src/text-editor-view.coffee
index 1ca437b71..ff3ce6485 100644
--- a/src/text-editor-view.coffee
+++ b/src/text-editor-view.coffee
@@ -76,8 +76,8 @@ class TextEditorView extends View
     @root = $(@element.rootElement)
 
     @scrollView = @root.find('.scroll-view')
-    @underlayer = @root.find('.highlights').addClass('underlayer')
-    @overlayer = @root.find('.lines').addClass('overlayer')
+    @underlayer = $("<div class='underlayer'></div>").appendTo(this)
+    @overlayer = $("<div class='overlayer'></div>").appendTo(this)
     @hiddenInput = @root.find('.hidden-input')
 
     @subscribe atom.config.observe 'editor.showLineNumbers', =>
@@ -173,7 +173,7 @@ class TextEditorView extends View
   appendToLinesView: (view) ->
     view.css('position', 'absolute')
     view.css('z-index', 1)
-    @append(view)
+    @overlayer.append(view)
 
   unmountComponent: ->
     React.unmountComponentAtNode(@element) if @component.isMounted()