diff --git a/src/highlights-component.coffee b/src/highlights-component.coffee index cfd42d01e..7020a93e4 100644 --- a/src/highlights-component.coffee +++ b/src/highlights-component.coffee @@ -22,9 +22,10 @@ HighlightsComponent = React.createClass highlightComponents componentDidMount: -> - insertionPoint = document.createElement('content') - insertionPoint.setAttribute('select', '.underlayer') - @getDOMNode().appendChild(insertionPoint) + if atom.config.get('editor.useShadowDOM') + 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 a217263e3..f94926c80 100644 --- a/src/lines-component.coffee +++ b/src/lines-component.coffee @@ -58,9 +58,10 @@ LinesComponent = React.createClass @renderedDecorationsByLineId = {} componentDidMount: -> - insertionPoint = document.createElement('content') - insertionPoint.setAttribute('select', '.overlayer') - @getDOMNode().appendChild(insertionPoint) + if atom.config.get('editor.useShadowDOM') + 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-element.coffee b/src/text-editor-element.coffee index 05fa8437c..b75001f8f 100644 --- a/src/text-editor-element.coffee +++ b/src/text-editor-element.coffee @@ -6,6 +6,8 @@ TextEditor = require './text-editor' TextEditorComponent = require './text-editor-component' TextEditorView = null +GlobalStylesElement = null + class TextEditorElement extends HTMLElement model: null componentDescriptor: null @@ -23,16 +25,29 @@ class TextEditorElement extends HTMLElement initializeContent: (attributes) -> @classList.add('editor') @setAttribute('tabindex', -1) - @createShadowRoot() - @stylesElement = document.createElement('atom-styles') - @stylesElement.setAttribute('context', 'atom-text-editor') - @stylesElement.initialize() - @shadowRoot.appendChild(@stylesElement) - @rootElement = document.createElement('div') - @rootElement.classList.add('editor', 'editor-colors') - @shadowRoot.appendChild(@rootElement) + if atom.config.get('editor.useShadowDOM') + @createShadowRoot() + + @stylesElement = document.createElement('atom-styles') + @stylesElement.setAttribute('context', 'atom-text-editor') + @stylesElement.initialize() + + @rootElement = document.createElement('div') + @rootElement.classList.add('editor', 'editor-colors') + + @shadowRoot.appendChild(@stylesElement) + @shadowRoot.appendChild(@rootElement) + else + unless GlobalStylesElement? + GlobalStylesElement = document.createElement('atom-styles') + GlobalStylesElement.setAttribute('context', 'atom-text-editor') + GlobalStylesElement.initialize() + document.head.appendChild(GlobalStylesElement) + + @stylesElement = GlobalStylesElement + @rootElement = this createSpacePenShim: -> TextEditorView ?= require './text-editor-view' diff --git a/src/text-editor-view.coffee b/src/text-editor-view.coffee index 89540bf9c..e84703067 100644 --- a/src/text-editor-view.coffee +++ b/src/text-editor-view.coffee @@ -76,8 +76,15 @@ class TextEditorView extends View @root = $(@element.rootElement) @scrollView = @root.find('.scroll-view') - @underlayer = $("
").appendTo(this) - @overlayer = $("
").appendTo(this) + + + if atom.config.get('editor.useShadowDOM') + @underlayer = $("
").appendTo(this) + @overlayer = $("
").appendTo(this) + else + @underlayer = @find('.highlights').addClass('underlayer') + @overlayer = @find('.lines').addClass('overlayer') + @hiddenInput = @root.find('.hidden-input') @hiddenInput.on = (args...) =>