Button "Copy to clipboard" instead of "Add to description"

This allows the user to paste the code wherever they need. For example,
a blog post takes its contents from 'properties.content' and not from
the description field.

I also added an explanation for new attachment shortcode.

src/scripts/file_upload.js

@@ -1,3 +1,5 @@
+// This file requires script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
+
 function deleteFile(fileField, newFileId) {
     if (newFileId) {
         fileField.val(newFileId);
@@ -159,26 +161,21 @@ $(function () {
         })
         .on('file-upload:activated', on_file_upload_activated)
         .on('file-upload:finished', on_file_upload_finished)
-        .on('click', '.js-append-attachment', function(e) {
-            e.preventDefault();
-
-            // Append widget @[slug-name] to the post's description
-            // Note: Heavily connected to HTML in _node_edit_form.jade
-            var slug = $(this).parent().find("input[id*='slug']").val();
-            var widget = '@[' + slug + ']\n';
-
-            if (slug) {
-                var textarea_description = document.getElementById('description').value;
-                if (textarea_description) {
-                    textarea_description.value += widget;
-                    toastr.success('Attachment appended to description');
-                }
-            } else {
-                toastr.error('Slug is empty, upload something first');
-            }
-        })
     ;
 
+	new Clipboard('.js-append-attachment', {
+        text: function(trigger) {
+            var slug = $(trigger).parent().find("input[id*='slug']").val();
+            if (!slug) {
+                toastr.error('Slug is empty, upload something first');
+                return;
+            }
+            toastr.success('Attachment code copied, paste it where you want to show it.');
+            return '{attachment ' + slug + '}\n';
+        }
+    });
+
+
     function inject_project_id_into_url(index, element) {
         // console.log('Injecting ', ProjectUtils.projectId(), ' into ', element);
         var url = element.getAttribute('data-url');

src/templates/_macros/_node_edit_form.pug

@@ -19,9 +19,9 @@
 
 			| {% if subfield.name.endswith('slug') %}
 			button.fieldlist-action-button.js-append-attachment(
-				type="button")
+				type="button", data-clipboard)
 				i.pi-plus
-				| Append to Description
+				| Copy to clipboard
 			| {% endif %}
 
 			| {% endfor %}

src/templates/layout.pug

@@ -32,6 +32,7 @@ html(lang="en")
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery-3.1.0.min.js')}}")
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typeahead-0.11.1.min.js')}}")
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/js.cookie-2.0.3.min.js')}}")
+		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
 
 		script.
 

src/templates/nodes/edit_embed.pug

@@ -45,6 +45,10 @@
 				i.pi-plus
 				| Add New Attachment
 
+			p.text-muted
+				| Attachments can be included in any MarkDown field by using the #[code {attachment slug}] shortcode.
+				| This shortcode is placed on your copy-paste buffer by clicking "Copy to clipboard".
+
 		| {{ render_field(field, field.name) }}
 
 		| {% elif field.name == 'files' %}