 define (require) ->
   $ = require('jquery')
   Mathjax = require('mathjax')
-  BaseView = require('cs!helpers/backbone/views/base')
+  EditableView = require('cs!helpers/backbone/views/editable')
   template = require('hbs!./body-template')
   require('less!./body')
 
-  return class MediaBodyView extends BaseView
+  return class MediaBodyView extends EditableView
     template: template
+
+    editable: '.media-body'
 
     events:
       'click .solution > .ui-toggle-wrapper > .ui-toggle': 'toggleSolution'

    initialize: () ->
      super()
      @listenTo(@model, 'changePage', @render)
      @listenTo(@model, 'change:edit', @toggleEdit)

      @observer = new MutationObserver (mutations) =>
        mutations.forEach (mutation) =>
          page = @model.get('currentPage')

          @model.set('changed', true)
          page.set('changed', true)

    onRender: () ->
      MathJax.Hub.Queue(['Typeset', MathJax.Hub], @$el.get(0))

    toggleSolution: (e) ->
      $solution = $(e.currentTarget).closest('.solution')
      $solution.toggleClass('ui-solution-visible')
