revelry_content 0.0.1.2 → 1.0.0

data/app/assets/javascripts/revelry_content/components/TopBar.js.cjsx

@@ -1,20 +1,19 @@
 # @cjsx
 
-RevelryContent.Utilities.lazyComponentDefinition ->
-  RevelryContent.TopBar = React.createClass
-    mixins: [RevelryContent.EditModeListener]
+Rev.Content.TopBar = React.createClass
+  mixins: [Rev.Content.EditModeListener]
 
-    render: ->
-      if RevelryContent.inEditMode
-        <nav className="topBar">
-          <ul className="inline-list right">
-            <a href={ "#{RevelryContent.base_path}contents" }><li><span className="icon-loop2"></span>History</li></a>
-          </ul>
-          <div className="topBar-container">
-            <div className="topBar-items"><span className="icon-warning"></span>
-              You're in edit mode - Don't screw anything up!
-            </div>
+  render: ->
+    if Rev.Content.inEditMode
+      <nav className="topBar">
+        <ul className="inline-list right">
+          <a href={ "#{Rev.Content.base_path}contents" }><li><span className="icon-loop2"></span>History</li></a>
+        </ul>
+        <div className="topBar-container">
+          <div className="topBar-items"><span className="icon-warning"></span>
+            You're in edit mode - Don't screw anything up!
           </div>
-        </nav>
-      else
-        <span />
+        </div>
+      </nav>
+    else
+      <span />

data/app/assets/javascripts/revelry_content/components/editor.js.coffee

@@ -1,295 +1,327 @@
 # @cjsx
-
-RevelryContent.Utilities.lazyComponentDefinition ->
-  RevelryContent.EditableText = React.createClass
-    mixins: [RevelryContent.EditModeListener]
-
-    propTypes:
-      canEdit: React.PropTypes.bool
-      content: React.PropTypes.object
-      lookup: React.PropTypes.object
-      contentKey: React.PropTypes.string
-
-    getDefaultProps: ->
-      props =
-        canEdit: false
-
-    getInitialState: ->
-      state =
-        editing: false
-
-    render: ->
-      <div className={ @className() } {...@getHandlers()}>
-        <span dangerouslySetInnerHTML={{__html: @getContent().html_content }} />
+Rev.Content.EditableText = React.createClass
+  mixins: [Rev.Mixins.Core, Rev.Content.EditModeListener]
+
+  propTypes:
+    canEdit: React.PropTypes.bool
+    content: React.PropTypes.object
+    lookup: React.PropTypes.object
+    contentKey: React.PropTypes.string
+    defaultValue: React.PropTypes.string
+    disableMarkdown: React.PropTypes.bool
+
+  getDefaultProps: ->
+    props =
+      canEdit: false
+
+  getInitialState: ->
+    state =
+      editing: false
+
+  render: ->
+    <div className={ @className() } {...@getHandlers()}>
+      {
+        if @props.disableMarkdown
+          <span>{@getContent().content or @props.defaultValue or @props.children or @props.contentKey}</span>
+        else
+          <span dangerouslySetInnerHTML={{__html: @getContent().html_content }} />
+      }
+      {
+        if @state.editing && Rev.Content.inEditMode
+          <Rev.Content.TextEditor disableMarkdown={ @props.disableMarkdown } content={ @getContent() } onSave={ @onSave } onCancel={ @onCancel } />
+      }
+    </div>
+
+  getContent: ->
+    if @props.content? && @props.content
+      @props.content.content
+    else
+      (@props.lookup || App.props.revelry_content_contents)[@props.contentKey] || @defaultContent()
+
+  defaultContent: ->
+    { html_content: @props.defaultValue || @props.contentKey, key: @props.contentKey }
+
+  className: ->
+    classes =
+      EditableText: true
+      'EditableText--editing': @state.editing
+      'EditableText--inEditMode': Rev.Content.inEditMode
+    "#{this.classSet classes} #{@props.className or ''}"
+
+  getHandlers: ->
+    if Rev.Content.inEditMode and !@state.editing
+      { onClick: @onClick }
+    else
+      { }
+
+  onClick: (e) ->
+    # these 3 calls do nothing at the moment, but see the return comment
+    e.stopPropagation()
+    e.nativeEvent.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    @setState editing: true
+    return false # this is deprecated but it's the only thing that makes a parent link stop navigating
+
+  onCancel: ->
+    @setState editing: false
+
+  onSave: (model)->
+    @props.content = model.attributes
+    @setState editing: false
+
+Rev.Content.TextEditor = React.createClass
+  propTypes:
+    content: React.PropTypes.object.isRequired
+    onSave: React.PropTypes.func
+    disableMarkdown: React.PropTypes.bool
+
+  mixins: [Rev.Mixins.Core]
+
+  componentDidMount: ->
+    window.textEditor = @
+
+  componentWillUnmount: ->
+    window.textEditor = null
+
+  componentDidUpdate: (prevProps, prevState)->
+    if @state.newSelectionPosition
+      @setSelection @state.newSelectionPosition
+      @state.newSelectionPosition = null
+
+  getInitialState: ->
+    state =
+      contentString: @props.content.content
+      saving: false
+      error: false
+      linkURL: null
+
+  stateChangeHandler: (field)->
+    return (e)=>
+      e.preventDefault()
+      newState = {}
+      newState[field] = e.target.value
+      @setState(newState)
+
+  render: ->
+    <div className="EditorWrapper">
+      <div className={ @className() }>
         {
-          if @state.editing && RevelryContent.inEditMode
-            <RevelryContent.TextEditor content={ @getContent() } onSave={ @onSave } onCancel={ @onCancel } />
+          unless @props.disableMarkdown
+            <div className="ButtonBar">
+              <button className="EditorButton EditorButton--bold" onClick={ @onClickBold }>B</button>
+              <button className="EditorButton EditorButton--italic" onClick={ @onClickItalic }>I</button>
+              <button className="EditorButton EditorButton--underline" onClick={ @onClickUnderline }>u</button>
+              <button className="EditorButton EditorButton--link" onClick={ @openLinkFields }>Link</button>
+            </div>
         }
-      </div>
-
-    getContent: ->
-      if @props.content? && @props.content
-        @props.content
-      else
-        (@props.lookup || RevelryContent.Contents)[@props.contentKey] || @defaultContent()
-
-    defaultContent: ->
-      { html_content: '', key: this.props.contentKey }
-
-    className: ->
-      classes =
-        EditableText: true
-        'EditableText--editing': @state.editing
-        'EditableText--inEditMode': RevelryContent.inEditMode
-      React.addons.classSet classes
-
-    getHandlers: ->
-      if RevelryContent.inEditMode
-        { onClick: @onClick }
-      else
-        { }
-
-    onClick: ->
-      @setState editing: true
-
-    onCancel: ->
-      @setState editing: false
-
-    onSave: (model)->
-      @props.content = model.attributes
-      @setState editing: false
-
-  RevelryContent.TextEditor = React.createClass
-    propTypes:
-      content: React.PropTypes.object.isRequired
-      onSave: React.PropTypes.func
-
-    mixins: [React.addons.LinkedStateMixin]
-
-    componentDidMount: ->
-      window.textEditor = @
-
-    componentWillUnmount: ->
-      window.textEditor = null
-
-    componentDidUpdate: (prevProps, prevState)->
-      if @state.newSelectionPosition
-        @setSelection @state.newSelectionPosition
-        @state.newSelectionPosition = null
-
-    getInitialState: ->
-      state =
-        contentString: @props.content.content
-        saving: false
-        error: false
-        linkURL: null
-
-    render: ->
-      <div className="EditorWrapper">
-        <div className={ @className() }>
-          <div className="ButtonBar">
-            <button className="EditorButton EditorButton--bold" onClick={ @onClickBold }>B</button>
-            <button className="EditorButton EditorButton--italic" onClick={ @onClickItalic }>I</button>
-            <button className="EditorButton EditorButton--underline" onClick={ @onClickUnderline }>u</button>
-            <button className="EditorButton EditorButton--link" onClick={ @openLinkFields }>Link</button>
-          </div>
-          {
-            if @state.linkFieldsVisible
-              <div>
-                <label>
-                  Link:
-                  <div>Anchor: { @getSelection().text }</div>
-                  <input valueLink={ @linkState('linkURL') } />
-                  <button onClick={ @onMakeLink }>Make Link</button>
-                </label>
-              </div>
-          }
-          <textarea valueLink={@linkState('contentString')} ref='textarea'>
-            { @state.contentString }
-          </textarea>
-          <div>
-            <button className="EditorButton" onClick={ @onCancel }>Cancel</button>
-            <button className="EditorButton" onClick={ @saveEdits }>Save</button>
-          </div>
-        </div>
-      </div>
-
-    openLinkFields: ->
-      @setState linkFieldsVisible: !@state.linkFieldsVisible
-
-    onMakeLink: ->
-      # [text that is a link](http://…)
-      left = '['
-      right = "](#{ @state.linkURL })"
-      @setState contentString: @wrappedSelection(left, right), linkFieldsVisible: false, newSelectionPosition: @getSelection().end + 1
-
-    onClickBold: (e)->
-      @setState contentString: @wrappedSelection('**'), newSelectionPosition: @getSelection().end + 1
-
-    onClickItalic: (e)->
-      @setState contentString: @wrappedSelection('*'), newSelectionPosition: @getSelection().end + 1
-
-    onClickUnderline: (e)->
-      @setState contentString: @wrappedSelection('_'), newSelectionPosition: @getSelection().end + 1
-
-    wrappedSelection: (left, right)->
-      right ||= left
-      selection = @getSelection()
-      beforeSelection = @state.contentString[0...selection.start]
-      selectedText = selection.text
-      afterSelection = @state.contentString[selection.end...]
-      "#{ beforeSelection }#{ left }#{ selectedText }#{ right }#{afterSelection}"
-
-    className: ->
-      classes =
-        TextEditor: true
-        'TextEditor--saving': @state.editing
-        'TextEditor--error': @state.error
-      React.addons.classSet classes
-
-    makeModel: ->
-      attributes =
-        authenticity_token: RevelryContent.Utilities.getAuthenticityToken()
-        content:
-          key: @props.content.key
-          content: @state.contentString
-      model = new RevelryContent.Models.Content attributes
-
-    saveEdits: ->
-      model = @makeModel()
-      @setState saving: true, error: false
-      model.once 'sync', @onSave
-      model.once 'error', @onSaveError
-      model.save()
-
-    onCancel: (e)->
-      e.stopPropagation()
-      @props.onCancel() if @props.onCancel
-
-    onSave: (model)->
-      @setState saving: false, error: false
-      @props.content.content = @state.contentString
-      @props.onSave(model) if @props.onSave
-
-    onSaveError: ->
-      @setState saving: false, error: true
-
-    setSelection: (position)->
-      node = @refs.textarea.getDOMNode()
-      node.focus()
-      node.setSelectionRange(position, position)
-
-    getSelection: ->
-      start = @refs.textarea.getDOMNode().selectionStart
-      end = @refs.textarea.getDOMNode().selectionEnd
-      selection =
-        start: start
-        end: end
-        text: @state.contentString[start...end]
-
-  RevelryContent.EditableImage = React.createClass
-    mixins: [RevelryContent.EditModeListener]
-
-    propTypes:
-      canEdit: React.PropTypes.bool
-      content: React.PropTypes.object
-      lookup: React.PropTypes.object
-      contentKey: React.PropTypes.string
-
-    getContent: ->
-      if @props.content?
-        @props.content
-      else
-        (@props.lookup || RevelryContent.Content)[@props.contentKey]
-
-    getDefaultProps: ->
-      props =
-        canEdit: false
-
-    getInitialState: ->
-      state =
-        editing: false
-
-    render: ->
-      <div className={ @className() } {...@getHandlers()}>
-        <img src={ @getContent().src } />
         {
-          if @state.editing && RevelryContent.inEditMode
-            <RevelryContent.ImageEditor contentKey={ @getContent().key } content={ @getContent().src } onSave={ @onSave } onCancel={ @onCancel } />
+          if @state.linkFieldsVisible
+            <div>
+              <label>
+                Link:
+                <div>Anchor: { @getSelection().text }</div>
+                <input onChange={ @stateChangeHandler('linkURL') } />
+                <button onClick={ @onMakeLink }>Make Link</button>
+              </label>
+            </div>
         }
+        <textarea autoFocus onChange={@stateChangeHandler('contentString')} ref='textarea'>
+          { @state.contentString }
+        </textarea>
+        <div>
+          <button className="EditorButton" onClick={ @onCancel }>Cancel</button>
+          <button className="EditorButton" onClick={ @saveEdits }>Save</button>
+        </div>
       </div>
-
-    className: ->
-      classes =
-        EditableImage: true
-        'EditableImage--editing': @state.editing
-        'EditableImage--inEditMode': RevelryContent.inEditMode
-      React.addons.classSet classes
-
-    getHandlers: ->
-      if RevelryContent.inEditMode
-        { onClick: @onClick }
-      else
-        { }
-
-    onClick: ->
-      @setState editing: true
-
-    onCancel: ->
-      @setState editing: false
-
-    onSave: (model)->
-      @getContent().src = model.get('src')
-      @setState editing: false
-
-  RevelryContent.ImageEditor = React.createClass
-    propTypes:
-      content: React.PropTypes.object.isRequired
-      onSave: React.PropTypes.func
-
-    componentDidMount: ->
-      window.imageEditor = @
-
-    componentWillUnmount: ->
-      window.imageEditor = null
-
-    getInitialState: ->
-      state =
-        image: @props.content
-        saving: false
-        error: false
-
-    render: ->
-      <div className="EditorWrapper">
-        <div className={ @className() }>
-          <input ref="fileField" type="file"></input>
-          <div>
-            <button className="EditorButton" type="button" onClick={ @onCancel }>Cancel</button>
-            <button className="EditorButton" type="button" onClick={ @saveEdits }>Save</button>
-          </div>
+    </div>
+
+  openLinkFields: ->
+    @setState linkFieldsVisible: !@state.linkFieldsVisible
+
+  onMakeLink: ->
+    # [text that is a link](http://…)
+    left = '['
+    right = "](#{ @state.linkURL })"
+    @setState contentString: @wrappedSelection(left, right), linkFieldsVisible: false, newSelectionPosition: @getSelection().end + 1
+
+  onClickBold: (e)->
+    @setState contentString: @wrappedSelection('**'), newSelectionPosition: @getSelection().end + 1
+
+  onClickItalic: (e)->
+    @setState contentString: @wrappedSelection('*'), newSelectionPosition: @getSelection().end + 1
+
+  onClickUnderline: (e)->
+    @setState contentString: @wrappedSelection('_'), newSelectionPosition: @getSelection().end + 1
+
+  wrappedSelection: (left, right)->
+    right ||= left
+    selection = @getSelection()
+    beforeSelection = @state.contentString[0...selection.start]
+    selectedText = selection.text
+    afterSelection = @state.contentString[selection.end...]
+    "#{ beforeSelection }#{ left }#{ selectedText }#{ right }#{afterSelection}"
+
+  className: ->
+    classes =
+      TextEditor: true
+      'TextEditor--saving': @state.editing
+      'TextEditor--error': @state.error
+    this.classSet classes
+
+  makeModel: ->
+    attributes =
+      authenticity_token: App.props.csrf_token
+      content:
+        key: @props.content.key
+        content: @state.contentString
+    model = new Rev.Content.Models.Content attributes
+
+  saveEdits: ->
+    model = @makeModel()
+    @setState saving: true, error: false
+    model.once 'sync', @onSave
+    model.once 'error', @onSaveError
+    model.save()
+
+  onCancel: (e)->
+    e.stopPropagation()
+    @props.onCancel() if @props.onCancel
+
+  onSave: (model)->
+    @setState saving: false, error: false
+    @props.content.content = @state.contentString
+    @props.onSave(model) if @props.onSave
+
+  onSaveError: ->
+    @setState saving: false, error: true
+
+  setSelection: (position)->
+    node = @refs.textarea.getDOMNode()
+    node.focus()
+    node.setSelectionRange(position, position)
+
+  getSelection: ->
+    start = @refs.textarea.getDOMNode().selectionStart
+    end = @refs.textarea.getDOMNode().selectionEnd
+    selection =
+      start: start
+      end: end
+      text: @state.contentString[start...end]
+
+Rev.Content.EditableImage = React.createClass
+  mixins: [Rev.Mixins.Core, Rev.Content.EditModeListener]
+
+  propTypes:
+    canEdit: React.PropTypes.bool
+    content: React.PropTypes.object
+    lookup: React.PropTypes.object
+    contentKey: React.PropTypes.string
+    defaultSrc: React.PropTypes.string
+
+  getContent: ->
+    if @props.content?
+      @props.content
+    else
+      (@props.lookup || App.props.revelry_content_contents)[@props.contentKey] || @defaultContent()
+
+  defaultContent: ->
+    { src: @props.defaultSrc || @props.contentKey, key: @props.contentKey }
+
+  getDefaultProps: ->
+    props =
+      canEdit: false
+
+  getInitialState: ->
+    state =
+      editing: false
+
+  render: ->
+    <div className={ @className() } {...@getHandlers()}>
+      <img className={ @props.innerClassName } src={ @getContent().src } />
+      {
+        if @state.editing && Rev.Content.inEditMode
+          <Rev.Content.ImageEditor contentKey={ @getContent().key } content={ @getContent().src } onSave={ @onSave } onCancel={ @onCancel } />
+      }
+    </div>
+
+  className: ->
+    classes =
+      EditableImage: true
+      'EditableImage--editing': @state.editing
+      'EditableImage--inEditMode': Rev.Content.inEditMode
+    "#{this.classSet classes} #{@props.className or ''}"
+
+  getHandlers: ->
+    if Rev.Content.inEditMode and !@state.editing
+      { onClick: @onClick }
+    else
+      { }
+
+  onClick: (e) ->
+    # these 3 calls do nothing at the moment, but see the return comment
+    e.stopPropagation()
+    e.nativeEvent.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    @setState editing: true
+    return false # this is deprecated but it's the only thing that makes a parent link stop navigating
+
+  onCancel: ->
+    @setState editing: false
+
+  onSave: (model)->
+    @getContent().src = model.get('src')
+    @setState editing: false
+
+Rev.Content.ImageEditor = React.createClass
+  propTypes:
+    content: React.PropTypes.object.isRequired
+    onSave: React.PropTypes.func
+
+  mixins: [Rev.Mixins.Core]
+
+  componentDidMount: ->
+    window.imageEditor = @
+
+  componentWillUnmount: ->
+    window.imageEditor = null
+
+  getInitialState: ->
+    state =
+      image: @props.content
+      saving: false
+      error: false
+
+  render: ->
+    <div className="EditorWrapper">
+      <div className={ @className() }>
+        <input autoFocus ref="fileField" type="file"></input>
+        <div>
+          <button className="EditorButton" type="button" onClick={ @onCancel }>Cancel</button>
+          <button className="EditorButton" type="button" onClick={ @saveEdits }>Save</button>
         </div>
       </div>
-
-    className: ->
-      classes =
-        ImageEditor: true
-        'ImageEditor--saving': @state.editing
-        'ImageEditor--error': @state.error
-      React.addons.classSet classes
-
-    saveEdits: (e) ->
-      @setState saving: true, error: false
-      fc = new RevelryContent.Models.FileContent({ key: @props.contentKey, src: @refs.fileField.getDOMNode().files[0] })
-      fc.once 'sync', (model)=> @onSave(model)
-      fc.save()
-
-    onCancel: (e)->
-      e.stopPropagation()
-      @props.onCancel() if @props.onCancel
-
-    onSave: (model)->
-      @setState saving: false, error: false
-      @props.onSave(model) if @props.onSave
-
-    onSaveError: ->
-      @setState saving: false, error: true
+    </div>
+
+  className: ->
+    classes =
+      ImageEditor: true
+      'ImageEditor--saving': @state.editing
+      'ImageEditor--error': @state.error
+    this.classSet classes
+
+  saveEdits: (e) ->
+    @setState saving: true, error: false
+    fc = new Rev.Content.Models.FileContent({ key: @props.contentKey, src: @refs.fileField.getDOMNode().files[0] })
+    fc.once 'sync', (model)=> @onSave(model)
+    fc.save()
+
+  onCancel: (e)->
+    e.stopPropagation()
+    @props.onCancel() if @props.onCancel
+
+  onSave: (model)->
+    @setState saving: false, error: false
+    @props.onSave(model) if @props.onSave
+
+  onSaveError: ->
+    @setState saving: false, error: true