revelry_content 0.0.0 → 0.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4b28bbdb1b876e965e7386637ba544914f6b2948
-  data.tar.gz: c2564163d4f6cc415cb3895e1696f5ee6eb4eaae
+  metadata.gz: 830867e74bccfaedb121caa8eb50834cdfe0ac3f
+  data.tar.gz: 6e72cba8c5a34636bf5c2749eb51511b968e0194
 SHA512:
-  metadata.gz: 055dabf42c5bb78e7667d45103ab8af9ed50a0b8d9bd31c22703e6a3668995510ecfe304f6a38fe46806650291e9442ead95df40aa34cc474e0a8884621849ca
-  data.tar.gz: 722f2c12753be4cd5ab2f6ece678f64255e51b0cba7f289b4329c091d5ce6d3245d9ddaa58e8f10240fd145a115467f9d2f8a637ef717e2b2b0dcc7c27f1f12d
+  metadata.gz: b61dc71cfb12d9bada0ff92a6aed69f171d7f919a186e8c3b9c741045d492acfaafe60a56259d697a970b98909049e3fe1a8d09e3333e9d9f6175e64afd0ba6e
+  data.tar.gz: 01722e991c6198cde3568cc3f9e07507ca765be7f143d51e9e2f81c915880fb8605813382cbf24881f8cd5f1068b6cdf34a8d307f143abf97a65d3b81756635c

data/README.md

@@ -1,7 +1,178 @@
-# revelry_content
+RevelryContent
+===
 
-Coming soon.
-Not in that way that people say "coming soon" as some sort of teaser.
-Coming soon as in the code exists already.
-We're actively prepping it to go in this repo.
-Something substantive should show up here within a few days, maybe a couple weeks at most.
+RevelryContent is a gem for managing admin-editable content within Rails applications.
+
+# Installation
+
+Add it to your gemfile.
+
+Then run:
+
+```bash
+bundle install
+rails g revelry_content:install
+rake db:migrate
+```
+
+Mount the engine in your routes.rb file:
+
+```ruby
+mount RevelryContent::Engine => "/revelry_content"
+```
+
+Include RevelryContent::WithRevelryContent in any controllers which need to show editable
+content. You probably want to include it in ApplicationController like so:
+
+```ruby
+class ApplicationController
+  include RevelryContent::WithRevelryContent
+  def index; end
+end
+```
+
+And include the editor javascript:
+```javascript
+//= require revelry_content
+```
+
+Add include the editor stylesheet:
+```css
+/*
+*= require revelry_content/application
+*/
+```
+
+
+# Configuration
+
+## Configuring authentication
+
+```ruby
+RevelryContent.configure do |config|
+  config.user_for_content do |controller|
+    # Your authentication logic here
+    controller.current_user
+  end
+end
+```
+
+## Configuring authorization
+
+You can set a block which takes two params `user` and `content` to handle authorization.
+True is authorized, false is unauthorized.
+
+```ruby
+RevelryContent.configure do |config|
+  config.authorization_policy do |user|
+    # Your authorization logic here
+    user.admin?
+  end
+end
+```
+
+## Configuring file uploads
+
+RevelryContent uses [carrierwave](https://github.com/carrierwaveuploader/carrierwave) to store image uploads. You'll want to configure carrierwave appropriately for your app.
+
+# Use in ERB Templates
+
+RevelryContent provides helpers for setting up edit controls:
+
+### Adding the RevelryContent menus and edit mode button
+
+Add the `revelry_content/contents/menus` partial to the page to place the edit button and top bar on the page. The top bar will be invisible unless we are in edit mode.
+
+```erb
+<%= render 'revelry_content/contents/menus' %>
+```
+
+### Editable text
+
+```erb
+<%= editable_text(lookup, t, user) %>
+```
+
+`lookup` is a lookup hash of the available content. If you have included `RevelryContent::WithRevelryContent` in your controller, `@revelry_content_contents` is the default lookup with all content.
+
+`t` is the content key of the content, which is just a unique string for each piece of changeable content.
+
+`user` is the user to give to the authorization policy. With devise, this is often `current_user`.
+
+So for, an editable homepage headline, with the standard lookup and
+`current_user` as the user, you would invoke the helper like this:
+
+```erb
+<%= editable_text(@revelry_contents_content, 'home.headline', current_user, default_text: 'Lorem ipsum') %>
+```
+
+### Editable images
+
+Editable images work in a similar manner to editable text:
+
+```erb
+<%= editable_image(@revelry_contents_content, 'home.image', current_user, default_url: 'http://placehold.it/200x200') %>
+```
+
+# Using in javascript (including React)
+
+## Making content available to javascript
+
+You can configure RevelryContent to export all of your content into javascript.
+
+```ruby
+RevelryContent.configure do |config|
+  config.js_export = true
+end
+```
+
+Then run the export task:
+
+```shell
+rake revelry_content:export_js
+```
+
+And include the exported js in your application.js:
+
+```javascript
+//= require revelry_content/content
+```
+
+and access it like this:
+
+```javascript
+RevelryContent.Content.home.headline
+```
+
+The javascript export will automatically update whenever content is updated.
+
+## Adding Editable Sections with React
+
+RevelryContent is built on React, so you can also directly invoke the React components:
+
+```coffeescript
+<RevelryContent.EditableText canEdit={ true } content={ RevelryContent.Content.home.headline } />
+```
+
+or
+
+```coffeescript
+<RevelryContent.EditableImage canEdit={ true } content={ RevelryContent.Content.home.image } />
+```
+
+[More details are availble here](https://github.com/revelrylabs/revelry_content/blob/master/react-components.md)
+
+
+## Adding the top bar and buttons with React
+
+```coffeescript
+<RevelryContent.TopBar />
+```
+
+and
+
+```coffeescript
+<RevelryContent.EditModeButton />
+```
+
+These do not require any props.

data/Rakefile

@@ -0,0 +1,34 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'RevelryContent'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/fonts/icomoon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xe600;" d="M512 951.294c-277.975 0-503.294-225.322-503.294-503.294s225.322-503.294 503.294-503.294 503.294 225.322 503.294 503.294-225.322 503.294-503.294 503.294zM590.941 262.825c-37.98-57.027-76.617-100.969-141.62-100.969-44.367 7.239-62.602 39.026-53.001 71.429l83.626 276.968c2.051 6.775-1.354 14.015-7.549 16.222-6.155 2.17-18.235-5.846-28.687-17.306l-50.563-60.822c-1.354 10.22-0.155 27.101-0.155 33.915 37.98 57.027 100.388 102.014 142.703 102.014 40.226-4.103 59.271-36.276 52.266-71.623l-84.205-278.322c-1.123-6.272 2.208-12.66 7.898-14.673 6.195-2.17 19.203 5.846 29.695 17.306l50.524 60.783c1.354-10.22-0.929-28.107-0.929-34.92zM579.675 624.58c-31.979 0-57.917 23.305-57.917 57.609s25.94 57.569 57.917 57.569 57.917-23.305 57.917-57.569c0-34.341-25.94-57.609-57.917-57.609z" />
+<glyph unicode="&#xe601;" d="M512 948.069c-276.288 0-500.069-223.781-500.069-500.069s223.781-500.069 500.069-500.069 500.069 223.781 500.069 500.069-223.781 500.069-500.069 500.069zM762.035 268.726l-70.759-70.759-179.274 179.274-179.274-179.274-70.759 70.759 179.274 179.274-179.274 179.274 70.759 70.759 179.274-179.274 179.274 179.274 70.759-70.759-179.274-179.274 179.274-179.274z" />
+<glyph unicode="&#xe602;" d="M992.785 143.476l-413.531 708.079c-34.486 34.486-90.442 34.486-124.928 0l-413.564-708.079c-34.486-34.453-34.486-90.376 0-124.895h951.99c34.552 34.519 34.552 90.442 0.033 124.895zM478.703 597.372c0 27.384 22.198 49.548 49.548 49.548s49.548-22.165 49.548-49.548v-231.226c0-27.351-22.198-49.548-49.548-49.548s-49.548 22.198-49.548 49.548v231.226zM528.549 151.172c-27.351 0-49.548 22.132-49.548 49.548 0 27.351 22.198 49.548 49.548 49.548s49.548-22.198 49.548-49.548c0-27.417-22.198-49.548-49.548-49.548z" />
+<glyph unicode="&#xe603;" d="M512 955.375c-280.218 0-507.375-227.157-507.375-507.375s227.157-507.375 507.375-507.375c280.166 0 507.375 227.157 507.375 507.428 0 280.166-227.209 507.323-507.375 507.323zM504.020 152.084h-2.695c-41.33 1.216-70.505 31.712-69.288 72.459 1.162 40.062 31.023 69.183 70.981 69.183l2.431-0.105c42.493-1.216 71.351-31.394 70.134-73.306-1.216-40.167-30.55-68.232-71.561-68.232zM677.954 497.257c-9.725-13.741-31.077-30.971-58.031-51.954l-29.701-20.453c-16.278-12.684-26.109-24.681-29.756-36.362-2.959-9.196-4.333-11.68-4.598-30.442v-4.756h-113.367l0.317 9.619c1.427 39.322 2.378 62.578 18.71 81.761 25.634 30.020 82.184 66.488 84.564 68.019 8.139 6.078 14.957 13.001 20.031 20.453 11.892 16.437 17.124 29.333 17.124 41.912 0 17.653-5.18 33.985-15.486 48.412-9.935 14.058-28.804 21.035-56.075 21.035-27.060 0-45.611-8.562-56.657-26.214-11.416-18.020-17.177-36.996-17.177-56.392v-4.862h-116.855l0.212 5.074c3.012 71.509 28.593 123.039 75.842 153.111 29.756 19.079 66.805 28.751 109.984 28.751 56.446 0 104.223-13.741 141.748-40.801 38.106-27.43 57.397-68.548 57.397-122.14-0.053-29.966-9.513-58.137-28.224-83.77z" />
+<glyph unicode="&#xe604;" d="M576 0c0 35.376-28.656 64-64 64h-384v768h384c35.344 0 64 28.624 64 64s-28.656 64-64 64h-448c-35.344 0-64-28.624-64-64v-896c0-35.376 28.656-64 64-64h448c35.344 0 64 28.624 64 64zM384 512c-35.344 0-64-28.624-64-64s28.656-64 64-64h384v-192l256 256-256 256v-192h-384z" />
+<glyph unicode="&#xe605;" d="M512 948.069c-276.037 0-500.069-224.031-500.069-500.069s224.031-500.069 500.069-500.069 500.069 224.031 500.069 500.069-224.031 500.069-500.069 500.069zM512 47.944c-221.030 0-400.056 179.025-400.056 400.056s179.025 400.056 400.056 400.056 400.056-179.025 400.056-400.056-179.025-400.056-400.056-400.056z" />
+<glyph unicode="&#xe606;" d="M512 698.035c-138.019 0-250.035-112.014-250.035-250.035s112.014-250.035 250.035-250.035 250.035 112.014 250.035 250.035-112.014 250.035-250.035 250.035zM512 948.069c-276.037 0-500.069-224.031-500.069-500.069s224.031-500.069 500.069-500.069 500.069 224.031 500.069 500.069-224.031 500.069-500.069 500.069zM512 47.944c-221.030 0-400.056 179.025-400.056 400.056s179.025 400.056 400.056 400.056 400.056-179.025 400.056-400.056-179.025-400.056-400.056-400.056z" />
+<glyph unicode="&#xe607;" d="M1020.194 448h-129.408v11.185c-5.892 241.903-203.169 436.233-445.672 436.233-246.323 0-445.945-200.331-445.945-447.418s199.622-447.309 445.945-447.309c103.549 0 198.858 35.462 274.584 94.82l-76.706 82.053c-55.429-40.808-123.843-65.086-197.876-65.086-184.728 0-334.486 150.249-334.486 335.522s149.758 335.522 334.486 335.522c180.963 0 328.321-144.193 334.158-324.339v-11.185h-145.774l190.621-212.443 196.076 212.443z" />
+<glyph unicode="&#xea2e;" d="M889.68 793.68c-93.608 102.216-228.154 166.32-377.68 166.32-282.77 0-512-229.23-512-512h96c0 229.75 186.25 416 416 416 123.020 0 233.542-53.418 309.696-138.306l-149.696-149.694h352v352l-134.32-134.32zM928 448c0-229.75-186.25-416-416-416-123.020 0-233.542 53.418-309.694 138.306l149.694 149.694h-352v-352l134.32 134.32c93.608-102.216 228.154-166.32 377.68-166.32 282.77 0 512 229.23 512 512h-96z" />
+<glyph unicode="&#xea7d;" d="M256 320c0 0 58.824 192 384 192v-192l384 256-384 256v-192c-256 0-384-159.672-384-320zM704 192h-576v384h125.876c10.094 11.918 20.912 23.334 32.488 34.18 43.964 41.19 96.562 72.652 156.114 93.82h-442.478v-640h832v268.624l-128-85.334v-55.29z" />
+</font></defs></svg>

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

@@ -0,0 +1,21 @@
+# @cjsx
+#= require ./revelry_content/utilities
+#= require ./revelry_content/config
+#= require ./vendor/react_ujs
+#= require jquery
+#= require underscore
+#= require backbone
+#= require moment
+#= require moment-timezone-with-data-2010-2020
+#= require_tree ./revelry_content/mixins
+#= require_tree ./revelry_content/models
+#= require_tree ./revelry_content/components
+
+RevelryContent.dispatcher = new Backbone.Model();
+
+$ ->
+  RevelryContent.Utilities.rev_script_loader React?, 'https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js', =>
+    RevelryContent.Utilities.exportLazyComponents()
+    RevelryContent.load_react_ujs()
+
+window.RevelryContent = RevelryContent

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

@@ -0,0 +1,90 @@
+RevelryContent.Utilities.lazyComponentDefinition ->
+  RevelryContent.AdminTopBar = React.createClass
+    render: ->
+      <nav className="topBar">
+        <ul className="inline-list right">
+          <li onClick={ @makePageButton('history') }>
+            <span className="icon-loop2"></span>
+            History
+          </li>
+          <a href={ RevelryContent.base_path + 'contents/export.json' }>
+          <li>
+            Export
+          </li>
+          </a>
+          <li onClick={ @makePageButton('import') }>
+            Import
+          </li>
+        </ul>
+        <div className="topBar-container">
+          <div className="topBar-items">
+            Content Admin
+          </div>
+        </div>
+      </nav>
+
+    makePageButton: (page)->
+      return (e)->
+        RevelryContent.dispatcher.trigger 'pageChange', page
+
+  RevelryContent.AdminTabbedArea = React.createClass
+    getInitialState: ->
+      state =
+        page: @firstChildPage()
+
+    render: ->
+      @findChildByPage(@state.page)
+
+    findChildByPage: (page)->
+      return null unless @props.children
+      if React.Children.count == 1
+        if React.Children.only.props.adminTabPage == page
+          return React.Children.only
+        else
+          return null
+      else
+        for child in @props.children
+          if child.props.adminTabPage == page
+            return child
+      return null
+
+    firstChildPage: ->
+      return null unless @props.children
+      if React.Children.count == 1
+        return React.Children.only.props.adminTabPage
+      else
+        return @props.children[0].props.adminTabPage
+
+    componentDidMount: ->
+      RevelryContent.dispatcher.on 'pageChange', @onPageChange
+
+    componentWillUnmount: ->
+      RevelryContent.dispatcher.off 'pageChange', @onPageChange
+
+    onPageChange: (page)->
+      @setState page: page
+
+  RevelryContent.ImportTab = React.createClass
+    render: ->
+      <form action="import" method="POST" enctype="multipart/form-data" className="EditablePages">
+        <input type="hidden" name="authenticity_token" value={ RevelryContent.Utilities.getAuthenticityToken() } />
+        <h2>Import</h2>
+        <label>
+          <div>
+            <input type="file" name="import" />
+          </div>
+        </label>
+        <button className="Button">
+          Import
+        </button>
+      </form>
+
+  RevelryContent.AdminPage = React.createClass
+    render: ->
+      <div>
+        <RevelryContent.AdminTopBar />
+        <RevelryContent.AdminTabbedArea>
+          <RevelryContent.VersionHistory adminTabPage="history" />
+          <RevelryContent.ImportTab adminTabPage="import" />
+        </RevelryContent.AdminTabbedArea>
+      </div>

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

@@ -0,0 +1,16 @@
+RevelryContent.Utilities.lazyComponentDefinition ->
+  RevelryContent.EditModeButton = React.createClass
+    render: ->
+      <button className="EditModeButton" onClick={ @toggleEdit }>
+        {
+          if RevelryContent.inEditMode
+            "Preview this page"
+          else
+            "Edit this page"
+        }
+      </button>
+
+    toggleEdit: ->
+      RevelryContent.inEditMode = !RevelryContent.inEditMode
+      RevelryContent.dispatcher.trigger 'didChangeEditMode'
+      @forceUpdate()

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

@@ -0,0 +1,10 @@
+RevelryContent.Utilities.lazyComponentDefinition ->
+  RevelryContent.Loader = React.createClass
+    render: ->
+      <div className="RevelryContent-loader">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>

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

@@ -0,0 +1,15 @@
+RevelryContent.Utilities.lazyComponentDefinition ->
+  RevelryContent.Timestamp = React.createClass
+    getDefaultProps: ->
+      props =
+        format: 'YYYY-MM-DD'
+
+    render: ->
+      datetime_moment = moment(@props.datetime)
+      <span {..._(@props).omit('datetime')} className="TimeAgo #{ @props.className or '' }">
+        { datetime_moment.format(@props.format) }
+        {
+          if @props.withTimeAgo? && @props.withTimeAgo
+            <span>&nbsp;({ datetime_moment.fromNow() })</span>
+        }
+      </span>

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

@@ -0,0 +1,20 @@
+# @cjsx
+
+RevelryContent.Utilities.lazyComponentDefinition ->
+  RevelryContent.TopBar = React.createClass
+    mixins: [RevelryContent.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>
+          </div>
+        </nav>
+      else
+        <span />

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

@@ -0,0 +1,295 @@
+# @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 }} />
+        {
+          if @state.editing && RevelryContent.inEditMode
+            <RevelryContent.TextEditor content={ @getContent() } onSave={ @onSave } onCancel={ @onCancel } />
+        }
+      </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 } />
+        }
+      </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>
+      </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