um link page name instead of code

app/models/concerns/has_attributes.rb

@@ -37,7 +37,7 @@ module HasAttributes
 
       # Always include  the flatfile categories (but create AR versions if they don't exist)
       categories = YAML.load_file(Rails.root.join('config', 'attributes', "#{content_name}.yml")).map do |category_name, details|
-        category = AttributeCategory.with_deleted.find_or_initialize_by(
+        category = AttributeCategory.with_deleted.find_or_initialize_by( # i think we can do resets by just deleting all and removing with_deleted here
           entity_type: self.content_name,
           name: category_name.to_s,
           user: user

app/views/documents/edit.html.erb

@@ -21,6 +21,7 @@
 
 <div style="clear: both"></div>
 <%= content_for :javascript do %>
+  // todo move this to global js that just triggers on any page with a .js-can-mention-pages
   $(document).ready(function(){
     // Page @mentions
     var tribute = new Tribute({
@@ -30,7 +31,8 @@
           <% collection.each do |page_name, page_id| %>
             {
               key:   "<%= page_name.gsub('"', "\"").gsub("\n", " ").gsub("\r", " ").strip %>",
-              value: '[[<%= class_name %>-<%= page_id %>]]',
+              class: '<%= class_name %>',
+              id:    <%= page_id %>,
               color: '<%= linkable_class.color %>',
               icon:  '<%= linkable_class.icon %>'
             },
@@ -39,10 +41,14 @@
       ],
       selectTemplate: function (item) {
         // We're overriding the default here so we don't prepend a @
-        return '<span class="' + item.original.color + '-text" contenteditable="false">' + item.original.value + '</span>';
+        return '<span class="page-link ' + item.original.color + '-text" contenteditable="false" '
+          + 'data-class="' + item.original.class + '"'
+          + 'data-id="'    + item.original.id + '">'
+          + item.original.key 
+          + '</span>';
       },
       menuItemTemplate: function (item) {
-        return '<i class="material-icons right ' + item.original.color + '-text">' + item.original.icon + '</i>' + item.string;
+        return '<i class="material-icons left ' + item.original.color + '-text">' + item.original.icon + '</i>' + item.string;
       },
       spaceSelectsMatch: false
     });