     .always osu.hideLoadingOverlay
 
 
-  _change: (e) => @setState(raw: e.target.value)
+  _change: (e) =>
+    $.publish 'user:page:update',
+      raw: e.target.value
 
 
   render: =>

el = React.createElement

class ProfilePage.UserPageEditor extends React.Component
  constructor: (props) ->
    super props
    @state = raw: @props.userPage.raw


  componentDidMount: =>
    body = @_body()
    $(body).on 'change', @_change
    body.selectionStart = @props.userPage.selection[0]
    body.selectionEnd = @props.userPage.selection[1]
    @_focus()


  componentWillUnmount: =>
    body = @_body()
    $(body).off 'change', @_change

    $.publish 'user:page:update',
      raw: @state.raw
      selection: [body.selectionStart, body.selectionEnd]


  _body: => React.findDOMNode(@refs.body)


  _focus: => @_body().focus()


  _reset: (_e, callback) =>
    if typeof callback != 'function'
      callback = @_focus

    @setState raw: @props.userPage.initialRaw, callback


  _cancel: =>
    @_reset null, ->
      $.publish 'user:page:update', editing: false


  _save: (e) =>
    body = @state.raw
    osu.showLoadingOverlay()

    $.ajax window.changePageUrl,
      method: 'PUT'
      dataType: 'json'
      data: body: body
    .done (data) ->
      $.publish 'user:page:update',
        html: data.html

      el 'textarea',
        className: 'flex-full profile-page-editor-body'
        name: 'body'
        value: @props.userPage.raw
        onChange: @_change
        placeholder: Lang.get('users.show.page.placeholder')
        ref: 'body'
