Implement text editor DOM updates manually instead of via React

spec/spec-helper.coffee

@@ -82,6 +82,7 @@ beforeEach ->
   atom.keymaps.keyBindings = _.clone(keyBindingsToRestore)
   atom.commands.restoreSnapshot(commandsToRestore)
   atom.styles.restoreSnapshot(styleElementsToRestore)
+  atom.views.clearDocumentRequests()
 
   atom.workspaceViewParentSelector = '#jasmine-content'
 

spec/text-editor-component-spec.coffee

@@ -46,7 +46,7 @@ describe "TextEditorComponent", ->
 
       lineHeightInPixels = editor.getLineHeightInPixels()
       charWidth = editor.getDefaultCharWidth()
-      componentNode = component.getDOMNode()
+      componentNode = component.domNode
       verticalScrollbarNode = componentNode.querySelector('.vertical-scrollbar')
       horizontalScrollbarNode = componentNode.querySelector('.horizontal-scrollbar')
 
@@ -193,7 +193,8 @@ describe "TextEditorComponent", ->
       expect(linesNode.style.backgroundColor).toBe backgroundColor
 
       wrapperNode.style.backgroundColor = 'rgb(255, 0, 0)'
-      advanceClock(component.domPollingInterval)
+
+      advanceClock(atom.views.documentPollingInterval)
       nextAnimationFrame()
       expect(linesNode.style.backgroundColor).toBe 'rgb(255, 0, 0)'
 
@@ -466,11 +467,6 @@ describe "TextEditorComponent", ->
         expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
 
   describe "gutter rendering", ->
-    [gutter] = []
-
-    beforeEach ->
-      {gutter} = component.refs
-
     it "renders the currently-visible line numbers", ->
       wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
       component.measureHeightAndWidth()
@@ -567,32 +563,32 @@ describe "TextEditorComponent", ->
 
       # favor gutter color if it's assigned
       gutterNode.style.backgroundColor = 'rgb(255, 0, 0)'
-      advanceClock(component.domPollingInterval)
+      advanceClock(atom.views.documentPollingInterval)
       nextAnimationFrame()
       expect(lineNumbersNode.style.backgroundColor).toBe 'rgb(255, 0, 0)'
 
     it "hides or shows the gutter based on the '::isGutterVisible' property on the model and the global 'editor.showLineNumbers' config setting", ->
-      expect(component.refs.gutter?).toBe true
+      expect(component.gutterComponent?).toBe true
 
       editor.setGutterVisible(false)
       nextAnimationFrame()
 
-      expect(component.refs.gutter?).toBe false
+      expect(componentNode.querySelector('.gutter')).toBeNull()
 
       atom.config.set("editor.showLineNumbers", false)
-      expect(nextAnimationFrame).toBe noAnimationFrame
+      nextAnimationFrame()
 
-      expect(component.refs.gutter?).toBe false
+      expect(componentNode.querySelector('.gutter')).toBeNull()
 
       editor.setGutterVisible(true)
-      expect(nextAnimationFrame).toBe noAnimationFrame
+      nextAnimationFrame()
 
-      expect(component.refs.gutter?).toBe false
+      expect(componentNode.querySelector('.gutter')).toBeNull()
 
       atom.config.set("editor.showLineNumbers", true)
       nextAnimationFrame()
 
-      expect(component.refs.gutter?).toBe true
+      expect(componentNode.querySelector('.gutter')).toBeDefined()
       expect(component.lineNumberNodeForScreenRow(3)?).toBe true
 
     describe "fold decorations", ->
@@ -706,13 +702,13 @@ describe "TextEditorComponent", ->
 
       cursorNodes = componentNode.querySelectorAll('.cursor')
       expect(cursorNodes.length).toBe 2
-      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate(#{11 * charWidth}px, #{8 * lineHeightInPixels}px)"
-      expect(cursorNodes[1].style['-webkit-transform']).toBe "translate(#{10 * charWidth}px, #{4 * lineHeightInPixels}px)"
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate(#{10 * charWidth}px, #{4 * lineHeightInPixels}px)"
+      expect(cursorNodes[1].style['-webkit-transform']).toBe "translate(#{11 * charWidth}px, #{8 * lineHeightInPixels}px)"
 
       wrapperView.on 'cursor:moved', cursorMovedListener = jasmine.createSpy('cursorMovedListener')
       cursor3.setScreenPosition([4, 11], autoscroll: false)
       nextAnimationFrame()
-      expect(cursorNodes[1].style['-webkit-transform']).toBe "translate(#{11 * charWidth}px, #{4 * lineHeightInPixels}px)"
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate(#{11 * charWidth}px, #{4 * lineHeightInPixels}px)"
       expect(cursorMovedListener).toHaveBeenCalled()
 
       cursor3.destroy()
@@ -800,11 +796,11 @@ describe "TextEditorComponent", ->
 
       expect(cursorsNode.classList.contains('blink-off')).toBe false
 
-      advanceClock(component.props.cursorBlinkPeriod / 2)
+      advanceClock(component.cursorBlinkPeriod / 2)
       nextAnimationFrame()
       expect(cursorsNode.classList.contains('blink-off')).toBe true
 
-      advanceClock(component.props.cursorBlinkPeriod / 2)
+      advanceClock(component.cursorBlinkPeriod / 2)
       nextAnimationFrame()
       expect(cursorsNode.classList.contains('blink-off')).toBe false
 
@@ -813,8 +809,8 @@ describe "TextEditorComponent", ->
       nextAnimationFrame()
       expect(cursorsNode.classList.contains('blink-off')).toBe false
 
-      advanceClock(component.props.cursorBlinkResumeDelay)
-      advanceClock(component.props.cursorBlinkPeriod / 2)
+      advanceClock(component.cursorBlinkResumeDelay)
+      advanceClock(component.cursorBlinkPeriod / 2)
       nextAnimationFrame()
       expect(cursorsNode.classList.contains('blink-off')).toBe true
 
@@ -1501,12 +1497,14 @@ describe "TextEditorComponent", ->
       expect(inputNode.offsetLeft).toBe 0
 
       # In bounds and focused
-      inputNode.focus() # updates via state change
+      wrapperNode.focus() # updates via state change
+      nextAnimationFrame()
       expect(inputNode.offsetTop).toBe (5 * lineHeightInPixels) - editor.getScrollTop()
       expect(inputNode.offsetLeft).toBe (4 * charWidth) - editor.getScrollLeft()
 
       # In bounds, not focused
       inputNode.blur() # updates via state change
+      nextAnimationFrame()
       expect(inputNode.offsetTop).toBe 0
       expect(inputNode.offsetLeft).toBe 0
 
@@ -1518,6 +1516,7 @@ describe "TextEditorComponent", ->
 
       # Out of bounds, focused
       inputNode.focus() # updates via state change
+      nextAnimationFrame()
       expect(inputNode.offsetTop).toBe 0
       expect(inputNode.offsetLeft).toBe 0
 
@@ -1839,9 +1838,11 @@ describe "TextEditorComponent", ->
     it "adds the 'is-focused' class to the editor when the hidden input is focused", ->
       expect(document.activeElement).toBe document.body
       inputNode.focus()
+      nextAnimationFrame()
       expect(componentNode.classList.contains('is-focused')).toBe true
       expect(wrapperView.hasClass('is-focused')).toBe true
       inputNode.blur()
+      nextAnimationFrame()
       expect(componentNode.classList.contains('is-focused')).toBe false
       expect(wrapperView.hasClass('is-focused')).toBe false
 
@@ -2351,11 +2352,11 @@ describe "TextEditorComponent", ->
         wrapperView.appendTo(hiddenParent)
 
         {component} = wrapperView
-        componentNode = component.getDOMNode()
+        componentNode = component.domNode
         expect(componentNode.querySelectorAll('.line').length).toBe 0
 
         hiddenParent.style.display = 'block'
-        advanceClock(component.domPollingInterval)
+        advanceClock(atom.views.documentPollingInterval)
 
         expect(componentNode.querySelectorAll('.line').length).toBeGreaterThan 0
 
@@ -2465,22 +2466,23 @@ describe "TextEditorComponent", ->
       expect(parseInt(newHeight)).toBeLessThan wrapperNode.offsetHeight
       wrapperNode.style.height = newHeight
 
-      advanceClock(component.domPollingInterval)
+      advanceClock(atom.views.documentPollingInterval)
       nextAnimationFrame()
       expect(componentNode.querySelectorAll('.line')).toHaveLength(4 + lineOverdrawMargin + 1)
 
       gutterWidth = componentNode.querySelector('.gutter').offsetWidth
       componentNode.style.width = gutterWidth + 14 * charWidth + editor.getVerticalScrollbarWidth() + 'px'
-      advanceClock(component.domPollingInterval)
-      nextAnimationFrame()
+      advanceClock(atom.views.documentPollingInterval)
+      nextAnimationFrame() # won't poll until cursor blinks
+      nextAnimationFrame() # handle update requested by poll
       expect(componentNode.querySelector('.line').textContent).toBe "var quicksort "
 
     it "accounts for the scroll view's padding when determining the wrap location", ->
       scrollViewNode = componentNode.querySelector('.scroll-view')
       scrollViewNode.style.paddingLeft = 20 + 'px'
       componentNode.style.width = 30 * charWidth + 'px'
 
-      advanceClock(component.domPollingInterval)
+      advanceClock(atom.views.documentPollingInterval)
       nextAnimationFrame()
 
       expect(component.lineNodeForScreenRow(0).textContent).toBe "var quicksort = "
@@ -2558,7 +2560,7 @@ describe "TextEditorComponent", ->
       expect(wrapperNode.classList.contains('mini')).toBe true
 
     it "does not have an opaque background on lines", ->
-      expect(component.refs.lines.getDOMNode().getAttribute('style')).not.toContain 'background-color'
+      expect(component.linesComponent.domNode.getAttribute('style')).not.toContain 'background-color'
 
     it "does not render invisible characters", ->
       atom.config.set('editor.invisibles', eol: 'E')

spec/text-editor-element-spec.coffee

@@ -46,12 +46,12 @@ describe "TextEditorElement", ->
         jasmine.attachToDOM(element)
 
         component = element.component
-        expect(component.isMounted()).toBe true
+        expect(component.mounted).toBe true
         element.remove()
-        expect(component.isMounted()).toBe false
+        expect(component.mounted).toBe false
 
         jasmine.attachToDOM(element)
-        expect(element.component.isMounted()).toBe true
+        expect(element.component.mounted).toBe true
 
     describe "when the editor.useShadowDOM config option is false", ->
       it "mounts the react component and unmounts when removed from the dom", ->
@@ -61,9 +61,9 @@ describe "TextEditorElement", ->
         jasmine.attachToDOM(element)
 
         component = element.component
-        expect(component.isMounted()).toBe true
+        expect(component.mounted).toBe true
         element.getModel().destroy()
-        expect(component.isMounted()).toBe false
+        expect(component.mounted).toBe false
 
   describe "focus and blur handling", ->
     describe "when the editor.useShadowDOM config option is true", ->

spec/text-editor-presenter-spec.coffee

@@ -323,6 +323,69 @@ describe "TextEditorPresenter", ->
           expectStateUpdate presenter, -> atom.config.set("editor.scrollPastEnd", false)
           expect(presenter.state.verticalScrollbar.scrollTop).toBe presenter.contentHeight - presenter.clientHeight
 
+    describe ".hiddenInput", ->
+      describe ".top/.left", ->
+        it "is positioned over the last cursor it is in view and the editor is focused", ->
+          editor.setCursorBufferPosition([3, 6])
+          presenter = buildPresenter(focused: false, explicitHeight: 50, contentFrameWidth: 300, horizontalScrollbarHeight: 0, verticalScrollbarWidth: 0)
+          expectValues presenter.state.hiddenInput, {top: 0, left: 0}
+
+          expectStateUpdate presenter, -> presenter.setFocused(true)
+          expectValues presenter.state.hiddenInput, {top: 3 * 10, left: 6 * 10}
+
+          expectStateUpdate presenter, -> presenter.setScrollTop(15)
+          expectValues presenter.state.hiddenInput, {top: (3 * 10) - 15, left: 6 * 10}
+
+          expectStateUpdate presenter, -> presenter.setScrollLeft(35)
+          expectValues presenter.state.hiddenInput, {top: (3 * 10) - 15, left: (6 * 10) - 35}
+
+          expectStateUpdate presenter, -> presenter.setScrollTop(40)
+          expectValues presenter.state.hiddenInput, {top: 0, left: (6 * 10) - 35}
+
+          expectStateUpdate presenter, -> presenter.setScrollLeft(70)
+          expectValues presenter.state.hiddenInput, {top: 0, left: 0}
+
+          expectStateUpdate presenter, -> editor.setCursorBufferPosition([11, 43])
+          expectValues presenter.state.hiddenInput, {top: 50 - 10, left: 300 - 10}
+
+          newCursor = null
+          expectStateUpdate presenter, -> newCursor = editor.addCursorAtBufferPosition([6, 10])
+          expectValues presenter.state.hiddenInput, {top: (6 * 10) - 40, left: (10 * 10) - 70}
+
+          expectStateUpdate presenter, -> newCursor.destroy()
+          expectValues presenter.state.hiddenInput, {top: 50 - 10, left: 300 - 10}
+
+          expectStateUpdate presenter, -> presenter.setFocused(false)
+          expectValues presenter.state.hiddenInput, {top: 0, left: 0}
+
+      describe ".height", ->
+        it "is assigned based on the line height", ->
+          presenter = buildPresenter()
+          expect(presenter.state.hiddenInput.height).toBe 10
+
+          expectStateUpdate presenter, -> presenter.setLineHeight(20)
+          expect(presenter.state.hiddenInput.height).toBe 20
+
+      describe ".width", ->
+        it "is assigned based on the width of the character following the cursor", ->
+          waitsForPromise -> atom.packages.activatePackage('language-javascript')
+
+          runs ->
+            editor.setCursorBufferPosition([3, 6])
+            presenter = buildPresenter()
+            expect(presenter.state.hiddenInput.width).toBe 10
+
+            expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(15)
+            expect(presenter.state.hiddenInput.width).toBe 15
+
+            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'storage.modifier.js'], 'r', 20)
+            expect(presenter.state.hiddenInput.width).toBe 20
+
+        it "is 2px at the end of lines", ->
+          presenter = buildPresenter()
+          editor.setCursorBufferPosition([3, Infinity])
+          expect(presenter.state.hiddenInput.width).toBe 2
+
     describe ".content", ->
       describe ".scrollingVertically", ->
         it "is true for ::stoppedScrollingDelay milliseconds following a changes to ::scrollTop", ->
@@ -1907,6 +1970,42 @@ describe "TextEditorPresenter", ->
             editor.undo()
             expect(lineNumberStateForScreenRow(presenter, 11).foldable).toBe false
 
+      describe ".visible", ->
+        it "is true iff the editor isn't mini, ::isGutterVisible is true on the editor, and 'editor.showLineNumbers' is enabled in config", ->
+          presenter = buildPresenter()
+
+          expect(editor.isGutterVisible()).toBe true
+          expect(presenter.state.gutter.visible).toBe true
+
+          expectStateUpdate presenter, -> editor.setMini(true)
+          expect(presenter.state.gutter.visible).toBe false
+
+          expectStateUpdate presenter, -> editor.setMini(false)
+          expect(presenter.state.gutter.visible).toBe true
+
+          expectStateUpdate presenter, -> editor.setGutterVisible(false)
+          expect(presenter.state.gutter.visible).toBe false
+
+          expectStateUpdate presenter, -> editor.setGutterVisible(true)
+          expect(presenter.state.gutter.visible).toBe true
+
+          expectStateUpdate presenter, -> atom.config.set('editor.showLineNumbers', false)
+          expect(presenter.state.gutter.visible).toBe false
+
+        it "updates when the editor's grammar changes", ->
+          presenter = buildPresenter()
+
+          atom.config.set('editor.showLineNumbers', false, scopeSelector: '.source.js')
+          expect(presenter.state.gutter.visible).toBe true
+          stateUpdated = false
+          presenter.onDidUpdateState -> stateUpdated = true
+
+          waitsForPromise -> atom.packages.activatePackage('language-javascript')
+
+          runs ->
+            expect(stateUpdated).toBe true
+            expect(presenter.state.gutter.visible).toBe false
+
     describe ".height", ->
       it "tracks the computed content height if ::autoHeight is true so the editor auto-expands vertically", ->
         presenter = buildPresenter(explicitHeight: null, autoHeight: true)
@@ -1924,6 +2023,15 @@ describe "TextEditorPresenter", ->
         expectStateUpdate presenter, -> editor.getBuffer().append("\n\n\n")
         expect(presenter.state.height).toBe editor.getScreenLineCount() * 20
 
+    describe ".focused", ->
+      it "tracks the value of ::focused", ->
+        presenter = buildPresenter(focused: false)
+        expect(presenter.state.focused).toBe false
+        expectStateUpdate presenter, -> presenter.setFocused(true)
+        expect(presenter.state.focused).toBe true
+        expectStateUpdate presenter, -> presenter.setFocused(false)
+        expect(presenter.state.focused).toBe false
+
   # disabled until we fix an issue with display buffer markers not updating when
   # they are moved on screen but not in the buffer
   xdescribe "when the model and view measurements are mutated randomly", ->