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

<div class="row">
  <%= form_for @content, multipart: true do |form| %>
    <div class="col s12 m9">
      <div class="hoverable card">
        <div class="card-image">
          <%= render partial: 'content/display/image_card_header' %>
          <%= render partial: 'content/display/floating_action_buttons', locals: { editing: true } %>
        </div>
        <%= render partial: 'content/form', locals: { f: form, content: @serialized_content } %>
      </div>
    </div>

    <div class="col s12 m3">
      <%=
        render partial: 'content/display/sidelinks',
          locals: {
            editing: true,
            content: @serialized_content
          }
      %>
    </div>
  <% end %>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $('.slider').slider({
      height: 200,
      indicators: false
    });

    var tribute = new Tribute({
      values: [
        <% @linkables_cache.each do |class_name, collection| %>
          <% linkable_class = class_name.constantize %>
          <% collection.each do |page_name, page_id| %>
            {
              key:   "<%= page_name.gsub('"', "\"").gsub("\n", " ").gsub("\r", " ").strip %>",
              value: '[[<%= class_name %>-<%= page_id %>]]',
              color: '<%= linkable_class.color %>',
              icon:  '<%= linkable_class.icon %>'
            },
          <% end %>
        <% end %>
      ],
      selectTemplate: function (item) {
        // We're overriding the default here so we don't prepend a @
        return item.original.value;
      },
      menuItemTemplate: function (item) {
        return '<i class="material-icons right ' + item.original.color + '-text">' + item.original.icon + '</i>' + item.string;
      },
      spaceSelectsMatch: false
    });
    tribute.attach(document.querySelectorAll('.js-can-mention-pages'));
  });
</script>

<% if @content.persisted? %>
  <%= render partial: 'content/share', locals: { shared_content: @content} %>
<% end %>