2015-03-06 08:00:56 +08:00
|
|
|
# This tests just quoted text within a contenteditable.
|
|
|
|
|
#
|
|
|
|
|
# For a test of the basic component itself see
|
|
|
|
|
# contenteditable-component-spec.cjsx
|
|
|
|
|
#
|
2015-05-20 07:06:59 +08:00
|
|
|
_ = require "underscore"
|
2016-03-29 16:41:24 +08:00
|
|
|
React = require "react"
|
|
|
|
|
ReactDOM = require 'react-dom'
|
|
|
|
|
ReactTestUtils = require('react-addons-test-utils')
|
2015-09-23 07:02:44 +08:00
|
|
|
|
2016-05-04 07:42:28 +08:00
|
|
|
Fields = require('../lib/fields').default
|
|
|
|
|
Composer = require("../lib/composer-view").default
|
|
|
|
|
ComposerEditor = require('../lib/composer-editor').default
|
feat(editor-region): Add support to register components as editors
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
2015-12-19 03:03:58 +08:00
|
|
|
|
2016-01-26 06:14:09 +08:00
|
|
|
{Message, DraftStore, ComponentRegistry} = require 'nylas-exports'
|
2015-03-06 08:00:56 +08:00
|
|
|
|
2015-10-31 08:03:33 +08:00
|
|
|
describe "Composer Quoted Text", ->
|
2015-03-06 08:00:56 +08:00
|
|
|
beforeEach ->
|
feat(editor-region): Add support to register components as editors
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
2015-12-19 03:03:58 +08:00
|
|
|
ComponentRegistry.register(ComposerEditor, role: "Composer:Editor")
|
|
|
|
|
|
2015-03-06 08:00:56 +08:00
|
|
|
@onChange = jasmine.createSpy('onChange')
|
2015-09-04 10:41:56 +08:00
|
|
|
@htmlNoQuote = 'Test <strong>HTML</strong><br>'
|
2016-07-22 06:56:24 +08:00
|
|
|
@htmlWithQuote = 'Test <strong>HTML</strong><div id="n1-quoted-text-marker"></div><br><blockquote class="gmail_quote">QUOTE</blockquote>'
|
2015-09-04 10:41:56 +08:00
|
|
|
|
2016-01-26 06:14:09 +08:00
|
|
|
@draft = new Message(draft: true, clientId: "client-123")
|
fix(focus): Remove focusedField in favor of imperative focus, break apart ComposerView
Summary:
- Removes controlled focus in the composer!
- No React components ever perfom focus in lifecycle methods. Never again.
- A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus"
- The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus.
- The MessageList never focuses anything automatically.
- Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView
- ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon.
- Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing.
- Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want.
- Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature.
Todos:
- Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur.
- Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable.
- Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon.
Test Plan: Broken
Reviewers: juan, evan
Reviewed By: juan, evan
Differential Revision: https://phab.nylas.com/D2814
2016-04-05 06:22:01 +08:00
|
|
|
@session =
|
2016-01-26 06:14:09 +08:00
|
|
|
trigger: ->
|
fix(focus): Remove focusedField in favor of imperative focus, break apart ComposerView
Summary:
- Removes controlled focus in the composer!
- No React components ever perfom focus in lifecycle methods. Never again.
- A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus"
- The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus.
- The MessageList never focuses anything automatically.
- Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView
- ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon.
- Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing.
- Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want.
- Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature.
Todos:
- Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur.
- Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable.
- Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon.
Test Plan: Broken
Reviewers: juan, evan
Reviewed By: juan, evan
Differential Revision: https://phab.nylas.com/D2814
2016-04-05 06:22:01 +08:00
|
|
|
changes:
|
2016-05-25 10:04:20 +08:00
|
|
|
add: jasmine.createSpy('changes.add')
|
2016-01-26 06:14:09 +08:00
|
|
|
draft: => @draft
|
2015-10-31 08:03:33 +08:00
|
|
|
|
|
|
|
|
afterEach ->
|
|
|
|
|
DraftStore._cleanupAllSessions()
|
feat(editor-region): Add support to register components as editors
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
2015-12-19 03:03:58 +08:00
|
|
|
ComposerEditor.containerRequired = undefined
|
|
|
|
|
ComponentRegistry.unregister(ComposerEditor)
|
2015-09-23 07:02:44 +08:00
|
|
|
|
2015-09-04 10:41:56 +08:00
|
|
|
# Must be called with the test's scope
|
|
|
|
|
setHTML = (newHTML) ->
|
|
|
|
|
@$contentEditable.innerHTML = newHTML
|
2015-11-26 08:07:50 +08:00
|
|
|
@contentEditable._onDOMMutated(["mutated"])
|
2015-09-04 10:41:56 +08:00
|
|
|
|
2016-07-22 06:56:24 +08:00
|
|
|
describe "when the message is a reply", ->
|
2015-03-18 07:19:40 +08:00
|
|
|
beforeEach ->
|
fix(focus): Remove focusedField in favor of imperative focus, break apart ComposerView
Summary:
- Removes controlled focus in the composer!
- No React components ever perfom focus in lifecycle methods. Never again.
- A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus"
- The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus.
- The MessageList never focuses anything automatically.
- Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView
- ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon.
- Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing.
- Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want.
- Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature.
Todos:
- Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur.
- Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable.
- Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon.
Test Plan: Broken
Reviewers: juan, evan
Reviewed By: juan, evan
Differential Revision: https://phab.nylas.com/D2814
2016-04-05 06:22:01 +08:00
|
|
|
@draft.body = @htmlNoQuote
|
|
|
|
|
@composer = ReactTestUtils.renderIntoDocument(
|
|
|
|
|
<Composer draft={@draft} session={@session}/>
|
|
|
|
|
)
|
2015-09-23 07:02:44 +08:00
|
|
|
@composer.setState
|
2016-07-22 06:56:24 +08:00
|
|
|
showQuotedText: false
|
|
|
|
|
showQuotedTextControl: true
|
2015-09-23 07:02:44 +08:00
|
|
|
@contentEditable = @composer.refs[Fields.Body]
|
2016-03-29 16:41:24 +08:00
|
|
|
@$contentEditable = ReactDOM.findDOMNode(@contentEditable).querySelector('[contenteditable]')
|
|
|
|
|
@$composerBodyWrap = ReactDOM.findDOMNode(@composer.refs.composerBodyWrap)
|
2015-03-18 07:19:40 +08:00
|
|
|
|
2016-07-22 06:56:24 +08:00
|
|
|
it 'should render the quoted-text-control toggle', ->
|
2015-10-31 08:03:33 +08:00
|
|
|
toggles = ReactTestUtils.scryRenderedDOMComponentsWithClass(@composer, 'quoted-text-control')
|
2016-07-22 06:56:24 +08:00
|
|
|
expect(toggles.length).toBe 1
|
2015-09-04 10:41:56 +08:00
|
|
|
|
2016-07-22 06:56:24 +08:00
|
|
|
describe 'when the quoted text has been expanded', ->
|
2015-03-06 08:00:56 +08:00
|
|
|
beforeEach ->
|
fix(focus): Remove focusedField in favor of imperative focus, break apart ComposerView
Summary:
- Removes controlled focus in the composer!
- No React components ever perfom focus in lifecycle methods. Never again.
- A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus"
- The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus.
- The MessageList never focuses anything automatically.
- Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView
- ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon.
- Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing.
- Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want.
- Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature.
Todos:
- Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur.
- Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable.
- Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon.
Test Plan: Broken
Reviewers: juan, evan
Reviewed By: juan, evan
Differential Revision: https://phab.nylas.com/D2814
2016-04-05 06:22:01 +08:00
|
|
|
@draft.body = @htmlWithQuote
|
|
|
|
|
@composer = ReactTestUtils.renderIntoDocument(
|
|
|
|
|
<Composer draft={@draft} session={@session}/>
|
|
|
|
|
)
|
2015-09-23 07:02:44 +08:00
|
|
|
@composer.setState
|
|
|
|
|
showQuotedText: true
|
2016-07-22 06:56:24 +08:00
|
|
|
showQuotedTextControl: false
|
2015-09-23 07:02:44 +08:00
|
|
|
@contentEditable = @composer.refs[Fields.Body]
|
2016-03-29 16:41:24 +08:00
|
|
|
@$contentEditable = ReactDOM.findDOMNode(@contentEditable).querySelector('[contenteditable]')
|
|
|
|
|
@$composerBodyWrap = ReactDOM.findDOMNode(@composer.refs.composerBodyWrap)
|
2015-09-04 10:41:56 +08:00
|
|
|
|
2016-05-25 10:04:20 +08:00
|
|
|
it "should call add changes with the entire HTML string", ->
|
2015-09-04 10:41:56 +08:00
|
|
|
textToAdd = "MORE <strong>TEXT</strong>!"
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlWithQuote
|
|
|
|
|
setHTML.call(@, textToAdd + @htmlWithQuote)
|
2016-05-25 10:04:20 +08:00
|
|
|
ev = @session.changes.add.mostRecentCall.args[0].body
|
2015-10-31 08:03:33 +08:00
|
|
|
expect(ev).toEqual(textToAdd + @htmlWithQuote)
|
2015-09-04 10:41:56 +08:00
|
|
|
|
|
|
|
|
it "should allow the quoted text to be changed", ->
|
|
|
|
|
newText = 'Test <strong>NEW 1 HTML</strong><blockquote class="gmail_quote">QUOTE CHANGED!!!</blockquote>'
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlWithQuote
|
|
|
|
|
setHTML.call(@, newText)
|
2016-05-25 10:04:20 +08:00
|
|
|
ev = @session.changes.add.mostRecentCall.args[0].body
|
2015-10-31 08:03:33 +08:00
|
|
|
expect(ev).toEqual(newText)
|
2015-09-04 10:41:56 +08:00
|
|
|
|
|
|
|
|
describe 'quoted text control toggle button', ->
|
2016-07-22 06:56:24 +08:00
|
|
|
it 'should not be rendered', ->
|
|
|
|
|
toggles = ReactTestUtils.scryRenderedDOMComponentsWithClass(@composer, 'quoted-text-control')
|
|
|
|
|
expect(toggles.length).toBe(0)
|
