From c9587a8638408768ab2dfe1b1795c0b0e6f8c330 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Thu, 24 Jul 2014 12:55:00 -0700 Subject: [PATCH 1/3] Mount EditorComponent as soon as ReactEditorView is constructed ...instead of waiting for it to be attached. This makes it simpler to get shim references when using ReactEditorView for mini editors. --- src/editor-component.coffee | 9 +++++-- src/react-editor-view.coffee | 47 ++++++++++++++++++------------------ 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/editor-component.coffee b/src/editor-component.coffee index c05a88c21..543212e81 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -184,6 +184,7 @@ EditorComponent = React.createClass if @visible = @isVisible() @performInitialMeasurement() + @forceUpdate() componentWillUnmount: -> @props.parentView.trigger 'editor:will-be-removed', [@props.parentView] @@ -191,6 +192,11 @@ EditorComponent = React.createClass clearInterval(@domPollingIntervalId) @domPollingIntervalId = null + componentWillUpdate: -> + wasVisible = @visible + @visible = @isVisible() + @performInitialMeasurement() if @visible and not wasVisible + componentDidUpdate: (prevProps, prevState) -> cursorsMoved = @cursorsMoved selectionChanged = @selectionChanged @@ -206,7 +212,6 @@ EditorComponent = React.createClass @props.parentView.trigger 'selection:changed' if selectionChanged @props.parentView.trigger 'editor:display-updated' - @visible = @isVisible() if @performedInitialMeasurement @measureScrollbars() if @measuringScrollbars @measureLineHeightAndDefaultCharWidthIfNeeded(prevState) @@ -220,7 +225,6 @@ EditorComponent = React.createClass @props.editor.setVisible(true) @updatesPaused = false @performedInitialMeasurement = true - @requestUpdate() requestUpdate: -> if @updatesPaused @@ -770,6 +774,7 @@ EditorComponent = React.createClass @measureHeightAndWidth() else @performInitialMeasurement() + @forceUpdate() requestHeightAndWidthMeasurement: -> return if @heightAndWidthMeasurementRequested diff --git a/src/react-editor-view.coffee b/src/react-editor-view.coffee index d717359ba..f7eba77b7 100644 --- a/src/react-editor-view.coffee +++ b/src/react-editor-view.coffee @@ -14,39 +14,23 @@ class ReactEditorView extends View focusOnAttach: false - constructor: (editorOrParams, @props) -> + constructor: (editorOrParams, props) -> + super + if editorOrParams instanceof Editor @editor = editorOrParams else {@editor, mini, placeholderText} = editorOrParams - @props ?= {} - @props.mini = mini - @props.placeholderText = placeholderText + props ?= {} + props.mini = mini + props.placeholderText = placeholderText @editor ?= new Editor buffer: new TextBuffer softWrap: false tabLength: 2 softTabs: true - super - - getEditor: -> @editor - - getModel: -> @editor - - Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels() - Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth() - Object.defineProperty @::, 'firstRenderedScreenRow', get: -> @component.getRenderedRowRange()[0] - Object.defineProperty @::, 'lastRenderedScreenRow', get: -> @component.getRenderedRowRange()[1] - Object.defineProperty @::, 'active', get: -> @is(@getPane()?.activeView) - Object.defineProperty @::, 'isFocused', get: -> @component?.state.focused - - afterAttach: (onDom) -> - return unless onDom - return if @attached - - @attached = true - props = defaults({@editor, parentView: this}, @props) + props = defaults({@editor, parentView: this}, props) @component = React.renderComponent(EditorComponent(props), @element) node = @component.getDOMNode() @@ -71,8 +55,23 @@ class ReactEditorView extends View lines.addClass(klass) lines.length > 0 - @focus() if @focusOnAttach + getEditor: -> @editor + + getModel: -> @editor + + Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels() + Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth() + Object.defineProperty @::, 'firstRenderedScreenRow', get: -> @component.getRenderedRowRange()[0] + Object.defineProperty @::, 'lastRenderedScreenRow', get: -> @component.getRenderedRowRange()[1] + Object.defineProperty @::, 'active', get: -> @is(@getPane()?.activeView) + Object.defineProperty @::, 'isFocused', get: -> @component?.state.focused + + afterAttach: (onDom) -> + return unless onDom + return if @attached + @attached = true + @focus() if @focusOnAttach @trigger 'editor:attached', [this] scrollTop: (scrollTop) -> From c8aea97f16974bb818ddf8f05b35169a16e975ea Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Thu, 24 Jul 2014 12:55:17 -0700 Subject: [PATCH 2/3] Use ReactEditorView in SelectListView when flag is enabled --- src/select-list-view.coffee | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/select-list-view.coffee b/src/select-list-view.coffee index 686b9e043..8776b2757 100644 --- a/src/select-list-view.coffee +++ b/src/select-list-view.coffee @@ -1,5 +1,8 @@ {$, View} = require './space-pen-extensions' -EditorView = require './editor-view' +if atom.config.get('core.useReactMiniEditors') + EditorView = require './react-editor-view' +else + EditorView = require './editor-view' fuzzyFilter = require('fuzzaldrin').filter # Public: Provides a view that renders a list of items with an editor that From c1ec87c41b419696518adc5f291d4066b8e788c9 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Thu, 24 Jul 2014 12:55:47 -0700 Subject: [PATCH 3/3] Don't apply special styles React mini editors --- static/editor.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/static/editor.less b/static/editor.less index ed8d6ba84..b02ceed5f 100644 --- a/static/editor.less +++ b/static/editor.less @@ -83,6 +83,10 @@ } } } + + .placeholder-text { + color: @text-color-subtle; + } } .editor { @@ -279,7 +283,7 @@ z-index: -1; } -.editor.mini { +.editor.mini:not(.react) { height: auto; line-height: 25px;