notebook/app/views/documents/edit.html.erb

<%= form_for @document do |f| %>
  <%= content_for :navbar_left_content do %>
    <%= render partial: 'documents/components/document_name_bar', locals: { document: @document, f: f } %>
  <% end %>

  <%= content_for :full_width_page_header do %>
    <%= render partial: 'documents/components/autosave_bar', locals: { document: @document } %>

    <div class="row">
      <div class="col s12 m8 l8 offset-l1">
        <div id="editor" class="editable"><%= @document.body.try(:html_safe) %></div>
      </div>
      <div class="col s12 m4 l2 smart-sidebar">
        <%= render partial: 'documents/components/smart_sidebar', locals: { document: @document } %>
      </div>
    </div>
  <% end %>

  <div class="grey-text autosave-bar">
    <i class="material-icons js-autosave-icon grey-text">save</i>
    <span class="js-autosave-status">
      This document will automatically save as you make changes.
      Highlight any text to bring up formatting options.
    </span>
  </div>
<% end %>

<div style="clear: both"></div>
<%= content_for :javascript do %>

  var editor = new MediumEditor('#editor', {
    targetBlank: true,
    autoLink: true,
    buttonLabels: 'fontawesome',
    toolbar: {
      buttons: [
          'bold',
          'italic',
          'underline',
          'strikethrough',
          {
              name: 'h1',
              action: 'append-h2',
              aria: 'header type 1',
              tagNames: ['h2'],
              contentDefault: '<b>H1</b>',
              classList: ['custom-class-h1'],
              attrs: {
                  'data-custom-attr': 'attr-value-h1'
              }
          },
          {
              name: 'h2',
              action: 'append-h3',
              aria: 'header type 2',
              tagNames: ['h3'],
              contentDefault: '<b>H2</b>',
              classList: ['custom-class-h2'],
              attrs: {
                  'data-custom-attr': 'attr-value-h2'
              }
          },
          {
              name: 'h3',
              action: 'append-h4',
              aria: 'header type 3',
              tagNames: ['h4'],
              contentDefault: '<b>H3</b>',
              classList: ['custom-class-h3'],
              attrs: {
                  'data-custom-attr': 'attr-value-h3'
              }
          },
          'justifyLeft',
          'justifyCenter',
          'justifyRight',
          'justifyFull',
          'orderedlist',
          // 'indent',
          // 'outdent',
          'quote',
          'anchor',
          'removeFormat'

          // https://github.com/yabwe/medium-editor#button-options
      ]
    },
    anchorPreview: {
        hideDelay: 0
    },
    placeholder: {
        text: 'Write as little or as much as you want!'
    },
    paste: {
      forcePlainText: false
    }
  });

  function autosave() {
    if (autosave_event === null) {
      console.log('Queueing autosave');
      $('.js-autosave-icon').addClass('grey-text');
      $('.js-autosave-icon').removeClass('black-text');
      $('.js-autosave-icon').removeClass('red-text');
      $('.js-autosave-status').text('Saving changes...');

      autosave_event = setTimeout(function () {
        console.log('Autosaving...');
        $('.js-autosave-status').text('Saving...');
        autosave_event = null;

        // Do the autosave
        last_autosave = $.ajax({
          type: "PATCH",
          url: '<%= document_url(@document) %>',
          data: {
            document: {
              title: $('#document_title').val(),
              body:  $('#editor').html()
            }
          },
        });

        last_autosave.fail(function(jqXHR, textStatus) {
          $('.js-autosave-status').text('There was a problem saving! We will try to save again, but please make sure you back up any changes.');
          $('.js-autosave-status').addClass('red-text');
          $('.js-autosave-status').removeClass('grey-text');
          $('.js-autosave-status').removeClass('black-text');
        });

        // Done!
        $('.js-autosave-icon').addClass('black-text');
        $('.js-autosave-icon').removeClass('grey-text');
        $('.js-autosave-icon').removeClass('red-text');
        $('.js-autosave-status').text('Saved!');
      }, 2500);
    } else {
      console.log('Waiting for existing autosave');
    }
  }

  // Autosave
  var autosave_event = null;
  var last_autosave = null;
  editor.subscribe('editableInput', autosave);
  $('#document_title').on('change', autosave);
  $('#document_title').on('keydown', autosave);
  $('.js-autosave-status').on('click', autosave);

  // Allow entering `tab` into the editor
  $(document).delegate('#editor', 'keydown', function(e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode == 9) {
      e.preventDefault();
      /*
      var start = this.selectionStart;
      var end = this.selectionEnd;

      // set textarea value to: text before caret + tab + text after caret
      $(this).html($(this).html().substring(0, start)
                  + "space here"
                  + $(this).html().substring(end));

      // put caret at right position again
      this.selectionStart =
      this.selectionEnd = start + 1;
      */
    }
  });

<% end %>