testing

client/apps/edit/components/content/sections/image_collection/index.coffee

@@ -12,7 +12,7 @@ DragContainer = React.createFactory require '../../../../../../components/drag_d
 { div, section, ul, li } = React.DOM
 
 components = require('@artsy/reaction-force/dist/components/publishing/index').default
-ImageSetPreview = React.createFactory components.ImagesetPreviewClassic
+ImageSetPreview = React.createFactory components.ImageSetPreviewClassic
 
 module.exports = React.createClass
   displayName: 'SectionImageCollection'

client/apps/edit/components/content2/section_container/index.coffee

@@ -11,7 +11,6 @@ Video = React.createFactory require '../../content/sections/video/index.coffee'
 Slideshow = React.createFactory require '../../content/sections/slideshow/index.coffee'
 Embed = React.createFactory require '../../content/sections/embed/index.coffee'
 Fullscreen = React.createFactory require '../../content/sections/fullscreen/index.coffee'
-Callout = React.createFactory require '../../content/sections/callout/index.coffee'
 ImageCollection = React.createFactory require '../sections/image_collection/index.coffee'
 Image = React.createFactory require '../../content/sections/image/index.coffee'
 { div, nav, button } = React.DOM
@@ -69,7 +68,6 @@ module.exports = React.createClass
         when 'slideshow' then Slideshow
         when 'embed' then Embed
         when 'fullscreen' then Fullscreen
-        when 'callout' then Callout
         when 'image_set' then ImageCollection
         when 'image_collection' then ImageCollection
         when 'image' then Image

client/apps/edit/components/content2/section_container/test/index.coffee

@@ -38,7 +38,7 @@ describe 'SectionContainer', ->
         dragOver: 4
         article: new Article
       }
-      @SectionContainer.__set__ 'SectionText', ->
+      @SectionContainer.__set__ 'Text', ->
       @component = ReactDOM.render React.createElement(@SectionContainer, @props
       ), $("<div></div>")[0], => setTimeout =>
         @component.setState = sinon.stub()

client/apps/edit/components/content2/section_list/index.coffee

@@ -59,20 +59,21 @@ module.exports = React.createClass
           article: @props.article
         },
           @props.sections.map (section, i) =>
-            [
-              SectionContainer {
-                sections: @props.sections
-                section: section
-                index: i
-                editing: @state.editingIndex is i
-                ref: 'section' + i
-                key: section.cid
-                channel: @props.channel
-                onSetEditing: @onSetEditing
-                article: @props.article
-              }
-              SectionTool { sections: @props.sections, index: i, key: i }
-            ]
+             unless section.get('type') is 'callout'
+              [
+                SectionContainer {
+                  sections: @props.sections
+                  section: section
+                  index: i
+                  editing: @state.editingIndex is i
+                  ref: 'section' + i
+                  key: section.cid
+                  channel: @props.channel
+                  onSetEditing: @onSetEditing
+                  article: @props.article
+                }
+                SectionTool { sections: @props.sections, index: i, key: i }
+              ]
       if @props.channel.isEditorial()
         div {
           className: 'edit-sections__postscript'

client/apps/edit/components/content2/section_list/test/index.coffee

@@ -20,18 +20,18 @@ describe 'SectionList', ->
       global.HTMLElement = () => {}
       @SectionList = benv.require resolve(__dirname, '../index')
       DragContainer = benv.require resolve(__dirname, '../../../../../../components/drag_drop/index')
-      RichTextParagraph = benv.require resolve(
-        __dirname, '../../../../../../components/rich_text/components/input_paragraph.coffee'
+      Paragraph = benv.require resolve(
+        __dirname, '../../../../../../components/rich_text2/components/paragraph.coffee'
       )
       @SectionList.__set__ 'SectionTool', @SectionTool = sinon.stub()
       @SectionContainer = benv.requireWithJadeify(
         resolve(__dirname, '../../section_container/index'), ['icons']
       )
-      @SectionContainer.__set__ 'SectionText', text = sinon.stub()
-      @SectionContainer.__set__ 'SectionImageCollection', image_collection = sinon.stub()
+      @SectionContainer.__set__ 'Text', text = sinon.stub()
+      @SectionContainer.__set__ 'ImageCollection', image_collection = sinon.stub()
       @SectionList.__set__ 'SectionContainer', React.createFactory @SectionContainer
       @SectionList.__set__ 'DragContainer', React.createFactory DragContainer
-      @SectionList.__set__ 'RichTextParagraph', React.createFactory RichTextParagraph
+      @SectionList.__set__ 'Paragraph', React.createFactory Paragraph
       @props = {
         article: new Backbone.Model {layout: 'feature'}
         sections: @sections = new Sections [

client/apps/edit/components/content2/sections/header/index.coffee

@@ -23,11 +23,11 @@ module.exports = React.createClass
       className: 'edit-header__lead-paragraph'
     },
       Paragraph {
-        html: @props.article.get('lead_paragraph') or ''
+        html: @props.article.get('lead_paragraph')
         onChange: @setLeadParagraph
         placeholder: 'Lead Paragraph (optional)'
         type: 'lead_paragraph'
-        linked: true
+        linked: false
         linebreaks: false
         layout: @props.article.get('layout')
       }
@@ -63,5 +63,5 @@ module.exports = React.createClass
             @props.article.get('author').name
         p { className: 'date' }, @props.article.getPublishDate()
 
-      if layout is 'standard' and @props.article.get('lead_paragraph').length
+      if layout is 'standard' and @props.article.get('lead_paragraph')?.length
         @renderLeadParagraph()

client/apps/edit/components/content2/sections/header/index.styl

@@ -2,6 +2,7 @@
   padding-top 60px
   .public-DraftEditorPlaceholder-root
     position absolute
+    top 1em
     color gray-dark-color
   &__title
     position relative
@@ -82,5 +83,4 @@
       garamond l-body
       max-width classic-body-width
       margin 20px auto 0 auto
-      .public-DraftEditorPlaceholder-root
-        color gray-dark-color
+

client/apps/edit/components/content2/sections/header/test/index.coffee

@@ -112,7 +112,7 @@ describe 'SectionHeader: Standard', ->
       benv.expose $: benv.require 'jquery'
       global.HTMLElement = () => {}
       SectionHeader = benv.require resolve(__dirname, '../index.coffee')
-      Paragraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/input_paragraph.coffee')
+      Paragraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/paragraph.coffee')
       SectionHeader.__set__ 'Paragraph', React.createFactory Paragraph
       @article = new Article _.extend fixtures().articles,
         layout: 'standard'

client/apps/edit/components/content2/sections/image_collection/index.coffee

@@ -10,9 +10,8 @@ Controls = React.createFactory require './components/controls.coffee'
 DragContainer = React.createFactory require '../../../../../../components/drag_drop/index.coffee'
 { fillWidth }  = require '../../../../../../components/fill_width/index.coffee'
 { div, section, ul, li } = React.DOM
-
 components = require('@artsy/reaction-force/dist/components/publishing/index').default
-ImagesetPreviewClassic = React.createFactory components.ImagesetPreviewClassic
+ImageSetPreviewClassic = React.createFactory components.ImageSetPreviewClassic
 
 module.exports = React.createClass
   displayName: 'SectionImageCollection'
@@ -115,7 +114,7 @@ module.exports = React.createClass
       },
         if hasImages
           if !@props.editing and @props.section.get('type') is 'image_set'
-            ImagesetPreviewClassic {
+            ImageSetPreviewClassic {
               images: images
             }
           else

client/apps/edit/components/content2/sections/text/index.coffee

@@ -5,7 +5,7 @@ sd = require('sharify').data
 window.process = {env: {NODE_ENV: sd.NODE_ENV}}
 components = require('@artsy/reaction-force/dist/components/publishing/index').default
 Config = require './draft_config.coffee'
-Nav = React.createFactory require '../../../../../../components/rich_text2/components/edit_nav.coffee'
+Nav = React.createFactory require '../../../../../../components/rich_text2/components/nav.coffee'
 InputUrl = React.createFactory require '../../../../../../components/rich_text2/components/input_url.coffee'
 Text = React.createFactory components.Text
 Utils = require '../../../../../../components/rich_text2/utils/index.coffee'

client/apps/edit/components/content2/sections/text/test/index.coffee

@@ -39,7 +39,7 @@ describe 'Section Text', ->
         resolve(__dirname, '../../../../../../../components/rich_text2/components/input_url'), ['icons']
       )
       Nav = benv.requireWithJadeify(
-        resolve(__dirname, '../../../../../../../components/rich_text2/components/edit_nav'), ['icons']
+        resolve(__dirname, '../../../../../../../components/rich_text2/components/nav'), ['icons']
       )
       @SectionText.__set__ 'InputUrl', React.createFactory InputUrl
       @SectionText.__set__ 'Nav', React.createFactory Nav

client/components/rich_text2/components/edit_nav.coffee → client/components/rich_text2/components/nav.coffee

@@ -4,7 +4,7 @@ _ = require 'underscore'
 icons = -> require('../utils/icons.jade') arguments...
 
 module.exports = React.createClass
-  displayName: 'EditNav'
+  displayName: 'RichTextNav'
 
   onToggle: (e) ->
     e.preventDefault()

client/components/rich_text2/components/paragraph.coffee

@@ -30,7 +30,7 @@ Utils = require '../utils/index.coffee'
 { div, a } = React.DOM
 editor = (props) -> React.createElement Editor, props
 components = require('@artsy/reaction-force/dist/components/publishing/index').default
-Nav = React.createFactory require './edit_nav.coffee'
+Nav = React.createFactory require './nav.coffee'
 InputUrl = React.createFactory require './input_url.coffee'
 Text = React.createFactory components.Text
 
@@ -46,6 +46,7 @@ module.exports = React.createClass
     showNav: false
     urlValue: ''
     selectionTarget: null
+    linebreaks: @props.linebreaks or true
 
   componentDidMount: ->
     if $(@props.html).text().length
@@ -71,7 +72,9 @@ module.exports = React.createClass
     @refs.editor.focus()
 
   onBlur: ->
-    @setState focus: false
+    @setState
+      focus: false
+      showNav: false
 
   convertFromHTML: (html) ->
     blocksFromHTML = convertFromHTML({
@@ -103,7 +106,7 @@ module.exports = React.createClass
     return Array.from(available)
 
   handleKeyCommand: (e) ->
-    return 'handled' if @props.linebreaks is false and e is 'split-block'
+    return 'handled' if @state.linebreaks is false and e is 'split-block'
     if e is 'link-prompt'
       @promptForLink() if @hasLinks()
       return 'handled'
@@ -122,7 +125,10 @@ module.exports = React.createClass
     { editorState } = @state
     unless html
       html = '<div>' + text + '</div>'
+    html = Utils.standardizeSpacing html
     html = Utils.stripGoogleStyles html
+    unless @state.linebreaks
+      html = html.replace(/<\/p><p>/g, '')
     blocksFromHTML = @convertFromHTML html
     convertedHtml = blocksFromHTML.getBlocksAsArray().map (contentBlock) =>
       unstyled = Utils.stripCharacterStyles contentBlock, true
@@ -135,7 +141,8 @@ module.exports = React.createClass
       editorState.getSelection()
       blockMap
     )
-    @onChange EditorState.push(editorState, newState, 'insert-fragment')
+    newState = EditorState.push(editorState, newState, 'insert-fragment')
+    @onChange newState
     return true
 
   promptForLink: (e) ->
@@ -206,7 +213,7 @@ module.exports = React.createClass
   checkSelection: ->
     if !window.getSelection().isCollapsed
       location = Utils.getSelectionLocation $(ReactDOM.findDOMNode(@refs.editor)).offset()
-      selectionTargetL = Config.inlineStyles(@props.type).length * 50
+      selectionTargetL = Config.inlineStyles(@props.type).length * 25
       selectionTargetL = selectionTargetL + 50 if @hasLinks()
       @setState showNav: true, selectionTarget: Utils.stickyControlsBox(location, -43, selectionTargetL)
     else
@@ -221,7 +228,7 @@ module.exports = React.createClass
         Nav {
           styles: Config.inlineStyles(@props.type)
           toggleStyle: @toggleInlineStyle
-          promptForLink: @promptForLink
+          promptForLink: @promptForLink if @hasLinks()
           position: @state.selectionTarget
         }
       div {