Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-09-04 19:54:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(editor-region): Add support to register components as editors

Browse source 
Summary:
- The main purpose of this is to be able to properly register the editor for the markdown plugin (and any other plugins to come)

- Refactors ComposerView and Contenteditable ->
  - Replaces Contenteditable with an InjectedComponent for a new region role:
    "Composer:Editor"
  - Creates a new component called ComposerEditor, which is the one that is
    being registered by default as "Composer:Editor"
  - I used this class to try to standardize the props that should be
    passed to any would be editor Component:
    - Renamed a bunch of the props which (I think) had a bit of
      confusing names
    - Added a bunch of docs for these in the source file, although
      I feel like those docs should live elsewhere, like in the
      ComponentRegion docs.
  - In the process, I ended up pulling some stuff out of ComposerView and
    some stuff out of the Contenteditable, namely:
    - The scrolling logic to ensure that the composer is visible while
      typing was moved outside of the Contenteditable -- this feels more
      like the ComposerEditor's responsibility, especially since the
      Contenteditable is meant to be used in other contexts as well.
    - The ComposerExtensions state; it feels less awkward for me if this
      is inside the ComposerEditor because 1) ComposerView does less
      things, 2) these are actually just being passed to the
      Contenteditable, 3) I feel like other plugins shouldn't need to
      mess around with ComposerExtensions, so we shouldn't pass them to the
      editor. If you register an editor different from our default one,
      any other ComposerExtension callbacks will be disabled, which
      I feel is expected behavior.
  - I think there is still some more refactoring to be done, and I left some TODOS
    here and there, but I think this diff is already big enough and its a minimal
    set of changes to get the markdown editor working in a not so duck
    tapish way.
- New props for InjectedComponent:
  - `requiredMethods`: allows you to define a collection of methods that
    should be implemented by any Component that registers for your
    desired region.
    - It will throw an error if these are not implemented
    - It will automatically pass calls made on the InjectedComponent to these methods
      down to the instance of the actual registered component
    - Would love some comments on this approach and impl
  - `fallback`: allows you to define a default component to use if none were
    registered through the ComponentRegistry
- Misc:
  - Added a new test case for the QuotedHTMLTransformer
- Tests:
  - They were minimally updated so that they don't break, but a big TODO
    is to properly refactor them. I plan to do that in an upcoming
    diff.

Test Plan: - Unit tests

Reviewers: bengotow, evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D2372
This commit is contained in:
Juan Tejada 2015-12-18 11:03:58 -08:00
parent ea76b7c442
commit 96da7ccb2d
11 changed files with 996 additions and 727 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

231
internal_packages/composer/lib/composer-editor.jsx Normal file
View file

@ -0,0 +1,231 @@
import React, {Component, PropTypes} from 'react';
import {ExtensionRegistry, DOMUtils} from 'nylas-exports';
import {ScrollRegion, Contenteditable} from 'nylas-component-kit';
/**
* Renders the text editor for the composer
* Any component registering in the ComponentRegistry with the role
* 'Composer:Editor' will receive these set of props.
*
* In order for the Composer to work correctly and have a complete set of
* functionality (like file pasting), any registered editor *must* call the
* provided callbacks at the appropriate time.
*
* @param {object} props - props for ComposerEditor
* @param {string} props.body - Html string with the draft content to be
* rendered by the editor
* @param {string} props.draftClientId - Id of the draft being currently edited
* @param {object} props.initialSelectionSnapshot - Initial content selection
* that was previously saved
* @param {object} props.parentActions - Object containg helper actions
* associated with the parent container
* @param {props.parentActions.getComposerBoundingRect} props.parentActions.getComposerBoundingRect
* @param {props.parentActions.scrollTo} props.parentActions.scrollTo
* @param {props.onFocus} props.onFocus
* @param {props.onFilePaste} props.onFilePaste
* @param {props.onBodyChanged} props.onBodyChanged
* @class ComposerEditor
*/
class ComposerEditor extends Component {
static displayName = 'ComposerEditor'
/**
* This function will return the {DOMRect} for the parent component
* @function
* @name props.parentActions.getComposerBoundingRect
*/
/**
* This function will make the screen scrollTo the desired position in the
* message list
* @function
* @name props.parentActions.scrollTo
* @param {object} options
* @param {string} options.clientId - Id of the message we want to scroll to
* @param {string} [options.positon] - If clientId is provided, this optional
* parameter will indicate what position of the message to scrollTo. See
* {ScrollRegion}
* @param {DOMRect} options.rect - Bounding rect we want to scroll to
*/
/**
* This function should be called when the editing region is focused by the user
* @callback props.onFocus
*/
/**
* This function should be called when the user pastes a file into the editing
* region
* @callback props.onFilePaste
*/
/**
* This function should be called when the body of the draft changes, i.e.
* when the editor is being typed into. It should pass in an object that looks
* like a DOM Event with the current value of the content.
* @callback props.onBodyChanged
* @param {object} event - DOMEvent-like object that contains information
* about the current value of the body
* @param {string} event.target.value - HTML string that represents the
* current content of the editor body
*/
static propTypes = {
body: PropTypes.string.isRequired,
draftClientId: PropTypes.string,
initialSelectionSnapshot: PropTypes.object,
onFocus: PropTypes.func.isRequired,
onFilePaste: PropTypes.func.isRequired,
onBodyChanged: PropTypes.func.isRequired,
parentActions: PropTypes.shape({
scrollTo: PropTypes.func,
getComposerBoundingRect: PropTypes.func,
}),
}
constructor(props) {
super(props);
this.state = {
extensions: ExtensionRegistry.Composer.extensions(),
};
this._coreExtension = {
onFocus: props.onFocus,
};
}
componentDidMount() {
this.unsub = ExtensionRegistry.Composer.listen(this._onExtensionsChanged);
}
componentWillUnmount() {
this.unsub();
}
// Public methods
/**
* @private
* Methods in ES6 classes should be defined using object method shorthand
* syntax (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions),
* as opposed to arrow function syntax, if we want them to be enumerated
* on the prototype. Arrow function syntax is used to lexically bind the `this`
* value, and are specialized for non-method callbacks, where them picking up
* the this of their surrounding method or constructor is an advantage.
* See https://goo.gl/9ZMOGl for an example
* and http://www.2ality.com/2015/02/es6-classes-final.html for more info.
*/
// TODO Get rid of these selection methods
getCurrentSelection() {
return this.refs.contenteditable.getCurrentSelection();
}
getPreviousSelection() {
return this.refs.contenteditable.getPreviousSelection();
}
focusEditor() {
this.refs.contenteditable.selectEnd();
}
/**
* @private
* This method was included so that the tests don't break
* TODO refactor the tests!
*/
_onDOMMutated(mutations) {
this.refs.contenteditable._onDOMMutated(mutations);
}
// Helpers
_scrollToBottom = ()=> {
this.props.parentActions.scrollTo({
clientId: this.props.draftClientId,
position: ScrollRegion.ScrollPosition.Bottom,
});
}
/**
* @private
* If the bottom of the container we're scrolling to is really far away
* from the contenteditable and your scroll position, we don't want to
* jump away. This can commonly happen if the composer has a very tall
* image attachment. The "send" button may be 1000px away from the bottom
* of the contenteditable. props.parentActions.scrollToBottom moves to the bottom of
* the "send" button.
*/
_bottomIsNearby = (editableNode)=> {
const parentRect = this.props.parentActions.getComposerBoundingRect();
const selfRect = editableNode.getBoundingClientRect();
return Math.abs(parentRect.bottom - selfRect.bottom) <= 250;
}
/**
* @private
* As you're typing a lot of content and the cursor begins to scroll off
* to the bottom, we want to make it look like we're tracking your
* typing.
*/
_shouldScrollToBottom(selection, editableNode) {
return (
this.props.parentActions.scrollTo != null &&
DOMUtils.atEndOfContent(selection, editableNode) &&
this._bottomIsNearby(editableNode)
);
}
/**
* @private
* When the selectionState gets set (e.g. undo-ing and
* redo-ing) we need to make sure it's visible to the user.
*
* Unfortunately, we can't use the native `scrollIntoView` because it
* naively scrolls the whole window and doesn't know not to scroll if
* it's already in view. There's a new native method called
* `scrollIntoViewIfNeeded`, but this only works when the scroll
* container is a direct parent of the requested element. In this case
* the scroll container may be many levels up.
*/
_ensureSelectionVisible = (selection, editableNode)=> {
// If our parent supports scroll, check for that
if (this._shouldScrollToBottom(selection, editableNode)) {
this._scrollToBottom();
} else if (this.props.parentActions.scrollTo != null) {
// Don't bother computing client rects if no scroll method has been provided
const rangeInScope = DOMUtils.getRangeInScope(editableNode);
if (!rangeInScope) return;
let rect = rangeInScope.getBoundingClientRect();
if (DOMUtils.isEmptyBoundingRect(rect)) {
rect = DOMUtils.getSelectionRectFromDOM(selection);
}
if (rect) {
this.props.parentActions.scrollTo({rect});
}
}
}
// Handlers
_onExtensionsChanged = ()=> {
this.setState({extensions: ExtensionRegistry.Composer.extensions()});
}
// Renderers
render() {
return (
<Contenteditable
ref="contenteditable"
value={this.props.body}
onChange={this.props.onBodyChanged}
onFilePaste={this.props.onFilePaste}
onSelectionChanged={this._ensureSelectionVisible}
initialSelectionSnapshot={this.props.initialSelectionSnapshot}
extensions={[this._coreExtension].concat(this.state.extensions)} />
);
}
}
export default ComposerEditor;

85
internal_packages/composer/lib/composer-view.cjsx
View file

@ -17,7 +17,6 @@ React = require 'react'
{DropZone,
RetinaImg,
ScrollRegion,
Contenteditable,
InjectedComponent,
KeyCommandsRegion,
FocusTrackingRegion,
@ -26,6 +25,7 @@ React = require 'react'
FileUpload = require './file-upload'
ImageFileUpload = require './image-file-upload'
ComposerEditor = require './composer-editor'
ExpandedParticipants = require './expanded-participants'
CollapsedParticipants = require './collapsed-participants'
@ -53,7 +53,7 @@ class ComposerView extends React.Component
# have the parent scroll to a certain location. A parent component can
# pass a callback that gets called when this composer wants to be
# scrolled to.
onRequestScrollTo: React.PropTypes.func
scrollTo: React.PropTypes.func
constructor: (@props) ->
@state =
@ -69,7 +69,6 @@ class ComposerView extends React.Component
enabledFields: [] # Gets updated in @_initiallyEnabledFields
showQuotedText: false
uploads: FileUploadStore.uploadsForMessage(@props.draftClientId) ? []
composerExtensions: @_composerExtensions()
componentWillMount: =>
@_prepareForDraft(@props.draftClientId)
@ -82,7 +81,6 @@ class ComposerView extends React.Component
@_usubs = []
@_usubs.push FileUploadStore.listen @_onFileUploadStoreChange
@_usubs.push AccountStore.listen @_onAccountStoreChanged
@_usubs.push ExtensionRegistry.Composer.listen @_onExtensionsChanged
@_applyFieldFocus()
componentWillUnmount: =>
@ -101,11 +99,6 @@ class ComposerView extends React.Component
@_applyFieldFocus()
## TODO add core composer extensions to refactor callback props out of
# Contenteditable
_composerExtensions: ->
ExtensionRegistry.Composer.extensions()
_keymapHandlers: ->
'composer:send-message': => @_sendDraft()
'composer:delete-empty-draft': => @_deleteDraftIfEmpty()
@ -129,7 +122,7 @@ class ComposerView extends React.Component
React.findDOMNode(@refs[@state.focusedField]).focus()
if @state.focusedField is Fields.Body and not @_proxy.draftPristineBody()
@refs[Fields.Body].selectEnd()
@refs[Fields.Body].focusEditor()
componentWillReceiveProps: (newProps) =>
@_ignoreNextTrigger = false
@ -244,7 +237,7 @@ class ComposerView extends React.Component
ref="composeBody"
onMouseUp={@_onMouseUpComposerBody}
onMouseDown={@_onMouseDownComposerBody}>
{@_renderBody()}
{@_renderBodyRegions()}
{@_renderFooterRegions()}
</div>
</div>
@ -303,29 +296,44 @@ class ComposerView extends React.Component
onChange={@_onChangeSubject}/>
</div>
_renderBody: =>
_renderBodyRegions: =>
<span ref="composerBodyWrap">
{@_renderBodyContenteditable()}
{@_renderEditor()}
{@_renderQuotedTextControl()}
{@_renderAttachments()}
</span>
_renderBodyContenteditable: ->
<Contenteditable
ref={Fields.Body}
value={@_removeQuotedText(@state.body)}
onChange={@_onChangeBody}
onScrollTo={@props.onRequestScrollTo}
onFilePaste={@_onFilePaste}
onScrollToBottom={@_onScrollToBottom()}
extensions={[@_contenteditableHandlers()].concat(@state.composerExtensions)}
getComposerBoundingRect={@_getComposerBoundingRect}
initialSelectionSnapshot={@_recoveredSelection} />
_renderEditor: ->
exposedProps =
body: @_removeQuotedText(@state.body)
draftClientId: @props.draftClientId
parentActions: {
getComposerBoundingRect: @_getComposerBoundingRect
scrollTo: @props.scrollTo
}
initialSelectionSnapshot: @_recoveredSelection
onFocus: @_onEditorFocus
onFilePaste: @_onFilePaste
onBodyChanged: @_onBodyChanged
_contenteditableHandlers: =>
{
onFocus: => @setState(focusedField: Fields.Body)
}
# TODO Get rid of the unecessary required methods:
# getCurrentSelection and getPreviousSelection shouldn't be needed and
# undo/redo functionality should be refactored into ComposerEditor
# _onDOMMutated is just for testing purposes, refactor the tests
<InjectedComponent
ref={Fields.Body}
matching={role: "Composer:Editor"}
fallback={ComposerEditor}
requiredMethods={[
'focusEditor'
'getCurrentSelection'
'getPreviousSelection'
'_onDOMMutated'
]}
exposedProps={exposedProps} />
_onEditorFocus: =>
@setState(focusedField: Fields.Body)
# The contenteditable decides when to request a scroll based on the
# position of the cursor and its relative distance to this composer
@ -334,14 +342,6 @@ class ComposerView extends React.Component
_getComposerBoundingRect: =>
React.findDOMNode(@refs.composerWrap).getBoundingClientRect()
_onScrollToBottom: ->
if @props.onRequestScrollTo
return =>
@props.onRequestScrollTo
clientId: @_proxy.draft().clientId
position: ScrollRegion.ScrollPosition.Bottom
else return null
_removeQuotedText: (html) =>
if @state.showQuotedText then return html
else return QuotedHTMLTransformer.removeQuotedHTML(html)
@ -487,7 +487,7 @@ class ComposerView extends React.Component
_onMouseUpComposerBody: (event) =>
if event.target is @_mouseDownTarget
@refs[Fields.Body].selectEnd()
@refs[Fields.Body].focusEditor()
@_mouseDownTarget = null
# When a user focuses the composer, it's possible that no input is
@ -496,7 +496,7 @@ class ComposerView extends React.Component
# erroneously trigger keyboard shortcuts.
_onFocusIn: (event) =>
return if DOMUtils.closest(event.target, DOMUtils.inputTypes())
@refs[Fields.Body].selectEnd()
@refs[Fields.Body].focusEditor()
_onMouseMoveComposeBody: (event) =>
if @_mouseComposeBody is "down" then @_mouseComposeBody = "move"
@ -561,9 +561,6 @@ class ComposerView extends React.Component
enabledFields.push Fields.Body
return enabledFields
_onExtensionsChanged: =>
@setState composerExtensions: @_composerExtensions()
# When the account store changes, the From field may or may not still
# be in scope. We need to make sure to update our enabled fields.
_onAccountStoreChanged: =>
@ -636,7 +633,7 @@ class ComposerView extends React.Component
_onChangeSubject: (event) =>
@_addToProxy(subject: event.target.value)
_onChangeBody: (event) =>
_onBodyChanged: (event) =>
return unless @_proxy
newBody = @_showQuotedText(event.target.value)
@ -720,8 +717,8 @@ class ComposerView extends React.Component
if bodyIsEmpty and not forwarded and not hasAttachment
warnings.push('without a body')
# Check third party warnings added via DraftStore extensions
for extension in @state.composerExtensions
# Check third party warnings added via Composer extensions
for extension in ExtensionRegistry.Composer.extensions()
continue unless extension.warningsForSending
warnings = warnings.concat(extension.warningsForSending(draft))

1259
internal_packages/composer/spec/composer-view-spec.cjsx
View file

File diff suppressed because it is too large Load diff

12
internal_packages/composer/spec/quoted-text-spec.cjsx
View file

@ -9,10 +9,18 @@ ReactTestUtils = React.addons.TestUtils
Fields = require '../lib/fields'
Composer = require "../lib/composer-view"
{DraftStore} = require 'nylas-exports'
ComposerEditor = require '../lib/composer-editor'
{DraftStore, ComponentRegistry} = require 'nylas-exports'
describe "Composer Quoted Text", ->
beforeEach ->
# TODO
# Extract ComposerEditor tests instead of rendering injected component
# here
ComposerEditor.containerRequired = false
ComponentRegistry.register(ComposerEditor, role: "Composer:Editor")
@onChange = jasmine.createSpy('onChange')
@htmlNoQuote = 'Test <strong>HTML</strong><br>'
@htmlWithQuote = 'Test <strong>HTML</strong><br><blockquote class="gmail_quote">QUOTE</blockquote>'
@ -28,6 +36,8 @@ describe "Composer Quoted Text", ->
afterEach ->
DraftStore._cleanupAllSessions()
ComposerEditor.containerRequired = undefined
ComponentRegistry.unregister(ComposerEditor)
# Must be called with the test's scope
setHTML = (newHTML) ->

4
internal_packages/message-list/lib/message-item-container.cjsx
View file

@ -18,7 +18,7 @@ class MessageItemContainer extends React.Component
collapsed: React.PropTypes.bool
isLastMsg: React.PropTypes.bool
isBeforeReplyArea: React.PropTypes.bool
onRequestScrollTo: React.PropTypes.func
scrollTo: React.PropTypes.func
constructor: (@props) ->
@state = @_getStateFromStores()
@ -62,7 +62,7 @@ class MessageItemContainer extends React.Component
mode: "inline"
draftClientId: @props.message.clientId
threadId: @props.thread.id
onRequestScrollTo: @props.onRequestScrollTo
scrollTo: @props.scrollTo
<InjectedComponent ref="message"
matching={role: "Composer"}

4
internal_packages/message-list/lib/message-list.cjsx
View file

@ -310,7 +310,7 @@ class MessageList extends React.Component
collapsed={collapsed}
isLastMsg={isLastMsg}
isBeforeReplyArea={isBeforeReplyArea}
onRequestScrollTo={@_onChildScrollRequest} />
scrollTo={@_scrollTo} />
)
if hasReplyArea
@ -381,7 +381,7 @@ class MessageList extends React.Component
#
# If messageId and location are defined, that means we want to scroll
# smoothly to the top of a particular message.
_onChildScrollRequest: ({clientId, rect, position}={}) =>
_scrollTo: ({clientId, rect, position}={}) =>
return if @_draftScrollInProgress
if clientId
messageElement = @_getMessageContainer(clientId)

21
spec/quoted-html-transformer-spec.coffee
View file

@ -256,7 +256,6 @@ describe "QuotedHTMLTransformer", ->
<br></body>
"""
it 'works with these manual test cases', ->
for {before, after} in tests
opts = keepIfWholeBodyIsQuote: true
@ -273,6 +272,26 @@ describe "QuotedHTMLTransformer", ->
expect0 = "<head></head><body>hello<br><br>world<br></body>"
expect(QuotedHTMLTransformer.removeQuotedHTML(input0)).toEqual expect0
it 'works as expected when body tag inside the html', ->
input0 = """
<br><br><blockquote class="gmail_quote"
style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
On Dec 16 2015, at 7:08 pm, Juan Tejada &lt;juan@nylas.com&gt; wrote:
<br>
<meta content="text/html; charset=us-ascii" />
<body>
<h1 id="h2">h2</h1>
<p>he he hehehehehehe</p>
<p>dufjcasc</p>
</body>
</blockquote>
"""
expect0 = "<head></head><body><br></body>"
expect(QuotedHTMLTransformer.removeQuotedHTML(input0)).toEqual expect0
# We have a little utility method that you can manually uncomment to

57
src/components/contenteditable/contenteditable.cjsx
View file

@ -35,13 +35,11 @@ class Contenteditable extends React.Component
# The current html state, as a string, of the contenteditable.
value: React.PropTypes.string
initialSelectionSnapshot: React.PropTypes.object
# Initial content selection that was previously saved
initialSelectionSnapshot: React.PropTypes.object,
# Handlers
onChange: React.PropTypes.func.isRequired
# Passes an absolute top coordinate to scroll to.
onScrollTo: React.PropTypes.func
onScrollToBottom: React.PropTypes.func
onFilePaste: React.PropTypes.func
# A list of objects that extend {ContenteditableExtension}
@ -549,7 +547,7 @@ class Contenteditable extends React.Component
endNodeIndex: DOMUtils.getNodeIndex(context, selection.focusNode)
isCollapsed: selection.isCollapsed
@_ensureSelectionVisible(selection)
@_onSelectionChanged(selection)
@setInnerState
selection: @_selection
@ -564,54 +562,11 @@ class Contenteditable extends React.Component
selection: @_selection
editableFocused: true
# When the selectionState gets set by a parent (e.g. undo-ing and
# redo-ing) we need to make sure it's visible to the user.
#
# Unfortunately, we can't use the native `scrollIntoView` because it
# naively scrolls the whole window and doesn't know not to scroll if
# it's already in view. There's a new native method called
# `scrollIntoViewIfNeeded`, but this only works when the scroll
# container is a direct parent of the requested element. In this case
# the scroll container may be many levels up.
_ensureSelectionVisible: (selection) ->
# If our parent supports scroll to bottom, check for that
if @_shouldScrollToBottom(selection)
@props.onScrollToBottom()
# Don't bother computing client rects if no scroll method has been provided
else if @props.onScrollTo
rangeInScope = DOMUtils.getRangeInScope(@_editableNode())
return unless rangeInScope
rect = rangeInScope.getBoundingClientRect()
if DOMUtils.isEmptyBoudingRect(rect)
rect = DOMUtils.getSelectionRectFromDOM(selection)
if rect
@props.onScrollTo({rect})
_onSelectionChanged: (selection) ->
@props.onSelectionChanged(selection, @_editableNode())
# The bounding client rect has changed
@setInnerState editableNode: @_editableNode()
# As you're typing a lot of content and the cursor begins to scroll off
# to the bottom, we want to make it look like we're tracking your
# typing.
_shouldScrollToBottom: (selection) ->
(@props.onScrollToBottom and
DOMUtils.atEndOfContent(selection, @_editableNode()) and
@_bottomIsNearby())
# If the bottom of the container we're scrolling to is really far away
# from this contenteditable and your scroll position, we don't want to
# jump away. This can commonly happen if the composer has a very tall
# image attachment. The "send" button may be 1000px away from the bottom
# of the contenteditable. props.onScrollToBottom moves to the bottom of
# the "send" button.
_bottomIsNearby: ->
parentRect = @props.getComposerBoundingRect()
selfRect = @_editableNode().getBoundingClientRect()
return Math.abs(parentRect.bottom - selfRect.bottom) <= 250
# We use global listeners to determine whether or not dragging is
# happening. This is because dragging may stop outside the scope of
# this element. Note that the `dragstart` and `dragend` events don't
@ -741,7 +696,7 @@ class Contenteditable extends React.Component
newEndNode,
@_selection.endOffset)
@_ensureSelectionVisible(selection)
@_onSelectionChanged(selection)
@_setupListeners()
# This needs to be in the contenteditable area because we need to first

1
src/components/injected-component-set.cjsx
View file

@ -57,6 +57,7 @@ class InjectedComponentSet extends React.Component
className: React.PropTypes.string
exposedProps: React.PropTypes.object
containersRequired: React.PropTypes.bool
requiredMethods: React.PropTypes.arrayOf(React.PropTypes.string)
@defaultProps:
direction: 'row'

47
src/components/injected-component.cjsx
View file

@ -41,14 +41,28 @@ class InjectedComponent extends React.Component
- `exposedProps` (optional) An {Object} with props that will be passed to each
item rendered into the set.
- `requiredMethods` (options) An {Array} with a list of methods that should be
implemented by the registered component instance. If these are not implemented,
an error will be thrown.
- `fallback` (optional) A {Component} to default to in case there are no matching
components in the ComponentRegistry
###
@propTypes:
matching: React.PropTypes.object.isRequired
className: React.PropTypes.string
exposedProps: React.PropTypes.object
fallback: React.PropTypes.func
requiredMethods: React.PropTypes.arrayOf(React.PropTypes.string)
@defaultProps:
requiredMethods: []
constructor: (@props) ->
@state = @_getStateFromStores()
@_verifyRequiredMethods()
@_setRequiredMethods(@props.requiredMethods)
componentDidMount: =>
@_componentUnlistener = ComponentRegistry.listen =>
@ -61,6 +75,9 @@ class InjectedComponent extends React.Component
if not _.isEqual(newProps.matching, @props?.matching)
@setState(@_getStateFromStores(newProps))
componentDidUpdate: =>
@_setRequiredMethods(@props.requiredMethods)
render: =>
return <div></div> unless @state.component
@ -69,7 +86,6 @@ class InjectedComponent extends React.Component
className += " registered-region-visible" if @state.visible
component = @state.component
if component.containerRequired is false
element = <component ref="inner" key={component.displayName} {...exposedProps} />
else
@ -96,6 +112,29 @@ class InjectedComponent extends React.Component
# Note that our inner may not be populated, and it may not have a blur method
@refs.inner.blur() if @refs.inner?.blur?
_setRequiredMethods: (methods) =>
methods.forEach (method) =>
Object.defineProperty(@, method,
configurable: true
enumerable: true
get: =>
if @refs.inner instanceof UnsafeComponent
@refs.inner.injected[method]?.bind(@refs.inner.injected)
else
@refs.inner[method]?.bind(@refs.inner)
)
_verifyRequiredMethods: =>
if @state.component?
component = @state.component
@props.requiredMethods.forEach (method) =>
isMethodDefined = @state.component.prototype[method]?
unless isMethodDefined
throw new Error(
"#{component.name} must implement method `#{method}` when registering
for #{JSON.stringify(@props.matching)}"
)
_getStateFromStores: (props) =>
props ?= @props
@ -104,8 +143,12 @@ class InjectedComponent extends React.Component
console.warn("There are multiple components available for \
#{JSON.stringify(props.matching)}. <InjectedComponent> is \
only rendering the first one.")
component = if components.length is 0
@props.fallback
else
components[0]
component: components[0]
component: component
visible: ComponentRegistry.showComponentRegions()
module.exports = InjectedComponent

2
src/dom-utils.coffee
View file

@ -277,7 +277,7 @@ DOMUtils =
return (scope.contains(selection.anchorNode) and
scope.contains(selection.focusNode))
isEmptyBoudingRect: (rect) ->
isEmptyBoundingRect: (rect) ->
rect.top is 0 and rect.bottom is 0 and rect.left is 0 and rect.right is 0
atEndOfContent: (selection, rootScope, containerScope) ->