replace lead paragraph

artsy · Aug 14, 2017 · bd4327e · bd4327e
1 parent 1efbb1b
commit bd4327e
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 53 deletions.
diff --git a/client/apps/edit/components/content2/section_container/index.coffee b/client/apps/edit/components/content2/section_container/index.coffee
@@ -6,14 +6,14 @@
 
 React = require 'react'
 _ = require 'underscore'
-SectionText = React.createFactory require '../sections/text/index.coffee'
-SectionVideo = React.createFactory require '../../content/sections/video/index.coffee'
-SectionSlideshow = React.createFactory require '../../content/sections/slideshow/index.coffee'
-SectionEmbed = React.createFactory require '../../content/sections/embed/index.coffee'
-SectionFullscreen = React.createFactory require '../../content/sections/fullscreen/index.coffee'
-SectionCallout = React.createFactory require '../../content/sections/callout/index.coffee'
-SectionImageCollection = React.createFactory require '../sections/image_collection/index.coffee'
-SectionImage = React.createFactory require '../../content/sections/image/index.coffee'
+Text = React.createFactory require '../sections/text/index.coffee'
+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
 icons = -> require('../../icons.jade') arguments...
 
@@ -64,15 +64,15 @@ module.exports = React.createClass
             dangerouslySetInnerHTML: __html: $(icons()).filter('.remove').html()
           }
       (switch @props.section.get('type')
-        when 'text' then SectionText
-        when 'video' then SectionVideo
-        when 'slideshow' then SectionSlideshow
-        when 'embed' then SectionEmbed
-        when 'fullscreen' then SectionFullscreen
-        when 'callout' then SectionCallout
-        when 'image_set' then SectionImageCollection
-        when 'image_collection' then SectionImageCollection
-        when 'image' then SectionImage
+        when 'text' then Text
+        when 'video' then Video
+        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
       )(
         section: @props.section
         sections: @props.sections

diff --git a/client/apps/edit/components/content2/section_list/index.coffee b/client/apps/edit/components/content2/section_list/index.coffee
@@ -8,8 +8,6 @@ SectionContainer = React.createFactory require '../section_container/index.coffe
 SectionTool = React.createFactory require '../section_tool/index.coffee'
 DragContainer = React.createFactory require '../../../../../components/drag_drop/index.coffee'
 Paragraph = React.createFactory require '../../../../../components/rich_text2/components/paragraph.coffee'
-components = require('@artsy/reaction-force/dist/components/publishing/index').default
-Text = React.createFactory components.Text
 { div } = React.DOM
 
 module.exports = React.createClass
@@ -52,7 +50,7 @@ module.exports = React.createClass
       ref: 'sections'
     },
       SectionTool { sections: @props.sections, index: -1, key: 1 }
-      if @props.sections.length > 0
+      if @props.sections.length
         DragContainer {
           items: @props.sections.models
           onDragEnd: @onDragEnd
@@ -84,7 +82,8 @@ module.exports = React.createClass
             html: @props.article.get('postscript') or ''
             onChange: @setPostscript
             placeholder: 'Postscript (optional)'
-            postscript: true
+            type: 'postscript'
             linked: true
             layout: @props.article.get('layout')
           }
+      # TODO - Author Preview
diff --git a/client/apps/edit/components/content2/sections/header/index.coffee b/client/apps/edit/components/content2/sections/header/index.coffee
@@ -1,9 +1,8 @@
 React = require 'react'
 moment = require 'moment'
-RichTextParagraph = React.createFactory require '../../../../../../components/rich_text2/components/input_paragraph.coffee'
+Paragraph = React.createFactory require '../../../../../../components/rich_text2/components/paragraph.coffee'
 { div, p, textarea } = React.DOM
 
-
 module.exports = React.createClass
   displayName: 'SectionHeader'
 
@@ -23,10 +22,14 @@ module.exports = React.createClass
     div {
       className: 'edit-header__lead-paragraph'
     },
-      RichTextParagraph {
-        text: @props.article.get('lead_paragraph')
+      Paragraph {
+        html: @props.article.get('lead_paragraph') or ''
         onChange: @setLeadParagraph
-        placeholder: 'Lead paragraph (optional)'
+        placeholder: 'Lead Paragraph (optional)'
+        type: 'lead_paragraph'
+        linked: true
+        linebreaks: false
+        layout: @props.article.get('layout')
       }
 
   render: ->
@@ -48,7 +51,7 @@ module.exports = React.createClass
           onKeyUp: @setTitle
           ref: 'title'
         }
-        unless @props.article.get('title')?.length > 0
+        unless @props.article.get('title')?.length
           div { className: 'edit-required' }
 
       if layout is 'classic'

diff --git a/client/apps/edit/components/content2/sections/header/test/index.coffee b/client/apps/edit/components/content2/sections/header/test/index.coffee
@@ -19,8 +19,8 @@ describe 'SectionHeader: Classic', ->
       benv.expose $: benv.require 'jquery'
       global.HTMLElement = () => {}
       SectionHeader = benv.require resolve(__dirname, '../index.coffee')
-      RichTextParagraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/input_paragraph.coffee')
-      SectionHeader.__set__ 'RichTextParagraph', React.createFactory RichTextParagraph
+      Paragraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/paragraph.coffee')
+      SectionHeader.__set__ 'Paragraph', React.createFactory Paragraph
       @article = new Article _.extend fixtures().articles,
         layout: 'classic'
         author:
@@ -69,7 +69,7 @@ describe 'SectionHeader: Classic', ->
   describe 'Lead Paragraph', ->
 
     it 'renders a lead paragraph component', ->
-      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph__input">'
+      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph">'
 
     it 'Can display a saved lead paragraph', ->
       $(ReactDOM.findDOMNode(@component)).html().should.containEql 'Just before the lines start forming...'
@@ -112,8 +112,8 @@ describe 'SectionHeader: Standard', ->
       benv.expose $: benv.require 'jquery'
       global.HTMLElement = () => {}
       SectionHeader = benv.require resolve(__dirname, '../index.coffee')
-      RichTextParagraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/input_paragraph.coffee')
-      SectionHeader.__set__ 'RichTextParagraph', React.createFactory RichTextParagraph
+      Paragraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/input_paragraph.coffee')
+      SectionHeader.__set__ 'Paragraph', React.createFactory Paragraph
       @article = new Article _.extend fixtures().articles,
         layout: 'standard'
         author:
@@ -143,15 +143,15 @@ describe 'SectionHeader: Standard', ->
   describe 'Lead Paragraph', ->
 
     it 'renders a lead paragraph component if field has text', ->
-      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph__input">'
+      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph">'
+
+    it 'Can display a saved lead paragraph', ->
+      $(ReactDOM.findDOMNode(@component)).text().should.containEql 'Just before the lines start forming...'
 
     it 'does not render lead paragraph component if field is empty', ->
       @component.props.article.set('lead_paragraph', '')
       @component.forceUpdate()
-      $(ReactDOM.findDOMNode(@component)).html().should.not.containEql '<div class="rich-text--paragraph__input">'
-
-    it 'Can display a saved lead paragraph', ->
-      $(ReactDOM.findDOMNode(@component)).html().should.containEql 'Just before the lines start forming...'
+      $(ReactDOM.findDOMNode(@component)).html().should.not.containEql '<div class="rich-text--paragraph">'
 
     it '#setLeadParagraph sets and saves article lead paragraph on change', ->
       @component.setLeadParagraph('<p>A new paragraph</p>')

diff --git a/client/apps/edit/components/content2/sections/text/index.coffee b/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'
-EditNav = React.createFactory require '../../../../../../components/rich_text2/components/edit_nav.coffee'
+Nav = React.createFactory require '../../../../../../components/rich_text2/components/edit_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'
@@ -282,7 +282,7 @@ module.exports = React.createClass
     },
       Text { layout: @props.article.get 'layout' },
         if @state.showMenu
-          EditNav {
+          Nav {
             hasFeatures: @state.hasFeatures
             blocks: Config.blockTypes @props.article.get('layout'), @state.hasFeatures
             toggleBlock: @toggleBlockType

diff --git a/client/apps/edit/components/content2/sections/text/test/index.coffee b/client/apps/edit/components/content2/sections/text/test/index.coffee
@@ -38,11 +38,11 @@ describe 'Section Text', ->
       InputUrl = benv.requireWithJadeify(
         resolve(__dirname, '../../../../../../../components/rich_text2/components/input_url'), ['icons']
       )
-      EditNav = benv.requireWithJadeify(
+      Nav = benv.requireWithJadeify(
         resolve(__dirname, '../../../../../../../components/rich_text2/components/edit_nav'), ['icons']
       )
       @SectionText.__set__ 'InputUrl', React.createFactory InputUrl
-      @SectionText.__set__ 'EditNav', React.createFactory EditNav
+      @SectionText.__set__ 'Nav', React.createFactory Nav
       @SectionText.__set__ 'Utils.stickyControlsBox', sinon.stub().returns {top: 20, left: 40}
       @SectionText.__set__ 'Utils.getSelectionLocation', sinon.stub().returns({top: 20, left: 40})
       @sections = new Backbone.Collection [

diff --git a/client/components/rich_text2/components/paragraph.coffee b/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
-EditNav = React.createFactory require './edit_nav.coffee'
+Nav = React.createFactory require './edit_nav.coffee'
 InputUrl = React.createFactory require './input_url.coffee'
 Text = React.createFactory components.Text
 
@@ -43,7 +43,7 @@ module.exports = React.createClass
     )
     focus: false
     showUrlInput: false
-    showMenu: false
+    showNav: false
     urlValue: ''
     selectionTarget: null
 
@@ -157,7 +157,7 @@ module.exports = React.createClass
         url = linkInstance.getData().url
     @setState
       showUrlInput: true
-      showMenu: false
+      showNav: false
       urlValue: url
       selectionTarget: selectionTarget
 
@@ -173,7 +173,7 @@ module.exports = React.createClass
     newEditorState = EditorState.set editorState, { currentContent: contentStateWithEntity }
     @setState({
       showUrlInput: false
-      showMenu: false
+      showNav: false
       urlValue: ''
       selectionTarget: null
     })
@@ -204,22 +204,22 @@ module.exports = React.createClass
       }
 
   checkSelection: ->
-    debugger
     if !window.getSelection().isCollapsed
       location = Utils.getSelectionLocation $(ReactDOM.findDOMNode(@refs.editor)).offset()
-      selectionTargetL = Config.inlineStyles().length * 45
-      @setState showMenu: true, selectionTarget: Utils.stickyControlsBox(location, -43, selectionTargetL)
+      selectionTargetL = Config.inlineStyles(@props.type).length * 50
+      selectionTargetL = selectionTargetL + 50 if @hasLinks()
+      @setState showNav: true, selectionTarget: Utils.stickyControlsBox(location, -43, selectionTargetL)
     else
-      @setState showMenu: false
+      @setState showNav: false
 
   render: ->
     Text {
       layout: @props.layout
-      postscript: @props.postscript
+      postscript: @props.type is 'postscript'
     },
-      if @state.showMenu
-        EditNav {
-          styles: Config.inlineStyles()
+      if @state.showNav
+        Nav {
+          styles: Config.inlineStyles(@props.type)
           toggleStyle: @toggleInlineStyle
           promptForLink: @promptForLink
           position: @state.selectionTarget